Reasoning

"use client";import { memo, useCallback, useRef, useState } from "react";import { cva, type VariantProps } from "class-variance-authority";import { BrainIcon, ChevronDownIcon } from "lucide-react";import {  useScrollLock,  useAuiState,  type ReasoningMessagePartComponent,  type ReasoningGroupComponent,} from "@assistant-ui/react";import { MarkdownText } from "@/components/assistant-ui/markdown-text";import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from "@/components/ui/collapsible";import { cn } from "@/lib/utils";const ANIMATION_DURATION = 200;const reasoningVariants = cva("aui-reasoning-root mb-4 w-full", {  variants: {    variant: {      outline: "rounded-lg border px-3 py-2",      ghost: "",      muted: "rounded-lg bg-muted/50 px-3 py-2",    },  },  defaultVariants: {    variant: "outline",  },});export type ReasoningRootProps = Omit<  React.ComponentProps<typeof Collapsible>,  "open" | "onOpenChange"> &  VariantProps<typeof reasoningVariants> & {    open?: boolean;    onOpenChange?: (open: boolean) => void;    defaultOpen?: boolean;  };function ReasoningRoot({  className,  variant,  open: controlledOpen,  onOpenChange: controlledOnOpenChange,  defaultOpen = false,  children,  ...props}: ReasoningRootProps) {  const collapsibleRef = useRef<HTMLDivElement>(null);  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);  const isControlled = controlledOpen !== undefined;  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;  const handleOpenChange = useCallback(    (open: boolean) => {      if (!open) {        lockScroll();      }      if (!isControlled) {        setUncontrolledOpen(open);      }      controlledOnOpenChange?.(open);    },    [lockScroll, isControlled, controlledOnOpenChange],  );  return (    <Collapsible      ref={collapsibleRef}      data-slot="reasoning-root"      data-variant={variant}      open={isOpen}      onOpenChange={handleOpenChange}      className={cn(        "group/reasoning-root",        reasoningVariants({ variant, className }),      )}      style={        {          "--animation-duration": `${ANIMATION_DURATION}ms`,        } as React.CSSProperties      }      {...props}    >      {children}    </Collapsible>  );}function ReasoningFade({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="reasoning-fade"      className={cn(        "aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8",        "bg-[linear-gradient(to_top,var(--color-background),transparent)]",        "group-data-[variant=muted]/reasoning-root:bg-[linear-gradient(to_top,hsl(var(--muted)/0.5),transparent)]",        "fade-in-0 animate-in",        "group-data-[state=open]/collapsible-content:animate-out",        "group-data-[state=open]/collapsible-content:fade-out-0",        "group-data-[state=open]/collapsible-content:delay-[calc(var(--animation-duration)*0.75)]",        "group-data-[state=open]/collapsible-content:fill-mode-forwards",        "duration-(--animation-duration)",        "group-data-[state=open]/collapsible-content:duration-(--animation-duration)",        className,      )}      {...props}    />  );}function ReasoningTrigger({  active,  duration,  className,  ...props}: React.ComponentProps<typeof CollapsibleTrigger> & {  active?: boolean;  duration?: number;}) {  const durationText = duration ? ` (${duration}s)` : "";  return (    <CollapsibleTrigger      data-slot="reasoning-trigger"      className={cn(        "aui-reasoning-trigger group/trigger flex max-w-[75%] items-center gap-2 py-1 text-muted-foreground text-sm transition-colors hover:text-foreground",        className,      )}      {...props}    >      <BrainIcon        data-slot="reasoning-trigger-icon"        className="aui-reasoning-trigger-icon size-4 shrink-0"      />      <span        data-slot="reasoning-trigger-label"        className="aui-reasoning-trigger-label-wrapper relative inline-block leading-none"      >        <span>Reasoning{durationText}</span>        {active ? (          <span            aria-hidden            data-slot="reasoning-trigger-shimmer"            className="aui-reasoning-trigger-shimmer shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none"          >            Reasoning{durationText}          </span>        ) : null}      </span>      <ChevronDownIcon        data-slot="reasoning-trigger-chevron"        className={cn(          "aui-reasoning-trigger-chevron mt-0.5 size-4 shrink-0",          "transition-transform duration-(--animation-duration) ease-out",          "group-data-[state=closed]/trigger:-rotate-90",          "group-data-[state=open]/trigger:rotate-0",        )}      />    </CollapsibleTrigger>  );}function ReasoningContent({  className,  children,  ...props}: React.ComponentProps<typeof CollapsibleContent>) {  return (    <CollapsibleContent      data-slot="reasoning-content"      className={cn(        "aui-reasoning-content relative overflow-hidden text-muted-foreground text-sm outline-none",        "group/collapsible-content ease-out",        "data-[state=closed]:animate-collapsible-up",        "data-[state=open]:animate-collapsible-down",        "data-[state=closed]:fill-mode-forwards",        "data-[state=closed]:pointer-events-none",        "data-[state=open]:duration-(--animation-duration)",        "data-[state=closed]:duration-(--animation-duration)",        className,      )}      {...props}    >      {children}      <ReasoningFade />    </CollapsibleContent>  );}function ReasoningText({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="reasoning-text"      className={cn(        "aui-reasoning-text relative z-0 max-h-64 overflow-y-auto pt-2 pb-2 pl-6 leading-relaxed",        "transform-gpu transition-[transform,opacity]",        "group-data-[state=open]/collapsible-content:animate-in",        "group-data-[state=closed]/collapsible-content:animate-out",        "group-data-[state=open]/collapsible-content:fade-in-0",        "group-data-[state=closed]/collapsible-content:fade-out-0",        "group-data-[state=open]/collapsible-content:slide-in-from-top-4",        "group-data-[state=closed]/collapsible-content:slide-out-to-top-4",        "group-data-[state=open]/collapsible-content:duration-(--animation-duration)",        "group-data-[state=closed]/collapsible-content:duration-(--animation-duration)",        className,      )}      {...props}    />  );}const ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />;const ReasoningGroupImpl: ReasoningGroupComponent = ({  children,  startIndex,  endIndex,}) => {  const isReasoningStreaming = useAuiState((s) => {    if (s.message.status?.type !== "running") return false;    const lastIndex = s.message.parts.length - 1;    if (lastIndex < 0) return false;    const lastType = s.message.parts[lastIndex]?.type;    if (lastType !== "reasoning") return false;    return lastIndex >= startIndex && lastIndex <= endIndex;  });  return (    <ReasoningRoot defaultOpen={isReasoningStreaming}>      <ReasoningTrigger active={isReasoningStreaming} />      <ReasoningContent aria-busy={isReasoningStreaming}>        <ReasoningText>{children}</ReasoningText>      </ReasoningContent>    </ReasoningRoot>  );};const Reasoning = memo(  ReasoningImpl,) as unknown as ReasoningMessagePartComponent & {  Root: typeof ReasoningRoot;  Trigger: typeof ReasoningTrigger;  Content: typeof ReasoningContent;  Text: typeof ReasoningText;  Fade: typeof ReasoningFade;};Reasoning.displayName = "Reasoning";Reasoning.Root = ReasoningRoot;Reasoning.Trigger = ReasoningTrigger;Reasoning.Content = ReasoningContent;Reasoning.Text = ReasoningText;Reasoning.Fade = ReasoningFade;const ReasoningGroup = memo(ReasoningGroupImpl);ReasoningGroup.displayName = "ReasoningGroup";export {  Reasoning,  ReasoningGroup,  ReasoningRoot,  ReasoningTrigger,  ReasoningContent,  ReasoningText,  ReasoningFade,  reasoningVariants,};

