done

.idea/php.xml

@@ -10,9 +10,24 @@
     <option name="highlightLevel" value="WARNING" />
     <option name="transferred" value="true" />
   </component>
+  <component name="PhpCodeSniffer">
+    <phpcs_settings>
+      <phpcs_by_interpreter asDefaultInterpreter="true" interpreter_id="7f620b7f-b413-40f6-9b51-4ffe32f7487a" timeout="30000" />
+    </phpcs_settings>
+  </component>
+  <component name="PhpStan">
+    <PhpStan_settings>
+      <phpstan_by_interpreter asDefaultInterpreter="true" interpreter_id="7f620b7f-b413-40f6-9b51-4ffe32f7487a" timeout="60000" />
+    </PhpStan_settings>
+  </component>
   <component name="PhpStanOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>
+  <component name="Psalm">
+    <Psalm_settings>
+      <psalm_fixer_by_interpreter asDefaultInterpreter="true" interpreter_id="7f620b7f-b413-40f6-9b51-4ffe32f7487a" timeout="60000" />
+    </Psalm_settings>
+  </component>
   <component name="PsalmOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>

.idea/prettier.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="PrettierConfiguration">
-    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myConfigurationMode" value="MANUAL" />
+    <option name="myRunOnSave" value="true" />
   </component>
 </project>

src/App.tsx

@@ -1,103 +1,18 @@
-import { type Message } from "@huggingface/transformers";
 import ChatSettingsContextProvider from "@utils/context/chatSettings/ChatSettingsContextProvider.tsx";
-import { type FormEvent, useMemo, useState } from "react";
 
 import Chat from "./chat/Chat.tsx";
-import TextGeneration from "./textGeneration/TextGeneration.ts";
+import Header from "./layout/Header.tsx";
 import ThemeContextProvider from "./utils/context/theme/ThemeContextProvider.tsx";
 
 export default function App() {
   return (
     <ThemeContextProvider>
       <ChatSettingsContextProvider>
-        <Chat className="mx-auto h-screen max-w-4xl" />
+        <div className="mx-auto flex h-screen w-full max-w-4xl flex-col">
+          <Header className="" />
+          <Chat className="flex-grow" />
+        </div>
       </ChatSettingsContextProvider>
     </ThemeContextProvider>
   );
 }
-
-/*export default function App() {
-  const [initialized, setInitialized] = useState<boolean>(false);
-  const [input, setInput] = useState<string>("");
-  const [messages, setMessages] = useState<Array<Message>>([
-    {
-      role: "system",
-      content: "You are a helpful assistant",
-    },
-  ]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const textGeneration = useMemo(() => new TextGeneration(), []);
-
-  const init = async () => {
-    await textGeneration.initializeModel(console.log);
-    setInitialized(true);
-  };
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    if (!input.trim()) return;
-
-    setIsLoading(true);
-    const requestMessages = messages;
-    requestMessages.push({
-      role: "user",
-      content: input,
-    });
-
-    try {
-      const resp = await textGeneration.generateText(
-        requestMessages,
-        [],
-        console.log
-      );
-      console.log(resp);
-      requestMessages.push({
-        role: "assistant",
-        content: resp.response,
-      });
-      setMessages(requestMessages);
-      setInput("");
-    } catch (error) {
-      console.error("Error:", error);
-      //setOutput("Error generating text. Check console for details.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div className="mx-auto max-w-3xl">
-      <h1 className="mb-6 text-3xl font-bold text-gray-900">Text Generation</h1>
-      {initialized ? (
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <textarea
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="Enter your prompt here..."
-            rows={5}
-            className="w-full rounded-lg border border-gray-300 px-4 py-3 focus:border-transparent focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-100"
-            disabled={isLoading}
-          />
-          <button
-            type="submit"
-            disabled={isLoading}
-            className="rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-400"
-          >
-            {isLoading ? "Generating..." : "Answer"}
-          </button>
-        </form>
-      ) : (
-        <button
-          type="button"
-          onClick={init}
-          disabled={isLoading}
-          className="rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-400"
-        >
-          initialize
-        </button>
-      )}
-    </div>
-  );
-}
-*/

src/chat/Chat.tsx

@@ -1,15 +1,22 @@
-import { type Message } from "@huggingface/transformers";
 import { Button, Card, Slider } from "@theme";
 import { useChatSettings } from "@utils/context/chatSettings/useChatSettings.ts";
 import { formatBytes } from "@utils/format.ts";
 import { MODELS } from "@utils/models.ts";
 import { TOOLS } from "@utils/tools.ts";
 import { Settings } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 
 import TextGeneration from "../textGeneration/TextGeneration.ts";
 import cn from "../utils/classnames.ts";
 import ChatForm from "./ChatForm.tsx";
