refac

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

@@ -9,6 +9,7 @@
 	import KatexRenderer from './KatexRenderer.svelte';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { stringify } from 'postcss';
+	import Collapsible from '$lib/components/common/Collapsible.svelte';
 
 	export let id: string;
 	export let tokens: Token[];
@@ -96,11 +97,11 @@
 			</ul>
 		{/if}
 	{:else if token.type === 'details'}
-		<details>
-			<summary>{token.summary}</summary>
-
-			<svelte:self id={`${id}-${tokenIdx}-d`} tokens={marked.lexer(token.text)} />
-		</details>
+		<Collapsible title={token.summary} className="w-fit space-y-1">
+			<div class=" mb-1.5" slot="content">
+				<svelte:self id={`${id}-${tokenIdx}-d`} tokens={marked.lexer(token.text)} />
+			</div>
+		</Collapsible>
 	{:else if token.type === 'html'}
 		{@const html = DOMPurify.sanitize(token.text)}
 		{#if html && html.includes('<video')}

src/lib/components/common/Collapsible.svelte

@@ -12,8 +12,8 @@
 
 <div class={className}>
 	{#if title !== null}
-		<button class="w-full" on:click={() => (open = !open)}>
-			<div class=" w-full font-medium transition flex items-center justify-between gap-2">
+		<button class="w-fit" on:click={() => (open = !open)}>
+			<div class=" w-fit font-medium transition flex items-center justify-between gap-2">
 				<div>
 					{title}
 				</div>