Enhancements (#79)

- Improve checkpoints menu UX
- Allow running conversations individually
- Hide model page if its a custom model
- Regen buttons on messages

---------

Co-authored-by: Victor Muštar <victor.mustar@gmail.com>

package.json

@@ -38,14 +38,14 @@
 		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
-		"melt": "^0.29.3",
+		"melt": "^0.30.1",
 		"openai": "^4.90.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"runed": "^0.25.0",
-		"svelte": "^5.20.4",
+		"svelte": "^5.28.2",
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.0.2",
 		"tailwindcss": "^4.0.9",

pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       eslint-plugin-svelte:
         specifier: ^3.3.1
-        version: 3.3.1(eslint@9.22.0(jiti@2.4.2))(svelte@5.23.0)
+        version: 3.3.1(eslint@9.22.0(jiti@2.4.2))(svelte@5.28.2)
       typia:
         specifier: ^8.0.0
         version: 8.0.0(@samchon/openapi@3.0.0)(typescript@5.8.2)
@@ -50,16 +50,16 @@ importers:
         version: 3.0.0
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
-        version: 3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))
+        version: 3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))
       '@sveltejs/adapter-node':
         specifier: ^5.2.0
-        version: 5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))
+        version: 5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))
       '@sveltejs/kit':
         specifier: ^2.5.27
-        version: 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
+        version: 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
+        version: 4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@4.0.9)
@@ -88,8 +88,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       melt:
-        specifier: ^0.29.3
-        version: 0.29.3(@floating-ui/dom@1.6.13)(svelte@5.23.0)
+        specifier: ^0.30.1
+        version: 0.30.1(@floating-ui/dom@1.6.13)(svelte@5.28.2)
       openai:
         specifier: ^4.90.0
         version: 4.90.0
@@ -101,19 +101,19 @@ importers:
         version: 3.5.3
       prettier-plugin-svelte:
         specifier: ^3.2.6
-        version: 3.3.3(prettier@3.5.3)(svelte@5.23.0)
+        version: 3.3.3(prettier@3.5.3)(svelte@5.28.2)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.23.0))(prettier@3.5.3)
+        version: 0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.28.2))(prettier@3.5.3)
       runed:
         specifier: ^0.25.0
-        version: 0.25.0(svelte@5.23.0)
+        version: 0.25.0(svelte@5.28.2)
       svelte:
-        specifier: ^5.20.4
-        version: 5.23.0
+        specifier: ^5.28.2
+        version: 5.28.2
       svelte-check:
         specifier: ^4.0.0
-        version: 4.1.5(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.8.2)
+        version: 4.1.5(picomatch@4.0.2)(svelte@5.28.2)(typescript@5.8.2)
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.0.2
@@ -134,7 +134,7 @@ importers:
         version: 8.26.1(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
       unplugin-icons:
         specifier: ^22.1.0
-        version: 22.1.0(svelte@5.23.0)
+        version: 22.1.0(svelte@5.28.2)
       vite:
         specifier: ^5.4.4
         version: 5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)
@@ -1407,8 +1407,8 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
-  esrap@1.4.5:
-    resolution: {integrity: sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==}
+  esrap@1.4.6:
+    resolution: {integrity: sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==}
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -1825,8 +1825,8 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  melt@0.29.3:
-    resolution: {integrity: sha512-cgorPvV3hSTugEnMpjLarugz8YRhUckM48i2gAgNzmqYx2w4hwvEsxA6GRy9DWst5rj+DKSmiDCcFRrHRpg/lA==}
+  melt@0.30.1:
+    resolution: {integrity: sha512-Z3X3IMknWSbXFlzQA6On18kdGf1a+Kgqu/TxxvchjGGiS3RINd96PrlLU2Bl/SOxF+UWLLYmH1fohwiMz9UsQQ==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
       svelte: ^5.0.0
@@ -2299,8 +2299,8 @@ packages:
       svelte:
         optional: true
 
-  svelte@5.23.0:
-    resolution: {integrity: sha512-v0lL3NuKontiCxholEiAXCB+BYbndlKbwlDMK0DS86WgGELMJSpyqCSbJeMEMBDwOglnS7Ar2Rq0wwa/z2L8Vg==}
+  svelte@5.28.2:
+    resolution: {integrity: sha512-FbWBxgWOpQfhKvoGJv/TFwzqb4EhJbwCD17dB0tEpQiw1XyUEKZJtgm4nA4xq3LLsMo7hu5UY/BOFmroAxKTMg==}
     engines: {node: '>=18'}
 
   synckit@0.9.2:
@@ -3125,22 +3125,22 @@ snapshots:
     dependencies:
       acorn: 8.14.0
 
-  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))':
+  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))':
     dependencies:
-      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
+      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-node@5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))':
+  '@sveltejs/adapter-node@5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))':
     dependencies:
       '@rollup/plugin-commonjs': 28.0.2(rollup@4.34.9)
       '@rollup/plugin-json': 6.1.0(rollup@4.34.9)
       '@rollup/plugin-node-resolve': 16.0.0(rollup@4.34.9)
-      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
+      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
       rollup: 4.34.9
 
-  '@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))':
+  '@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -3152,26 +3152,26 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
-      svelte: 5.23.0
+      svelte: 5.28.2
       vite: 5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
       debug: 4.4.0
-      svelte: 5.23.0
+      svelte: 5.28.2
       vite: 5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.23.0)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)))(svelte@5.28.2)(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
-      svelte: 5.23.0
+      svelte: 5.28.2
       vite: 5.4.14(@types/node@18.19.84)(lightningcss@1.29.1)
       vitefu: 1.0.6(vite@5.4.14(@types/node@18.19.84)(lightningcss@1.29.1))
     transitivePeerDependencies:
@@ -3630,7 +3630,7 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.1(eslint@9.22.0(jiti@2.4.2))
 
-  eslint-plugin-svelte@3.3.1(eslint@9.22.0(jiti@2.4.2))(svelte@5.23.0):
+  eslint-plugin-svelte@3.3.1(eslint@9.22.0(jiti@2.4.2))(svelte@5.28.2):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.22.0(jiti@2.4.2))
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -3642,9 +3642,9 @@ snapshots:
       postcss-load-config: 3.1.4(postcss@8.5.3)
       postcss-safe-parser: 7.0.1(postcss@8.5.3)
       semver: 7.7.1
