@exegia/corpora-ui 0.28.0 → 1.0.0

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

@@ -0,0 +1,213 @@
+"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 MarkdownView,
+  useMarkdownView,
+} from "./markdown-atom"
+
+export {
+  markdownViewAtom,
+  removeMarkdownInstance,
+  useMarkdownView,
+  type MarkdownView,
+}
+
+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 MarkdownProps 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?: MarkdownView
+  defaultView?: MarkdownView
+  onViewChange?: (view: MarkdownView) => 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
+}: MarkdownProps): 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: MarkdownView = view ?? stored ?? defaultView ?? "preview"
+  const select = (next: MarkdownView) => {
+    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 MarkdownView)}
+        >
+          <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

@@ -0,0 +1,133 @@
+"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 { RecommendationState } from "./types"
+
+export interface RecommendationCheckboxProps {
+  state: RecommendationState
+  /** Number shown inside the pending ring (its position in the group). */
+  step?: number
+  className?: string
+}
+
+const SIZE = 18
+const STROKE = 1.5
+const R = (SIZE - STROKE) / 2
+const C = 2 * Math.PI * R
+
+/**
+ * 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,
+}: RecommendationCheckboxProps): 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>
+  )
+}

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

@@ -0,0 +1,25 @@
+import type { SignalLevel, TagTone } from "@/components/ui/chat"
+import type { RecommendationState } from "./types"
+
+export const CONFIDENCE: Record<SignalLevel, string> = {
+  high: "High confidence",
+  medium: "Medium confidence",
+  low: "Low confidence",
+}
+
+export const STATE_LABEL: Record<
+  Exclude<RecommendationState, "pending" | "running">,
+  string
+> = {
+  accepted: "Done",
+  rejected: "Skipped",
+}
+
+/** Status pill tones, shared with the presentation Tag atom. */
+export const STATE_TONE: Record<
+  Exclude<RecommendationState, "pending" | "running">,
+  TagTone
+> = {
+  accepted: "green",
+  rejected: "amber",
+}

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

@@ -0,0 +1,25 @@
+"use client"
+
+import { useId } from "react"
+import type * as React from "react"
+import { Group } from "./group"
+import { Item } from "./item"
+import type { RecommendationCardProps } 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
+}: RecommendationCardProps): 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

@@ -0,0 +1,43 @@
+"use client"
+
+import { motion } from "motion/react"
+import type * as React from "react"
+import {
+  Accordion,
+  AccordionPrimitive,
+} from "@/components/ui/accordion"
+import { cn } from "@/lib/utils"
+
+export type RecommendationGroupProps = AccordionPrimitive.Root.Props
+
+/** Rows enter staggered 80ms apart; each Item picks up `row` from `ROW_VARIANTS`. */
+const GROUP_VARIANTS = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.08 } },
+} as const
+
+/**
+ * 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
+}: RecommendationGroupProps): React.ReactElement {
+  return (
+    <Accordion
+      className={cn("flex w-full flex-col gap-2 max-w-11/12", 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

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