initial commit

.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/

.prettierrc

@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"tailwindStylesheet": "./src/routes/layout.css"
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"files.associations": {
+		"*.css": "tailwindcss"
+	}
+}

README.md

@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+pnpm dlx sv create --template minimal --types ts --add prettier eslint tailwindcss="plugins:typography" sveltekit-adapter="adapter:auto" --install pnpm hf-playground
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

components.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/routes/layout.css",
+		"baseColor": "gray"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}

eslint.config.js

@@ -0,0 +1,39 @@
+import prettier from 'eslint-config-prettier';
+import path from 'node:path';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = path.resolve(import.meta.dirname, '.gitignore');
+
+export default defineConfig(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: { globals: { ...globals.browser, ...globals.node } },
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

package.json

@@ -0,0 +1,53 @@
+{
+	"name": "hf-playground",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^2.0.2",
+		"@eslint/js": "^9.39.2",
+		"@internationalized/date": "^3.11.0",
+		"@lucide/svelte": "^0.561.0",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.18",
+		"@types/node": "^24",
+		"bits-ui": "^2.15.5",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.14.0",
+		"globals": "^17.3.0",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"svelte": "^5.49.2",
+		"svelte-check": "^4.3.6",
+		"tailwind-variants": "^3.2.2",
+		"tailwindcss": "^4.1.18",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.54.0",
+		"vite": "^7.3.1"
+	},
+	"dependencies": {
+		"@dagrejs/dagre": "^2.0.4",
+		"@huggingface/inference": "^4.13.12",
+		"@xyflow/svelte": "^1.5.0",
+		"clsx": "^2.1.1",
+		"elkjs": "^0.11.0",
+		"svelte-markdown": "^0.4.1",
+		"tailwind-merge": "^3.4.0"
+	}
+}

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - esbuild

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/actions/autofocus.ts

@@ -0,0 +1,7 @@
+export function autofocus(node: HTMLElement) {
+  node.focus();
+  return {
+    destroy() {
+    }
+  };
+}

src/lib/components/channel/Channel.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Menu } from "@lucide/svelte";
+  import { X } from "@lucide/svelte";
+  
+  import { Button } from "$lib/components/ui/button";
+  import * as Sheet from "$lib/components/ui/sheet";
+</script>
+
+<div class="">
+  <Sheet.Root>
+    <Sheet.Trigger asChild>
+      <Button variant="outline" size="icon">
+        <Menu />
+      </Button>
+    </Sheet.Trigger>
+    <Sheet.Content side="left">
+      <Sheet.Header>
+        <Sheet.Title>Channel</Sheet.Title>
+      </Sheet.Header>
+      <Sheet.Footer>
+        <Sheet.Close asChild>
+          <Button variant="outline" size="icon">
+            <X />
+          </Button>
+        </Sheet.Close>
+      </Sheet.Footer>
+    </Sheet.Content>
+  </Sheet.Root>
+</div>

