@vvedantb/native-ui 0.3.16 → 0.4.0

package/src/ai/code-block.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { IconCheck, IconCopy } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize } from "./chat-text";
+import { ChatIconButton } from "./icon-button";
+
+export type CodeBlockCopyButtonProps = {
+  code: string;
+  /**
+   * Puts `code` on the clipboard. React Native's own `Clipboard` is
+   * deprecated, and native-ui adds no clipboard package, so the app passes its
+   * own (for example `expo-clipboard`'s `setStringAsync`). A rejected promise
+   * leaves the copy icon.
+   */
+  onCopy: (code: string) => void | Promise<void>;
+  /** Milliseconds the check shows after a copy. Default 2000, as on the web. */
+  timeout?: number;
+  /** Default "Copy code"; "Copied" while the check shows. */
+  label?: string;
+};
+
+/** Ghost copy button: the copy icon, then a check for `timeout` after a copy. */
+export function CodeBlockCopyButton({ code, onCopy, timeout = 2000, label = "Copy code" }: CodeBlockCopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<number | undefined>(undefined);
+
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const copy = async () => {
+    // As the web: presses while the check shows do nothing.
+    if (copied) return;
+    try {
+      await onCopy(code);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    timer.current = setTimeout(() => setCopied(false), timeout);
+  };
+
+  return (
+    <ChatIconButton
+      icon={copied ? IconCheck : IconCopy}
+      label={copied ? "Copied" : label}
+      onPress={() => void copy()}
+    />
+  );
+}
+
+export type CodeBlockProps = {
+  code: string;
+  /** Shown in the header. No highlighting: native-ui has no shiki. */
+  language?: string;
+  /** With it, the header has a copy button. See `CodeBlockCopyButton`. */
+  onCopy?: (code: string) => void | Promise<void>;
+  className?: string;
+};
+
+/**
+ * Plain code on the flat panel (web `flatPanelSubtle`: `bg-surface-secondary`,
+ * no border or shadow) at radius 16. A header with the language and a copy
+ * button when either is given. Long lines scroll sideways; the code is
+ * selectable.
+ */
+export function CodeBlock({ code, language, onCopy, className }: CodeBlockProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("small", largerText);
+  const caption = chatTextSize("caption", largerText);
+  const header = Boolean(language || onCopy);
+  return (
+    <View
+      className={cn("w-full overflow-hidden", className)}
+      style={{ borderRadius: tokens.radius.lg, backgroundColor: tokens.color.surfaceSecondary[scheme] }}
+    >
+      {header ? (
+        <View className="min-h-11 flex-row items-center justify-between pl-3 pr-1.5">
+          <Text className={caption} style={[sizeStyle(caption), textStyle("muted", scheme), { fontFamily: MONO_FONT }]}>
+            {language ?? ""}
+          </Text>
+          {onCopy ? <CodeBlockCopyButton code={code} onCopy={onCopy} /> : null}
+        </View>
+      ) : null}
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerClassName={header ? "px-4 pb-4" : "p-4"}
+      >
+        <Text
+          selectable
+          className={size}
+          style={[sizeStyle(size), textStyle("foreground", scheme), { fontFamily: MONO_FONT }]}
+        >
+          {code}
+        </Text>
+      </ScrollView>
+    </View>
+  );
+}

package/src/ai/collapsible.tsx

@@ -0,0 +1,111 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { Pressable, View, type PressableProps, type ViewProps } from "react-native";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react-native";
+import { FadeIn } from "react-native-reanimated";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, touchSlop } from "../controlStyles";
+import { NativeOnlyAnimatedView } from "../primitives/native-only-animated-view";
+import { useControllableState } from "../primitives/use-controllable-state";
+
+// A small fold for the AI parts: native-ui has no `Collapsible`. A `Pressable`
+// trigger and content that mounts only while open. The content fades in on
+// iOS and Android, and appears in place with Reduce Motion.
+
+type CollapsibleContextValue = { open: boolean; setOpen: (open: boolean) => void };
+
+const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
+
+/** The open state of the enclosing `Collapsible`, for a chevron or a custom trigger. */
+export function useCollapsible() {
+  const context = useContext(CollapsibleContext);
+  if (!context) throw new Error("Collapsible parts must be used within Collapsible");
+  return context;
+}
+
+export type CollapsibleProps = ViewProps & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+};
+
+/** Holds its own open state, or takes `open` and `onOpenChange`, as the web Radix `Collapsible`. */
+export function Collapsible({ open, defaultOpen = false, onOpenChange, ...props }: CollapsibleProps) {
+  const [isOpen, setOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+  return (
+    <CollapsibleContext.Provider value={{ open: isOpen, setOpen }}>
+      <View {...props} />
+    </CollapsibleContext.Provider>
+  );
+}
+
+/** A `text-sm` line with the web `py-1`: 28 high. The slop brings it to 44. */
+const TRIGGER_ROW_HEIGHT = 28;
+
+export type CollapsibleTriggerProps = Omit<PressableProps, "children"> & {
+  className?: string;
+  children?: ReactNode;
+};
+
+/** Toggles the fold. A button with `expanded` state for VoiceOver and TalkBack. */
+export function CollapsibleTrigger({
+  className,
+  onPress,
+  accessibilityState,
+  ...props
+}: CollapsibleTriggerProps) {
+  const { open, setOpen } = useCollapsible();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      hitSlop={touchSlop(MIN_TOUCH_TARGET, TRIGGER_ROW_HEIGHT)}
+      className={cn("active:opacity-70", className)}
+      {...props}
+      accessibilityState={{ ...accessibilityState, expanded: open }}
+      onPress={(event) => {
+        onPress?.(event);
+        setOpen(!open);
+      }}
+    />
+  );
+}
+
+/** Mounted only while the fold is open. */
+export function CollapsibleContent({ children, ...props }: ViewProps & { className?: string }) {
+  const { open } = useCollapsible();
+  if (!open) return null;
+  return (
+    <NativeOnlyAnimatedView entering={FadeIn.duration(150)} {...props}>
+      {children}
+    </NativeOnlyAnimatedView>
+  );
+}
+
+/**
+ * The fold chevron: `down` turns up when open (reasoning, sources, chain of
+ * thought), `right` turns down (trace lines), as the web `rotate-180` and
+ * `rotate-90`. It turns at once; the web eases it over 150 ms.
+ */
+export function CollapsibleChevron({
+  open,
+  variant = "down",
+  size,
+  color,
+}: {
+  open: boolean;
+  variant?: "down" | "right";
+  size: number;
+  color: string;
+}) {
+  const Icon = variant === "down" ? IconChevronDown : IconChevronRight;
+  const turn = variant === "down" ? "180deg" : "90deg";
+  return (
+    <View style={{ transform: [{ rotate: open ? turn : "0deg" }] }}>
+      <Icon size={size} color={color} />
+    </View>
+  );
+}

