init

.env

@@ -0,0 +1,3 @@
+PORT=1291
+SSL_KEY=/Users/nico/Documents/Dev/_ssh/localhost-key.pem
+SSL_CRT=/Users/nico/Documents/Dev/_ssh/localhost.pem

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# AI tooling
+.claude
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/codeStyles/Project.xml

@@ -0,0 +1,62 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="PHP">
+      <indentOptions>
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/transformers.js-text-generation.iml" filepath="$PROJECT_DIR$/.idea/transformers.js-text-generation.iml" />
+    </modules>
+  </component>
+</project>

.idea/php.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>

.idea/prettier.xml

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

.idea/transformers.js-text-generation.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

README.md

@@ -5,6 +5,8 @@ colorFrom: blue
 colorTo: pink
 sdk: static
 pinned: false
+app_build_command: npm run build
+app_file: dist/index.html
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,19 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/hf.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Transformers.js LLMs</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "transformersjs-minimal",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "../transformers.js",
+    "@tailwindcss/typography": "^0.5.19",
+    "lucide-react": "^0.554.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.66.1",
+    "showdown": "^2.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/node": "^24.6.1",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@types/showdown": "^2.0.6",
+    "@vitejs/plugin-react": "^5.0.3",
+    "autoprefixer": "^10.4.21",
+    "dotenv": "^17.2.3",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "fs": "^0.0.1-security",
+    "globals": "^16.4.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwindcss": "^4.1.13",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.44.0",
+    "vite": "^7.1.7",
+    "vite-plugin-html-config": "^2.0.2",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -0,0 +1,103 @@
+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 ThemeContextProvider from "./utils/context/theme/ThemeContextProvider.tsx";
+
+export default function App() {
+  return (
+    <ThemeContextProvider>
+      <ChatSettingsContextProvider>
+        <Chat className="mx-auto h-screen max-w-4xl" />
+      </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

@@ -0,0 +1,134 @@
+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 TextGeneration from "../textGeneration/TextGeneration.ts";
+import cn from "../utils/classnames.ts";
+import ChatForm from "./ChatForm.tsx";
+
+enum State {
+  IDLE,
+  INITIALIZING,
+  READY,
+  GENERATING,
+}
+
+export default function Chat({ className = "" }: { className?: string }) {
+  const { openSettingsModal, settings, downloadedModels } = useChatSettings();
+  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(), []);
+
+  useEffect(() => {
+    const newSettingsKey = JSON.stringify(settings);
+    if (!settings || settingsKey.current === newSettingsKey) return;
+    settingsKey.current = newSettingsKey;
+    setMessages([{ role: "system", content: settings.systemPrompt }]);
+  }, [settings]);
+
+  if (!settings) return;
+
+  const modelDownloaded = downloadedModels.includes(settings.modelKey);
+
+  const initializeModel = async () => {
+    setState(State.INITIALIZING);
+    setDownloadProgress(0);
+    await generator.initializeModel(settings.modelKey, (percentage) =>
+      setDownloadProgress(percentage)
+    );
+    initializedModelKey.current = settings.modelKey;
+    setState(State.READY);
+  };
+
+  const generate = async (prompt: string) => {
+    if (initializedModelKey.current !== settings.modelKey) {
+      await initializeModel();
+    }
+    setState(State.GENERATING);
+    const conversation = [...messages, { role: "user", content: 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 }]);
+  };
+
+  const model = MODELS[settings.modelKey];
+  const ready: boolean = state === State.READY || modelDownloaded;
+
+  return (
+    <div className={cn(className, "flex flex-col gap-4 px-4 py-8")}>
+      {state === State.IDLE && !modelDownloaded ? (
+        <div className="flex h-full items-center justify-center">
+          <Card className="flex max-w-[500px] flex-col gap-4">
+            <p>
+              You are about to load <b>{model.title}</b>.<br />
+              Once downloaded, the model ({formatBytes(model.size)}) will be
+              cached and reused when you revisit the page.
+            </p>
+            <p>
+              Everything runs directly in your browser using 🤗 Transformers.js
+              and ONNX Runtime Web, meaning your conversations aren't sent to a
+              server. You can even disconnect from the internet after the model
+              has loaded!
+            </p>
+            <Button onClick={initializeModel}>
+              Download Model ({formatBytes(model.size)})
+            </Button>
+          </Card>
+        </div>
+      ) : state === State.INITIALIZING ? (
+        <div className="flex h-full items-center justify-center">
+          <div className="flex h-full w-full max-w-[400px] flex-col items-center justify-center gap-2">
+            <p className="flex w-full items-center justify-between">
+              <span>
+                {modelDownloaded
+                  ? "initializing the model..."
+                  : "downloading the model..."}
+              </span>
+              <span>{downloadProgress.toFixed(2)}%</span>
+            </p>
+            <Slider width={Math.round(downloadProgress)} />
+          </div>
+        </div>
+      ) : (
+        <div>
+          {messages.map((message, index) => (
+            <p>{message.content}</p>
+          ))}
+        </div>
+      )}
+      <Card className="mt-auto">
+        <ChatForm disabled={!ready} onSubmit={(prompt) => generate(prompt)} />
+      </Card>
+      <div className="flex justify-between dark:border-gray-700">
+        <Button
+          iconLeft={<Settings />}
+          size="xs"
+          variant="ghost"
+          color="mono"
+          onClick={openSettingsModal}
+        >
+          {settings?.modelKey ? MODELS[settings.modelKey].title : ""} |{" "}
+          {settings?.tools.length}/{TOOLS.length} tool
+          {settings?.tools.length !== 1 ? "s" : ""} active
+        </Button>
+      </div>
+    </div>
+  );
+}

src/chat/ChatForm.tsx

@@ -0,0 +1,62 @@
+import { InputText, InputTextarea } from "@theme";
+import { Controller, useForm } from "react-hook-form";
+
+import cn from "../utils/classnames.ts";
+
+interface FormParams {
+  input: string;
+}
+
+export default function ChatForm({
+  className = "",
+  onSubmit,
+  disabled,
+}: {
+  className?: string;
+  onSubmit: (prompt: string) => void;
+  disabled: boolean;
+}) {
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+  } = useForm<FormParams>({
+    defaultValues: {
+      input: "",
+    },
+  });
+
+  const userPrompt = watch("input");
+
+  return (
+    <div className={cn(className)}>
+      <form
+        className="-mx-2"
+        onSubmit={handleSubmit((data) => onSubmit(data.input))}
+      >
+        <Controller
+          name="input"
+          control={control}
+          rules={{ required: "Message is required" }}
+          render={({ field }) => (
+            <input
+              id="text-input"
+              placeholder="Type your message..."
+              //error={errors.input?.message as string}
+              disabled={disabled}
+              value={field.value}
+              onChange={field.onChange}
+              className={cn(
+                "w-full rounded-md border-0 p-2 text-sm transition-colors focus:outline-none"
+                /*'focus:ring-1 focus:ring-yellow-500 focus:ring-offset-1'*/
+              )}
+            />
+          )}
+        />
+      </form>
+    </div>
+  );
+}

src/index.css

@@ -0,0 +1,38 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+
+  --animate-shiny-text: shiny-text 8s infinite;
+}
+
+@keyframes shiny-text {
+  0%,
+  90%,
+  100% {
+    background-position: calc(-100% - var(--shiny-width)) 0;
+  }
+  30%,
+  60% {
+    background-position: calc(100% + var(--shiny-width)) 0;
+  }
+}
+
+body {
+  background-color: white;
+  color: black;
+  --shiny-width: 50px;
+}
+
+.dark body {
+  background-color: #0b0f19;
+  color: white;
+}
+
+#root {
+  min-height: 100vh;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/textGeneration/TextGeneration.ts

