feat: Use Collapsible component for Thinking Block UI

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageThinkingBlock.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { ChevronDown, Brain } from '@lucide/svelte';
-	import { Button } from '$lib/components/ui/button';
+	import { Brain } from '@lucide/svelte';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
 	import { Card } from '$lib/components/ui/card';
 	import { MarkdownContent } from '$lib/components/app';
-	import { slide } from 'svelte/transition';
 
 	interface Props {
 		reasoningContent: string | null;
@@ -16,40 +17,42 @@
 
 	let isExpanded = $state(true);
 
-	// Auto-collapse when reasoning finishes and regular content starts
+	// Auto-collapse when regular content starts (even while streaming)
 	$effect(() => {
-		if (!isStreaming && hasRegularContent && reasoningContent) {
+		if (hasRegularContent && reasoningContent) {
 			isExpanded = false;
 		}
 	});
 </script>
 
-<Card class="border-muted bg-muted/30 mb-6 gap-0 py-0 {className}">
-	<Button
-		variant="ghost"
-		class="h-auto w-full justify-between p-3 font-normal"
-		onclick={() => (isExpanded = !isExpanded)}
-	>
-		<div class="text-muted-foreground flex items-center gap-2">
-			<Brain class="h-4 w-4" />
-
-			<span class="text-sm">
-				{isStreaming ? 'Reasoning...' : 'Reasoning'}
-			</span>
-		</div>
-
-		<ChevronDown
-			class="text-muted-foreground h-4 w-4 transition-transform duration-200 {isExpanded
-				? 'rotate-180'
-				: ''}"
-		/>
-	</Button>
+<Collapsible.Root bind:open={isExpanded} class="mb-6 {className}">
+	<Card class="border-muted bg-muted/30 gap-0 py-0">
+		<Collapsible.Trigger class="cursor-pointer flex items-center justify-between p-3">
+			<div class="text-muted-foreground flex items-center gap-2">
+				<Brain class="h-4 w-4" />
+				<span class="text-sm font-medium">
+					{isStreaming ? 'Reasoning...' : 'Reasoning'}
+				</span>
+			</div>
+			
+			<div
+				class={buttonVariants({ 
+					variant: "ghost", 
+					size: "sm", 
+					class: "h-6 w-6 p-0 text-muted-foreground hover:text-foreground" 
+				})}
+			>
+				<ChevronsUpDownIcon class="h-4 w-4" />
+				<span class="sr-only">Toggle reasoning content</span>
+			</div>
+		</Collapsible.Trigger>
 
-	{#if isExpanded}
-		<div class="border-muted border-t px-3 pb-3" transition:slide={{ duration: 200 }}>
-			<div class="pt-3">
-				<MarkdownContent content={reasoningContent || ''} class="text-xs leading-relaxed" />
+		<Collapsible.Content>
+			<div class="border-muted border-t px-3 pb-3">
+				<div class="pt-3">
+					<MarkdownContent content={reasoningContent || ''} class="text-xs leading-relaxed" />
+				</div>
 			</div>
-		</div>
-	{/if}
-</Card>
+		</Collapsible.Content>
+	</Card>
+</Collapsible.Root>

tools/server/webui/src/lib/components/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

tools/server/webui/src/lib/components/ui/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />

tools/server/webui/src/lib/components/ui/collapsible/collapsible.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

tools/server/webui/src/lib/components/ui/collapsible/index.ts

@@ -0,0 +1,13 @@
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger,
+};