package/src/ai/conversation.tsx

@@ -0,0 +1,245 @@
+import {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  type ComponentType,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import {
+  Platform,
+  ScrollView,
+  Text,
+  View,
+  type NativeScrollEvent,
+  type ScrollViewProps,
+  type ViewProps,
+} from "react-native";
+import { IconArrowDown, type IconProps } from "@tabler/icons-react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { Button } from "../Button";
+import { cn } from "../cn";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { NativeOnlyAnimatedView } from "../primitives/native-only-animated-view";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+/** Within this many points of the end, the thread counts as at the bottom and keeps following new content. */
+export const AT_BOTTOM_THRESHOLD = 70;
+
+/** Whether a scroll position is within `AT_BOTTOM_THRESHOLD` of the end. Content shorter than the view is at the bottom. */
+export function isScrolledToBottom({ contentOffset, contentSize, layoutMeasurement }: NativeScrollEvent) {
+  return contentSize.height - layoutMeasurement.height - contentOffset.y <= AT_BOTTOM_THRESHOLD;
+}
+
+type ConversationContextValue = {
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+  scrollRef: RefObject<ScrollView | null>;
+  onScroll: (event: NativeScrollEvent) => void;
+  onUserScroll: () => void;
+  followContent: () => void;
+};
+
+const ConversationContext = createContext<ConversationContextValue | null>(null);
+
+/** `isAtBottom` and `scrollToBottom` of the enclosing `Conversation`, for a custom scroll button. */
+export function useConversation() {
+  const context = useContext(ConversationContext);
+  if (!context) throw new Error("Conversation parts must be used within Conversation");
+  return context;
+}
+
+export type ConversationProps = ViewProps & { className?: string };
+
+/**
+ * The thread frame (web `relative flex-1`). It sticks to the bottom: while the
+ * reader is at the end, new and growing messages stay in view; once they
+ * scroll up, it stops following and `ConversationScrollButton` shows.
+ */
+export function Conversation({ className, ...props }: ConversationProps) {
+  const reduceMotion = useReduceMotion();
+  const scrollRef = useRef<ScrollView | null>(null);
+  const atBottom = useRef(true);
+  // Set while our own animated scroll heads down, so its first frames (not
+  // yet at the bottom) do not count as the reader leaving.
+  const autoScrolling = useRef(false);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  const update = (next: boolean) => {
+    atBottom.current = next;
+    setIsAtBottom(next);
+  };
+
+  const value: ConversationContextValue = {
+    isAtBottom,
+    scrollRef,
+    scrollToBottom: () => {
+      autoScrolling.current = true;
+      update(true);
+      scrollRef.current?.scrollToEnd({ animated: !reduceMotion });
+    },
+    onScroll: (event) => {
+      const bottom = isScrolledToBottom(event);
+      if (bottom) autoScrolling.current = false;
+      else if (autoScrolling.current) return;
+      update(bottom);
+    },
+    onUserScroll: () => {
+      autoScrolling.current = false;
+    },
+    // A jump, not an animation: streamed text grows the content many times a second.
+    followContent: () => {
+      if (atBottom.current) scrollRef.current?.scrollToEnd({ animated: false });
+    },
+  };
+
+  return (
+    <ConversationContext.Provider value={value}>
+      <View className={cn("relative flex-1", className)} {...props} />
+    </ConversationContext.Provider>
+  );
+}
+
+export type ConversationContentProps = ScrollViewProps & { className?: string };
+
+/**
+ * The scrolling message column: the web `flex flex-col gap-4 px-3 py-3`. A
+ * `ScrollView`; for very long threads an app can drive its own `FlatList`
+ * with `useConversation`.
+ */
+export function ConversationContent({
+  className,
+  contentContainerClassName,
+  onScroll,
+  onScrollBeginDrag,
+  onContentSizeChange,
+  onLayout,
+  ...props
+}: ConversationContentProps) {
+  const conversation = useConversation();
+  return (
+    <ScrollView
+      ref={conversation.scrollRef}
+      className={cn("flex-1", className)}
+      contentContainerClassName={cn("gap-4 px-3 py-3", contentContainerClassName)}
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode={Platform.OS === "ios" ? "interactive" : "on-drag"}
+      scrollEventThrottle={16}
+      {...props}
+      onScroll={(event) => {
+        conversation.onScroll(event.nativeEvent);
+        onScroll?.(event);
+      }}
+      onScrollBeginDrag={(event) => {
+        conversation.onUserScroll();
+        onScrollBeginDrag?.(event);
+      }}
+      onContentSizeChange={(width, height) => {
+        conversation.followContent();
+        onContentSizeChange?.(width, height);
+      }}
+      // The keyboard or composer resizing the view keeps the end in view too.
+      onLayout={(event) => {
+        conversation.followContent();
+        onLayout?.(event);
+      }}
+    />
+  );
+}
+
+export type ConversationEmptyStateProps = ViewProps & {
+  title?: string;
+  description?: string;
+  icon?: ComponentType<IconProps>;
+  className?: string;
+  children?: ReactNode;
+};
+
+/** Centred placeholder for a thread with no messages: the web title (medium) and muted description. */
+export function ConversationEmptyState({
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon: Icon,
+  className,
+  children,
+  ...props
+}: ConversationEmptyStateProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("small", largerText);
+  return (
+    <View className={cn("flex-1 items-center justify-center gap-3 p-8", className)} {...props}>
+      {children ?? (
+        <>
+          {Icon ? <Icon size={largerText ? 28 : 24} color={tokens.color.muted[scheme]} /> : null}
+          <View className="items-center gap-1">
+            <Text
+              accessibilityRole="header"
+              className={cn(size, "text-center font-instrument-sans-medium")}
+              style={[sizeStyle(size), textStyle("foreground", scheme), typeStyle("medium")]}
+            >
+              {title}
+            </Text>
+            {description ? (
+              <Text
+                className={cn(size, "text-center font-instrument-sans")}
+                style={[sizeStyle(size), textStyle("muted", scheme)]}
+              >
+                {description}
+              </Text>
+            ) : null}
+          </View>
+        </>
+      )}
+    </View>
+  );
+}
+
+export type ConversationScrollButtonProps = {
+  /** The accessibility label. Default "Scroll to bottom". */
+  label?: string;
+  /** Replaces the down arrow. */
+  icon?: ComponentType<IconProps>;
+  testID?: string;
+};
+
+/**
+ * Round outline arrow, centred 16 above the bottom of the `Conversation`,
+ * shown while the reader is away from the end (the web `absolute bottom-4`).
+ * The web `Button` `icon` size (40, slop to 48). It has an opaque surface
+ * fill and no shadow, so it reads over the messages under it.
+ */
+export function ConversationScrollButton({
+  label = "Scroll to bottom",
+  icon: Icon = IconArrowDown,
+  testID,
+}: ConversationScrollButtonProps) {
+  const { isAtBottom, scrollToBottom } = useConversation();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  if (isAtBottom) return null;
+  return (
+    <NativeOnlyAnimatedView
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut.duration(150)}
+      pointerEvents="box-none"
+      style={{ position: "absolute", left: 0, right: 0, bottom: 16, alignItems: "center" }}
+    >
+      <Button
+        variant="outline"
+        size="icon"
+        accessibilityLabel={label}
+        onPress={scrollToBottom}
+        testID={testID}
+        style={{ borderRadius: tokens.radius.pill, backgroundColor: tokens.color.surface[scheme] }}
+      >
+        <Icon size={largerText ? 20 : 16} color={tokens.color.foreground[scheme]} />
+      </Button>
+    </NativeOnlyAnimatedView>
+  );
+}