@@ -0,0 +1,131 @@
+import { type Message } from "@huggingface/transformers";
+
+import type { ChatTemplateTool } from "../utils/webMcp.ts";
+import {
+  type ModelUsage,
+  type Request,
+  RequestType,
+  type Response,
+  ResponseType,
+} from "./types.ts";
+
+export default class TextGeneration {
+  private worker: Worker;
+  private requestId: number = 0;
+
+  constructor() {
+    this.worker = new Worker(
+      new URL("./worker/textGenerationWorker.ts", import.meta.url),
+      {
+        type: "module",
+      }
+    );
+  }
+
+  private postWorkerMessage = (request: Request) =>
+    this.worker.postMessage(request);
+  private addWorkerEventListener = (
+    listener: (ev: MessageEvent<Response>) => void
+  ) => this.worker.addEventListener("message", listener);
+  private removeWorkerEventListener = (
+    listener: (ev: MessageEvent<Response>) => void
+  ) => this.worker.removeEventListener("message", listener);
+
+  public async initializeModel(
+    modelKey: string,
+    onDownload: (percentage: number) => void
+  ) {
+    return new Promise<number>((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.INITIALIZE_MODEL) return;
+        if (data.done) {
+          this.removeWorkerEventListener(listener);
+          resolve(data.progress);
+        }
+        onDownload(data.progress);
+      };
+
+      this.addWorkerEventListener(listener);
+      this.postWorkerMessage({
+        type: RequestType.INITIALIZE_MODEL,
+        modelKey,
+        requestId,
+      });
+    });
+  }
+
+  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) {
+          this.removeWorkerEventListener(listener);
+          reject(data.message);
+        }
+        if (data.type === ResponseType.GENERATE_TEXT_ABORTED) {
+          this.removeWorkerEventListener(listener);
+          resolve();
+        }
+      };
+
+      this.addWorkerEventListener(listener);
+      this.postWorkerMessage({
+        type: RequestType.GENERATE_MESSAGE_ABORT,
+        requestId,
+      });
+    });
+  }
+
+  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,
+        });
+      }
+    );
+  }
+}

src/textGeneration/types.ts

@@ -0,0 +1,141 @@
+import { type Message } from "@huggingface/transformers";
+
+import type { MODELS } from "../utils/models.ts";
+import type { ChatTemplateTool } from "../utils/webMcp.ts";
+
+export enum RequestType {
+  INITIALIZE_MODEL,
+  GENERATE_MESSAGE,
+  GENERATE_MESSAGE_ABORT,
+}
+
+interface RequestInitializeModel {
+  modelKey: keyof typeof MODELS;
+  type: RequestType.INITIALIZE_MODEL;
+  requestId: number;
+}
+
+interface RequestGenerateMessage {
+  modelKey: keyof typeof MODELS;
+  type: RequestType.GENERATE_MESSAGE;
+  messages: Array<Message>;
+  tools?: Array<ChatTemplateTool>;
+  temperature: number;
+  enableThinking: boolean;
+  requestId: number;
+}
+
+interface RequestAbortGeneration {
+  type: RequestType.GENERATE_MESSAGE_ABORT;
+  requestId: number;
+}
+
+export type Request =
+  | RequestInitializeModel
+  | RequestGenerateMessage
+  | RequestAbortGeneration;
+
+export enum ResponseType {
+  GENERATE_TEXT_CHUNK,
+  GENERATE_TEXT_DONE,
+  GENERATE_TEXT_ABORTED,
+  INITIALIZE_MODEL,
+  ERROR,
+}
+
+interface ResponseError {
+  type: ResponseType.ERROR;
+  message: string;
+  requestId: number;
+}
+
+interface ResponseGenerateTextChunk {
+  type: ResponseType.GENERATE_TEXT_CHUNK;
+  chunk: string;
+  requestId: number;
+}
+
+interface ResponseGenerateTextDone {
+  type: ResponseType.GENERATE_TEXT_DONE;
+  response: string;
+  modelUsage: ModelUsage;
+  requestId: number;
+}
+
+interface ResponseGenerateTextAborted {
+  type: ResponseType.GENERATE_TEXT_ABORTED;
+  requestId: number;
+}
+
+interface ResponseInitializeModel {
+  type: ResponseType.INITIALIZE_MODEL;
+  progress: number;
+  done: boolean;
+  requestId: number;
+}
+
+export interface ModelUsage {
+  inputDurationMs: number;
+  outputTokens: number;
+  outputDurationMs: number;
+  outputTps: number;
+  doneMs: number;
+  modelKey: keyof typeof MODELS;
+  model: string;
+}
+
+interface ResponseGenerateTextAborted {
+  type: ResponseType.GENERATE_TEXT_ABORTED;
+  requestId: number;
+}
+
+export type Response =
+  | ResponseGenerateTextChunk
+  | ResponseGenerateTextDone
+  | ResponseGenerateTextAborted
+  | ResponseInitializeModel
+  | ResponseError;
+
+/*
+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

@@ -0,0 +1,202 @@
+import {
+  AutoModelForCausalLM,
+  AutoTokenizer,
+  InterruptableStoppingCriteria,
+  PreTrainedModel,
+  PreTrainedTokenizer,
+  Tensor,
+  TextStreamer,
+} from "@huggingface/transformers";
+import { calculateDownloadProgress } from "@utils/calculateDownloadProgress.ts";
+import { MODELS } from "@utils/models.ts";
+
+import {
+  type Request,
+  RequestType,
+  type Response,
+  ResponseType,
+} from "../types.ts";
+
+interface Pipeline {
+  tokenizer: PreTrainedTokenizer;
+  model: PreTrainedModel;
+}
+
+let pipeline: Pipeline | null = null;
+let initializedModelKey: keyof typeof MODELS | null = null;
+let cache: { pastKeyValues: any | null; key: string } = {
+  pastKeyValues: null,
+  key: "",
+};
+let stoppingCriteria: any | null = null;
+let abortController: AbortController = new AbortController();
+
+const getTextGenerationPipeline = async (
+  modelKey: keyof typeof MODELS,
+  onDownloadProgress: (percentage: number) => void = () => {}
+): Promise<Pipeline> => {
+  if (pipeline && modelKey === initializedModelKey) return pipeline;
+  if (pipeline) {
+    await pipeline.model.dispose();
+  }
+
+  const MODEL = MODELS[modelKey];
+  const MODEL_FILES = new Map();
+  for (const [key, value] of Object.entries(MODEL.files)) {
+    MODEL_FILES.set(key, { loaded: 0, total: value });
+  }
+
+  try {
+    const tokenizer = await AutoTokenizer.from_pretrained(MODEL.modelId);
+    const model = await AutoModelForCausalLM.from_pretrained(MODEL.modelId, {
+      dtype: MODEL.dtype,
+      device: MODEL.device,
+      progress_callback: calculateDownloadProgress(
+        ({ percentage }) => onDownloadProgress(percentage),
+        MODEL_FILES
+      ),
+    });
+    pipeline = { tokenizer, model };
+    initializedModelKey = modelKey;
+    return pipeline;
+  } catch (error) {
+    console.error("Failed to initialize feature extraction pipeline:", error);
+    throw error;
+  }
+};
+
+const postMessage = (message: Response) => self.postMessage(message);
+
+self.onmessage = async ({ data }: MessageEvent<Request>) => {
+  if (data.type === RequestType.INITIALIZE_MODEL) {
+    let lastPercentage = 0;
+    await getTextGenerationPipeline(data.modelKey, (percentage) => {
+      if (lastPercentage === percentage) return;
+      lastPercentage = percentage;
+      postMessage({
+        type: ResponseType.INITIALIZE_MODEL,
+        progress: percentage,
+        done: false,
+        requestId: data.requestId,
+      });
+    });
+    postMessage({
+      type: ResponseType.INITIALIZE_MODEL,
+      progress: 100,
+      done: true,
+      requestId: data.requestId,
+    });
+  }
+
+  if (data.type === RequestType.GENERATE_MESSAGE_ABORT) {
+    abortController.abort();
+    stoppingCriteria.interrupt();
+    postMessage({
+      type: ResponseType.GENERATE_TEXT_ABORTED,
+      requestId: data.requestId,
+    });
+  }
+
+  if (data.type === RequestType.GENERATE_MESSAGE) {
+    const MODEL = MODELS[data.modelKey];
+
+    const { messages, tools, requestId } = data;
+    console.log(messages, tools);
+    const { tokenizer, model } = await getTextGenerationPipeline(data.modelKey);
+    if (!stoppingCriteria) {
+      stoppingCriteria = new InterruptableStoppingCriteria();
+    }
+
+    const input = tokenizer.apply_chat_template(messages, {
+      tools,
+      add_generation_prompt: true,
+      return_dict: true,
+    }) as {
+      input_ids: Tensor;
+      attention_mask: number[] | number[][] | Tensor;
+    };
+
+    const started = performance.now();
+    let firstTokenTime: DOMHighResTimeStamp | null = null;
+    let numTokens = 0;
+    let tps: number = 0;
+
+    const tokenCallbackFunction = () => {
+      firstTokenTime ??= performance.now();
+      if (numTokens++ > 0) {
+        tps = (numTokens / (performance.now() - firstTokenTime)) * 1000;
+      }
+    };
+
+    const callbackFunction = (chunk: string) => {
+      if (abortController.signal?.aborted) {
+        throw new DOMException("Request cancelled", "AbortError");
+      }
+      postMessage({
+        type: ResponseType.GENERATE_TEXT_CHUNK,
+        chunk,
+        requestId,
+      });
+    };
+
+    const streamer = new TextStreamer(tokenizer, {
+      skip_prompt: true,
+      skip_special_tokens: true,
+      token_callback_function: tokenCallbackFunction,
+      callback_function: callbackFunction,
+    });
+
+    const cacheKey = MODEL.modelId + JSON.stringify(messages.slice(0, -1));
+    const useCache = cacheKey === cache.key;
+    console.log("useCache", useCache);
+
+    const { sequences, past_key_values } = (await model.generate({
+      ...input,
+      max_new_tokens: 1024,
+      past_key_values: useCache ? cache.pastKeyValues : null,
+      return_dict_in_generate: true,
+      streamer,
+    })) as { sequences: Tensor; past_key_values: any };
+    const ended = performance.now();
+
+    const lengthOfInput = input.input_ids.dims[1];
+    const response = tokenizer.batch_decode(
+      /**
+       * First argument (null): Don't slice dimension 0 (the batch dimension) - keep all batches
+       * Second argument ([lengthOfInput, Number.MAX_SAFE_INTEGER]): For dimension 1 (the sequence/token dimension), slice from index lengthOfInput to the end
+       */
+      sequences.slice(null, [lengthOfInput, Number.MAX_SAFE_INTEGER]),
+      {
+        skip_special_tokens: true, // removes the <|end_of_text|>
+      }
+    )[0];
+
+    cache = {
+      pastKeyValues: past_key_values,
+      key:
+        MODEL.modelId +
+        JSON.stringify([
+          ...messages,
+          {
+            role: "assistant",
+            content: response,
+          },
+        ]),
+    };
+
+    postMessage({
+      type: ResponseType.GENERATE_TEXT_DONE,
+      response,
+      modelUsage: {
+        inputDurationMs: (firstTokenTime || 0) - started,
+        outputTokens: numTokens,
+        outputDurationMs: performance.now() - ended,
+        outputTps: tps,
+        doneMs: ended - started,
+        modelKey: MODEL.modelId,
+        model: MODEL.title,
+      },
+      requestId,
+    });
+  }
+};

