@elabs-ai/components-ai 4.0.0

package/src/audio-player.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { Skeleton } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { Experimental_SpeechResult as SpeechResult } from "ai";
+import type {
+  MediaControlBar,
+  MediaController,
+  MediaDurationDisplay,
+  MediaMuteButton,
+  MediaPlayButton,
+  MediaSeekBackwardButton,
+  MediaSeekForwardButton,
+  MediaTimeDisplay,
+  MediaTimeRange,
+  MediaVolumeRange,
+} from "media-chrome/react";
+import type { ComponentProps, ComponentType } from "react";
+import { lazy, Suspense } from "react";
+
+/**
+ * media-chrome lives behind a dynamic import — it declares no `sideEffects`, so
+ * a static import would put the whole custom-element library in every consumer's
+ * entry chunk, `AudioPlayer` rendered or not. Every value import lives in
+ * `_audio-player-media-chrome.tsx`; the element types above are TYPE imports and
+ * erase. See ADR 0019 and `pnpm heavy-deps:check`.
+ *
+ * All ten parts resolve from the SAME module specifier, so they share one chunk:
+ * once `AudioPlayer` has loaded it, the controls inside it resolve from cache.
+ */
+type MediaChromeModule = typeof import("./_audio-player-media-chrome");
+
+const lazyPart = <P,>(pick: (module: MediaChromeModule) => ComponentType<P>) =>
+  lazy(() => import("./_audio-player-media-chrome").then((m) => ({ default: pick(m) })));
+
+export type AudioPlayerProps = Omit<ComponentProps<typeof MediaController>, "audio">;
+
+const AudioPlayerImpl = lazyPart<AudioPlayerProps>((m) => m.AudioPlayer);
+
+export const AudioPlayer = ({ className, ...props }: AudioPlayerProps) => (
+  <Suspense fallback={<Skeleton className={cn("h-10 w-full rounded-md", className)} />}>
+    <AudioPlayerImpl className={className} data-slot="audio-player" {...props} />
+  </Suspense>
+);
+
+export type AudioPlayerElementProps = Omit<ComponentProps<"audio">, "src"> &
+  (
+    | {
+        data: SpeechResult["audio"];
+      }
+    | {
+        src: string;
+      }
+  );
+
+export const AudioPlayerElement = ({ ...props }: AudioPlayerElementProps) => (
+  // oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) -- audio player captions are provided by consumer
+  <audio
+    data-slot="audio-player-element"
+    slot="media"
+    src={"src" in props ? props.src : `data:${props.data.mediaType};base64,${props.data.base64}`}
+    {...props}
+  />
+);
+
+export type AudioPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;
+
+const AudioPlayerControlBarImpl = lazyPart<AudioPlayerControlBarProps>(
+  (m) => m.AudioPlayerControlBar,
+);
+
+export const AudioPlayerControlBar = (props: AudioPlayerControlBarProps) => (
+  <Suspense fallback={null}>
+    <AudioPlayerControlBarImpl data-slot="audio-player-control-bar" {...props} />
+  </Suspense>
+);
+
+export type AudioPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;
+
+const AudioPlayerPlayButtonImpl = lazyPart<AudioPlayerPlayButtonProps>(
+  (m) => m.AudioPlayerPlayButton,
+);
+
+export const AudioPlayerPlayButton = (props: AudioPlayerPlayButtonProps) => (
+  <Suspense fallback={null}>
+    <AudioPlayerPlayButtonImpl data-slot="audio-player-play-button" {...props} />
+  </Suspense>
+);
+
+export type AudioPlayerSeekBackwardButtonProps = ComponentProps<typeof MediaSeekBackwardButton>;
+
+const AudioPlayerSeekBackwardButtonImpl = lazyPart<AudioPlayerSeekBackwardButtonProps>(
+  (m) => m.AudioPlayerSeekBackwardButton,
+);
+
+export const AudioPlayerSeekBackwardButton = (props: AudioPlayerSeekBackwardButtonProps) => (
+  <Suspense fallback={null}>
+    <AudioPlayerSeekBackwardButtonImpl data-slot="audio-player-seek-backward-button" {...props} />
+  </Suspense>
+);
+
+export type AudioPlayerSeekForwardButtonProps = ComponentProps<typeof MediaSeekForwardButton>;
+
+const AudioPlayerSeekForwardButtonImpl = lazyPart<AudioPlayerSeekForwardButtonProps>(
+  (m) => m.AudioPlayerSeekForwardButton,
+);
+
+export const AudioPlayerSeekForwardButton = (props: AudioPlayerSeekForwardButtonProps) => (
+  <Suspense fallback={null}>
+    <AudioPlayerSeekForwardButtonImpl data-slot="audio-player-seek-forward-button" {...props} />
+  </Suspense>
+);
+
+export type AudioPlayerTimeDisplayProps = ComponentProps<typeof MediaTimeDisplay>;
+
+const AudioPlayerTimeDisplayImpl = lazyPart<AudioPlayerTimeDisplayProps>(
+  (m) => m.AudioPlayerTimeDisplay,
+);
+
+export const AudioPlayerTimeDisplay = (props: AudioPlayerTimeDisplayProps) => (
+  <Suspense fallback={null}>
+    <AudioPlayerTimeDisplayImpl data-slot="audio-player-time-display" {...props} />
+  </Suspense>
+);
+
+export type AudioPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;
+
+const AudioPlayerTimeRangeImpl = lazyPart<AudioPlayerTimeRangeProps>((m) => m.AudioPlayerTimeRange);
+
+export const AudioPlayerTimeRange = (props: AudioPlayerTimeRangeProps) => (
+  <Suspense fallback={null}>
+    <AudioPlayerTimeRangeImpl data-slot="audio-player-time-range" {...props} />
+  </Suspense>
+);
+
+export type AudioPlayerDurationDisplayProps = ComponentProps<typeof MediaDurationDisplay>;
+
+const AudioPlayerDurationDisplayImpl = lazyPart<AudioPlayerDurationDisplayProps>(
+  (m) => m.AudioPlayerDurationDisplay,
+);
+
+export const AudioPlayerDurationDisplay = (props: AudioPlayerDurationDisplayProps) => (
+  <Suspense fallback={null}>
+    <AudioPlayerDurationDisplayImpl data-slot="audio-player-duration-display" {...props} />
+  </Suspense>
+);
+
+export type AudioPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;
+
+const AudioPlayerMuteButtonImpl = lazyPart<AudioPlayerMuteButtonProps>(
+  (m) => m.AudioPlayerMuteButton,
+);
+
+export const AudioPlayerMuteButton = (props: AudioPlayerMuteButtonProps) => (
+  <Suspense fallback={null}>
+    <AudioPlayerMuteButtonImpl data-slot="audio-player-mute-button" {...props} />
+  </Suspense>
+);
+
+export type AudioPlayerVolumeRangeProps = ComponentProps<typeof MediaVolumeRange>;
+
+const AudioPlayerVolumeRangeImpl = lazyPart<AudioPlayerVolumeRangeProps>(
+  (m) => m.AudioPlayerVolumeRange,
+);
+
+export const AudioPlayerVolumeRange = (props: AudioPlayerVolumeRangeProps) => (
+  <Suspense fallback={null}>
+    <AudioPlayerVolumeRangeImpl data-slot="audio-player-volume-range" {...props} />
+  </Suspense>
+);