package/src/ai/file-chip.tsx

@@ -0,0 +1,66 @@
+import { Pressable, Text, View } from "react-native";
+import { IconFile } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize } from "./chat-text";
+
+/** A `text-xs` line with the web `py-0.5` and border: 22 high. The slop brings it to 44. */
+const CHIP_HEIGHT = 22;
+
+function FileChipLabel({ name }: { name: string }) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("caption", largerText);
+  return (
+    <View
+      className="max-w-full flex-row items-center gap-1.5 self-start border px-1.5 py-0.5"
+      style={{
+        borderRadius: tokens.radius.md,
+        borderColor: tokens.color.border[scheme],
+        backgroundColor: palette.default[scheme],
+      }}
+    >
+      <IconFile size={largerText ? 16 : 12} color={tokens.color.foreground[scheme]} />
+      <Text
+        numberOfLines={1}
+        ellipsizeMode="middle"
+        className={cn(size, "shrink")}
+        style={[sizeStyle(size), textStyle("foreground", scheme), { fontFamily: MONO_FONT }]}
+      >
+        {name}
+      </Text>
+    </View>
+  );
+}
+
+export type FileChipProps = {
+  name: string;
+  path?: string;
+  onOpenFile?: (path: string) => void;
+};
+
+/**
+ * A file name in a trace line or step body: the web `rounded-md border
+ * bg-secondary px-1.5 py-0.5 font-mono text-xs` chip. It is a button that
+ * opens the file when both `path` and `onOpenFile` are given, and plain text
+ * otherwise. Long names are cut in the middle, so the extension shows.
+ */
+export function FileChip({ name, path, onOpenFile }: FileChipProps) {
+  if (!path || !onOpenFile) return <FileChipLabel name={name} />;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={name}
+      accessibilityHint={path}
+      hitSlop={touchSlop(MIN_TOUCH_TARGET, CHIP_HEIGHT)}
+      onPress={() => onOpenFile(path)}
+      className="min-w-0 max-w-full active:opacity-70"
+    >
+      <FileChipLabel name={name} />
+    </Pressable>
+  );
+}