src/theme/button/Button.tsx

@@ -0,0 +1,184 @@
+import { type ReactNode, cloneElement, isValidElement } from "react";
+
+import cn from "../../utils/classnames.ts";
+
+type ButtonColor = "primary" | "secondary" | "mono" | "danger";
+type ButtonVariant = "solid" | "outline" | "ghost";
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+
+interface BaseButtonProps {
+  children?: ReactNode;
+  className?: string;
+  color?: ButtonColor;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+  shiny?: boolean;
+}
+
+interface ButtonAsButton extends BaseButtonProps {
+  onClick?: () => void;
+  type?: "button" | "submit" | "reset";
+}
+
+interface ButtonAsLink extends BaseButtonProps {
+  href: string;
+  onClick?: never;
+  to?: never;
+  target?: string;
+  rel?: string;
+}
+
+export type ButtonProps = ButtonAsButton | ButtonAsLink;
+
+const sizeClasses: Record<ButtonSize, string> = {
+  xs: "px-2 py-1.5 text-xs",
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg",
+};
+
+const iconOnlySizeClasses: Record<ButtonSize, string> = {
+  xs: "p-1.5",
+  sm: "p-1.5",
+  md: "p-2",
+  lg: "p-3",
+};
+
+const iconSizeClasses: Record<ButtonSize, string> = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+};
+
+const colorVariantClasses: Record<
+  ButtonColor,
+  Record<ButtonVariant, string>
+> = {
+  primary: {
+    solid:
+      "bg-yellow-500 text-gray-900 hover:bg-yellow-600 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-500",
+    outline:
+      "border-1 border-yellow-500 text-yellow-600 hover:bg-yellow-50 dark:border-yellow-400 dark:text-yellow-400 dark:hover:bg-yellow-950",
+    ghost:
+      "text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-950",
+  },
+  secondary: {
+    solid:
+      "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600",
+    outline:
+      "border-1 border-blue-600 text-blue-600 hover:bg-blue-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-950",
+    ghost:
+      "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-950",
+  },
+  mono: {
+    solid:
+      "bg-gray-900 text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100",
+    outline:
+      "border-1 border-gray-900 text-gray-900 hover:bg-gray-50 dark:border-white dark:text-white dark:hover:bg-white/10",
+    ghost:
+      "text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-white/10",
+  },
+  danger: {
+    solid:
+      "bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600",
+    outline:
+      "border-1 border-red-600 text-red-600 hover:bg-red-50 dark:border-red-400 dark:text-red-400 dark:hover:bg-red-950",
+    ghost:
+      "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950",
+  },
+};
+
+export default function Button({
+  children,
+  className = "",
+  color = "primary",
+  variant = "solid",
+  size = "md",
+  iconLeft,
+  iconRight,
+  disabled = false,
+  loading = false,
+  shiny = false,
+  ...props
+}: ButtonProps) {
+  const isIconOnly = !children && (iconLeft || iconRight || loading);
+
+  const baseClasses = cn(
+    "inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900",
+    isIconOnly ? iconOnlySizeClasses[size] : sizeClasses[size],
+    colorVariantClasses[color][variant],
+    {
+      "cursor-not-allowed opacity-50": disabled || loading,
+    },
+    className
+  );
+
+  const renderIcon = (icon: ReactNode) => {
+    if (isValidElement(icon)) {
+      return cloneElement(icon as any, {
+        className: cn((icon.props as any)?.className, iconSizeClasses[size]),
+      });
+    }
+    return icon;
+  };
+
+  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 && iconLeft && renderIcon(iconLeft)}
+      {children && <span>{children}</span>}
+      {!loading && iconRight && renderIcon(iconRight)}
+    </>
+  );
+
+  if ("href" in props && props.href) {
+    return (
+      <a
+        href={props.href}
+        className={baseClasses}
+        target={props.target}
+        rel={props.rel}
+        aria-disabled={disabled || loading}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type={(props as ButtonAsButton).type || "button"}
+      onClick={(props as ButtonAsButton).onClick}
+      disabled={disabled || loading}
+      className={baseClasses}
+    >
+      {content}
+    </button>
+  );
+}

