@exegia/corpora-ui 2.0.0 → 3.1.0

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

@@ -1,98 +0,0 @@
-export {
-  Attachment,
-  type TAttachmentKind,
-  type TAttachmentProps,
-  type TAttachmentVariant,
-} from "./attachment"
-export {
-  Chart,
-  type TChartDatum,
-  type IChartProps,
-  type IChartSeries,
-  type TChartType,
-} from "./chart"
-export {
-  Markdown,
-  markdownViewAtom,
-  removeMarkdownInstance,
-  useMarkdownView,
-  type IMarkdownProps,
-  type TMarkdownView,
-} from "./markdown"
-// `SuggestedPrompts`, `SendButton` and `AddButton` stay off the barrel on
-// purpose: `blocks/ai-panel` and `ui/chat` already export those names, and
-// all the barrels flow into `src/index.ts`. Reach them as
-// `composed/chat/composer` — or hand the slots to `Composer`.
-export {
-  addComposerAttachmentAtom,
-  clearComposerAttachmentsAtom,
-  CommandMenu,
-  Composer,
-  composerAttachmentsAtom,
-  removeComposerAttachmentAtom,
-  removeComposerInstance,
-  useComposerAttachmentActions,
-  useComposerAttachments,
-} from "./composer"
-export type {
-  TComposerAttachment,
-  IComposerModel,
-  IComposerOption,
-  IComposerBaseProps,
-  TComposerMode,
-  IComposerSuggestionsProps,
-  IComposerMenuProps,
-  IComposerProps,
-  IComposerSubmitButtonProps,
-} from "./composer"
-
-export { Recommendation, RecommendationCard } from "./recommendation"
-export type {
-  IRecommendationCardProps,
-  IRecommendationCheckboxProps,
-  IRecommendationEntity,
-  IRecommendationFields,
-  TRecommendationGroupProps,
-  IRecommendationItemProps,
-  IRecommendationOption,
-  TRecommendationState,
-} from "./recommendation"
-export {
-  ContextCards,
-  type IContextCard,
-  type IContextCardsProps,
-} from "./context-cards"
-export {
-  CodeBlock,
-  tokenize,
-  type ICodeBlockProps,
-  type ICodeDiffLine,
-} from "./code-block"
-export {
-  FilterTable,
-  filterTableFilterAtom,
-  removeFilterTableInstance,
-  type IFilterTableColumn,
-  type IFilterTableProps,
-  type IFilterTableStatus,
-} from "./filter-table"
-export {
-  RecordsTable,
-  recordsTableSelectionAtom,
-  removeRecordsTableInstance,
-  type TRecordsColumnKey,
-  type IRecordsRow,
-  type IRecordsTableProps,
-} from "./records-table"
-export * from "./flowchart"
-export { type IChartNodeProps, type IFlowchartProps } from "./flowchart"
-export {
-  InsightCards,
-  InsightEntity,
-  type IInsight,
-  type IInsightAllocation,
-  type IInsightSegment,
-  type IInsightCardsProps,
-} from "./insight-cards"
-
-export { SendHint } from "./hint"

package/src/components/composed/chat/insight-cards.tsx

