Update src/App.tsx

src/App.tsx

@@ -13,11 +13,8 @@ import {
   RotateCcw,
   Settings,
   X,
-  PanelRightClose,
-  PanelRightOpen,
 } from "lucide-react";
 import { useLLM } from "./hooks/useLLM";
-import { useMCP } from "./hooks/useMCP";
 
 import type { Tool } from "./components/ToolItem";
 
@@ -41,15 +38,14 @@ import ToolCallIndicator from "./components/ToolCallIndicator";
 import ToolItem from "./components/ToolItem";
 import ResultBlock from "./components/ResultBlock";
 import ExamplePrompts from "./components/ExamplePrompts";
-import { MCPServerManager } from "./components/MCPServerManager";
 
 import { LoadingScreen } from "./components/LoadingScreen";
 
 interface RenderInfo {
   call: string;
-  result?: unknown;
+  result?: any;
   renderer?: string;
-  input?: Record<string, unknown>;
+  input?: Record<string, any>;
   error?: string;
 }
 
@@ -82,7 +78,7 @@ async function getDB(): Promise<IDBPDatabase> {
 
 const App: React.FC = () => {
   const [systemPrompt, setSystemPrompt] = useState<string>(
-    DEFAULT_SYSTEM_PROMPT
+    DEFAULT_SYSTEM_PROMPT,
   );
   const [isSystemPromptModalOpen, setIsSystemPromptModalOpen] =
     useState<boolean>(false);
@@ -93,12 +89,10 @@ const App: React.FC = () => {
   const [isGenerating, setIsGenerating] = useState<boolean>(false);
   const isMobile = useMemo(isMobileOrTablet, []);
   const [selectedModelId, setSelectedModelId] = useState<string>(
-    isMobile ? "350M" : "1.2B"
+    isMobile ? "350M" : "1.2B",
   );
   const [isModelDropdownOpen, setIsModelDropdownOpen] =
     useState<boolean>(false);
-  const [isMCPManagerOpen, setIsMCPManagerOpen] = useState<boolean>(false);
-  const [isToolsPanelVisible, setIsToolsPanelVisible] = useState<boolean>(true);
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const debounceTimers = useRef<Record<number, NodeJS.Timeout>>({});
   const toolsContainerRef = useRef<HTMLDivElement>(null);
@@ -113,55 +107,31 @@ const App: React.FC = () => {
     clearPastKeyValues,
   } = useLLM(selectedModelId);
 
-  // MCP integration
-  const {
-    getMCPToolsAsOriginalTools,
-    callMCPTool,
-    connectAll: connectAllMCPServers,
-  } = useMCP();
-
   const loadTools = useCallback(async (): Promise<void> => {
-    try {
-      const db = await getDB();
-      const allTools: Tool[] = await db.getAll(STORE_NAME);
-      if (allTools.length === 0) {
-        const defaultTools: Tool[] = Object.entries(DEFAULT_TOOLS).map(
-          ([name, code], id) => ({
-            id,
-            name,
-            code,
-            enabled: true,
-            isCollapsed: false,
-          })
-        );
-        const tx = db.transaction(STORE_NAME, "readwrite");
-        await Promise.all(defaultTools.map((tool) => tx.store.put(tool)));
-        await tx.done;
-        setTools(defaultTools);
-      } else {
-        setTools(allTools.map((t) => ({ ...t, isCollapsed: false })));
-      }
-
-      // Load MCP tools and merge them
-      const mcpTools = getMCPToolsAsOriginalTools();
-      setTools((prevTools) => [...prevTools, ...mcpTools]);
-      
-      console.log('✅ Tools loaded:', { 
-        defaultToolCount: allTools.length, 
-        mcpToolCount: mcpTools.length 
-      });
-    } catch (error) {
-      console.error('❌ Failed to load tools:', error);
+    const db = await getDB();
+    const allTools: Tool[] = await db.getAll(STORE_NAME);
+    if (allTools.length === 0) {
+      const defaultTools: Tool[] = Object.entries(DEFAULT_TOOLS).map(
+        ([name, code], id) => ({
+          id,
+          name,
+          code,
+          enabled: true,
+          isCollapsed: false,
+        }),
+      );
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      await Promise.all(defaultTools.map((tool) => tx.store.put(tool)));
+      await tx.done;
+      setTools(defaultTools);
+    } else {
+      setTools(allTools.map((t) => ({ ...t, isCollapsed: false })));
     }
-  }, [getMCPToolsAsOriginalTools]);
+  }, []);
 
   useEffect(() => {
     loadTools();
-    // Connect to MCP servers on startup
-    connectAllMCPServers().catch((error) => {
-      console.error("Failed to connect to MCP servers:", error);
-    });
-  }, [loadTools, connectAllMCPServers]);
+  }, [loadTools]);
 
   useEffect(() => {
     if (chatContainerRef.current) {
@@ -189,7 +159,6 @@ const App: React.FC = () => {
   const clearChat = useCallback(() => {
     setMessages([]);
     clearPastKeyValues();
-    console.log('🧹 Chat cleared');
   }, [clearPastKeyValues]);
 
   const addTool = async (): Promise<void> => {
@@ -240,16 +209,16 @@ const App: React.FC = () => {
   const toggleToolCollapsed = (id: number): void => {
     setTools(
       tools.map((tool) =>
-        tool.id === id ? { ...tool, isCollapsed: !tool.isCollapsed } : tool
-      )
+        tool.id === id ? { ...tool, isCollapsed: !tool.isCollapsed } : tool,
+      ),
     );
   };
 
   const expandTool = (id: number): void => {
     setTools(
       tools.map((tool) =>
-        tool.id === id ? { ...tool, isCollapsed: false } : tool
-      )
+        tool.id === id ? { ...tool, isCollapsed: false } : tool,
+      ),
     );
   };
 
@@ -272,80 +241,27 @@ const App: React.FC = () => {
     console.log('🔧 Executing tool call:', callString);
     
     const parsedCall = parsePythonicCalls(callString);
-    if (!parsedCall) {
-      const error = `Invalid tool call format: ${callString}`;
-      console.error('❌', error);
-      throw new Error(error);
-    }
+    if (!parsedCall) throw new Error(`Invalid tool call format: ${callString}`);
 
     const { name, positionalArgs, keywordArgs } = parsedCall;
     const toolToUse = tools.find((t) => t.name === name && t.enabled);
-    
-    if (!toolToUse) {
-      const error = `Tool '${name}' not found or is disabled.`;
-      console.error('❌', error);
-      throw new Error(error);
-    }
-
-    console.log('🔧 Tool found:', { name, enabled: toolToUse.enabled });
-
-    // Check if this is an MCP tool
-    const isMCPTool = toolToUse.code?.includes("mcpServerId:");
-    if (isMCPTool) {
-      console.log('🌐 MCP tool detected');
-      
-      const mcpServerMatch = toolToUse.code?.match(/mcpServerId: "([^"]+)"/);
-      const mcpToolMatch = toolToUse.code?.match(/toolName: "([^"]+)"/);
-
-      if (mcpServerMatch && mcpToolMatch) {
-        const serverId = mcpServerMatch[1];
-        const toolName = mcpToolMatch[1];
+    if (!toolToUse) throw new Error(`Tool '${name}' not found or is disabled.`);
 
-        const { functionCode } = extractFunctionAndRenderer(toolToUse.code);
-        const schema = generateSchemaFromCode(functionCode);
-        const paramNames = Object.keys(schema.parameters.properties);
-
-        const args: Record<string, unknown> = {};
-
-        for (
-          let i = 0;
-          i < Math.min(positionalArgs.length, paramNames.length);
-          i++
-        ) {
-          args[paramNames[i]] = positionalArgs[i];
-        }
-
-        Object.entries(keywordArgs).forEach(([key, value]) => {
-          args[key] = value;
-        });
-
-        console.log('🌐 Calling MCP tool:', { serverId, toolName, args });
-        const result = await callMCPTool(serverId, toolName, args);
-        console.log('✅ MCP tool result:', result);
-        return JSON.stringify(result);
-      }
-    }
-
-    // Handle local tools
-    console.log('🔧 Executing local tool');
     const { functionCode } = extractFunctionAndRenderer(toolToUse.code);
     const schema = generateSchemaFromCode(functionCode);
     const paramNames = Object.keys(schema.parameters.properties);
 
-    const finalArgs: unknown[] = [];
+    const finalArgs: any[] = [];
     const requiredParams = schema.parameters.required || [];
 
     for (let i = 0; i < paramNames.length; ++i) {
       const paramName = paramNames[i];
       if (i < positionalArgs.length) {
         finalArgs.push(positionalArgs[i]);
-      } else if (Object.prototype.hasOwnProperty.call(keywordArgs, paramName)) {
+      } else if (keywordArgs.hasOwnProperty(paramName)) {
         finalArgs.push(keywordArgs[paramName]);
       } else if (
-        Object.prototype.hasOwnProperty.call(
-          schema.parameters.properties[paramName],
-          "default"
-        )
+        schema.parameters.properties[paramName].hasOwnProperty("default")
       ) {
         finalArgs.push(schema.parameters.properties[paramName].default);
       } else if (!requiredParams.includes(paramName)) {
@@ -358,32 +274,26 @@ const App: React.FC = () => {
     const bodyMatch = functionCode.match(/function[^{]+{([\s\S]*)}/);
     if (!bodyMatch) {
       throw new Error(
-        "Could not parse function body. Ensure it's a standard `function` declaration."
+        "Could not parse function body. Ensure it's a standard `function` declaration.",
       );
     }
     const body = bodyMatch[1];
     const AsyncFunction = Object.getPrototypeOf(
-      async function () {}
+      async function () {},
     ).constructor;
     const func = new AsyncFunction(...paramNames, body);
     const result = await func(...finalArgs);
-    console.log('✅ Local tool result:', result);
+    
+    console.log('✅ Tool result:', result);
     return JSON.stringify(result);
   };
 
   const executeToolCalls = async (
-    toolCallContent: string
+    toolCallContent: string,
   ): Promise<RenderInfo[]> => {
-    console.log('🔧 Executing tool calls from content:', toolCallContent);
-    
     const toolCalls = extractPythonicCalls(toolCallContent);
-    
-    if (toolCalls.length === 0) {
-      console.warn('⚠️ No valid tool calls found');
+    if (toolCalls.length === 0)
       return [{ call: "", error: "No valid tool calls found." }];
-    }
-
-    console.log('🔧 Found tool calls:', toolCalls);
 
     const results: RenderInfo[] = [];
     for (const call of toolCalls) {
@@ -404,16 +314,16 @@ const App: React.FC = () => {
           parsedResult = result;
         }
 
-        let namedParams: Record<string, unknown> = Object.create(null);
+        let namedParams: Record<string, any> = Object.create(null);
         if (parsedCall && toolUsed) {
           const schema = generateSchemaFromCode(
-            extractFunctionAndRenderer(toolUsed.code).functionCode
+            extractFunctionAndRenderer(toolUsed.code).functionCode,
           );
           const paramNames = Object.keys(schema.parameters.properties);
           namedParams = mapArgsToNamedParams(
             paramNames,
             parsedCall.positionalArgs,
-            parsedCall.keywordArgs
+            parsedCall.keywordArgs,
           );
         }
 
@@ -425,7 +335,6 @@ const App: React.FC = () => {
         });
       } catch (error) {
         const errorMessage = getErrorMessage(error);
-        console.error('❌ Tool execution error:', errorMessage);
         results.push({ call, error: errorMessage });
       }
     }
@@ -433,15 +342,12 @@ const App: React.FC = () => {
   };
 
   const handleSendMessage = async (): Promise<void> => {
-    if (!input.trim() || !isReady) {
-      console.warn('⚠️ Cannot send message:', { inputEmpty: !input.trim(), isReady });
-      return;
-    }
+    if (!input.trim() || !isReady) return;
 
-    console.log('🔵 Starting message send...', { input, isReady });
+    console.log('🔵 Message sent:', input);
 
     const userMessage: Message = { role: "user", content: input };
-    const currentMessages: Message[] = [...messages, userMessage];
+    let currentMessages: Message[] = [...messages, userMessage];
     setMessages(currentMessages);
     setInput("");
     setIsGenerating(true);
@@ -451,42 +357,24 @@ const App: React.FC = () => {
         .filter((tool) => tool.enabled)
         .map((tool) => generateSchemaFromCode(tool.code));
 
-      console.log('🟡 Enabled tools:', {
-        count: toolSchemas.length,
-        tools: toolSchemas.map(s => s.name)
-      });
-
-      let loopCount = 0;
-      const MAX_LOOPS = 10; // Prevent infinite loops
-
-      while (loopCount < MAX_LOOPS) {
-        loopCount++;
-        console.log(`🔄 Generation loop iteration ${loopCount}`);
+      console.log('🟡 Enabled tools:', toolSchemas.length);
 
+      while (true) {
         const messagesForGeneration = [
           { role: "system" as const, content: systemPrompt },
           ...currentMessages,
         ];
 
-        console.log('🟡 Calling generateResponse...', {
-          messageCount: messagesForGeneration.length,
-          toolSchemaCount: toolSchemas.length
-        });
-
         setMessages([...currentMessages, { role: "assistant", content: "" }]);
 
         let accumulatedContent = "";
-        let tokenCount = 0;
+        console.log('🟡 Generating response...');
         
         const response = await generateResponse(
           messagesForGeneration,
           toolSchemas,
           (token: string) => {
-            tokenCount++;
             accumulatedContent += token;
-            if (tokenCount % 10 === 0) {
-              console.log(`📝 Streaming... (${tokenCount} tokens)`);
-            }
             setMessages((current) => {
               const updated = [...current];
               updated[updated.length - 1] = {
@@ -495,25 +383,17 @@ const App: React.FC = () => {
               };
               return updated;
             });
-          }
+          },
         );
 
-        console.log('🟢 Response received:', {
-          length: response.length,
-          preview: response.substring(0, 100),
-          totalTokens: tokenCount
-        });
+        console.log('🟢 Response:', response.substring(0, 100));
 
         currentMessages.push({ role: "assistant", content: response });
         const toolCallContent = extractToolCallContent(response);
 
         if (toolCallContent) {
-          console.log('🔧 Tool call detected in response');
+          console.log('🔧 Tool call detected');
           const toolResults = await executeToolCalls(toolCallContent);
-          console.log('🔧 Tool execution complete:', {
-            resultCount: toolResults.length,
-            hasErrors: toolResults.some(r => r.error)
-          });
 
           const toolMessage: ToolMessage = {
             role: "tool",
@@ -522,24 +402,15 @@ const App: React.FC = () => {
           };
           currentMessages.push(toolMessage);
           setMessages([...currentMessages]);
-          
-          console.log('🔄 Continuing generation loop with tool results');
           continue;
         } else {
-          console.log('✅ No tool calls detected, finishing generation');
+          console.log('✅ Done');
           setMessages(currentMessages);
           break;
         }
       }
-
-      if (loopCount >= MAX_LOOPS) {
-        console.warn('⚠️ Maximum generation loops reached');
-        throw new Error('Maximum generation loops reached. The model may be stuck in a tool-calling loop.');
-      }
-
-      console.log('🏁 Generation complete successfully');
     } catch (error) {
-      console.error('🔴 Error in handleSendMessage:', error);
+      console.error('🔴 Error:', error);
       const errorMessage = getErrorMessage(error);
       setMessages([
         ...currentMessages,
@@ -576,7 +447,7 @@ const App: React.FC = () => {
         console.error("Failed to save system prompt:", error);
       }
     },
-    []
+    [],
   );
 
   const loadSelectedModel = useCallback(async (): Promise<void> => {
@@ -635,7 +506,7 @@ const App: React.FC = () => {
         console.error("Failed to save selected model ID:", error);
       }
     },
-    []
+    [],
   );
 
   useEffect(() => {
@@ -646,4 +517,333 @@ const App: React.FC = () => {
   const handleModelSelect = async (modelId: string) => {
     setSelectedModelId(modelId);
     setIsModelDropdownOpen(false);
-    a
+    await saveSelectedModel(modelId);
+  };
+
+  const handleExampleClick = async (messageText: string): Promise<void> => {
+    if (!isReady || isGenerating) return;
+
+    setInput(messageText);
+
+    const userMessage: Message = { role: "user", content: messageText };
+    const currentMessages: Message[] = [...messages, userMessage];
+    setMessages(currentMessages);
+    setInput("");
+    setIsGenerating(true);
+
+    try {
+      const toolSchemas = tools
+        .filter((tool) => tool.enabled)
+        .map((tool) => generateSchemaFromCode(tool.code));
+
+      while (true) {
+        const messagesForGeneration = [
+          { role: "system" as const, content: systemPrompt },
+          ...currentMessages,
+        ];
+
+        setMessages([...currentMessages, { role: "assistant", content: "" }]);
+
+        let accumulatedContent = "";
+        const response = await generateResponse(
+          messagesForGeneration,
+          toolSchemas,
+          (token: string) => {
+            accumulatedContent += token;
+            setMessages((current) => {
+              const updated = [...current];
+              updated[updated.length - 1] = {
+                role: "assistant",
+                content: accumulatedContent,
+              };
+              return updated;
+            });
+          },
+        );
+
+        currentMessages.push({ role: "assistant", content: response });
+        const toolCallContent = extractToolCallContent(response);
+
+        if (toolCallContent) {
+          const toolResults = await executeToolCalls(toolCallContent);
+
+          const toolMessage: ToolMessage = {
+            role: "tool",
+            content: JSON.stringify(toolResults.map((r) => r.result ?? null)),
+            renderInfo: toolResults,
+          };
+          currentMessages.push(toolMessage);
+          setMessages([...currentMessages]);
+          continue;
+        } else {
+          setMessages(currentMessages);
+          break;
+        }
+      }
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setMessages([
+        ...currentMessages,
+        {
+          role: "assistant",
+          content: `Error generating response: ${errorMessage}`,
+        },
+      ]);
+    } finally {
+      setIsGenerating(false);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+
+  return (
+    <div className="font-sans bg-gray-900">
+      {!isReady ? (
+        <LoadingScreen
+          isLoading={isLoading}
+          progress={progress}
+          error={error}
+          loadSelectedModel={loadSelectedModel}
+          selectedModelId={selectedModelId}
+          isModelDropdownOpen={isModelDropdownOpen}
+          setIsModelDropdownOpen={setIsModelDropdownOpen}
+          handleModelSelect={handleModelSelect}
+        />
+      ) : (
+        <div className="flex h-screen text-white">
+          <div className="w-1/2 flex flex-col p-4">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <h1 className="text-3xl font-bold text-gray-200">
+                  LFM2 WebGPU
+                </h1>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="flex items-center text-green-400">
+                  <Zap size={16} className="mr-2" />
+                  Ready
+                </div>
+                <button
+                  disabled={isGenerating}
+                  onClick={clearChat}
+                  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"
+                >
+                  <RotateCcw size={14} className="mr-2" /> Clear
+                </button>
+                <button
+                  onClick={handleOpenSystemPromptModal}
+                  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="Edit system prompt"
+                >
+                  <Settings size={16} />
+                </button>
+              </div>
+            </div>
+
+            <div
+              ref={chatContainerRef}
+              className="flex-grow bg-gray-800 rounded-lg p-4 overflow-y-auto mb-4 space-y-4"
+            >
+              {messages.length === 0 && isReady ? (
+                <ExamplePrompts onExampleClick={handleExampleClick} />
+              ) : (
+                messages.map((msg, index) => {
+                  const key = `${msg.role}-${index}`;
+
+                  if (msg.role === "user") {
+                    return (
+                      <div key={key} className="flex justify-end">
+                        <div className="p-3 rounded-lg max-w-md bg-indigo-600">
+                          <p className="text-sm whitespace-pre-wrap">
+                            {msg.content}
+                          </p>
+                        </div>
+                      </div>
+                    );
+                  } else if (msg.role === "assistant") {
+                    const isToolCall = msg.content.includes(
+                      "<|tool_call_start|>",
+                    );
+
+                    if (isToolCall) {
+                      const nextMessage = messages[index + 1];
+                      const isCompleted = nextMessage?.role === "tool";
+                      const hasError =
+                        isCompleted &&
+                        (nextMessage as ToolMessage).renderInfo.some(
+                          (info) => !!info.error,
+                        );
+
+                      return (
+                        <div key={key} className="flex justify-start">
+                          <div className="p-3 rounded-lg bg-gray-700">
+                            <ToolCallIndicator
+                              content={msg.content}
+                              isRunning={!isCompleted}
+                              hasError={hasError}
+                            />
+                          </div>
+                        </div>
+                      );
+                    }
+
+                    return (
+                      <div key={key} className="flex justify-start">
+                        <div className="p-3 rounded-lg max-w-md bg-gray-700">
+                          <p className="text-sm whitespace-pre-wrap">
+                            {msg.content}
+                          </p>
+                        </div>
+                      </div>
+                    );
+                  } else if (msg.role === "tool") {
+                    const visibleToolResults = msg.renderInfo.filter(
+                      (info) =>
+                        info.error || (info.result != null && info.renderer),
+                    );
+
+                    if (visibleToolResults.length === 0) return null;
+
+                    return (
+                      <div key={key} className="flex justify-start">
+                        <div className="p-3 rounded-lg bg-gray-700 max-w-lg">
+                          <div className="space-y-3">
+                            {visibleToolResults.map((info, idx) => (
+                              <div className="flex flex-col gap-2" key={idx}>
+                                <div className="text-xs text-gray-400 font-mono">
+                                  {info.call}
+                                </div>
+                                {info.error ? (
+                                  <ResultBlock error={info.error} />
+                                ) : (
+                                  <ToolResultRenderer
+                                    result={info.result}
+                                    rendererCode={info.renderer}
+                                    input={info.input}
+                                  />
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return null;
+                })
+              )}
+            </div>
+
+            <div className="flex">
+              <input
+                ref={inputRef}
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) =>
+                  e.key === "Enter" &&
+                  !isGenerating &&
+                  isReady &&
+                  handleSendMessage()
+                }
+                disabled={isGenerating || !isReady}
+                className="flex-grow bg-gray-700 rounded-l-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
+                placeholder={
+                  isReady
+                    ? "Type your message here..."
+                    : "Load model first to enable chat"
+                }
+              />
+              <button
+                onClick={handleSendMessage}
+                disabled={isGenerating || !isReady}
+                className="bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-bold p-3 rounded-r-lg transition-colors"
+              >
+                <Play size={20} />
+              </button>
+            </div>
+          </div>
+
+          <div className="w-1/2 flex flex-col p-4 border-l border-gray-700">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-2xl font-bold text-teal-400">Tools</h2>
+              <button
+                onClick={addTool}
+                className="flex items-center bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-lg transition-colors"
+              >
+                <Plus size={16} className="mr-2" /> Add Tool
+              </button>
+            </div>
+            <div
+              ref={toolsContainerRef}
+              className="flex-grow bg-gray-800 rounded-lg p-4 overflow-y-auto space-y-3"
+            >
+              {tools.map((tool) => (
+                <ToolItem
+                  key={tool.id}
+                  tool={tool}
+                  onToggleEnabled={() => toggleToolEnabled(tool.id)}
+                  onToggleCollapsed={() => toggleToolCollapsed(tool.id)}
+                  onExpand={() => expandTool(tool.id)}
+                  onDelete={() => deleteTool(tool.id)}
+                  onCodeChange={(newCode) =>
+                    handleToolCodeChange(tool.id, newCode)
+                  }
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {isSystemPromptModalOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-gray-800 rounded-lg p-6 w-3/4 max-w-4xl max-h-3/4 flex flex-col text-gray-100">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold text-indigo-400">
+                Edit System Prompt
+              </h2>
+              <button
+                onClick={handleCancelSystemPrompt}
+                className="text-gray-400 hover:text-white"
+              >
+                <X size={20} />
+              </button>
+            </div>
+            <div className="flex-grow mb-4">
+              <textarea
+                value={tempSystemPrompt}
+                onChange={(e) => setTempSystemPrompt(e.target.value)}
+                className="w-full h-full bg-gray-700 text-white p-4 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                placeholder="Enter your system prompt here..."
+                style={{ minHeight: "300px" }}
+              />
+            </div>
+            <div className="flex justify-between">
+              <button
+                onClick={handleResetSystemPrompt}
+                className="px-4 py-2 bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors"
+              >
+                Reset
+              </button>
+              <div className="flex gap-3">
+                <button
+                  onClick={handleSaveSystemPrompt}
+                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default App;