small improvements

src/chat/Chat.tsx

@@ -3,7 +3,7 @@ import { useChatSettings } from "@utils/context/chatSettings/useChatSettings.ts"
 import { formatBytes } from "@utils/format.ts";
 import { CONVERSATION_STARTERS, MODELS } from "@utils/models.ts";
 import { TOOLS } from "@utils/tools.ts";
-import { Settings } from "lucide-react";
+import { RotateCcw, Settings } from "lucide-react";
 import {
   useEffect,
   useMemo,
@@ -48,12 +48,7 @@ export default function Chat({ className = "" }: { className?: string }) {
     const newSettingsKey = JSON.stringify(settings);
     if (!settings || settingsKey.current === newSettingsKey) return;
     settingsKey.current = newSettingsKey;
-    generator.initializeConversation(
-      TOOLS.filter((tool) => settings.tools.includes(tool.name)),
-      settings.temperature,
-      settings.enableThinking,
-      settings.systemPrompt
-    );
+    initializeConversation();
   }, [settings]);
 
   useEffect(() => {
@@ -64,6 +59,14 @@ export default function Chat({ className = "" }: { className?: string }) {
 
   const modelDownloaded = downloadedModels.includes(settings.modelKey);
 
+  const initializeConversation = () =>
+    generator.initializeConversation(
+      TOOLS.filter((tool) => settings.tools.includes(tool.name)),
+      settings.temperature,
+      settings.enableThinking,
+      settings.systemPrompt
+    );
+
   const initializeModel = async () => {
     setState(State.INITIALIZING);
     setDownloadProgress(0);
@@ -185,7 +188,7 @@ export default function Chat({ className = "" }: { className?: string }) {
           </div>
         )}
       </div>
-      <div className="fixed right-0 bottom-6 left-0 mx-auto w-full max-w-4xl">
+      <div className="fixed right-0 bottom-6 left-0 mx-auto w-full max-w-4xl space-y-2">
         <Card className="mt-auto">
           <ChatForm
             disabled={!ready}
@@ -206,6 +209,15 @@ export default function Chat({ className = "" }: { className?: string }) {
             {settings?.tools.length}/{TOOLS.length} tool
             {settings?.tools.length !== 1 ? "s" : ""} active
           </Button>
+          <Button
+            iconLeft={<RotateCcw />}
+            size="xs"
+            variant="ghost"
+            color="mono"
+            onClick={initializeConversation}
+          >
+            new conversation
+          </Button>
         </div>
       </div>
     </>

src/chat/Message.tsx

@@ -1,5 +1,6 @@
 import { Modal } from "@theme";
 import cn from "@utils/classnames.ts";
+import { formatDuration } from "@utils/format.ts";
 import { SquareCode, StopCircle } from "lucide-react";
 import { useState } from "react";
 
@@ -15,25 +16,21 @@ export default function Message({
   className?: string;
 }) {
   const [templateOpen, setTemplateOpen] = useState<boolean>(false);
-  const formatDuration = (ms: number) => {
-    if (ms < 1000) {
-      return `${Math.round(ms)}ms`;
-    }
-    return `${(ms / 1000).toFixed(2)}s`;
-  };
 
   return (
     <div className={cn(className, "group relative flex flex-col gap-1")}>
-      <Modal
-        title="Full Template"
-        isOpen={templateOpen}
-        onClose={() => setTemplateOpen(false)}
-        size="xl"
-      >
-        <pre className="max-h-[70vh] overflow-auto rounded-lg border border-gray-300 bg-gray-50 p-4 text-sm leading-relaxed text-gray-900 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100">
-          {message.template}
-        </pre>
-      </Modal>
+      {message.metadata && (
+        <Modal
+          title="Full Template"
+          isOpen={templateOpen}
+          onClose={() => setTemplateOpen(false)}
+          size="xl"
+        >
+          <pre className="max-h-[70vh] overflow-auto rounded-lg border border-gray-300 bg-gray-50 p-4 text-sm leading-relaxed text-gray-900 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100">
+            {message.metadata.template}
+          </pre>
+        </Modal>
+      )}
       {message.content.map((part) =>
         part.type === "tool" ? (
           <MessageToolCall tool={part} />
@@ -47,18 +44,18 @@ export default function Message({
           <span>Response interrupted by the user</span>
         </div>
       )}
-      {message.modelUsage && (
+      {message.metadata && (
         <div className="mt-1 inline-flex flex-wrap items-center gap-1.5 self-end rounded-lg bg-gray-200 px-2.5 py-1 text-xs font-medium text-gray-700 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-gray-700 dark:text-gray-300">
-          <span className="font-semibold">{message.modelUsage.model}</span>
+          <span className="font-semibold">{message.metadata.model}</span>
           <span className="text-gray-400 dark:text-gray-500">•</span>
           <span>
-            Output: {Math.round(message.modelUsage.outputTps)} tok/s (
-            {message.modelUsage.outputTokens} tokens in{" "}
-            {formatDuration(message.modelUsage.outputDurationMs)})
+            Output: {Math.round(message.metadata.outputTps)} tok/s (
+            {message.metadata.outputTokens} tokens in{" "}
+            {formatDuration(message.metadata.outputDurationMs)})
           </span>
           <span className="text-gray-400 dark:text-gray-500">•</span>
           <span title="Input processing time">
-            Prefill: {formatDuration(message.modelUsage.inputDurationMs)}
+            Prefill: {formatDuration(message.metadata.inputDurationMs)}
           </span>
           <span className="text-gray-400 dark:text-gray-500">•</span>
           <button

src/chat/MessageToolCall.tsx

@@ -1,4 +1,5 @@
-import { Wrench } from "lucide-react";
+import { formatDuration } from "@utils/format.ts";
+import { Timer, Wrench } from "lucide-react";
 import { useState } from "react";
 
 import type { ChatMessageAssistantTool } from "../textGeneration/types.ts";
@@ -25,11 +26,17 @@ export default function MessageToolCall({
     >
       <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"
+          className="flex w-full cursor-pointer items-center justify-between 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>
+          <span className="flex items-center gap-2">
+            {isLoading ? <Loader size="xs" /> : <Wrench className="h-3 w-3" />}
+            {isLoading ? "calling tool" : "called tool"} <b>{tool.name}</b>
+          </span>
+          <span className="flex items-center gap-1 opacity-60">
+            <Timer className="h-3 w-3" />
+            {formatDuration(tool.time)}
+          </span>
         </button>
       </div>
       {expanded && (

src/textGeneration/TextGeneration.ts

@@ -11,7 +11,7 @@ import {
   type ChatMessageAssistant,
   type ChatMessageAssistantResponse,
   type ChatMessageAssistantTool,
-  type ModelUsage,
+  type GenerationMetadata,
   type Request,
   RequestType,
   type Response,
@@ -143,9 +143,8 @@ export default class TextGeneration {
   ) => {
     return new Promise<{
       response: string;
-      modelUsage: ModelUsage;
+      metadata: GenerationMetadata;
       interrupted: boolean;
-      template: string;
     }>((resolve, reject) => {
       if (this.modelKey === null) {
         reject("Model not initialized");
@@ -177,9 +176,8 @@ export default class TextGeneration {
           this.messages.push({ role: "assistant", content: data.response });
           resolve({
             response: data.response,
-            modelUsage: data.modelUsage,
+            metadata: data.metadata,
             interrupted: data.interrupted,
-            template: data.template,
           });
         }
         if (data.type === ResponseType.GENERATE_TEXT_CHUNK) {
@@ -219,7 +217,7 @@ export default class TextGeneration {
 
       this.chatMessages = [...prevChatMessages, assistantMessage];
 
-      const { modelUsage, interrupted, template } = await this.generateText(
+      const { interrupted, metadata } = await this.generateText(
         prompt,
         isUser ? "user" : "tool",
         (partialResponse) => {
@@ -233,6 +231,7 @@ export default class TextGeneration {
               : ({
                   type: "tool",
                   result: null,
+                  time: null,
                   functionSignature: `${part.name}(${JSON.stringify(
                     part.arguments
                   )})`,
@@ -244,8 +243,7 @@ export default class TextGeneration {
       );
       isUser = false;
 
-      assistantMessage.template = template;
-      assistantMessage.modelUsage = modelUsage;
+      assistantMessage.metadata = metadata;
       assistantMessage.interrupted = interrupted;
       this.chatMessages = [...prevChatMessages, assistantMessage];
 
@@ -270,7 +268,7 @@ export default class TextGeneration {
         )
       );
 
-      assistantMessage.modelUsage = modelUsage;
+      assistantMessage.metadata = metadata;
       assistantMessage.content = assistantMessage.content.map((message) => {
         if (message.type === "tool") {
           const toolResponse = toolResponses.find(
@@ -280,6 +278,7 @@ export default class TextGeneration {
             return {
               ...message,
               result: toolResponse.result,
+              time: toolResponse.time,
             };
           }
           return message;

src/textGeneration/types.ts

@@ -58,8 +58,7 @@ interface ResponseGenerateTextChunk {
 interface ResponseGenerateTextDone {
   type: ResponseType.GENERATE_TEXT_DONE;
   response: string;
-  modelUsage: ModelUsage;
-  template: string;
+  metadata: GenerationMetadata;
   interrupted: boolean;
   requestId: number;
 }
@@ -76,7 +75,7 @@ interface ResponseInitializeModel {
   requestId: number;
 }
 
-export interface ModelUsage {
+export interface GenerationMetadata {
   inputDurationMs: number;
   outputTokens: number;
   outputDurationMs: number;
@@ -84,6 +83,7 @@ export interface ModelUsage {
   doneMs: number;
   modelKey: keyof typeof MODELS;
   model: string;
+  template: string;
 }
 
 interface ResponseGenerateTextAborted {
@@ -107,8 +107,7 @@ export interface ChatMessageAssistant {
   role: "assistant";
   content: Array<ChatMessageAssistantResponse | ChatMessageAssistantTool>;
   interrupted: boolean;
-  modelUsage?: ModelUsage;
-  template?: string;
+  metadata?: GenerationMetadata;
 }
 
 export interface ChatMessageSystem {
@@ -125,53 +124,10 @@ export interface ChatMessageAssistantTool extends ToolCallPayload {
   type: "tool";
   functionSignature: string;
   result: string;
+  time: number;
 }
 
 export type ChatMessage =
   | ChatMessageUser
   | ChatMessageAssistant
   | ChatMessageSystem;
-
-/*
-interface ResponseGenerateTextDone {}
-
-export enum ResponseStatus {
-  SUCCESS,
-  ERROR,
-  STARTED,
-}
-
-export enum BackgroundTasks {
-  EXTRACT_FEATURES,
-  INITIALIZE_MODELS,
-  AGENT_GENERATE_TEXT,
-  AGENT_GET_MESSAGES,
-  AGENT_CLEAR,
-}
-
-export enum BackgroundMessages {
-  DOWNLOAD_PROGRESS,
-  MESSAGES_UPDATE,
-}
-
-export type Dtype = "fp32" | "fp16" | "q4" | "q4f16";
-
-export interface ChatMessageUser {
-  role: "user";
-  content: string;
-}
-
-export interface ChatMessageTool {
-  name: string;
-  functionSignature: string;
-  id: string;
-  result: string;
-}
-
-export interface ChatMessageAssistant {
-  role: "assistant";
-  content: string;
-  tools: Array<ChatMessageTool>;
-}
-
-export type ChatMessage = ChatMessageUser | ChatMessageAssistant;*/

src/textGeneration/worker/textGenerationWorker.ts

@@ -189,7 +189,7 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
     postMessage({
       type: ResponseType.GENERATE_TEXT_DONE,
       response,
-      modelUsage: {
+      metadata: {
         inputDurationMs: firstTokenTime - started,
         outputTokens: numTokens,
         outputDurationMs: ended - firstTokenTime,
@@ -197,8 +197,8 @@ self.onmessage = async ({ data }: MessageEvent<Request>) => {
         doneMs: ended - started,
         modelKey: MODEL.modelId,
         model: MODEL.title,
+        template,
       },
-      template,
       interrupted: stoppingCriteria.interrupted,
       requestId,
     });

src/utils/format.ts

@@ -74,10 +74,11 @@ export const formatResult = (data: any, indent = 0): string => {
   }
 };
 
-export const formatTime = (seconds: number): string => {
-  const mins = Math.floor(seconds / 60);
-  const secs = seconds % 60;
-  return `${mins}:${secs.toString().padStart(2, "0")}`;
+export const formatDuration = (ms: number) => {
+  if (ms < 1000) {
+    return `${Math.round(ms)}ms`;
+  }
+  return `${(ms / 1000).toFixed(2)}s`;
 };
 
 export const round = (input: number, decimals: number): number => {

src/utils/webMcp.ts

@@ -199,13 +199,17 @@ export const splitResponse = (
 export const executeToolCall = async (
   toolCall: ToolCallPayload,
   tools: Array<WebMCPTool>
-): Promise<{ id: string; result: string }> => {
+): Promise<{ id: string; result: string; time: number }> => {
+  const started = performance.now();
   const toolToUse = tools.find((t) => t.name === toolCall.name);
   if (!toolToUse)
     throw new Error(`Tool '${toolCall.name}' not found or is disabled.`);
 
+  const result = await executeWebMCPTool(toolToUse, toolCall.arguments);
+  const ended = performance.now();
   return {
     id: toolCall.id,
-    result: await executeWebMCPTool(toolToUse, toolCall.arguments),
+    result,
+    time: ended - started,
   };
 };