@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/composed/chat/recommendation/item.tsx

@@ -0,0 +1,244 @@
+"use client"
+
+import { Check, Undo2, X } from "lucide-react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
+import type * as React from "react"
+import {
+  AccordionItem,
+  AccordionPanel,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardFrame,
+  CardFrameFooter,
+  CardPanel,
+} from "@/components/ui/card"
+import { AvatarHandle, Signal, Tag } from "@/components/ui/chat"
+import { EASE_IN_OUT, EASE_OUT_STRONG } from "@/lib/ease"
+import { cn } from "@/lib/utils"
+import { Checkbox } from "./checkbox"
+import { CONFIDENCE, STATE_LABEL, STATE_TONE } from "./constant"
+import type { RecommendationItemProps } from "./types"
+
+const ACTION_MOTION = {
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 4 },
+  initial: { opacity: 0, y: 4 },
+  transition: { duration: 0.18, ease: EASE_IN_OUT },
+} as const
+
+/** Row entrance, driven by the Group's staggered `visible` variant. */
+const ROW_VARIANTS = {
+  hidden: { opacity: 0, y: 8 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.45, ease: EASE_OUT_STRONG },
+  },
+} as const
+
+/**
+ * Human-in-the-loop proposal: title, description with entity + lead-time
+ * pills, other options with signal bars, confidence + Accept / Alternatives.
+ * Outcome mark, badge, and the pending ↔ undo swap come from SuggestionCard.
+ *
+ * Must render inside `Recommendation.Group`.
+ *
+ * @sketch "Component / Recommendation Card"
+ */
+export function Item({
+  value,
+  title,
+  description,
+  entity,
+  descriptionSuffix,
+  leadTime,
+  options = [],
+  optionsLabel = "Other options",
+  confidence = "high",
+  confidenceLabel,
+  acceptLabel = "Accept",
+  rejectLabel,
+  alternativesLabel = "Alternatives",
+  state = "pending",
+  step,
+  onAccept,
+  onReject,
+  onAlternatives,
+  onUndo,
+  onSelectOption,
+  children,
+  className,
+  ...props
+}: RecommendationItemProps): React.ReactElement {
+  const declined = state === "rejected"
+  const decline = onReject ?? onAlternatives
+  const declineLabel = rejectLabel ?? alternativesLabel
+  const reduceMotion = useReducedMotion()
+  // Options mount with the panel, so they drop in staggered on every open.
+  const optionMotion = (index: number) =>
+    reduceMotion
+      ? {}
+      : {
+          animate: { opacity: 1, y: 0 },
+          initial: { opacity: 0, y: 6 },
+          transition: {
+            delay: 0.12 + index * 0.1,
+            duration: 0.3,
+            ease: EASE_OUT_STRONG,
+          },
+        }
+
+  return (
+    <AccordionItem
+      className="border-0 last:border-0"
+      render={<motion.div variants={reduceMotion ? undefined : ROW_VARIANTS} />}
+      value={value}
+      {...props}
+    >
+      <CardFrame
+        className={cn(
+          "max-w-full [--frame-radius:var(--radius-md)]",
+          className
+        )}
+        data-slot="recommendation-card"
+        data-state={state}
+      >
+        <AccordionTrigger className="relative items-center gap-3 rounded-t-[calc(var(--radius-md)-1px)] rounded-b-none px-3 py-2.5 text-left hover:bg-black/4 focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-white/4">
+          <Checkbox state={state} step={step} />
+          <div className="flex min-w-0 flex-1 flex-col items-start gap-1">
+            <span
+              className={cn(
+                "w-full text-[14px] leading-4 font-semibold text-text-primary",
+                declined && "font-light text-muted-foreground line-through"
+              )}
+            >
+              {title}
+            </span>
+            <span
+              className={cn(
+                "flex w-full flex-wrap items-center gap-x-1.5 gap-y-1.5 text-[13px] leading-[15px] text-text-secondary",
+                declined && "line-through opacity-50"
+              )}
+            >
+              {description}
+              {entity ? (
+                <span className="inline-flex h-[22px] items-center gap-1.5 rounded-full bg-surface-subtle py-0.5 pr-2 pl-0.5 text-[12px] font-medium text-text-primary">
+                  <AvatarHandle
+                    initials={entity.initials}
+                    size={16}
+                    src={entity.src}
+                  />
+                  {entity.name}
+                </span>
+              ) : null}
+              {descriptionSuffix}
+              {leadTime ? (
+                <Tag className="rounded-full" tone="green">
+                  {leadTime}
+                </Tag>
+              ) : null}
+            </span>
+          </div>
+          {state === "accepted" || state === "rejected" ? (
+            <Tag className="uppercase" tone={STATE_TONE[state]}>
+              {STATE_LABEL[state]}
+            </Tag>
+          ) : null}
+        </AccordionTrigger>
+
+        {/* `relative`: the frame's ::before veil is positioned, so an
+            unpositioned panel body would paint under it and look faded. */}
+        <AccordionPanel className="relative px-0 pb-0">
+          {options.length ? (
+            <Card className="mx-3 rounded-md before:rounded-[calc(var(--radius-md)-1px)]">
+              <CardPanel className="flex flex-col gap-2 px-3.5 py-2.5">
+                <span className="text-[11px] leading-3 text-text-secondary">
+                  {optionsLabel}
+                </span>
+                {options.map((option, index) => (
+                  <motion.button
+                    {...optionMotion(index)}
+                    className="-mx-2 flex h-6 items-center gap-2.5 rounded-md px-2 text-left text-[12.5px] leading-none text-text-primary outline-none hover:bg-black/4 focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-white/6"
+                    key={index}
+                    onClick={() => onSelectOption?.(index)}
+                    type="button"
+                  >
+                    <Signal level={option.signal ?? "low"} />
+                    <span className="flex-1 truncate">{option.label}</span>
+                    {option.status ? (
+                      <span className="text-[11px] text-text-muted">
+                        {option.status}
+                      </span>
+                    ) : null}
+                  </motion.button>
+                ))}
+              </CardPanel>
+            </Card>
+          ) : null}
+          {children ? (
+            <div className="px-3 pb-2 text-sm leading-[22px] text-foreground/90">
+              {children}
+            </div>
+          ) : null}
+          <CardFrameFooter className="relative flex items-center gap-2 px-4 py-3">
+            <Signal level={confidence} />
+            <span className="text-[12.5px] text-text-primary">
+              {confidenceLabel ?? CONFIDENCE[confidence]}
+            </span>
+            <span className="ml-auto flex items-center gap-2">
+              <AnimatePresence initial={false} mode="wait">
+                {state === "running" ? (
+                  // The spinner in the heading already reports progress; the
+                  // approval actions are gone and Undo is not offered mid-run.
+                  <motion.div {...ACTION_MOTION} key="running" />
+                ) : state === "pending" ? (
+                  <motion.div
+                    {...ACTION_MOTION}
+                    className="flex items-center gap-2"
+                    key="actions"
+                  >
+                    <Button
+                      className="h-[27px] rounded-full px-3 text-[12px] font-medium sm:h-[27px]"
+                      onClick={decline}
+                      size="xs"
+                      variant="outline"
+                    >
+                      <X className="size-3 stroke-3" />
+                      {declineLabel}
+                    </Button>
+                    <Button onClick={onAccept} size="xs" variant="default">
+                      <Check className="size-3 stroke-3" />
+                      {acceptLabel}
+                    </Button>
+                  </motion.div>
+                ) : (
+                  // Always a node, never null: `mode="wait"` only releases the
+                  // leaving actions once a sibling enters behind them.
+                  <motion.div
+                    {...ACTION_MOTION}
+                    className="inline-flex items-center gap-1 text-xs font-normal text-success-foreground"
+                    key={state}
+                  >
+                    {onUndo ? (
+                      <Button
+                        className="text-amber-400"
+                        onClick={onUndo}
+                        size="xs"
+                        variant="ghost"
+                      >
+                        <Undo2 className="size-3 stroke-3" /> Undo
+                      </Button>
+                    ) : null}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </span>
+          </CardFrameFooter>
+        </AccordionPanel>
+      </CardFrame>
+    </AccordionItem>
+  )
+}

package/src/components/composed/chat/recommendation/types.ts

@@ -0,0 +1,65 @@
+import type * as React from "react"
+import type { SignalLevel } from "@/components/ui/chat"
+
+export interface RecommendationOption {
+  label: React.ReactNode
+  status?: React.ReactNode
+  signal?: SignalLevel
+}
+
+export interface RecommendationEntity {
+  name: React.ReactNode
+  initials?: string
+  src?: string
+}
+
+export type RecommendationState =
+  | "accepted"
+  | "rejected"
+  | "pending"
+  /** The proposal was approved and the agent is working on it. */
+  | "running"
+
+/** Shared fields of a human-in-the-loop proposal. */
+export interface RecommendationFields {
+  title: React.ReactNode
+  /** Sentence fragments around the entity and lead-time pills. */
+  description: React.ReactNode
+  entity?: RecommendationEntity
+  descriptionSuffix?: React.ReactNode
+  leadTime?: React.ReactNode
+  options?: RecommendationOption[]
+  optionsLabel?: React.ReactNode
+  confidence?: SignalLevel
+  confidenceLabel?: React.ReactNode
+  acceptLabel?: React.ReactNode
+  rejectLabel?: React.ReactNode
+  alternativesLabel?: React.ReactNode
+  state?: RecommendationState
+  /** Number inside the pending ring, e.g. the item's position in its group. */
+  step?: number
+  onAccept?: () => void
+  /** Skip / ignore. Wins over `onAlternatives` when both are passed. */
+  onReject?: () => void
+  onAlternatives?: () => void
+  /** Takes the card back to `pending`. Without it no Undo is offered. */
+  onUndo?: () => void
+  onSelectOption?: (index: number) => void
+  children?: React.ReactNode
+}
+
+export interface RecommendationItemProps
+  extends
+    RecommendationFields,
+    Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> {
+  /** Accordion item identity. Required inside `Recommendation.Group`. */
+  value: string
+}
+
+export interface RecommendationCardProps extends RecommendationFields {
+  /** Accordion item identity. Auto-generated when omitted. */
+  value?: string
+  /** Uncontrolled initial open state. Default true — Accept lives in the body. */
+  defaultOpen?: boolean
+  className?: string
+}

package/src/components/composed/chat/records-table.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import { ChevronsUpDown } from "lucide-react"
+import { useAtom } from "jotai"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Card } from "@/components/ui/card"
+import { createKeyedFamilies } from "@/lib/keyed-atom"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Tag, type TagTone } from "@/components/ui/chat"
+
+const { stateFamily, removeInstance } = createKeyedFamilies("recordsTable")
+
+/** Selected row ids, keyed by `tableId`. */
+export const recordsTableSelectionAtom = stateFamily<ReadonlySet<string>>("selection", new Set<string>())
+export const removeRecordsTableInstance = removeInstance
+
+export interface RecordsRow {
+  id: string
+  name: React.ReactNode
+  initial?: string
+  avatarSrc?: string
+  tags?: { label: React.ReactNode; tone?: TagTone }[]
+  /** Max tags shown inline; the rest collapse to "+N". */
+  lastInteraction?: React.ReactNode
+  strength?: React.ReactNode
+}
+
+export type RecordsColumnKey = "name" | "tags" | "lastInteraction" | "strength"
+
+export interface RecordsTableProps extends React.ComponentPropsWithoutRef<"div"> {
+  tableId?: string
+  rows: RecordsRow[]
+  headers?: Partial<Record<RecordsColumnKey, React.ReactNode>>
+  maxTags?: number
+  selected?: ReadonlySet<string>
+  onSelectionChange?: (selected: ReadonlySet<string>) => void
+  /** Sort is the caller's: the design shows the control only. */
+  onSortChange?: (column: RecordsColumnKey) => void
+}
+
+const HEADERS: Record<RecordsColumnKey, string> = { name: "Company", tags: "Categories", lastInteraction: "Last interaction", strength: "Connection" }
+
+/**
+ * Selectable records table: index, initial avatar, name, tag row with
+ * overflow, relative date, connection strength; sortable headers.
+ *
+ * @sketch "Component / Records Table"
+ */
+export function RecordsTable({ tableId, rows, headers, maxTags = 2, selected, onSelectionChange, onSortChange, className, ...props }: RecordsTableProps): React.ReactElement {
+  const generatedId = React.useId()
+  const id = tableId ?? generatedId
+  const [stored, setStored] = useAtom(recordsTableSelectionAtom(id))
+  const current = selected ?? stored
+  const update = (next: ReadonlySet<string>) => {
+    if (selected === undefined) setStored(next)
+    onSelectionChange?.(next)
+  }
+  React.useEffect(() => {
+    if (tableId) return
+    return () => removeRecordsTableInstance(id)
+  }, [tableId, id])
+
+  const all = rows.length > 0 && rows.every((r) => current.has(r.id))
+  const some = !all && rows.some((r) => current.has(r.id))
+  const toggleAll = () => update(all ? new Set() : new Set(rows.map((r) => r.id)))
+  const toggle = (rowId: string) => {
+    const next = new Set(current)
+    if (next.has(rowId)) next.delete(rowId)
+    else next.add(rowId)
+    update(next)
+  }
+  const h = { ...HEADERS, ...headers }
+  const sortable = (key: RecordsColumnKey, label: React.ReactNode) => (
+    <button type="button" onClick={() => onSortChange?.(key)} className="inline-flex items-center gap-1.5 text-left outline-none hover:text-text-primary focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3 [&_svg]:text-text-muted">
+      {label}<ChevronsUpDown />
+    </button>
+  )
+
+  return (
+    <Card data-slot="records-table" className={cn("w-[540px] max-w-full overflow-x-auto", className)} {...props}>
+      <table className="w-full border-collapse text-left">
+        <thead>
+          <tr className="border-b border-border-default text-[11px] font-medium leading-3 text-text-secondary">
+            <th className="w-7 py-2.5 pl-3"><Checkbox aria-label="Select all" checked={all} indeterminate={some} onCheckedChange={toggleAll} className="size-4" /></th>
+            <th className="px-2 py-2.5">{h.name}</th>
+            <th className="px-2 py-2.5">{sortable("tags", h.tags)}</th>
+            <th className="px-2 py-2.5">{sortable("lastInteraction", h.lastInteraction)}</th>
+            <th className="px-2 py-2.5 pr-3">{sortable("strength", h.strength)}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => {
+            const tags = row.tags ?? []
+            const extra = tags.length - maxTags
+            const checked = current.has(row.id)
+            return (
+              <tr key={row.id} data-selected={checked || undefined} className="border-b border-border-default last:border-b-0 data-selected:bg-accent-subtle/40">
+                <td className="py-2 pl-3">
+                  <span className="flex items-center gap-2">
+                    <span className="w-2 text-[11px] text-text-muted group-hover:hidden">{i + 1}</span>
+                    <Checkbox aria-label={`Select row ${i + 1}`} checked={checked} onCheckedChange={() => toggle(row.id)} className="size-4" />
+                  </span>
+                </td>
+                <td className="px-2 py-2">
+                  <span className="flex items-center gap-2">
+                    <span className="inline-flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-subtle text-[9px] font-semibold text-text-secondary">
+                      {row.avatarSrc ? <img alt="" className="size-full object-cover" src={row.avatarSrc} /> : row.initial}
+                    </span>
+                    <span className="truncate text-[13px] font-medium leading-4 text-text-primary">{row.name}</span>
+                  </span>
+                </td>
+                <td className="px-2 py-2">
+                  <span className="flex items-center gap-1">
+                    {tags.slice(0, maxTags).map((t, ti) => <Tag key={ti} tone={t.tone}>{t.label}</Tag>)}
+                    {extra > 0 ? <span className="text-[12px] text-text-secondary">+{extra}</span> : null}
+                  </span>
+                </td>
+                <td className="px-2 py-2 text-[12.5px] text-text-secondary">{row.lastInteraction}</td>
+                <td className="px-2 py-2 pr-3 text-[12.5px] text-text-secondary">{row.strength}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </Card>
+  )
+}

package/src/components/composed/chat/type.ts

@@ -0,0 +1,126 @@
+import type * as React from "react"
+
+import type { MenuCommandItem } from "@/components/ui/menu-command"
+import type { AttachmentProps } from "./attachment"
+import type { HTMLMotionProps } from "motion/react"
+import type { AtomSize } from "@/components/atoms/types"
+
+export type ComposerMode = "answer" | "fix" | "ask"
+
+/** A tray chip: any Attachment kind plus a stable id. */
+export type ComposerAttachment = Omit<
+  AttachmentProps,
+  "variant" | "onRemove" | "removable"
+> & { id: string }
+
+export interface IComposerMenuProps {
+  items?: MenuCommandItem[]
+  onCommand?: (item: MenuCommandItem) => void
+  onAttach?: () => void
+}
+
+export interface ComposerSuggestionsProps {
+  prompts?: React.ReactNode
+  label?: (count: number) => React.ReactNode
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface IComposerSubmitButtonProps<
+  S extends boolean = boolean,
+  E extends boolean = boolean,
+> {
+  onStop?: () => void
+  disabled?: boolean
+  isStreaming: S
+  isExpanded: E
+}
+
+export interface ComposerModeProps {
+  mode: ComposerMode
+  onModeChange?: (mode: ComposerMode) => void
+}
+
+export interface ComposerBaseProps<
+  S extends boolean = boolean,
+  E extends boolean = boolean,
+  M extends ComposerMode = ComposerMode,
+  A extends ComposerAttachment = ComposerAttachment,
+> {
+  value?: string
+  onValueChange?: (value: string) => void
+  composerId?: string
+  /** Seeds the tray once on mount; the atoms own it from then on. */
+  attachments?: A[]
+  /** Start in the tall, focused layout. */
+  expanded?: E
+  isStreaming?: S
+  disabled?: boolean
+  safetyNote?: React.ReactNode
+  placeholder?: string
+  onSubmit?: (value: string, mode: M, attachments: A[]) => void
+  /** Fires from the streaming Stop button and the Escape key. */
+  onStop?: () => void
+  className?: string
+  defaultValue?: string
+}
+
+export interface IComposerProps<
+  IMode extends ComposerModeProps = ComposerModeProps,
+  S extends boolean = boolean,
+  E extends boolean = boolean,
+> extends ComposerBaseProps<S, E> {
+  /** Replaces the default `SendButton`. Receives the streaming/expanded state. */
+  SubmitButton?: React.FC<IComposerSubmitButtonProps<S, E>>
+  ModeComponent?: React.FC<IMode>
+  Suggestions?: React.FC<ComposerSuggestionsProps>
+  ComposerMenu?: React.FC<IComposerMenuProps>
+}
+
+export interface SuggestedPromptsProps extends Omit<
+  HTMLMotionProps<"div">,
+  "children"
+> {
+  /** The `SuggestedPrompt` rows. */
+  children: React.ReactNode
+  /** Overrides the count derived from `children`. */
+  count?: number
+  /** Names the disclosure. `Suggestions (n)` by default. */
+  label?: (count: number) => React.ReactNode
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export type TBubbleActionPayload =
+  string | number | Record<string, unknown> | undefined
+export type TBubbleActionSize = Extract<AtomSize, "sm" | "default" | "lg">
+export type TBubbleActionKey =
+  "copy" | "edit" | "delete" | "share" | "retry" | "more" | "download"
+export interface IBubbleActionBaseProps<
+  S extends TBubbleActionSize = TBubbleActionSize,
+  K extends TBubbleActionKey = TBubbleActionKey,
+  P extends TBubbleActionPayload = TBubbleActionPayload,
+> {
+  key: K
+  onClick?: (key: K, payload: P) => void
+  icon?: React.ReactNode
+  tooltip?: string
+  size?: S
+}
+
+export type IBubbleActionProps<
+  K extends TBubbleActionKey = TBubbleActionKey,
+  S extends TBubbleActionSize = TBubbleActionSize,
+  P extends TBubbleActionPayload = TBubbleActionPayload,
+> = IBubbleActionBaseProps<S, K, P>
+export interface IBubbleActionsProps<
+  K extends TBubbleActionKey = TBubbleActionKey,
+  S extends TBubbleActionSize = TBubbleActionSize,
+  P extends TBubbleActionPayload = TBubbleActionPayload,
+> {
+  size?: S
+  onClick?: (key: K, payload: P) => void
+  actions: { [key in K]?: IBubbleActionProps<K, S, P> }
+}

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

@@ -0,0 +1,29 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { CodeBlock } from "./chat/code-block"
+
+export const story = defineStory({
+  Component: CodeBlock as FC<
+    Pick<
+      ComponentProps<typeof CodeBlock>,
+      "filename" | "code" | "diff" | "view"
+    >
+  >,
+  args: {
+    initial: {
+      filename: "corpus.ts",
+      diff: [
+        { type: "context", text: 'const corpus = "Iliad";' },
+        { type: "remove", text: "const book = 2;" },
+        { type: "add", text: "const book = 1;" },
+      ],
+      code: 'const corpus = "Iliad";\nconst book = 1;',
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/context-cards.story.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { ContextCards } from "./chat/context-cards"
+
+export const story = defineStory({
+  Component: ContextCards as FC<
+    Pick<ComponentProps<typeof ContextCards>, "cards" | "header" | "count">
+  >,
+  args: {
+    initial: {
+      cards: [
+        {
+          title: "Iliad 1.1",
+          meta: "Opening invocation",
+          snippet: "Sing, goddess, the anger of Achilles.",
+          file: {
+            name: "iliad.txt",
+            type: "TXT",
+          },
+        },
+      ],
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/emoji-action-bar.story.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { EmojiActionBar } from "./action-bar/emojis"
+
+export const story = defineStory({
+  Component: EmojiActionBar as FC<
+    Pick<ComponentProps<typeof EmojiActionBar>, "hideMore">
+  >,
+  args: {
+    initial: {
+      hideMore: true,
+    },
+  },
+})
+
+export const Preview = story.WithControl