package/src/blocks-ai-composer.stories.tsx

@@ -0,0 +1,83 @@
+/**
+ * AI Composer — the standard chat-input block.
+ *
+ * This block is now a thin showcase of the real `<Composer />` component (the
+ * canonical brand-ui AI chat input). The double-card chrome — a status strip
+ * wrapping a recessed `PromptInput` well (sharp top, theme-rounded bottom),
+ * model pill, voice, circular send, suggestion chips — lives in `composer.tsx`,
+ * not here, so every surface gets the same input by importing it. `Composer`'s
+ * `tone` prop (#254) picks the outer/inner arrangement: `"surface"` (default)
+ * is the outer `bg-card` frame this block ships everywhere else; `"card"` is
+ * the tinted-outer/distinct-inner arrangement the reference exemplar calls
+ * for — see `DoubleCardToned` below. Semantic tokens only; theme-aware radii;
+ * reads in all themes.
+ */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { ChatGreeting } from "./chat-greeting";
+import { Composer } from "./composer";
+
+const SUGGESTIONS = ["Summary", "Code", "Design", "Research"];
+
+/** Empty/first-run chat state: greeting + composer + suggestion chips. */
+function AiComposerScene() {
+  return (
+    <div className="grid min-h-[28rem] place-items-center bg-background px-4 py-10 text-foreground">
+      <div className="w-full max-w-2xl">
+        <ChatGreeting title="Good morning, Avery" subtitle="How can I" accent="assist you today?" />
+
+        <Composer onSubmit={() => undefined} suggestions={SUGGESTIONS} />
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Patterns/Blocks/AI Composer",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "The standard AI chat-input block — a thin showcase of the real <Composer /> component: a rounded two-tone double card (a status strip around a recessed PromptInput well with a sharp top and theme-rounded bottom), a model pill, a circular send, and suggestion chips under a centered greeting. Composer's `tone` prop (#254) picks the arrangement — `surface` (default, this block's Default/ComposerOnly) is the outer bg-card frame; `card` (see DoubleCardToned) is the tinted-outer/distinct-inner frame the reference exemplar calls for. Built on the real @elabs-ai/components-ai PromptInput; semantic tokens only; reads in all themes. Reach for <Composer /> instead of hand-rolling this.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The full empty-state scene (greeting + composer + chips). */
+export const Default: Story = { render: () => <AiComposerScene /> };
+
+/** Just the double-card composer, to drop into a ChatShell footer. */
+export const ComposerOnly: Story = {
+  render: () => (
+    <div className="bg-background p-6">
+      <div className="mx-auto max-w-2xl">
+        <Composer onSubmit={() => undefined} />
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * The tinted-outer/distinct-inner "double card" (#254) — the look the
+ * shadcnuikit ai-chat-v2 exemplar this block was named after actually calls
+ * for: `<Composer tone="card" />` swaps the outer frame to `bg-surface-muted`
+ * around a `tone="card"` well, instead of the default outer `bg-card` frame
+ * `ComposerOnly`/`Default` above ship. Check both themes: the well is
+ * raised (lighter than the frame) on light themes, recessed (darker) on
+ * dark.
+ */
+export const DoubleCardToned: Story = {
+  render: () => (
+    <div className="bg-background p-6">
+      <div className="mx-auto max-w-2xl">
+        <Composer tone="card" onSubmit={() => undefined} suggestions={SUGGESTIONS} />
+      </div>
+    </div>
+  ),
+};

package/src/canvas.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+
+import { Canvas } from "./canvas";
+import { Controls } from "./controls";
+import { Edge } from "./edge";
+import { Node, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle } from "./node";
+import { Panel } from "./panel";
+import { NodeToolbar } from "./toolbar";
+
+const meta = {
+  title: "AI/Canvas",
+  component: Canvas,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "The **in-chat agent workspace graph** — a branded React Flow surface built from " +
+          "`Canvas`, `Node`, `Edge`, `Controls`, `Panel` and `NodeToolbar`. For an author-built " +
+          "diagram screen reach for `@elabs-ai/components-flow`'s `CanvasShell` " +
+          "instead (ADR 0018). React Flow itself is loaded through a dynamic `import()` " +
+          "(ADR 0019), so it is not in any consumer's entry chunk; the canvas reserves its " +
+          "box with a layout-shaped `Skeleton` until the engine chunk arrives.",
+      },
+    },
+  },
+} satisfies Meta<typeof Canvas>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type StepData = {
+  title: string;
+  description: string;
+  detail: string;
+  status: string;
+  toolbar?: boolean;
+};
+
+const StepNode = ({ data }: { data: StepData }) => (
+  <Node handles={{ source: true, target: true }}>
+    {data.toolbar ? (
+      <NodeToolbar isVisible>
+        <span className="text-meta text-muted-foreground">Agent step</span>
+      </NodeToolbar>
+    ) : null}
+    <NodeHeader>
+      <NodeTitle>{data.title}</NodeTitle>
+      <NodeDescription>{data.description}</NodeDescription>
+    </NodeHeader>
+    <NodeContent>
+      <p className="text-body text-muted-foreground">{data.detail}</p>
+    </NodeContent>
+    <NodeFooter>
+      <span className="text-meta text-muted-foreground">{data.status}</span>
+    </NodeFooter>
+  </Node>
+);
+
+// React Flow requires stable `nodeTypes` / `edgeTypes` identities.
+const nodeTypes = { step: StepNode };
+const edgeTypes = { animated: Edge.Animated, temporary: Edge.Temporary };
+
+const nodes = [
+  {
+    id: "plan",
+    type: "step",
+    position: { x: 0, y: 0 },
+    data: {
+      title: "Plan",
+      description: "Break the request into steps",
+      detail: "Reads the brief, drafts an ordered plan and asks for anything missing.",
+      status: "Completed",
+      toolbar: true,
+    },
+  },
+  {
+    id: "retrieve",
+    type: "step",
+    position: { x: 460, y: -80 },
+    data: {
+      title: "Retrieve",
+      description: "Gather the supporting sources",
+      detail: "Searches the connected spaces and pins the documents it will cite.",
+      status: "Running",
+    },
+  },
+  {
+    id: "draft",
+    type: "step",
+    position: { x: 460, y: 220 },
+    data: {
+      title: "Draft",
+      description: "Write the answer",
+      detail: "Produces the answer with inline citations back to the retrieved sources.",
+      status: "Queued",
+    },
+  },
+];
+
+const edges = [
+  { id: "plan-retrieve", source: "plan", target: "retrieve", type: "animated" },
+  { id: "plan-draft", source: "plan", target: "draft", type: "temporary" },
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="h-[600px] w-full">
+      <Canvas defaultEdges={edges} defaultNodes={nodes} edgeTypes={edgeTypes} nodeTypes={nodeTypes}>
+        <Controls />
+        <Panel position="top-left">
+          <span className="px-2 text-meta text-muted-foreground">Agent workspace</span>
+        </Panel>
+      </Canvas>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // React Flow arrives in a lazy chunk (#313): the nodes, the animated edge
+    // and the overlays are all absent for the first frame, so waiting for them
+    // locks in that every part resolves from the one shared boundary chunk.
+    await waitFor(
+      async () => {
+        await expect(canvas.getByText("Plan")).toBeInTheDocument();
+        await expect(canvas.getByText("Retrieve")).toBeInTheDocument();
+        await expect(canvas.getByText("Agent workspace")).toBeInTheDocument();
+      },
+      { timeout: 10000 },
+    );
+
+    // The handles are what edges attach to — a node that mounted without them
+    // would still show its title, so assert them explicitly.
+    await waitFor(() => {
+      expect(canvasElement.querySelectorAll(".react-flow__handle").length).toBeGreaterThanOrEqual(
+        6,
+      );
+      expect(canvasElement.querySelectorAll(".react-flow__edge-path").length).toBe(2);
+    });
+  },
+};

package/src/canvas.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Skeleton } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { ReactFlowProps } from "@xyflow/react";
+import type { ReactNode } from "react";
+import { Suspense } from "react";
+
+import { lazyFlowPart } from "./_flow-lazy";
+
+export type CanvasProps = ReactFlowProps & {
+  children?: ReactNode;
+};
+
+/**
+ * React Flow — and its stylesheet — is reached through a dynamic import: it
+ * declares no `sideEffects`, so a static import would put the whole engine in
+ * every consumer's entry chunk, a canvas rendered or not. `ReactFlowProps` above
+ * is a TYPE import and erases. See ADR 0019 and `pnpm heavy-deps:check`.
+ */
+const CanvasImpl = lazyFlowPart<CanvasProps>((m) => m.Canvas);
+
+export const Canvas = ({ className, ...props }: CanvasProps) => (
+  // The canvas fills the box its parent gives it, so the skeleton reserves the
+  // same space and the engine chunk arrives without a layout shift.
+  <Suspense fallback={<Skeleton className={cn("size-full", className)} />}>
+    <CanvasImpl className={className} {...props} />
+  </Suspense>
+);

package/src/chain-of-thought.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Badge, type Status } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import type { ComponentProps } from "react";
+import { createContext, memo, useContext, useMemo } from "react";
+
+import { AgentStep, AgentTimeline, type AgentStepProps } from "./agent-timeline";
+
+interface 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({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: open,
+    });
+
+    const chainOfThoughtContext = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);
+
+    return (
+      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
+        <div className={cn("not-prose w-full 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(
+            "flex w-full items-center gap-2 text-body text-muted-foreground transition-colors hover:text-foreground",
+            className,
+          )}
+          {...props}
+        >
+          <BrainIcon className="size-4" />
+          <span className="flex-1 text-start">{children ?? "Chain of Thought"}</span>
+          <ChevronDownIcon
+            className={cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0")}
+          />
+        </CollapsibleTrigger>
+      </Collapsible>
+    );
+  },
+);
+
+export type ChainOfThoughtStepProps = Omit<
+  AgentStepProps,
+  "name" | "summary" | "status" | "hideBadge"
+> & {
+  label: ReactNode;
+  description?: ReactNode;
+  status?: "complete" | "active" | "pending";
+};
+
+/**
+ * Step status → the canonical 7-state vocabulary (#189, research 10 §B.1):
+ * `active` is a running step.
+ */
+const stepStatusToCanonical: Record<NonNullable<ChainOfThoughtStepProps["status"]>, Status> = {
+  active: "running",
+  complete: "complete",
+  pending: "pending",
+};
+
+/**
+ * @deprecated Compose `AgentStep` (agent-timeline.tsx) directly. Since #192
+ * this is a thin alias mapping the legacy `label`/`description`/3-state
+ * `status` props onto the canonical rail (`AgentTimeline` + `AgentStep`); the
+ * pre-#192 hand-rolled connector + text-opacity status idiom is gone
+ * (research 10 §B.3). The badge stays hidden here — the rail node carries the
+ * status — keeping the quiet prose-rail look.
+ */
+export const ChainOfThoughtStep = memo(
+  ({ label, description, status = "complete", ...props }: ChainOfThoughtStepProps) => (
+    <AgentStep
+      hideBadge
+      name={label}
+      status={stepStatusToCanonical[status]}
+      summary={description}
+      {...props}
+    />
+  ),
+);
+
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+
+export const ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
+    <div className={cn("flex flex-wrap 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-meta 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-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
+            className,
+          )}
+          {...props}
+        >
+          <AgentTimeline>{children}</AgentTimeline>
+        </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="relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3">
+        {children}
+      </div>
+      {caption && <p className="text-meta text-muted-foreground">{caption}</p>}
+    </div>
+  ),
+);
+
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";