@exegia/corpora-ui 2.0.0 → 3.1.0

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

@@ -1,36 +0,0 @@
-import { ArrowUp, Square } from "lucide-react"
-import { cn } from "@/lib/utils"
-import type { IComposerSubmitButtonProps } from "../type"
-import type * as React from "react"
-
-export function SendButton({
-  isStreaming,
-  isExpanded: _isExpanded,
-  disabled,
-  onStop,
-  className,
-  ...props
-}: IComposerSubmitButtonProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement {
-  return (
-    <button
-      {...props}
-      type={isStreaming ? "button" : "submit"}
-      aria-label={isStreaming ? "Stop" : "Send message"}
-      data-cuelume-press=""
-      data-cuelume-release=""
-      disabled={disabled}
-      onClick={isStreaming ? onStop : undefined}
-      className={cn(
-        "size-7 flex shrink-0 items-center justify-center rounded-lg bg-foreground text-background transition-colors hover:opacity-90 focus-visible:outline-2 focus-visible:outline-ring disabled:bg-foreground/10 disabled:text-muted-foreground disabled:opacity-60",
-        className
-      )}
-    >
-      {isStreaming ? (
-        <Square aria-hidden className="size-3 fill-current" />
-      ) : (
-        <ArrowUp aria-hidden className="size-4 stroke-[2.4]" />
-      )}
-    </button>
-  )
-}

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

@@ -1,115 +0,0 @@
-import { isValidElement, useId, useState } from "react"
-import type { ISuggestedPromptsProps } from "../type"
-import { useReducedMotion, motion, AnimatePresence } from "motion/react"
-import { flattenChildren, ITEM_VARIANTS, LIST_VARIANTS } from "./utils"
-import { cn } from "@/lib/utils"
-import { EASE_IN_OUT, SPRING_PANEL } from "@/lib/ease"
-import { ChevronDown, Sparkles } from "lucide-react"
-
-/**
- * The "Suggestions (n)" disclosure above the composer: a chevron that swings
- * from left (folded) to down (open) and a panel of prompts that fans out
- * beneath it, its bottom edge tucked behind the composer pill.
- */
-export function SuggestedPrompts({
-  children,
-  count,
-  label = (n) => `Suggestions (${n})`,
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange,
-  className,
-  ...props
-}: ISuggestedPromptsProps): React.ReactElement | null {
-  const panelId = useId()
-  const reduceMotion = useReducedMotion()
-  const [internalOpen, setInternalOpen] = useState(defaultOpen)
-  const open = openProp ?? internalOpen
-  const items = flattenChildren(children)
-
-  const setOpen = (next: boolean): void => {
-    if (openProp === undefined) setInternalOpen(next)
-    onOpenChange?.(next)
-  }
-
-  // Picking the last prompt empties `children`. Collapsing the whole block on
-  // height rather than returning null keeps the header from blinking out in a
-  // single frame while that last row is still flying to its bubble.
-  return (
-    <motion.div
-      animate={{
-        height: items.length ? "auto" : 0,
-        opacity: items.length ? 1 : 0,
-      }}
-      className={cn("mx-auto flex w-11/12 flex-col overflow-hidden", className)}
-      data-slot="suggested-prompts"
-      initial={false}
-      transition={
-        reduceMotion ? { duration: 0 } : { duration: 0.32, ease: EASE_IN_OUT }
-      }
-      {...props}
-    >
-      <motion.button
-        aria-controls={panelId}
-        aria-expanded={open}
-        className="mx-auto flex w-full cursor-pointer items-center gap-2 px-4 py-1 text-xs text-muted-foreground transition-colors duration-150 ease-smooth-out outline-none hover:text-foreground focus-visible:text-foreground"
-        data-slot="suggested-prompts-trigger"
-        onClick={() => setOpen(!open)}
-        type="button"
-        whileTap={reduceMotion ? undefined : { scale: 0.97 }}
-      >
-        <Sparkles aria-hidden="true" className="size-3.5 stroke-[1.5]" />
-        <span className="flex-1 text-left">{label(count ?? items.length)}</span>
-        <motion.span
-          animate={{ rotate: open ? 0 : 90 }}
-          className="inline-flex"
-          initial={false}
-          transition={reduceMotion ? { duration: 0 } : SPRING_PANEL}
-        >
-          <ChevronDown aria-hidden="true" className="size-4 stroke-2" />
-        </motion.span>
-      </motion.button>
-
-      <AnimatePresence initial={false}>
-        {open ? (
-          <motion.div
-            animate={{ height: "auto", opacity: 1 }}
-            // A plain height tween, deliberately not a `layout` projection —
-            // the composer shell below animates its own scale, and a second
-            // projection over the same box breaks its scale correction.
-            className="overflow-hidden"
-            exit={{ height: 0, opacity: 0 }}
-            id={panelId}
-            initial={{ height: 0, opacity: 0 }}
-            transition={
-              reduceMotion
-                ? { duration: 0 }
-                : { duration: 0.32, ease: EASE_IN_OUT }
-            }
-          >
-            <motion.div
-              animate="visible"
-              // The bottom padding is what the composer pill sits over, so the
-              // panel reads as tucked behind it rather than stacked on it.
-              className="mt-1 -mb-5 flex flex-col gap-0.5 rounded-md border-t border-t-border bg-secondary p-1.5 pb-6"
-              exit="hidden"
-              initial={reduceMotion ? false : "hidden"}
-              variants={LIST_VARIANTS}
-            >
-              {items.map((item, index) => (
-                <motion.div
-                  key={
-                    isValidElement(item) && item.key != null ? item.key : index
-                  }
-                  variants={reduceMotion ? undefined : ITEM_VARIANTS}
-                >
-                  {item}
-                </motion.div>
-              ))}
-            </motion.div>
-          </motion.div>
-        ) : null}
-      </AnimatePresence>
-    </motion.div>
-  )
-}

package/src/components/composed/chat/composer/use-dictation.ts

@@ -1,123 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState, useSyncExternalStore } from "react"
-
-type RecognitionResult = { isFinal: boolean; 0: { transcript: string } }
-interface Recognition {
-  continuous: boolean
-  interimResults: boolean
-  lang: string
-  onresult:
-    | ((event: {
-        resultIndex: number
-        results: ArrayLike<RecognitionResult>
-      }) => void)
-    | null
-  onerror: ((event: { error: string }) => void) | null
-  onend: (() => void) | null
-  start(): void
-  stop(): void
-  abort(): void
-}
-function recognitionConstructor() {
-  if (typeof window === "undefined") return undefined
-  const browser = window as unknown as {
-    SpeechRecognition?: new () => Recognition
-    webkitSpeechRecognition?: new () => Recognition
-  }
-  return browser.SpeechRecognition ?? browser.webkitSpeechRecognition
-}
-const subscribe = () => () => {}
-const getSupported = () => Boolean(recognitionConstructor())
-const getServerSupported = () => false
-
-/** Uses the browser's recognizer only after an explicit microphone click. */
-export function useDictation(
-  onTranscript: (text: string) => void,
-  disabled: boolean
-) {
-  const supported = useSyncExternalStore(
-    subscribe,
-    getSupported,
-    getServerSupported
-  )
-  const [listening, setListening] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const recognition = useRef<Recognition | null>(null)
-  const receive = useRef(onTranscript)
-  useEffect(() => {
-    receive.current = onTranscript
-  })
-  useEffect(() => {
-    return () => {
-      const current = recognition.current
-      if (current) {
-        current.onresult = null
-        current.onerror = null
-        current.onend = null
-        current.abort()
-      }
-    }
-  }, [])
-  useEffect(() => {
-    const current = recognition.current
-    if (disabled && current) {
-      current.onresult = null
-      current.abort()
-    }
-  }, [disabled])
-  const cancel = () => {
-    const current = recognition.current
-    if (!current) return
-    current.onresult = null
-    current.onerror = null
-    current.onend = null
-    recognition.current = null
-    current.abort()
-    setListening(false)
-  }
-  const toggle = () => {
-    if (disabled) return
-    if (recognition.current) {
-      recognition.current.stop()
-      return
-    }
-    const Constructor = recognitionConstructor()
-    if (!Constructor) return
-    const current = new Constructor()
-    current.continuous = true
-    current.interimResults = false
-    current.lang = document.documentElement.lang || navigator.language
-    current.onresult = (event) => {
-      const text = Array.from(event.results)
-        .slice(event.resultIndex)
-        .filter((result) => result.isFinal)
-        .map((result) => result[0].transcript)
-        .join(" ")
-      if (text) receive.current(text)
-    }
-    current.onerror = (event) => {
-      if (event.error !== "aborted")
-        setError(
-          event.error === "not-allowed"
-            ? "Microphone access was denied."
-            : "Dictation stopped. Please try again."
-        )
-    }
-    current.onend = () => {
-      recognition.current = null
-      setListening(false)
-    }
-    recognition.current = current
-    setError(null)
-    try {
-      current.start()
-      setListening(true)
-    } catch {
-      recognition.current = null
-      setListening(false)
-      setError("Dictation is unavailable. Please try again.")
-    }
-  }
-  return { supported, listening, error, toggle, cancel }
-}

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

