extra params (#95)

eslint.config.mts

@@ -61,6 +61,8 @@ export default ts.config(
 				},
 			],
 
+			"@typescript-eslint/no-this-alias": "off",
+
 			"object-shorthand": ["error", "always"],
 			"svelte/no-at-html-tags": "off",
 			"svelte/require-each-key": "off",

package.json

@@ -59,7 +59,7 @@
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"runed": "^0.25.0",
 		"shiki": "^3.4.0",
-		"svelte": "^5.36.12",
+		"svelte": "^5.36.16",
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.0.2",
 		"tailwindcss": "^4.0.9",

pnpm-lock.yaml

@@ -13,7 +13,7 @@ importers:
         version: 2.0.3
       eslint-plugin-svelte:
         specifier: ^3.11.0
-        version: 3.11.0(eslint@9.22.0(jiti@2.4.2))(svelte@5.36.12)
+        version: 3.11.0(eslint@9.22.0(jiti@2.4.2))(svelte@5.36.16)
       remult:
         specifier: ^3.0.2
         version: 3.0.2
@@ -62,16 +62,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.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))
+        version: 3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(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.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))
+        version: 5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))
       '@sveltejs/kit':
         specifier: ^2.5.27
-        version: 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+        version: 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0
-        version: 4.0.4(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+        version: 4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@4.0.9)
@@ -83,7 +83,7 @@ importers:
         version: 6.6.3
       '@testing-library/svelte':
         specifier: ^5.2.4
-        version: 5.2.8(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)
+        version: 5.2.8(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)
       '@types/node':
         specifier: ^22.14.1
         version: 22.14.1
@@ -122,7 +122,7 @@ importers:
         version: 26.1.0
       melt:
         specifier: ^0.36.0
-        version: 0.36.0(@floating-ui/dom@1.6.13)(svelte@5.36.12)
+        version: 0.36.0(@floating-ui/dom@1.6.13)(svelte@5.36.16)
       openai:
         specifier: ^4.90.0
         version: 4.90.0(ws@8.18.2)
@@ -137,22 +137,22 @@ importers:
         version: 3.5.3
       prettier-plugin-svelte:
         specifier: ^3.4.0
-        version: 3.4.0(prettier@3.5.3)(svelte@5.36.12)
+        version: 3.4.0(prettier@3.5.3)(svelte@5.36.16)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.11(prettier-plugin-svelte@3.4.0(prettier@3.5.3)(svelte@5.36.12))(prettier@3.5.3)
+        version: 0.6.11(prettier-plugin-svelte@3.4.0(prettier@3.5.3)(svelte@5.36.16))(prettier@3.5.3)
       runed:
         specifier: ^0.25.0
-        version: 0.25.0(svelte@5.36.12)
+        version: 0.25.0(svelte@5.36.16)
       shiki:
         specifier: ^3.4.0
         version: 3.4.0
       svelte:
-        specifier: ^5.36.12
-        version: 5.36.12
+        specifier: ^5.36.16
+        version: 5.36.16
       svelte-check:
         specifier: ^4.0.0
-        version: 4.1.5(picomatch@4.0.2)(svelte@5.36.12)(typescript@5.8.2)
+        version: 4.1.5(picomatch@4.0.2)(svelte@5.36.16)(typescript@5.8.2)
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.0.2
@@ -173,7 +173,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.36.12)
+        version: 22.1.0(svelte@5.36.16)
       vite:
         specifier: ^5.4.4
         version: 5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)
@@ -182,7 +182,7 @@ importers:
         version: 3.1.4(@types/node@22.14.1)(@vitest/browser@3.1.4)(jsdom@26.1.0)(lightningcss@1.29.1)
       vitest-browser-svelte:
         specifier: ^0.1.0
-        version: 0.1.0(@vitest/browser@3.1.4)(svelte@5.36.12)(vitest@3.1.4)
+        version: 0.1.0(@vitest/browser@3.1.4)(svelte@5.36.16)(vitest@3.1.4)
 
 packages:
 
@@ -2844,8 +2844,8 @@ packages:
       svelte:
         optional: true
 
