@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/composed/chat/chart.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import { useReducedMotion } from "motion/react"
+import type * as React from "react"
+import {
+  Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis,
+} from "recharts"
+import { cn } from "@/lib/utils"
+import { Card, CardFrame, CardFrameHeader, CardPanel } from "@/components/ui/card"
+import { Dot, LegendItem, Pill, type DotTone } from "@/components/ui/chat"
+
+export type ChartType = "pie" | "area" | "line" | "bar"
+
+export interface ChartSeries {
+  /** Key into each data row. */
+  key: string
+  label: React.ReactNode
+  /** Defaults to `var(--chart-series-N)` by position. */
+  color?: string
+  /** Renders a value in the legend and tooltip (`v => \`${v}%\``). */
+  format?: (value: number) => React.ReactNode
+}
+
+export type ChartDatum = { label: string; [key: string]: string | number }
+
+export interface ChartProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
+  type: ChartType
+  title?: React.ReactNode
+  subtitle?: React.ReactNode
+  /** Pill text; defaults to the capitalised type. */
+  badge?: React.ReactNode
+  data: ChartDatum[]
+  /** Series to plot; pie uses the first one. */
+  series: ChartSeries[]
+  /** Pie only: big number and caption in the donut's centre. */
+  center?: { value: React.ReactNode; label?: React.ReactNode }
+  /** Drop the title row (InsightCards embeds a bare plot). */
+  headerless?: boolean
+  /** Plot height in px; the card is 244 tall with the header. */
+  plotHeight?: number
+}
+
+const TYPE_LABEL: Record<ChartType, string> = { pie: "Pie", area: "Area", line: "Line", bar: "Bar" }
+
+const seriesColor = (s: ChartSeries, i: number) => s.color ?? `var(--chart-series-${(i % 5) + 1})`
+const seriesTone = (i: number) => `series-${(i % 5) + 1}` as DotTone
+
+const fmt = (s: ChartSeries | undefined, v: unknown): React.ReactNode =>
+  typeof v === "number" && s?.format ? s.format(v) : String(v)
+
+interface TooltipRow { name?: unknown; value?: unknown; color?: string; payload?: ChartDatum }
+
+/** Hover card: category label, then one dot · series · value row per series. */
+function ChartTooltip({ active, payload, label, series }: { active?: boolean; payload?: TooltipRow[]; label?: unknown; series: ChartSeries[] }): React.ReactElement | null {
+  if (!active || !payload?.length) return null
+  // Pie rows already carry the category as their name, so no heading there.
+  const heading = series.length > 1 || label !== undefined ? (label ?? payload[0].payload?.label) : undefined
+  return (
+    <div data-slot="chart-tooltip" className="min-w-28 rounded-md border border-border-default bg-surface-card px-2.5 py-2 shadow-md">
+      {heading !== undefined ? <div className="mb-1.5 text-[11px] font-medium leading-3 text-text-secondary">{String(heading)}</div> : null}
+      <ul className="flex flex-col gap-1">
+        {payload.map((row, i) => {
+          const si = Math.max(0, series.findIndex((s) => s.key === row.name))
+          const s = series[si]
+          return (
+            <li key={i} className="flex items-center gap-2 text-[11px] leading-3">
+              <Dot tone={seriesTone(series.length > 1 ? si : i)} />
+              <span className="truncate text-text-secondary">{series.length > 1 ? s?.label : (row.payload?.label ?? s?.label)}</span>
+              <span className="ml-auto pl-3 font-medium text-text-primary">{fmt(s, row.value)}</span>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+const AXIS = { tick: { fontSize: 11, fill: "var(--text-secondary)" }, axisLine: false, tickLine: false, dataKey: "label", interval: 0 as const }
+
+/**
+ * 320×244 chart card: title, subtitle, type pill, plot, x labels, legend.
+ * Series colours are the `--chart-series-*` tokens, grid is `--chart-grid`.
+ *
+ * @sketch "Component / Chart / {Pie, Area, Line, Bar}"
+ */
+export function Chart({
+  type, title, subtitle, badge, data, series, center, headerless = false, plotHeight, className, ...props
+}: ChartProps): React.ReactElement {
+  const height = plotHeight ?? (type === "pie" ? 140 : 150)
+  const empty = data.length === 0 || series.length === 0
+  const reduceMotion = useReducedMotion()
+  const anim = { isAnimationActive: !reduceMotion, animationDuration: 700, animationEasing: "ease-out" as const }
+  const tooltip = <Tooltip content={<ChartTooltip series={series} />} cursor={{ stroke: "var(--chart-grid)", fill: "var(--chart-grid)", fillOpacity: 0.4 }} isAnimationActive={!reduceMotion} animationDuration={150} />
+
+  const plot = (
+    <>
+      {type === "pie" ? (
+        <div className="flex items-center gap-6">
+          <div className="relative shrink-0" style={{ width: height, height }}>
+            {empty ? null : (
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  {tooltip}
+                  <Pie data={data} dataKey={series[0].key} nameKey="label" innerRadius="66%" outerRadius="100%" paddingAngle={2} stroke="none" {...anim}>
+                    {data.map((_, i) => <Cell key={i} fill={`var(--chart-series-${(i % 5) + 1})`} className="transition-opacity duration-200 hover:opacity-80" />)}
+                  </Pie>
+                </PieChart>
+              </ResponsiveContainer>
+            )}
+            {center ? (
+              <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+                <span className="text-[17px] font-semibold leading-5 text-text-primary">{center.value}</span>
+                {center.label ? <span className="text-[11px] leading-3 text-text-secondary">{center.label}</span> : null}
+              </div>
+            ) : null}
+          </div>
+          {empty ? null : (
+            <ul className="flex min-w-0 flex-1 flex-col gap-3.5">
+              {data.map((d, i) => (
+                <li key={d.label} className="flex">
+                  <LegendItem tone={seriesTone(i)} value={fmt(series[0], d[series[0].key])} className="w-full">{d.label}</LegendItem>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ) : (
+        <>
+          <div style={{ height }} className="w-full">
+            {empty ? null : (
+              <ResponsiveContainer width="100%" height="100%">
+                {type === "bar" ? (
+                  <BarChart data={data} margin={{ top: 4, right: 4, bottom: 0, left: 4 }} barCategoryGap="30%">
+                    <CartesianGrid vertical={false} stroke="var(--chart-grid)" />
+                    <XAxis {...AXIS} />
+                    {tooltip}
+                    {series.map((s, i) => <Bar key={s.key} dataKey={s.key} fill={seriesColor(s, i)} radius={[4, 4, 0, 0]} {...anim} />)}
+                  </BarChart>
+                ) : type === "line" ? (
+                  <LineChart data={data} margin={{ top: 4, right: 8, bottom: 0, left: 8 }}>
+                    <CartesianGrid vertical={false} stroke="var(--chart-grid)" />
+                    <XAxis {...AXIS} />
+                    {tooltip}
+                    {series.map((s, i) => (
+                      <Line key={s.key} type="monotone" dataKey={s.key} stroke={seriesColor(s, i)} strokeWidth={2} dot={{ r: 3, strokeWidth: 2, fill: "var(--surface-card)" }} activeDot={{ r: 5, strokeWidth: 0 }} {...anim} />
+                    ))}
+                  </LineChart>
+                ) : (
+                  <AreaChart data={data} margin={{ top: 4, right: 8, bottom: 0, left: 8 }}>
+                    <CartesianGrid vertical={false} stroke="var(--chart-grid)" />
+                    <XAxis {...AXIS} />
+                    {tooltip}
+                    {series.map((s, i) => (
+                      <Area key={s.key} type="monotone" dataKey={s.key} stroke={seriesColor(s, i)} strokeWidth={2} fill={i === 0 ? "var(--chart-area-fill)" : seriesColor(s, i)} fillOpacity={1} activeDot={{ r: 5, strokeWidth: 0 }} {...anim} />
+                    ))}
+                  </AreaChart>
+                )}
+              </ResponsiveContainer>
+            )}
+          </div>
+          {empty ? null : (
+            <div className="flex flex-wrap gap-4">
+              {series.map((s, i) => <LegendItem key={s.key} tone={seriesTone(i)}>{s.label}</LegendItem>)}
+            </div>
+          )}
+        </>
+      )}
+    </>
+  )
+
+  // Embedded (InsightCards) plots stay bare; a titled chart is a framed card.
+  if (headerless) {
+    return (
+      <div data-slot="chart" data-type={type} className={cn("flex w-80 max-w-full flex-col gap-2", className)} {...props}>
+        {plot}
+      </div>
+    )
+  }
+  return (
+    <CardFrame data-slot="chart" data-type={type} className={cn("w-80 max-w-full [--frame-radius:var(--radius-md)]", className)} {...props}>
+      <CardFrameHeader className="flex flex-row items-start justify-between gap-3 px-3.5 py-3">
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <span className="truncate text-[13px] font-semibold leading-4 text-text-primary">{title}</span>
+          {subtitle ? <span className="truncate text-[11px] leading-3 text-text-secondary">{subtitle}</span> : null}
+        </div>
+        <Pill>{badge ?? TYPE_LABEL[type]}</Pill>
+      </CardFrameHeader>
+      <Card>
+        <CardPanel className="flex flex-col gap-3 p-3.5">{plot}</CardPanel>
+      </Card>
+    </CardFrame>
+  )
+}

package/src/components/composed/chat/code-block.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { Copy, FileCode } from "lucide-react"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Card, CardFrame, CardFrameHeader } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { SegmentedToggle } from "@/components/ui/chat"
+
+export interface CodeDiffLine {
+  type?: "add" | "remove" | "context"
+  text: string
+}
+
+export interface CodeBlockProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onCopy"> {
+  filename?: React.ReactNode
+  code: string
+  /** Optional diff view; when absent the toggle is hidden. */
+  diff?: CodeDiffLine[]
+  view?: "code" | "diff"
+  defaultView?: "code" | "diff"
+  onViewChange?: (view: "code" | "diff") => void
+  onCopy?: (code: string) => void
+  /** Extra keywords for the tokenizer. */
+  keywords?: string[]
+}
+
+const KEYWORDS = new Set(["export", "import", "from", "async", "await", "function", "const", "let", "var", "return", "if", "else", "null", "true", "false", "new", "class", "type", "interface"])
+function isIdentifierStart(char: string): boolean {
+  const code = char.charCodeAt(0)
+  return char === "$" || char === "_" || (code >= 65 && code <= 90) || (code >= 97 && code <= 122)
+}
+
+function isIdentifierPart(char: string): boolean {
+  const code = char.charCodeAt(0)
+  return isIdentifierStart(char) || (code >= 48 && code <= 57)
+}
+
+/** Minimal highlighter: string literals and keywords only, as in the design. */
+export function tokenize(line: string, keywords: ReadonlySet<string>): React.ReactNode[] {
+  const out: React.ReactNode[] = []
+  let i = 0
+  while (i < line.length) {
+    const start = i
+    const quote = line[i]
+
+    if (quote === '"' || quote === "'" || quote === "`") {
+      for (i++; i < line.length; i++) {
+        if (line[i] === "\\") i++
+        else if (line[i] === quote) {
+          i++
+          break
+        }
+      }
+      out.push(<span key={start} className="text-code-string">{line.slice(start, i)}</span>)
+      continue
+    }
+
+    if (isIdentifierStart(line[i])) {
+      i++
+      while (i < line.length && isIdentifierPart(line[i])) i++
+      const word = line.slice(start, i)
+      out.push(keywords.has(word) ? <span key={start} className="text-code-keyword">{word}</span> : word)
+      continue
+    }
+
+    i++
+    while (i < line.length && line[i] !== '"' && line[i] !== "'" && line[i] !== "`" && !isIdentifierStart(line[i])) i++
+    out.push(line.slice(start, i))
+  }
+  return out
+}
+
+const VIEWS = [{ value: "code", label: "Code" }, { value: "diff", label: "Diff" }] as const
+
+/**
+ * Code card: filename header, Code | Diff toggle, Copy; gutter line numbers
+ * and keyword / string tinting from the `--code-*` tokens.
+ *
+ * @sketch "Component / Code Block"
+ */
+export function CodeBlock({ filename, code, diff, view, defaultView = "code", onViewChange, onCopy, keywords, className, ...props }: CodeBlockProps): React.ReactElement {
+  const [internal, setInternal] = React.useState<"code" | "diff">(defaultView)
+  const current = view ?? internal
+  const kw = React.useMemo(() => (keywords ? new Set([...KEYWORDS, ...keywords]) : KEYWORDS), [keywords])
+  const lines: CodeDiffLine[] = current === "diff" && diff ? diff : code.split("\n").map((text) => ({ text }))
+
+  return (
+    <CardFrame data-slot="code-block" data-view={current} className={cn("w-[420px] max-w-full", className)} {...props}>
+      <CardFrameHeader className="flex h-11 flex-row items-center gap-2 px-4 py-0">
+        <FileCode className="size-[15px] text-icon" />
+        <span className="flex-1 truncate font-mono text-[12px] font-semibold text-text-primary">{filename}</span>
+        {diff ? (
+          <SegmentedToggle
+            label="Code view"
+            options={VIEWS}
+            value={current}
+            onValueChange={(v) => {
+              if (view === undefined) setInternal(v)
+              onViewChange?.(v)
+            }}
+          />
+        ) : null}
+        <Button variant="ghost" size="xs" onClick={() => onCopy?.(code)} className="h-6 gap-1.5 rounded-md px-2 text-[11.5px] font-medium text-text-secondary hover:bg-surface-subtle hover:text-text-primary sm:h-6 [&_svg]:size-3.5! [&_svg]:opacity-100">
+          <Copy />Copy
+        </Button>
+      </CardFrameHeader>
+      <Card className="overflow-hidden">
+      <pre className="overflow-x-auto bg-surface-code py-3 font-mono text-[11.5px] leading-[21px] text-text-primary">
+        {lines.map((line, i) => (
+          <div
+            key={i}
+            className={cn("flex", line.type === "add" && "bg-semantic-success-subtle", line.type === "remove" && "bg-semantic-danger-subtle")}
+          >
+            <span className="w-10 shrink-0 select-none border-r border-border-default pr-2.5 text-right text-[11px] text-text-muted">{line.type === "add" ? "+" : line.type === "remove" ? "−" : i + 1}</span>
+            <span className="whitespace-pre pl-3">{tokenize(line.text, kw)}</span>
+          </div>
+        ))}
+      </pre>
+      </Card>
+    </CardFrame>
+  )
+}

package/src/components/composed/chat/composer/add-button.tsx

@@ -0,0 +1,22 @@
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import type { PopoverTriggerState } from "@base-ui/react";
+import { cn } from "@/lib/utils";
+
+export function AddButton({ state, ...props}: ButtonProps & { state: PopoverTriggerState }) {
+  // One attach button for both shapes: it is absolutely positioned in each,
+  // so the class swap moves it and `layout` glides it between the two spots
+  // rather than mounting a second control.
+  return (
+    <Button
+      {...props}
+      aria-label={"Add attachment"}
+      className={cn("bg-background/50 [&_svg]:transition-transform [&_svg]:duration-200 [&_svg]:ease-smooth-out hover:[&_svg]:rotate-90 data-popup-open:[&_svg]:rotate-45 motion-reduce:hover:[&_svg]:rotate-0", state.open && "data-popup-open")}
+      size="icon-lg"
+      glassVariant="liquid-refract"
+      variant="glass"
+    >
+      <Plus className="size-4 stroke-3" />
+    </Button>
+  )
+}

package/src/components/composed/chat/composer/base.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+import { motion, useReducedMotion } from "motion/react"
+import { useAtom } from "jotai"
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { BOUNCE_IN_OUT, EASE_OUT, SPRING_PANEL } from "@/lib/ease"
+import { Textarea } from "@/components/ui/textarea"
+import { Text } from "@/components/atoms"
+import { Attachment } from "../attachment"
+import { SendHint } from "@/components/composed/chat"
+import type {
+  ComposerMode,
+  IComposerProps,
+  IComposerSubmitButtonProps,
+} from "../type"
+import { composerAttachmentsAtom, removeComposerInstance } from "./utils"
+import { SendButton } from "./send-button"
+
+/**
+ * Prompt field with two shapes: a pill at rest showing the "⌘ + ↵" hint,
+ * that squares off into a taller field on focus with the attach and Send
+ * controls springing in along its bottom edge.
+ */
+export function Composer({
+  value,
+  onValueChange,
+  composerId,
+  attachments: seedAttachments,
+  isStreaming = false,
+  disabled = false,
+  safetyNote,
+  expanded = false,
+  placeholder = "Ask about this selection…",
+  SubmitButton,
+  ComposerMenu,
+  Suggestions,
+  defaultValue = "",
+  onSubmit,
+  onStop,
+  className,
+}: IComposerProps): React.ReactElement {
+  const reduceMotion = useReducedMotion()
+  const [internalValue, setInternalValue] = useState(defaultValue)
+  const [isFocused, setIsExpanded] = useState(expanded)
+  const [mode] = useState<ComposerMode>("answer")
+  // The prompts fold when the field expands: the two never stack open.
+  const [promptsOpen, setPromptsOpen] = useState(true)
+
+  const expand = (): void => {
+    setIsExpanded(true)
+    if (promptsOpen) setPromptsOpen(false)
+  }
+
+  const generatedId = useId()
+  const id = composerId ?? generatedId
+  const [attachments, setAttachments] = useAtom(composerAttachmentsAtom(id))
+
+  // Seed once, then the atoms own the tray. A passive effect on purpose:
+  // jotai (v3) subscribes `useAtom` in its own `useEffect` with no
+  // post-subscription recheck, so a `useLayoutEffect` write would land before
+  // the subscription exists and the tray would never re-render.
+  const seeded = useRef(false)
+  useEffect(() => {
+    if (seeded.current) return
+    seeded.current = true
+    if (seedAttachments?.length) setAttachments(seedAttachments)
+  }, [seedAttachments, setAttachments])
+
+  useEffect(() => {
+    if (composerId) return
+    return () => removeComposerInstance(id)
+  }, [composerId, id])
+  const draft = value ?? internalValue
+  // The pill has no room for a tray: chips or a draft hold the tall shape open.
+  const isExpanded = isFocused || draft.length > 0 || attachments.length > 0
+  const isDisabled = disabled || isStreaming
+  const showRestHint = !isExpanded && draft.length === 0
+
+  const changeValue = (next: string): void => {
+    if (value === undefined) setInternalValue(next)
+    onValueChange?.(next)
+  }
+
+  const send = useCallback((): void => {
+    const trimmed = draft.trim()
+    if (!trimmed || isDisabled) return
+    onSubmit?.(trimmed, mode, attachments)
+    if (value === undefined) setInternalValue("")
+  }, [attachments, draft, isDisabled, onSubmit, mode, value])
+
+  // The slot swaps rarely; memoise the motion wrapper so Motion does not see
+  // a brand-new component type (and remount the button) on every render.
+  const Submit: React.FC<IComposerSubmitButtonProps> =
+    SubmitButton ?? (SendButton as React.FC<IComposerSubmitButtonProps>)
+  const MotionSubmit = useMemo(() => motion.create(Submit), [Submit])
+
+  // Always mounted: the fade in/out is driven by `animate` alone (opacity
+  // tween + y spring), so there is no AnimatePresence exit to freeze mid-flight
+  // or unmount early. Collapsed, it is inert and invisible but keeps its slot —
+  // the hint's flex-1 absorbs it, so the pill shape never reflows.
+  const renderSendButton = () =>(
+    <MotionSubmit
+      // Empty-draft must NOT disable: the disabled:opacity-50! rule would
+      // pin Motion's inline opacity at 0.5 and break the fade. send() guards
+      // empty drafts, and the collapsed button is pointer-events-none.
+      disabled={isDisabled && !isStreaming}
+      isExpanded={isExpanded}
+      isStreaming={isStreaming}
+      onStop={onStop}
+      transition={{
+        y: BOUNCE_IN_OUT,
+        opacity: { duration: 0.16, ease: EASE_OUT },
+      }}
+      animate={{
+        opacity: isExpanded ? 1 : 0,
+        y: isExpanded ? 0 : 10,
+      }}
+      initial={false}
+    />
+  )
+
+  const renderTextarea = () => (
+    <Textarea
+      aria-label="Message"
+      className={cn(
+        "flex w-full flex-1 items-center text-sm text-foreground has-disabled:cursor-not-allowed has-disabled:opacity-50 [&_textarea]:resize-none [&_textarea]:px-2 [&_textarea]:placeholder:text-sm [&_textarea]:placeholder:text-muted-foreground/60",
+        // Transition the textarea's own box so the auto-height shell
+        // follows smoothly in both directions (expand and collapse).
+        "[&_textarea]:transition-[min-height,padding] [&_textarea]:duration-300 [&_textarea]:ease-smooth-out motion-reduce:[&_textarea]:transition-none",
+        isExpanded
+          ? "[&_textarea]:min-h-14 [&_textarea]:py-2"
+          : "h-full [&_textarea]:min-h-0 [&_textarea]:py-0",
+        !isExpanded && ComposerMenu && "[&_textarea]:pr-12",
+        // The rest state paints its own keycap hint over the field.
+        showRestHint && "[&_textarea]:placeholder:text-transparent"
+      )}
+
+      disabled={isDisabled}
+      onChange={(event) => changeValue(event.target.value)}
+      onKeyDown={(event) => {
+        if (event.key === "Escape" && isStreaming) {
+          event.preventDefault()
+          onStop?.()
+        }
+        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault()
+          send()
+        }
+      }}
+      placeholder={placeholder}
+      unstyled
+      value={draft}
+    />
+  )
+
+  return (
+    <form
+      className="w-full max-w-3xl"
+      data-expanded={isExpanded ? "" : undefined}
+      data-slot="composer"
+      onSubmit={(event) => {
+        event.preventDefault()
+        send()
+      }}
+    >
+      {/* Sibling of the shell, never a child: the shell animates `layout`,
+          which Motion runs as a scale, and a list that grows and shrinks
+          inside it would drive that scale for an unrelated reason and
+          distort the field. The pill just paints over the panel's tucked
+          bottom edge instead. */}
+      {Suggestions ? (
+        <Suggestions onOpenChange={setPromptsOpen} open={promptsOpen} />
+      ) : null}
+      <motion.div
+        // The textarea trades `absolute` for static between the two shapes, so
+        // the box's height changes in a single frame. `layout` measures the two
+        // boxes and springs between them, which is also what keeps the controls
+        // row from teleporting down and swallowing the send hint's slide.
+        layout={!reduceMotion}
+        className={cn(
+          "relative z-10 flex flex-1 flex-col overflow-clip bg-(--chat-field) p-2.5 transition-shadow duration-300 ease-smooth-out",
+          isExpanded
+            ? "items-end rounded-t-md rounded-b-[calc(var(--radius-md)+--spacing(2.5))] shadow-[inset_0px_0px_7px_1px_rgba(0,_0,_0,_0.2)]"
+            : "items-center rounded-full shadow-[inset_0px_0px_5px_-0.5px_rgba(0,_0,_0,_0.3)]",
+          "py-2.5 motion-reduce:transition-none",
+          className
+        )}
+        initial={false}
+        onBlur={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) {
+            setIsExpanded(false)
+          }
+        }}
+        onFocus={expand}
+        transition={reduceMotion ? { duration: 0 } : SPRING_PANEL}
+      >
+        {attachments.length > 0 ? (
+          <div
+            className="flex w-full flex-wrap gap-2 p-1.5"
+            data-slot="composer-tray"
+          >
+            {attachments.map(({ id: itemId, ...item }) => (
+              <Attachment
+                key={itemId}
+                {...item}
+                onRemove={() =>
+                  setAttachments(attachments.filter((a) => a.id !== itemId))
+                }
+              />
+            ))}
+          </div>
+        ) : null}
+        {/* The shell's `layout` animation is a scale, so the field has to be
+            positioned *by* this wrapper, not against the shell — an absolute
+            child of the shell leaves the projection tree and inherits that
+            scale uncorrected, stretching draft text ~2.3x on collapse. */}
+        <motion.div
+          className={cn("w-full", !isExpanded && "absolute inset-0 z-10")}
+          layout={!reduceMotion && "position"}
+          transition={reduceMotion ? { duration: 0 } : SPRING_PANEL}
+        >
+          {renderTextarea()}
+        </motion.div>
+        <motion.div
+          className={cn(
+            "relative flex w-full flex-1 flex-row items-center justify-stretch gap-x-1"
+          )}
+          layout={!reduceMotion && "position"}
+          transition={reduceMotion ? { duration: 0 } : SPRING_PANEL}
+        >
+          {ComposerMenu && <ComposerMenu />}
+          <SendHint className="pl-1" verbose={isExpanded} />
+          {renderSendButton()}
+        </motion.div>
+      </motion.div>
+      {safetyNote && (
+        <Text.Label
+          level="caption"
+          className="mt-1 max-w-5/6 pl-1.5 text-[10px]"
+        >
+          {safetyNote}
+        </Text.Label>
+      )}
+    </form>
+  )
+}

package/src/components/composed/chat/composer/command-menu.tsx

@@ -0,0 +1,42 @@
+import type { IComposerMenuProps } from "../type"
+import { Popover, PopoverPopup, PopoverTrigger } from "@/components/ui/popover"
+import {
+  CommandItem,
+  CommandPanel,
+  CommandShortcut,
+} from "@/components/ui/command"
+import { AddButton } from "./add-button"
+
+export function CommandMenu({
+  items = [],
+  onCommand,
+}: IComposerMenuProps): React.ReactElement {
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={(props, state) => <AddButton {...props} state={state} />}
+      />
+      <PopoverPopup className="w-80">
+        <div className="mb-2">
+          <CommandPanel>
+            {items &&
+              items.map((item, index) => (
+                <CommandItem
+                  key={index}
+                  value={item.id}
+                  onClick={() => onCommand?.(item)}
+                >
+                  <div>
+                    {item.icon}
+                    {item.label}
+                  </div>
+                  <div>{item.description}</div>
+                  <CommandShortcut>{item.trailing}</CommandShortcut>
+                </CommandItem>
+              ))}
+          </CommandPanel>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  )
+}

package/src/components/composed/chat/composer/hooks.ts

@@ -0,0 +1,29 @@
+import { useAtomValue, useSetAtom } from "jotai"
+import { useCallback } from "react"
+
+import type { ComposerAttachment } from "../type"
+import {
+  addComposerAttachmentAtom,
+  clearComposerAttachmentsAtom,
+  composerAttachmentsAtom,
+  removeComposerAttachmentAtom,
+} from "./utils"
+
+/** Read the tray of one composer. */
+export function useComposerAttachments(
+  composerId: string
+): ComposerAttachment[] {
+  return useAtomValue(composerAttachmentsAtom(composerId))
+}
+
+/** Write-only tray actions; never re-renders the caller when the tray changes. */
+export function useComposerAttachmentActions(composerId: string) {
+  const add = useSetAtom(addComposerAttachmentAtom(composerId))
+  const remove = useSetAtom(removeComposerAttachmentAtom(composerId))
+  const clear = useSetAtom(clearComposerAttachmentsAtom(composerId))
+  return {
+    add: useCallback((item: ComposerAttachment) => add(item), [add]),
+    remove: useCallback((itemId: string) => remove(itemId), [remove]),
+    clear: useCallback(() => clear(), [clear]),
+  }
+}

package/src/components/composed/chat/composer/index.ts

@@ -0,0 +1,19 @@
+import { Composer } from "./base"
+
+export type * from "../type"
+
+export { Composer }
+export { SendButton } from "./send-button"
+export { AddButton } from "./add-button"
+export { CommandMenu } from "./command-menu"
+export { SuggestedPrompts } from "./suggestions"
+export {
+  addComposerAttachmentAtom,
+  clearComposerAttachmentsAtom,
+  composerAttachmentsAtom,
+  removeComposerAttachmentAtom,
+  removeComposerInstance,
+} from "./utils"
+export { useComposerAttachmentActions, useComposerAttachments } from "./hooks"
+
+export default Composer