@@ -1,74 +0,0 @@
-/**
- * Per-instance attachment tray for `Composer`, keyed by composer id
- * so an app can add or remove chips without holding the component.
- */
-import { createKeyedFamilies } from "@/lib/keyed-atom"
-import type { TComposerAttachment } from "../type"
-import { Children, Fragment, isValidElement } from "react";
-import type { Variants } from "motion";
-import { EASE_IN_OUT, SPRING_PANEL } from "@/lib/ease";
-
-const { stateFamily, actionFamily, removeInstance } =
-  createKeyedFamilies("composer")
-
-const NO_ITEMS: TComposerAttachment[] = []
-
-export const composerAttachmentsAtom = stateFamily<TComposerAttachment[]>(
-  "attachments",
-  NO_ITEMS
-)
-
-export const addComposerAttachmentAtom = actionFamily(
-  "add",
-  (get, set, id, item: TComposerAttachment) => {
-    const items = get(composerAttachmentsAtom(id))
-    if (items.some((i) => i.id === item.id)) return
-    set(composerAttachmentsAtom(id), [...items, item])
-  }
-)
-
-export const removeComposerAttachmentAtom = actionFamily(
-  "remove",
-  (get, set, id, itemId: string) => {
-    set(
-      composerAttachmentsAtom(id),
-      get(composerAttachmentsAtom(id)).filter((i) => i.id !== itemId)
-    )
-  }
-)
-
-export const clearComposerAttachmentsAtom = actionFamily(
-  "clear",
-  (_get, set, id) => {
-    set(composerAttachmentsAtom(id), NO_ITEMS)
-  }
-)
-
-export const removeComposerInstance = removeInstance
-
-/** Children.toArray, but looking through fragments so `<>{a}{b}</>` counts two. */
-export function flattenChildren(children: React.ReactNode): React.ReactNode[] {
-  return Children.toArray(children).flatMap((child) =>
-    isValidElement<{ children?: React.ReactNode }>(child) && child.type === Fragment
-      ? flattenChildren(child.props.children)
-      : [child]
-  )
-}
-
-// The suggestions fan-out: the list holds the stagger, each item springs up
-// into place. Shared by `AiMessage`'s disclosure and `SuggestedPrompts`, so
-// both fan out with the same rhythm.
-export const LIST_VARIANTS: Variants = {
-  hidden: { transition: { staggerChildren: 0.04, staggerDirection: -1 } },
-  visible: { transition: { staggerChildren: 0.07, delayChildren: 0.05 } },
-}
-
-export const ITEM_VARIANTS: Variants = {
-  hidden: {
-    opacity: 0,
-    y: 14,
-    scale: 0.97,
-    transition: { duration: 0.18, ease: EASE_IN_OUT },
-  },
-  visible: { opacity: 1, y: 0, scale: 1, transition: SPRING_PANEL },
-}

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

