Spaces:
Running
Running
File size: 2,163 Bytes
e538a38 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import {
Box,
Collapse,
Flex,
Group,
Loader,
Text,
UnstyledButton,
} from "@mantine/core";
import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
import { lazy, useState } from "react";
import { formatThinkingTime } from "../../modules/stringFormatters";
const MarkdownRenderer = lazy(() => import("./MarkdownRenderer"));
interface ReasoningSectionProps {
content: string;
isGenerating?: boolean;
thinkingTimeMs?: number;
}
export default function ReasoningSection({
content,
isGenerating = false,
thinkingTimeMs = 0,
}: ReasoningSectionProps) {
const [isOpen, setIsOpen] = useState(false);
return (
<Box mb="xs">
<UnstyledButton
onClick={() => setIsOpen(!isOpen)}
style={(theme) => ({
width: "100%",
padding: theme.spacing.xs,
borderStartStartRadius: theme.radius.md,
borderStartEndRadius: theme.radius.md,
borderEndEndRadius: !isOpen ? theme.radius.md : 0,
borderEndStartRadius: !isOpen ? theme.radius.md : 0,
backgroundColor: theme.colors.dark[8],
"&:hover": {
backgroundColor: theme.colors.dark[5],
},
cursor: isOpen ? "zoom-out" : "zoom-in",
})}
>
<Group gap={3}>
{isOpen ? (
<IconChevronDown size={16} />
) : (
<IconChevronRight size={16} />
)}
<Flex align="center" gap={6}>
<Text size="sm" c="dimmed" fs="italic" span>
{isGenerating ? "Thinking" : formatThinkingTime(thinkingTimeMs)}
</Text>
{isGenerating && <Loader size="sm" color="dimmed" type="dots" />}
</Flex>
</Group>
</UnstyledButton>
<Collapse in={isOpen}>
<Box
style={(theme) => ({
backgroundColor: theme.colors.dark[8],
padding: theme.spacing.sm,
borderBottomLeftRadius: theme.radius.md,
borderBottomRightRadius: theme.radius.md,
})}
>
<MarkdownRenderer content={content} enableCopy={false} />
</Box>
</Collapse>
</Box>
);
}
|