-  svelte@5.36.12:
-    resolution: {integrity: sha512-c3mWT+b0yBLl3gPGSHiy4pdSQCsPNTjLC0tVoOhrGJ6PPfCzD/RQpAmAfJtQZ304CAae2ph+L3C4aqds3R3seQ==}
+  svelte@5.36.16:
+    resolution: {integrity: sha512-C7HnyISfvZEofs7T4p7+bmjrbQlhd6lZfgV2tLYg6Eb3nUFM/Zu9dGlSg+GWbUBU/WPw6zDPOFNZAx9qXsoCkg==}
     engines: {node: '>=18'}
 
   symbol-tree@3.2.4:
@@ -3927,22 +3927,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.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))':
+  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))':
     dependencies:
-      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(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.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))':
+  '@sveltejs/adapter-node@5.2.12(@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(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.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+      '@sveltejs/kit': 2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
       rollup: 4.34.9
 
-  '@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))':
+  '@sveltejs/kit@2.18.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -3954,26 +3954,26 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
-      svelte: 5.36.12
+      svelte: 5.36.16
       vite: 5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+      '@sveltejs/vite-plugin-svelte': 4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
       debug: 4.4.0
-      svelte: 5.36.12
+      svelte: 5.36.16
       vite: 5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))':
+  '@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)))(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
-      svelte: 5.36.12
+      svelte: 5.36.16
       vite: 5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)
       vitefu: 1.0.6(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))
     transitivePeerDependencies:
@@ -4066,10 +4066,10 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/svelte@5.2.8(svelte@5.36.12)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)':
+  '@testing-library/svelte@5.2.8(svelte@5.36.16)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.36.12
+      svelte: 5.36.16
     optionalDependencies:
       vite: 5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)
       vitest: 3.1.4(@types/node@22.14.1)(@vitest/browser@3.1.4)(jsdom@26.1.0)(lightningcss@1.29.1)
@@ -4618,7 +4618,7 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.1(eslint@9.22.0(jiti@2.4.2))
 
-  eslint-plugin-svelte@3.11.0(eslint@9.22.0(jiti@2.4.2))(svelte@5.36.12):
+  eslint-plugin-svelte@3.11.0(eslint@9.22.0(jiti@2.4.2))(svelte@5.36.16):
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@9.22.0(jiti@2.4.2))
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -4630,9 +4630,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.2
-      svelte-eslint-parser: 1.3.0(svelte@5.36.12)
+      svelte-eslint-parser: 1.3.0(svelte@5.36.16)
     optionalDependencies:
-      svelte: 5.36.12
+      svelte: 5.36.16
     transitivePeerDependencies:
       - ts-node
 
@@ -5207,14 +5207,14 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
 
-  melt@0.36.0(@floating-ui/dom@1.6.13)(svelte@5.36.12):
+  melt@0.36.0(@floating-ui/dom@1.6.13)(svelte@5.36.16):
     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.36.12)
-      svelte: 5.36.12
+      runed: 0.23.4(svelte@5.36.16)
+      svelte: 5.36.16
 
   merge2@1.4.1: {}
 
@@ -5473,16 +5473,16 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier-plugin-svelte@3.4.0(prettier@3.5.3)(svelte@5.36.12):
+  prettier-plugin-svelte@3.4.0(prettier@3.5.3)(svelte@5.36.16):
     dependencies:
       prettier: 3.5.3
-      svelte: 5.36.12
+      svelte: 5.36.16
 
-  prettier-plugin-tailwindcss@0.6.11(prettier-plugin-svelte@3.4.0(prettier@3.5.3)(svelte@5.36.12))(prettier@3.5.3):
+  prettier-plugin-tailwindcss@0.6.11(prettier-plugin-svelte@3.4.0(prettier@3.5.3)(svelte@5.36.16))(prettier@3.5.3):
     dependencies:
       prettier: 3.5.3
     optionalDependencies:
-      prettier-plugin-svelte: 3.4.0(prettier@3.5.3)(svelte@5.36.12)
+      prettier-plugin-svelte: 3.4.0(prettier@3.5.3)(svelte@5.36.16)
 
   prettier@3.5.3: {}
 
