refac

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

@@ -14,16 +14,21 @@
 	export let onUpload: (e: any) => void = () => {};
 	export let onCompact: () => void = () => {};
 	export let onStatus: () => void = () => {};
+	export let onFork: () => void = () => {};
 	export let insertTextHandler: (text: string) => void = () => {};
 	export let canCompact: boolean | (() => boolean) = false;
 	export let compactDisabled: boolean | (() => boolean) = false;
 	export let canStatus: boolean | (() => boolean) = false;
+	export let canFork: boolean | (() => boolean) = false;
+	export let forkDisabled: boolean | (() => boolean) = false;
 	export let contextUsage = null;
 
 	$: compactAvailable = typeof canCompact === 'function' ? canCompact() : canCompact;
 	$: isCompactDisabled =
 		typeof compactDisabled === 'function' ? compactDisabled() : compactDisabled;
 	$: statusAvailable = typeof canStatus === 'function' ? canStatus() : canStatus;
+	$: forkAvailable = typeof canFork === 'function' ? canFork() : canFork;
+	$: isForkDisabled = typeof forkDisabled === 'function' ? forkDisabled() : forkDisabled;
 	$: resolvedContextUsage = typeof contextUsage === 'function' ? contextUsage() : contextUsage;
 	$: contextPercent = Math.max(0, Math.round(resolvedContextUsage?.percent ?? 0));
 
@@ -77,6 +82,8 @@
 					canCompact={compactAvailable}
 					compactDisabled={isCompactDisabled}
 					canStatus={statusAvailable}
+					canFork={forkAvailable}
+					forkDisabled={isForkDisabled}
 					{contextPercent}
 					onSelect={(e) => {
 						const { type, data } = e;
@@ -89,6 +96,9 @@
 						} else if (type === 'command' && data.id === 'status') {
 							insertTextHandler('');
 							onStatus();
+						} else if (type === 'command' && data.id === 'fork') {
+							insertTextHandler('');
+							onFork();
 						} else if (type === 'skill') {
 							command({
 								id: `${data.id}|${data.name}`,

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

@@ -12,6 +12,8 @@
 	export let canCompact = false;
 	export let compactDisabled = false;
 	export let canStatus = false;
+	export let canFork = false;
+	export let forkDisabled = false;
 	export let contextPercent = 0;
 
 	let selectedIdx = 0;
@@ -28,6 +30,9 @@
 		...(canCompact && 'compact'.startsWith(query.toLowerCase())
 			? [{ type: 'command', data: { id: 'compact' } }]
 			: []),
+		...(canFork && 'fork'.startsWith(query.toLowerCase())
+			? [{ type: 'command', data: { id: 'fork' } }]
+			: []),
 		...(canStatus && 'status'.startsWith(query.toLowerCase())
 			? [{ type: 'command', data: { id: 'status' } }]
 			: [])
@@ -86,6 +91,9 @@
 		if (item?.type === 'command' && item.data?.id === 'compact' && compactDisabled) {
 			return;
 		}
+		if (item?.type === 'command' && item.data?.id === 'fork' && forkDisabled) {
+			return;
+		}
 		if (item) {
 			onSelect(item);
 		}
@@ -167,6 +175,50 @@
 					</span>
 				</button>
 			</Tooltip>
+		{:else if item.data.id === 'fork'}
+			<Tooltip content="Clone this chat into a new copy." placement="top">
+				<button
+					type="button"
+					aria-label="Fork: clone this chat into a new copy."
+					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' : ''} disabled:opacity-50"
+					disabled={forkDisabled}
+					on:mousedown={(e) => e.preventDefault()}
+					on:click={() => {
+						if (!forkDisabled) {
+							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">
+						<svg
+							class="size-3.5"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.8"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<path d="M4 12H9" />
+							<path d="M9 12C12.5 12 12.5 7 16 7H20" />
+							<path d="M17 4L20 7L17 10" />
+							<path d="M9 12C12.5 12 12.5 17 16 17H20" />
+							<path d="M17 14L20 17L17 20" />
+						</svg>
+					</span>
+					<span class="flex-1 min-w-0 flex items-baseline gap-1.5 overflow-hidden">
+						<span class="truncate">Fork</span>
+						<span class="app-muted text-[0.625rem] truncate shrink-0">Clone chat</span>
+					</span>
+				</button>
+			</Tooltip>
 		{:else if item.data.id === 'status'}
 			<Tooltip content="Check what is running in this chat." placement="top">
 				<button