src/theme/form/FormError.tsx

@@ -0,0 +1,16 @@
+import cn from "@utils/classnames.ts";
+import type { ReactNode } from "react";
+
+export default function FormError({
+  className = "",
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <span className={cn(className, 'dark:text-red-400" text-sm text-red-600')}>
+      {children}
+    </span>
+  );
+}

src/theme/form/InputCheckbox.tsx

@@ -0,0 +1,81 @@
+import cn from "@utils/classnames.ts";
+import { type ChangeEvent, type ReactNode, forwardRef } from "react";
+
+import LabelTooltip from "./LabelTooltip.tsx";
+
+interface InputCheckboxProps {
+  label: string;
+  description?: string;
+  error?: string;
+  required?: boolean;
+  className?: string;
+  id?: string;
+  tooltip?: string | ReactNode;
+  more?: ReactNode;
+  moreTitle?: string;
+  checked?: boolean;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const InputCheckbox = forwardRef<HTMLInputElement, InputCheckboxProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      required,
+      className = "",
+      id,
+      tooltip = "",
+      more = null,
+      moreTitle = null,
+      ...props
+    },
+    ref
+  ) => {
+    const checkboxId =
+      id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <label htmlFor={id} className={cn("flex flex-col gap-2", className)}>
+        <div className="relative text-sm font-medium text-gray-900 dark:text-gray-100">
+          {label}
+          {required && (
+            <span className="ml-1 text-blue-500 dark:text-blue-400">*</span>
+          )}
+          {tooltip !== "" && <LabelTooltip text={<>{tooltip}</>} />}
+        </div>
+        <div className="mt-2 flex items-center gap-2">
+          <input
+            ref={ref}
+            type="checkbox"
+            id={checkboxId}
+            className={cn(
+              "h-4 w-4 cursor-pointer rounded border transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none",
+              "bg-white dark:bg-gray-800",
+              "focus:ring-offset-white dark:focus:ring-offset-gray-900",
+              error
+                ? "border-red-300 text-red-600 focus:border-red-500 focus:ring-red-500 dark:border-red-700 dark:text-red-500 dark:focus:border-red-600 dark:focus:ring-red-600"
+                : "border-gray-300 text-yellow-600 focus:border-yellow-500 focus:ring-yellow-500 dark:border-gray-600 dark:text-yellow-500 dark:focus:border-yellow-400 dark:focus:ring-yellow-400"
+            )}
+            {...props}
+          />
+          {description && (
+            <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">
+              {description}
+            </p>
+          )}
+        </div>
+        {error && (
+          <span className="text-sm text-red-600 dark:text-red-400">
+            {error}
+          </span>
+        )}
+      </label>
+    );
+  }
+);
+
+InputCheckbox.displayName = "InputCheckbox";
+
+export default InputCheckbox;

src/theme/form/InputCheckboxList.tsx

@@ -0,0 +1,99 @@
+import cn from "@utils/classnames.ts";
+import { type ReactNode } from "react";
+
+import { FormError } from "../index.ts";
+import LabelTooltip from "./LabelTooltip.tsx";
+
+interface CheckboxOption {
+  name: string;
+  label: string;
+  description?: string;
+}
+
+interface InputCheckboxListProps {
+  label: string;
+  options: CheckboxOption[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  error?: string;
+  required?: boolean;
+  className?: string;
+  id?: string;
+  tooltip?: string | ReactNode;
+}
+
+export default function InputCheckboxList({
+  label,
+  options,
+  value,
+  onChange,
+  error,
+  required,
+  className = "",
+  id,
+  tooltip = "",
+}: InputCheckboxListProps) {
+  const handleCheckboxChange = (optionName: string, checked: boolean) => {
+    if (checked) {
+      onChange([...value, optionName]);
+    } else {
+      onChange(value.filter((name) => name !== optionName));
+    }
+  };
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      <div className="relative text-sm font-medium text-gray-900 dark:text-gray-100">
+        {label}
+        {required && (
+          <span className="ml-1 text-blue-500 dark:text-blue-400">*</span>
+        )}
+        {tooltip !== "" && <LabelTooltip text={<>{tooltip}</>} />}
+      </div>
+
+      <div className="flex flex-col gap-3">
+        {options.map((option) => {
+          const checkboxId = `${id || "checkbox-list"}-${option.name}`;
+          const isChecked = value.includes(option.name);
+
+          return (
+            <label
+              key={option.name}
+              htmlFor={checkboxId}
+              className="flex cursor-pointer items-start gap-3"
+            >
+              <input
+                type="checkbox"
+                id={checkboxId}
+                checked={isChecked}
+                onChange={(e) =>
+                  handleCheckboxChange(option.name, e.target.checked)
+                }
+                className={cn(
+                  "mt-0.5 h-4 w-4 cursor-pointer rounded border transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none",
+                  "bg-white dark:bg-gray-800",
+                  "focus:ring-offset-white dark:focus:ring-offset-gray-900",
+                  error
+                    ? "border-red-300 text-red-600 focus:border-red-500 focus:ring-red-500 dark:border-red-700 dark:text-red-500 dark:focus:border-red-600 dark:focus:ring-red-600"
+                    : "border-gray-300 text-yellow-600 focus:border-yellow-500 focus:ring-yellow-500 dark:border-gray-600 dark:text-yellow-500 dark:focus:border-yellow-400 dark:focus:ring-yellow-400"
+                )}
+              />
+              <div className="flex flex-col gap-1">
+                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  {option.label}
+                </span>
+                {option.description && (
+                  <span className="text-xs text-gray-600 dark:text-gray-400">
+                    {option.description}
+                  </span>
+                )}
+              </div>
+            </label>
+          );
+        })}
+      </div>
+
+      {error && <FormError>{error}</FormError>}
+    </div>
+  );
+}

src/theme/form/InputSelect.tsx

