@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/blocks/chat/base.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Composer } from "@/components/composed/chat/composer"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import Background from "@/components/atoms/background"
+import { AiPanelHeader } from "./header"
+import { SuggestedPrompts } from "./suggested-prompts"
+import type { AiPanelProps } from "./types"
+
+/**
+ * Full-height curation rail, designed to sit inside a host container such as
+ * the shell's right panel — it brings no surface chrome or close affordance
+ * of its own. Data fetching, streaming and version writes stay with the host
+ * application; this component only establishes layout and the focus order
+ * shared by all panel states.
+ */
+export function AiPanel({
+  onNewThread,
+  thread,
+  prompts = [],
+  onPromptSelect,
+  composerProps,
+  locked = false,
+  headerTitle = "AI panel",
+  className,
+  ...props
+}: AiPanelProps): React.ReactElement {
+  return (
+    // A landmark, not a bare div: `aria-label` on a roleless element is not
+    // exposed, so the panel would lose both its name and its region.
+    <aside
+      aria-label={headerTitle}
+      className={cn(
+        "relative flex h-full w-full flex-col bg-background",
+        className
+      )}
+      data-slot="ai-panel"
+      {...props}
+    >
+      <Background.Texture
+        variant="paper"
+        className="relative flex h-full w-full flex-col"
+      >
+        <AiPanelHeader
+          locked={locked}
+          onNewThread={onNewThread}
+          title={headerTitle}
+        />
+
+        <div className="relative min-h-0 flex-1">
+          <ScrollArea
+            aria-label="Thread"
+            role="region"
+            scrollFade="bottom"
+            fill
+          >
+            {/* `w-full`, not `mx-auto`: as a flex item, auto margins shrink the
+              column to fit-content, so the thread would drift off the
+              composer's gutters. px-3 lines it up with the footer. */}
+            <div className="flex min-h-0 flex-1 flex-col px-5">
+              <div className="w-full">{thread}</div>
+              {!thread && (
+                <div className="flex h-full min-h-44 flex-col justify-end">
+                  <SuggestedPrompts
+                    onSelect={onPromptSelect}
+                    prompts={prompts}
+                  />
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+        <footer className="shrink-0 px-5 pb-3.5">
+          <Composer
+            {...composerProps}
+            disabled={locked || composerProps?.disabled}
+          />
+        </footer>
+      </Background.Texture>
+    </aside>
+  )
+}

package/src/components/blocks/chat/header.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Lock, Plus } from "lucide-react"
+import { Tooltip, TooltipPopup, TooltipTrigger } from "@/components/ui/tooltip"
+import type { AiPanelHeaderProps } from "./types"
+
+function LockedHint({ locked }: { locked?: boolean }): React.ReactElement {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        disabled={locked}
+        render={
+          <Button variant="ghost" size="icon-xs" className="opacity-50" />
+        }
+      >
+        <Lock className="size-3" />
+      </TooltipTrigger>
+      <TooltipPopup side="bottom">
+        <div>
+          <div className="flex items-center gap-1">
+            <Lock className="size-2.5" />
+            <h6 className="text-sm">Published corpus</h6>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Editing is disabled. Answers only.
+          </p>
+        </div>
+      </TooltipPopup>
+    </Tooltip>
+  )
+}
+
+/** The panel's sticky top row: title, lock hint and the new-thread button. */
+export function AiPanelHeader({
+  title,
+  locked = false,
+  onNewThread,
+}: AiPanelHeaderProps): React.ReactElement {
+  return (
+    <header className="sticky top-0 flex shrink-0 flex-col items-center gap-2 border-b border-border bg-sidebar p-3.5">
+      <div className="flex w-full flex-row items-center justify-between">
+        <div className="flex flex-1 items-center">
+          <h2 className="text-sm font-semibold text-foreground">{title}</h2>
+          {!locked && <LockedHint locked={locked} />}
+        </div>
+        <Button
+          className={cn("font-semibold")}
+          onClick={onNewThread}
+          size="icon-xs"
+          variant="ghost"
+        >
+          <Plus className="size-4 stroke-3" />
+        </Button>
+      </div>
+    </header>
+  )
+}

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

@@ -0,0 +1,39 @@
+import { AiPanel } from "./base"
+
+export { AiPanel }
+export { AiPanelHeader } from "./header"
+export { SuggestedPrompts } from "./suggested-prompts"
+export { RecommendationStack } from "./recommendation-stack"
+export type { RecommendationStackProps } from "./recommendation-stack"
+export { DegradedBanner, LockedBanner, PinnedThreadBanner } from "./banners"
+export type { DegradedBannerProps, PinnedThreadBannerProps } from "./banners"
+export { VersionHistoryRecord } from "./version-history-record"
+
+export {
+  AppliedMark,
+  ApplyToast,
+  SelectionHighlight,
+  SelectionPopover,
+} from "@/components/composed/reader"
+export type {
+  AppliedMarkProps,
+  ApplyToastProps,
+  SelectionHighlightProps,
+  SelectionPopoverProps,
+} from "@/components/composed/reader"
+export type {
+  AiPanelHeaderProps,
+  AiPanelProps,
+  LockedBannerProps,
+  AiScope,
+  AiScopeKind,
+  ComposerMode,
+  DiffRow,
+  NodeSelection,
+  SuggestionState,
+  VersionHistoryEntry,
+  SuggestedPromptsProps,
+  WordSelection,
+} from "./types"
+
+export default AiPanel