package/src/ai/icon-button.tsx

@@ -0,0 +1,51 @@
+import type { ComponentType } from "react";
+import type { IconProps } from "@tabler/icons-react-native";
+import { Button, type ButtonProps } from "../Button";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, buttonColors, touchSlop } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+/** The web `icon-sm` button: 32 square with a 16 icon. */
+export const CHAT_ICON_BUTTON_SIZE = 32;
+
+export type ChatIconButtonProps = Omit<ButtonProps, "children" | "size" | "icon"> & {
+  icon: ComponentType<IconProps>;
+  /** Names the button for VoiceOver and TalkBack; it has no text. */
+  label: string;
+  /** Default: the variant's label colour. */
+  iconColor?: string;
+};
+
+/**
+ * A round `Button` at the web `icon-sm` size (32), with the slop to 44. With
+ * larger text it is painted 44 with a 20 icon. The message
+ * actions, the composer tools and its send button, and the code copy button.
+ */
+export function ChatIconButton({
+  icon: Icon,
+  label,
+  iconColor,
+  variant = "ghost",
+  className,
+  ...props
+}: ChatIconButtonProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = largerText ? MIN_TOUCH_TARGET : CHAT_ICON_BUTTON_SIZE;
+  const color = iconColor ?? buttonColors(variant, scheme)?.color ?? tokens.color.foreground[scheme];
+  return (
+    <Button
+      variant={variant}
+      size="icon"
+      accessibilityLabel={label}
+      hitSlop={touchSlop(size)}
+      className={cn(largerText ? "h-11 w-11" : "h-8 w-8", className)}
+      style={{ borderRadius: size / 2 }}
+      {...props}
+    >
+      <Icon size={largerText ? 20 : 16} color={color} />
+    </Button>
+  );
+}