src/lib/components/chat/Chat.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+  import { Send, X } from '@lucide/svelte';
+  import { Handle, useEdges, useNodes, useNodesData, Position, type NodeProps, type Edge , type Node, useSvelteFlow} from '@xyflow/svelte';
+
+	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
+  import { Button } from '$lib/components/ui/button';
+	import ComboBoxModels from '$lib/components/model/ComboBoxModels.svelte';
+	import Spinner from '$lib/components/loading/Spinner.svelte';
+	import { onMount } from 'svelte';
+	import Messages from './Messages.svelte';
+
+  let { id }: NodeProps = $props();
+
+  // svelte-ignore state_referenced_locally
+  const nodeData = useNodesData(id)
+  const { current: nodes, set: setNodes, update: updateNodes } = useNodes();
+  const { current: edges, set: setEdges, update: updateEdges } = useEdges();
+  const { fitView, updateNodeData } = useSvelteFlow();
+  
+  let selectedModels = $state.raw<ChatModel[]>(nodeData.current?.data.selectedModels as ChatModel[] ?? []);
+  let prompt = $state.raw<string>(nodeData.current?.data.prompt as string ?? '');
+  let provider = $state.raw<string>('auto');
+  let loading = $state.raw<boolean>(false);
+  let aiCallDone = $state.raw<boolean>(false);
+
+  let messages = $state.raw<ChatMessage[]>([]);
+
+  function addModel(model: ChatModel) {
+    if (!selectedModels.some((m) => m.id === model.id)) {
+      selectedModels = [...selectedModels, model];
+    }
+  }
+  function removeModel(model: ChatModel) {
+    selectedModels = selectedModels.filter((m) => m.id !== model.id);
+  }
+  
+  function handleTriggerAction() {
+    const newNodes: Node[] = [];
+    if (selectedModels.length > 1) {
+      updateNodeData(id, {
+        selectedModels: selectedModels.slice(1),
+      }, { replace: true });
+      selectedModels.slice(1).forEach((m) => {
+        const newNodeId = `chat-${crypto.randomUUID()}`;
+        const position = {
+          y: 0,
+          x: 630,
+        }
+        newNodes.push({
+          id: newNodeId,
+          type: 'chat',
+          position,
+          data: {
+            prompt,
+            selectedModels: [m],
+          },
+        });
+      });
+      selectedModels = selectedModels.slice(0, 1);
+    };
+    updateNodes((currentNodes) => [...currentNodes, ...newNodes]);
+    fitView({
+      maxZoom: 1,
+      minZoom: 1,
+      interpolate: 'smooth',
+      duration: 500,
+    })
+    handleTriggerAiCall();
+  }
+
+  async function handleTriggerAiCall() {
+    const start = Date.now();
+    try {
+      messages = [...messages, { role: 'user', content: prompt }];
+      loading = true;
+      const response = await fetch('/api', {
+        method: 'POST',
+        body: JSON.stringify({
+          model: selectedModels[0].id,
+          prompt,
+        }),
+      });
+      if (!response.ok) throw new Error(response.statusText);
+      if (!response.body) throw new Error('No response body');
+
+      messages = [...messages, { role: 'assistant', content: '' }];
+      const assistantIndex = messages.length - 1;
+      let content = '';
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          aiCallDone = true;
+          const newNodeId = `message-${crypto.randomUUID()}`;
+          const newNode: Node = {
+            id: newNodeId,
+            type: 'followUp',
+            position: {
+              x: 0,
+              y: 0,
+            },
+            data: {
+              // map messages to add isHidden: true
+              messages,
+              selectedModels,
+            },
+          }
+          const newEdge: Edge = {
+            id: `edge-${crypto.randomUUID()}`,
+            source: id,
+            target: newNodeId,
+          }
+          updateNodes((currentNodes) => [...currentNodes, newNode]);
+          updateEdges((currentEdges) => [...currentEdges, newEdge]);
+          break;
+        }
+
+        content += decoder.decode(value, { stream: true });
+        messages = messages.map((m, i) =>
+          i === assistantIndex ? { ...m, content } : m
+        );
+      }
+
+      messages = messages.map((m, i) =>
+        i === assistantIndex ? { ...m, content, timestamp: Date.now() - start } : m
+      );
+    } catch (error) {
+      console.error(error);
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(() => {
+    if (nodeData.current?.data.prompt) {
+      handleTriggerAiCall();
+    }
+  });
+</script>
+ 
+<article class="bg-white border border-gray-200 shadow-lg/5 p-5 w-[600px] rounded-3xl">
+  <div class="nodrag">
+    <header class="flex items-center justify-between mb-3">
+      <div class="flex items-center gap-1 flex-wrap">
+        {#each selectedModels as model}
+          <Button variant="outline" size="sm" class="font-normal! shadow-none! relative group">
+            <img src={model.avatarUrl} alt={model.modelName} class="size-3.5 rounded-full" />
+            {model.modelName}
+            <Button variant="default" size="icon-3xs" class="!shadow-none! absolute -top-1 -right-1 rounded-full! opacity-0 group-hover:opacity-100 transition-opacity duration-300" onclick={() => removeModel(model)}>
+              <X class="size-3" />
+            </Button>
+          </Button>
+        {/each}
+        {#if selectedModels.length < 3 && !loading && !aiCallDone}
+          <ComboBoxModels
+            onSelect={addModel}
+            excludeIds={selectedModels.map((m) => m.id)}
+          />
+        {/if}
+      </div>
+    </header>
+    <Messages {messages} />
+    {#if !aiCallDone}
+      <footer class="flex transition-all duration-300 {!loading ? 'flex-col items-end' : 'items-start mt-4 gap-2'}">
+        {#if loading}
+          <input
+            name="message"
+            id="message"
+            placeholder="Ask me anything..."
+            disabled={loading}
+            class="w-full resize-none bg-transparent border rounded-lg py-1.5 px-3 outline-none text-sm text-muted-foreground"
+            bind:value={prompt}
+            onkeydown={(e: KeyboardEvent) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              prompt = prompt.trim();
+              if (prompt) {
+                handleTriggerAction();
+              }
+            }
+          }} />
+        {:else}
+          <textarea
+            name="message"
+            id="message"
+            placeholder="Ask me anything..."
+            disabled={loading}
+            class="w-full resize-none bg-transparent border-none outline-none text-base text-accent-foreground"
+            bind:value={prompt}
+            onkeydown={(e: KeyboardEvent) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                prompt = prompt.trim();
+                if (prompt) {
+                  handleTriggerAction();
+                }
+              }
+            }}
+          ></textarea>
+        {/if}
+        <Button variant="outline" size="icon-sm" class="" disabled={!selectedModels.length || !prompt || loading} onclick={handleTriggerAction}>
+          {#if loading}
+            <Spinner className="size-5"/>
+          {:else}
+            <Send />
+          {/if}
+        </Button>
+      </footer>
+    {/if}
+  </div>
+</article>
+<Handle type="target" position={Position.Top} class="opacity-0"/>
+<Handle type="target" position={Position.Left} class="opacity-0"/>
+<Handle type="target" position={Position.Right} class="opacity-0"/>
+<Handle type="source" position={Position.Bottom} class="opacity-0" />
+<Handle type="source" position={Position.Left} class="opacity-0" />
+<Handle type="source" position={Position.Right} class="opacity-0" />

src/lib/components/chat/FollowUp.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+  import { Send, X } from '@lucide/svelte';
+  import { Handle, useEdges, useNodes, useNodesData, Position, type NodeProps, type Edge , type Node, useSvelteFlow} from '@xyflow/svelte';
+
+	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
+  import { Button } from '$lib/components/ui/button';
+	import ComboBoxModels from '$lib/components/model/ComboBoxModels.svelte';
+	import Spinner from '$lib/components/loading/Spinner.svelte';
+	import { onMount } from 'svelte';
+	import Messages from './Messages.svelte';
+
+  let { id }: NodeProps = $props();
+
+  // svelte-ignore state_referenced_locally
+  const nodeData = useNodesData(id)
+  const { current: nodes, set: setNodes, update: updateNodes } = useNodes();
+  const { current: edges, set: setEdges, update: updateEdges } = useEdges();
+  const { fitView, updateNodeData } = useSvelteFlow();
+  
+  let selectedModels = $state.raw<ChatModel[]>(nodeData.current?.data.selectedModels as ChatModel[] ?? []);
+  let prompt = $state.raw<string>(nodeData.current?.data.prompt as string ?? '');
+  let provider = $state.raw<string>('auto');
+  let loading = $state.raw<boolean>(false);
+  let aiCallDone = $state.raw<boolean>(false);
+
+  let messages = $state.raw<ChatMessage[]>([]);
+
+  function addModel(model: ChatModel) {
+    if (!selectedModels.some((m) => m.id === model.id)) {
+      selectedModels = [...selectedModels, model];
+    }
+  }
+  function removeModel(model: ChatModel) {
+    selectedModels = selectedModels.filter((m) => m.id !== model.id);
+  }
+  
+  function handleTriggerAction() {
+    const newNodes: Node[] = [];
+    if (selectedModels.length > 1) {
+      updateNodeData(id, {
+        selectedModels: selectedModels.slice(1),
+      }, { replace: true });
+      selectedModels.slice(1).forEach((m) => {
+        const newNodeId = `chat-${crypto.randomUUID()}`;
+        const position = {
+          y: 0,
+          x: 630,
+        }
+        newNodes.push({
+          id: newNodeId,
+          type: 'chat',
+          position,
+          data: {
+            prompt,
+            selectedModels: [m],
+          },
+        });
+      });
+      selectedModels = selectedModels.slice(0, 1);
+    };
+    updateNodes((currentNodes) => [...currentNodes, ...newNodes]);
+    fitView({
+      maxZoom: 1,
+      minZoom: 1,
+      interpolate: 'smooth',
+      duration: 500,
+    })
+    handleTriggerAiCall();
+  }
+
+  async function handleTriggerAiCall() {
+    const start = Date.now();
+    try {
+      messages = [...messages, { role: 'user', content: prompt }];
+      loading = true;
+      const response = await fetch('/api', {
+        method: 'POST',
+        body: JSON.stringify({
+          model: selectedModels[0].id,
+          prompt,
+        }),
+      });
+      if (!response.ok) throw new Error(response.statusText);
+      if (!response.body) throw new Error('No response body');
+
+      messages = [...messages, { role: 'assistant', content: '' }];
+      const assistantIndex = messages.length - 1;
+      let content = '';
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          aiCallDone = true;
+          console.log("AI CALL DONE")
+          const newNodeId = `message-${crypto.randomUUID()}`;
+          const newNode: Node = {
+            id: newNodeId,
+            type: 'follow-up',
+            position: {
+              x: 0,
+              y: 0,
+            },
+            data: {
+              messages,
+              selectedModels,
+            },
+          }
+          const newEdge: Edge = {
+            id: `edge-${crypto.randomUUID()}`,
+            source: id,
+            target: newNodeId,
+          }
+          updateNodes((currentNodes) => [...currentNodes, newNode]);
+          updateEdges((currentEdges) => [...currentEdges, newEdge]);
+          break;
+        }
+
+        content += decoder.decode(value, { stream: true });
+        messages = messages.map((m, i) =>
+          i === assistantIndex ? { ...m, content } : m
+        );
+      }
+
+      messages = messages.map((m, i) =>
+        i === assistantIndex ? { ...m, content, timestamp: Date.now() - start } : m
+      );
+    } catch (error) {
+      console.error(error);
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(() => {
+    if (nodeData.current?.data.prompt) {
+      handleTriggerAiCall();
+    }
+  });
+</script>
+ 
+<article class="bg-white border border-gray-200 shadow-lg/5 p-5 w-[600px] rounded-3xl">
+  <div class="nodrag">
+    <header class="flex items-center justify-between mb-3">
+      <div class="flex items-center gap-1 flex-wrap">
+        {#each selectedModels as model}
+          <Button variant="outline" size="sm" class="font-normal! shadow-none! relative group">
+            <img src={model.avatarUrl} alt={model.modelName} class="size-3.5 rounded-full" />
+            {model.modelName}
+            <Button variant="default" size="icon-3xs" class="!shadow-none! absolute -top-1 -right-1 rounded-full! opacity-0 group-hover:opacity-100 transition-opacity duration-300" onclick={() => removeModel(model)}>
+              <X class="size-3" />
+            </Button>
+          </Button>
+        {/each}
+        {#if selectedModels.length < 3 && !loading && !aiCallDone}
+          <ComboBoxModels
+            onSelect={addModel}
+            excludeIds={selectedModels.map((m) => m.id)}
+          />
+        {/if}
+      </div>
+    </header>
+    <Messages {messages} />
+    {#if !aiCallDone}
+      <footer class="flex transition-all duration-300 {!loading ? 'flex-col items-end' : 'items-start mt-4 gap-2'}">
+        {#if loading}
+          <input
+            name="message"
+            id="message"
+            placeholder="Ask me anything..."
+            disabled={loading}
+            class="w-full resize-none bg-transparent border rounded-lg py-1.5 px-3 outline-none text-sm text-muted-foreground"
+            bind:value={prompt}
+            onkeydown={(e: KeyboardEvent) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              prompt = prompt.trim();
+              if (prompt) {
+                handleTriggerAction();
+              }
+            }
+          }} />
+        {:else}
+          <textarea
+            name="message"
+            id="message"
+            placeholder="Ask me anything..."
+            disabled={loading}
+            class="w-full resize-none bg-transparent border-none outline-none text-base text-accent-foreground"
+            bind:value={prompt}
+            onkeydown={(e: KeyboardEvent) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                prompt = prompt.trim();
+                if (prompt) {
+                  handleTriggerAction();
+                }
+              }
+            }}
+          ></textarea>
+        {/if}
+        <Button variant="outline" size="icon-sm" class="" disabled={!selectedModels.length || !prompt || loading} onclick={handleTriggerAction}>
+          {#if loading}
+            <Spinner className="size-5"/>
+          {:else}
+            <Send />
+          {/if}
+        </Button>
+      </footer>
+    {/if}
+  </div>
+</article>
+<Handle type="target" position={Position.Top} class="opacity-0"/>
+<Handle type="target" position={Position.Left} class="opacity-0"/>
+<Handle type="target" position={Position.Right} class="opacity-0"/>
+<Handle type="source" position={Position.Bottom} class="opacity-0" />
+<Handle type="source" position={Position.Left} class="opacity-0" />
+<Handle type="source" position={Position.Right} class="opacity-0" />

src/lib/components/chat/Messages.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import SvelteMarkdown from 'svelte-markdown';
+
+  import type { ChatMessage } from '$lib/helpers/types';
+
+  let { messages }: { messages: ChatMessage[] } = $props();
+</script>
+
+<main class="p-1 space-y-2 cursor-auto select-auto">
+  {#each messages as message}
+    <div class="flex items-center justify-end {message.role === 'user' ? 'justify-end' : 'justify-start'}">
+      <div class="flex flex-col justify-center items-start gap-1.5">
+        {#if message.role === 'user'}
+          <p class="text-sm text-muted-foreground bg-accent-foreground/5 px-2 py-1 rounded-md">{message.content}</p>
+        {:else}
+          <SvelteMarkdown source={message.content} />
+        {/if}
+        {#if message.timestamp}
+          <p class="text-[10px] text-muted-foreground bg-muted px-2 py-1 rounded-md font-mono">
+            {message.timestamp / 1000}s
+          </p>
+        {/if}
+      </div>
+    </div>
+  {/each}
+</main>

src/lib/components/flow/FitViewOnResize.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { Node, Edge } from '@xyflow/svelte';
+  import { useNodes, useEdges } from '@xyflow/svelte';
+  import { useSvelteFlow } from '@xyflow/svelte';
+
+  let { initialNodes }: { initialNodes: Node[] } = $props();
+
+  // Fallback dimensions (used before nodes are measured by xyflow)
+  const DEFAULT_WIDTH = 600;
+  const DEFAULT_HEIGHT = 200;
+  const H_SPACING = 100;
+  const V_SPACING = 80;
+
+  const { fitView } = useSvelteFlow();
+  const nodesStore = useNodes();
+  const edgesStore = useEdges();
+
+  let lastLayoutKey = $state<string | null>(null);
+
+  const isChat = (n: Node) => n.type === 'chat';
+  const isFollowUp = (n: Node) => n.type === 'followUp' || n.type === 'follow-up';
+
+  /** Get the actual measured height of a node, or fallback */
+  function getMeasuredHeight(node: Node): number {
+    return node.measured?.height ?? DEFAULT_HEIGHT;
+  }
+
+  /** Get the actual measured width of a node, or fallback */
+  function getMeasuredWidth(node: Node): number {
+    return node.measured?.width ?? DEFAULT_WIDTH;
+  }
+
+  // Layout key: changes when nodes/edges are added/removed, OR when measured dimensions change
+  const layoutKey = $derived(
+    (() => {
+      const nodes = nodesStore.current;
+      const edges = edgesStore.current;
+      const ns = nodes.length === 0 ? initialNodes : nodes;
+      const es = nodes.length === 0 ? [] : edges;
+      const nodeIds = ns.map((n) => n.id).sort().join(',');
+      const edgeKeys = es.map((e) => `${e.source}-${e.target}`).sort().join(',');
+      // Include measured dimensions so layout re-runs when nodes get measured
+      const dims = ns.map((n) => `${n.id}:${n.measured?.width ?? 0}x${n.measured?.height ?? 0}`).sort().join(',');
+      return `${ns.length}-${es.length}-${nodeIds}-${edgeKeys}-${dims}`;
+    })()
+  );
+
+  $effect(() => {
+    const key = layoutKey;
+    if (key === lastLayoutKey) return;
+    lastLayoutKey = key;
+
+    const nodes = nodesStore.current;
+    const edges = edgesStore.current;
+    const ns = nodes.length === 0 ? initialNodes : nodes;
+    const es = nodes.length === 0 ? [] : edges;
+
+    runLayout(ns, es);
+  });
+
+  function handleWindowResize() {
+    fitView({
+      maxZoom: 1,
+      minZoom: 0.5,
+      interpolate: 'smooth',
+      duration: 500,
+    });
+  }
+
+  onMount(() => {
+    window.addEventListener('resize', handleWindowResize);
+  });
+
+  onDestroy(() => {
+    window.removeEventListener('resize', handleWindowResize);
+  });
+
+  /**
+   * Custom layout:
+   * - All chat nodes on the same horizontal row
+   * - Follow-up nodes below their source, using real measured heights
+   * - Multiple follow-ups for one source: stacked vertically
+   */
+  function computeLayout(nodes: Node[], edges: Edge[]): Node[] {
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+    const chatNodes = nodes.filter(isChat).sort((a, b) => a.id.localeCompare(b.id));
+    const followUpNodes = nodes.filter(isFollowUp);
+
+    // Build source->targets mapping from edges
+    const sourceByTarget = new Map<string, string>();
+    for (const e of edges) {
+      sourceByTarget.set(e.target, e.source);
+    }
+
+    const followUpsBySource = new Map<string, string[]>();
+    for (const node of followUpNodes) {
+      const sourceId = sourceByTarget.get(node.id);
+      if (sourceId) {
+        const list = followUpsBySource.get(sourceId) ?? [];
+        list.push(node.id);
+        followUpsBySource.set(sourceId, list);
+      }
+    }
+
+    const positions = new Map<string, { x: number; y: number }>();
+
+    // Chat nodes: same horizontal row, spaced by max width + H_SPACING
+    chatNodes.forEach((node, i) => {
+      positions.set(node.id, {
+        x: i * (getMeasuredWidth(node) + H_SPACING),
+        y: 0,
+      });
+    });
+
+    // Place follow-ups recursively, depth-first
+    const processed = new Set<string>();
+
+    const placeFollowUps = (sourceId: string) => {
+      const targets = followUpsBySource.get(sourceId);
+      if (!targets?.length) return;
+
+      const sourcePos = positions.get(sourceId);
+      if (!sourcePos) return;
+
+      const sourceNode = nodeMap.get(sourceId);
+      const sourceHeight = sourceNode ? getMeasuredHeight(sourceNode) : DEFAULT_HEIGHT;
+
+      let nextY = sourcePos.y + sourceHeight + V_SPACING;
+
+      for (const targetId of targets) {
+        if (processed.has(targetId)) continue;
+
+        positions.set(targetId, { x: sourcePos.x, y: nextY });
+        processed.add(targetId);
+
+        const targetNode = nodeMap.get(targetId);
+        const targetHeight = targetNode ? getMeasuredHeight(targetNode) : DEFAULT_HEIGHT;
+
+        // Recurse: place any follow-ups of this follow-up
+        placeFollowUps(targetId);
+
+        // Advance Y past this target and all its descendants
+        nextY = getSubtreeBottom(targetId, nodeMap, positions, followUpsBySource) + V_SPACING;
+      }
+    };
+
+    // Start from chat nodes
+    for (const chat of chatNodes) {
+      placeFollowUps(chat.id);
+    }
+
+    // Orphan follow-ups (no source found)
+    for (const node of followUpNodes) {
+      if (positions.has(node.id)) continue;
+      const allY = Array.from(positions.values()).map((p) => p.y);
+      const maxY = allY.length > 0 ? Math.max(...allY) : 0;
+      positions.set(node.id, {
+        x: 0,
+        y: maxY + DEFAULT_HEIGHT + V_SPACING,
+      });
+    }
+
+    return nodes.map((node) => ({
+      ...node,
+      position: positions.get(node.id) ?? { x: 0, y: 0 },
+    }));
+  }
+
+  /** Get the bottom Y edge of a node and all its follow-up descendants */
+  function getSubtreeBottom(
+    nodeId: string,
+    nodeMap: Map<string, Node>,
+    positions: Map<string, { x: number; y: number }>,
+    followUpsBySource: Map<string, string[]>,
+  ): number {
+    const pos = positions.get(nodeId);
+    const node = nodeMap.get(nodeId);
+    if (!pos) return 0;
+    const height = node ? getMeasuredHeight(node) : DEFAULT_HEIGHT;
+    let bottom = pos.y + height;
+
+    const children = followUpsBySource.get(nodeId);
+    if (children) {
+      for (const childId of children) {
+        bottom = Math.max(bottom, getSubtreeBottom(childId, nodeMap, positions, followUpsBySource));
+      }
+    }
+    return bottom;
+  }
+
+  function runLayout(nodes: Node[], edges: Edge[]) {
+    const result = computeLayout(nodes, edges);
+
+    const current = nodesStore.current;
+    if (current.length === 0) {
+      nodesStore.set(result);
+    } else {
+      const positionMap = new Map(result.map((n) => [n.id, n.position]));
+      nodesStore.update((prev) =>
+        prev.map((n) => {
+          const pos = positionMap.get(n.id);
+          return pos ? { ...n, position: pos } : n;
+        })
+      );
+    }
+
+    fitView({
+      maxZoom: 1,
+      minZoom: 0.5,
+      interpolate: 'smooth',
+      duration: 250,
+    });
+  }
+</script>

src/lib/components/loading/MainLoading.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import HuggingFaceLogo from '$lib/assets/hf-logo.svg';
+	import Spinner from './Spinner.svelte';
+</script>
+
+<div class="abs-center absolute flex flex-col items-center h-screen w-screen justify-center">
+  <img src={HuggingFaceLogo} alt="HF Logo" class="size-16" />
+  <p class="text-base text-muted-foreground mt-1 flex items-center justify-center gap-2">
+    Loading playground...
+    <Spinner className="size-5"/>
+  </p>
+</div>

src/lib/components/loading/Spinner.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  let { className }: { className?: string } = $props();
+</script>
+
+<span class="loader {className}"></span>
+
+<style>
+  .loader {
+    width: 20px;
+    padding: 4px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: #94a3b8;
+    --_m: 
+      conic-gradient(#0000 10%,#000),
+      linear-gradient(#000 0 0) content-box;
+    -webkit-mask: var(--_m);
+            mask: var(--_m);
+    -webkit-mask-composite: source-out;
+            mask-composite: subtract;
+    animation: l3 1s infinite linear;
+  }
+  @keyframes l3 {to{transform: rotate(1turn)}}
+  </style>

src/lib/components/model/ComboBoxModels.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { Plus, Info, ChevronLeft } from '@lucide/svelte';
+
+	import * as Command from '$lib/components/ui/command/';
+	import { Button } from '$lib/components/ui/button/';
+	import { modelsState } from '$lib/state/models.svelte';
+	import type { ChatModel } from '$lib/helpers/types';
+
+	interface Props {
+		onSelect?: (model: ChatModel) => void;
+		excludeIds?: string[];
+	}
+
+	let { onSelect, excludeIds = [] }: Props = $props();
+	let open = $state(false);
+	let search = $state('');
+
+	const filteredModels = $derived(
+		modelsState.models.filter((m) => {
+			const matchesSearch = !search || m.modelId.toLowerCase().includes(search.toLowerCase());
+			const notExcluded = !excludeIds.includes(m.id);
+			return matchesSearch && notExcluded;
+		}),
+	);
+
+  const MAX_TRENDING_MODELS = 6;
+
+  let trendingModels = $derived(filteredModels.slice(0, MAX_TRENDING_MODELS));
+  let otherModels = $derived(filteredModels.slice(MAX_TRENDING_MODELS));
+</script>
+
+<Button variant="outline" size="icon-sm" class="!shadow-none!" onclick={() => { open = true; search = ''; }}>
+	<Plus />
+</Button>
+{#if excludeIds.length === 0}
+<p class="text-xs text-gray-600 ml-1 bg-gray-500/10 py-2 px-2.5 rounded-md relative flex items-center gap-1">
+  <ChevronLeft class="size-3 absolute -left-2 top-1/2 -translate-y-1/2 fill-gray-500/10 text-gray-500/10" />
+  <Info class="size-3" />
+  Please select at least one model.
+</p>
+{/if}
+<Command.Dialog bind:open shouldFilter={false}>
+	<Command.Input bind:value={search} placeholder="Search models..." />
+	<Command.List>
+		{#if modelsState.loading}
+			<Command.Loading>Loading models...</Command.Loading>
+		{:else if modelsState.error}
+			<Command.Empty>{modelsState.error}</Command.Empty>
+		{:else if filteredModels.length === 0}
+			<Command.Empty>No results found.</Command.Empty>
+		{:else}
+      <Command.Group heading="🔥 Trending">
+        {#each trendingModels as model (model.id)}
+          <Command.Item
+            onSelect={() => {
+              onSelect?.(model);
+              open = false;
+            }}
+          >
+            <img src={model.avatarUrl} alt="" class="size-4 rounded-full" />
+            <span>{model.modelName}</span>
+          </Command.Item>
+        {/each}
+      <Command.Separator />
+      </Command.Group>
+				<Command.Group heading="Other models">
+					{#each otherModels as model (model.id)}
+						<Command.Item
+							onSelect={() => {
+								onSelect?.(model);
+								open = false;
+							}}
+						>
+              <span>
+                <span class="font-medium">{model.author}</span>/{model.modelName}
+              </span>
+						</Command.Item>
+					{/each}
+				</Command.Group>
+		{/if}
+	</Command.List>
+</Command.Dialog>

src/lib/components/ui/button/button.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring cursor-pointer focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+				destructive:
+					"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
+				outline:
+					"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs text-gray-600 dark:text-gray-400",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				xs: "h-7 gap-1 rounded-md px-2.5 has-[>svg]:px-2",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+				"icon-xs": "size-7",
+				"icon-3xs": "size-4",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

src/lib/components/ui/button/index.ts

@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};

src/lib/components/ui/command/command-dialog.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import Command from "./command.svelte";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run",
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
+		<Command
+			class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			{...restProps}
+			bind:value
+			bind:ref
+			{children}
+		/>
+	</Dialog.Content>
+</Dialog.Root>

src/lib/components/ui/command/command-empty.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn("py-6 text-center text-sm", className)}
+	{...restProps}
+/>

src/lib/components/ui/command/command-group.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Command as CommandPrimitive, useId } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		value,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn("text-foreground overflow-hidden p-1", className)}
+	value={value ?? heading ?? `----${useId()}`}
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading
+			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+		>
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

src/lib/components/ui/command/command-input.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import SearchIcon from "@lucide/svelte/icons/search";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<div class="flex h-9 items-center gap-2 border-b ps-3 pe-8" data-slot="command-input-wrapper">
+	<SearchIcon class="size-4 shrink-0 opacity-50" />
+	<CommandPrimitive.Input
+		data-slot="command-input"
+		class={cn(
+			"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		bind:ref
+		{...restProps}
+		bind:value
+	/>
+</div>

src/lib/components/ui/command/command-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"aria-selected:bg-accent cursor-pointer aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex items-center gap-2 rounded-sm px-2 py-0.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/command/command-link-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/command/command-list.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	bind:ref
+	data-slot="command-list"
+	class={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
+	{...restProps}
+/>

src/lib/components/ui/command/command-loading.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />

src/lib/components/ui/command/command-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.SeparatorProps = $props();
+</script>
+
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn("bg-border -mx-1 h-px", className)}
+	{...restProps}
+/>

src/lib/components/ui/command/command-shortcut.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

src/lib/components/ui/command/command.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Command as CommandPrimitive } from "bits-ui";
+
+	export type CommandRootApi = CommandPrimitive.Root;
+
+	let {
+		api = $bindable(null),
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
+</script>
+
+<CommandPrimitive.Root
+	bind:this={api}
+	bind:value
+	bind:ref
+	data-slot="command"
+	class={cn(
+		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/command/index.ts

@@ -0,0 +1,37 @@
+import Root from "./command.svelte";
+import Loading from "./command-loading.svelte";
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Item from "./command-item.svelte";
+import Input from "./command-input.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+import LinkItem from "./command-link-item.svelte";
+
+export {
+	Root,
+	Dialog,
+	Empty,
+	Group,
+	Item,
+	LinkItem,
+	Input,
+	List,
+	Separator,
+	Shortcut,
+	Loading,
+	//
+	Root as Command,
+	Dialog as CommandDialog,
+	Empty as CommandEmpty,
+	Group as CommandGroup,
+	Item as CommandItem,
+	LinkItem as CommandLinkItem,
+	Input as CommandInput,
+	List as CommandList,
+	Separator as CommandSeparator,
+	Shortcut as CommandShortcut,
+	Loading as CommandLoading,
+};

src/lib/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import DialogPortal from "./dialog-portal.svelte";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />

src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg leading-none font-semibold", className)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

src/lib/components/ui/dialog/dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />

src/lib/components/ui/dialog/index.ts

@@ -0,0 +1,34 @@
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};

src/lib/components/ui/sheet/index.ts

@@ -0,0 +1,34 @@
+import Root from "./sheet.svelte";
+import Portal from "./sheet-portal.svelte";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};

src/lib/components/ui/sheet/sheet-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />