remove default tools and make the get started page dynamic. Added public folder

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+package-lock.json

src/App.tsx

@@ -35,7 +35,7 @@ import {
 import { DEFAULT_SYSTEM_PROMPT } from "./constants/systemPrompt";
 import { DB_NAME, STORE_NAME, SETTINGS_STORE_NAME } from "./constants/db";
 
-import { DEFAULT_TOOLS, TEMPLATE } from "./tools";
+import { TEMPLATE } from "./tools";
 import ToolResultRenderer from "./components/ToolResultRenderer";
 import ToolCallIndicator from "./components/ToolCallIndicator";
 import ToolItem from "./components/ToolItem";
@@ -123,23 +123,7 @@ const App: React.FC = () => {
   const loadTools = useCallback(async (): Promise<void> => {
     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 })));
-    }
+    setTools(allTools.map((t) => ({ ...t, isCollapsed: false })));
 
     // Load MCP tools and merge them
     const mcpTools = getMCPToolsAsOriginalTools();
@@ -386,12 +370,15 @@ const App: React.FC = () => {
           );
         }
 
-        results.push({
+        const renderInfo: RenderInfo = {
           call,
           result: parsedResult,
           renderer: rendererCode,
-          input: namedParams,
-        });
+        };
+        if (namedParams && Object.keys(namedParams).length > 0) {
+          renderInfo.input = namedParams;
+        }
+        results.push(renderInfo);
       } catch (error) {
         const errorMessage = getErrorMessage(error);
         results.push({ call, error: errorMessage });
@@ -720,7 +707,17 @@ const App: React.FC = () => {
               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} />
+                <ExamplePrompts
+                  examples={tools
+                    .filter((tool) => tool.enabled)
+                    .map((tool) => ({
+                      icon: "🛠️",
+                      displayText: tool.name,
+                      messageText: `${tool.name}()`,
+                    }))
+                    .filter((ex) => ex.displayText)}
+                  onExampleClick={handleExampleClick}
+                />
               ) : (
                 messages.map((msg, index) => {
                   const key = `${msg.role}-${index}`;

src/components/ExamplePrompts.tsx

@@ -9,32 +9,45 @@ interface ExamplePromptsProps {
 const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
   examples,
   onExampleClick,
-}) => (
-  <div className="flex flex-col items-center justify-center h-full space-y-6">
-    <div className="text-center mb-6">
-      <h2 className="text-2xl font-semibold text-gray-300 mb-1">
-        Try an example
-      </h2>
-      <p className="text-sm text-gray-500">Click one to get started</p>
-    </div>
+}) => {
+  // If examples are provided, use them. Otherwise, generate from enabled tools.
+  let dynamicExamples = examples;
+  if (!dynamicExamples) {
+    // Try to get tools from props (if passed as examples)
+    dynamicExamples = undefined;
+  }
+  // If still undefined, fallback to DEFAULT_EXAMPLES
+  if (!dynamicExamples) {
+    dynamicExamples = DEFAULT_EXAMPLES;
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full space-y-6">
+      <div className="text-center mb-6">
+        <h2 className="text-2xl font-semibold text-gray-300 mb-1">
+          Try an example
+        </h2>
+        <p className="text-sm text-gray-500">Click one to get started</p>
+      </div>
 
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl w-full px-4">
-      {(examples || DEFAULT_EXAMPLES).map((example, index) => (
-        <button
-          key={index}
-          onClick={() => onExampleClick(example.messageText)}
-          className="flex items-center gap-3 p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-left group cursor-pointer"
-        >
-          <span className="text-xl flex-shrink-0 group-hover:scale-110 transition-transform">
-            {example.icon}
-          </span>
-          <span className="text-sm text-gray-200 group-hover:text-white transition-colors">
-            {example.displayText}
-          </span>
-        </button>
-      ))}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl w-full px-4">
+        {dynamicExamples.map((example, index) => (
+          <button
+            key={index}
+            onClick={() => onExampleClick(example.messageText)}
+            className="flex items-center gap-3 p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-left group cursor-pointer"
+          >
+            <span className="text-xl flex-shrink-0 group-hover:scale-110 transition-transform">
+              {example.icon}
+            </span>
+            <span className="text-sm text-gray-200 group-hover:text-white transition-colors">
+              {example.displayText}
+            </span>
+          </button>
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default ExamplePrompts;

src/tools/get_location.js

@@ -1,84 +0,0 @@
-/**
- * Get the user's current location using the browser's geolocation API.
- * @returns {Promise<{ latitude: number, longitude: number }>} The current position { latitude, longitude }.
- */
-export async function get_location() {
-  return new Promise((resolve, reject) => {
-    if (!navigator.geolocation) {
-      reject("Geolocation not supported.");
-      return;
-    }
-    navigator.geolocation.getCurrentPosition(
-      (pos) =>
-        resolve({
-          latitude: pos.coords.latitude,
-          longitude: pos.coords.longitude,
-        }),
-      (err) => reject(err.message || "Geolocation error"),
-    );
-  });
-}
-
-export default (input, output) =>
-  React.createElement(
-    "div",
-    { className: "bg-green-50 border border-green-200 rounded-lg p-4" },
-    React.createElement(
-      "div",
-      { className: "flex items-center mb-2" },
-      React.createElement(
-        "div",
-        {
-          className:
-            "w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3",
-        },
-        "📍",
-      ),
-      React.createElement(
-        "h3",
-        { className: "text-green-900 font-semibold" },
-        "Location",
-      ),
-    ),
-    output?.latitude && output?.longitude
-      ? React.createElement(
-          "div",
-          { className: "space-y-1 text-sm" },
-          React.createElement(
-            "p",
-            { className: "text-green-700" },
-            React.createElement(
-              "span",
-              { className: "font-medium" },
-              "Latitude: ",
-            ),
-            output.latitude.toFixed(6),
-          ),
-          React.createElement(
-            "p",
-            { className: "text-green-700" },
-            React.createElement(
-              "span",
-              { className: "font-medium" },
-              "Longitude: ",
-            ),
-            output.longitude.toFixed(6),
-          ),
-          React.createElement(
-            "a",
-            {
-              href: `https://maps.google.com?q=${output.latitude},${output.longitude}`,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className:
-                "inline-block mt-2 text-green-600 hover:text-green-800 underline text-xs",
-            },
-            "View on Google Maps",
-          ),
-        )
-      : React.createElement(
-          "p",
-          { className: "text-green-700 text-sm" },
-          JSON.stringify(output),
-        ),
-  );

src/tools/get_time.js

@@ -1,51 +0,0 @@
-/**
- * Get the current date and time.
- * @returns {{ iso: string, local: string }} The current date and time as ISO and local time strings.
- */
-export function get_time() {
-  const now = new Date();
-  return {
-    iso: now.toISOString(),
-    local: now.toLocaleString(undefined, {
-      dateStyle: "full",
-      timeStyle: "long",
-    }),
-  };
-}
-
-export default (input, output) =>
-  React.createElement(
-    "div",
-    { className: "bg-amber-50 border border-amber-200 rounded-lg p-4" },
-    React.createElement(
-      "div",
-      { className: "flex items-center mb-2" },
-      React.createElement(
-        "div",
-        {
-          className:
-            "w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center mr-3",
-        },
-        "🕐",
-      ),
-      React.createElement(
-        "h3",
-        { className: "text-amber-900 font-semibold" },
-        "Current Time",
-      ),
-    ),
-    React.createElement(
-      "div",
-      { className: "text-sm space-y-1" },
-      React.createElement(
-        "p",
-        { className: "text-amber-700 font-mono" },
-        output.local,
-      ),
-      React.createElement(
-        "p",
-        { className: "text-amber-600 text-xs" },
-        new Date(output.iso).toLocaleString(),
-      ),
-    ),
-  );

src/tools/math_eval.js

@@ -1,54 +0,0 @@
-/**
- * Evaluate a math expression.
- * @param {string} expression - The math expression (e.g., "2 + 2 * (3 - 1)").
- * @returns {number} The result of the expression.
- */
-export function math_eval(expression) {
-  // Only allow numbers, spaces, and math symbols: + - * / % ( ) .
-  if (!/^[\d\s+\-*/%.()]+$/.test(expression)) {
-    throw new Error("Invalid characters in expression.");
-  }
-  return Function('"use strict";return (' + expression + ")")();
-}
-
-export default (input, output) =>
-  React.createElement(
-    "div",
-    { className: "bg-emerald-50 border border-emerald-200 rounded-lg p-4" },
-    React.createElement(
-      "div",
-      { className: "flex items-center mb-2" },
-      React.createElement(
-        "div",
-        {
-          className:
-            "w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center mr-3",
-        },
-        "🧮",
-      ),
-      React.createElement(
-        "h3",
-        { className: "text-emerald-900 font-semibold" },
-        "Math Evaluation",
-      ),
-    ),
-    React.createElement(
-      "div",
-      { className: "text-center" },
-      React.createElement(
-        "div",
-        { className: "text-lg font-mono text-emerald-700 mb-1" },
-        input.expression || "Unknown expression",
-      ),
-      React.createElement(
-        "div",
-        { className: "text-2xl font-bold text-emerald-600 mb-1" },
-        `= ${output}`,
-      ),
-      React.createElement(
-        "p",
-        { className: "text-emerald-500 text-xs" },
-        "Calculation result",
-      ),
-    ),
-  );

src/tools/open_webpage.js

@@ -1,49 +0,0 @@
-/**
- * Open a webpage
- * @param {string} src - The URL of the webpage.
- * @returns {string} The validated URL.
- */
-export function open_webpage(src) {
-  try {
-    const urlObj = new URL(src);
-    if (!["http:", "https:"].includes(urlObj.protocol)) {
-      throw new Error("Only HTTP and HTTPS URLs are allowed.");
-    }
-    return urlObj.href;
-  } catch (error) {
-    throw new Error("Invalid URL provided.");
-  }
-}
-
-export default (input, output) => {
-  return React.createElement(
-    "div",
-    { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
-    React.createElement(
-      "div",
-      { className: "flex items-center mb-2" },
-      React.createElement(
-        "div",
-        {
-          className:
-            "w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3",
-        },
-        "🌐",
-      ),
-      React.createElement(
-        "h3",
-        { className: "text-blue-900 font-semibold" },
-        "Web Page",
-      ),
-    ),
-    React.createElement("iframe", {
-      src: output,
-      className: "w-full border border-blue-300 rounded",
-      width: 480,
-      height: 360,
-      title: "Embedded content",
-      allow: "autoplay",
-      frameBorder: "0",
-    }),
-  );
-};

src/tools/random_number.js

@@ -1,51 +0,0 @@
-/**
- * Generate a random integer between min and max (inclusive).
- * @param {number} min - Minimum value (inclusive).
- * @param {number} max - Maximum value (inclusive).
- * @returns {number} A random integer.
- */
-export function random_number(min, max) {
-  min = Math.ceil(Number(min));
-  max = Math.floor(Number(max));
-  if (isNaN(min) || isNaN(max) || min > max) {
-    throw new Error("Invalid min or max value.");
-  }
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-export default (input, output) =>
-  React.createElement(
-    "div",
-    { className: "bg-indigo-50 border border-indigo-200 rounded-lg p-4" },
-    React.createElement(
-      "div",
-      { className: "flex items-center mb-2" },
-      React.createElement(
-        "div",
-        {
-          className:
-            "w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3",
-        },
-        "🎲",
-      ),
-      React.createElement(
-        "h3",
-        { className: "text-indigo-900 font-semibold" },
-        "Random Number",
-      ),
-    ),
-    React.createElement(
-      "div",
-      { className: "text-center" },
-      React.createElement(
-        "div",
-        { className: "text-3xl font-bold text-indigo-600 mb-1" },
-        output,
-      ),
-      React.createElement(
-        "p",
-        { className: "text-indigo-500 text-xs" },
-        `Range: ${input.min || "?"} - ${input.max || "?"}`,
-      ),
-    ),
-  );

src/tools/sleep.js

@@ -1,45 +0,0 @@
-/**
- * Sleep for a given number of seconds.
- * @param {number} seconds - The number of seconds to sleep.
- * @return {void}
- */
-export async function sleep(seconds) {
-  return new Promise((resolve) => setTimeout(resolve, seconds * 1000));
-}
-
-export default (input, output) =>
-  React.createElement(
-    "div",
-    { className: "bg-purple-50 border border-purple-200 rounded-lg p-4" },
-    React.createElement(
-      "div",
-      { className: "flex items-center mb-2" },
-      React.createElement(
-        "div",
-        {
-          className:
-            "w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3",
-        },
-        "😴",
-      ),
-      React.createElement(
-        "h3",
-        { className: "text-purple-900 font-semibold" },
-        "Sleep",
-      ),
-    ),
-    React.createElement(
-      "div",
-      { className: "text-sm space-y-1" },
-      React.createElement(
-        "p",
-        { className: "text-purple-700 font-medium" },
-        `Slept for ${input.seconds || "unknown"} seconds`,
-      ),
-      React.createElement(
-        "p",
-        { className: "text-purple-600 text-xs" },
-        output,
-      ),
-    ),
-  );

src/tools/speak.js

@@ -1,58 +0,0 @@
-/**
- * Speak text using the browser's speech synthesis API.
- * @param {string} text - The text to speak.
- * @param {string} [voice] - The name of the voice to use (optional).
- * @return {void}
- */
-export function speak(text, voice = undefined) {
-  const utter = new window.SpeechSynthesisUtterance(text);
-  if (voice) {
-    const voices = window.speechSynthesis.getVoices();
-    const match = voices.find((v) => v.name === voice);
-    if (match) utter.voice = match;
-  }
-  window.speechSynthesis.speak(utter);
-}
-
-export default (input, output) =>
-  React.createElement(
-    "div",
-    { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
-    React.createElement(
-      "div",
-      { className: "flex items-center mb-2" },
-      React.createElement(
-        "div",
-        {
-          className:
-            "w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3",
-        },
-        "🔊",
-      ),
-      React.createElement(
-        "h3",
-        { className: "text-blue-900 font-semibold" },
-        "Speech Synthesis",
-      ),
-    ),
-    React.createElement(
-      "div",
-      { className: "text-sm space-y-1" },
-      React.createElement(
-        "p",
-        { className: "text-blue-700 font-medium" },
-        `Speaking: "${input.text || "Unknown text"}"`,
-      ),
-      input.voice &&
-        React.createElement(
-          "p",
-          { className: "text-blue-600 text-xs" },
-          `Voice: ${input.voice}`,
-        ),
-      React.createElement(
-        "p",
-        { className: "text-blue-600 text-xs" },
-        typeof output === "string" ? output : "Speech completed successfully",
-      ),
-    ),
-  );

src/tools/template.js

@@ -1,47 +0,0 @@
-/**
- * Description of the tool.
- * @param {any} parameter1 - Description of the first parameter.
- * @param {any} parameter2 - Description of the second parameter.
- * @returns {any} Description of the return value.
- */
-export function new_tool(parameter1, parameter2) {
-  // TODO: Implement the tool logic here
-  return true; // Placeholder return value
-}
-
-export default (input, output) =>
-  React.createElement(
-    "div",
-    { className: "bg-amber-50 border border-amber-200 rounded-lg p-4" },
-    React.createElement(
-      "div",
-      { className: "flex items-center mb-2" },
-      React.createElement(
-        "div",
-        {
-          className:
-            "w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center mr-3",
-        },
-        "🛠️",
-      ),
-      React.createElement(
-        "h3",
-        { className: "text-amber-900 font-semibold" },
-        "Tool Name",
-      ),
-    ),
-    React.createElement(
-      "div",
-      { className: "text-sm space-y-1" },
-      React.createElement(
-        "p",
-        { className: "text-amber-700 font-medium" },
-        `Input: ${JSON.stringify(input)}`,
-      ),
-      React.createElement(
-        "p",
-        { className: "text-amber-600 text-xs" },
-        `Output: ${output}`,
-      ),
-    ),
-  );