@exegia/corpora-ui 3.0.0 → 3.1.0

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

@@ -1,54 +0,0 @@
-import type { TSignalLevel, TTagTone } from "@/components/ui/chat"
-import type { TRecommendationState } from "./types"
-import { EASE_IN_OUT, EASE_OUT_STRONG } from "@/lib/ease"
-
-export const CONFIDENCE: Record<TSignalLevel, string> = {
-  high: "High confidence",
-  medium: "Medium confidence",
-  low: "Low confidence",
-}
-
-export const STATE_LABEL: Record<
-  Exclude<TRecommendationState, "pending" | "running">,
-  string
-> = {
-  accepted: "Done",
-  rejected: "Skipped",
-}
-
-/** Status pill tones, shared with the presentation Tag atom. */
-export const STATE_TONE: Record<
-  Exclude<TRecommendationState, "pending" | "running">,
-  TTagTone
-> = {
-  accepted: "green",
-  rejected: "amber",
-}
-
-export 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. */
-export const ROW_VARIANTS = {
-  hidden: { opacity: 0, y: 8 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.45, ease: EASE_OUT_STRONG },
-  },
-} as const
-
-/** Rows enter staggered 80ms apart; each Item picks up `row` from `ROW_VARIANTS`. */
-export const GROUP_VARIANTS = {
-  hidden: {},
-  visible: { transition: { staggerChildren: 0.08 } },
-} as const
-
-export const SIZE = 18
-export const STROKE = 1.5
-export const R = (SIZE - STROKE) / 2
-export const C = 2 * Math.PI * R

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

@@ -1,25 +0,0 @@
-"use client"
-
-import { useId } from "react"
-import type * as React from "react"
-import { Group } from "./group"
-import { Item } from "./item"
-import type { IRecommendationCardProps } from "./types"
-
-/**
- * One-card convenience: a Group with a single Item, so existing
- * `<RecommendationCard />` call sites keep working.
- */
-export function RecommendationCard({
-  value,
-  defaultOpen = true,
-  ...props
-}: IRecommendationCardProps): React.ReactElement {
-  const autoId = useId()
-  const itemValue = value ?? autoId
-  return (
-    <Group defaultValue={defaultOpen ? [itemValue] : []}>
-      <Item value={itemValue} {...props} />
-    </Group>
-  )
-}

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

@@ -1,36 +0,0 @@
-"use client"
-
-import { motion } from "motion/react"
-import type * as React from "react"
-import {
-  Accordion,
-} from "@/components/ui/accordion"
-import { cn } from "@/lib/utils"
-import type { TRecommendationGroupProps } from "./types"
-import { GROUP_VARIANTS } from "./constant"
-
-/**
- * Accordion root for a stack of recommendation items. Defaults to `multiple`
- * so each proposal can stay open on its own, like independent suggestion cards.
- */
-export function Group({
-  className,
-  multiple = true,
-  ...props
-}: TRecommendationGroupProps): React.ReactElement {
-  return (
-    <Accordion
-      className={cn("flex w-full flex-col gap-2 max-w-11/12 overflow-clip rounded-md", className)}
-      data-slot="recommendation-group"
-      multiple={multiple}
-      render={
-        <motion.div
-          animate="visible"
-          initial="hidden"
-          variants={GROUP_VARIANTS}
-        />
-      }
-      {...props}
-    />
-  )
-}

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

@@ -1,17 +0,0 @@
-import { Checkbox } from "./checkbox"
-import { RecommendationCard } from "./default"
-import { Group } from "./group"
-import { Item } from "./item"
-
-export type * from "./types"
-
-export { RecommendationCard }
-
-export const Recommendation = {
-  Group,
-  Item,
-  Checkbox,
-  Card: RecommendationCard,
-}
-
-export default Group

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

