refac

src/lib/components/chat/MessageInput/CommandSuggestionList.svelte

@@ -8,13 +8,19 @@
 
 	export let char = '';
 	export let query = '';
-	export let command: (payload: { id: string; label: string }) => void;
+	export let command: (payload: {
+		id: string;
+		label: string;
+		content?: string;
+		type?: string;
+	}) => void;
 
 	export let onSelect: (e: any) => void = () => {};
 	export let onUpload: (e: any) => void = () => {};
 	export let onCompact: () => void = () => {};
 	export let onStatus: () => void = () => {};
 	export let onFork: () => void = () => {};
+	export let onModel: () => void = () => {};
 	export let insertTextHandler: (text: string) => void = () => {};
 	export let canCompact: boolean | (() => boolean) = false;
 	export let compactDisabled: boolean | (() => boolean) = false;
@@ -93,16 +99,24 @@
 						const { type, data } = e;
 
 						if (type === 'prompt') {
-							insertTextHandler(data.content);
+							command({
+								id: data.command,
+								label: data.command,
+								content: data.content,
+								type: 'prompt'
+							});
 						} else if (type === 'command' && data.id === 'compact') {
-							insertTextHandler('');
+							command({ id: data.id, label: data.id });
 							onCompact();
 						} else if (type === 'command' && data.id === 'status') {
-							insertTextHandler('');
+							command({ id: data.id, label: data.id });
 							onStatus();
 						} else if (type === 'command' && data.id === 'fork') {
-							insertTextHandler('');
+							command({ id: data.id, label: data.id });
 							onFork();
+						} else if (type === 'command' && data.id === 'model') {
+							command({ id: data.id, label: data.id });
+							onModel();
 						} else if (type === 'skill') {
 							command({
 								id: `${data.id}|${data.name}`,

src/lib/components/chat/MessageInput/Commands/SlashCommands.svelte

@@ -4,6 +4,7 @@
 	import { getSkillItems } from '$lib/apis/skills';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Cube from '$lib/components/icons/Cube.svelte';
+	import Sparkles from '$lib/components/icons/Sparkles.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -38,7 +39,8 @@
 			: []),
 		...(canStatus && 'status'.startsWith(query.toLowerCase())
 			? [{ type: 'command', data: { id: 'status' } }]
-			: [])
+			: []),
+		...('model'.startsWith(query.toLowerCase()) ? [{ type: 'command', data: { id: 'model' } }] : [])
 	];
 
 	$: filteredPrompts = prompts
@@ -266,6 +268,32 @@
 					</span>
 				</button>
 			</Tooltip>
+		{:else if item.data.id === 'model'}
+			<Tooltip content="Show or switch the current model." placement="top">
+				<button
+					type="button"
+					aria-label="Model: show or switch the current model."
+					class="slash-command-row flex items-center gap-2 w-full h-6 px-2 rounded-xl text-xs text-left transition-colors duration-75
+						{commandIdx === selectedIdx ? 'app-interactive-active' : ''}"
+					on:mousedown={(e) => e.preventDefault()}
+					on:click={() => {
+						onSelect(item);
+					}}
+					on:mouseenter={() => {
+						selectedIdx = commandIdx;
+					}}
+					on:focus={() => {}}
+					data-selected={commandIdx === selectedIdx}
+				>
+					<span class="app-icon-muted flex items-center justify-center w-4 shrink-0">
+						<Sparkles className="size-3.5" />
+					</span>
+					<span class="flex-1 min-w-0 flex items-baseline gap-1.5 overflow-hidden">
+						<span class="truncate">Model</span>
+						<span class="app-muted text-[0.625rem] truncate shrink-0">/model</span>
+					</span>
+				</button>
+			</Tooltip>
 		{/if}
 	{/each}
 {/if}