enh: multi model response tabbed display

src/lib/components/chat/Settings/Interface.svelte

@@ -36,6 +36,7 @@
 	let highContrastMode = false;
 
 	let detectArtifacts = true;
+	let displayMultiModelResponsesInTabs = false;
 
 	let richTextInput = true;
 	let showFormattingToolbar = false;
@@ -155,6 +156,11 @@
 		saveSettings({ showEmojiInCall: showEmojiInCall });
 	};
 
+	const toggleDisplayMultiModelResponsesInTabs = async () => {
+		displayMultiModelResponsesInTabs = !displayMultiModelResponsesInTabs;
+		saveSettings({ displayMultiModelResponsesInTabs });
+	};
+
 	const toggleVoiceInterruption = async () => {
 		voiceInterruption = !voiceInterruption;
 		saveSettings({ voiceInterruption: voiceInterruption });
@@ -344,6 +350,7 @@
 		showEmojiInCall = $settings?.showEmojiInCall ?? false;
 		voiceInterruption = $settings?.voiceInterruption ?? false;
 
+		displayMultiModelResponsesInTabs = $settings?.displayMultiModelResponsesInTabs ?? false;
 		chatFadeStreamingText = $settings?.chatFadeStreamingText ?? true;
 
 		richTextInput = $settings?.richTextInput ?? true;
@@ -853,6 +860,29 @@
 				</div>
 			</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div id="keep-followup-prompts-label" class=" self-center text-xs">
+						{$i18n.t('Display Multi-model Responses in Tabs')}
+					</div>
+
+					<button
+						aria-labelledby="keep-followup-prompts-label"
+						class="p-1 px-3 text-xs flex rounded-sm transition"
+						on:click={() => {
+							toggleDisplayMultiModelResponsesInTabs();
+						}}
+						type="button"
+					>
+						{#if displayMultiModelResponsesInTabs === true}
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
+						{:else}
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
+						{/if}
+					</button>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div id="rich-input-label" class=" self-center text-xs">