@@ -5623,15 +5623,15 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
-  runed@0.23.4(svelte@5.36.12):
+  runed@0.23.4(svelte@5.36.16):
     dependencies:
       esm-env: 1.2.2
-      svelte: 5.36.12
+      svelte: 5.36.16
 
-  runed@0.25.0(svelte@5.36.12):
+  runed@0.25.0(svelte@5.36.16):
     dependencies:
       esm-env: 1.2.2
-      svelte: 5.36.12
+      svelte: 5.36.16
 
   rxjs@7.8.2:
     dependencies:
@@ -5761,19 +5761,19 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.1.5(picomatch@4.0.2)(svelte@5.36.12)(typescript@5.8.2):
+  svelte-check@4.1.5(picomatch@4.0.2)(svelte@5.36.16)(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.36.12
+      svelte: 5.36.16
       typescript: 5.8.2
     transitivePeerDependencies:
       - picomatch
 
-  svelte-eslint-parser@1.3.0(svelte@5.36.12):
+  svelte-eslint-parser@1.3.0(svelte@5.36.16):
     dependencies:
       eslint-scope: 8.3.0
       eslint-visitor-keys: 4.2.0
@@ -5782,9 +5782,9 @@ snapshots:
       postcss-scss: 4.0.9(postcss@8.5.3)
       postcss-selector-parser: 7.1.0
     optionalDependencies:
-      svelte: 5.36.12
+      svelte: 5.36.16
 
-  svelte@5.36.12:
+  svelte@5.36.16:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -5956,7 +5956,7 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  unplugin-icons@22.1.0(svelte@5.36.12):
+  unplugin-icons@22.1.0(svelte@5.36.16):
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@iconify/utils': 2.3.0
@@ -5964,7 +5964,7 @@ snapshots:
       local-pkg: 1.1.1
       unplugin: 2.2.0
     optionalDependencies:
-      svelte: 5.36.12
+      svelte: 5.36.16
     transitivePeerDependencies:
       - supports-color
 
@@ -6040,10 +6040,10 @@ snapshots:
     optionalDependencies:
       vite: 5.4.14(@types/node@22.14.1)(lightningcss@1.29.1)
 
-  vitest-browser-svelte@0.1.0(@vitest/browser@3.1.4)(svelte@5.36.12)(vitest@3.1.4):
+  vitest-browser-svelte@0.1.0(@vitest/browser@3.1.4)(svelte@5.36.16)(vitest@3.1.4):
     dependencies:
       '@vitest/browser': 3.1.4(playwright@1.52.0)(vite@5.4.14(@types/node@22.14.1)(lightningcss@1.29.1))(vitest@3.1.4)
-      svelte: 5.36.12
+      svelte: 5.36.16
       vitest: 3.1.4(@types/node@22.14.1)(@vitest/browser@3.1.4)(jsdom@26.1.0)(lightningcss@1.29.1)
 
   vitest@3.1.4(@types/node@22.14.1)(@vitest/browser@3.1.4)(jsdom@26.1.0)(lightningcss@1.29.1):

src/lib/components/dialog.svelte

@@ -27,7 +27,17 @@
 	});
 </script>
 