@@ -1,63 +0,0 @@
-"use client"
-
-import { AlignLeft, ExternalLink, FileText } from "lucide-react"
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { Card, CardPanel } from "@/components/ui/card"
-import { FileTypeBadge, Pill } from "@/components/ui/chat"
-
-export interface IContextCard {
-  id?: string
-  title: React.ReactNode
-  /** "290 characters" */
-  meta?: React.ReactNode
-  snippet: React.ReactNode
-  file?: { name: React.ReactNode; type: string }
-  icon?: React.ReactNode
-}
-
-export interface IContextCardsProps extends React.ComponentPropsWithoutRef<"div"> {
-  header?: React.ReactNode
-  cards: IContextCard[]
-  /** Count pill; defaults to `cards.length`. */
-  count?: React.ReactNode
-  onOpen?: (card: IContextCard, index: number) => void
-}
-
-/**
- * Retrieved chunks: header with a count pill, then one card per chunk with
- * title, character count, snippet and the source file pill.
- *
- * @sketch "Component / Context Cards"
- */
-export function ContextCards({ header = "All chunks", cards, count, onOpen, className, ...props }: IContextCardsProps): React.ReactElement {
-  return (
-    <div data-slot="context-cards" className={cn("flex w-[380px] max-w-full flex-col gap-2", className)} {...props}>
-      <div className="flex items-center gap-2.5 px-0.5">
-        <span className="text-[13px] font-semibold leading-4 text-text-primary">{header}</span>
-        <Pill>{count ?? cards.length}</Pill>
-      </div>
-      {cards.map((card, i) => (
-        <Card key={card.id ?? i}><CardPanel className="flex flex-col gap-2 p-3">
-          <div className="flex items-center gap-1.5">
-            <span className="text-icon [&_svg]:size-3">{card.icon ?? (i % 2 ? <AlignLeft /> : <FileText />)}</span>
-            <span className="flex-1 truncate text-[13px] font-semibold leading-4 text-text-primary">{card.title}</span>
-            {card.meta ? <span className="text-[11px] text-text-muted">{card.meta}</span> : null}
-          </div>
-          <p className="line-clamp-2 text-[12px] leading-[14px] text-text-secondary">{card.snippet}</p>
-          {card.file ? (
-            <button
-              type="button"
-              onClick={() => onOpen?.(card, i)}
-              className="inline-flex h-6 w-fit max-w-full items-center gap-1.5 rounded-md bg-surface-subtle pl-2 pr-2 text-[11.5px] font-medium text-text-primary outline-none hover:bg-black/8 focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-white/10 [&_svg]:size-2.5 [&_svg]:text-text-muted"
-            >
-              <FileTypeBadge className="min-w-0 px-1">{card.file.type}</FileTypeBadge>
-              <span className="truncate">{card.file.name}</span>
-              <ExternalLink />
-            </button>
-          ) : null}
-        </CardPanel></Card>
-      ))}
-    </div>
-  )
-}

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