+import MessageContent from "./MessageContent.tsx";
+import MessageToolCall from "./MessageToolCall.tsx";
 
 enum State {
   IDLE,
@@ -23,16 +30,25 @@ export default function Chat({ className = "" }: { className?: string }) {
   const initializedModelKey = useRef<string>(null);
   const [downloadProgress, setDownloadProgress] = useState<number>(0);
   const [state, setState] = useState<State>(State.IDLE);
-  const [messages, setMessages] = useState<Array<Message>>([]);
   const settingsKey = useRef<string>(null);
 
   const generator = useMemo(() => new TextGeneration(), []);
+  const getSnapshot = () => generator.chatMessages;
+  const messages = useSyncExternalStore(
+    generator.onChatMessageUpdate,
+    getSnapshot
+  );
 
   useEffect(() => {
     const newSettingsKey = JSON.stringify(settings);
     if (!settings || settingsKey.current === newSettingsKey) return;
     settingsKey.current = newSettingsKey;
-    setMessages([{ role: "system", content: settings.systemPrompt }]);
+    generator.initializeConversation(
+      TOOLS.filter((tool) => settings.tools.includes(tool.name)),
+      settings.temperature,
+      settings.enableThinking,
+      settings.systemPrompt
+    );
   }, [settings]);
 
   if (!settings) return;
@@ -54,18 +70,34 @@ export default function Chat({ className = "" }: { className?: string }) {
       await initializeModel();
     }
     setState(State.GENERATING);
-    const conversation = [...messages, { role: "user", content: prompt }];
+    await generator.runAgent(prompt);
 
-    const { response, modelUsage } = await generator.generateText(
-      settings.modelKey,
-      conversation,
-      [],
-      settings.temperature,
-      settings.enableThinking,
-      console.log
-    );
-    console.log(response, modelUsage);
-    setMessages([...conversation, { role: "assistant", content: response }]);
+    /*let nextPrompt = prompt;
+    while (nextPrompt) {
+      const conversation = [...messages, { role: "user", content: prompt }];
+      setMessages(conversation);
+
+      const answer: Message = {
+        role: "assistant",
+        content: "",
+      };
+
+      const { response, modelUsage } = await generator.generateText(
+        settings.modelKey,
+        conversation,
+        [],
+        settings.temperature,
+        settings.enableThinking,
+        (chunk) => {
+          answer.content += chunk;
+          setMessages([...conversation, answer]);
+        }
+      );
+      console.log(response, modelUsage);
+      setMessages([...conversation, { role: "assistant", content: response }]);
+    }*/
+
+    setState(State.READY);
   };
 
   const model = MODELS[settings.modelKey];
@@ -107,14 +139,42 @@ export default function Chat({ className = "" }: { className?: string }) {
           </div>
         </div>
       ) : (
-        <div>
-          {messages.map((message, index) => (
-            <p>{message.content}</p>
-          ))}
+        <div className="flex flex-col gap-4">
+          {messages
+            .filter(({ role }) => role !== "system")
+            .map((message, index) => (
+              <div
+                className={cn("w-3/4", {
+                  "self-end": message.role === "user",
+                })}
+                key={index}
+              >
+                {message.role === "user" ? (
+                  <Card>
+                    <p>{message.content}</p>
+                  </Card>
+                ) : message.role === "assistant" ? (
+                  <div className="space-y-1">
+                    {message.content.map((part) =>
+                      part.type === "tool" ? (
+                        <MessageToolCall tool={part} />
+                      ) : (
+                        <MessageContent content={part.content} />
+                      )
+                    )}
+                  </div>
+                ) : null}
+              </div>
+            ))}
         </div>
       )}
       <Card className="mt-auto">
-        <ChatForm disabled={!ready} onSubmit={(prompt) => generate(prompt)} />
+        <ChatForm
+          disabled={!ready}
+          onSubmit={(prompt) => generate(prompt)}
+          isGenerating={state === State.GENERATING}
+          onAbort={() => generator.abort()}
+        />
       </Card>
       <div className="flex justify-between dark:border-gray-700">
         <Button

src/chat/ChatForm.tsx

@@ -1,8 +1,8 @@
-import { InputText, InputTextarea } from "@theme";
+import { Button, Tooltip } from "@theme";
+import cn from "@utils/classnames.ts";
+import { ArrowUp, Square } from "lucide-react";
 import { Controller, useForm } from "react-hook-form";
 
-import cn from "../utils/classnames.ts";
-
 interface FormParams {
   input: string;
 }