@@ -1,215 +0,0 @@
-"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_OUT_STRONG } from "@/lib/ease"
-import { cn } from "@/lib/utils"
-import { Checkbox } from "./checkbox"
-import { CONFIDENCE, STATE_LABEL, STATE_TONE, ACTION_MOTION, ROW_VARIANTS } from "./constant"
-import type { IRecommendationItemProps } from "./types"
-import { Reference } from "@/components/atoms"
-
-
-/**
- * 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,
-  leadTime,
-  reference,
-  options = [],
-  optionsLabel = "Other options",
-  confidence = "high",
-  confidenceLabel,
-  acceptLabel = "Accept",
-  rejectLabel,
-  alternativesLabel = "Alternatives",
-  state = "pending",
-  step,
-  onAccept,
-  onReject,
-  onAlternatives,
-  onUndo,
-  onSelectOption,
-  children,
-  className,
-  ...props
-}: IRecommendationItemProps): 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="gap-3 px-3 py-2.5 hover:bg-black/4 dark:hover:bg-white/4 relative items-center rounded-none text-left focus-visible:ring-0">
-          <Checkbox state={state} step={step} />
-          <div className="min-w-0 gap-1 flex flex-1 flex-col items-start">
-            <span
-              className={cn(
-                "leading-4 font-semibold w-full text-[14px] text-text-primary",
-                declined && "font-light text-muted-foreground line-through"
-              )}
-            >
-              {title}
-            </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="px-0 pb-0 relative">
-          {(description || entity || leadTime) && <div className={cn("flex flex-wrap items-center gap-x-1.5 gap-y-1.5 px-3 pb-3 text-[13px] leading-[18px] 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 pl-0.5 pr-2 text-xs font-medium text-text-primary"><AvatarHandle initials={entity.initials} size={16} src={entity.src} />{entity.name}</span>}
-            {leadTime && <Tag className="rounded-full" tone="green">{leadTime}</Tag>}
-          </div>}
-          {reference && <div
-            className={cn(
-              "gap-x-1.5 gap-y-1 px-2 pb-1.5 flex w-full items-center",
-              declined && "line-through opacity-50"
-            )}
-          >
-            <Reference {...reference} />
-          </div>}
-          {children && <div className="px-3 py-2">{children}</div>}
-          {options.length > 0 && (
-            <Card className="mx-3 rounded-md before:rounded-[calc(var(--radius-md)-1px)]">
-              <CardPanel className="gap-2 px-3.5 py-2.5 flex flex-col">
-                <span className="leading-3 text-[11px] text-text-secondary">
-                  {optionsLabel}
-                </span>
-                {options.map((option, index) => (
-                  <motion.button
-                    {...optionMotion(index)}
-                    className="-mx-2 h-6 gap-2.5 px-2 hover:bg-black/4 dark:hover:bg-white/6 flex items-center rounded-md text-left text-[12.5px] leading-none text-text-primary outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    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>
-          )}
-         
-          <CardFrameFooter className="gap-2 px-4 py-3.5 relative flex items-center">
-            <Signal level={confidence} />
-            <span className="text-[12.5px] text-text-primary">
-              {confidenceLabel ?? CONFIDENCE[confidence]}
-            </span>
-            <span className="gap-2 ml-auto flex items-center">
-              <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="gap-2 flex items-center"
-                    key="actions"
-                  >
-                    <Button
-                      className="px-3 font-medium sm:h-6 h-6 rounded-full text-[12px]"
-                      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="gap-1 text-xs font-normal inline-flex items-center 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

@@ -1,76 +0,0 @@
-import type * as React from "react"
-import type { TSignalLevel } from "@/components/ui/chat"
-import type { AccordionPrimitive } from "@/components/ui/accordion"
-import type { IReferenceProps } from "@/components/atoms/types"
-
-export interface IRecommendationOption {
-  label: React.ReactNode
-  status?: React.ReactNode
-  signal?: TSignalLevel
-}
-
-export interface IRecommendationEntity {
-  name: React.ReactNode
-  initials?: string
-  src?: string
-}
-
-export type TRecommendationState =
-  | "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 IRecommendationFields {
-  title: React.ReactNode
-  /** Collapsible body text around the entity and lead-time pills. */
-  description: React.ReactNode
-  entity?: IRecommendationEntity
-  reference?: IReferenceProps
-  leadTime?: React.ReactNode
-  options?: IRecommendationOption[]
-  optionsLabel?: React.ReactNode
-  confidence?: TSignalLevel
-  confidenceLabel?: React.ReactNode
-  acceptLabel?: React.ReactNode
-  rejectLabel?: React.ReactNode
-  alternativesLabel?: React.ReactNode
-  state?: TRecommendationState
-  /** 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 IRecommendationItemProps
-  extends
-    IRecommendationFields,
-    Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> {
-  /** Accordion item identity. Required inside `Recommendation.Group`. */
-  value: string
-}
-
-export interface IRecommendationCardProps extends IRecommendationFields {
-  /** Accordion item identity. Auto-generated when omitted. */
-  value?: string
-  /** Uncontrolled initial open state. Default true — Accept lives in the body. */
-  defaultOpen?: boolean
-  className?: string
-}
-
-export type TRecommendationGroupProps = AccordionPrimitive.Root.Props
-
-export interface IRecommendationCheckboxProps {
-  state: TRecommendationState
-  /** Number shown inside the pending ring (its position in the group). */
-  step?: number
-  className?: string
-}

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