@@ -1,119 +0,0 @@
-"use client"
-
-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 { Dot, type TDotTone } from "@/components/ui/chat"
-
-const { stateFamily, removeInstance } = createKeyedFamilies("filterTable")
-
-/** Active filter id, keyed by `tableId`; `null` means "All". */
-export const filterTableFilterAtom = stateFamily<string | null>("filter", null)
-export const removeFilterTableInstance = removeInstance
-
-export interface IFilterTableStatus {
-  id: string
-  label: React.ReactNode
-  tone: TDotTone
-}
-
-export interface IFilterTableColumn<Row> {
-  key: keyof Row & string
-  header: React.ReactNode
-  className?: string
-}
-
-export interface IFilterTableProps<Row extends { id: string; status: string }> extends React.ComponentPropsWithoutRef<"div"> {
-  tableId?: string
-  statuses: IFilterTableStatus[]
-  columns: IFilterTableColumn<Row>[]
-  /** Column key rendered with the status dot (defaults to "status"). */
-  statusKey?: keyof Row & string
-  rows: Row[]
-  allLabel?: React.ReactNode
-  filter?: string | null
-  onFilterChange?: (filter: string | null) => void
-}
-
-/**
- * Status filter pills over a compact task table.
- *
- * @sketch "Component / Filter Table"
- */
-export function FilterTable<Row extends { id: string; status: string }>({
-  tableId, statuses, columns, statusKey = "status" as keyof Row & string, rows, allLabel = "All", filter, onFilterChange, className, ...props
-}: IFilterTableProps<Row>): React.ReactElement {
-  const generatedId = React.useId()
-  const id = tableId ?? generatedId
-  const [stored, setStored] = useAtom(filterTableFilterAtom(id))
-  const current = filter === undefined ? stored : filter
-  const select = (next: string | null) => {
-    if (filter === undefined) setStored(next)
-    onFilterChange?.(next)
-  }
-  React.useEffect(() => {
-    if (tableId) return
-    return () => removeFilterTableInstance(id)
-  }, [tableId, id])
-
-  const visible = current ? rows.filter((r) => r.status === current) : rows
-  const byStatus = (s: string) => rows.filter((r) => r.status === s).length
-  const statusOf = (s: string) => statuses.find((x) => x.id === s)
-
-  const pill = (active: boolean) =>
-    cn(
-      "flex h-[26px] items-center gap-1.5 rounded-full px-2.5 text-[12.5px] leading-none outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
-      active ? "bg-surface-subtle font-medium text-text-primary" : "text-text-secondary hover:text-text-primary"
-    )
-
-  return (
-    <div data-slot="filter-table" className={cn("flex w-[450px] max-w-full flex-col gap-2.5", className)} {...props}>
-      <div role="tablist" className="flex flex-wrap items-center gap-1">
-        <button type="button" role="tab" aria-selected={current === null} onClick={() => select(null)} className={pill(current === null)}>
-          {allLabel}
-          <span className="rounded-full bg-black/8 px-1.5 py-0.5 text-[10.5px] text-text-secondary dark:bg-white/10">{rows.length}</span>
-        </button>
-        {statuses.map((s) => (
-          <button key={s.id} type="button" role="tab" aria-selected={current === s.id} onClick={() => select(s.id)} className={pill(current === s.id)}>
-            <Dot tone={s.tone} size={6} />
-            {s.label}
-            <span className="text-[10.5px] text-text-muted">{byStatus(s.id)}</span>
-          </button>
-        ))}
-      </div>
-      <Card className="overflow-x-auto">
-        <table className="w-full border-collapse text-left">
-          <thead>
-            <tr className="border-b border-border-default">
-              {columns.map((c) => (
-                <th key={c.key} className={cn("px-3 py-2.5 text-[11px] font-medium leading-3 text-text-secondary", c.className)}>{c.header}</th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {visible.map((row) => (
-              <tr key={row.id} className="border-b border-border-default last:border-b-0">
-                {columns.map((c) => {
-                  const value = row[c.key] as React.ReactNode
-                  const status = c.key === statusKey ? statusOf(String(value)) : undefined
-                  return (
-                    <td key={c.key} className={cn("whitespace-nowrap px-3 py-2.5 text-[13px] leading-4 text-text-primary", c.className)}>
-                      {status ? (
-                        <span className="flex items-center gap-1.5 text-[12.5px] text-text-secondary"><Dot tone={status.tone} size={6} />{status.label}</span>
-                      ) : value}
-                    </td>
-                  )
-                })}
-              </tr>
-            ))}
-            {visible.length === 0 ? (
-              <tr><td colSpan={columns.length} className="px-3 py-4 text-center text-[12px] text-text-muted">No rows</td></tr>
-            ) : null}
-          </tbody>
-        </table>
-      </Card>
-    </div>
-  )
-}