@@ -11,31 +11,29 @@ export default function ChatForm({
   className = "",
   onSubmit,
   disabled,
+  isGenerating,
+  onAbort,
 }: {
   className?: string;
   onSubmit: (prompt: string) => void;
   disabled: boolean;
+  isGenerating: boolean;
+  onAbort: () => Promise<void>;
 }) {
-  const {
-    control,
-    formState: { errors },
-    handleSubmit,
-    reset,
-    watch,
-    setValue,
-  } = useForm<FormParams>({
+  const { control, handleSubmit, reset } = useForm<FormParams>({
     defaultValues: {
       input: "",
     },
   });
 
-  const userPrompt = watch("input");
-
   return (
     <div className={cn(className)}>
       <form
-        className="-mx-2"
-        onSubmit={handleSubmit((data) => onSubmit(data.input))}
+        className="flex items-center"
+        onSubmit={handleSubmit((data) => {
+          onSubmit(data.input);
+          reset();
+        })}
       >
         <Controller
           name="input"
@@ -45,7 +43,6 @@ export default function ChatForm({
             <input
               id="text-input"
               placeholder="Type your message..."
-              //error={errors.input?.message as string}
               disabled={disabled}
               value={field.value}
               onChange={field.onChange}
@@ -56,6 +53,13 @@ export default function ChatForm({
             />
           )}
         />
+        {isGenerating ? (
+          <Tooltip text="Cancel">
+            <Button type="button" onClick={onAbort} iconLeft={<Square />} />
+          </Tooltip>
+        ) : (
+          <Button type="submit" iconLeft={<ArrowUp />} disabled={disabled} />
+        )}
       </form>
     </div>
   );

src/chat/MessageContent.tsx

@@ -0,0 +1,116 @@
+import { Button } from "@theme";
+import cn from "@utils/classnames.ts";
+import { Lightbulb } from "lucide-react";
+import { useEffect, useState } from "react";
+import showdown from "showdown";
+
+const converter = new showdown.Converter();
+interface ParsedContent {
+  thinkContent: string | null;
+  afterContent: string;
+  isThinking: boolean;
+}
+
+function parseThinkTags(content: string): ParsedContent {
+  const openTagIndex = content.indexOf("<think>");
+
+  if (openTagIndex === -1) {
+    return {
+      thinkContent: null,
+      afterContent: content,
+      isThinking: false,
+    };
+  }
+
+  const closeTagIndex = content.indexOf("</think>");
+
+  if (closeTagIndex === -1) {
+    return {
+      thinkContent: content.slice(openTagIndex + 7),
+      afterContent: "",
+      isThinking: true,
+    };
+  }
+
+  return {
+    thinkContent: content.slice(openTagIndex + 7, closeTagIndex),
+    afterContent: content.slice(closeTagIndex + 8),
+    isThinking: false,
+  };
+}
+
+const PROSE_CLASS_NAME =
+  "prose dark:prose-invert prose-headings:font-semibold prose-headings:mt-4 prose-headings:mb-2 prose-h3:text-base prose-p:my-2 prose-ul:my-2 prose-li:my-0";
+
+export default function MessageContent({ content }: { content: string }) {
+  const [showThinking, setShowThinking] = useState(false);
+  const [thinkingTime, setThinkingTime] = useState(0);
+  const [forceThinkingComplete, setForceThinkingComplete] = useState(false);
+  const parsed = parseThinkTags(content);
+
+  // Detect when content stops changing and force thinking to complete
+  useEffect(() => {
+    if (parsed.isThinking) {
+      const timeout = setTimeout(() => {
+        setForceThinkingComplete(true);
+      }, 1000);
+
+      return () => clearTimeout(timeout);
+    } else {
+      setForceThinkingComplete(false);
+    }
+  }, [content, parsed.isThinking]);
+
+  useEffect(() => {
+    if (parsed.isThinking && !forceThinkingComplete) {
+      const startTime = Date.now();
+      const interval = setInterval(() => {
+        setThinkingTime((Date.now() - startTime) / 1000);
+      }, 100);
+      return () => clearInterval(interval);
+    }
+  }, [parsed.isThinking, forceThinkingComplete]);
+
+  const isThinking = parsed.isThinking && !forceThinkingComplete;
+
+  if (!parsed.thinkContent) {
+    return (
+      <div
+        className={cn(PROSE_CLASS_NAME, "max-w-none")}
+        dangerouslySetInnerHTML={{
+          __html: converter.makeHtml(content),
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <div>
+        <Button
+          variant="ghost"
+          color="mono"
+          size="xs"
+          onClick={() => setShowThinking(!showThinking)}
+          className="-ml-2 opacity-50"
+          loading={isThinking}
+          iconLeft={<Lightbulb />}
+        >
+          {isThinking ? "Thinking for" : "Thought for"}{" "}
+          {thinkingTime.toFixed(1)}s ({showThinking ? "Hide" : "Show"})
+        </Button>
+        {showThinking && (
+          <p className="max-w-none text-sm">{parsed.thinkContent}</p>
+        )}
+      </div>
+      {parsed.afterContent && (
+        <div
+          className={cn(PROSE_CLASS_NAME, "max-w-none")}
+          dangerouslySetInnerHTML={{
+            __html: converter.makeHtml(parsed.afterContent),
+          }}
+        />
+      )}
+    </div>
+  );
+}

src/chat/MessageToolCall.tsx

@@ -0,0 +1,57 @@
+import { Wrench } from "lucide-react";
+import { useState } from "react";
+
+import type { ChatMessageAssistantTool } from "../textGeneration/types.ts";
+import { Loader } from "../theme";
+import cn from "../utils/classnames.ts";
+
+export default function MessageToolCall({
+  tool,
+  className = "",
+}: {
+  tool: ChatMessageAssistantTool;
+  className?: string;
+}) {
+  const [expanded, setExpanded] = useState<boolean>(false);
+
+  const isLoading = tool.result === "";
+
+  return (
+    <div
+      className={cn(
+        className,
+        "rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800"
+      )}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <button
+          className="flex cursor-pointer items-center gap-2 text-xs text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {isLoading ? <Loader size="xs" /> : <Wrench className="h-3 w-3" />}
+          {isLoading ? "calling tool" : "called tool"} <b>{tool.name}</b>
+        </button>
+      </div>
+      {expanded && (
+        <div className="mt-2 space-y-2">
+          <div>
+            <div className="mb-1 text-xs text-gray-600 dark:text-gray-400">
+              Function:
+            </div>
+            <code className="block overflow-hidden rounded bg-white p-2 font-mono text-xs text-blue-600 dark:bg-gray-900 dark:text-blue-400">
+              {tool.functionSignature}
+            </code>
+          </div>
+          <div>
+            <div className="mb-1 text-xs text-gray-600 dark:text-gray-400">
+              Result:
+            </div>
+            <div className="overflow-hidden rounded bg-white p-2 text-sm whitespace-pre-wrap text-gray-900 dark:bg-gray-900 dark:text-gray-100">
+              {tool.result || "loading.."}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/layout/Header.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@theme";
+import cn from "@utils/classnames.ts";
+import { useTheme } from "@utils/context/theme/useTheme.ts";
+import { MonitorCog, Moon, Sun } from "lucide-react";
+
+function Header({ className = "" }: { className?: string }) {
+  const { storedTheme, toggleTheme } = useTheme();
+
+  return (
+    <div className={cn(className)}>
+      <div className="flex items-center justify-between gap-2 border-b-1 border-gray-200 px-4 py-2 dark:border-gray-800">
+        <h1 className="font-bold">Transformers.js TextGeneration</h1>
+        <Button
+          color="mono"
+          variant="ghost"
+          onClick={toggleTheme}
+          size="sm"
+          aria-label="Toggle theme"
+          iconRight={
+            storedTheme === "system" ? (
+              <MonitorCog className="h-3 w-3" />
+            ) : storedTheme === "light" ? (
+              <Sun className="h-3 w-3" />
+            ) : (
+              <Moon className="h-3 w-3" />
+            )
+          }
+        >
+          Theme:{" "}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default Header;

src/textGeneration/TextGeneration.ts

@@ -1,7 +1,16 @@
 import { type Message } from "@huggingface/transformers";
 
-import type { ChatTemplateTool } from "../utils/webMcp.ts";
 import {
+  type WebMCPTool,
+  executeToolCall,
+  splitResponse,
+  webMCPToolToChatTemplateTool,
+} from "../utils/webMcp.ts";
+import {
+  type ChatMessage,
+  type ChatMessageAssistant,
+  type ChatMessageAssistantResponse,
+  type ChatMessageAssistantTool,
   type ModelUsage,
   type Request,
   RequestType,
@@ -12,6 +21,15 @@ import {
 export default class TextGeneration {
   private worker: Worker;
   private requestId: number = 0;
+  private modelKey: string | null = null;
+  private tools: Array<WebMCPTool> | null = null;
+  private temperature: number | null = null;
+  private enableThinking: boolean | null = null;
+  private messages: Array<Message> = [];
+  private _chatMessages: Array<ChatMessage> = [];
+  private chatMessagesListener: Array<
+    (chatMessages: Array<ChatMessage>) => void
+  > = [];
 
   constructor() {
     this.worker = new Worker(
@@ -22,6 +40,26 @@ export default class TextGeneration {
     );
   }
 
+  get chatMessages() {
+    return this._chatMessages;
+  }
+
+  set chatMessages(chatMessages: Array<ChatMessage>) {
+    this._chatMessages = chatMessages;
+    this.chatMessagesListener.forEach((listener) => listener(chatMessages));
+  }
+
+  public onChatMessageUpdate = (
+    callback: (messages: Array<ChatMessage>) => void
+  ) => {
+    this.chatMessagesListener.push(callback);
+    return () => {
+      this.chatMessagesListener = this.chatMessagesListener.filter(
+        (listener) => listener !== callback
+      );
+    };
+  };
+
   private postWorkerMessage = (request: Request) =>
     this.worker.postMessage(request);
   private addWorkerEventListener = (
@@ -47,6 +85,7 @@ export default class TextGeneration {
         if (data.type !== ResponseType.INITIALIZE_MODEL) return;
         if (data.done) {
           this.removeWorkerEventListener(listener);
+          this.modelKey = modelKey;
           resolve(data.progress);
         }
         onDownload(data.progress);
@@ -61,10 +100,22 @@ export default class TextGeneration {
     });
   }
 
+  public initializeConversation(
+    tools: Array<WebMCPTool> = [],
+    temperature: number,
+    enableThinking: boolean,
+    systemPrompt: string
+  ) {
+    this.tools = tools;
+    this.temperature = temperature;
+    this.enableThinking = enableThinking;
+    this.messages = [{ role: "system", content: systemPrompt }];
+    this.chatMessages = [{ role: "system", content: systemPrompt }];
+  }
+
   public async abort() {
     return new Promise<void>((resolve, reject) => {
       const requestId = this.requestId++;
-
       const listener = ({ data }: MessageEvent<Response>) => {
         if (data.requestId !== requestId) return;
         if (data.type === ResponseType.ERROR) {
@@ -85,47 +136,156 @@ export default class TextGeneration {
     });
   }
 
-  public async generateText(
-    modelKey: string,
-    messages: Array<Message>,
-    tools: Array<ChatTemplateTool> = [],
-    temperature: number,
-    enableThinking: boolean,
-    onChunkUpdate: (chunk: string) => void = () => {}
-  ): Promise<{ response: string; modelUsage: ModelUsage }> {
-    return new Promise<{ response: string; modelUsage: ModelUsage }>(
-      (resolve, reject) => {
-        const requestId = this.requestId++;
-
-        const listener = ({ data }: MessageEvent<Response>) => {
-          if (data.requestId !== requestId) return;
-          if (data.type === ResponseType.ERROR) {
-            this.removeWorkerEventListener(listener);
-            reject(data.message);
-          }
-          if (data.type === ResponseType.GENERATE_TEXT_DONE) {
-            this.removeWorkerEventListener(listener);
-            resolve({
-              response: data.response,
-              modelUsage: data.modelUsage,
-            });
-          }
-          if (data.type === ResponseType.GENERATE_TEXT_CHUNK) {
-            onChunkUpdate(data.chunk);
-          }
-        };
-
-        this.addWorkerEventListener(listener);
-        this.postWorkerMessage({
-          type: RequestType.GENERATE_MESSAGE,
-          modelKey,
-          messages,
-          tools,
-          requestId,
-          temperature,
-          enableThinking,
-        });
+  private generateText = (
+    prompt: string,
+    role: "user" | "tool",
+    onResponseUpdate: (response: string) => void = () => {}
+  ) => {
+    return new Promise<{
+      response: string;
+      modelUsage: ModelUsage;
+      interrupted: boolean;
+    }>((resolve, reject) => {
+      if (this.modelKey === null) {
+        reject("Model not initialized");
+        return;
       }
-    );
+
+      if (
+        this.tools === null ||
+        this.temperature === null ||
+        this.enableThinking === null
+      ) {
+        reject("Conversation not initialized");
+        return;
+      }
+
+      const requestId = this.requestId++;
+      this.messages = [...this.messages, { role, content: prompt }];
+      this.messages.push({ role: "assistant", content: "" });
+
+      let response = "";
+
+      const listener = ({ data }: MessageEvent<Response>) => {
+        if (data.requestId !== requestId) return;
+        if (data.type === ResponseType.ERROR) {
+          this.removeWorkerEventListener(listener);
+          reject(data.message);
+        }
+        if (data.type === ResponseType.GENERATE_TEXT_DONE) {
+          this.removeWorkerEventListener(listener);
+          resolve({
+            response: data.response,
+            modelUsage: data.modelUsage,
+            interrupted: data.interrupted,
+          });
+        }
+        if (data.type === ResponseType.GENERATE_TEXT_CHUNK) {
+          response = response + data.chunk;
+          onResponseUpdate(response);
+        }
+      };
+
+      this.addWorkerEventListener(listener);
+      this.postWorkerMessage({
+        type: RequestType.GENERATE_MESSAGE,
+        modelKey: this.modelKey,
+        messages: this.messages,
+        tools: this.tools.map(webMCPToolToChatTemplateTool),
+        requestId,
+        temperature: this.temperature,
+        enableThinking: this.enableThinking,
+      });
+    });
+  };
+
+  public async runAgent(prompt: string): Promise<void> {
+    let isUser = true;
+
+    this.chatMessages = [
+      ...this.chatMessages,
+      { role: "user", content: prompt },
+    ];
+
+    while (prompt) {
+      const prevChatMessages = this.chatMessages;
+      const assistantMessage: ChatMessageAssistant = {
+        role: "assistant",
+        content: [],
+        interrupted: false,
+      };
+
+      this.chatMessages = [...prevChatMessages, assistantMessage];
+
+      const { modelUsage, interrupted } = await this.generateText(
+        prompt,
+        isUser ? "user" : "tool",
+        (partialResponse) => {
+          const parts = splitResponse(partialResponse);
+          assistantMessage.content = parts.map((part) =>
+            typeof part === "string"
+              ? ({
+                  type: "response",
+                  content: part,
+                } as ChatMessageAssistantResponse)
+              : ({
+                  type: "tool",
+                  result: null,
+                  functionSignature: `${part.name}(${JSON.stringify(
+                    part.arguments
+                  )})`,
+                  ...part,
+                } as ChatMessageAssistantTool)
+          );
+          this.chatMessages = [...prevChatMessages, assistantMessage];
+        }
+      );
+      isUser = false;
+
+      assistantMessage.modelUsage = modelUsage;
+      assistantMessage.interrupted = interrupted;
+      this.chatMessages = [...prevChatMessages, assistantMessage];
+
+      const toolCalls = assistantMessage.content.filter(
+        (c) => c.type === "tool"
+      );
+      if (toolCalls.length === 0) {
+        prompt = "";
+        continue;
+      }
+
+      const toolResponses = await Promise.all(
+        toolCalls.map((tool) =>
+          executeToolCall(
+            {
+              name: tool.name,
+              arguments: tool.arguments,
+              id: tool.id,
+            },
+            this.tools || []
+          )
+        )
+      );
+
+      assistantMessage.modelUsage = modelUsage;
+      assistantMessage.content = assistantMessage.content.map((message) => {
+        if (message.type === "tool") {
+          const toolResponse = toolResponses.find(
+            (response) => response.id === message.id
+          );
+          if (toolResponse) {
+            return {
+              ...message,
+              result: toolResponse.result,
+            };
+          }
+          return message;
+        } else {
+          return message;
+        }
+      });
+      this.chatMessages = [...prevChatMessages, assistantMessage];
+      prompt = toolResponses.map(({ result }) => result).join("\n");
+    }
   }
 }

src/textGeneration/types.ts

@@ -1,7 +1,7 @@
 import { type Message } from "@huggingface/transformers";
 
 import type { MODELS } from "../utils/models.ts";
-import type { ChatTemplateTool } from "../utils/webMcp.ts";
+import type { ChatTemplateTool, ToolCallPayload } from "../utils/webMcp.ts";
 
 export enum RequestType {
   INITIALIZE_MODEL,
@@ -59,6 +59,7 @@ interface ResponseGenerateTextDone {
   type: ResponseType.GENERATE_TEXT_DONE;
   response: string;
   modelUsage: ModelUsage;
+  interrupted: boolean;
   requestId: number;
 }
 
@@ -96,6 +97,39 @@ export type Response =
   | ResponseInitializeModel
   | ResponseError;
 
+export interface ChatMessageUser {
+  role: "user";
+  content: string;
+}
+
+export interface ChatMessageAssistant {
+  role: "assistant";
+  content: Array<ChatMessageAssistantResponse | ChatMessageAssistantTool>;
+  interrupted: boolean;
+  modelUsage?: ModelUsage;
+}
+
+export interface ChatMessageSystem {
+  role: "system";
+  content: string;
+}
+
+export interface ChatMessageAssistantResponse {
+  type: "response";
+  content: string;
+}
+
+export interface ChatMessageAssistantTool extends ToolCallPayload {
+  type: "tool";
+  functionSignature: string;
+  result: string;
+}
+
+export type ChatMessage =
+  | ChatMessageUser
+  | ChatMessageAssistant
+  | ChatMessageSystem;
+
 /*
 interface ResponseGenerateTextDone {}
 

src/textGeneration/worker/textGenerationWorker.ts

@@ -7,8 +7,8 @@ import {
   Tensor,
   TextStreamer,
 } from "@huggingface/transformers";
-import { calculateDownloadProgress } from "@utils/calculateDownloadProgress.ts";
-import { MODELS } from "@utils/models.ts";
+import { calculateDownloadProgress } from "../../utils/calculateDownloadProgress.ts";
+import { MODELS } from "../../utils/models.ts";
 
 import {
   type Request,
@@ -29,7 +29,6 @@ let cache: { pastKeyValues: any | null; key: string } = {
   key: "",
 };
 let stoppingCriteria: any | null = null;
-let abortController: AbortController = new AbortController();
 
 const getTextGenerationPipeline = async (
   modelKey: keyof typeof MODELS,
@@ -89,7 +88,6 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
   }
 
   if (data.type === RequestType.GENERATE_MESSAGE_ABORT) {
-    abortController.abort();
     stoppingCriteria.interrupt();
     postMessage({
       type: ResponseType.GENERATE_TEXT_ABORTED,
@@ -99,6 +97,7 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
 
   if (data.type === RequestType.GENERATE_MESSAGE) {
     const MODEL = MODELS[data.modelKey];
+    stoppingCriteria = new InterruptableStoppingCriteria();
 
     const { messages, tools, requestId } = data;
     console.log(messages, tools);
@@ -111,6 +110,8 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
       tools,
       add_generation_prompt: true,
       return_dict: true,
+      // @ts-expect-error
+      enable_thinking: data.enableThinking,
     }) as {
       input_ids: Tensor;
       attention_mask: number[] | number[][] | Tensor;
@@ -128,16 +129,12 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
       }
     };
 
-    const callbackFunction = (chunk: string) => {
-      if (abortController.signal?.aborted) {
-        throw new DOMException("Request cancelled", "AbortError");
-      }
+    const callbackFunction = (chunk: string) =>
       postMessage({
         type: ResponseType.GENERATE_TEXT_CHUNK,
         chunk,
         requestId,
       });
-    };
 
     const streamer = new TextStreamer(tokenizer, {
       skip_prompt: true,
@@ -153,8 +150,10 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
     const { sequences, past_key_values } = (await model.generate({
       ...input,
       max_new_tokens: 1024,
-      past_key_values: useCache ? cache.pastKeyValues : null,
+      //past_key_values: useCache ? cache.pastKeyValues : null,
       return_dict_in_generate: true,
+      temperature: data.temperature,
+      stopping_criteria: stoppingCriteria,
       streamer,
     })) as { sequences: Tensor; past_key_values: any };
     const ended = performance.now();
@@ -184,6 +183,8 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
         ]),
     };
 
+    console.log("response", response);
+
     postMessage({
       type: ResponseType.GENERATE_TEXT_DONE,
       response,
@@ -196,6 +197,7 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
         modelKey: MODEL.modelId,
         model: MODEL.title,
       },
+      interrupted: stoppingCriteria.interrupted,
       requestId,
     });
   }

src/theme/button/Button.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode, cloneElement, isValidElement } from "react";
 
 import cn from "../../utils/classnames.ts";
+import { Loader } from "../index.ts";
 
 type ButtonColor = "primary" | "secondary" | "mono" | "danger";
 type ButtonVariant = "solid" | "outline" | "ghost";
@@ -129,28 +130,7 @@ export default function Button({
 
   const content = (
     <>
-      {loading && (
-        <svg
-          className="h-4 w-4 animate-spin"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
-      )}
+      {loading && <Loader size={size} />}
       {!loading && iconLeft && renderIcon(iconLeft)}
       {children && <span>{children}</span>}
       {!loading && iconRight && renderIcon(iconRight)}

src/theme/misc/Loader.tsx

@@ -1,9 +1,28 @@
 import cn from "@utils/classnames.ts";
 
-export default function Loader({ className = "" }: { className?: string }) {
+type LoaderSize = "xs" | "sm" | "md" | "lg";
+
+interface LoaderProps {
+  className?: string;
+  size?: LoaderSize;
+}
+
+const sizeClasses: Record<LoaderSize, string> = {
+  xs: "h-3 w-3 border-2",
+  sm: "h-4 w-4 border-2",
+  md: "h-8 w-8 border-4",
+  lg: "h-12 w-12 border-[5px]",
+};
+
+export default function Loader({ className = "", size = "md" }: LoaderProps) {
   return (
-    <div className={cn(className, "flex items-center justify-center py-12")}>
-      <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-yellow-500 dark:border-gray-600 dark:border-t-yellow-400" />
+    <div className={cn(className, "flex items-center justify-center")}>
+      <div
+        className={cn(
+          "animate-spin rounded-full border-gray-300 border-t-yellow-500 dark:border-gray-600 dark:border-t-yellow-400",
+          sizeClasses[size]
+        )}
+      />
     </div>
   );
 }

src/utils/context/chatSettings/ChatSettingsContext.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_SYSTEM_PROMPT, MODELS } from "@utils/models.ts";
 import { createContext } from "react";
 
-import type { ChatSettingsContextType } from "./types.ts";
+import type { ChatSettings, ChatSettingsContextType } from "./types.ts";
 
 const ChatSettingsContext = createContext<ChatSettingsContextType>({
   settings: null,
@@ -12,7 +12,7 @@ const ChatSettingsContext = createContext<ChatSettingsContextType>({
 
 export default ChatSettingsContext;
 
-export const DEFAULT_CHAT_SETTINGS = {
+export const DEFAULT_CHAT_SETTINGS: ChatSettings = {
   tools: [],
   modelKey: Object.keys(MODELS)[0],
   systemPrompt: DEFAULT_SYSTEM_PROMPT,

src/utils/context/theme/ThemeContext.ts

@@ -2,6 +2,6 @@ import { createContext } from "react";
 
 import type { ThemeContextType } from "./types.ts";
 
-const ThemeContext = createContext<ThemeContextType | null>(null);
+const ThemeContext = createContext<ThemeContextType>(null);
 
 export default ThemeContext;

src/utils/models.ts

@@ -1,7 +1,7 @@
 export interface Model {
   modelId: string;
   title: string;
-  dtype: "fp16" | "q4" | "q4f16";
+  dtype: "fp16" | "q4" | "q4f16" | "fp32";
   device: "webgpu";
   size: number;
   files: Record<string, number>;
@@ -38,6 +38,21 @@ export const MODELS: Record<string, Model> = {
       "onnx/model_q4.onnx_data_1": 2_095_841_280,
     },
   },
+  gemma3270m: {
+    modelId: "onnx-community/gemma-3-270m-it-ONNX",
+    title: "Gemma-3-270M (fp32)",
+    dtype: "fp32",
+    device: "webgpu",
+    size: 1_161_186_669,
+    files: {
+      "config.json": 1_612,
+      "tokenizer_config.json": 1_158_469,
+      "tokenizer.json": 20_323_106,
+      "generation_config.json": 172,
+      "onnx/model.onnx": 201_742,
+      "onnx/model.onnx_data": 1_139_501_568,
+    },
+  },
   granite350m: {
     modelId: "onnx-community/granite-4.0-350m-ONNX-web",
     title: "Granite-4.0 350M (fp16)",
@@ -84,6 +99,37 @@ export const MODELS: Record<string, Model> = {
       "generation_config.json": 152,
     },
   },
+  qwen34B: {
+    modelId: "onnx-community/Qwen3-4B-ONNX",
+    title: "Qwen3-4B (q4f16)",
+    dtype: "q4f16",
+    device: "webgpu",
+    size: 2_842_047_473,
+    files: {
+      "tokenizer.json": 9_117_040,
+      "tokenizer_config.json": 9_761,
+      "config.json": 1_780,
+      "onnx/model_q4f16.onnx": 59_762_833,
+      "generation_config.json": 219,
+      "onnx/model_q4f16.onnx_data_1": 677_150_720,
+      "onnx/model_q4f16.onnx_data": 2_096_005_120,
+    },
+  },
+  smolLM33B: {
+    modelId: "HuggingFaceTB/SmolLM3-3B-ONNX",
+    title: "SmolLM3-3B (q4f16)",
+    dtype: "q4f16",
+    device: "webgpu",
+    size: 2_136_257_855,
+    files: {
+      "tokenizer.json": 11_574_059,
+      "tokenizer_config.json": 56_256,
+      "config.json": 2_056,
+      "onnx/model_q4f16.onnx": 301_534,
+      "generation_config.json": 182,
+      "onnx/model_q4f16.onnx_data": 2_124_320_768,
+    },
+  },
 } as const;
 
 export type ModelKey = keyof typeof MODELS;

src/utils/tools.ts

@@ -2,15 +2,85 @@ import type { WebMCPTool } from "@utils/webMcp.ts";
 
 const getCurrentTimeTool: WebMCPTool = {
   name: "get_current_time",
-  description: "Returns the current date and time in ISO 8601 format",
+  description: "Returns the current date and time.",
   inputSchema: {
     type: "object",
     properties: {},
     required: [],
   },
   execute: async () => {
-    return new Date().toISOString();
+    const date = new Date();
+    return `ISO 8601: ${date.toISOString()}\ndd.mm.yyyy: ${date.toLocaleDateString()}\nhh:mm:ss: ${date.toLocaleTimeString()}`;
   },
 };
 
-export const TOOLS = [getCurrentTimeTool];
+const getJokeTool: WebMCPTool = {
+  name: "get_joke",
+  description:
+    "Fetches a joke from the jokes API. Can filter by category, type, or search text.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      category: {
+        type: "string",
+        description:
+          "Joke category: Any, Programming, Misc, Pun, Spooky, Christmas",
+        default: "Any",
+      },
+      type: {
+        type: "string",
+        description:
+          "Joke format: single (one-liner) or twopart (setup/delivery)",
+        default: "Any",
+      },
+      contains: {
+        type: "string",
+        description: "Search for jokes containing this text",
+      },
+    },
+    required: [],
+  },
+  execute: async (args) => {
+    const params = new URLSearchParams({ amount: "1" });
+
+    if (args.category && args.category !== "Any") {
+      params.append("category", args.category);
+    }
+    if (args.type && args.type !== "Any") {
+      params.append("type", args.type);
+    }
+    if (args.contains) {
+      params.append("contains", args.contains);
+    }
+
+    try {
+      const response = await fetch(
+        `https://jokes.nico.dev/joke?${params.toString()}`
+      );
+
+      if (!response.ok) {
+        return `Error fetching joke: ${response.statusText}`;
+      }
+
+      const data = await response.json();
+
+      if (data.error) {
+        return `Error: ${data.error}`;
+      }
+
+      if (data.joke) {
+        return data.joke;
+      }
+
+      if (data.jokes && data.jokes.length > 0) {
+        return data.jokes[0].text;
+      }
+
+      return "No joke found";
+    } catch (error) {
+      return `Error fetching joke: ${error instanceof Error ? error.message : "Unknown error"}`;
+    }
+  },
+};
+
+export const TOOLS = [getCurrentTimeTool, getJokeTool];

src/utils/webMcp.ts

@@ -139,6 +139,63 @@ export const extractToolCalls = (
   return { toolCalls, message };
 };
 
+export const splitResponse = (
+  text: string
+): Array<string | ToolCallPayload> => {
+  const result: Array<string | ToolCallPayload> = [];
+  let lastIndex = 0;
+
+  // Match only complete tool calls (with closing tag)
+  const regex = /<tool_call>([\s\S]*?)<\/tool_call>/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    // Add text before the tool call
+    const textBefore = text.slice(lastIndex, match.index);
+    if (textBefore) {
+      result.push(textBefore);
+    }
+
+    // Parse and add the tool call
+    try {
+      const parsed = JSON.parse(match[1].trim());
+      if (parsed && typeof parsed.name === "string") {
+        result.push({
+          name: parsed.name,
+          arguments: parsed.arguments ?? {},
+          id: JSON.stringify({
+            name: parsed.name,
+            arguments: parsed.arguments ?? {},
+          }),
+        });
+      }
+    } catch {
+      // ignore malformed tool call payloads
+    }
+
+    lastIndex = regex.lastIndex;
+  }
+
+  // Check if there's an incomplete tool call
+  const incompleteToolCallIndex = text.indexOf("<tool_call>", lastIndex);
+
+  if (incompleteToolCallIndex !== -1) {
+    // There's an incomplete tool call, only add text up to it
+    const textBefore = text.slice(lastIndex, incompleteToolCallIndex);
+    if (textBefore) {
+      result.push(textBefore);
+    }
+  } else {
+    // No incomplete tool call, add remaining text
+    const remainingText = text.slice(lastIndex);
+    if (remainingText) {
+      result.push(remainingText);
+    }
+  }
+
+  return result;
+};
+
 export const executeToolCall = async (
   toolCall: ToolCallPayload,
   tools: Array<WebMCPTool>

tsconfig.app.json

@@ -18,6 +18,7 @@
 
     /* Linting */
     "strict": true,
+    "strictNullChecks": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": false,

vite.config.ts

@@ -8,10 +8,18 @@ import tsconfigPaths from "vite-tsconfig-paths";
 
 dotenv.config();
 
-const TITLE = "Transformers.js LLMs";
+const TITLE = "Transformers.js TextGeneration";
 
 // https://vite.dev/config/
 export default defineConfig({
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    tailwindcss(),
+    htmlPlugin({
+      title: TITLE,
+    }),
+  ],
   server: {
     ...(fs.existsSync(process.env.SSL_KEY || "") &&
     fs.existsSync(process.env.SSL_CRT || "")
@@ -24,12 +32,4 @@ export default defineConfig({
       : {}),
     port: process.env.PORT ? parseInt(process.env.PORT) : 8080,
   },
-  plugins: [
-    react(),
-    tailwindcss(),
-    tsconfigPaths(),
-    htmlPlugin({
-      title: TITLE,
-    }),
-  ],
 });