-<dialog bind:this={dialog} onclose={onClose}>
+<dialog
+	bind:this={dialog}
+	oncancel={e => {
+		e.preventDefault();
+		onClose?.();
+	}}
+	onclose={e => {
+		e.preventDefault();
+		onClose?.();
+	}}
+>
 	{#if open}
 		<form class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85" onsubmit={onSubmit}>
 			<div

src/lib/components/inference-playground/extra-params-modal.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" module>
+	let open = $state(false);
+
+	export function openExtraParamsModal() {
+		open = true;
+	}
+</script>
+
+<script lang="ts">
+	import type { ConversationClass } from "$lib/state/conversations.svelte.js";
+	import { createFieldValidation } from "$lib/utils/form.svelte";
+	import { deleteKey, entries, renameKey } from "$lib/utils/object.svelte";
+	import { onchange } from "$lib/utils/template.js";
+	import IconX from "~icons/carbon/close";
+	import Dialog from "../dialog.svelte";
+	import InfoPopover from "../info-popover.svelte";
+	import { watch } from "runed";
+
+	interface Props {
+		conversation: ConversationClass;
+	}
+
+	let { conversation }: Props = $props();
+
+	type Field = {
+		value: string;
+	} & ReturnType<typeof createFieldValidation>;
+
+	let fields = $state<Record<string, Field>>({});
+
+	watch(
+		() => open,
+		() => {
+			if (!open) return;
+			// Sync with conversation.extraParams
+			fields = Object.fromEntries(
+				entries(conversation.data.extraParams ?? {}).map(([key, value]) => [
+					key,
+					Object.assign(createFieldValidation({ validate: validateParamValue }), { value }),
+				]),
+			);
+		},
+	);
+
+	function validateParamValue(v: string) {
+		if (!v) return "Value cannot be empty";
+		try {
+			JSON.parse(v);
+		} catch {
+			return "Value is not valid JSON";
+		}
+	}
+
+	async function close() {
+		fields = {};
+		open = false;
+	}
+
+	async function save() {
+		Object.values(fields).forEach(f => f.validate());
+		if (!Object.values(fields).every(f => f.valid)) return;
+		open = false;
+		// Set conversation.extraParams
+		conversation.update({
+			extraParams: Object.fromEntries(entries(fields).map(([key, field]) => [key, field.value])),
+		});
+	}
+</script>
+
+<Dialog
+	class="!w-2xl max-w-[90vw]"
+	title="Edit Extra Parameters"
+	{open}
+	onClose={() => {
+		close();
+	}}
+	onSubmit={e => {
+		e.preventDefault();
+	}}
+>
+	<div class="flex items-center gap-2">
+		<h2 class="font-semibold">Parameters</h2>
+		<InfoPopover content="These parameters are passed as JSON parameters, as is." />
+		<button
+			type="button"
+			class="btn-sm ml-auto flex items-center justify-center rounded-md"
+			onclick={() => {
+				const prevLength = Object.keys(fields).length ?? 0;
+				const key = `newParam${prevLength + 1}`;
+				fields[key] = Object.assign(createFieldValidation({ validate: validateParamValue }), { value: "" });
+			}}
+		>
+			Add parameter
+		</button>
+	</div>
+
+	<div class="mt-4 flex flex-col gap-4">
+		{#each entries(fields) as [key, field]}
+			<div class="flex items-start gap-2">
+				<label class="flex grow flex-col gap-1">
+					<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Key</p>
+					<input
+						type="text"
+						class="w-full rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+						value={key}
+						{...onchange(k => (fields = renameKey(fields, key, k)))}
+					/>
+				</label>
+				<label class="flex grow flex-col gap-1">
+					<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Value</p>
+					<input
+						type="text"
+						class="w-full rounded-md border border-gray-300 bg-white px-2 py-1 font-mono text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+						{...field.attrs}
+						bind:value={field.value}
+					/>
+					{#if field.msg}
+						<p class="text-xs text-red-500">{field.msg}</p>
+					{/if}
+				</label>
+				<button
+					type="button"
+					class="btn-xs mt-5 rounded-md text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500"
+					onclick={() => (fields = deleteKey(fields, key))}
+				>
+					<IconX />
+				</button>
+			</div>
+		{:else}
+			<p class="text-sm text-gray-500">No parameters defined yet.</p>
+		{/each}
+	</div>
+
+	{#snippet footer()}
+		<button class="btn ml-auto" onclick={save}> Save </button>
+	{/snippet}
+</Dialog>

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

@@ -6,7 +6,9 @@
 	import { watch } from "runed";
 	import IconX from "~icons/carbon/close";
 	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generation-config-settings.js";
-	import StructuredOutputModal from "./structured-output-modal.svelte";
+	import StructuredOutputModal, { openStructuredOutputModal } from "./structured-output-modal.svelte";
+	import ExtraParamsModal, { openExtraParamsModal } from "./extra-params-modal.svelte";
+	import { cn } from "$lib/utils/cn.js";
 
 	interface Props {
 		conversation: ConversationClass;
@@ -42,7 +44,7 @@
 		});
 	}
 
-	let editingStructuredOutput = $state(false);
+	const extraParamsLen = $derived(Object.keys(conversation.data.extraParams ?? {}).length);
 </script>
 
 <div class="flex flex-col gap-y-7 {classNames}">
@@ -115,13 +117,27 @@
 					class="peer sr-only"
 					id="structured-output"
 				/>
-				<button class="btn-mini" type="button" onclick={() => (editingStructuredOutput = true)}> edit </button>
+				<button class="btn-mini" type="button" onclick={openStructuredOutputModal}> edit </button>
 				<div
 					class="peer relative h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-black peer-focus:outline-hidden after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
 				></div>
 			</div>
 		</label>
 	{/if}
+
+	<div class="mt-2 flex items-center gap-2">
+		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Extra parameters</span>
+		<span
+			class={cn(
+				"rounded-md bg-black px-2 py-1 text-xs font-semibold text-white dark:bg-blue-600",
+				!extraParamsLen && "hidden",
+			)}
+		>
+			{extraParamsLen}
+		</span>
+		<button class="btn-mini ml-auto" type="button" onclick={openExtraParamsModal}>edit</button>
+	</div>
 </div>
 
-<StructuredOutputModal {conversation} bind:open={editingStructuredOutput} />
+<StructuredOutputModal {conversation} />
+<ExtraParamsModal {conversation} />

src/lib/components/inference-playground/structured-output-modal.svelte

@@ -1,3 +1,11 @@
+<script lang="ts" module>
+	let open = $state(false);
+
+	export function openStructuredOutputModal() {
+		open = true;
+	}
+</script>
+
 <script lang="ts">
 	import { isDark } from "$lib/spells/is-dark.svelte";
 	import { Synced } from "$lib/spells/synced.svelte";
@@ -14,10 +22,9 @@
 
 	interface Props {
 		conversation: ConversationClass;
-		open: boolean;
 	}
 
-	let { conversation, open = $bindable(false) }: Props = $props();
+	let { conversation }: Props = $props();
 
 	let tempSchema = $derived(conversation.data.structuredOutput?.schema ?? "");
 
@@ -124,122 +131,116 @@
 	</div>
 
 	{#if radioGroup.value === "form"}
-		<div class="fade-y -mx-2 mt-2 -mb-4 max-h-200 space-y-4 overflow-auto px-2 py-4 text-left">
+		<div class="fade-y -mx-2 -mb-4 max-h-200 space-y-4 overflow-auto px-2 py-4 text-left">
 			<!-- Properties Section -->
-			<div class="border-t border-gray-200 pt-4 dark:border-gray-700">
-				<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Properties</h3>
-				{#if schemaObj.current.schema?.properties}
-					<div class="mt-3 space-y-3">
-						{#each Object.entries(schemaObj.current.schema.properties) as [propertyName, propertyDefinition]}
-							<SchemaProperty
-								bind:name={
-									() => propertyName,
-									value => {
-										const updatedProperties = renameKey(
-											schemaObj.current.schema?.properties ?? {},
-											propertyName,
-											value,
-										);
-										updateSchemaNested({ properties: updatedProperties });
-									}
+			<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Properties</h3>
+			{#if schemaObj.current.schema?.properties}
+				<div class="mt-3 space-y-3">
+					{#each Object.entries(schemaObj.current.schema.properties) as [propertyName, propertyDefinition]}
+						<SchemaProperty
+							bind:name={
+								() => propertyName,
+								value => {
+									const updatedProperties = renameKey(schemaObj.current.schema?.properties ?? {}, propertyName, value);
+									updateSchemaNested({ properties: updatedProperties });
 								}
-								bind:definition={
-									() => propertyDefinition,
-									v => {
-										const updatedProperties = { ...schemaObj.current.schema?.properties };
-										if (updatedProperties && updatedProperties[propertyName]) {
-											updatedProperties[propertyName] = v;
-											updateSchemaNested({ properties: updatedProperties });
-										}
+							}
+							bind:definition={
+								() => propertyDefinition,
+								v => {
+									const updatedProperties = { ...schemaObj.current.schema?.properties };
+									if (updatedProperties && updatedProperties[propertyName]) {
+										updatedProperties[propertyName] = v;
+										updateSchemaNested({ properties: updatedProperties });
 									}
 								}
-								bind:required={
-									() => schemaObj.current.schema?.required?.includes(propertyName) ?? false,
-									v => {
-										let updatedRequired = [...(schemaObj.current.schema?.required || [])];
-										if (v) {
-											if (!updatedRequired.includes(propertyName)) {
-												updatedRequired.push(propertyName);
-											}
-										} else {
-											updatedRequired = updatedRequired.filter(name => name !== name);
+							}
+							bind:required={
+								() => schemaObj.current.schema?.required?.includes(propertyName) ?? false,
+								v => {
+									let updatedRequired = [...(schemaObj.current.schema?.required || [])];
+									if (v) {
+										if (!updatedRequired.includes(propertyName)) {
+											updatedRequired.push(propertyName);
 										}
-										updateSchemaNested({ required: updatedRequired });
+									} else {
+										updatedRequired = updatedRequired.filter(name => name !== name);
 									}
+									updateSchemaNested({ required: updatedRequired });
 								}
-								onDelete={() => {
-									const updatedProperties = { ...schemaObj.current.schema?.properties };
-									if (!updatedProperties || !updatedProperties[propertyName]) return;
-									delete updatedProperties[propertyName];
-									updateSchemaNested({ properties: updatedProperties });
-								}}
-							/>
-						{:else}
-							<p class="mt-3 text-sm text-gray-500">No properties defined yet.</p>
-						{/each}
-					</div>
-				{:else}
-					<p class="mt-3 text-sm text-gray-500">No properties defined yet.</p>
-				{/if}
+							}
+							onDelete={() => {
+								const updatedProperties = { ...schemaObj.current.schema?.properties };
+								if (!updatedProperties || !updatedProperties[propertyName]) return;
+								delete updatedProperties[propertyName];
+								updateSchemaNested({ properties: updatedProperties });
+							}}
+						/>
+					{:else}
+						<p class="mt-3 text-sm text-gray-500">No properties defined yet.</p>
+					{/each}
+				</div>
+			{:else}
+				<p class="mt-3 text-sm text-gray-500">No properties defined yet.</p>
+			{/if}
 
-				<button
-					type="button"
-					class="btn-sm mt-4 flex w-full items-center justify-center rounded-md"
-					onclick={() => {
-						const newPropertyName = `newProperty${Object.keys(schemaObj.current.schema?.properties || {}).length + 1}`;
-						const updatedProperties = {
-							...(schemaObj.current.schema?.properties || {}),
-							[newPropertyName]: { type: "string" as const },
-						};
-						updateSchemaNested({ properties: updatedProperties });
-					}}
-				>
-					Add property
-				</button>
-			</div>
+			<button
+				type="button"
+				class="btn-sm mt-4 flex w-full items-center justify-center rounded-md"
+				onclick={() => {
+					const newPropertyName = `newProperty${Object.keys(schemaObj.current.schema?.properties || {}).length + 1}`;
+					const updatedProperties = {
+						...(schemaObj.current.schema?.properties || {}),
+						[newPropertyName]: { type: "string" as const },
+					};
+					updateSchemaNested({ properties: updatedProperties });
+				}}
+			>
+				Add property
+			</button>
+		</div>
 
-			<!-- Strict and Additional Properties -->
-			<div class="border-t border-gray-200 pt-4 dark:border-gray-700">
-				<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Options</h3>
-				<div class="mt-3 space-y-2">
-					<div class="relative flex items-start">
-						<div class="flex h-5 items-center">
-							<input
-								id="additionalProperties"
-								name="additionalProperties"
-								type="checkbox"
-								class="h-4 w-4 rounded border border-gray-300 bg-white text-blue-600 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800"
-								checked={schemaObj.current.schema?.additionalProperties !== undefined
-									? schemaObj.current.schema.additionalProperties
-									: true}
-								onchange={e => updateSchemaNested({ additionalProperties: e.currentTarget.checked })}
-							/>
-						</div>
-						<div class="ml-3 text-sm">
-							<label for="additionalProperties" class="font-medium text-gray-700 dark:text-gray-300">
-								Allow additional properties
-							</label>
-							<p id="additionalProperties-description" class="text-gray-500">
-								If unchecked, only properties defined in the schema are allowed.
-							</p>
-						</div>
+		<!-- Strict and Additional Properties -->
+		<div class="border-t border-gray-200 pt-4 dark:border-gray-700">
+			<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Options</h3>
+			<div class="mt-3 space-y-2">
+				<div class="relative flex items-start">
+					<div class="flex h-5 items-center">
+						<input
+							id="additionalProperties"
+							name="additionalProperties"
+							type="checkbox"
+							class="h-4 w-4 rounded border border-gray-300 bg-white text-blue-600 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800"
+							checked={schemaObj.current.schema?.additionalProperties !== undefined
+								? schemaObj.current.schema.additionalProperties
+								: true}
+							onchange={e => updateSchemaNested({ additionalProperties: e.currentTarget.checked })}
+						/>
+					</div>
+					<div class="ml-3 text-sm">
+						<label for="additionalProperties" class="font-medium text-gray-700 dark:text-gray-300">
+							Allow additional properties
+						</label>
+						<p id="additionalProperties-description" class="text-gray-500">
+							If unchecked, only properties defined in the schema are allowed.
+						</p>
 					</div>
+				</div>
 
-					<div class="relative flex items-start">
-						<div class="flex h-5 items-center">
-							<input
-								id="strict"
-								name="strict"
-								type="checkbox"
-								class="h-4 w-4 rounded border border-gray-300 bg-white text-blue-600 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800"
-								checked={schemaObj.current.strict !== undefined ? schemaObj.current.strict : false}
-								onchange={e => updateSchema({ strict: e.currentTarget.checked })}
-							/>
-						</div>
-						<div class="ml-3 text-sm">
-							<label for="strict" class="font-medium text-gray-700 dark:text-gray-300">Strict mode</label>
-							<p id="strict-description" class="text-gray-500">Enforces stricter validation rules.</p>
-						</div>
+				<div class="relative flex items-start">
+					<div class="flex h-5 items-center">
+						<input
+							id="strict"
+							name="strict"
+							type="checkbox"
+							class="h-4 w-4 rounded border border-gray-300 bg-white text-blue-600 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800"
+							checked={schemaObj.current.strict !== undefined ? schemaObj.current.strict : false}
+							onchange={e => updateSchema({ strict: e.currentTarget.checked })}
+						/>
+					</div>
+					<div class="ml-3 text-sm">
+						<label for="strict" class="font-medium text-gray-700 dark:text-gray-300">Strict mode</label>
+						<p id="strict-description" class="text-gray-500">Enforces stricter validation rules.</p>
 					</div>
 				</div>
 			</div>

src/lib/components/info-popover.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { cn } from "$lib/utils/cn.js";
+	import { Popover } from "melt/builders";
+	import InfoIcon from "~icons/carbon/information";
+
+	type Props = {
+		class?: string;
+		content?: string;
+	};
+
+	let { class: classes, content }: Props = $props();
+
+	const popover = new Popover({
+		floatingConfig: {
+			computePosition: { placement: "top" },
+		},
+	});
+</script>
+
+<button
+	type="button"
+	class={cn("btn-xs rounded-md text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-500", classes)}
+	{...popover.trigger}
+>
+	<InfoIcon />
+</button>
+
+<div
+	{...popover.content}
+	class="max-w-xs overflow-visible rounded-xl bg-white p-0 text-center shadow-xl dark:bg-gray-700"
+>
+	<div {...popover.arrow} class="!z-10 size-2 rounded-tl !bg-white dark:!bg-gray-700"></div>
+	<p class="px-4 py-1 text-sm text-gray-700 dark:text-white">{content}</p>
+</div>
+
+<style>
+	[data-melt-popover-content] {
+		border: 0;
+
+		position: absolute;
+		pointer-events: none;
+		opacity: 0;
+
+		transform: scale(0.9);
+
+		transition: 0.3s;
+		transition-property: opacity, transform;
+	}
+
+	[data-melt-popover-content][data-open] {
+		pointer-events: auto;
+		opacity: 1;
+
+		transform: scale(1);
+	}
+</style>

src/lib/state/conversations.svelte.ts

@@ -29,6 +29,9 @@ export class ConversationEntity {
 	@Fields.json()
 	config: GenerationConfig = {};
 
+	@Fields.json()
+	extraParams?: Record<string, string>;
+
 	@Fields.json()
 	structuredOutput?: {
 		enabled?: boolean;

src/lib/types.ts

@@ -15,7 +15,7 @@ export type Conversation = {
 	systemMessage: ConversationMessage;
 	streaming: boolean;
 	provider?: string;
-} & Pick<ConversationEntityMembers, "structuredOutput">;
+} & Pick<ConversationEntityMembers, "structuredOutput" | "extraParams">;
 
 export type ConversationWithCustomModel = Conversation & {
 	model: CustomModel;

src/lib/utils/business.svelte.ts

@@ -127,8 +127,21 @@ async function getCompletionMetadata(
 	];
 	const parsed = await Promise.all(messages.map(parseMessage));
 
+	const extraParams = data.extraParams
+		? Object.fromEntries(
+				Object.entries(data.extraParams).map(([key, value]) => {
+					try {
+						return [key, JSON.parse(value as string)];
+					} catch {
+						return [key, value];
+					}
+				}),
+			)
+		: {};
+
 	const baseArgs = {
 		...data.config,
+		...extraParams,
 		messages: parsed,
 		model: model.id,
 		response_format: getResponseFormatObj(conversation),

src/lib/utils/form.svelte.ts

@@ -1,3 +1,6 @@
+import { createAttachmentKey } from "svelte/attachments";
+import type { HTMLInputAttributes } from "svelte/elements";
+
 export type CreateFieldValidationArgs = {
 	validate: (v: string) => string | void | undefined;
 };
@@ -6,11 +9,11 @@ export function createFieldValidation(args: CreateFieldValidationArgs) {
 	let valid = $state(true);
 	let msg = $state<string>();
 
-	const onblur = (e: Event & { currentTarget: HTMLInputElement }) => {
-		const v = e.currentTarget?.value;
-		const m = args.validate(v);
-		valid = !m;
-		msg = m ?? undefined;
+	const key = createAttachmentKey();
+	let node: HTMLInputElement;
+
+	const onblur = (_e: Event & { currentTarget: HTMLInputElement }) => {
+		validate();
 	};
 
 	const oninput = (e: Event & { currentTarget: HTMLInputElement }) => {
@@ -20,7 +23,15 @@ export function createFieldValidation(args: CreateFieldValidationArgs) {
 		msg = m ? m : undefined;
 	};
 
+	const validate = () => {
+		const v = node.value;
+		const m = args.validate(v);
+		valid = !m;
+		msg = m ? m : undefined;
+	};
+
 	return {
+		validate,
 		get valid() {
 			return valid;
 		},
@@ -34,6 +45,9 @@ export function createFieldValidation(args: CreateFieldValidationArgs) {
 		attrs: {
 			onblur,
 			oninput,
-		},
+			[key]: el => {
+				node = el;
+			},
+		} as const satisfies HTMLInputAttributes,
 	};
 }

src/lib/utils/object.svelte.ts

@@ -102,3 +102,15 @@ export function renameKey<T extends object>(
 	}
 	return result;
 }
+
+export function unmutableSet<T extends object>(obj: T, key: keyof T, value: T[keyof T]) {
+	const newObj = { ...obj };
+	newObj[key] = value;
+	return newObj;
+}
+
+export function deleteKey<T extends object>(obj: T, key: keyof T) {
+	const newObj = { ...obj };
+	delete newObj[key];
+	return newObj;
+}