package/src/components/blocks/chat/recommendation-stack.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import type * as React from "react"
+import { Group } from "@/components/ui/group"
+import { cn } from "@/lib/utils"
+
+export interface RecommendationStackProps
+  extends React.ComponentPropsWithoutRef<"div"> {
+  children: React.ReactNode
+}
+
+/**
+ * Fuses a run of RecommendationCards into one bordered stack for the thread.
+ *
+ * The ui Group only fuses bordered direct children, but each card wraps its
+ * frame in a borderless accordion root — so the frames are fused one level
+ * down instead, and the Group-injected ::before (which would render as a
+ * phantom flex item between the cards) is dropped.
+ */
+export function RecommendationStack({
+  className,
+  children,
+  ...props
+}: RecommendationStackProps): React.ReactElement {
+  return (
+    <Group
+      className={cn(
+        "w-full *:before:content-none",
+        "[&>*:not(:last-child)_[data-slot=recommendation-card]]:rounded-b-none",
+        "[&>*:not(:last-child)_[data-slot=recommendation-card]]:before:rounded-b-none",
+        "[&>*+*_[data-slot=recommendation-card]]:rounded-t-none",
+        "[&>*+*_[data-slot=recommendation-card]]:border-t-0",
+        "[&>*+*_[data-slot=recommendation-card]]:before:rounded-t-none",
+        className
+      )}
+      data-slot="recommendation-stack"
+      orientation="vertical"
+      {...props}
+    >
+      {children}
+    </Group>
+  )
+}

package/src/components/blocks/chat/shared.tsx

@@ -0,0 +1,27 @@
+// The visual language (accent constants, ✦ icon, close glyph) lives with the
+// reusable AI components in `components/composed/ai`; the block re-uses it
+// from there.
+export {
+  accentRing,
+  accentSolid,
+  accentText,
+  ghostMuted,
+  mutedText,
+  surface,
+} from "@/components/composed/ai/shared"
+
+export function formatScopeLabel(scope: {
+  kind: string
+  label: string
+  location?: string
+  range?: string
+  pinned?: boolean
+}): string {
+  if (scope.pinned) {
+    return `PINNED · ${scope.label}${scope.range ? ` ${scope.range}` : ""}`
+  }
+  if (scope.range && scope.kind === "passage") {
+    return `${scope.label} ${scope.range} · passage`
+  }
+  return `${scope.label} · ${scope.kind}${scope.location ? ` · ${scope.location}` : ""}`
+}

package/src/components/blocks/chat/suggested-prompts.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { accentRing, mutedText } from "./shared"
+import { Sparkles } from "lucide-react"
+import type { SuggestedPromptsProps } from "./types";
+
+
+export function SuggestedPrompts({
+  prompts = [],
+  onSelect,
+  emptyLabel = "Ask about this selection or validate it against the schema.",
+  className,
+}: SuggestedPromptsProps): React.ReactElement | null {
+  if (!prompts.length) {
+    return (
+      <p className={cn("px-1 py-3", mutedText, className)} data-empty="true">
+        <Sparkles className="mr-1.5" />
+        {emptyLabel}
+      </p>
+    )
+  }
+  return (
+    <div
+      className={cn("grid gap-1.5", className)}
+      aria-label="Suggested prompts"
+    >
+      {prompts.map((prompt) => (
+        <Button
+          className={cn(
+            "h-auto justify-start border bg-muted/30 px-3 py-2 text-left text-xs font-normal whitespace-normal text-muted-foreground hover:border-amber-500/30 hover:text-foreground sm:h-auto sm:text-xs",
+            accentRing
+          )}
+          key={prompt}
+          onClick={() => onSelect?.(prompt)}
+          variant="ghost"
+        >
+          {prompt}
+        </Button>
+      ))}
+    </div>
+  )
+}

package/src/components/blocks/chat/types.ts

