refac

src/lib/components/chat/ChatTabs.svelte

@@ -103,6 +103,7 @@
 	let viewportWidth = 0;
 
 	let tabs = emptyTabs();
+	let sideChatNumber = 0;
 	let terminalViews: Record<string, XTerminal> = {};
 	export const hasTerminals = () => tabs.tabs.some((tab) => tab.kind === 'terminal');
 	export async function bindTerminalChat(id: string) {
@@ -259,6 +260,18 @@
 	const openFeature = (kind: 'artifacts' | 'preview' | 'voice' | 'comments' | 'side') => {
 		if (!availableViews.some((view) => view.kind === kind && view.available)) return;
 		const view = availableViews.find((view) => view.kind === kind)!;
+		if (kind === 'side') {
+			const pending = $sideChatRequest;
+			const initialPrompt = pending?.parentId === chatId ? pending.prompt : '';
+			if (pending?.parentId === chatId) sideChatRequest.set(null);
+			openPanel({
+				id: crypto.randomUUID(),
+				kind,
+				label: `${view.label} ${++sideChatNumber}`,
+				initialPrompt
+			});
+			return;
+		}
 		openPanel({ id: kind, kind, label: view.label });
 	};
 	const newTerminal = () => {
@@ -579,6 +592,7 @@
 	$: if (chatId !== tabsChatId) {
 		if (tabsChatId || !chatId) {
 			tabs = emptyTabs();
+			sideChatNumber = 0;
 			hasOpenedTabs = false;
 			dirtyFiles = {};
 			fileContexts = {};
@@ -924,9 +938,9 @@
 					<Embeds overlay={dragged} />
 				{:else if tab.kind === 'artifacts'}
 					<Artifacts overlay={dragged} />
-			{:else if tab.kind === 'side' && chatId}
-				<SideChat parentId={chatId} {history} {modelId} {systemPrompt} />
-			{:else if tab.kind === 'comments' && currentComments}
+				{:else if tab.kind === 'side' && chatId}
+					<SideChat {history} {modelId} {systemPrompt} initialPrompt={tab.initialPrompt ?? ''} />
+				{:else if tab.kind === 'comments' && currentComments}
 					{#key `${$user?.id}:${chatId}:${currentComments.comment_id ?? ''}`}
 						<CommentsPanel
 							embedded={true}

src/lib/components/chat/ChatTabs/SideChat.svelte

@@ -5,7 +5,6 @@
 		socket,
 		user,
 		openTemporaryChatIds,
-		sideChatRequest,
 		models,
 		settings,
 		config,
@@ -24,7 +23,7 @@
 	import ElicitationDialog from '../ElicitationDialog.svelte';
 	import { isRasterImageContentType } from '$lib/utils';
 
-	export let parentId: string;
+	export let initialPrompt = '';
 	export let history;
 	export let modelId: string;
 	export let systemPrompt = '';
@@ -95,7 +94,6 @@
 	let draft = '';
 	let error = '';
 	let busy = false;
-	let ready = false;
 	let disposed = false;
 	let request: Promise<any> | null = null;
 	let scroller: HTMLDivElement;
@@ -356,23 +354,20 @@
 		if (busy) void stop();
 	}
 
-	$: if (ready && $sideChatRequest?.parentId === parentId) {
-		const pending = $sideChatRequest;
-		sideChatRequest.set(null);
-		if (sideChatAllowed && pending.prompt) {
-			draft = pending.prompt;
-			input?.setText(draft);
-			if (!busy) void send();
-		}
-		input?.focus();
-	}
 	onMount(() => {
 		const connection = $socket;
 		connection?.on('events', receive);
 		connection?.on('connect', reconnect);
 		connection?.on('disconnect', cancelInteractions);
-		ready = true;
-		input?.focus();
+		void tick().then(() => {
+			if (disposed) return;
+			if (sideChatAllowed && initialPrompt) {
+				draft = initialPrompt;
+				input?.setText(draft);
+				void send();
+			}
+			input?.focus();
+		});
 		return () => {
 			disposed = true;
 			connection?.off('events', receive);

src/lib/components/chat/ChatTabs/tabs.ts

@@ -16,6 +16,7 @@ export type PanelTab = {
 	id: string;
 	kind: PanelTabKind;
 	label: string;
+	initialPrompt?: string;
 	terminalId?: string;
 	terminalNumber?: number;
 	path?: string;