fix: delete chat

frontend/src/components/ChatInterface.tsx

@@ -46,6 +46,19 @@ const ChatInterface = () => {
     citations: false,
   });
 
+  const userInputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Add this effect for focus management
+  useEffect(() => {
+    const focusInput = () => {
+      setTimeout(() => {
+        userInputRef.current?.focus();
+      }, 100);
+    };
+
+    focusInput();
+  }, [currentConversationId]);
+
   // Initialize socket once
   useEffect(() => {
     const socket = initializeSocket();
@@ -224,12 +237,13 @@ const ChatInterface = () => {
   };
 
   const handleNewConversation = () => {
+    userInputRef.current?.focus();
     setCurrentConversationId(null);
-    setChatState({
+    setChatState((prev) => ({
       messages: [],
       isLoading: false,
       error: null,
-    });
+    }));
   };
 
   const handleSelectConversation = (id: string) => {
@@ -249,12 +263,22 @@ const ChatInterface = () => {
         active: conv.id === id,
       }))
     );
-    userInputRef.current?.focus();
   };
 
-  const sidebar = <ConversationList conversations={conversations} onNewConversation={handleNewConversation} onSelectConversation={handleSelectConversation} />;
+  const handleDeleteConversation = (id: string) => {
+    setConversations((prev) => prev.filter((conv) => conv.id !== id));
+    if (currentConversationId === id) {
+      handleNewConversation();
+    }
+  };
+
+  const handleDeleteAllConversations = () => {
+    setConversations([]);
+    handleNewConversation();
+  };
+
+  const sidebar = <ConversationList conversations={conversations} onNewConversation={handleNewConversation} onSelectConversation={handleSelectConversation} onDeleteConversation={handleDeleteConversation} onDeleteAllConversations={handleDeleteAllConversations} />;
 
-  const userInputRef = useRef<HTMLTextAreaElement>();
   const mainContent = (
     <div className="flex flex-col w-full h-full relative" tabIndex={-1}>
       <ChatHistory messages={chatState.messages} isLoading={chatState.isLoading} />

frontend/src/components/Message.tsx

@@ -32,11 +32,7 @@ const MarkdownComponents: Record<string, React.ComponentType<any>> = {
   thead: ({ children }) => <thead className="bg-muted/50">{children}</thead>,
 };
 
-interface MessageProps {
-  message: MessageType;
-}
-
-const Message: React.FC<MessageProps> = ({ message }) => {
+const Message = ({ message }: { message: MessageType }) => {
   const isUser = message.role === "user";
   const isProgress = message.content.includes("%)") && message.role === "assistant";
 

frontend/src/components/ui/ChatLayout.tsx

@@ -7,6 +7,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { LayoutGrid, MessageCircle, Settings } from "lucide-react";
 import React from "react";
 import { ThemeToggle } from "./ThemeToggle";
+import Link from "next/link";
 
 interface ChatLayoutProps {
   sidebar: React.ReactNode;
@@ -18,7 +19,9 @@ const ChatLayout: React.FC<ChatLayoutProps> = ({ sidebar, mainContent, settingsP
   return (
     <div className="h-screen flex flex-col">
       <header className="border-b-2 h-14 flex items-center px-6">
-        <h1 className="text-xl font-semibold">KnowledgeNet: Deep Research</h1>
+        <Link href={"/"}>
+          <h1 className="text-xl font-semibold">KnowledgeNet: Deep Research</h1>
+        </Link>
         <div className="flex-1" />
         <ThemeToggle />
         <Sheet>

frontend/src/components/ui/ConversationList.tsx

@@ -1,33 +1,26 @@
 "use client";
 import { Button } from "@/components/ui/button";
-import { MessageSquare, PlusCircle } from "lucide-react";
+import { ConversationListProps } from "@/lib/types";
+import { MessageSquare, PlusCircle, Trash2, XCircle } from "lucide-react";
 import React from "react";
 
-interface Conversation {
-  id: string;
-  title: string;
-  lastUpdated: string;
-  active?: boolean;
-}
-
-interface ConversationListProps {
-  conversations: Conversation[];
-  onNewConversation: () => void;
-  onSelectConversation: (id: string) => void;
-}
-
-const ConversationList: React.FC<ConversationListProps> = ({ conversations, onNewConversation, onSelectConversation }) => {
+const ConversationList: React.FC<ConversationListProps> = ({ conversations, onNewConversation, onSelectConversation, onDeleteConversation, onDeleteAllConversations }) => {
   const handleSelectConversation = (id: string) => {
     onSelectConversation(id);
   };
 
   return (
     <div className="flex flex-col h-full py-2">
-      <div className="px-4 py-2">
-        <Button onClick={onNewConversation} className="w-full justify-start" variant="outline">
+      <div className="px-4 py-2 flex gap-2">
+        <Button onClick={onNewConversation} className="flex-1 justify-start" variant="outline">
           <PlusCircle className="mr-2 h-4 w-4" />
           New Chat
         </Button>
+        {conversations.length > 0 && (
+          <Button onClick={onDeleteAllConversations} variant="destructive" size="icon">
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        )}
       </div>
 
       <div className="px-2 py-2">
@@ -37,10 +30,22 @@ const ConversationList: React.FC<ConversationListProps> = ({ conversations, onNe
             <p className="text-sm text-muted-foreground px-2">No conversations yet</p>
           ) : (
             conversations.map((conversation) => (
-              <Button key={conversation.id} variant={conversation.active ? "secondary" : "ghost"} className={`w-full justify-start text-left truncate ${conversation.active ? "bg-accent" : ""}`} onClick={() => handleSelectConversation(conversation.id)}>
-                <MessageSquare className="mr-2 h-4 w-4 shrink-0" />
-                <span className="truncate">{conversation.title}</span>
-              </Button>
+              <div key={conversation.id} className="flex items-center gap-1 px-1">
+                <Button variant={conversation.active ? "secondary" : "ghost"} className={`flex-1 pr-0.5 justify-start text-left truncate ${conversation.active ? "bg-accent" : ""} group`} onClick={() => handleSelectConversation(conversation.id)}>
+                  <MessageSquare className="mr-2 h-4 w-4 shrink-0" />
+                  <span className="truncate">{conversation.title}</span>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 ml-auto hidden group-hover:flex hover:bg-destructive"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDeleteConversation(conversation.id);
+                    }}>
+                    <XCircle className="h-4 w-4" />
+                  </Button>
+                </Button>
+              </div>
             ))
           )}
         </div>

frontend/src/lib/types.ts

@@ -58,3 +58,11 @@ export interface ResearchResults {
   research_tree: ResearchNode;
   metadata: ResearchMetadata;
 }
+
+export interface ConversationListProps {
+  conversations: Conversation[];
+  onNewConversation: () => void;
+  onSelectConversation: (id: string) => void;
+  onDeleteConversation: (id: string) => void;
+  onDeleteAllConversations: () => void;
+}