-      svelte-eslint-parser: 1.1.0(svelte@5.23.0)
+      svelte-eslint-parser: 1.1.0(svelte@5.28.2)
     optionalDependencies:
-      svelte: 5.23.0
+      svelte: 5.28.2
     transitivePeerDependencies:
       - ts-node
 
@@ -3713,7 +3713,7 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@1.4.5:
+  esrap@1.4.6:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
@@ -4087,14 +4087,14 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  melt@0.29.3(@floating-ui/dom@1.6.13)(svelte@5.23.0):
+  melt@0.30.1(@floating-ui/dom@1.6.13)(svelte@5.28.2):
     dependencies:
       '@floating-ui/dom': 1.6.13
       dequal: 2.0.3
       jest-axe: 9.0.0
       nanoid: 5.1.5
-      runed: 0.23.4(svelte@5.23.0)
-      svelte: 5.23.0
+      runed: 0.23.4(svelte@5.28.2)
+      svelte: 5.28.2
 
   merge2@1.4.1: {}
 
@@ -4305,16 +4305,16 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.23.0):
+  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.28.2):
     dependencies:
       prettier: 3.5.3
-      svelte: 5.23.0
+      svelte: 5.28.2
 
-  prettier-plugin-tailwindcss@0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.23.0))(prettier@3.5.3):
+  prettier-plugin-tailwindcss@0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.28.2))(prettier@3.5.3):
     dependencies:
       prettier: 3.5.3
     optionalDependencies:
-      prettier-plugin-svelte: 3.3.3(prettier@3.5.3)(svelte@5.23.0)
+      prettier-plugin-svelte: 3.3.3(prettier@3.5.3)(svelte@5.28.2)
 
   prettier@3.5.3: {}
 
@@ -4410,15 +4410,15 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
-  runed@0.23.4(svelte@5.23.0):
+  runed@0.23.4(svelte@5.28.2):
     dependencies:
       esm-env: 1.2.2
-      svelte: 5.23.0
+      svelte: 5.28.2
 
-  runed@0.25.0(svelte@5.23.0):
+  runed@0.25.0(svelte@5.28.2):
     dependencies:
       esm-env: 1.2.2
-      svelte: 5.23.0
+      svelte: 5.28.2
 
   rxjs@7.8.2:
     dependencies:
