1<script lang="ts">
 2	import { Brain } from '@lucide/svelte';
 3	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
 4	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
 5	import { buttonVariants } from '$lib/components/ui/button/index.js';
 6	import { Card } from '$lib/components/ui/card';
 7	import { config } from '$lib/stores/settings.svelte';
 8
 9	interface Props {
10		class?: string;
11		hasRegularContent?: boolean;
12		isStreaming?: boolean;
13		reasoningContent: string | null;
14	}
15
16	let {
17		class: className = '',
18		hasRegularContent = false,
19		isStreaming = false,
20		reasoningContent
21	}: Props = $props();
22
23	const currentConfig = config();
24
25	let isExpanded = $state(currentConfig.showThoughtInProgress);
26
27	$effect(() => {
28		if (hasRegularContent && reasoningContent && currentConfig.showThoughtInProgress) {
29			isExpanded = false;
30		}
31	});
32</script>
33
34<Collapsible.Root bind:open={isExpanded} class="mb-6 {className}">
35	<Card class="gap-0 border-muted bg-muted/30 py-0">
36		<Collapsible.Trigger class="flex cursor-pointer items-center justify-between p-3">
37			<div class="flex items-center gap-2 text-muted-foreground">
38				<Brain class="h-4 w-4" />
39
40				<span class="text-sm font-medium">
41					{isStreaming ? 'Reasoning...' : 'Reasoning'}
42				</span>
43			</div>
44
45			<div
46				class={buttonVariants({
47					variant: 'ghost',
48					size: 'sm',
49					class: 'h-6 w-6 p-0 text-muted-foreground hover:text-foreground'
50				})}
51			>
52				<ChevronsUpDownIcon class="h-4 w-4" />
53
54				<span class="sr-only">Toggle reasoning content</span>
55			</div>
56		</Collapsible.Trigger>
57
58		<Collapsible.Content>
59			<div class="border-t border-muted px-3 pb-3">
60				<div class="pt-3">
61					<div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
62						{reasoningContent ?? ''}
63					</div>
64				</div>
65			</div>
66		</Collapsible.Content>
67	</Card>
68</Collapsible.Root>