panelui-native 0.28.1 → 0.32.0

package/src/components/radio-group/index.tsx

@@ -211,13 +211,22 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
       </View>
     );
 
+    // Either way the label is a string in a row that is otherwise all views,
+    // so children given instead of the prop are dressed the same way rather
+    // than reaching the pressable bare.
+    const labelled = label ? (
+      <Text className={slots.label()}>{label}</Text>
+    ) : (
+      textChildren(children, (text) => <Text className={slots.label()}>{text}</Text>)
+    );
+
     // The card lays its text out first so the disc sits at the trailing edge;
     // the dot row keeps the classic disc-then-label order.
     const body =
       variant === 'card' ? (
         <>
           <View className="flex-1 gap-1">
-            {label ? <Text className={slots.label()}>{label}</Text> : children}
+            {labelled}
             {description ? (
               <Text className={slots.description()}>{description}</Text>
             ) : null}
@@ -227,7 +236,7 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
       ) : (
         <>
           {indicator}
-          {label ? <Text className={slots.label()}>{label}</Text> : children}
+          {labelled}
         </>
       );
 

package/src/components/reasoning/index.tsx

@@ -0,0 +1,297 @@
+/**
+ * Reasoning — the model's working, shown while it happens and folded away after.
+ *
+ * A reasoning trace is interesting for exactly as long as it is the only thing
+ * arriving. Once the answer starts, it is a wall of text above the thing the
+ * reader actually asked for. So it opens itself when the trace starts streaming
+ * and closes itself about a second after it stops — once, and only if it ever
+ * streamed, because a trace that arrives complete was never a live thing to
+ * watch and should not perform.
+ *
+ * The trigger changes with it: a shimmering "Thinking…" while the tokens are
+ * coming, and "Thought for 8 seconds" afterwards. The duration is measured from
+ * the first streaming frame rather than taken on trust, so it is the time the
+ * reader actually waited.
+ *
+ * ```tsx
+ * <Reasoning isStreaming={streaming}>
+ *   <Reasoning.Trigger />
+ *   <Reasoning.Content>{text}</Reasoning.Content>
+ * </Reasoning>
+ * ```
+ *
+ * ## Where the props come from
+ *
+ * With the AI SDK, `isStreaming` is whether the last part of the last message
+ * is a reasoning part while the request is still streaming, and the content is
+ * every `reasoning` part joined together. Joined, not one component each:
+ * some models emit a run of separate reasoning parts, and one component per
+ * part is a column of "Thinking…" rows for a single thought.
+ */
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { ChevronDownIcon, SparklesIcon } from '../../icons';
+import { Collapse } from '../../primitives/collapse';
+import { Text, textChildren } from '../../primitives/text';
+import { cn } from '../../utils/cn';
+import { Shimmer } from '../shimmer';
+
+/**
+ * How long the finished trace stays open before folding away.
+ *
+ * Long enough that the fold reads as a consequence of the trace ending rather
+ * than as part of it, short enough that nobody is waiting on it.
+ */
+const AUTO_CLOSE_DELAY = 1000;
+
+const reasoningVariants = tv({
+  slots: {
+    root: 'w-full gap-2',
+    trigger: 'flex-row items-center gap-2 py-0.5',
+    label: 'text-sm text-muted-foreground',
+    content: 'gap-2 ps-6',
+    contentText: 'text-sm leading-relaxed text-muted-foreground',
+  },
+});
+
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  /** Seconds the trace took, once it has finished. */
+  duration: number | undefined;
+}
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+function useReasoning(component: string): ReasoningContextValue {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Reasoning>`);
+  }
+  return context;
+}
+
+export interface ReasoningProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  /**
+   * Whether the trace is still arriving. Drives the shimmer on the trigger,
+   * opens the panel on the way in and closes it a beat after it goes false.
+   */
+  isStreaming?: boolean;
+  /**
+   * How long the trace took, in seconds. Measured from the first streaming
+   * frame when it is not given, which is the number worth showing — it is what
+   * the reader actually waited.
+   */
+  duration?: number;
+  /** Controlled open state. */
+  open?: boolean;
+  /**
+   * Initial state when uncontrolled. Defaults to whether it is streaming, so a
+   * live trace is open and a finished one arrives folded. Passing `false`
+   * explicitly also opts out of the auto-open.
+   */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+
+function ReasoningRoot({
+  className,
+  isStreaming = false,
+  duration: durationProp,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+  ...props
+}: ReasoningProps) {
+  const { root } = reasoningVariants();
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? isStreaming);
+  const [measured, setMeasured] = useState<number>();
+
+  const isControlled = openProp !== undefined;
+  const open = isControlled ? openProp : internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  /*
+   * A caller that said `defaultOpen={false}` meant it. Without this the panel
+   * would spring open the moment the trace started, which is the one thing that
+   * request was asking not to happen.
+   */
+  const optedOut = defaultOpen === false;
+  const everStreamed = useRef(isStreaming);
+  const startedAt = useRef<number | null>(null);
+  const [autoClosed, setAutoClosed] = useState(false);
+
+  // Timed here rather than taken on trust: `duration` is optional, and the
+  // honest number is the wall clock between the first token and the last.
+  useEffect(() => {
+    if (isStreaming) {
+      everStreamed.current = true;
+      startedAt.current ??= Date.now();
+      return;
+    }
+    if (startedAt.current !== null) {
+      setMeasured(Math.max(1, Math.round((Date.now() - startedAt.current) / 1000)));
+      startedAt.current = null;
+    }
+  }, [isStreaming]);
+
+  useEffect(() => {
+    if (isStreaming && !open && !optedOut) setOpen(true);
+  }, [isStreaming, open, optedOut, setOpen]);
+
+  /*
+   * Once only. Without the latch, reopening a finished trace by hand would be
+   * undone a second later by the same effect, and the panel would refuse to
+   * stay open for the one reader who wanted to read it.
+   */
+  useEffect(() => {
+    if (!everStreamed.current || isStreaming || !open || autoClosed) return;
+    const timer = setTimeout(() => {
+      setOpen(false);
+      setAutoClosed(true);
+    }, AUTO_CLOSE_DELAY);
+    return () => clearTimeout(timer);
+  }, [isStreaming, open, autoClosed, setOpen]);
+
+  const context = useMemo(
+    () => ({ isStreaming, open, setOpen, duration: durationProp ?? measured }),
+    [isStreaming, open, setOpen, durationProp, measured]
+  );
+
+  return (
+    <ReasoningContext.Provider value={context}>
+      <View {...props} className={cn(root(), className)}>
+        {children}
+      </View>
+    </ReasoningContext.Provider>
+  );
+}
+ReasoningRoot.displayName = 'Reasoning';
+
+export interface ReasoningTriggerProps
+  extends Omit<PressableProps, 'children' | 'style'> {
+  className?: string;
+  /**
+   * What the row says. Given the streaming state and the measured duration, so
+   * a caller can put its own words to both without reimplementing the timing.
+   */
+  label?: (isStreaming: boolean, duration?: number) => ReactNode;
+  /** Replaces the whole row, icon and chevron included. */
+  children?: ReactNode;
+}
+
+/** The row that says how long it thought, and folds the trace away. */
+function ReasoningTrigger({ className, label, children, onPress, ...props }: ReasoningTriggerProps) {
+  const { isStreaming, open, setOpen, duration } = useReasoning('Reasoning.Trigger');
+  const { trigger, label: labelClass } = reasoningVariants();
+  const reducedMotion = useReducedMotion();
+  const progress = useSharedValue(open ? 1 : 0);
+
+  useEffect(() => {
+    progress.value = reducedMotion
+      ? open
+        ? 1
+        : 0
+      : withTiming(open ? 1 : 0, { duration: 180 });
+  }, [open, reducedMotion, progress]);
+
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${progress.value * 180}deg` }],
+  }));
+
+  const body = label ? (
+    label(isStreaming, duration)
+  ) : isStreaming ? (
+    <Shimmer textClassName={labelClass()}>Thinking…</Shimmer>
+  ) : (
+    <Text className={labelClass()}>
+      {duration === undefined
+        ? 'Thought for a few seconds'
+        : `Thought for ${duration} ${duration === 1 ? 'second' : 'seconds'}`}
+    </Text>
+  );
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ expanded: open }}
+      onPress={(event) => {
+        onPress?.(event);
+        setOpen(!open);
+      }}
+      className={cn(trigger(), className)}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <SparklesIcon size={16} />
+          <View className="flex-1">{body}</View>
+          <Animated.View style={chevronStyle}>
+            <ChevronDownIcon size={16} />
+          </Animated.View>
+        </>
+      )}
+    </Pressable>
+  );
+}
+
+export interface ReasoningContentProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  /** The trace. A string is wrapped for you; anything else is left alone. */
+  children?: ReactNode;
+}
+
+/**
+ * The trace itself.
+ *
+ * Kept mounted and collapsed to nothing rather than unmounted, because it is
+ * usually still growing while it is folded — and a body that remounts on every
+ * open would drop whatever the reader had scrolled to.
+ */
+function ReasoningContent({ className, children, ...props }: ReasoningContentProps) {
+  const { open } = useReasoning('Reasoning.Content');
+  const { content, contentText } = reasoningVariants();
+
+  return (
+    <Collapse open={open} className={cn(content(), className)} {...props}>
+      {textChildren(children, (text) => (
+        <Text className={contentText()}>{text}</Text>
+      ))}
+    </Collapse>
+  );
+}
+
+ReasoningTrigger.displayName = 'Reasoning.Trigger';
+ReasoningContent.displayName = 'Reasoning.Content';
+
+export const Reasoning = Object.assign(ReasoningRoot, {
+  Trigger: ReasoningTrigger,
+  Content: ReasoningContent,
+});