add renaming

Author: ngxson

tools/server/webui/src/components/ChatScreen.tsx

@@ -378,7 +378,10 @@ function ChatInput({
               <div className="flex flex-row gap-2 ml-2">
                 <label
                   htmlFor="file-upload"
-                  className="btn w-8 h-8 p-0 rounded-full"
+                  className={classNames({
+                    'btn w-8 h-8 p-0 rounded-full': true,
+                    'btn-disabled': isGenerating,
+                  })}
                 >
                   <PaperClipIcon className="h-5 w-5" />
                 </label>

tools/server/webui/src/components/Sidebar.tsx

@@ -3,7 +3,13 @@ import { classNames } from '../utils/misc';
 import { Conversation } from '../utils/types';
 import StorageUtils from '../utils/storage';
 import { useNavigate, useParams } from 'react-router';
-import { EllipsisVerticalIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import {
+  ArrowDownTrayIcon,
+  EllipsisVerticalIcon,
+  PencilIcon,
+  TrashIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
 import { BtnWithTooltips } from '../utils/common';
 import { useAppContext } from '../utils/app.context';
 import toast from 'react-hot-toast';
@@ -106,6 +112,19 @@ export default function Sidebar() {
                 document.body.removeChild(a);
                 URL.revokeObjectURL(url);
               }}
+              onRename={() => {
+                if (isGenerating(conv.id)) {
+                  toast.error('Cannot rename conversation while generating');
+                  return;
+                }
+                const newName = window.prompt(
+                  'Enter new name for the conversation',
+                  conv.name
+                );
+                if (newName && newName.trim().length > 0) {
+                  StorageUtils.updateConversationName(conv.id, newName);
+                }
+              }}
             />
           ))}
           <div className="text-center text-xs opacity-40 mt-auto mx-4">
@@ -123,17 +142,19 @@ function ConversationItem({
   onSelect,
   onDelete,
   onDownload,
+  onRename,
 }: {
   conv: Conversation;
   isCurrConv: boolean;
   onSelect: () => void;
   onDelete: () => void;
   onDownload: () => void;
+  onRename: () => void;
 }) {
   return (
     <div
       className={classNames({
-        'group flex flex-row btn btn-ghost justify-start items-center font-normal':
+        'group flex flex-row btn btn-ghost justify-start items-center font-normal pr-2':
           true,
         'btn-soft': isCurrConv,
       })}
@@ -160,13 +181,25 @@ function ConversationItem({
         {/* dropdown menu */}
         <ul
           tabIndex={0}
-          className="dropdown-content menu bg-base-100 rounded-box z-[1] w-32 p-2 shadow"
+          className="dropdown-content menu bg-base-100 rounded-box z-[1] p-2 shadow"
         >
+          <li onClick={onRename}>
+            <a>
+              <PencilIcon className="w-4 h-4" />
+              Rename
+            </a>
+          </li>
           <li onClick={onDownload}>
-            <a>Download</a>
+            <a>
+              <ArrowDownTrayIcon className="w-4 h-4" />
+              Download
+            </a>
           </li>
           <li className="text-error" onClick={onDelete}>
-            <a>Delete</a>
+            <a>
+              <TrashIcon className="w-4 h-4" />
+              Delete
+            </a>
           </li>
         </ul>
       </div>

tools/server/webui/src/components/useChatExtraContext.tsx

@@ -59,7 +59,7 @@ export function useChatExtraContext(): ChatExtraContextApi {
         mimeType.startsWith('video/') ||
         mimeType.startsWith('audio/')
       ) {
-        toast.error('Video files are not supported yet.');
+        toast.error('Video and audio files are not supported yet.');
         break;
       } else if (mimeType.startsWith('application/pdf')) {
         toast.error('PDF files are not supported yet.');
@@ -100,6 +100,8 @@ export function useChatExtraContext(): ChatExtraContextApi {
 
 // WARN: vibe code below
 // This code is a heuristic to determine if a string is likely not binary.
+// It is necessary because input file can have various mime types which we don't have time to investigate.
+// For example, a python file can be text/plain, application/x-python, etc.
 export function isLikelyNotBinary(str: string): boolean {
   const options = {
     prefixLength: 1024 * 10, // Check the first 10KB of the string

tools/server/webui/src/utils/storage.ts

@@ -116,6 +116,16 @@ const StorageUtils = {
     });
     return conv;
   },
+  /**
+   * update the name of a conversation
+   */
+  async updateConversationName(convId: string, name: string): Promise<void> {
+    await db.conversations.update(convId, {
+      name,
+      lastModified: Date.now(),
+    });
+    dispatchConversationChange(convId);
+  },
   /**
    * if convId does not exist, throw an error
    */