"use client";import "@assistant-ui/react-markdown/styles/dot.css";import {  type CodeHeaderProps,  MarkdownTextPrimitive,  unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,  useIsMarkdownCodeBlock,} from "@assistant-ui/react-markdown";import remarkGfm from "remark-gfm";import { type FC, memo, useState } from "react";import { CheckIcon, CopyIcon } from "lucide-react";import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";import { cn } from "@/lib/utils";const MarkdownTextImpl = () => {  return (    <MarkdownTextPrimitive      remarkPlugins={[remarkGfm]}      className="aui-md"      components={defaultComponents}    />  );};export const MarkdownText = memo(MarkdownTextImpl);const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {  const { isCopied, copyToClipboard } = useCopyToClipboard();  const onCopy = () => {    if (!code || isCopied) return;    copyToClipboard(code);  };  return (    <div className="aui-code-header-root mt-2.5 flex items-center justify-between rounded-t-lg border border-border/50 border-b-0 bg-muted/50 px-3 py-1.5 text-xs">      <span className="aui-code-header-language font-medium text-muted-foreground lowercase">        {language}      </span>      <TooltipIconButton tooltip="Copy" onClick={onCopy}>        {!isCopied && <CopyIcon />}        {isCopied && <CheckIcon />}      </TooltipIconButton>    </div>  );};const useCopyToClipboard = ({  copiedDuration = 3000,}: {  copiedDuration?: number;} = {}) => {  const [isCopied, setIsCopied] = useState<boolean>(false);  const copyToClipboard = (value: string) => {    if (!value) return;    navigator.clipboard.writeText(value).then(() => {      setIsCopied(true);      setTimeout(() => setIsCopied(false), copiedDuration);    });  };  return { isCopied, copyToClipboard };};const defaultComponents = memoizeMarkdownComponents({  h1: ({ className, ...props }) => (    <h1      className={cn(        "aui-md-h1 mb-2 scroll-m-20 font-semibold text-base first:mt-0 last:mb-0",        className,      )}      {...props}    />  ),  h2: ({ className, ...props }) => (    <h2      className={cn(        "aui-md-h2 mt-3 mb-1.5 scroll-m-20 font-semibold text-sm first:mt-0 last:mb-0",        className,      )}      {...props}    />  ),  h3: ({ className, ...props }) => (    <h3      className={cn(        "aui-md-h3 mt-2.5 mb-1 scroll-m-20 font-semibold text-sm first:mt-0 last:mb-0",        className,      )}      {...props}    />  ),  h4: ({ className, ...props }) => (    <h4      className={cn(        "aui-md-h4 mt-2 mb-1 scroll-m-20 font-medium text-sm first:mt-0 last:mb-0",        className,      )}      {...props}    />  ),  h5: ({ className, ...props }) => (    <h5      className={cn(        "aui-md-h5 mt-2 mb-1 font-medium text-sm first:mt-0 last:mb-0",        className,      )}      {...props}    />  ),  h6: ({ className, ...props }) => (    <h6      className={cn(        "aui-md-h6 mt-2 mb-1 font-medium text-sm first:mt-0 last:mb-0",        className,      )}      {...props}    />  ),  p: ({ className, ...props }) => (    <p      className={cn(        "aui-md-p my-2.5 leading-normal first:mt-0 last:mb-0",        className,      )}      {...props}    />  ),  a: ({ className, ...props }) => (    <a      className={cn(        "aui-md-a text-primary underline underline-offset-2 hover:text-primary/80",        className,      )}      {...props}    />  ),  blockquote: ({ className, ...props }) => (    <blockquote      className={cn(        "aui-md-blockquote my-2.5 border-muted-foreground/30 border-l-2 pl-3 text-muted-foreground italic",        className,      )}      {...props}    />  ),  ul: ({ className, ...props }) => (    <ul      className={cn(        "aui-md-ul my-2 ml-4 list-disc marker:text-muted-foreground [&>li]:mt-1",        className,      )}      {...props}    />  ),  ol: ({ className, ...props }) => (    <ol      className={cn(        "aui-md-ol my-2 ml-4 list-decimal marker:text-muted-foreground [&>li]:mt-1",        className,      )}      {...props}    />  ),  hr: ({ className, ...props }) => (    <hr      className={cn("aui-md-hr my-2 border-muted-foreground/20", className)}      {...props}    />  ),  table: ({ className, ...props }) => (    <table      className={cn(        "aui-md-table my-2 w-full border-separate border-spacing-0 overflow-y-auto",        className,      )}      {...props}    />  ),  th: ({ className, ...props }) => (    <th      className={cn(        "aui-md-th bg-muted px-2 py-1 text-left font-medium first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right",        className,      )}      {...props}    />  ),  td: ({ className, ...props }) => (    <td      className={cn(        "aui-md-td border-muted-foreground/20 border-b border-l px-2 py-1 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right",        className,      )}      {...props}    />  ),  tr: ({ className, ...props }) => (    <tr      className={cn(        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",        className,      )}      {...props}    />  ),  li: ({ className, ...props }) => (    <li className={cn("aui-md-li leading-normal", className)} {...props} />  ),  sup: ({ className, ...props }) => (    <sup      className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}      {...props}    />  ),  pre: ({ className, ...props }) => (    <pre      className={cn(        "aui-md-pre overflow-x-auto rounded-t-none rounded-b-lg border border-border/50 border-t-0 bg-muted/30 p-3 text-xs leading-relaxed",        className,      )}      {...props}    />  ),  code: function Code({ className, ...props }) {    const isCodeBlock = useIsMarkdownCodeBlock();    return (      <code        className={cn(          !isCodeBlock &&            "aui-md-inline-code rounded-md border border-border/50 bg-muted/50 px-1.5 py-0.5 font-mono text-[0.85em]",          className,        )}        {...props}      />    );  },  CodeHeader,});

"use client";import { ComponentPropsWithRef, forwardRef } from "react";import { Slot } from "radix-ui";import {  Tooltip,  TooltipContent,  TooltipTrigger,} from "@/components/ui/tooltip";import { Button } from "@/components/ui/button";import { cn } from "@/lib/utils";export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {  tooltip: string;  side?: "top" | "bottom" | "left" | "right";};export const TooltipIconButton = forwardRef<  HTMLButtonElement,  TooltipIconButtonProps>(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {  return (    <Tooltip>      <TooltipTrigger asChild>        <Button          variant="ghost"          size="icon"          {...rest}          className={cn("aui-button-icon size-6 p-1", className)}          ref={ref}        >          <Slot.Slottable>{children}</Slot.Slottable>          <span className="aui-sr-only sr-only">{tooltip}</span>        </Button>      </TooltipTrigger>      <TooltipContent side={side}>{tooltip}</TooltipContent>    </Tooltip>  );});TooltipIconButton.displayName = "TooltipIconButton";