changes

2026-01-14 23:37:00 +01:00
parent fae63deda4
commit 9853ae8fe4
5 changed files with 142 additions and 28 deletions
@@ -0,0 +1,64 @@
+'use client';
+
+import { useState } from 'react';
+import { IconBrain, IconChevronDown, IconChevronRight } from '@tabler/icons-react';
+import { ActionIcon, Collapse, Group, Paper, Text, useMantineTheme } from '@mantine/core';
+import { useThemeContext } from '@/components/DynamicThemeProvider';
+import classes from './ThinkingBlock.module.css';
+
+interface ThinkingBlockProps {
+  content: string;
+  isStreaming?: boolean;
+}
+
+/**
+ * Collapsible block for displaying model reasoning/thinking content
+ */
+export function ThinkingBlock({ content, isStreaming = false }: ThinkingBlockProps) {
+  const [opened, setOpened] = useState(false);
+  const { primaryColor } = useThemeContext();
+  const theme = useMantineTheme();
+
+  // Don't render if no content
+  if (!content.trim()) {
+    return null;
+  }
+
+  // Count approximate "thoughts" or lines for summary
+  const lines = content.trim().split('\n').filter(Boolean);
+  const wordCount = content.trim().split(/\s+/).length;
+
+  return (
+    <Paper className={classes.container} withBorder radius="sm" p={0} my="xs">
+      <Group
+        className={classes.header}
+        onClick={() => setOpened(!opened)}
+        gap="xs"
+        wrap="nowrap"
+        p="xs"
+        style={{ cursor: 'pointer' }}
+      >
+        <ActionIcon variant="subtle" color={primaryColor} size="xs">
+          {opened ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
+        </ActionIcon>
+        <IconBrain size={16} color={theme.colors[primaryColor][6]} />
+        <Text size="sm" fw={500} c={primaryColor}>
+          {isStreaming ? 'Thinking...' : 'Reasoning'}
+        </Text>
+        {!opened && (
+          <Text size="xs" c="dimmed" truncate style={{ flex: 1 }}>
+            {isStreaming ? 'Model is reasoning...' : `${wordCount} words, ${lines.length} steps`}
+          </Text>
+        )}
+      </Group>
+
+      <Collapse in={opened}>
+        <div className={classes.content}>
+          <Text size="xs" c="dimmed" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>
+            {content}
+          </Text>
+        </div>
+      </Collapse>
+    </Paper>
+  );
+}