[feat]: Implement chat description editing in sidebar and header, add visual cue for active chat in sidebar

app/lib/persistence/ChatDescription.client.tsx

@@ -1,6 +1,68 @@
 import { useStore } from '@nanostores/react';
-import { description } from './useChatHistory';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import WithTooltip from '~/components/ui/Tooltip';
+import { useEditChatDescription } from '~/lib/hooks';
+import { description as descriptionStore } from '~/lib/persistence';
 
 export function ChatDescription() {
-  return useStore(description);
+  const initialDescription = useStore(descriptionStore)!;
+
+  const { editing, handleChange, handleBlur, handleSubmit, handleKeyDown, currentDescription, toggleEditMode } =
+    useEditChatDescription({
+      initialDescription,
+      syncWithGlobalStore: true,
+    });
+
+  if (!initialDescription) {
+    // doing this to prevent showing edit button until chat description is set
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-center">
+      {editing ? (
+        <form onSubmit={handleSubmit} className="flex items-center justify-center">
+          <input
+            type="text"
+            className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 mr-2 w-fit"
+            autoFocus
+            value={currentDescription}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            style={{ width: `${Math.max(currentDescription.length * 8, 100)}px` }}
+          />
+          <TooltipProvider>
+            <WithTooltip tooltip="Save title">
+              <div className="flex justify-between items-center p-2 rounded-md bg-bolt-elements-background-depth-3">
+                <button
+                  type="submit"
+                  className="i-ph:check-bold scale-110 hover:text-bolt-elements-item-contentAccent"
+                  onMouseDown={handleSubmit}
+                />
+              </div>
+            </WithTooltip>
+          </TooltipProvider>
+        </form>
+      ) : (
+        <>
+          {currentDescription}
+          <TooltipProvider>
+            <WithTooltip tooltip="Rename chat">
+              <div className="flex justify-between items-center p-2 rounded-md bg-bolt-elements-background-depth-3 ml-2">
+                <button
+                  type="button"
+                  className="i-ph:pencil-fill scale-110 hover:text-bolt-elements-item-contentAccent"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    toggleEditMode();
+                  }}
+                />
+              </div>
+            </WithTooltip>
+          </TooltipProvider>
+        </>
+      )}
+    </div>
+  );
 }

app/lib/persistence/db.ts

@@ -52,17 +52,23 @@ export async function setMessages(
   messages: Message[],
   urlId?: string,
   description?: string,
+  timestamp?: string,
 ): Promise<void> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction('chats', 'readwrite');
     const store = transaction.objectStore('chats');
 
+    if (timestamp && isNaN(Date.parse(timestamp))) {
+      reject(new Error('Invalid timestamp'));
+      return;
+    }
+
     const request = store.put({
       id,
       messages,
       urlId,
       description,
-      timestamp: new Date().toISOString(),
+      timestamp: timestamp ?? new Date().toISOString(),
     });
 
     request.onsuccess = () => resolve();
@@ -212,3 +218,17 @@ export async function createChatFromMessages(
 
   return newUrlId; // Return the urlId instead of id for navigation
 }
+
+export async function updateChatDescription(db: IDBDatabase, id: string, description: string): Promise<void> {
+  const chat = await getMessages(db, id);
+
+  if (!chat) {
+    throw new Error('Chat not found');
+  }
+
+  if (!description.trim()) {
+    throw new Error('Description cannot be empty');
+  }
+
+  await setMessages(db, id, chat.messages, chat.urlId, description, chat.timestamp);
+}