@@ -1,130 +0,0 @@
-"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 TTagTone } 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 IRecordsRow {
-  id: string
-  name: React.ReactNode
-  initial?: string
-  avatarSrc?: string
-  tags?: { label: React.ReactNode; tone?: TTagTone }[]
-  /** Max tags shown inline; the rest collapse to "+N". */
-  lastInteraction?: React.ReactNode
-  strength?: React.ReactNode
-}
-
-export type TRecordsColumnKey = "name" | "tags" | "lastInteraction" | "strength"
-
-export interface IRecordsTableProps extends React.ComponentPropsWithoutRef<"div"> {
-  tableId?: string
-  rows: IRecordsRow[]
-  headers?: Partial<Record<TRecordsColumnKey, React.ReactNode>>
-  /** Pin the header inside a height-constrained scroll container. */
-  stickyHeader?: boolean
-  maxTags?: number
-  selected?: ReadonlySet<string>
-  onSelectionChange?: (selected: ReadonlySet<string>) => void
-  /** Sort is the caller's: the design shows the control only. */
-  onSortChange?: (column: TRecordsColumnKey) => void
-}
-
-const HEADERS: Record<TRecordsColumnKey, 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, stickyHeader = false, maxTags = 2, selected, onSelectionChange, onSortChange, className, ...props }: IRecordsTableProps): 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: TRecordsColumnKey, 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 tabIndex={0} role="region" aria-label="Records table" data-slot="records-table" className={cn("isolate w-[540px] max-w-full overflow-auto select-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className)} {...props}>
-      <table className="w-full min-w-[540px] border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-border-default [&_th]:border-b [&_th]:border-border-default [&_tr:last-child_td]:border-b-0">
-        <thead className={cn(stickyHeader && "[&_th]:sticky [&_th]:top-0 [&_th]:z-20 [&_th]:bg-surface-card [&_th:first-child]:z-30 [&_th:nth-child(2)]:z-30")}>
-          <tr className="border-b border-border-default text-[11px] font-medium leading-3 text-text-secondary">
-            <th className="sticky left-0 z-10 w-13 min-w-13 bg-surface-card py-2.5 pl-3"><Checkbox aria-label="Select all" checked={all} indeterminate={some} onCheckedChange={toggleAll} className="size-4" /></th>
-            <th className="sticky left-13 z-10 min-w-44 bg-surface-card 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={cn("sticky left-0 z-10 w-13 min-w-13 py-2 pl-3", checked ? "bg-accent-subtle" : "bg-surface-card")}>
-                  <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={cn("sticky left-13 z-10 min-w-44 px-2 py-2", checked ? "bg-accent-subtle" : "bg-surface-card")}>
-                  <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>
-  )
-}