@@ -1,199 +0,0 @@
-"use client"
-
-import { ChevronDown, ChevronUp } from "lucide-react"
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Card, CardFrame, CardFrameHeader, CardPanel } from "@/components/ui/card"
-import { SPRING_SWAP } from "@/lib/ease"
-import { DOT_TONE_CLASSES, Dot, FollowUpRow, IconButton, Pill, Stat, type TDotTone, type IStatProps } from "@/components/ui/chat"
-import { Chart, type TChartDatum, type IChartSeries } from "./chart"
-
-export interface IInsight {
-  /** Sentence; `entity` is highlighted with a dot in front. */
-  summary: React.ReactNode
-  stats?: IStatProps[]
-  snapshot?: { label?: React.ReactNode; badge?: React.ReactNode; data: TChartDatum[]; series: IChartSeries[] }
-  /** Share breakdown: tile + big value, a segmented bar, selectable legend pills and a detail panel. */
-  allocation?: IInsightAllocation
-  followUp?: string
-}
-
-export interface IInsightSegment {
-  key: string
-  label: React.ReactNode
-  value: number
-  tone?: TDotTone
-  /** Detail panel heading; falls back to `label`. */
-  title?: React.ReactNode
-  description?: React.ReactNode
-}
-
-export interface IInsightAllocation {
-  label: React.ReactNode
-  value: React.ReactNode
-  /** Letter in the tile; takes the first segment's tone. */
-  initials?: string
-  segments: IInsightSegment[]
-  defaultSelected?: string
-}
-
-const TONE_TEXT: Record<TDotTone, string> = {
-  success: "text-semantic-success", warning: "text-semantic-warning", info: "text-semantic-info", danger: "text-semantic-danger",
-  neutral: "text-text-muted", accent: "text-accent-default", brand: "text-brand",
-  "series-1": "text-chart-series-1", "series-2": "text-chart-series-2", "series-3": "text-chart-series-3", "series-4": "text-chart-series-4", "series-5": "text-chart-series-5",
-}
-
-const pct = (n: number, total: number) => `${Math.round((n / total) * 1000) / 10}%`
-
-/** @sketch beautiful-ui "Insight Cards / allocation" — segment selection changes the inspected group without moving the card. */
-function Allocation({ label, value, initials, segments, defaultSelected }: IInsightAllocation): React.ReactElement {
-  const reduceMotion = useReducedMotion()
-  const [selected, setSelected] = React.useState(defaultSelected ?? segments[0]?.key)
-  const total = segments.reduce((n, s) => n + s.value, 0) || 1
-  const active = segments.find((s) => s.key === selected) ?? segments[0]
-  const tone = (s?: IInsightSegment) => s?.tone ?? "series-1"
-
-  return (
-    <CardPanel data-slot="insight-allocation" className="flex flex-col gap-3 p-3">
-      <span className="flex items-center gap-2 text-[12.5px] text-text-secondary">
-        <span className={cn("inline-flex size-5 items-center justify-center rounded-full text-[9px] font-semibold text-white", DOT_TONE_CLASSES[tone(segments[0])])}>
-          {initials ?? String(label).slice(0, 1).toUpperCase()}
-        </span>
-        {label}
-      </span>
-      <span className="text-[26px] font-semibold leading-8 tracking-tight text-text-primary">{value}</span>
-      <div className="flex h-6 gap-1" role="group" aria-label="Share by segment">
-        {segments.map((s) => (
-          <button
-            key={s.key}
-            type="button"
-            aria-label={typeof s.label === "string" ? s.label : undefined}
-            aria-pressed={s.key === active?.key}
-            onClick={() => setSelected(s.key)}
-            style={{ flexGrow: s.value }}
-            className={cn(
-              "min-w-1.5 rounded-full outline-none transition-[opacity,box-shadow] duration-300 ease-[var(--ease-out-strong)] focus-visible:ring-2 focus-visible:ring-ring",
-              s.key === active?.key ? cn("ring-2 ring-inset ring-white/25", DOT_TONE_CLASSES[tone(s)]) : "bg-surface-subtle hover:opacity-80"
-            )}
-          />
-        ))}
-      </div>
-      <div className="flex flex-wrap gap-1.5">
-        {segments.map((s) => (
-          <button
-            key={s.key}
-            type="button"
-            aria-pressed={s.key === active?.key}
-            onClick={() => setSelected(s.key)}
-            className={cn(
-              "inline-flex h-5 items-center gap-1.5 rounded-full px-2 text-[11px] font-medium leading-none outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
-              s.key === active?.key ? "bg-surface-subtle text-text-primary" : "text-text-secondary hover:text-text-primary"
-            )}
-          >
-            <Dot tone={s.key === active?.key ? tone(s) : "neutral"} />
-            {s.label} {pct(s.value, total)}
-          </button>
-        ))}
-      </div>
-      {active ? (
-        <AnimatePresence initial={false} mode="wait">
-          <motion.div
-            key={active.key}
-            initial={reduceMotion ? false : { opacity: 0, y: 4 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={reduceMotion ? undefined : { opacity: 0, y: -4 }}
-            transition={reduceMotion ? { duration: 0 } : SPRING_SWAP}
-            className="flex flex-col gap-1 rounded-md bg-surface-subtle px-3 py-2.5"
-          >
-            <span className={cn("text-[12px] font-semibold leading-4", TONE_TEXT[tone(active)])}>{active.title ?? active.label}</span>
-            {active.description ? <span className="text-[12px] leading-4 text-text-secondary">{active.description}</span> : null}
-          </motion.div>
-        </AnimatePresence>
-      ) : null}
-    </CardPanel>
-  )
-}
-
-export interface IInsightCardsProps extends React.ComponentPropsWithoutRef<"div"> {
-  header?: React.ReactNode
-  insights: IInsight[]
-  index?: number
-  defaultIndex?: number
-  onIndexChange?: (index: number) => void
-  onFollowUp?: (text: string) => void
-}
-
-/**
- * Paged insights: header with count and prev/next, summary, stats,
- * a trend snapshot (line plot + legend) or an allocation breakdown, and a follow-up prompt.
- *
- * @sketch "Component / Insight Cards"
- */
-export function InsightCards({ header = "Insights", insights, index, defaultIndex = 0, onIndexChange, onFollowUp, className, ...props }: IInsightCardsProps): React.ReactElement {
-  const reduceMotion = useReducedMotion()
-  const [internal, setInternal] = React.useState(defaultIndex)
-  const current = Math.min(index ?? internal, Math.max(insights.length - 1, 0))
-  // Which way the card slides: next pulls the new one up from below, previous from above.
-  const [direction, setDirection] = React.useState(1)
-  const go = (next: number) => {
-    setDirection(next > current ? 1 : -1)
-    if (index === undefined) setInternal(next)
-    onIndexChange?.(next)
-  }
-  const insight = insights[current]
-  const offset = reduceMotion ? 0 : 24 * direction
-
-  return (
-    <div data-slot="insight-cards" className={cn("flex w-[344px] max-w-full flex-col gap-2.5", className)} {...props}>
-      <div className="flex items-center gap-1.5">
-        <span className="text-[13px] font-semibold leading-4 text-text-primary">{header}</span>
-        <span className="text-[13px] text-text-muted">{insights.length}</span>
-        <span className="ml-auto flex items-center gap-0.5">
-          <IconButton aria-label="Previous insight" disabled={current <= 0} onClick={() => go(current - 1)}><ChevronUp /></IconButton>
-          <IconButton aria-label="Next insight" disabled={current >= insights.length - 1} onClick={() => go(current + 1)}><ChevronDown /></IconButton>
-        </span>
-      </div>
-      <AnimatePresence custom={direction} initial={false} mode="popLayout">
-      {insight ? (
-        <motion.div
-          key={current}
-          className="flex flex-col gap-2.5"
-          initial={{ opacity: 0, y: offset }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -offset }}
-          transition={reduceMotion ? { duration: 0 } : SPRING_SWAP}
-        >
-          <p className="text-[13px] leading-[15px] text-text-secondary [&_[data-slot=dot]]:mx-0.5 [&_[data-slot=dot]]:inline-block [&_[data-slot=dot]]:align-middle">
-            {insight.summary}
-          </p>
-          <CardFrame className="[--frame-radius:var(--radius-md)]">
-            {insight.stats?.length ? (
-              <CardFrameHeader className="flex flex-row gap-4 p-4">
-                {insight.stats.map((s, i) => <Stat key={i} {...s} />)}
-              </CardFrameHeader>
-            ) : null}
-            {insight.allocation ? <Card><Allocation {...insight.allocation} /></Card> : null}
-            {insight.snapshot ? (
-              <Card><CardPanel className="flex flex-col gap-2 p-2.5">
-                <div className="flex items-center justify-between">
-                  <span className="text-[11px] leading-3 text-text-secondary">{insight.snapshot.label ?? "Trend snapshot"}</span>
-                  <Pill>{insight.snapshot.badge ?? "Snapshot"}</Pill>
-                </div>
-                <Chart type="line" headerless plotHeight={110} data={insight.snapshot.data} series={insight.snapshot.series} className="w-full" />
-              </CardPanel></Card>
-            ) : null}
-          </CardFrame>
-          {insight.followUp ? <FollowUpRow onSelect={() => onFollowUp?.(insight.followUp!)} className="w-fit rounded-full border border-border-default bg-surface-card px-3 hover:bg-surface-subtle">{insight.followUp}</FollowUpRow> : null}
-        </motion.div>
-      ) : null}
-      </AnimatePresence>
-    </div>
-  )
-}
-
-/** Inline entity marker for `Insight.summary`: dot + name. */
-export function InsightEntity({ tone = "neutral", children }: { tone?: TDotTone; children: React.ReactNode }): React.ReactElement {
-  return <><Dot tone={tone} size={8} /> {children}</>
-}
-

package/src/components/composed/chat/markdown-atom.ts

@@ -1,15 +0,0 @@
-import { useAtom } from "jotai"
-
-import { createKeyedFamilies } from "@/lib/keyed-atom"
-
-export type TMarkdownView = "preview" | "markup"
-
-const { stateFamily, removeInstance } = createKeyedFamilies("markdown")
-
-/** Which pane a Markdown card shows, keyed by its `markdownId`; `null` until first toggled (the card then falls back to its `defaultView`). */
-export const markdownViewAtom = stateFamily<TMarkdownView | null>("view", null)
-export const removeMarkdownInstance = removeInstance
-
-export function useMarkdownView(markdownId: string) {
-  return useAtom(markdownViewAtom(markdownId))
-}

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

@@ -1,213 +0,0 @@
-"use client"
-
-import { Copy, Maximize2 } from "lucide-react"
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import { EASE_OUT } from "@/lib/ease"
-import * as React from "react"
-import ReactMarkdown, { type Components } from "react-markdown"
-import { cn } from "@/lib/utils"
-import {
-  Card,
-  CardFrame,
-  CardFrameHeader,
-  CardPanel,
-} from "@/components/ui/card"
-import { IconButton } from "@/components/ui/chat"
-import { Tabs, TabsList, TabsTab } from "@/components/ui/tabs"
-import {
-  markdownViewAtom,
-  removeMarkdownInstance,
-  type TMarkdownView,
-  useMarkdownView,
-} from "./markdown-atom"
-
-export {
-  markdownViewAtom,
-  removeMarkdownInstance,
-  useMarkdownView,
-  type TMarkdownView,
-}
-
-const VIEWS = [
-  { value: "preview", label: "Preview" },
-  { value: "markup", label: "Markup" },
-] as const
-
-/** Tag map restricted to what the design shows: headings, paragraphs, lists, inline + fenced code. */
-const COMPONENTS: Components = {
-  h1: ({ children }) => (
-    <h1 className="text-[15px] leading-[17px] font-semibold text-text-primary">
-      {children}
-    </h1>
-  ),
-  h2: ({ children }) => (
-    <h2 className="text-[14px] leading-4 font-semibold text-text-primary">
-      {children}
-    </h2>
-  ),
-  h3: ({ children }) => (
-    <h3 className="text-[13px] leading-4 font-semibold text-text-primary">
-      {children}
-    </h3>
-  ),
-  p: ({ children }) => (
-    <p className="text-[13px] leading-[15px] text-text-primary">{children}</p>
-  ),
-  strong: ({ children }) => (
-    <strong className="font-semibold">{children}</strong>
-  ),
-  a: ({ children, href }) => (
-    <a
-      className="text-link underline-offset-2 hover:underline"
-      href={href}
-      rel="noreferrer"
-      target="_blank"
-    >
-      {children}
-    </a>
-  ),
-  ul: ({ children }) => (
-    <ul className="flex list-disc flex-col gap-1 pl-4 text-[13px] leading-[15px] text-text-primary">
-      {children}
-    </ul>
-  ),
-  ol: ({ children }) => (
-    <ol className="flex list-decimal flex-col gap-1 pl-4 text-[13px] leading-[15px] text-text-primary">
-      {children}
-    </ol>
-  ),
-  li: ({ children }) => <li>{children}</li>,
-  code: ({ children, className }) =>
-    className ? (
-      <code className="font-mono text-[11.5px] leading-[14px] text-link">
-        {children}
-      </code>
-    ) : (
-      <code className="rounded-[4px] bg-surface-code px-1 py-px font-mono text-[11.5px] text-link">
-        {children}
-      </code>
-    ),
-  pre: ({ children }) => (
-    <pre className="overflow-x-auto rounded-lg bg-surface-code px-2.5 py-1.5">
-      {children}
-    </pre>
-  ),
-}
-
-export interface IMarkdownProps extends Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "onCopy"
-> {
-  /** Markdown source; rendered in Preview, shown raw in Markup. */
-  source: string
-  /** Stable id for the view atom. Unnamed cards key off `useId()`. */
-  markdownId?: string
-  view?: TMarkdownView
-  defaultView?: TMarkdownView
-  onViewChange?: (view: TMarkdownView) => void
-  onCopy?: (source: string) => void
-  onExpand?: () => void
-  /** Drop the card border (inside an AiBubble the bubble supplies it). */
-  bare?: boolean
-}
-
-/**
- * Rendered markdown behind a Preview | Markup toggle, with copy and expand.
- *
- * @sketch "Component / Markdown / Preview", "Component / Markdown / Markup"
- */
-export function Markdown({
-  source,
-  markdownId,
-  view,
-  defaultView,
-  onViewChange,
-  onCopy,
-  onExpand,
-  bare = false,
-  className,
-  ...props
-}: IMarkdownProps): React.ReactElement {
-  const reduceMotion = useReducedMotion()
-  const generatedId = React.useId()
-  const id = markdownId ?? generatedId
-  const [stored, setStored] = useMarkdownView(id)
-  React.useEffect(() => {
-    if (markdownId) return
-    return () => removeMarkdownInstance(id)
-  }, [markdownId, id])
-
-  const current: TMarkdownView = view ?? stored ?? defaultView ?? "preview"
-  const select = (next: TMarkdownView) => {
-    if (view === undefined) setStored(next)
-    onViewChange?.(next)
-  }
-
-  return (
-    <CardFrame
-      data-slot="markdown"
-      data-view={current}
-      className={cn(
-        "w-[360px] max-w-full [--frame-radius:var(--radius-md)]",
-        bare && "border-transparent shadow-none",
-        className,
-        "rounded-md!"
-      )}
-      {...props}
-    >
-      <CardFrameHeader className="flex flex-row items-center justify-between rounded-md! px-3 py-2">
-        <Tabs
-          className="gap-0"
-          value={current}
-          onValueChange={(next) => select(next as TMarkdownView)}
-        >
-          <TabsList aria-label="Markdown view" size="xs">
-            {VIEWS.map((v) => (
-              <TabsTab key={v.value} size="xs" value={v.value}>
-                {v.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </Tabs>
-        <span className="flex items-center gap-1">
-          <IconButton aria-label="Expand" onClick={onExpand}>
-            <Maximize2 />
-          </IconButton>
-          <IconButton
-            aria-label="Copy markdown"
-            onClick={() => onCopy?.(source)}
-          >
-            <Copy />
-          </IconButton>
-        </span>
-      </CardFrameHeader>
-      <Card>
-        <CardPanel className={current === "preview" ? "p-4" : "p-2"}>
-          <AnimatePresence initial={false} mode="wait">
-            <motion.div
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0 }}
-              initial={reduceMotion ? false : { opacity: 0, y: 12 }}
-              key={current}
-              transition={
-                reduceMotion
-                  ? { duration: 0 }
-                  : { duration: 0.24, ease: EASE_OUT }
-              }
-            >
-              {current === "preview" ? (
-                <div className="flex flex-col gap-2.5">
-                  <ReactMarkdown components={COMPONENTS}>{source}</ReactMarkdown>
-                </div>
-              ) : (
-                <pre className="overflow-x-auto rounded-md bg-surface-code px-2.5 py-2 font-mono text-[11px] leading-[13px] whitespace-pre-wrap text-text-primary">
-                  {source}
-                </pre>
-              )}
-            </motion.div>
-          </AnimatePresence>
-        </CardPanel>
-      </Card>
-    </CardFrame>
-  )
-}

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

@@ -1,122 +0,0 @@
-"use client"
-
-import { Check, Sparkle, X } from "lucide-react"
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import type * as React from "react"
-import { EASE_OUT_STRONG } from "@/lib/ease"
-import { cn } from "@/lib/utils"
-import type { IRecommendationCheckboxProps } from "./types"
-import { SIZE, STROKE, R, C } from "./constant"
-
-/**
- * Outcome mark after beautiful-ui's Task Rows: a Sparkle while the proposal
- * waits for approval, a spinning ring once the agent is running (with the
- * step number inside), then a filled badge that pops in — green check when
- * accepted, red cross when rejected.
- */
-export function Checkbox({
-  state,
-  step,
-  className,
-}: IRecommendationCheckboxProps): React.ReactElement {
-  const reduceMotion = useReducedMotion()
-  const transition = reduceMotion
-    ? { duration: 0 }
-    : { duration: 0.3, ease: EASE_OUT_STRONG }
-
-  return (
-    <span
-      className={cn(
-        "relative inline-grid shrink-0 place-items-center",
-        className
-      )}
-      data-slot="recommendation-state"
-      data-state={state}
-      style={{ width: SIZE, height: SIZE }}
-    >
-      <AnimatePresence initial={false} mode="popLayout">
-        {state === "pending" ? (
-          <motion.span
-            key="pending"
-            animate={{ scale: 1, opacity: 1 }}
-            className="inline-grid place-items-center [grid-area:1/1]"
-            exit={{ scale: 0.4, opacity: 0 }}
-            initial={{ scale: 0.4, opacity: 0 }}
-            style={{ width: SIZE, height: SIZE }}
-            transition={transition}
-          >
-            <Sparkle
-              aria-hidden="true"
-              className="size-4 fill-indigo-500/25 stroke-[1.75] text-indigo-600 dark:text-indigo-400"
-            />
-          </motion.span>
-        ) : state === "running" ? (
-          <motion.span
-            key="running"
-            animate={{ scale: 1, opacity: 1 }}
-            className="relative inline-grid place-items-center [grid-area:1/1]"
-            exit={{ scale: 0.4, opacity: 0 }}
-            initial={{ scale: 0.4, opacity: 0 }}
-            style={{ width: SIZE, height: SIZE }}
-            transition={transition}
-          >
-            <svg
-              aria-hidden="true"
-              className={cn(
-                "absolute inset-0",
-                !reduceMotion && "animate-spin [animation-duration:1.1s]"
-              )}
-              height={SIZE}
-              width={SIZE}
-            >
-              <circle
-                className="stroke-border-default"
-                cx={SIZE / 2}
-                cy={SIZE / 2}
-                fill="none"
-                r={R}
-                strokeWidth={STROKE}
-              />
-              <circle
-                className="stroke-text-muted"
-                cx={SIZE / 2}
-                cy={SIZE / 2}
-                fill="none"
-                r={R}
-                strokeDasharray={`${C * 0.28} ${C * 0.72}`}
-                strokeLinecap="round"
-                strokeWidth={STROKE}
-              />
-            </svg>
-            {step !== undefined ? (
-              <span className="relative text-[9px] font-semibold text-text-primary tabular-nums">
-                {step}
-              </span>
-            ) : null}
-          </motion.span>
-        ) : (
-          <motion.span
-            key={state}
-            animate={{ scale: 1, opacity: 1 }}
-            className={cn(
-              "inline-grid place-items-center rounded-full text-white [grid-area:1/1]",
-              state === "accepted"
-                ? "bg-semantic-success"
-                : "bg-semantic-danger"
-            )}
-            exit={{ scale: 0.4, opacity: 0 }}
-            initial={{ scale: 0, opacity: 0 }}
-            style={{ width: SIZE, height: SIZE }}
-            transition={transition}
-          >
-            {state === "accepted" ? (
-              <Check aria-hidden="true" className="size-3 stroke-[3.5]" />
-            ) : (
-              <X aria-hidden="true" className="size-2.5 stroke-[3.5]" />
-            )}
-          </motion.span>
-        )}
-      </AnimatePresence>
-    </span>
-  )
-}