@@ -0,0 +1,121 @@
+import { type ReactNode, type SelectHTMLAttributes, forwardRef } from "react";
+
+import cn from "../../utils/classnames.ts";
+import { FormError } from "../index.ts";
+import LabelTooltip from "./LabelTooltip.tsx";
+
+interface Option {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface OptGroup {
+  label: string;
+  options: Option[];
+}
+
+type SelectOptions = Option[] | OptGroup[];
+
+interface InputSelectProps
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "className"> {
+  label: string;
+  placeholder?: string;
+  error?: string;
+  required?: boolean;
+  className?: string;
+  id?: string;
+  options: SelectOptions;
+  tooltip?: string | ReactNode;
+  more?: ReactNode;
+  moreTitle?: string;
+}
+
+const InputSelect = forwardRef<HTMLSelectElement, InputSelectProps>(
+  (
+    {
+      label,
+      placeholder,
+      error,
+      required,
+      className = "",
+      id,
+      options,
+      tooltip = "",
+      more = null,
+      moreTitle = null,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div className={cn("flex flex-col gap-2", className)}>
+        <label
+          htmlFor={id}
+          className="relative text-sm font-medium text-gray-900 dark:text-gray-100"
+        >
+          {label}
+          {required && (
+            <span className="ml-1 text-blue-500 dark:text-blue-400">*</span>
+          )}
+          {tooltip !== "" && (
+            <LabelTooltip position="right" text={<>{tooltip}</>} />
+          )}
+        </label>
+        <select
+          ref={ref}
+          id={id}
+          className={cn(
+            "w-full rounded-md border px-3 py-2 text-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none",
+            "bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100",
+            "focus:ring-offset-white dark:focus:ring-offset-gray-900",
+            error
+              ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700 dark:focus:border-red-600 dark:focus:ring-red-600"
+              : "border-gray-300 focus:border-yellow-500 focus:ring-yellow-500 dark:border-gray-600 dark:focus:border-yellow-400 dark:focus:ring-yellow-400"
+          )}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map((item, index) => {
+            // Check if this is an OptGroup by checking for 'options' property
+            if ("options" in item) {
+              return (
+                <optgroup key={`optgroup-${index}`} label={item.label}>
+                  {item.options.map((option) => (
+                    <option
+                      key={option.value}
+                      value={option.value}
+                      disabled={option.disabled}
+                    >
+                      {option.label}
+                    </option>
+                  ))}
+                </optgroup>
+              );
+            } else {
+              // This is a regular Option
+              return (
+                <option
+                  key={item.value}
+                  value={item.value}
+                  disabled={item.disabled}
+                >
+                  {item.label}
+                </option>
+              );
+            }
+          })}
+        </select>
+        {error && <FormError>{error}</FormError>}
+      </div>
+    );
+  }
+);
+
+InputSelect.displayName = "InputSelect";
+
+export default InputSelect;

src/theme/form/InputSlider.tsx

@@ -0,0 +1,101 @@
+import cn from "@utils/classnames";
+import { type ChangeEvent, type ReactNode, forwardRef } from "react";
+
+import { FormError } from "../index.ts";
+import LabelTooltip from "./LabelTooltip.tsx";
+
+interface InputSliderProps {
+  label: string;
+  error?: string;
+  required?: boolean;
+  className?: string;
+  id?: string;
+  disabled?: boolean;
+  value?: number;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  hideLabel?: boolean;
+  tooltip?: string | ReactNode;
+  min?: number;
+  max?: number;
+  step?: number;
+  showValue?: boolean;
+}
+
+const InputSlider = forwardRef<HTMLInputElement, InputSliderProps>(
+  (
+    {
+      label,
+      error,
+      required,
+      className = "",
+      id,
+      hideLabel = false,
+      tooltip = "",
+      min = 0,
+      max = 100,
+      step = 1,
+      showValue = true,
+      value = min,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div className={cn("flex flex-col gap-2", className)}>
+        <div className="flex items-center justify-between">
+          <label
+            htmlFor={id}
+            className={cn(
+              "relative text-sm font-medium text-gray-900 dark:text-gray-100",
+              {
+                "clip-[rect(0,0,0,0)] sr-only absolute m-[-1px] h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap":
+                  hideLabel,
+              }
+            )}
+          >
+            {label}
+            {required && (
+              <span className="ml-1 text-blue-500 dark:text-blue-400">*</span>
+            )}
+            {tooltip !== "" && <LabelTooltip text={<>{tooltip}</>} />}
+          </label>
+          {showValue && (
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              {value}
+            </span>
+          )}
+        </div>
+        <input
+          ref={ref}
+          type="range"
+          id={id}
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          className={cn(
+            "w-full h-2 rounded-lg appearance-none cursor-pointer",
+            "bg-gray-200 dark:bg-gray-700",
+            "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-yellow-500 dark:[&::-webkit-slider-thumb]:bg-yellow-400",
+            "[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-all",
+            "[&::-webkit-slider-thumb]:hover:bg-yellow-600 dark:[&::-webkit-slider-thumb]:hover:bg-yellow-500",
+            "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-yellow-500 dark:[&::-moz-range-thumb]:bg-yellow-400",
+            "[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:transition-all",
+            "[&::-moz-range-thumb]:hover:bg-yellow-600 dark:[&::-moz-range-thumb]:hover:bg-yellow-500",
+            "focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-yellow-400",
+            "focus:ring-offset-white dark:focus:ring-offset-gray-900",
+            error &&
+              "ring-2 ring-red-500 dark:ring-red-600",
+            props.disabled && "opacity-50 cursor-not-allowed"
+          )}
+          {...props}
+        />
+        {error && <FormError>{error}</FormError>}
+      </div>
+    );
+  }
+);
+
+InputSlider.displayName = "InputSlider";
+
+export default InputSlider;

src/theme/form/InputText.tsx

