Chain Of Thought

1"use client"
2 
3import {
4  Collapsible,
5  CollapsibleContent,
6  CollapsibleTrigger,
7} from "@/components/ui/collapsible"
8import { cn } from "@/lib/utils"
9import { ChevronDown, Circle } from "lucide-react"
10import React from "react"
11 
12export type ChainOfThoughtItemProps = React.ComponentProps<"div">
13 
14export const ChainOfThoughtItem = ({
15  children,
16  className,
17  ...props
18}: ChainOfThoughtItemProps) => (
19  <div className={cn("text-muted-foreground text-sm", className)} {...props}>
20    {children}
21  </div>
22)
23 
24export type ChainOfThoughtTriggerProps = React.ComponentProps<
25  typeof CollapsibleTrigger
26> & {
27  leftIcon?: React.ReactNode
28  swapIconOnHover?: boolean
29}
30 
31export const ChainOfThoughtTrigger = ({
32  children,
33  className,
34  leftIcon,
35  swapIconOnHover = true,
36  ...props
37}: ChainOfThoughtTriggerProps) => (
38  <CollapsibleTrigger
39    className={cn(
40      "group text-muted-foreground hover:text-foreground flex cursor-pointer items-center justify-start gap-1 text-left text-sm transition-colors",
41      className
42    )}
43    {...props}
44  >
45    <div className="flex items-center gap-2">
46      {leftIcon ? (
47        <span className="relative inline-flex size-4 items-center justify-center">
48          <span
49            className={cn(
50              "transition-opacity",
51              swapIconOnHover && "group-hover:opacity-0"
52            )}
53          >
54            {leftIcon}
55          </span>
56          {swapIconOnHover && (
57            <ChevronDown className="absolute size-4 opacity-0 transition-opacity group-hover:opacity-100 group-data-[state=open]:rotate-180" />
58          )}
59        </span>
60      ) : (
61        <span className="relative inline-flex size-4 items-center justify-center">
62          <Circle className="size-2 fill-current" />
63        </span>
64      )}
65      <span>{children}</span>
66    </div>
67    {!leftIcon && (
68      <ChevronDown className="size-4 transition-transform group-data-[state=open]:rotate-180" />
69    )}
70  </CollapsibleTrigger>
71)
72 
73export type ChainOfThoughtContentProps = React.ComponentProps<
74  typeof CollapsibleContent
75>
76 
77export const ChainOfThoughtContent = ({
78  children,
79  className,
80  ...props
81}: ChainOfThoughtContentProps) => {
82  return (
83    <CollapsibleContent
84      className={cn(
85        "text-popover-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden",
86        className
87      )}
88      {...props}
89    >
90      <div className="grid grid-cols-[min-content_minmax(0,1fr)] gap-x-4">
91// … truncated