@@ -0,0 +1,81 @@
+import type * as React from "react"
+import type { IComposerProps } from "@/components/composed/chat/composer"
+
+export type AiScopeKind =
+  "word" | "passage" | "articulus" | "quaestio" | "corpus"
+
+export interface AiScope {
+  kind: AiScopeKind
+  label: string
+  /** Reader location shown after a normal word/node scope. */
+  location?: string
+  range?: string
+  nodeId?: string
+  nodeIds?: string[]
+  pinned?: boolean
+}
+
+// The reader selection shapes moved with `SelectionPopover` to
+// `composed/reader`; re-exported so the block's surface stays whole.
+export type { NodeSelection, WordSelection } from "@/components/composed/reader"
+
+export interface AiPanelProps extends Omit<
+  React.ComponentPropsWithoutRef<"aside">,
+  "title"
+> {
+  scope: AiScope
+  onNewThread?: () => void
+  onScopeChange?: (kind: AiScope["kind"]) => void
+  onRemoveScope?: () => void
+  thread?: React.ReactNode
+  /** Transient confirmation (e.g. ApplyToast), anchored to the bottom of the
+   * thread and sized slightly narrower than the composer. */
+  toast?: React.ReactNode
+  prompts?: string[]
+  onPromptSelect?: (prompt: string) => void
+  composerProps?: IComposerProps
+  scopePickerOpen?: boolean
+  onScopePickerOpenChange?: (open: boolean) => void
+  locked?: boolean
+  headerTitle?: string
+}
+
+export interface AiPanelHeaderProps {
+  title: string
+  /** Shows the lock affordance and its “Published corpus” tooltip. */
+  locked?: boolean
+  onNewThread?: () => void
+}
+
+export type { ComposerMode } from "@/components/composed/chat/composer"
+export type { DiffRow, SuggestionState } from "@/components/composed/ai/types"
+
+export interface VersionHistoryEntry {
+  id?: string
+  responseId: string
+  applyingUser?: string
+  nodeId: string
+  previousValue: string
+  nextValue?: string
+  timestamp: string | Date
+  version: string
+  action?: "apply" | "revert"
+}
+
+export interface SuggestedPromptsProps {
+  prompts?: string[]
+  onSelect?: (prompt: string) => void
+  emptyLabel?: string
+  className?: string
+}
+
+export interface VersionHistoryRecordProps {
+  entry: VersionHistoryEntry
+  className?: string
+}
+
+
+export interface LockedBannerProps {
+  children?: React.ReactNode
+  className?: string
+}

package/src/components/blocks/chat/version-history-record.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { accentText, mutedText } from "./shared"
+import type { VersionHistoryRecordProps } from "./types"
+
+
+
+export function VersionHistoryRecord({
+  entry,
+  className,
+}: VersionHistoryRecordProps): React.ReactElement {
+  const timestamp =
+    entry.timestamp instanceof Date
+      ? entry.timestamp.toLocaleString()
+      : entry.timestamp
+  return (
+    <article
+      className={cn("border-l border-border pl-3", className)}
+      data-slot="version-history-record"
+    >
+      <p className="text-xs text-foreground/85">
+        <span className={cn("font-medium", accentText)}>
+          resp=&quot;{entry.responseId}&quot;
+        </span>
+        {entry.applyingUser ? ` · ${entry.applyingUser}` : ""}
+      </p>
+      <p className={cn("mt-1 text-xs", mutedText)}>
+        Node <code>{entry.nodeId}</code> · v{entry.version} · {timestamp}
+      </p>
+      <p className="mt-2 text-xs text-muted-foreground">
+        Previous value: <del>{entry.previousValue}</del>
+      </p>
+    </article>
+  )
+}

package/src/components/blocks/nav/sidebar/__tests__/ai-sidebar-atom.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { createStore } from "jotai"
 
-import { ExegiaProvider } from "@/state"
+import { ExegiaProvider } from "@/lib/state"
 import { AISidebar } from "../ai-sidebar"
 import {
   DEFAULT_AI_SIDEBAR_CONFIG,

package/src/components/blocks/nav/sidebar/sidebar-row.tsx

@@ -157,7 +157,7 @@ function ResourceRowImpl({ row }: ResourceRowProps) {
         onMenuOpenChange(false)
         startRename(row.item.id)
       }}
-      className="flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-xs text-foreground transition-colors outline-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+      className="flex h-8 w-full items-center gap-2 rounded-md px-2.5 text-left text-xs text-foreground transition-colors outline-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
     >
       <Pencil aria-hidden="true" className="size-3.5" />
       Rename
@@ -326,7 +326,7 @@ function ResourceRowImpl({ row }: ResourceRowProps) {
                   variant="link"
                   aria-label={`Actions for ${row.item.label}`}
                   onClick={(event) => event.stopPropagation()}
-                  className="relative grid size-7 shrink-0 place-items-center rounded-lg opacity-0 transition-opacity duration-150 ease-smooth-out outline-none group-hover/resource:opacity-80 group-hover/resource:delay-150 group-data-[menu-open=true]/resource:opacity-100 hover:bg-foreground/5 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+                  className="relative grid size-7 shrink-0 place-items-center rounded-md opacity-0 transition-opacity duration-150 ease-smooth-out outline-none group-hover/resource:opacity-80 group-hover/resource:delay-150 group-data-[menu-open=true]/resource:opacity-100 hover:bg-foreground/5 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
                 >
                   <MoreHorizontal aria-hidden="true" className="size-4" />
                 </Button>