feat: add generated thread names

Signed-off-by: tylerslaton <[email protected]>

Author: tylerslaton

actions/threads.tsx

@@ -1,6 +1,7 @@
 "use server"
 
 import { THREADS_DIR } from "@/config/env";
+import { gpt } from "@/config/env";
 import fs from "fs/promises";
 import path from 'path';
 
@@ -74,7 +75,14 @@ async function newThreadName(): Promise<string> {
     return `New Thread${threads.length ? ' ' + (threads.length+1): '' }`;
 }
 
-export async function createThread(script: string): Promise<Thread> {
+export async function generateThreadName(firstMessage: string): Promise<string> {
+    const summary = await gpt().evaluate({
+        instructions: `Summarize the following message with a descriptive but brief thread name: ${firstMessage}`
+    })
+    return summary.text();
+}
+
+export async function createThread(script: string, firstMessage?: string): Promise<Thread> {
     const threadsDir = THREADS_DIR();
     script = script.replace('.gpt', '');
 
@@ -96,6 +104,11 @@ export async function createThread(script: string): Promise<Thread> {
     await fs.writeFile(path.join(threadPath, META_FILE), JSON.stringify(threadMeta));
     await fs.writeFile(path.join(threadPath, STATE_FILE), '');
 
+    if (firstMessage) {
+        const generatedThreadName = await generateThreadName(firstMessage)
+        renameThread(id, generatedThreadName);
+    }
+
     return {
         state: threadState,
         meta: threadMeta,

components/script.tsx

@@ -10,9 +10,8 @@ import useChatSocket from '@/components/script/useChatSocket';
 import { Button } from "@nextui-org/react";
 import { fetchScript, path } from "@/actions/scripts/fetch";
 import { getWorkspaceDir } from "@/actions/workspace";
-import { createThread, getThreads, Thread } from "@/actions/threads";
+import { createThread, getThreads, generateThreadName, renameThread, Thread } from "@/actions/threads";
 import debounce from "lodash/debounce";
-import { set } from "lodash";
 
 interface ScriptProps {
     file: string;
@@ -37,6 +36,12 @@ const Script: React.FC<ScriptProps> = ({ file, thread, setThreads, className, me
         socket, connected, running, messages, setMessages, restart, interrupt, generating, error
     } = useChatSocket(isEmpty);
 
+    const fetchThreads = async () => {
+        if (!setThreads) return;
+        const threads = await getThreads();
+        setThreads(threads);
+    };
+
 	useEffect(() => {
 		setHasParams(tool.arguments?.properties != undefined && Object.keys(tool.arguments?.properties).length > 0);
         setIsEmpty(!tool.instructions);
@@ -98,14 +103,21 @@ const Script: React.FC<ScriptProps> = ({ file, thread, setThreads, className, me
 
         let threadId = "";
         if (hasNoUserMessages() && enableThreads && !thread && setThreads && setSelectedThreadId) {
-            const newThread = await createThread(file)
+            const newThread = await createThread(file, message)
             threadId = newThread?.meta?.id;
             setThreads( await getThreads());
             setSelectedThreadId(threadId);
         }
 
+        
         setMessages((prevMessages) => [...prevMessages, { type: MessageType.User, message }]);
         socket.emit("userMessage", message, threadId);
+        
+        if (hasNoUserMessages() && thread) {
+            renameThread(thread, await generateThreadName(message));
+            fetchThreads();
+        }
+
     };
 
     const restartScript = useCallback(

components/threads.tsx

@@ -34,7 +34,7 @@ const Threads: React.FC<ThreadsProps> = ({ className, setThread, threads, setThr
     const isSelected = (id: string) => id === selectedThreadId;
 
     return (
-        <div className={`relative p-4 ${isCollapsed ? "border-none" : "border-r-1 dark:border-r-zinc-800"}`}>
+        <div className={`relative p-4 overflow-y-auto ${isCollapsed ? "border-none" : "border-r-1 dark:border-r-zinc-800"}`}>
             <div className={`flex justify-between items-center mb-2`}>
                 <Tooltip content={isCollapsed ? "Expand threads" : "Collapse threads"} placement="top" closeDelay={0.5} radius='full'>
                     <Button 

components/threads/menu.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Popover, PopoverTrigger, PopoverContent, Button, Menu, MenuItem } from "@nextui-org/react";
 import { deleteThread, renameThread, Thread } from '@/actions/threads';
 import { GoPencil, GoTrash, GoKebabHorizontal } from "react-icons/go";
@@ -9,6 +10,8 @@ interface NewThreadProps {
 }
 
 const NewThread = ({ className, threadId, setThreads }: NewThreadProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
     const handleDeleteThread = () => {
         deleteThread(threadId).then(() => {
             setThreads((threads: Thread[]) => threads.filter((thread: Thread) => thread.meta.id !== threadId));
@@ -30,14 +33,14 @@ const NewThread = ({ className, threadId, setThreads }: NewThreadProps) => {
     }
 
     return (
-        <Popover placement="right">
+        <Popover placement="right" isOpen={isOpen} onOpenChange={(open)=> setIsOpen(open)}>
             <PopoverTrigger>
                 <Button variant="light" radius="full" className={`${className}`} isIconOnly startContent={<GoKebabHorizontal />}/>
             </PopoverTrigger>
             <PopoverContent className="">
                 <Menu aria-label="options">
-                    <MenuItem className="py-2" content="Rename" startContent={<GoPencil />} onClick={() => { handleRenameThread() }}>Rename</MenuItem>
-                    <MenuItem aria-label="delete" className="py-2" content="Delete" startContent={<GoTrash />} onClick={() => { handleDeleteThread() }}>Delete</MenuItem>
+                    <MenuItem className="py-2" content="Rename" startContent={<GoPencil />} onClick={() => { setIsOpen(false); handleRenameThread() }}>Rename</MenuItem>
+                    <MenuItem aria-label="delete" className="py-2" content="Delete" startContent={<GoTrash />} onClick={() => { setIsOpen(false); handleDeleteThread()}}>Delete</MenuItem>
                 </Menu>
             </PopoverContent>
         </Popover>