Update src/App.tsx

src/App.tsx

@@ -341,4 +341,309 @@ const App: React.FC = () => {
         finalArgs.push(positionalArgs[i]);
       } else if (Object.prototype.hasOwnProperty.call(keywordArgs, paramName)) {
         finalArgs.push(keywordArgs[paramName]);
-      } els
+      } else if (
+        Object.prototype.hasOwnProperty.call(
+          schema.parameters.properties[paramName],
+          "default"
+        )
+      ) {
+        finalArgs.push(schema.parameters.properties[paramName].default);
+      } else if (!requiredParams.includes(paramName)) {
+        finalArgs.push(undefined);
+      } else {
+        throw new Error(`Missing required argument: ${paramName}`);
+      }
+    }
+
+    const bodyMatch = functionCode.match(/function[^{]+{([\s\S]*)}/);
+    if (!bodyMatch) {
+      throw new Error(
+        "Could not parse function body. Ensure it's a standard `function` declaration."
+      );
+    }
+    const body = bodyMatch[1];
+    const AsyncFunction = Object.getPrototypeOf(
+      async function () {}
+    ).constructor;
+    const func = new AsyncFunction(...paramNames, body);
+    const result = await func(...finalArgs);
+    console.log('✅ Local tool result:', result);
+    return JSON.stringify(result);
+  };
+
+  const executeToolCalls = async (
+    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');
+      return [{ call: "", error: "No valid tool calls found." }];
+    }
+
+    console.log('🔧 Found tool calls:', toolCalls);
+
+    const results: RenderInfo[] = [];
+    for (const call of toolCalls) {
+      try {
+        const result = await executeToolCall(call);
+        const parsedCall = parsePythonicCalls(call);
+        const toolUsed = parsedCall
+          ? tools.find((t) => t.name === parsedCall.name && t.enabled)
+          : null;
+        const { rendererCode } = toolUsed
+          ? extractFunctionAndRenderer(toolUsed.code)
+          : { rendererCode: undefined };
+
+        let parsedResult;
+        try {
+          parsedResult = JSON.parse(result);
+        } catch {
+          parsedResult = result;
+        }
+
+        let namedParams: Record<string, unknown> = Object.create(null);
+        if (parsedCall && toolUsed) {
+          const schema = generateSchemaFromCode(
+            extractFunctionAndRenderer(toolUsed.code).functionCode
+          );
+          const paramNames = Object.keys(schema.parameters.properties);
+          namedParams = mapArgsToNamedParams(
+            paramNames,
+            parsedCall.positionalArgs,
+            parsedCall.keywordArgs
+          );
+        }
+
+        results.push({
+          call,
+          result: parsedResult,
+          renderer: rendererCode,
+          input: namedParams,
+        });
+      } catch (error) {
+        const errorMessage = getErrorMessage(error);
+        console.error('❌ Tool execution error:', errorMessage);
+        results.push({ call, error: errorMessage });
+      }
+    }
+    return results;
+  };
+
+  const handleSendMessage = async (): Promise<void> => {
+    if (!input.trim() || !isReady) {
+      console.warn('⚠️ Cannot send message:', { inputEmpty: !input.trim(), isReady });
+      return;
+    }
+
+    console.log('🔵 Starting message send...', { input, isReady });
+
+    const userMessage: Message = { role: "user", content: input };
+    const currentMessages: Message[] = [...messages, userMessage];
+    setMessages(currentMessages);
+    setInput("");
+    setIsGenerating(true);
+
+    try {
+      const toolSchemas = tools
+        .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}`);
+
+        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;
+        
+        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] = {
+                role: "assistant",
+                content: accumulatedContent,
+              };
+              return updated;
+            });
+          }
+        );
+
+        console.log('🟢 Response received:', {
+          length: response.length,
+          preview: response.substring(0, 100),
+          totalTokens: tokenCount
+        });
+
+        currentMessages.push({ role: "assistant", content: response });
+        const toolCallContent = extractToolCallContent(response);
+
+        if (toolCallContent) {
+          console.log('🔧 Tool call detected in response');
+          const toolResults = await executeToolCalls(toolCallContent);
+          console.log('🔧 Tool execution complete:', {
+            resultCount: toolResults.length,
+            hasErrors: toolResults.some(r => r.error)
+          });
+
+          const toolMessage: ToolMessage = {
+            role: "tool",
+            content: JSON.stringify(toolResults.map((r) => r.result ?? null)),
+            renderInfo: toolResults,
+          };
+          currentMessages.push(toolMessage);
+          setMessages([...currentMessages]);
+          
+          console.log('🔄 Continuing generation loop with tool results');
+          continue;
+        } else {
+          console.log('✅ No tool calls detected, finishing generation');
+          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);
+      const errorMessage = getErrorMessage(error);
+      setMessages([
+        ...currentMessages,
+        {
+          role: "assistant",
+          content: `Error generating response: ${errorMessage}`,
+        },
+      ]);
+    } finally {
+      setIsGenerating(false);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+
+  const loadSystemPrompt = useCallback(async (): Promise<void> => {
+    try {
+      const db = await getDB();
+      const stored = await db.get(SETTINGS_STORE_NAME, "systemPrompt");
+      if (stored && stored.value) setSystemPrompt(stored.value);
+    } catch (error) {
+      console.error("Failed to load system prompt:", error);
+    }
+  }, []);
+
+  const saveSystemPrompt = useCallback(
+    async (prompt: string): Promise<void> => {
+      try {
+        const db = await getDB();
+        await db.put(SETTINGS_STORE_NAME, {
+          key: "systemPrompt",
+          value: prompt,
+        });
+      } catch (error) {
+        console.error("Failed to save system prompt:", error);
+      }
+    },
+    []
+  );
+
+  const loadSelectedModel = useCallback(async (): Promise<void> => {
+    try {
+      await loadModel();
+    } catch (error) {
+      console.error("Failed to load model:", error);
+    }
+  }, [loadModel]);
+
+  const loadSelectedModelId = useCallback(async (): Promise<void> => {
+    try {
+      const db = await getDB();
+      const stored = await db.get(SETTINGS_STORE_NAME, "selectedModelId");
+      if (stored && stored.value) {
+        setSelectedModelId(stored.value);
+      }
+    } catch (error) {
+      console.error("Failed to load selected model ID:", error);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadSystemPrompt();
+  }, [loadSystemPrompt]);
+
+  const handleOpenSystemPromptModal = (): void => {
+    setTempSystemPrompt(systemPrompt);
+    setIsSystemPromptModalOpen(true);
+  };
+
+  const handleSaveSystemPrompt = (): void => {
+    setSystemPrompt(tempSystemPrompt);
+    saveSystemPrompt(tempSystemPrompt);
+    setIsSystemPromptModalOpen(false);
+  };
+
+  const handleCancelSystemPrompt = (): void => {
+    setTempSystemPrompt("");
+    setIsSystemPromptModalOpen(false);
+  };
+
+  const handleResetSystemPrompt = (): void => {
+    setTempSystemPrompt(DEFAULT_SYSTEM_PROMPT);
+  };
+
+  const saveSelectedModel = useCallback(
+    async (modelId: string): Promise<void> => {
+      try {
+        const db = await getDB();
+        await db.put(SETTINGS_STORE_NAME, {
+          key: "selectedModelId",
+          value: modelId,
+        });
+      } catch (error) {
+        console.error("Failed to save selected model ID:", error);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    loadSystemPrompt();
+    loadSelectedModelId();
+  }, [loadSystemPrompt, loadSelectedModelId]);
+
+  const handleModelSelect = async (modelId: string) => {
+    setSelectedModelId(modelId);
+    setIsModelDropdownOpen(false);
+    a