feat: publish v1.0.0-rc.36-custom.1

web/src/components/ai-elements/chain-of-thought.tsx

@@ -0,0 +1,252 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+'use client'
+
+import {
+  BrainIcon,
+  ChevronDownIcon,
+  DotIcon,
+  type LucideIcon,
+} from 'lucide-react'
+import {
+  type ComponentProps,
+  createContext,
+  memo,
+  useContext,
+  useMemo,
+} from 'react'
+
+import { Badge } from '@/components/ui/badge'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import { useControllableState } from '@/lib/use-controllable-state'
+import { cn } from '@/lib/utils'
+
+type ChainOfThoughtContextValue = {
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
+}
+
+const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
+  null
+)
+
+const useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext)
+  if (!context) {
+    throw new Error(
+      'ChainOfThought components must be used within ChainOfThought'
+    )
+  }
+  return context
+}
+
+export type ChainOfThoughtProps = ComponentProps<'div'> & {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export const ChainOfThought = memo(
+  ({
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  }: ChainOfThoughtProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    })
+
+    const chainOfThoughtContext = useMemo(
+      () => ({ isOpen, setIsOpen }),
+      [isOpen, setIsOpen]
+    )
+
+    return (
+      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
+        <div
+          className={cn('not-prose max-w-prose space-y-4', className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </ChainOfThoughtContext.Provider>
+    )
+  }
+)
+
+export type ChainOfThoughtHeaderProps = ComponentProps<
+  typeof CollapsibleTrigger
+>
+
+export const ChainOfThoughtHeader = memo(
+  ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {
+    const { isOpen, setIsOpen } = useChainOfThought()
+
+    return (
+      <Collapsible onOpenChange={setIsOpen} open={isOpen}>
+        <CollapsibleTrigger
+          className={cn(
+            'text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors',
+            className
+          )}
+          {...props}
+        >
+          <BrainIcon className='size-4' />
+          <span className='flex-1 text-left'>
+            {children ?? 'Chain of Thought'}
+          </span>
+          <ChevronDownIcon
+            className={cn(
+              'size-4 transition-transform',
+              isOpen ? 'rotate-180' : 'rotate-0'
+            )}
+          />
+        </CollapsibleTrigger>
+      </Collapsible>
+    )
+  }
+)
+
+export type ChainOfThoughtStepProps = ComponentProps<'div'> & {
+  icon?: LucideIcon
+  label: string
+  description?: string
+  status?: 'complete' | 'active' | 'pending'
+}
+
+export const ChainOfThoughtStep = memo(
+  ({
+    className,
+    icon: Icon = DotIcon,
+    label,
+    description,
+    status = 'complete',
+    children,
+    ...props
+  }: ChainOfThoughtStepProps) => {
+    const statusStyles = {
+      complete: 'text-muted-foreground',
+      active: 'text-foreground',
+      pending: 'text-muted-foreground/50',
+    }
+
+    return (
+      <div
+        className={cn(
+          'flex gap-2 text-sm',
+          statusStyles[status],
+          'fade-in-0 slide-in-from-top-2 animate-in',
+          className
+        )}
+        {...props}
+      >
+        <div className='relative mt-0.5'>
+          <Icon className='size-4' />
+          <div className='bg-border absolute top-7 bottom-0 left-1/2 -mx-px w-px' />
+        </div>
+        <div className='flex-1 space-y-2'>
+          <div>{label}</div>
+          {description && (
+            <div className='text-muted-foreground text-xs'>{description}</div>
+          )}
+          {children}
+        </div>
+      </div>
+    )
+  }
+)
+
+export type ChainOfThoughtSearchResultsProps = ComponentProps<'div'>
+
+export const ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
+    <div className={cn('flex items-center gap-2', className)} {...props} />
+  )
+)
+
+export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>
+
+export const ChainOfThoughtSearchResult = memo(
+  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
+    <Badge
+      className={cn('gap-1 px-2 py-0.5 text-xs font-normal', className)}
+      variant='secondary'
+      {...props}
+    >
+      {children}
+    </Badge>
+  )
+)
+
+export type ChainOfThoughtContentProps = ComponentProps<
+  typeof CollapsibleContent
+>
+
+export const ChainOfThoughtContent = memo(
+  ({ className, children, ...props }: ChainOfThoughtContentProps) => {
+    const { isOpen } = useChainOfThought()
+
+    return (
+      <Collapsible open={isOpen}>
+        <CollapsibleContent
+          className={cn(
+            'mt-2 space-y-3',
+            'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-popover-foreground data-closed:animate-out data-open:animate-in outline-none',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </CollapsibleContent>
+      </Collapsible>
+    )
+  }
+)
+
+export type ChainOfThoughtImageProps = ComponentProps<'div'> & {
+  caption?: string
+}
+
+export const ChainOfThoughtImage = memo(
+  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
+    <div className={cn('mt-2 space-y-2', className)} {...props}>
+      <div className='bg-muted relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg p-3'>
+        {children}
+      </div>
+      {caption && <p className='text-muted-foreground text-xs'>{caption}</p>}
+    </div>
+  )
+)
+
+ChainOfThought.displayName = 'ChainOfThought'
+ChainOfThoughtHeader.displayName = 'ChainOfThoughtHeader'
+ChainOfThoughtStep.displayName = 'ChainOfThoughtStep'
+ChainOfThoughtSearchResults.displayName = 'ChainOfThoughtSearchResults'
+ChainOfThoughtSearchResult.displayName = 'ChainOfThoughtSearchResult'
+ChainOfThoughtContent.displayName = 'ChainOfThoughtContent'
+ChainOfThoughtImage.displayName = 'ChainOfThoughtImage'