Merge branch 'dev' into chat-message-rebased

src/lib/components/AddConnectionModal.svelte

@@ -42,6 +42,7 @@
 	let prefixId = '';
 	let enable = true;
 	let apiVersion = '';
+	let apiType = ''; // '' = chat completions (default), 'responses' = Responses API
 
 	let headers = '';
 
@@ -183,7 +184,8 @@
 				connection_type: connectionType,
 				auth_type,
 				headers: headers ? JSON.parse(headers) : undefined,
-				...(!ollama && azure ? { azure: true, api_version: apiVersion } : {})
+				...(!ollama && azure ? { azure: true, api_version: apiVersion } : {}),
+				...(apiType ? { api_type: apiType } : {})
 			}
 		};
 
@@ -221,6 +223,7 @@
 				connectionType = connection.config?.connection_type ?? 'external';
 				azure = connection.config?.azure ?? false;
 				apiVersion = connection.config?.api_version ?? '';
+				apiType = connection.config?.api_type ?? '';
 			}
 		}
 	};
@@ -506,7 +509,7 @@
 									<div class="flex-1">
 										<input
 											id="api-version-input"
-											class={`w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+											class={`w-full text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
 											type="text"
 											bind:value={apiVersion}
 											placeholder={$i18n.t('API Version')}
@@ -518,6 +521,45 @@
 							</div>
 						{/if}
 
+						{#if !ollama && !direct}
+							<div class="flex flex-row justify-between items-center w-full mt-1">
+								<label
+									for="api-type-toggle"
+									class={`mb-0.5 text-xs text-gray-500
+							${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
+									>{$i18n.t('API Type')}</label
+								>
+
+								<div>
+									<button
+										on:click={() => {
+											apiType = apiType === 'responses' ? '' : 'responses';
+										}}
+										type="button"
+										id="api-type-toggle"
+										class=" text-xs text-gray-700 dark:text-gray-300"
+									>
+										{#if apiType === 'responses'}
+											<Tooltip
+												className="flex items-center gap-1"
+												content={$i18n.t(
+													'This feature is currently experimental and may not work as expected.'
+												)}
+											>
+												<span class=" text-gray-400 dark:text-gray-600"
+													>{$i18n.t('Experimental')}</span
+												>
+
+												{$i18n.t('Responses')}
+											</Tooltip>
+										{:else}
+											{$i18n.t('Chat Completions')}
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/if}
+
 						<div class="flex flex-col w-full mt-2">
 							<div class="mb-1 flex justify-between">
 								<div

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -54,7 +54,9 @@
 		console.log('Exporting table to CSV');
 
 		// Extract header row text, decode HTML entities, and escape for CSV.
-		const header = token.header.map((headerCell) => `"${decode(headerCell.text).replace(/"/g, '""')}"`);
+		const header = token.header.map(
+			(headerCell) => `"${decode(headerCell.text).replace(/"/g, '""')}"`
+		);
 
 		// Create an array for rows that will hold the mapped cell text.
 		const rows = token.rows.map((row) =>
@@ -316,26 +318,41 @@
 			</ul>
 		{/if}
 	{:else if token.type === 'details'}
-		<Collapsible
-			title={token.summary}
-			open={$settings?.expandDetails ?? false}
-			attributes={token?.attributes}
-			className="w-full space-y-1"
-			dir="auto"
-		>
-			<div class=" mb-1.5" slot="content">
-				<svelte:self
-					id={`${id}-${tokenIdx}-d`}
-					tokens={marked.lexer(decode(token.text))}
-					attributes={token?.attributes}
-					{done}
-					{editCodeBlock}
-					{onTaskClick}
-					{sourceIds}
-					{onSourceClick}
-				/>
-			</div>
-		</Collapsible>
+		{@const textContent = decode(token.text || '')
+			.replace(/<summary>.*?<\/summary>/gi, '')
+			.trim()}
+
+		{#if textContent.length > 0}
+			<Collapsible
+				title={token.summary}
+				open={$settings?.expandDetails ?? false}
+				attributes={token?.attributes}
+				className="w-full space-y-1"
+				dir="auto"
+			>
+				<div class=" mb-1.5" slot="content">
+					<svelte:self
+						id={`${id}-${tokenIdx}-d`}
+						tokens={marked.lexer(decode(token.text))}
+						attributes={token?.attributes}
+						{done}
+						{editCodeBlock}
+						{onTaskClick}
+						{sourceIds}
+						{onSourceClick}
+					/>
+				</div>
+			</Collapsible>
+		{:else}
+			<Collapsible
+				title={token.summary}
+				open={false}
+				disabled={true}
+				attributes={token?.attributes}
+				className="w-full space-y-1"
+				dir="auto"
+			/>
+		{/if}
 	{:else if token.type === 'html'}
 		<HtmlToken {id} {token} {onSourceClick} />
 	{:else if token.type === 'iframe'}

src/lib/components/common/Collapsible.svelte

@@ -222,7 +222,7 @@
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div
-				class="{buttonClassName} cursor-pointer"
+				class="{buttonClassName} {disabled ? '' : 'cursor-pointer'}"
 				on:pointerup={() => {
 					if (!disabled) {
 						open = !open;
@@ -270,13 +270,15 @@
 						{/if}
 					</div>
 
-					<div class="flex self-center translate-y-[1px]">
-						{#if open}
-							<ChevronUp strokeWidth="3.5" className="size-3.5" />
-						{:else}
-							<ChevronDown strokeWidth="3.5" className="size-3.5" />
-						{/if}
-					</div>
+					{#if !disabled}
+						<div class="flex self-center translate-y-[1px]">
+							{#if open}
+								<ChevronUp strokeWidth="3.5" className="size-3.5" />
+							{:else}
+								<ChevronDown strokeWidth="3.5" className="size-3.5" />
+							{/if}
+						</div>
+					{/if}
 				</div>
 			</div>
 		{:else}