Merge pull request #34 from christianhellsten/talking-to

Add ”talking to”

README.md

@@ -134,6 +134,8 @@ $ parcel build index.html
  - [ ] Speech recognition
  - [ ] Image upload / multi-modal
  - [ ] Markdown support
+ - [ ] Fork chat
+ - [ ] Fork chat before / after message
 
  ## Done
 
@@ -180,7 +182,13 @@ $ parcel build index.html
  - Delete chat
  - Download chat
  - Scroll to top/bottom
- - Copy chat to clipboard
+ - Copy to clipboard
+
+ **Chat message**
+
+ - Delete chat message
+ - Copy to clipboard
+ - Mark as good, bad, or flagged
 
  **Chats**
 
@@ -220,3 +228,8 @@ We value and support both our open source community and commercial users. By pro
 
  </summary>
 </details>
+
+<details>
+ <summary>Built with</summary>
+ HTML, CSS, and JavaScript
+</details>

css/ChatArea.scss

@@ -9,3 +9,11 @@
 #chat-menu-button {
  background-color: var(--secondary-bg-color);
 }
+
+#chat-model-info {
+ padding: 0.25rem 0.75rem;
+
+ .chat-model-name {
+ @extend %font-weight-bolder;
+ }
+}

css/animations.scss

@@ -7,22 +7,32 @@ ul {
 
 // Sidebar
 #sidebar {
- transition: min-width 0.5s ease-out, max-width 1s ease-out;
+ transition: min-width 0.5s ease-out, max-width 0.5s ease-out;
 }
 
 #sidebar.collapsed {
- transition: min-width 0.5s ease-in, max-width 1s ease-in;
+ transition: min-width 0.5s ease-in, max-width 0.5s ease-in;
 }
 
 // Modal dialogs
 .modal {
- transform: scale(0.9); /* Start slightly scaled down */
- transition: opacity 0.5s ease, transform 0.5s ease-in; /* Transition effect */
+ opacity: 0%;
+ transition: opacity 0.5s ease;
+
+ .modal-content {
+ transform: scale(0.9); /* Start slightly scaled down */
+ transition: transform 0.5s ease-in;
+ }
 }
 
 .modal.show {
- transition: opacity 0.5s ease, transform 1s ease-out; /* Transition effect */
- transform: scale(1); /* Scale to original size */
+ opacity: 100%;
+ transition: opacity 0.5s ease;
+
+ .modal-content {
+ transform: scale(1); /* Scale to original size */
+ transition: transform 0.5s ease-out;
+ }
  pointer-events: auto; /* Allow interactions */
 }