Feature: Allow users to edit chat thread title

.gitignore

@@ -30,3 +30,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# secrets
+start.sh

src/components/menu.tsx

@@ -7,7 +7,7 @@ const Menu = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("w-64 flex flex-col", className)} {...props} />
+  <div ref={ref} className={cn("w-96 flex flex-col", className)} {...props} />
 ));
 
 Menu.displayName = "Menu";

src/features/chat/chat-menu/chat-menu.tsx

@@ -17,30 +17,43 @@ interface Prop {
 export const ChatMenu = (prop:Prop) => { 
   const [items, setItems] = useState<ChatThreadModel[]>([]);
 
-  // Fetch data when the component mounts
+  const [refresh, setRefresh] = useState(true);
+  // Fetch data when the component mounts and refreshes
   useEffect(() => {
     const fetchData = async () => {
+      console.log("fetching items")
       const data = await FindAllChatThreadForCurrentUser();
       setItems(data);
     };
 
     fetchData();
-  }, []);
+  }, [refresh]);
 
+  const doRefresh = () => {
+    console.log("should refresh")
+    setRefresh(!refresh);
+  }
+
   return (
     <div>
       <Button size={"icon"} onClick={() => prop.setIsOpen(!prop.isOpen)} >
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"  width="12" height="12" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+        {prop.isOpen ? 
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="12" height="12" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 4v16M12 4v16M18 4v16" />
         </svg>
+        : 
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="12" height="12" stroke="currentColor"> 
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /> 
+        </svg>
+        }
       </Button>
       {prop.isOpen ? 
         <Menu>
         <MenuHeader className="justify-end">
             <NewChat />
         </MenuHeader>
         <MenuContent>
-          <MenuItems menuItems={items} />
+          <MenuItems refresh={doRefresh} menuItems={items} />
         </MenuContent>
         <MenuFooter>
           <div className="flex flex-col gap-3">

src/features/chat/chat-menu/menu-items.tsx

@@ -1,17 +1,18 @@
 "use client";
 import { MenuItem } from "@/components/menu";
 import { Button } from "@/components/ui/button";
-import { SoftDeleteChatThreadByID } from "@/features/chat/chat-services/chat-thread-service";
-import { FileText, MessageCircle, Trash } from "lucide-react";
+import { SoftDeleteChatThreadByID, userUpdateThreadTitle } from "@/features/chat/chat-services/chat-thread-service";
+import { FileText, MessageCircle, Trash, PenSquare, Navigation } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { FC } from "react";
 import { ChatThreadModel } from "../chat-services/models";
 
-interface Prop {
+interface RProp {
   menuItems: Array<ChatThreadModel>;
+  refresh: () => void
 }
 
-export const MenuItems: FC<Prop> = (props) => {
+export const MenuItems: FC<RProp> = (props) => {
   const { id } = useParams();
   const router = useRouter();
 
@@ -21,6 +22,11 @@ export const MenuItems: FC<Prop> = (props) => {
     router.replace("/chat");
   };
 
+  const renameTitle = async (threadID: string, title: string) => {
+    await userUpdateThreadTitle(threadID, title);
+    props.refresh()
+  };
+
   return (
     <>
       {props.menuItems.map((thread) => (
@@ -45,6 +51,20 @@ export const MenuItems: FC<Prop> = (props) => {
           <span className="flex gap-2 items-center overflow-hidden flex-1">
             <span className="overflow-ellipsis truncate"> {thread.name}</span>
           </span>
+          <Button
+            className="invisible  group-hover/item:visible"
+            size={"sm"}
+            variant={"ghost"}
+            onClick={async (e) => {
+              e.preventDefault();
+              const threadTitle = prompt("Enter the thread title", thread.name);
+              if (threadTitle) {
+                await renameTitle(thread.id, threadTitle);
+              }
+            }}
+          >
+            <PenSquare size={16} />
+          </Button>
           <Button
             className="invisible  group-hover/item:visible hover:text-brand"
             size={"sm"}

src/features/chat/chat-services/chat-thread-service.ts

@@ -129,6 +129,23 @@ export const UpsertChatThread = async (chatThread: ChatThreadModel) => {
   return updatedChatThread;
 };
 
+export const userUpdateThreadTitle = async (
+  chatThreadID: string,
+  userTitle: string
+) => {
+
+  const threads = await FindChatThreadByID(chatThreadID);
+
+  if (threads.length === 1) {
+    const chatThread = threads[0]
+    await UpsertChatThread({
+      ...chatThread,
+      name: userTitle.substring(0, 30),
+    });
+  }
+
+};
+
 export const updateChatThreadTitle = async (
   chatThread: ChatThreadModel,
   messages: ChatMessageModel[],

src/package.json

@@ -29,7 +29,7 @@
     "eslint": "^8.46.0",
     "eslint-config-next": "^13.4.12",
     "langchain": "^0.0.123",
-    "lucide-react": "^0.264.0",
+    "lucide-react": "^0.279.0",
     "nanoid": "^4.0.2",
     "next": "^13.4.12",
     "next-auth": "^4.22.4",