refac

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
+		{@const textContent = decode(token.text || '')
-			title={token.summary}
+			.replace(/<summary>.*?<\/summary>/gi, '')
-			open={$settings?.expandDetails ?? false}
+			.trim()}
-			attributes={token?.attributes}
+
-			className="w-full space-y-1"
+		{#if textContent.length > 0}
-			dir="auto"
+			<Collapsible
-		>
+				title={token.summary}
-			<div class=" mb-1.5" slot="content">
+				open={$settings?.expandDetails ?? false}
-				<svelte:self
+				attributes={token?.attributes}
-					id={`${id}-${tokenIdx}-d`}
+				className="w-full space-y-1"
-					tokens={marked.lexer(decode(token.text))}
+				dir="auto"
-					attributes={token?.attributes}
+			>
-					{done}
+				<div class=" mb-1.5" slot="content">
-					{editCodeBlock}
+					<svelte:self
-					{onTaskClick}
+						id={`${id}-${tokenIdx}-d`}
-					{sourceIds}
+						tokens={marked.lexer(decode(token.text))}
-					{onSourceClick}
+						attributes={token?.attributes}
-				/>
+						{done}
-			</div>
+						{editCodeBlock}
-		</Collapsible>
+						{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 !disabled}
-						{#if open}
+						<div class="flex self-center translate-y-[1px]">
-							<ChevronUp strokeWidth="3.5" className="size-3.5" />
+							{#if open}
-						{:else}
+								<ChevronUp strokeWidth="3.5" className="size-3.5" />
-							<ChevronDown strokeWidth="3.5" className="size-3.5" />
+							{:else}
-						{/if}
+								<ChevronDown strokeWidth="3.5" className="size-3.5" />
-					</div>
+							{/if}
+						</div>
+					{/if}
 				</div>
 			</div>
 		{:else}