feat: Add Accordion component and implement AI reasoning display.

Author: arnaudpfu

apps/mobile/components/ai-chat/reasoning.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { memo, useCallback, useRef, useState, useMemo, Ref } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+// import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import { MarkdownText } from "./markdown-text";
+// import {
+// 	Collapsible,
+// 	CollapsibleContent,
+// 	CollapsibleTrigger,
+// } from "@/components/ui/collapsible";
+// import { useScrollLock } from "@creatorem/ai-react/primitives/reasoning";
+import type {
+  ReasoningGroupComponent,
+  ReasoningMessagePartComponent,
+} from "@creatorem/ai-chat/types/message-part-component-types";
+import { useMessage } from "@creatorem/ai-chat/primitives/message";
+import { Accordion, AccordionContent, AccordionTrigger } from "../ui/accordion";
+import { View } from "react-native";
+import { cn } from "~/utils/cn";
+import { Icon } from "../ui/icon";
+import { Text } from "../ui/text";
+
+// const ANIMATION_DURATION = 200;
+
+const reasoningVariants = cva("aui-reasoning-root mb-4 w-full", {
+  variants: {
+    variant: {
+      default: "",
+      outline: "rounded-lg border px-3 py-2",
+      muted: "rounded-lg bg-muted/50 px-3 py-2",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type ReasoningRootProps = Omit<
+  React.ComponentProps<typeof Accordion>,
+  "open" | "onOpenChange" | "type"
+> &
+  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<View>(null);
+
+  return (
+    <Accordion
+      ref={collapsibleRef}
+      type="single"
+      data-slot="reasoning-root"
+      data-variant={variant}
+      className={cn(reasoningVariants({ variant, className }))}
+      {...props}
+    >
+      {children}
+    </Accordion>
+  );
+}
+
+function ReasoningFade({
+  className,
+  ...props
+}: React.ComponentProps<typeof View>) {
+  return (
+    <View
+      className={cn(
+        "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8",
+        "bg-[linear-gradient(to_top,var(--color-background),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 AccordionTrigger> & {
+  active?: boolean;
+  duration?: number;
+}) {
+  const durationText = duration ? ` (${duration}s)` : "";
+
+  return (
+    <AccordionTrigger
+      className={cn(
+        "group/trigger flex max-w-[75%] items-center gap-2 py-1 text-muted-foreground text-sm transition-colors hover:text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <Icon
+        name="Brain"
+        className="size-4 shrink-0"
+      />
+      <View
+        className="relative inline-block leading-none"
+      >
+        <Text>Reasoning{durationText}</Text>
+        {active ? (
+          <Text
+            aria-hidden
+            className="shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none"
+          >
+            Reasoning{durationText}
+          </Text>
+        ) : null}
+      </View>
+      <Icon
+        name="ChevronDown"
+        className={cn(
+          "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",
+        )}
+      />
+    </AccordionTrigger>
+  );
+}
+
+function ReasoningContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionContent>) {
+  return (
+    <AccordionContent
+      className={cn(
+        "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 />
+    </AccordionContent>
+  );
+}
+
+function ReasoningText({
+  className,
+  ...props
+}: React.ComponentProps<typeof View>) {
+  return (
+    <View
+      className={cn(
+        "relative z-0 max-h-64 space-y-4 overflow-y-auto pt-2 pb-4 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)",
+        "[&_p]:-mb-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />;
+
+const ReasoningGroupImpl: ReasoningGroupComponent = ({
+  children,
+  startIndex,
+  endIndex,
+}) => {
+  const message = useMessage();
+  const hasReasoningText = useMemo(() => {
+    const parts = message.parts.slice(startIndex, endIndex + 1);
+    return parts.some(
+      (part) =>
+        part.type === "reasoning" &&
+        typeof part.text === "string" &&
+        part.text.trim().length > 0,
+    );
+  }, [message.parts, startIndex, endIndex]);
+  const isReasoningStreaming = useMemo(() => {
+    if (message.status?.type !== "running") return false;
+    const lastIndex = message.parts.length - 1;
+    if (lastIndex < 0) return false;
+    const lastType = message.parts[lastIndex]?.type;
+    if (lastType !== "reasoning") return false;
+    return lastIndex >= startIndex && lastIndex <= endIndex;
+  }, [message, endIndex, startIndex]);
+
+  if (!hasReasoningText && !isReasoningStreaming) {
+    return null;
+  }
+
+  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,
+};