package/src/ai/index.ts

@@ -0,0 +1,123 @@
+// AI chat parts, ported from the `@vvedantb/ui` AI elements for touch. On the
+// `@vvedantb/native-ui/ai` entry only, so apps without a chat do not bundle
+// them. Generic: no model names and no app logic.
+export { useStreamingDisclosure } from "./use-streaming-disclosure";
+export { chatTextSize, formatElapsed, MONO_FONT } from "./chat-text";
+export type { ChatTextKind } from "./chat-text";
+export { Shimmer, SHIMMER_LOW_OPACITY } from "./shimmer";
+export type { ShimmerProps } from "./shimmer";
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  CollapsibleChevron,
+  useCollapsible,
+} from "./collapsible";
+export type { CollapsibleProps, CollapsibleTriggerProps } from "./collapsible";
+export {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  useConversation,
+  isScrolledToBottom,
+  AT_BOTTOM_THRESHOLD,
+} from "./conversation";
+export type {
+  ConversationProps,
+  ConversationContentProps,
+  ConversationEmptyStateProps,
+  ConversationScrollButtonProps,
+} from "./conversation";
+export {
+  Message,
+  MessageContent,
+  MessageActionsBar,
+  MessageAction,
+  MESSAGE_ACTIONS,
+  userBubbleStyle,
+} from "./message";
+export type {
+  MessageRole,
+  MessageProps,
+  MessageContentProps,
+  MessageActionsBarProps,
+  MessageActionKind,
+  MessageActionProps,
+} from "./message";
+export {
+  Reasoning,
+  ReasoningTrigger,
+  ReasoningContent,
+  useReasoning,
+  reasoningMessage,
+} from "./reasoning";
+export type { ReasoningProps, ReasoningTriggerProps, ReasoningContentProps } from "./reasoning";
+export {
+  AgentTrace,
+  AgentTraceLine,
+  AgentTraceIcon,
+  AgentTraceTitle,
+  AgentTraceDescription,
+  AgentTraceCollapsible,
+  AgentTraceCollapsibleTrigger,
+  AgentTraceCollapsibleContent,
+  traceLineColor,
+} from "./trace";
+export type {
+  AgentTraceStatus,
+  AgentTraceLineProps,
+  AgentTraceIconProps,
+  AgentTraceTitleProps,
+  AgentTraceCollapsibleTriggerProps,
+} from "./trace";
+export {
+  ChainOfThought,
+  ChainOfThoughtHeader,
+  ChainOfThoughtContent,
+  ChainOfThoughtStep,
+  ChainOfThoughtSearchResults,
+  ChainOfThoughtSearchResult,
+} from "./chain-of-thought";
+export type {
+  ChainOfThoughtHeaderProps,
+  ChainOfThoughtStepProps,
+  ChainOfThoughtStepStatus,
+} from "./chain-of-thought";
+export { ActivityStep } from "./activity-step";
+export type { ActivityStepProps, ActivityStepStatus } from "./activity-step";
+export {
+  PromptInput,
+  PromptInputButton,
+  PromptInputSubmit,
+  isGenerating,
+} from "./prompt-input";
+export type {
+  ChatStatus,
+  PromptInputProps,
+  PromptInputButtonProps,
+  PromptInputSubmitProps,
+} from "./prompt-input";
+export { Suggestions, Suggestion } from "./suggestion";
+export type { SuggestionsProps, SuggestionProps } from "./suggestion";
+export { Sources, SourcesTrigger, SourcesContent, Source, sourcesLabel } from "./sources";
+export type { SourcesTriggerProps, SourceProps } from "./sources";
+export { FileChip } from "./file-chip";
+export type { FileChipProps } from "./file-chip";
+export {
+  Attachments,
+  Attachment,
+  getMediaCategory,
+  getAttachmentLabel,
+} from "./attachments";
+export type {
+  AttachmentData,
+  AttachmentMediaCategory,
+  AttachmentVariant,
+  AttachmentsProps,
+  AttachmentProps,
+} from "./attachments";
+export { CodeBlock, CodeBlockCopyButton } from "./code-block";
+export type { CodeBlockProps, CodeBlockCopyButtonProps } from "./code-block";
+export { ResponseText, ChatTextColorContext } from "./response-text";
+export type { ResponseTextProps } from "./response-text";