banhaten 0.3.0 → 0.5.0

package/registry/components/agent-input-parts.tsx

@@ -0,0 +1,552 @@
+"use client"
+
+import * as React from "react"
+import {
+  BookOpenIcon,
+  CheckIcon,
+  ImageIcon,
+  PaperclipIcon,
+  PlusIcon,
+  SlashIcon,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuItemDescription,
+  MenuItemIcon,
+  MenuItemText,
+  MenuItemTitle,
+  MenuLabel,
+  MenuSeparator,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+} from "@/components/ui/menu"
+import { Tag } from "@/components/ui/tag"
+import { useListboxNavigation } from "@/hooks/use-listbox-navigation"
+import { useMotionEnd, waitForMotion } from "@/hooks/use-motion-end"
+import { useReducedMotion } from "@/hooks/use-reduced-motion"
+
+import {
+  findSlashQuery,
+  matchSkills,
+  settleLeavingChip,
+  withLeavingChips,
+  type AgentInputLabels,
+  type AgentInputModel,
+  type AgentInputPhase,
+  type AgentInputSkill,
+  type AttachmentKind,
+  type Chip,
+  type ChipEntry,
+  type LeavingChip,
+  type SlashToken,
+} from "./agent-input-state"
+
+/* ------------------------------------------------------------------ Chips */
+
+/**
+ * Wraps one chip. A removed chip keeps its slot until its exit animation
+ * ends, then reports `onExited`; without a running animation it reports at
+ * once, so a removed chip never lingers.
+ */
+function ChipSlot({
+  children,
+  exiting,
+  onExited,
+}: {
+  children: React.ReactNode
+  exiting: boolean
+  onExited: () => void
+}) {
+  const ref = React.useRef<HTMLSpanElement>(null)
+  useMotionEnd(ref, exiting, onExited)
+
+  return (
+    <span data-exit={exiting ? "true" : "false"} data-slot="agent-input-chip" ref={ref}>
+      {children}
+    </span>
+  )
+}
+
+/**
+ * The chips of the current value, plus copies of removed ones kept where they
+ * were until their exit animation ends. The value drops a chip at once and
+ * only its exit lingers, so quick removals and host updates in the meantime
+ * are never undone.
+ */
+function useChipPresence(live: readonly Chip[]) {
+  const [leaving, setLeaving] = React.useState<readonly LeavingChip[]>([])
+  const liveKeys = new Set(live.map((chip) => chip.key))
+
+  // A chip added back while its old copy was still leaving replaces it.
+  if (leaving.some(({ chip }) => liveKeys.has(chip.key))) {
+    setLeaving(leaving.filter(({ chip }) => !liveKeys.has(chip.key)))
+  }
+
+  const chips = withLeavingChips(live, leaving)
+
+  /** Keeps a live chip on screen while it leaves; returns it, or null. */
+  const leave = (key: string) => {
+    const index = chips.findIndex(({ chip }) => chip.key === key)
+    const entry = chips[index]
+    if (!entry || entry.exiting) return null
+    setLeaving((current) => [...current, { chip: entry.chip, index }])
+    return entry.chip
+  }
+
+  const settle = (key: string) => setLeaving((current) => settleLeavingChip(current, key))
+
+  return { chips, leave, settle }
+}
+
+type ChipRowProps = {
+  chips: readonly ChipEntry[]
+  disabled: boolean
+  labels: AgentInputLabels
+  onExited: (key: string) => void
+  onRemove: (key: string) => void
+  skillName: (id: string) => string
+}
+
+function ChipRow({ chips, disabled, labels, onExited, onRemove, skillName }: ChipRowProps) {
+  if (chips.length === 0) return null
+
+  return (
+    <div data-slot="agent-input-chips">
+      {chips.map(({ chip, exiting }) => (
+        <ChipSlot exiting={exiting} key={chip.key} onExited={() => onExited(chip.key)}>
+          {chip.kind === "skill" ? (
+            <Tag
+              closeLabel={labels.removeSkill(skillName(chip.skillId))}
+              disabled={disabled}
+              icon={<SlashIcon />}
+              onClose={() => onRemove(chip.key)}
+              showCloseButton
+              size="xs"
+              state="active"
+              type="icon"
+            >
+              {skillName(chip.skillId)}
+            </Tag>
+          ) : (
+            <Tag
+              closeLabel={labels.removeAttachment(chip.attachment.name)}
+              disabled={disabled}
+              icon={chip.attachment.kind === "image" ? <ImageIcon /> : <PaperclipIcon />}
+              onClose={() => onRemove(chip.key)}
+              showCloseButton
+              size="xs"
+              type="icon"
+            >
+              {chip.attachment.name}
+            </Tag>
+          )}
+        </ChipSlot>
+      ))}
+    </div>
+  )
+}
+
+/* ---------------------------------------------------------- Slash palette */
+
+/**
+ * Opens when a "/" sits before the caret, filters skills by what follows it,
+ * and remembers that token so picking a skill can take it out of the text.
+ */
+function useSlashPalette(skills: readonly AgentInputSkill[]) {
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState("")
+  // True while the arrows drive the list, so a resting pointer does not steal
+  // the active option.
+  const [keyboard, setKeyboard] = React.useState(false)
+  const token = React.useRef<SlashToken | null>(null)
+  const id = React.useId()
+  const results = React.useMemo(() => matchSkills(skills, query), [skills, query])
+  const nav = useListboxNavigation({ idPrefix: id, open, options: results })
+
+  const close = () => {
+    setOpen(false)
+    setQuery("")
+    setKeyboard(false)
+    token.current = null
+  }
+
+  const detect = (text: string, caret: number | null) => {
+    if (caret === null || skills.length === 0) return close()
+    const found = findSlashQuery(text, caret)
+    if (!found) return close()
+    token.current = { end: found.end, start: found.start }
+    // A new query starts again from its first match.
+    if (found.query !== query) nav.setActiveIndex(0)
+    setQuery(found.query)
+    setOpen(true)
+  }
+
+  /** Moves, picks, or closes from the keyboard; returns whether it used the key. */
+  const handleKey = (
+    event: React.KeyboardEvent,
+    pick: (skill: AgentInputSkill) => void
+  ) => {
+    if (!open) return false
+    if (results.length > 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault()
+      setKeyboard(true)
+      nav.move(event.key === "ArrowDown" ? 1 : -1)
+      return true
+    }
+    if (results.length > 0 && (event.key === "Enter" || event.key === "Tab")) {
+      event.preventDefault()
+      pick(results[Math.max(nav.activeIndex, 0)])
+      return true
+    }
+    if (event.key === "Escape") {
+      event.preventDefault()
+      close()
+      return true
+    }
+    return false
+  }
+
+  return { close, detect, handleKey, id, keyboard, nav, open, results, setKeyboard, token }
+}
+
+type SlashPaletteState = ReturnType<typeof useSlashPalette>
+
+function SlashPalette({
+  labels,
+  onPick,
+  slash,
+}: {
+  labels: AgentInputLabels
+  onPick: (skill: AgentInputSkill) => void
+  slash: SlashPaletteState
+}) {
+  return (
+    <div
+      aria-label={labels.skills}
+      data-keyboard={slash.keyboard ? "true" : "false"}
+      data-slot="agent-input-palette"
+      id={slash.id}
+      onMouseMove={() => {
+        if (slash.keyboard) slash.setKeyboard(false)
+      }}
+      role="listbox"
+    >
+      <div aria-hidden="true" data-slot="agent-input-palette-label">
+        {labels.skills}
+      </div>
+      {slash.results.length > 0 ? (
+        slash.results.map((skill, index) => (
+          <button
+            aria-selected={index === slash.nav.activeIndex}
+            data-active={index === slash.nav.activeIndex ? "true" : "false"}
+            data-slot="agent-input-palette-item"
+            id={slash.nav.optionId(index)}
+            key={skill.id}
+            onClick={() => onPick(skill)}
+            onMouseDown={(event) => event.preventDefault()}
+            onMouseEnter={() => {
+              if (!slash.keyboard) slash.nav.setActiveIndex(index)
+            }}
+            role="option"
+            tabIndex={-1}
+            type="button"
+          >
+            {skill.icon ? <span data-slot="agent-input-palette-icon">{skill.icon}</span> : null}
+            <span data-slot="agent-input-palette-name" dir="auto">
+              {skill.name}
+            </span>
+          </button>
+        ))
+      ) : (
+        <div data-slot="agent-input-palette-empty">{labels.noSkills}</div>
+      )}
+    </div>
+  )
+}
+
+/* ------------------------------------------------------------ Enhancement */
+
+/**
+ * Rewrites the prompt through `onEnhance`: a failure restores the original,
+ * revert brings it back, and unmounting aborts the request. The frame eases
+ * between its old and new height when the text changes size.
+ */
+function usePromptEnhancement({
+  frameRef,
+  onEnhance,
+  onFinish,
+  onStart,
+  setValue,
+  value,
+}: {
+  frameRef: React.RefObject<HTMLDivElement | null>
+  onEnhance?: (prompt: string, signal: AbortSignal) => Promise<string>
+  /** Runs once a request settles, unless the field unmounted meanwhile. */
+  onFinish: () => void
+  onStart: () => void
+  setValue: (value: string) => void
+  value: string
+}) {
+  const [phase, setPhase] = React.useState<AgentInputPhase>("idle")
+  const original = React.useRef("")
+  const request = React.useRef<AbortController | null>(null)
+  const flipFrom = React.useRef<number | null>(null)
+  const reducedMotion = useReducedMotion()
+  const enhancing = phase === "enhancing"
+
+  React.useLayoutEffect(() => {
+    const frame = frameRef.current
+    const from = flipFrom.current
+    flipFrom.current = null
+    if (!frame || from === null || enhancing || reducedMotion) return
+    const to = frame.offsetHeight
+    if (from === to) return
+    frame.style.height = `${from}px`
+    frame.style.overflow = "hidden"
+    void frame.offsetHeight
+    frame.style.transition = "height var(--bh-duration-default) var(--bh-easing-emphasized)"
+    frame.style.height = `${to}px`
+    // Never cancelled: however the next render goes, the frame must drop
+    // its fixed height once the transition is over.
+    waitForMotion(frame, () => {
+      frame.style.transition = ""
+      frame.style.height = ""
+      frame.style.overflow = ""
+    })
+  }, [enhancing, frameRef, phase, reducedMotion])
+
+  React.useEffect(() => () => request.current?.abort(), [])
+
+  const run = async () => {
+    if (!onEnhance || !value.trim() || enhancing) return
+    original.current = value
+    setPhase("enhancing")
+    onStart()
+    const controller = new AbortController()
+    request.current = controller
+    try {
+      const result = await onEnhance(value, controller.signal)
+      if (controller.signal.aborted) return
+      flipFrom.current = frameRef.current?.offsetHeight ?? null
+      setValue(result)
+      setPhase("enhanced")
+    } catch {
+      if (controller.signal.aborted) return
+      setValue(original.current)
+      setPhase("idle")
+    }
+    onFinish()
+  }
+
+  const revert = () => {
+    request.current?.abort()
+    flipFrom.current = frameRef.current?.offsetHeight ?? null
+    setValue(original.current)
+    setPhase("idle")
+  }
+
+  /** Editing or sending leaves the enhanced prompt behind. */
+  const reset = () => setPhase("idle")
+
+  return { enhancing, phase, reset, revert, run }
+}
+
+/** Keeps the enhance pill mounted through its exit animation. */
+function useEnhancePill(visible: boolean, enhancing: boolean) {
+  const ref = React.useRef<HTMLButtonElement>(null)
+  const [mounted, setMounted] = React.useState(false)
+  const [exiting, setExiting] = React.useState(false)
+
+  React.useEffect(() => {
+    if (visible) {
+      setMounted(true)
+      setExiting(false)
+      return
+    }
+    if (!mounted) return
+    // The spinner takes its place at once while a request runs.
+    if (enhancing) {
+      setMounted(false)
+      setExiting(false)
+      return
+    }
+    setExiting(true)
+  }, [enhancing, mounted, visible])
+
+  useMotionEnd(ref, exiting, () => {
+    setMounted(false)
+    setExiting(false)
+  })
+
+  return { exiting, mounted, ref }
+}
+
+/* --------------------------------------------------------------- Add menu */
+
+/** A hidden multi-file input that the add menu opens as a photo or file picker. */
+function useFilePicker(onPick: (files: File[], picker: AttachmentKind) => void) {
+  const ref = React.useRef<HTMLInputElement>(null)
+
+  const open = (kind: AttachmentKind) => {
+    const input = ref.current
+    if (!input) return
+    input.accept = kind === "image" ? "image/*" : ""
+    input.dataset.kind = kind
+    input.value = ""
+    input.click()
+  }
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files ?? [])
+    if (files.length === 0) return
+    onPick(files, (event.target.dataset.kind as AttachmentKind | undefined) ?? "file")
+    event.target.value = ""
+  }
+
+  return {
+    inputProps: { hidden: true, multiple: true, onChange, ref, tabIndex: -1, type: "file" },
+    open,
+  }
+}
+
+type AddMenuProps = {
+  disabled: boolean
+  labels: AgentInputLabels
+  model?: string
+  models: readonly AgentInputModel[]
+  onModelChange: (model: string) => void
+  onPickFiles: (kind: AttachmentKind) => void
+  onToggleSkill: (skillId: string) => void
+  selectedSkills: readonly string[]
+  skills: readonly AgentInputSkill[]
+}
+
+/** Photos, files, skills, and the model, behind the plus button. */
+function AddMenu({
+  disabled,
+  labels,
+  model,
+  models,
+  onModelChange,
+  onPickFiles,
+  onToggleSkill,
+  selectedSkills,
+  skills,
+}: AddMenuProps) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Menu onOpenChange={setOpen} open={open}>
+      <MenuTrigger asChild>
+        <Button
+          aria-label={labels.addMenu}
+          data-open={open ? "true" : "false"}
+          data-slot="agent-input-add"
+          disabled={disabled}
+          size="icon-xs"
+          variant="soft"
+        >
+          <PlusIcon data-slot="agent-input-add-icon" />
+        </Button>
+      </MenuTrigger>
+      <MenuContent align="start" side="top">
+        <MenuItem onSelect={() => onPickFiles("image")}>
+          <MenuItemIcon>
+            <ImageIcon />
+          </MenuItemIcon>
+          {labels.addPhotos}
+        </MenuItem>
+        <MenuItem onSelect={() => onPickFiles("file")}>
+          <MenuItemIcon>
+            <PaperclipIcon />
+          </MenuItemIcon>
+          {labels.addFiles}
+        </MenuItem>
+        {skills.length > 0 ? (
+          <>
+            <MenuSeparator />
+            <MenuSub>
+              <MenuSubTrigger>
+                <MenuItemIcon>
+                  <BookOpenIcon />
+                </MenuItemIcon>
+                {labels.skills}
+              </MenuSubTrigger>
+              <MenuSubContent>
+                {skills.map((skill) => {
+                  const selected = selectedSkills.includes(skill.id)
+                  return (
+                    <MenuItem
+                      aria-checked={selected}
+                      key={skill.id}
+                      onSelect={() => onToggleSkill(skill.id)}
+                      role="menuitemcheckbox"
+                    >
+                      {skill.icon ? <MenuItemIcon>{skill.icon}</MenuItemIcon> : null}
+                      {skill.name}
+                      {selected ? (
+                        <MenuItemIcon position="trailing">
+                          <CheckIcon />
+                        </MenuItemIcon>
+                      ) : null}
+                    </MenuItem>
+                  )
+                })}
+              </MenuSubContent>
+            </MenuSub>
+          </>
+        ) : null}
+        {models.length > 0 ? (
+          <>
+            <MenuSeparator />
+            <MenuLabel label={labels.model} />
+            {models.map((item) => {
+              const selected = item.id === model
+              return (
+                <MenuItem
+                  aria-checked={selected}
+                  key={item.id}
+                  kind={item.description ? "multiline" : "default"}
+                  onSelect={() => onModelChange(item.id)}
+                  role="menuitemcheckbox"
+                >
+                  {item.icon ? <MenuItemIcon>{item.icon}</MenuItemIcon> : null}
+                  <MenuItemText>
+                    <MenuItemTitle>{item.name}</MenuItemTitle>
+                    {item.description ? (
+                      <MenuItemDescription>
+                        {item.meta ? `${item.description} · ${item.meta}` : item.description}
+                      </MenuItemDescription>
+                    ) : null}
+                  </MenuItemText>
+                  {selected ? (
+                    <MenuItemIcon position="trailing">
+                      <CheckIcon />
+                    </MenuItemIcon>
+                  ) : null}
+                </MenuItem>
+              )
+            })}
+          </>
+        ) : null}
+      </MenuContent>
+    </Menu>
+  )
+}
+
+export {
+  AddMenu,
+  ChipRow,
+  SlashPalette,
+  useChipPresence,
+  useEnhancePill,
+  useFilePicker,
+  usePromptEnhancement,
+  useSlashPalette,
+}

