feat: add conversation management functionality and update MCPClientService to handle resources and prompts

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@huggingface/transformers": "^3.7.5",
-    "@modelcontextprotocol/sdk": "^1.17.3",
+    "@modelcontextprotocol/sdk": "^1.25.1",
     "@monaco-editor/react": "^4.7.0",
     "@tailwindcss/vite": "^4.1.11",
     "dompurify": "^3.2.7",

src/App.tsx

@@ -35,7 +35,8 @@ import {
 } from "./utils";
 
 import { DEFAULT_SYSTEM_PROMPT } from "./constants/systemPrompt";
-import { DB_NAME, STORE_NAME, SETTINGS_STORE_NAME } from "./constants/db";
+
+import { DB_NAME, STORE_NAME, SETTINGS_STORE_NAME, CONVERSATIONS_STORE_NAME } from "./constants/db";
 
 import { TEMPLATE } from "./tools";
 import ToolResultRenderer from "./components/ToolResultRenderer";
@@ -66,22 +67,81 @@ interface ToolMessage {
 }
 type Message = BaseMessage | ToolMessage;
 
+interface Conversation {
+  id?: number;
+  title: string;
+  messages: Message[];
+  createdAt: number;
+  updatedAt: number;
+}
+
 async function getDB(): Promise<IDBPDatabase> {
-  return openDB(DB_NAME, 1, {
-    upgrade(db) {
-      if (!db.objectStoreNames.contains(STORE_NAME)) {
-        db.createObjectStore(STORE_NAME, {
-          keyPath: "id",
-          autoIncrement: true,
-        });
+  return openDB(DB_NAME, 2, {
+    upgrade(db, oldVersion) {
+      if (oldVersion < 1) {
+        if (!db.objectStoreNames.contains(STORE_NAME)) {
+          db.createObjectStore(STORE_NAME, {
+            keyPath: "id",
+            autoIncrement: true,
+          });
+        }
+        if (!db.objectStoreNames.contains(SETTINGS_STORE_NAME)) {
+          db.createObjectStore(SETTINGS_STORE_NAME, { keyPath: "key" });
+        }
       }
-      if (!db.objectStoreNames.contains(SETTINGS_STORE_NAME)) {
-        db.createObjectStore(SETTINGS_STORE_NAME, { keyPath: "key" });
+      if (oldVersion < 2) {
+        if (!db.objectStoreNames.contains(CONVERSATIONS_STORE_NAME)) {
+          const conversationStore = db.createObjectStore(CONVERSATIONS_STORE_NAME, {
+            keyPath: "id",
+            autoIncrement: true,
+          });
+          conversationStore.createIndex("updatedAt", "updatedAt");
+        }
       }
     },
   });
 }
 
+// Conversation management functions
+async function saveConversation(conversation: Conversation): Promise<number> {
+  const db = await getDB();
+  const id = await db.put(CONVERSATIONS_STORE_NAME, {
+    ...conversation,
+    updatedAt: Date.now(),
+  });
+  return id as number;
+}
+
+async function loadConversation(id: number): Promise<Conversation | undefined> {
+  const db = await getDB();
+  return db.get(CONVERSATIONS_STORE_NAME, id);
+}
+
+async function loadAllConversations(): Promise<Conversation[]> {
+  const db = await getDB();
+  const conversations = await db.getAllFromIndex(
+    CONVERSATIONS_STORE_NAME,
+    "updatedAt"
+  );
+  return conversations.reverse(); // Most recent first
+}
+
+async function deleteConversation(id: number): Promise<void> {
+  const db = await getDB();
+  await db.delete(CONVERSATIONS_STORE_NAME, id);
+}
+
+function generateConversationTitle(messages: Message[]): string {
+  const firstUserMessage = messages.find((m) => m.role === "user");
+  if (firstUserMessage) {
+    const content = firstUserMessage.content.substring(0, 50);
+    return content.length < firstUserMessage.content.length
+      ? content + "..."
+      : content;
+  }
+  return "New Conversation";
+}
+
 function renderMarkdown(text: string): string {
   return DOMPurify.sanitize(marked.parse(text) as string);
 }
@@ -105,6 +165,9 @@ const App: React.FC = () => {
     useState<boolean>(false);
   const [isMCPManagerOpen, setIsMCPManagerOpen] = useState<boolean>(false);
   const [isToolsPanelVisible, setIsToolsPanelVisible] = useState<boolean>(false);
+  const [currentConversationId, setCurrentConversationId] = useState<number | null>(null);
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [isConversationsPanelVisible, setIsConversationsPanelVisible] = useState<boolean>(false);
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const debounceTimers = useRef<Record<number, NodeJS.Timeout>>({});
   const toolsContainerRef = useRef<HTMLDivElement>(null);
@@ -207,6 +270,42 @@ const App: React.FC = () => {
     }
   }, [messages]);
 
+  // Load all conversations on mount
+  useEffect(() => {
+    loadAllConversations().then(setConversations).catch((error) => {
+      console.error("Failed to load conversations:", error);
+    });
+  }, []);
+
+  // Auto-save current conversation when messages change
+  useEffect(() => {
+    if (messages.length === 0) return;
+
+    const saveCurrentConversation = async () => {
+      const title = generateConversationTitle(messages);
+      const conversation: Conversation = {
+        ...(currentConversationId ? { id: currentConversationId } : {}),
+        title,
+        messages,
+        createdAt: currentConversationId ? conversations.find(c => c.id === currentConversationId)?.createdAt || Date.now() : Date.now(),
+        updatedAt: Date.now(),
+      };
+
+      const id = await saveConversation(conversation);
+      if (!currentConversationId) {
+        setCurrentConversationId(id);
+      }
+
+      // Reload conversations list
+      const updatedConversations = await loadAllConversations();
+      setConversations(updatedConversations);
+    };
+
+    saveCurrentConversation().catch((error) => {
+      console.error("Failed to save conversation:", error);
+    });
+  }, [messages, currentConversationId, conversations]);
+
   const updateToolInDB = async (tool: Tool): Promise<void> => {
     const db = await getDB();
     await db.put(STORE_NAME, tool);
@@ -228,6 +327,34 @@ const App: React.FC = () => {
     clearPastKeyValues();
   }, [clearPastKeyValues]);
 
+  // Conversation management handlers
+  const handleNewConversation = useCallback(() => {
+    setMessages([]);
+    setCurrentConversationId(null);
+    clearPastKeyValues();
+  }, [clearPastKeyValues]);
+
+  const handleLoadConversation = useCallback(async (id: number) => {
+    const conversation = await loadConversation(id);
+    if (conversation) {
+      setMessages(conversation.messages);
+      setCurrentConversationId(id);
+      clearPastKeyValues();
+      setIsConversationsPanelVisible(false);
+    }
+  }, [clearPastKeyValues]);
+
+  const handleDeleteConversation = useCallback(async (id: number) => {
+    await deleteConversation(id);
+    const updatedConversations = await loadAllConversations();
+    setConversations(updatedConversations);
+
+    // If deleting current conversation, start a new one
+    if (id === currentConversationId) {
+      handleNewConversation();
+    }
+  }, [currentConversationId, handleNewConversation]);
+
   const addTool = async (): Promise<void> => {
     const newTool: Omit<Tool, "id"> = {
       name: "new_tool",
@@ -698,9 +825,52 @@ const App: React.FC = () => {
         />
       ) : (
         <div className="flex h-screen text-white">
+          {isConversationsPanelVisible && (
+            <div className="w-80 flex flex-col p-4 border-r border-gray-700 bg-gray-900">
+              <h2 className="text-2xl font-bold text-indigo-400 mb-4">Conversations</h2>
+              <div className="flex-grow overflow-y-auto space-y-2">
+                {conversations.length === 0 ? (
+                  <p className="text-gray-400 text-sm text-center mt-8">
+                    No saved conversations yet
+                  </p>
+                ) : (
+                  conversations.map((conv) => (
+                    <div
+                      key={conv.id}
+                      className={`p-3 rounded-lg cursor-pointer transition-colors ${
+                        conv.id === currentConversationId
+                          ? "bg-indigo-700"
+                          : "bg-gray-800 hover:bg-gray-700"
+                      }`}
+                      onClick={() => handleLoadConversation(conv.id!)}
+                    >
+                      <div className="flex justify-between items-start mb-1">
+                        <h3 className="text-sm font-semibold text-white truncate flex-1">
+                          {conv.title}
+                        </h3>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleDeleteConversation(conv.id!);
+                          }}
+                          className="text-gray-400 hover:text-red-400 ml-2"
+                          title="Delete conversation"
+                        >
+                          <X size={14} />
+                        </button>
+                      </div>
+                      <p className="text-xs text-gray-400">
+                        {new Date(conv.updatedAt).toLocaleDateString()}
+                      </p>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
           <div
             className={`flex flex-col p-4 transition-all duration-300 ${
-              isToolsPanelVisible ? "w-1/2" : "w-full"
+              isToolsPanelVisible ? "w-1/2" : isConversationsPanelVisible ? "flex-1" : "w-full"
             }`}
           >
             <div className="flex items-center justify-between mb-4">
@@ -712,17 +882,28 @@ const App: React.FC = () => {
                   <Zap size={16} className="mr-2" />
                   Ready
                 </div>
+                <button
+                  onClick={() => setIsConversationsPanelVisible(!isConversationsPanelVisible)}
+                  className="h-10 flex items-center px-3 py-2 rounded-lg font-bold transition-colors bg-gray-600 hover:bg-gray-700 text-sm"
+                  title={
+                    isConversationsPanelVisible
+                      ? "Hide Conversations"
+                      : "Show Conversations"
+                  }
+                >
+                  📝
+                </button>
                 <button
                   disabled={isGenerating}
-                  onClick={clearChat}
+                  onClick={handleNewConversation}
                   className={`h-10 flex items-center px-3 py-2 rounded-lg font-bold transition-colors text-sm ${
                     isGenerating
                       ? "bg-gray-600 cursor-not-allowed opacity-50"
                       : "bg-gray-600 hover:bg-gray-700"
                   }`}
-                  title="Clear chat"
+                  title="New conversation"
                 >
-                  <RotateCcw size={14} className="mr-2" /> Clear
+                  <Plus size={14} className="mr-2" /> New
                 </button>
                 <button
                   onClick={handleOpenSystemPromptModal}

src/constants/db.ts

@@ -1,3 +1,4 @@
 export const DB_NAME = "tool-caller-db";
 export const STORE_NAME = "tools";
 export const SETTINGS_STORE_NAME = "settings";
+export const CONVERSATIONS_STORE_NAME = "conversations";

src/services/mcpClient.ts

@@ -72,6 +72,8 @@ export class MCPClientService {
             config,
             isConnected: false,
             tools: [],
+            resources: [],
+            prompts: [],
             lastError: undefined,
             lastConnected: undefined,
           };
@@ -107,6 +109,8 @@ export class MCPClientService {
       config,
       isConnected: false,
       tools: [],
+      resources: [],
+      prompts: [],
       lastError: undefined,
       lastConnected: undefined,
     };
@@ -155,6 +159,8 @@ export class MCPClientService {
         {
           capabilities: {
             tools: {},
+            resources: {},
+            prompts: {},
           },
         }
       );
@@ -226,12 +232,34 @@ export class MCPClientService {
       // Connect to the server
       await client.connect(transport);
 
-      // List available tools
+      // List available tools (always required)
       const toolsResult = await client.listTools();
 
+      // List resources if supported (optional - not all servers implement this)
+      let resources: any[] = [];
+      try {
+        const resourcesResult = await client.listResources();
+        resources = resourcesResult.resources;
+      } catch (error) {
+        // Server doesn't support resources - that's okay
+        console.log(`Server ${serverId} does not support resources:`, error instanceof Error ? error.message : String(error));
+      }
+
+      // List prompts if supported (optional - not all servers implement this)
+      let prompts: any[] = [];
+      try {
+        const promptsResult = await client.listPrompts();
+        prompts = promptsResult.prompts;
+      } catch (error) {
+        // Server doesn't support prompts - that's okay
+        console.log(`Server ${serverId} does not support prompts:`, error instanceof Error ? error.message : String(error));
+      }
+
       // Update connection state
       connection.isConnected = true;
       connection.tools = toolsResult.tools;
+      connection.resources = resources;
+      connection.prompts = prompts;
       connection.lastError = undefined;
       connection.lastConnected = new Date();
 
@@ -283,6 +311,32 @@ export class MCPClientService {
     return allTools;
   }
 
+  // Get all resources from all connected servers
+  getAllResources() {
+    const allResources: any[] = [];
+
+    for (const connection of this.connections.values()) {
+      if (connection.isConnected && connection.config.enabled) {
+        allResources.push(...connection.resources);
+      }
+    }
+
+    return allResources;
+  }
+
+  // Get all prompts from all connected servers
+  getAllPrompts() {
+    const allPrompts: any[] = [];
+
+    for (const connection of this.connections.values()) {
+      if (connection.isConnected && connection.config.enabled) {
+        allPrompts.push(...connection.prompts);
+      }
+    }
+
+    return allPrompts;
+  }
+
   // Call a tool on an MCP server
   async callTool(
     serverId: string,

src/types/mcp.ts

@@ -1,4 +1,8 @@
-import type { Tool as MCPTool } from "@modelcontextprotocol/sdk/types.js";
+import type {
+  Tool as MCPTool,
+  Resource as MCPResource,
+  Prompt as MCPPrompt
+} from "@modelcontextprotocol/sdk/types.js";
 
 export interface MCPServerConfig {
   id: string;
@@ -18,6 +22,8 @@ export interface MCPServerConnection {
   config: MCPServerConfig;
   isConnected: boolean;
   tools: MCPTool[];
+  resources: MCPResource[];
+  prompts: MCPPrompt[];
   lastError?: string;
   lastConnected?: Date;
 }