@@ -4504,19 +4504,19 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.1.5(picomatch@4.0.2)(svelte@5.23.0)(typescript@5.8.2):
+  svelte-check@4.1.5(picomatch@4.0.2)(svelte@5.28.2)(typescript@5.8.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.3
       fdir: 6.4.3(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.23.0
+      svelte: 5.28.2
       typescript: 5.8.2
     transitivePeerDependencies:
       - picomatch
 
-  svelte-eslint-parser@1.1.0(svelte@5.23.0):
+  svelte-eslint-parser@1.1.0(svelte@5.28.2):
     dependencies:
       eslint-scope: 8.3.0
       eslint-visitor-keys: 4.2.0
@@ -4525,9 +4525,9 @@ snapshots:
       postcss-scss: 4.0.9(postcss@8.5.3)
       postcss-selector-parser: 7.1.0
     optionalDependencies:
-      svelte: 5.23.0
+      svelte: 5.28.2
 
-  svelte@5.23.0:
+  svelte@5.28.2:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -4538,7 +4538,7 @@ snapshots:
       axobject-query: 4.1.0
       clsx: 2.1.1
       esm-env: 1.2.2
-      esrap: 1.4.5
+      esrap: 1.4.6
       is-reference: 3.0.3
       locate-character: 3.0.0
       magic-string: 0.30.17
@@ -4641,7 +4641,7 @@ snapshots:
 
   undici-types@5.26.5: {}
 
-  unplugin-icons@22.1.0(svelte@5.23.0):
+  unplugin-icons@22.1.0(svelte@5.28.2):
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@iconify/utils': 2.3.0
@@ -4649,7 +4649,7 @@ snapshots:
       local-pkg: 1.1.1
       unplugin: 2.2.0
     optionalDependencies:
-      svelte: 5.23.0
+      svelte: 5.28.2
     transitivePeerDependencies:
       - supports-color
 

src/lib/actions/click-outside.ts

@@ -3,8 +3,8 @@ import type { Action } from "svelte/action";
 export const clickOutside: Action<HTMLElement, () => void> = (node, callback) => {
 	let _callback = callback;
 
-	function update(callback: () => void) {
-		_callback = callback;
+	function update(newCallback: () => void) {
+		_callback = newCallback;
 	}
 
 	function handleClick(event: MouseEvent) {
@@ -12,17 +12,44 @@ export const clickOutside: Action<HTMLElement, () => void> = (node, callback) =>
 			// Don't close if text is selected
 			return;
 		}
-		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+
+		// For dialog elements, check if click was on the backdrop
+		if (node instanceof HTMLDialogElement) {
+			const rect = node.getBoundingClientRect();
+			const isInDialog =
+				event.clientX >= rect.left &&
+				event.clientX <= rect.right &&
+				event.clientY >= rect.top &&
+				event.clientY <= rect.bottom;
+
+			if (!isInDialog) {
+				_callback();
+				return;
+			}
+		}
+
+		// For non-dialog elements, use the standard contains check
+		if (!node.contains(event.target as Node) && !event.defaultPrevented) {
 			_callback();
 		}
 	}
 
-	document.addEventListener("click", handleClick, true);
+	// For dialogs, listen on the element itself
+	if (node instanceof HTMLDialogElement) {
+		node.addEventListener("click", handleClick);
+	} else {
+		// For other elements, listen on the document
+		document.addEventListener("click", handleClick, true);
+	}
 
 	return {
 		update,
 		destroy() {
-			document.removeEventListener("click", handleClick, true);
+			if (node instanceof HTMLDialogElement) {
+				node.removeEventListener("click", handleClick);
+			} else {
+				document.removeEventListener("click", handleClick, true);
+			}
 		},
 	};
 };

src/lib/components/icon-custom.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { SVGAttributes } from "svelte/elements";
+
+	type Icon = "regen";
+
+	interface Props extends SVGAttributes<SVGElement> {
+		icon: Icon;
+	}
+
+	let { icon, ...rest }: Props = $props();
+</script>
+
+{#if icon === "regen"}
+	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+		<path
+			d="M9.01857 2.5C7.62667 2.49856 6.26819 2.92612 5.12839 3.7244C3.9886 4.52267 3.12295 5.65278 2.6495 6.96064C2.17605 8.26851 2.11784 9.69045 2.48281 11.0326C2.84778 12.3747 3.61816 13.5717 4.68891 14.4603H2.77351V15.5H6.93688V11.34H5.89639V14.0549C4.86194 13.3824 4.0727 12.3939 3.64631 11.2367C3.21992 10.0795 3.17921 8.81556 3.53025 7.63335C3.88129 6.45115 4.60529 5.41395 5.59432 4.67637C6.58335 3.93878 7.78444 3.54033 9.01857 3.54037V2.5ZM11.1003 3.01983V7.17989H12.1415V4.46559C12.8436 4.92312 13.4366 5.52914 13.8785 6.24083C14.3205 6.95252 14.6007 7.7525 14.6992 8.58426H15.7521C15.576 6.81965 14.7129 5.19487 13.3489 4.06019H15.2636V3.01983H11.1003ZM11.3866 16.8117C11.349 16.8117 11.3118 16.8043 11.277 16.7899C11.2423 16.7756 11.2107 16.7545 11.1841 16.7279C11.1575 16.7013 11.1364 16.6698 11.1221 16.6351C11.1077 16.6004 11.1003 16.5632 11.1003 16.5256V10.2311C11.1003 10.1814 11.1132 10.1325 11.1379 10.0893C11.1626 10.0462 11.1981 10.0101 11.2409 9.98485C11.2837 9.95955 11.3324 9.94584 11.3822 9.94507C11.4319 9.9443 11.481 9.95651 11.5246 9.98047L17.2515 13.1277C17.2964 13.1524 17.3338 13.1887 17.3599 13.2328C17.3859 13.2769 17.3997 13.3272 17.3997 13.3784C17.3997 13.4296 17.3859 13.4798 17.3599 13.5239C17.3338 13.568 17.2964 13.6043 17.2515 13.629L11.5246 16.7762C11.4824 16.7995 11.4349 16.8117 11.3866 16.8117Z"
+			fill="currentColor"
+		/>
+	</svg>
+{/if}

src/lib/components/inference-playground/checkpoints-menu.svelte

@@ -1,20 +1,27 @@
 <script lang="ts">
+	import { clickOutside } from "$lib/actions/click-outside.js";
 	import { checkpoints } from "$lib/state/checkpoints.svelte";
 	import { session } from "$lib/state/session.svelte.js";
+	import { iterate } from "$lib/utils/array.js";
 	import { Popover } from "melt/builders";
 	import { Tooltip } from "melt/components";
 	import { fly } from "svelte/transition";
+	import IconCompare from "~icons/carbon/compare";
 	import IconHistory from "~icons/carbon/recently-viewed";
-	import IconDelete from "~icons/carbon/trash-can";
 	import IconStar from "~icons/carbon/star";
 	import IconStarFilled from "~icons/carbon/star-filled";
-	import IconCompare from "~icons/carbon/compare";
+	import IconDelete from "~icons/carbon/trash-can";
 
 	const popover = new Popover({
 		floatingConfig: {
 			offset: { crossAxis: -12 },
 		},
+		onOpenChange: open => {
+			if (open) dialog?.showModal();
+			else dialog?.close();
+		},
 	});
+	let dialog = $state<HTMLDialogElement>();
 
 	const projCheckpoints = $derived(checkpoints.for(session.project.id));
 </script>
@@ -26,10 +33,16 @@
 	{/if}
 </button>
 
-<div
-	class="mb-2 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+<dialog
+	bind:this={dialog}
+	class="mb-2 !overflow-visible rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+	use:clickOutside={() => (popover.open = false)}
 	{...popover.content}
 >
+	<div
+		class="size-4 translate-x-3 rounded-tl border-t border-l border-gray-200 dark:border-gray-700"
+		{...popover.arrow}
+	></div>
 	<div class="max-h-120 w-80 overflow-x-clip overflow-y-auto p-3 pb-1">
 		<div class="mb-2 flex items-center justify-between px-1">
 			<h3 class="text-sm font-medium dark:text-white">Checkpoints</h3>
@@ -114,7 +127,10 @@
 							{...tooltip.content}
 							transition:fly={{ x: -2 }}
 						>
-							<div class="size-4 rounded-tl border-t border-l border-gray-700" {...tooltip.arrow}></div>
+							<div
+								class="size-4 rounded-tl border-t border-l border-gray-200 dark:border-gray-700"
+								{...tooltip.arrow}
+							></div>
 							{#each state.conversations as conversation, i}
 								{@const msgs = conversation.messages}
 								{@const sliced = msgs.slice(0, 4)}
@@ -129,8 +145,7 @@
 										temp: {conversation.config.temperature}
 										| max tokens: {conversation.config.max_tokens}
 									</p>
-									{#each sliced as msg, i}
-										{@const isLast = i === sliced.length - 1}
+									{#each iterate(sliced) as [msg, isLast]}
 										<div class="flex flex-col gap-1 p-2">
 											<p class="font-mono text-xs font-medium text-gray-400 uppercase">{msg.role}</p>
 											{#if msg.content?.trim()}
@@ -155,4 +170,4 @@
 			</div>
 		{/each}
 	</div>
-</div>
+</dialog>

src/lib/components/inference-playground/conversation.svelte

@@ -7,6 +7,8 @@
 	import IconPlus from "~icons/carbon/add";
 	import CodeSnippets from "./code-snippets.svelte";
 	import Message from "./message.svelte";
+	import { iterate } from "$lib/utils/array.js";
+	import { session } from "$lib/state/session.svelte";
 
 	interface Props {
 		conversation: Conversation;
@@ -52,6 +54,19 @@
 	function deleteMessage(idx: number) {
 		conversation.messages = conversation.messages.slice(0, idx);
 	}
+
+	function regenMessage(idx: number) {
+		const msg = conversation.messages[idx];
+		if (!msg) return;
+		if (msg.role === "user") {
+			conversation.messages = conversation.messages.slice(0, idx + 1);
+		} else {
+			conversation.messages = conversation.messages.slice(0, idx);
+		}
+
+		session.stopGenerating();
+		session.run(conversation);
+	}
 </script>
 
 <div
@@ -61,13 +76,15 @@
 	id="test-this"
 >
 	{#if !viewCode}
-		{#each conversation.messages as _msg, idx}
+		{#each iterate(conversation.messages) as [_msg, { isLast }], idx}
 			<Message
 				bind:message={conversation.messages[idx]!}
 				{conversation}
 				autofocus={idx === conversation.messages.length - 1}
 				{loading}
 				onDelete={() => deleteMessage(idx)}
+				onRegen={() => regenMessage(idx)}
+				{isLast}
 			/>
 		{/each}
 

src/lib/components/inference-playground/custom-model-config.svelte

@@ -21,10 +21,10 @@
 
 <script lang="ts">
 	import { autofocus } from "$lib/actions/autofocus.js";
-
+	import IconCaret from "~icons/carbon/chevron-down";
 	import { clickOutside } from "$lib/actions/click-outside.js";
 	import { models } from "$lib/state/models.svelte";
-	import { type Conversation, type CustomModel } from "$lib/types.js";
+	import { PipelineTag, pipelineTagLabel, type Conversation, type CustomModel } from "$lib/types.js";
 	import type { HTMLFormAttributes } from "svelte/elements";
 	import { fade, scale } from "svelte/transition";
 	import IconCross from "~icons/carbon/close";
@@ -34,6 +34,8 @@
 	import Tooltip from "../tooltip.svelte";
 	import { createFieldValidation } from "$lib/utils/form.svelte.js";
 	import { isValidURL } from "$lib/utils/url.js";
+	import { Select } from "melt/components";
+	import { keys } from "$lib/utils/object.js";
 
 	let dialog: HTMLDialogElement | undefined = $state();
 	const exists = $derived(!!models.custom.find(m => m._id === model?._id));
@@ -187,7 +189,7 @@
 						<p class="text-xs text-red-300">{endpointValidation.msg}</p>
 					</label>
 					<label class="flex flex-col gap-2">
-						<p class="block text-sm font-medium text-gray-900 dark:text-white">Access Token</p>
+						<p class="block text-sm font-medium text-gray-900 dark:text-white">Access token</p>
 						<input
 							bind:value={model.accessToken}
 							placeholder="XXXXXXXXXXXXXXXXXXXX"
@@ -197,6 +199,50 @@
 						<p class="text-sm text-gray-500">Stored locally - not sent to our server</p>
 					</label>
 
+					<div class="flex flex-col gap-2">
+						<Select bind:value={model.pipeline_tag}>
+							{#snippet children(select)}
+								<label for={select.ids.trigger} class="block text-sm font-medium text-gray-900 dark:text-white">
+									Supported task
+								</label>
+
+								<button
+									{...select.trigger}
+									class={[
+										"relative flex grow items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
+										"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+									]}
+								>
+									<div class="flex items-center gap-1 text-sm">
+										{pipelineTagLabel[model?.pipeline_tag ?? PipelineTag.TextGeneration]}
+									</div>
+									<div
+										class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
+									>
+										<IconCaret />
+									</div>
+								</button>
+
+								<div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
+									{#each keys(PipelineTag) as key (key)}
+										{@const tag = PipelineTag[key]}
+										{@const label = pipelineTagLabel[tag]}
+										{@const option = select.getOption(tag)}
+										<div {...option} class="group block w-full p-1 text-sm dark:text-white">
+											<div
+												class="rounded-md py-1.5 pr-1 pl-2 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
+											>
+												<span>
+													{label}
+												</span>
+											</div>
+										</div>
+									{/each}
+								</div>
+							{/snippet}
+						</Select>
+					</div>
+
 					{#if message}
 						<div
 							class={[

src/lib/components/inference-playground/message.svelte

@@ -8,6 +8,7 @@
 	import { fade } from "svelte/transition";
 	import IconImage from "~icons/carbon/image-reference";
 	import IconMaximize from "~icons/carbon/maximize";
+	import IconCustom from "../icon-custom.svelte";
 	import ImgPreview from "./img-preview.svelte";
 
 	type Props = {
@@ -16,9 +17,11 @@
 		loading?: boolean;
 		autofocus?: boolean;
 		onDelete?: () => void;
+		onRegen?: () => void;
+		isLast?: boolean;
 	};
 
-	let { message = $bindable(), conversation, loading, autofocus, onDelete }: Props = $props();
+	let { message = $bindable(), conversation, loading, autofocus, onDelete, onRegen, isLast }: Props = $props();
 
 	let element = $state<HTMLTextAreaElement>();
 	new TextareaAutosize({
@@ -48,6 +51,11 @@
 	});
 
 	let previewImg = $state<string>();
+
+	const regenLabel = $derived.by(() => {
+		if (message.role === "assistant") return "Regenerate";
+		return isLast ? "Generate from here" : "Regenerate from here";
+	});
 </script>
 
 <div
@@ -104,6 +112,25 @@
 				</Tooltip>
 			{/if}
 
+			<Tooltip>
+				{#snippet trigger(tooltip)}
+					<button
+						tabindex="0"
+						onclick={onRegen}
+						type="button"
+						class="mt-1.5 -mr-2 grid size-8 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900
+			group-focus-within/message:visible group-hover/message:visible hover:bg-gray-100
+			hover:text-blue-700 focus:z-10 focus:ring-4
+			focus:ring-gray-100 focus:outline-hidden sm:invisible dark:border-gray-600 dark:bg-gray-800
+			dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+						{...tooltip.trigger}
+					>
+						<IconCustom icon="regen" />
+					</button>
+				{/snippet}
+				{regenLabel}
+			</Tooltip>
+
 			<Tooltip>
 				{#snippet trigger(tooltip)}
 					<button

src/lib/components/inference-playground/playground.svelte

@@ -1,25 +1,16 @@
 <script lang="ts">
 	import { observe, observed, ObservedElements } from "$lib/actions/observe.svelte.js";
-	import { AbortManager } from "$lib/spells/abort-manager.svelte.js";
 	import { models } from "$lib/state/models.svelte.js";
 	import { session } from "$lib/state/session.svelte.js";
 	import { token } from "$lib/state/token.svelte.js";
-	import { type ConversationMessage, type Model, type Project } from "$lib/types.js";
-	import { isMac } from "$lib/utils/platform.js";
+	import { isConversationWithHFModel, type ConversationMessage, type Model, type Project } from "$lib/types.js";
+	import { cmdOrCtrl, optOrAlt } from "$lib/utils/platform.js";
+	import { Popover } from "melt/components";
 	import { watch } from "runed";
 	import typia from "typia";
-	import IconExternal from "~icons/carbon/arrow-up-right";
-	import IconCode from "~icons/carbon/code";
-	import IconCompare from "~icons/carbon/compare";
-	import IconInfo from "~icons/carbon/information";
-	import IconSettings from "~icons/carbon/settings";
-	import IconShare from "~icons/carbon/share";
-	import IconWaterfall from "~icons/carbon/chart-waterfall";
 	import { default as IconDelete } from "~icons/carbon/trash-can";
-	import { showQuotaModal } from "../quota-modal.svelte";
 	import { showShareModal } from "../share-modal.svelte";
 	import Toaster from "../toaster.svelte";
-	import { addToast } from "../toaster.svelte.js";
 	import Tooltip from "../tooltip.svelte";
 	import PlaygroundConversationHeader from "./conversation-header.svelte";
 	import PlaygroundConversation from "./conversation.svelte";
@@ -28,32 +19,39 @@
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
-	import { getTokens, handleNonStreamingResponse, handleStreamingResponse, isSystemPromptSupported } from "./utils.js";
+	import { getTokens, isSystemPromptSupported } from "./utils.js";
+
+	import { iterate } from "$lib/utils/array.js";
+	import IconChatLeft from "~icons/carbon/align-box-bottom-left";
+	import IconChatRight from "~icons/carbon/align-box-bottom-right";
+	import IconExternal from "~icons/carbon/arrow-up-right";
+	import IconWaterfall from "~icons/carbon/chart-waterfall";
+	import IconChevronDown from "~icons/carbon/chevron-down";
+	import IconCode from "~icons/carbon/code";
+	import IconCompare from "~icons/carbon/compare";
+	import IconInfo from "~icons/carbon/information";
+	import IconSettings from "~icons/carbon/settings";
+	import IconShare from "~icons/carbon/share";
+
+	const multiple = $derived(session.project.conversations.length > 1);
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 
 	let viewCode = $state(false);
 	let viewSettings = $state(false);
-	let loading = $state(false);
+	const loading = $derived(session.generating);
 
-	const abortManager = new AbortManager();
 	let selectCompareModelOpen = $state(false);
 
-	interface GenerationStatistics {
-		latency: number;
-		generatedTokensCount: number;
-	}
-	let generationStats = $state(
-		session.project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
-			| [GenerationStatistics]
-			| [GenerationStatistics, GenerationStatistics]
-	);
-
 	watch(
 		() => $state.snapshot(session.project),
 		() => {
 			session.project.conversations.forEach(async (c, i) => {
-				generationStats[i] = { latency: 0, ...generationStats[i], generatedTokensCount: await getTokens(c) };
+				session.generationStats[i] = {
+					latency: 0,
+					...session.generationStats[i],
+					generatedTokensCount: await getTokens(c),
+				};
 			});
 		}
 	);
@@ -74,99 +72,15 @@
 		if (typia.is<Project["conversations"]>(c)) session.project.conversations = c;
 	}
 
-	async function runInference(conversationIdx: number) {
-		const conversation = session.project.conversations[conversationIdx];
-		if (!conversation) return;
-
-		const startTime = performance.now();
-
-		if (conversation.streaming) {
-			let addedMessage = false;
-			let streamingMessage = $state({ role: "assistant", content: "" });
-
-			await handleStreamingResponse(
-				conversation,
-				content => {
-					if (!streamingMessage) return;
-					streamingMessage.content = content;
-					if (!addedMessage) {
-						conversation.messages = [...conversation.messages, streamingMessage];
-						addedMessage = true;
-					}
-				},
-				abortManager.createController()
-			);
-		} else {
-			const { message: newMessage, completion_tokens: newTokensCount } = await handleNonStreamingResponse(conversation);
-			conversation.messages = [...conversation.messages, newMessage];
-			const c = generationStats[conversationIdx];
-			if (c) c.generatedTokensCount += newTokensCount;
-		}
-
-		const endTime = performance.now();
-		const c = generationStats[conversationIdx];
-		if (c) c.latency = Math.round(endTime - startTime);
-	}
-
-	async function submit() {
-		if (!token.value) {
-			token.showModal = true;
-			return;
-		}
-
-		for (const [idx, conversation] of session.project.conversations.entries()) {
-			if (conversation.messages.at(-1)?.role !== "assistant") continue;
-			let prefix = "";
-			if (session.project.conversations.length === 2) {
-				prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
-			}
-			return addToast({
-				title: "Failed to run inference",
-				description: `${prefix}Messages must alternate between user/assistant roles.`,
-				variant: "error",
-			});
-		}
-
-		(document.activeElement as HTMLElement).blur();
-		loading = true;
-
-		try {
-			const promises = session.project.conversations.map((_, idx) => runInference(idx));
-			await Promise.all(promises);
-		} catch (error) {
-			for (const conversation of session.project.conversations) {
-				if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
-					conversation.messages.pop();
-					conversation.messages = [...conversation.messages];
-				}
-				session.$ = session.$;
-			}
-
-			if (error instanceof Error) {
-				const msg = error.message;
-				if (msg.toLowerCase().includes("montly") || msg.toLowerCase().includes("pro")) {
-					showQuotaModal();
-				}
-
-				if (error.message.includes("token seems invalid")) {
-					token.reset();
-				}
-
-				if (error.name !== "AbortError") {
-					addToast({ title: "Error", description: error.message, variant: "error" });
-				}
-			} else {
-				addToast({ title: "Error", description: "An unknown error occurred", variant: "error" });
-			}
-		} finally {
-			loading = false;
-			abortManager.clear();
-		}
-	}
-
 	function onKeydown(event: KeyboardEvent) {
 		if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
-			submit();
+			session.run();
+		}
+		if ((event.ctrlKey || event.metaKey) && event.altKey && event.key === "l") {
+			session.run("left");
+		}
+		if ((event.ctrlKey || event.metaKey) && event.altKey && event.key === "r") {
+			session.run("right");
 		}
 	}
 
@@ -191,14 +105,14 @@
 		}
 		const newConversation = { ...JSON.parse(JSON.stringify(session.project.conversations[0])), model };
 		session.project.conversations = [...session.project.conversations, newConversation];
-		generationStats = [generationStats[0], { latency: 0, generatedTokensCount: 0 }];
+		session.generationStats = [session.generationStats[0], { latency: 0, generatedTokensCount: 0 }];
 	}
 
 	function removeCompareModal(conversationIdx: number) {
 		session.project.conversations.splice(conversationIdx, 1)[0];
 		session.$ = session.$;
-		generationStats.splice(conversationIdx, 1)[0];
-		generationStats = generationStats;
+		session.generationStats.splice(conversationIdx, 1)[0];
+		session.generationStats = session.generationStats;
 	}
 </script>
 
@@ -307,8 +221,7 @@
 			<div
 				class="pointer-events-none absolute inset-0 flex flex-1 shrink-0 items-center justify-around gap-x-8 text-center text-sm text-gray-500 max-xl:hidden"
 			>
-				{#each generationStats as { latency, generatedTokensCount }, index}
-					{@const isLast = index === generationStats.length - 1}
+				{#each iterate(session.generationStats) as [{ latency, generatedTokensCount }, isLast]}
 					{@const baLeft = observed["bottom-actions"].rect.left}
 					{@const tceRight = observed["token-count-end"].offset.right}
 					<span
@@ -328,39 +241,115 @@
 					<IconCode />
 					{!viewCode ? "View Code" : "Hide Code"}
 				</button>
-				<button
-					onclick={() => {
-						viewCode = false;
-						loading ? abortManager.abortAll() : submit();
-					}}
-					type="button"
-					class="flex h-[39px] w-24 items-center justify-center gap-2 rounded-lg px-5 py-2.5 text-sm font-medium text-white focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:focus:ring-gray-700 {loading
-						? 'bg-red-900 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700'
-						: 'bg-black hover:bg-gray-900 dark:bg-blue-600 dark:hover:bg-blue-700'}"
-				>
-					{#if loading}
-						<div class="flex flex-none items-center gap-[3px]">
-							<span class="mr-2">
-								{#if session.project.conversations[0]?.streaming || session.project.conversations[1]?.streaming}
-									Stop
-								{:else}
-									Cancel
-								{/if}
+				<div class="flex">
+					<button
+						onclick={() => {
+							viewCode = false;
+							session.runOrStop();
+						}}
+						type="button"
+						class={[
+							"flex h-[39px]  items-center justify-center gap-2 rounded-l-lg px-3.5 py-2.5 text-sm font-medium text-white focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:focus:ring-gray-700",
+							multiple ? "rounded-l-lg" : "rounded-lg",
+							loading && "bg-red-900 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
+							!loading && "bg-black hover:bg-gray-900 dark:bg-blue-600 dark:hover:bg-blue-700",
+						]}
+					>
+						{#if loading}
+							<div class="flex flex-none items-center gap-[3px]">
+								<span class="mr-2">
+									{#if session.project.conversations[0]?.streaming || session.project.conversations[1]?.streaming}
+										Stop
+									{:else}
+										Cancel
+									{/if}
+								</span>
+								{#each { length: 3 } as _, i}
+									<div
+										class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
+										style="animation-delay: {(i + 1) * 0.25}s;"
+									></div>
+								{/each}
+							</div>
+						{:else}
+							{multiple ? "Run all" : "Run"}
+							<span
+								class="inline-flex gap-0.5 rounded-sm border border-white/20 bg-white/10 px-0.5 text-xs text-white/70"
+							>
+								{cmdOrCtrl}<span class="translate-y-px">↵</span>
 							</span>
-							{#each { length: 3 } as _, i}
-								<div
-									class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-100"
-									style="animation-delay: {(i + 1) * 0.25}s;"
-								></div>
-							{/each}
-						</div>
-					{:else}
-						Run <span
-							class="inline-flex gap-0.5 rounded-sm border border-white/20 bg-white/10 px-0.5 text-xs text-white/70"
-							>{isMac() ? "⌘" : "Ctrl"}<span class="translate-y-px">↵</span></span
+						{/if}
+					</button>
+					{#if multiple}
+						<div class="w-[1px] bg-gray-800" aria-hidden="true"></div>
+						<Popover
+							open
+							floatingConfig={{
+								computePosition: {
+									placement: "top-end",
+								},
+							}}
 						>
+							{#snippet children(popover)}
+								<button
+									class={[
+										"flex items-center justify-center gap-2 rounded-r-lg px-1.5 text-sm font-medium text-white",
+										"focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:focus:ring-gray-700",
+										loading && "bg-red-900 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
+										!loading && "bg-black hover:bg-gray-900 dark:bg-blue-600 dark:hover:bg-blue-700",
+									]}
+									{...popover.trigger}
+									disabled={loading}
+								>
+									<IconChevronDown />
+								</button>
+								<div
+									class={["flex-col rounded-lg bg-white px-2 py-1 shadow dark:bg-gray-800", popover.open && "flex"]}
+									{...popover.content}
+								>
+									<button
+										class="group py-1 text-sm"
+										onclick={() => {
+											viewCode = false;
+											session.runOrStop("left");
+											popover.open = false;
+										}}
+									>
+										<div
+											class="flex items-center gap-2 rounded p-1 group-hover:bg-gray-200 dark:group-hover:bg-gray-700"
+										>
+											<IconChatLeft />
+											<span class="mr-2">Only run left conversation</span>
+											<span class="ml-auto rounded-sm border border-white/20 bg-gray-500/10 px-0.5 text-xs">
+												{cmdOrCtrl}
+												{optOrAlt} L
+											</span>
+										</div>
+									</button>
+									<button
+										class="group py-1 text-sm"
+										onclick={() => {
+											viewCode = false;
+											session.runOrStop("right");
+											popover.open = false;
+										}}
+									>
+										<div
+											class="flex items-center gap-2 rounded p-1 group-hover:bg-gray-200 dark:group-hover:bg-gray-700"
+										>
+											<IconChatRight />
+											<span class="mr-2">Only run right conversation</span>
+											<span class="ml-auto rounded-sm border border-white/20 bg-gray-500/10 px-0.5 text-xs">
+												{cmdOrCtrl}
+												{optOrAlt} R
+											</span>
+										</div>
+									</button>
+								</div>
+							{/snippet}
+						</Popover>
 					{/if}
-				</button>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -370,7 +359,7 @@
 		<div class={[viewSettings && "max-md:fixed max-md:inset-0 max-md:bottom-20 max-md:backdrop-blur-lg"]}>
 			<div
 				class={[
-					"flex h-full flex-col  p-3 max-md:absolute max-md:inset-x-0 max-md:bottom-0",
+					"flex h-full flex-col p-3 max-md:absolute max-md:inset-x-0 max-md:bottom-0",
 					viewSettings ? "max-md:fixed" : "max-md:hidden",
 				]}
 			>
@@ -387,15 +376,17 @@
 								<IconCompare />
 								Compare
 							</button>
-							<a
-								href="https://huggingface.co/{session.project.conversations[0]?.model.id}?inference_provider={session
-									.project.conversations[0]?.provider}"
-								target="_blank"
-								class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-							>
-								<IconExternal class="text-2xs" />
-								Model page
-							</a>
+							{#if isConversationWithHFModel(session.project.conversations[0])}
+								<a
+									href="https://huggingface.co/{session.project.conversations[0]?.model.id}?inference_provider={session
+										.project.conversations[0]?.provider}"
+									target="_blank"
+									class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+								>
+									<IconExternal class="text-2xs" />
+									Model page
+								</a>
+							{/if}
 						</div>
 					</div>
 

src/lib/components/inference-playground/utils.ts

@@ -48,31 +48,14 @@ type OpenAICompletionMetadata = {
 
 type CompletionMetadata = HFCompletionMetadata | OpenAICompletionMetadata;
 
-function parseOpenAIMessages(
-	messages: ConversationMessage[],
-	systemMessage?: ConversationMessage
-): OpenAI.ChatCompletionMessageParam[] {
-	const parsedMessages: OpenAI.ChatCompletionMessageParam[] = [];
-
-	if (systemMessage?.content) {
-		parsedMessages.push({
-			role: "system",
-			content: systemMessage.content,
-		});
-	}
-
-	return [
-		...parsedMessages,
-		...messages.map(msg => ({
-			role: msg.role === "assistant" ? ("assistant" as const) : ("user" as const),
-			content: msg.content || "",
-		})),
-	];
-}
-
 function getCompletionMetadata(conversation: Conversation, signal?: AbortSignal): CompletionMetadata {
 	const { model, systemMessage } = conversation;
 
+	const messages = [
+		...(isSystemPromptSupported(model) && systemMessage.content?.length ? [systemMessage] : []),
+		...conversation.messages,
+	];
+
 	// Handle OpenAI-compatible models
 	if (isCustomModel(model)) {
 		const openai = new OpenAI({
@@ -88,17 +71,14 @@ function getCompletionMetadata(conversation: Conversation, signal?: AbortSignal)
 			type: "openai",
 			client: openai,
 			args: {
-				messages: parseOpenAIMessages(conversation.messages, systemMessage),
+				messages: messages.map(parseMessage) as OpenAI.ChatCompletionMessageParam[],
+				...conversation.config,
 				model: model.id,
 			},
 		};
 	}
 
 	// Handle HuggingFace models
-	const messages = [
-		...(isSystemPromptSupported(model) && systemMessage.content?.length ? [systemMessage] : []),
-		...conversation.messages,
-	];
 
 	return {
 		type: "huggingface",

src/lib/spells/abort-manager.svelte.ts

@@ -1,4 +1,5 @@
 import { onDestroy } from "svelte";
+import { createInit } from "./create-init.svelte";
 
 /**
  * Manages abort controllers, and aborts them when the component unmounts.
@@ -7,9 +8,17 @@ export class AbortManager {
 	private controllers: AbortController[] = [];
 
 	constructor() {
-		onDestroy(() => this.abortAll());
+		this.init();
 	}
 
+	init = createInit(() => {
+		try {
+			onDestroy(() => this.abortAll());
+		} catch {
+			// no-op
+		}
+	});
+
 	/**
 	 * Creates a new abort controller and adds it to the manager.
 	 */

src/lib/spells/create-init.svelte.ts

@@ -1,14 +1,18 @@
 export function createInit(cb: () => void) {
 	let called = $state(false);
 
-	return {
-		fn: () => {
-			if (called) return;
-			called = true;
-			cb();
-		},
-		get called() {
-			return called;
+	function init() {
+		if (called) return;
+		called = true;
+		cb();
+	}
+
+	return Object.defineProperties(init, {
+		called: {
+			get() {
+				return called;
+			},
+			enumerable: true,
 		},
-	};
+	}) as typeof init & { readonly called: boolean };
 }

src/lib/state/session.svelte.ts

@@ -1,4 +1,7 @@
 import { defaultGenerationConfig } from "$lib/components/inference-playground/generation-config-settings.js";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - Svelte imports are broken in TS files
+import { showQuotaModal } from "$lib/components/quota-modal.svelte";
 import { createInit } from "$lib/spells/create-init.svelte.js";
 import {
 	PipelineTag,
@@ -13,9 +16,18 @@ import { safeParse } from "$lib/utils/json.js";
 import typia from "typia";
 import { models } from "./models.svelte";
 import { checkpoints } from "./checkpoints.svelte";
+import { handleNonStreamingResponse, handleStreamingResponse } from "$lib/components/inference-playground/utils.js";
+import { AbortManager } from "$lib/spells/abort-manager.svelte";
+import { addToast } from "$lib/components/toaster.svelte.js";
+import { token } from "./token.svelte";
 
 const LOCAL_STORAGE_KEY = "hf_inference_playground_session";
 
+interface GenerationStatistics {
+	latency: number;
+	generatedTokensCount: number;
+}
+
 const startMessageUser: ConversationMessage = { role: "user", content: "" };
 const systemMessage: ConversationMessage = {
 	role: "system",
@@ -59,6 +71,13 @@ function getDefaults() {
 class SessionState {
 	#value = $state<Session>({} as Session);
 
+	generationStats = $state([{ latency: 0, generatedTokensCount: 0 }] as
+		| [GenerationStatistics]
+		| [GenerationStatistics, GenerationStatistics]);
+	generating = $state(false);
+
+	#abortManager = new AbortManager();
+
 	// Call once in layout
 	init = createInit(() => {
 		const { defaultConversation, defaultProject } = getDefaults();
@@ -111,6 +130,10 @@ class SessionState {
 		}
 
 		this.$ = savedSession;
+		session.generationStats = session.project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
+			| [GenerationStatistics]
+			| [GenerationStatistics, GenerationStatistics];
+		this.#abortManager.init();
 	});
 
 	constructor() {
@@ -190,6 +213,120 @@ class SessionState {
 		const projects = this.$.projects.map(p => (p.id === np.id ? np : p));
 		this.#setAnySession({ ...this.$, projects });
 	}
+
+	async #runInference(conversation: Conversation) {
+		const idx = session.project.conversations.indexOf(conversation);
+
+		const startTime = performance.now();
+
+		if (conversation.streaming) {
+			let addedMessage = false;
+			const streamingMessage = $state({ role: "assistant", content: "" });
+
+			await handleStreamingResponse(
+				conversation,
+				content => {
+					if (!streamingMessage) return;
+					streamingMessage.content = content;
+					if (!addedMessage) {
+						conversation.messages = [...conversation.messages, streamingMessage];
+						addedMessage = true;
+					}
+				},
+				this.#abortManager.createController()
+			);
+		} else {
+			const { message: newMessage, completion_tokens: newTokensCount } = await handleNonStreamingResponse(conversation);
+			conversation.messages = [...conversation.messages, newMessage];
+			const c = session.generationStats[idx];
+			if (c) c.generatedTokensCount += newTokensCount;
+		}
+
+		const endTime = performance.now();
+		const c = session.generationStats[idx];
+		if (c) c.latency = Math.round(endTime - startTime);
+	}
+
+	async run(conv: "left" | "right" | "both" | Conversation = "both") {
+		if (!token.value) {
+			token.showModal = true;
+			return;
+		}
+
+		const conversations = (() => {
+			if (typeof conv === "string") {
+				return session.project.conversations.filter((_, idx) => {
+					return conv === "both" || (conv === "left" ? idx === 0 : idx === 1);
+				});
+			}
+			return [conv];
+		})();
+
+		for (let idx = 0; idx < conversations.length; idx++) {
+			const conversation = conversations[idx];
+			if (!conversation || conversation.messages.at(-1)?.role !== "assistant") continue;
+
+			let prefix = "";
+			if (session.project.conversations.length === 2) {
+				prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
+			}
+			return addToast({
+				title: "Failed to run inference",
+				description: `${prefix}Messages must alternate between user/assistant roles.`,
+				variant: "error",
+			});
+		}
+
+		(document.activeElement as HTMLElement).blur();
+		session.generating = true;
+
+		try {
+			const promises = conversations.map(c => this.#runInference(c));
+			await Promise.all(promises);
+		} catch (error) {
+			for (const conversation of conversations) {
+				if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
+					conversation.messages.pop();
+					conversation.messages = [...conversation.messages];
+				}
+				// eslint-disable-next-line no-self-assign
+				session.$ = session.$;
+			}
+
+			if (error instanceof Error) {
+				const msg = error.message;
+				if (msg.toLowerCase().includes("montly") || msg.toLowerCase().includes("pro")) {
+					showQuotaModal();
+				}
+
+				if (error.message.includes("token seems invalid")) {
+					token.reset();
+				}
+
+				if (error.name !== "AbortError") {
+					addToast({ title: "Error", description: error.message, variant: "error" });
+				}
+			} else {
+				addToast({ title: "Error", description: "An unknown error occurred", variant: "error" });
+			}
+		} finally {
+			session.generating = false;
+			this.#abortManager.clear();
+		}
+	}
+
+	stopGenerating = () => {
+		this.#abortManager.abortAll();
+		session.generating = false;
+	};
+
+	runOrStop = (c?: Parameters<typeof this.run>[0]) => {
+		if (session.generating) {
+			this.stopGenerating();
+		} else {
+			this.run(c);
+		}
+	};
 }
 
 export const session = new SessionState();

src/lib/types.ts

@@ -71,6 +71,8 @@ export type CustomModel = {
 	_id: string;
 	endpointUrl: string;
 	accessToken?: string;
+	/** @default "text-generation" */
+	pipeline_tag?: PipelineTag;
 };
 
 export type Config = {
@@ -196,6 +198,11 @@ export enum PipelineTag {
 	ImageTextToText = "image-text-to-text",
 }
 
+export const pipelineTagLabel: Record<PipelineTag, string> = {
+	[PipelineTag.TextGeneration]: "Text→Text",
+	[PipelineTag.ImageTextToText]: "Image+Text→Text",
+};
+
 export type MaybeGetter<T> = T | (() => T);
 
 export type ValueOf<T> = T[keyof T];

src/lib/utils/array.ts

@@ -10,3 +10,37 @@ export function randomPick<T>(arr: T[]): T | undefined {
 export function edit<T>(arr: T[], index: number, newValue: T): T[] {
 	return arr.map((value, i) => (i === index ? newValue : value));
 }
+
+type IterateReturn<T> = [
+	T,
+	{
+		isFirst: boolean;
+		isLast: boolean;
+		array: T[];
+		index: number;
+		length: number;
+	},
+];
+
+/**
+ * Returns an an iterator that iterates over the given array.
+ * Each returned item contains helpful properties, such as
+ * `isFirst`, `isLast`, `array`, `index`, and `length`
+ *
+ * @param array The array to iterate over.
+ * @returns An iterator that iterates over the given array.
+ */
+export function* iterate<T>(array: T[]): Generator<IterateReturn<T>> {
+	for (let i = 0; i < array.length; i++) {
+		yield [
+			array[i]!,
+			{
+				isFirst: i === 0,
+				isLast: i === array.length - 1,
+				array,
+				index: i,
+				length: array.length,
+			},
+		];
+	}
+}

src/lib/utils/platform.ts

@@ -1,3 +1,6 @@
 export function isMac() {
 	return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
 }
+
+export const cmdOrCtrl = isMac() ? "⌘" : "Ctrl";
+export const optOrAlt = isMac() ? "⌥" : "Alt";

src/routes/+layout.svelte

@@ -12,7 +12,7 @@
 	}
 
 	let { children }: Props = $props();
-	session.init.fn();
+	session.init();
 </script>
 
 {@render children?.()}