package/registry/components/agent-input-state.ts

@@ -0,0 +1,156 @@
+import type * as React from "react"
+
+type AgentInputPhase = "idle" | "enhancing" | "enhanced"
+
+type AgentInputModel = {
+  description?: string
+  icon?: React.ReactNode
+  id: string
+  /** Secondary detail such as the context window. */
+  meta?: string
+  name: string
+}
+
+type AgentInputSkill = {
+  icon?: React.ReactNode
+  id: string
+  name: string
+}
+
+type AgentInputAttachment = {
+  /** The picked file to upload. Attachments you pass in yourself may omit it. */
+  file?: File
+  id: string
+  kind: "image" | "file"
+  name: string
+}
+
+type AgentInputPayload = {
+  attachments: readonly AgentInputAttachment[]
+  model?: string
+  skills: readonly string[]
+  text: string
+}
+
+type AgentInputLabels = {
+  addFiles: string
+  addMenu: string
+  addPhotos: string
+  enhance: string
+  enhancing: string
+  model: string
+  noSkills: string
+  placeholder: string
+  removeAttachment: (name: string) => string
+  removeSkill: (name: string) => string
+  revert: string
+  send: string
+  skills: string
+}
+
+type AttachmentKind = AgentInputAttachment["kind"]
+
+/**
+ * A file's own type decides its kind; the picker it came from only decides
+ * for files the browser could not type.
+ */
+function attachmentKind(file: File, picker: AttachmentKind): AttachmentKind {
+  if (file.type.startsWith("image/")) return "image"
+  return file.type ? "file" : picker
+}
+
+/* ---------------------------------------------------------- Slash tokens */
+
+type SlashToken = { end: number; start: number }
+
+const slashPattern = /(?:^|\s)\/([^\s/]*)$/
+
+/** The "/query" typed right before the caret, if there is one. */
+function findSlashQuery(text: string, caret: number) {
+  const before = text.slice(0, caret)
+  const match = before.match(slashPattern)
+  if (!match) return null
+  const query = match[1]
+  return { end: caret, query, start: before.length - query.length - 1 }
+}
+
+/** Skills whose name contains the query, ignoring case. */
+function matchSkills(skills: readonly AgentInputSkill[], query: string) {
+  const needle = query.toLowerCase()
+  return skills.filter((skill) => skill.name.toLowerCase().includes(needle))
+}
+
+/**
+ * The text without a slash token, and without the spaces it leaves at the end,
+ * including the no-break space some keyboards type.
+ */
+function withoutSlashToken(text: string, token: SlashToken) {
+  return (text.slice(0, token.start) + text.slice(token.end)).replace(/[  ]+$/, "")
+}
+
+/* ------------------------------------------------------------------ Chips */
+
+type Chip =
+  | { key: string; kind: "skill"; skillId: string }
+  | { attachment: AgentInputAttachment; key: string; kind: "attachment" }
+
+type ChipEntry = { chip: Chip; exiting: boolean }
+
+/** A removed chip's copy and the index it had when it left. */
+type LeavingChip = { chip: Chip; index: number }
+
+/** Skill chips first, then attachments, keyed so each keeps its identity. */
+function chipsOf(
+  skillIds: readonly string[],
+  attachments: readonly AgentInputAttachment[]
+): Chip[] {
+  return [
+    ...skillIds.map((skillId): Chip => ({ key: `skill-${skillId}`, kind: "skill", skillId })),
+    ...attachments.map(
+      (attachment): Chip => ({ attachment, key: `attachment-${attachment.id}`, kind: "attachment" })
+    ),
+  ]
+}
+
+/** The live chips with leaving copies spliced back in where they were. */
+function withLeavingChips(live: readonly Chip[], leaving: readonly LeavingChip[]) {
+  const liveKeys = new Set(live.map((chip) => chip.key))
+  const chips: ChipEntry[] = live.map((chip) => ({ chip, exiting: false }))
+  for (const { chip, index } of [...leaving].sort((a, b) => a.index - b.index)) {
+    if (liveKeys.has(chip.key)) continue
+    chips.splice(Math.min(index, chips.length), 0, { chip, exiting: true })
+  }
+  return chips
+}
+
+/** Drops a copy whose exit ended; later copies close the gap it leaves. */
+function settleLeavingChip(leaving: readonly LeavingChip[], key: string) {
+  const settled = leaving.find(({ chip }) => chip.key === key)
+  if (!settled) return leaving
+  return leaving
+    .filter((entry) => entry !== settled)
+    .map((entry) => (entry.index > settled.index ? { ...entry, index: entry.index - 1 } : entry))
+}
+
+export {
+  attachmentKind,
+  chipsOf,
+  findSlashQuery,
+  matchSkills,
+  settleLeavingChip,
+  withLeavingChips,
+  withoutSlashToken,
+}
+export type {
+  AgentInputAttachment,
+  AgentInputLabels,
+  AgentInputModel,
+  AgentInputPayload,
+  AgentInputPhase,
+  AgentInputSkill,
+  AttachmentKind,
+  Chip,
+  ChipEntry,
+  LeavingChip,
+  SlashToken,
+}