@@ -0,0 +1,89 @@
+import cn from "@utils/classnames";
+import { type ChangeEvent, type ReactNode, forwardRef } from "react";
+
+import { FormError } from "../index.ts";
+import LabelTooltip from "./LabelTooltip.tsx";
+
+interface InputTextProps {
+  label: string;
+  placeholder?: string;
+  error?: string;
+  required?: boolean;
+  className?: string;
+  id?: string;
+  disabled?: boolean;
+  value?: string | number;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  hideLabel?: boolean;
+  tooltip?: string | ReactNode;
+  type?: "text" | "number" | "email" | "password" | "url" | "tel";
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+const InputText = forwardRef<HTMLInputElement, InputTextProps>(
+  (
+    {
+      label,
+      placeholder,
+      error,
+      required,
+      className = "",
+      id,
+      hideLabel = false,
+      type = "text",
+      min,
+      max,
+      step,
+      tooltip = "",
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div className={cn("flex flex-col gap-2", className)}>
+        <label
+          htmlFor={id}
+          className={cn(
+            "relative text-sm font-medium text-gray-900 dark:text-gray-100",
+            {
+              "clip-[rect(0,0,0,0)] sr-only absolute m-[-1px] h-px w-px overflow-hidden border-0 p-0 whitespace-nowrap":
+                hideLabel,
+            }
+          )}
+        >
+          {label}
+          {required && (
+            <span className="ml-1 text-blue-500 dark:text-blue-400">*</span>
+          )}
+          {tooltip !== "" && <LabelTooltip text={<>{tooltip}</>} />}
+        </label>
+        <input
+          ref={ref}
+          type={type}
+          id={id}
+          placeholder={placeholder}
+          min={min}
+          max={max}
+          step={step}
+          className={cn(
+            "w-full rounded-md border px-3 py-2 text-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none",
+            "bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100",
+            "focus:ring-offset-white dark:focus:ring-offset-gray-900",
+            error
+              ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700 dark:focus:border-red-600 dark:focus:ring-red-600"
+              : "border-gray-300 focus:border-yellow-500 focus:ring-yellow-500 dark:border-gray-600 dark:focus:border-yellow-400 dark:focus:ring-yellow-400",
+            "placeholder:text-gray-400 dark:placeholder:text-gray-500"
+          )}
+          {...props}
+        />
+        {error && <FormError>{error}</FormError>}
+      </div>
+    );
+  }
+);
+
+InputText.displayName = "InputText";
+
+export default InputText;

src/theme/form/InputTextarea.tsx

@@ -0,0 +1,73 @@
+import cn from "@utils/classnames";
+import { type ChangeEvent, forwardRef } from "react";
+
+interface InputTextareaProps {
+  label: string;
+  placeholder?: string;
+  error?: string;
+  required?: boolean;
+  className?: string;
+  id?: string;
+  rows?: number;
+  value?: string;
+  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  hideLabel?: boolean;
+}
+
+const InputTextarea = forwardRef<HTMLTextAreaElement, InputTextareaProps>(
+  (
+    {
+      label,
+      placeholder,
+      error,
+      required,
+      className = "",
+      id,
+      rows = 4,
+      hideLabel = false,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div className={cn("flex flex-col gap-2", className)}>
+        {!hideLabel && (
+          <label
+            htmlFor={id}
+            className="text-sm font-medium text-gray-900 dark:text-gray-100"
+          >
+            {label}
+            {required && (
+              <span className="ml-1 text-blue-500 dark:text-blue-400">*</span>
+            )}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          id={id}
+          rows={rows}
+          placeholder={placeholder}
+          className={cn(
+            "resize-vertical w-full rounded-md border px-3 py-2 text-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none",
+            "bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100",
+            "focus:ring-offset-white dark:focus:ring-offset-gray-900",
+            error
+              ? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700 dark:focus:border-red-600 dark:focus:ring-red-600"
+              : "border-gray-300 focus:border-yellow-500 focus:ring-yellow-500 dark:border-gray-600 dark:focus:border-yellow-400 dark:focus:ring-yellow-400",
+            "placeholder:text-gray-400 dark:placeholder:text-gray-500"
+          )}
+          {...props}
+        />
+        {error && (
+          <span className="text-sm text-red-600 dark:text-red-400">
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+InputTextarea.displayName = "InputTextarea";
+
+export default InputTextarea;

src/theme/form/LabelTooltip.tsx

@@ -0,0 +1,18 @@
+import { Tooltip, type TooltipProps } from "@theme";
+import { CircleQuestionMark } from "lucide-react";
+
+interface LabelTooltipProps extends Omit<TooltipProps, "children"> {}
+
+export default function LabelTooltip({ ...tooltip }: LabelTooltipProps) {
+  return (
+    <span className="absolute top-1/2 ml-1 -translate-y-1/2">
+      <Tooltip
+        {...tooltip}
+        text={<>{tooltip.text}</>}
+        className="block text-gray-500"
+      >
+        <CircleQuestionMark className="block w-4" />
+      </Tooltip>
+    </span>
+  );
+}

src/theme/index.ts

@@ -0,0 +1,21 @@
+/* button */
+export { default as Button } from "./button/Button";
+
+/* form */
+export { default as InputText } from "./form/InputText";
+export { default as InputTextarea } from "./form/InputTextarea";
+export { default as InputSelect } from "./form/InputSelect";
+export { default as InputCheckbox } from "./form/InputCheckbox";
+export { default as InputCheckboxList } from "./form/InputCheckboxList";
+export { default as InputSlider } from "./form/InputSlider";
+export { default as LabelTooltip } from "./form/LabelTooltip";
+export { default as FormError } from "./form/FormError";
+
+/* misc */
+export { default as Modal } from "./misc/Modal";
+export { default as Tooltip, type TooltipProps } from "./misc/Tooltip";
+export { default as Message } from "./misc/Message";
+export { default as MessageContent } from "./misc/MessageContent";
+export { default as Slider } from "./misc/Slider";
+export { default as Card } from "./misc/Card";
+export { default as Loader } from "./misc/Loader";

src/theme/misc/Card.tsx

@@ -0,0 +1,21 @@
+import cn from "@utils/classnames.ts";
+import type { ReactNode } from "react";
+
+export default function Card({
+  className = "",
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        className,
+        "rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800"
+      )}
+    >
+      {children}
+    </div>
+  );
+}

src/theme/misc/Loader.tsx

@@ -0,0 +1,9 @@
+import cn from "@utils/classnames.ts";
+
+export default function Loader({ className = "" }: { className?: string }) {
+  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>
+  );
+}

src/theme/misc/Message.tsx

@@ -0,0 +1,99 @@
+import cn from "@utils/classnames";
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
+import type { ReactNode } from "react";
+
+interface MessageProps {
+  type: "success" | "error" | "warning" | "info";
+  title: string;
+  message?: string;
+  children?: ReactNode;
+  onClose?: () => void;
+  className?: string;
+}
+
+const messageStyles = {
+  success: {
+    container:
+      "border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20",
+    icon: "text-green-600 dark:text-green-500",
+    title: "text-green-800 dark:text-green-400",
+    text: "text-green-700 dark:text-green-300",
+    closeButton:
+      "text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-200",
+  },
+  error: {
+    container:
+      "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20",
+    icon: "text-red-600 dark:text-red-500",
+    title: "text-red-800 dark:text-red-400",
+    text: "text-red-700 dark:text-red-300",
+    closeButton:
+      "text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-200",
+  },
+  warning: {
+    container:
+      "border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-900/20",
+    icon: "text-yellow-600 dark:text-yellow-500",
+    title: "text-yellow-800 dark:text-yellow-400",
+    text: "text-yellow-700 dark:text-yellow-300",
+    closeButton:
+      "text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-200",
+  },
+  info: {
+    container:
+      "border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20",
+    icon: "text-blue-600 dark:text-blue-500",
+    title: "text-blue-800 dark:text-blue-400",
+    text: "text-blue-700 dark:text-blue-300",
+    closeButton:
+      "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200",
+  },
+};
+
+const icons = {
+  success: CheckCircle,
+  error: XCircle,
+  warning: AlertTriangle,
+  info: Info,
+};
+
+export default function Message({
+  type,
+  title,
+  message,
+  children,
+  onClose,
+  className = "",
+}: MessageProps) {
+  const styles = messageStyles[type];
+  const Icon = icons[type];
+
+  return (
+    <div className={cn("rounded-lg border p-4", styles.container, className)}>
+      <div className="flex items-start gap-3">
+        <Icon className={cn("mt-0.5 h-5 w-5 flex-shrink-0", styles.icon)} />
+        <div className="flex-1">
+          <h3 className={cn("font-semibold", styles.title)}>{title}</h3>
+          {message && (
+            <p className={cn("mt-1 text-sm", styles.text)}>{message}</p>
+          )}
+          {children && (
+            <div className={cn("mt-2 text-sm", styles.text)}>{children}</div>
+          )}
+        </div>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className={cn(
+              "flex-shrink-0 rounded p-1 transition-colors",
+              styles.closeButton
+            )}
+            aria-label="Close message"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

src/theme/misc/MessageContent.tsx

@@ -0,0 +1,102 @@
+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,
+  };
+}
+
+export default function MessageContent({ content }: { content: string }) {
+  const [showThinking, setShowThinking] = useState(false);
+  const [thinkingTime, setThinkingTime] = useState(0);
+  const parsed = parseThinkTags(content);
+
+  useEffect(() => {
+    if (parsed.isThinking) {
+      const startTime = Date.now();
+      const interval = setInterval(() => {
+        setThinkingTime((Date.now() - startTime) / 1000);
+      }, 100);
+      return () => clearInterval(interval);
+    }
+  }, [parsed.isThinking]);
+
+  if (!parsed.thinkContent) {
+    return (
+      <div
+        className="prose prose-sm 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 max-w-none"
+        dangerouslySetInnerHTML={{
+          __html: converter.makeHtml(content),
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {parsed.isThinking ? (
+        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-blue-500" />
+          <span className="text-xs">
+            Thinking for {thinkingTime.toFixed(1)}s...
+          </span>
+        </div>
+      ) : (
+        <div>
+          <button
+            onClick={() => setShowThinking(!showThinking)}
+            className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+          >
+            {showThinking ? "Hide" : "Show"} thinking
+          </button>
+          {showThinking && (
+            <div
+              className="prose dark:prose-invert prose-li:text-xs prose-headings:text-xs prose-p:text-xs prose-headings:font-semibold prose-p:my-2 prose-ul:my-2 prose-li:my-0 prose-hr:my-4 max-w-none"
+              dangerouslySetInnerHTML={{
+                __html: converter.makeHtml(parsed.thinkContent),
+              }}
+            />
+          )}
+        </div>
+      )}
+      {parsed.afterContent && (
+        <div
+          className="prose dark:prose-invert prose-li:text-sm prose-headings:text-sm prose-p:text-sm prose-headings:font-semibold prose-p:my-2 prose-ul:my-2 prose-li:my-0 prose-hr:my-4 max-w-none"
+          dangerouslySetInnerHTML={{
+            __html: converter.makeHtml(parsed.afterContent),
+          }}
+        />
+      )}
+    </div>
+  );
+}

src/theme/misc/Modal.tsx

@@ -0,0 +1,202 @@
+import cn from "@utils/classnames";
+import { X } from "lucide-react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "full";
+  showCloseButton?: boolean;
+}
+
+const sizeStyles = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-xl",
+  xl: "max-w-3xl",
+  full: "max-w-full md:mx-4",
+};
+
+// Get all focusable elements within a container
+const getFocusableElements = (container: HTMLElement): HTMLElement[] => {
+  const focusableSelectors = [
+    "a[href]",
+    "button:not([disabled])",
+    "textarea:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])',
+  ].join(", ");
+
+  return Array.from(container.querySelectorAll(focusableSelectors));
+};
+
+export default function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  className = "",
+  size = "md",
+  showCloseButton = true,
+}: ModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      // Start animation after render
+      const timer = setTimeout(() => setIsAnimating(true), 10);
+      return () => clearTimeout(timer);
+    } else {
+      setIsAnimating(false);
+      // Remove from DOM after animation completes
+      const timer = setTimeout(() => setShouldRender(false), 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (!isAnimating || !modalRef.current) return;
+
+    const modal = modalRef.current;
+    const focusableElements = getFocusableElements(modal);
+
+    if (focusableElements.length === 0) {
+      modal.focus();
+      return;
+    }
+
+    const firstFocusable = focusableElements[0];
+    const lastFocusable = focusableElements[focusableElements.length - 1];
+
+    firstFocusable.focus();
+
+    const handleTabKey = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+
+      // Shift + Tab (backwards)
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          e.preventDefault();
+          lastFocusable.focus();
+        }
+      }
+      // Tab (forwards)
+      else {
+        if (document.activeElement === lastFocusable) {
+          e.preventDefault();
+          firstFocusable.focus();
+        }
+      }
+    };
+
+    modal.addEventListener("keydown", handleTabKey);
+
+    return () => {
+      modal.removeEventListener("keydown", handleTabKey);
+    };
+  }, [isAnimating]);
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  if (!shouldRender) return null;
+
+  const modalContent = (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-200",
+        isAnimating ? "opacity-100" : "opacity-0"
+      )}
+      onClick={handleBackdropClick}
+    >
+      {/* Backdrop */}
+      <div
+        className={cn(
+          "absolute inset-0 bg-black/50 transition-opacity duration-200",
+          isAnimating ? "opacity-100" : "opacity-0"
+        )}
+      />
+
+      {/* Modal */}
+      <div
+        ref={modalRef}
+        tabIndex={-1}
+        className={cn(
+          "relative w-full rounded-lg border border-neutral-200 bg-white shadow-xl transition-all duration-200 dark:border-gray-700",
+          "dark:bg-gray-900",
+          "flex max-h-[90vh] flex-col",
+          sizeStyles[size],
+          isAnimating ? "scale-100 opacity-100" : "scale-95 opacity-0",
+          className
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? "modal-title" : undefined}
+      >
+        {/* Header */}
+        {(title || showCloseButton) && (
+          <div className="flex flex-shrink-0 items-center justify-between border-b border-neutral-200 p-4 dark:border-gray-700">
+            {title && (
+              <h2
+                id="modal-title"
+                className="text-lg font-semibold text-neutral-900 dark:text-gray-100"
+              >
+                {title}
+              </h2>
+            )}
+            {showCloseButton && (
+              <button
+                onClick={onClose}
+                className="ml-auto cursor-pointer rounded-full p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                aria-label="Close modal"
+              >
+                <X size={20} />
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Content */}
+        <div
+          className={cn(
+            "min-h-0 flex-1 overflow-y-auto",
+            title || showCloseButton ? "p-4" : "p-0"
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(modalContent, document.body);
+}

src/theme/misc/Slider.tsx

@@ -0,0 +1,23 @@
+import cn from "@utils/classnames.ts";
+
+export default function Slider({
+  className = "",
+  width,
+}: {
+  className?: string;
+  width: number;
+}) {
+  return (
+    <div
+      className={cn(
+        className,
+        "h-1 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700"
+      )}
+    >
+      <div
+        className="h-full rounded-full bg-yellow-500 duration-500 dark:bg-yellow-400"
+        style={{ width: `${width}%` }}
+      />
+    </div>
+  );
+}

src/theme/misc/Tooltip.tsx

@@ -0,0 +1,86 @@
+import cn from "@utils/classnames.ts";
+import { type ReactNode, useRef, useState } from "react";
+
+type TooltipPosition = "top" | "bottom" | "left" | "right";
+
+export interface TooltipProps {
+  children: ReactNode;
+  text: ReactNode;
+  position?: TooltipPosition;
+  className?: string;
+}
+
+export default function Tooltip({
+  children,
+  text,
+  position = "top",
+  className = "",
+}: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutRef = useRef<number>(null);
+
+  const positionClasses: Record<TooltipPosition, string> = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2",
+  };
+
+  const arrowClasses: Record<TooltipPosition, string> = {
+    top: "top-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-gray-900 dark:border-t-gray-100",
+    bottom:
+      "bottom-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-gray-900 dark:border-b-gray-100",
+    left: "left-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-gray-900 dark:border-l-gray-100",
+    right:
+      "right-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-gray-900 dark:border-r-gray-100",
+  };
+
+  const showTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsVisible(true);
+  };
+
+  const hideTooltip = () => {
+    timeoutRef.current = window.setTimeout(() => {
+      setIsVisible(false);
+    }, 100);
+  };
+
+  return (
+    <div
+      className={cn("relative inline-block", className)}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
+    >
+      <button type="button" className="block">
+        {children}
+      </button>
+      {isVisible && (
+        <div
+          className={cn(
+            "absolute z-50",
+            positionClasses[position],
+            "animate-fadeIn"
+          )}
+          role="tooltip"
+        >
+          <div
+            className={cn(
+              "rounded bg-gray-900 px-3 py-2 text-sm whitespace-nowrap text-white dark:bg-gray-100 dark:text-gray-900"
+            )}
+          >
+            {text}
+          </div>
+          <div
+            className={cn("absolute h-0 w-0 border-4", arrowClasses[position])}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

src/utils/calculateDownloadProgress.ts

@@ -0,0 +1,76 @@
+import { type ProgressInfo } from "@huggingface/transformers";
+
+export const calculateDownloadProgress = (
+  callback: (data: {
+    percentage: number;
+    total: number;
+    loaded: number;
+    files: Record<string, number>;
+  }) => void,
+  files: Map<string, { loaded: number; total: number }> = new Map()
+) => {
+  return (progressInfo: ProgressInfo) => {
+    if (progressInfo.status === "ready") {
+      let totalLoaded = 0;
+      let totalSize = 0;
+      const filesRecord: Record<string, number> = {};
+
+      for (const [fileName, fileProgress] of files.entries()) {
+        totalLoaded += fileProgress.loaded;
+        totalSize += fileProgress.total;
+        filesRecord[fileName] = fileProgress.total;
+      }
+
+      callback({
+        percentage: 100,
+        total: totalSize,
+        loaded: totalLoaded,
+        files: filesRecord,
+      });
+      return;
+    }
+    if (progressInfo.status === "progress") {
+      files.set(progressInfo.file, {
+        loaded: progressInfo.loaded,
+        total: progressInfo.total,
+      });
+
+      const hasOnnxFile = Array.from(files.keys()).some((file) =>
+        file.endsWith(".onnx")
+      );
+
+      if (!hasOnnxFile) {
+        callback({
+          percentage: 0,
+          total: 0,
+          loaded: 0,
+          files: {},
+        });
+        return;
+      }
+
+      let totalLoaded = 0;
+      let totalSize = 0;
+      const filesRecord: Record<string, number> = {};
+
+      for (const [fileName, fileProgress] of files.entries()) {
+        totalLoaded += fileProgress.loaded;
+        totalSize += fileProgress.total;
+        filesRecord[fileName] = fileProgress.total;
+      }
+
+      const percentage =
+        totalSize > 0 ? round((totalLoaded / totalSize) * 100, 2) : 0;
+
+      callback({
+        percentage,
+        total: totalSize,
+        loaded: totalLoaded,
+        files: filesRecord,
+      });
+    }
+  };
+};
+
+const round = (value: number, decimals: number = 0) =>
+  Number(Math.round(Number(value + "e" + decimals)) + "e-" + decimals);

src/utils/classnames.ts

@@ -0,0 +1,13 @@
+const cn = (...classes: Array<Record<string, boolean> | string>): string =>
+  classes
+    .map((entry) =>
+      typeof entry === "string"
+        ? entry
+        : Object.entries(entry || {})
+            .filter(([, append]) => append)
+            .map(([cl]) => cl)
+            .join(" "),
+    )
+    .filter((e) => e !== "")
+    .join(" ");
+export default cn;

src/utils/context/chatSettings/ChatSettingsContext.ts

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

src/utils/context/chatSettings/ChatSettingsContextProvider.tsx

@@ -0,0 +1,89 @@
+import ChatSettingsModal from "@utils/context/chatSettings/ChatSettingsModal.tsx";
+import {
+  getSettingsFromURL,
+  setSettingsToURL,
+} from "@utils/context/chatSettings/routeParams.ts";
+import { isModelCached } from "@utils/isModelCached.ts";
+import { MODELS } from "@utils/models.ts";
+import { type ReactNode, useEffect, useState } from "react";
+
+import ChatSettingsContext from "./ChatSettingsContext.ts";
+import type { ChatSettings } from "./types.ts";
+
+export default function ChatSettingsContextProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [settings, setSettings] = useState<ChatSettings | null>(null);
+  const [downloadedModels, setDownloadedModels] = useState<Array<string>>([]);
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+
+  const hasAllSettings = (settings: ChatSettings | null): boolean =>
+    Boolean(settings) &&
+    Object.values(settings || {}).every(
+      (value) => value !== null && value !== undefined
+    );
+
+  useEffect(() => {
+    Promise.all(
+      Object.entries(MODELS).map(async ([modelKey, model]) => ({
+        modelKey,
+        cached: await isModelCached(model),
+      }))
+    ).then((cachedModels) =>
+      setDownloadedModels(
+        cachedModels
+          .filter(({ cached }) => cached)
+          .map(({ modelKey }) => modelKey)
+      )
+    );
+  }, []);
+
+  useEffect(() => {
+    if (!settings) return;
+    hasAllSettings(settings) && setSettingsToURL(settings);
+  }, [settings]);
+
+  useEffect(() => {
+    const settings = getSettingsFromURL();
+    console.log(settings);
+    if (settings) {
+      setSettings({
+        tools: settings?.tools,
+        modelKey: settings?.modelKey,
+        systemPrompt: settings?.systemPrompt,
+        temperature: settings?.temperature,
+        enableThinking: settings?.enableThinking,
+      });
+    }
+
+    if (!hasAllSettings(settings)) {
+      setModalOpen(true);
+    }
+  }, []);
+
+  return (
+    <ChatSettingsContext
+      value={{
+        settings,
+        setSettings,
+        downloadedModels,
+        openSettingsModal: () => setModalOpen(true),
+      }}
+    >
+      <ChatSettingsModal
+        isOpen={modalOpen}
+        showCloseButton={hasAllSettings(settings)}
+        onClose={() => setModalOpen(false)}
+        settings={settings}
+        onChange={(settings) => {
+          setSettings(settings);
+          setModalOpen(false);
+        }}
+        downloadedModels={downloadedModels}
+      />
+      {children}
+    </ChatSettingsContext>
+  );
+}

src/utils/context/chatSettings/ChatSettingsModal.tsx

@@ -0,0 +1,53 @@
+import { Modal } from "@theme";
+
+import { DEFAULT_CHAT_SETTINGS } from "./ChatSettingsContext.ts";
+import ChatSettingsModalForm from "./ChatSettingsModalForm.tsx";
+import type { ChatSettings } from "./types.ts";
+
+export default function ChatSettingsModal({
+  isOpen,
+  onClose,
+  settings,
+  onChange,
+  downloadedModels,
+  showCloseButton,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  settings: ChatSettings | null;
+  onChange: (settings: ChatSettings) => void;
+  downloadedModels: Array<string>;
+  showCloseButton: boolean;
+}) {
+  const handleSubmit = (data: ChatSettings) => onChange(data);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      showCloseButton={showCloseButton}
+      title="Conversation Settings"
+    >
+      <ChatSettingsModalForm
+        key={JSON.stringify(settings)}
+        defaultValues={
+          settings
+            ? {
+                tools: settings.tools || DEFAULT_CHAT_SETTINGS.tools,
+                modelKey: settings.modelKey || DEFAULT_CHAT_SETTINGS.modelKey,
+                systemPrompt:
+                  settings.systemPrompt || DEFAULT_CHAT_SETTINGS.systemPrompt,
+                temperature:
+                  settings.temperature || DEFAULT_CHAT_SETTINGS.temperature,
+                enableThinking:
+                  settings.enableThinking ||
+                  DEFAULT_CHAT_SETTINGS.enableThinking,
+              }
+            : DEFAULT_CHAT_SETTINGS
+        }
+        onSubmit={handleSubmit}
+        downloadedModels={downloadedModels}
+      />
+    </Modal>
+  );
+}