banhaten 0.3.0 → 0.5.0

package/registry/components/agent-input.css

@@ -0,0 +1,307 @@
+[data-slot="agent-input"] {
+  --agent-input-radius: var(--bh-radius-2xl-12);
+  --agent-input-ring-width: var(--bh-agent-input-ring-width);
+
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  inline-size: 100%;
+}
+
+[data-slot="agent-input-frame"] {
+  background-color: var(--bh-bg-raised);
+  border-radius: var(--agent-input-radius);
+  box-shadow: var(--elevation-02);
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-xl-12);
+  padding: var(--bh-space-md-8) var(--bh-space-lg-10) var(--bh-space-lg-10);
+  position: relative;
+}
+
+[data-slot="agent-input-frame"]:has([data-slot="agent-input-chips"]) {
+  padding-block-start: var(--bh-space-lg-10);
+}
+
+/* While enhancing, a conic accent ring sweeps around the frame. */
+@property --agent-input-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+[data-slot="agent-input-frame"][data-enhancing="true"]::after {
+  animation: bh-agent-input-ring-spin var(--bh-agent-input-ring-duration) linear
+      infinite,
+    bh-agent-input-fade-in var(--bh-duration-default)
+      var(--bh-easing-emphasized) both;
+  background: conic-gradient(
+      from var(--agent-input-angle),
+      var(--bh-content-accent-blue-default),
+      var(--bh-content-accent-purple-default),
+      var(--bh-content-accent-fuchsia-default),
+      var(--bh-content-accent-aqua-default),
+      var(--bh-content-accent-blue-default)
+    )
+    border-box;
+  border: var(--agent-input-ring-width) solid transparent;
+  border-radius: calc(var(--agent-input-radius) + var(--agent-input-ring-width));
+  content: "";
+  inset: calc(-1 * var(--agent-input-ring-width));
+  mask: linear-gradient(black 0 0) padding-box, linear-gradient(black 0 0);
+  -webkit-mask: linear-gradient(black 0 0) padding-box, linear-gradient(black 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+  position: absolute;
+}
+
+[data-slot="agent-input-chips"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bh-space-sm-6);
+  margin-block-end: calc(-1 * var(--bh-space-sm-6));
+}
+
+[data-slot="agent-input-chip"] {
+  animation: bh-agent-input-chip-in var(--bh-duration-moderate)
+    var(--bh-easing-emphasized) both;
+  display: inline-flex;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+[data-slot="agent-input-chip"][data-exit="true"],
+[data-slot="agent-input-enhance"][data-exit="true"] {
+  animation: bh-agent-input-out var(--bh-duration-default)
+    var(--bh-easing-emphasized) both;
+  pointer-events: none;
+}
+
+[data-slot="agent-input-editor"] {
+  position: relative;
+}
+
+[data-slot="agent-input-field"] {
+  background: transparent;
+  border: 0;
+  color: var(--bh-content-default);
+  display: block;
+  font-family: inherit;
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
+  inline-size: 100%;
+  letter-spacing: var(--bh-text-body-sm-regular-letter-spacing);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+  margin: 0;
+  max-block-size: var(--bh-agent-input-field-max-height);
+  min-block-size: var(--bh-text-body-sm-regular-line-height);
+  outline: none;
+  overflow-wrap: anywhere;
+  overflow-y: auto;
+  padding: 0;
+  resize: none;
+}
+
+[data-slot="agent-input-field"]::placeholder {
+  color: var(--bh-content-muted);
+}
+
+[data-slot="agent-input-field"]:disabled {
+  color: var(--bh-content-disabled);
+}
+
+[data-slot="agent-input-enhancing"] {
+  display: block;
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
+  letter-spacing: var(--bh-text-body-sm-regular-letter-spacing);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+/* Slash palette: pinned above the field, aligned to the logical start. */
+[data-slot="agent-input-palette"] {
+  animation: bh-agent-input-palette-in var(--bh-duration-default)
+    var(--bh-easing-emphasized) both;
+  background-color: var(--bh-menu-bg);
+  border-radius: var(--bh-menu-radius);
+  box-shadow: var(--elevation-menu);
+  inline-size: var(--bh-agent-input-palette-width);
+  inset-block-end: calc(100% + var(--bh-space-md-8));
+  inset-inline-start: 0;
+  max-inline-size: 100%;
+  padding: var(--bh-space-xs-4);
+  position: absolute;
+  z-index: var(--bh-z-popover);
+}
+
+[data-slot="agent-input-palette-label"],
+[data-slot="agent-input-palette-empty"] {
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-text-body-2xs-regular-font-weight);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+  padding: var(--bh-space-xs-4) var(--bh-space-md-8);
+}
+
+[data-slot="agent-input-palette-item"] {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--bh-menu-item-radius);
+  color: var(--bh-content-default);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-text-body-xs-regular-font-weight);
+  gap: var(--bh-space-sm-6);
+  inline-size: 100%;
+  letter-spacing: var(--bh-text-body-xs-regular-letter-spacing);
+  line-height: var(--bh-text-body-xs-regular-line-height);
+  min-block-size: var(--bh-space-6xl-32);
+  outline: none;
+  padding: 0 var(--bh-space-md-8);
+  text-align: start;
+}
+
+[data-slot="agent-input-palette-item"][data-active="true"] {
+  background-color: var(--bh-menu-item-hover-bg);
+}
+
+[data-slot="agent-input-palette"][data-keyboard="false"]
+  [data-slot="agent-input-palette-item"]:hover {
+  background-color: var(--bh-menu-item-hover-bg);
+}
+
+[data-slot="agent-input-palette-icon"] {
+  color: var(--bh-content-subtle);
+  display: inline-flex;
+  flex: none;
+}
+
+[data-slot="agent-input-palette-icon"] > svg {
+  block-size: var(--bh-space-2xl-14);
+  inline-size: var(--bh-space-2xl-14);
+}
+
+[data-slot="agent-input-palette-name"] {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-slot="agent-input-row"] {
+  align-items: center;
+  display: flex;
+  gap: var(--bh-space-md-8);
+  justify-content: space-between;
+}
+
+[data-slot="agent-input-actions"] {
+  align-items: center;
+  display: flex;
+  gap: var(--bh-space-sm-6);
+}
+
+[data-slot="agent-input-add-icon"] {
+  transition: transform var(--bh-duration-default) var(--bh-easing-emphasized);
+}
+
+[data-slot="agent-input-add"][data-open="true"] [data-slot="agent-input-add-icon"] {
+  transform: rotate(45deg);
+}
+
+[data-slot="agent-input-enhance"] {
+  animation: bh-agent-input-pill-in var(--bh-duration-moderate)
+    var(--bh-easing-emphasized) both;
+}
+
+[data-slot="agent-input-spinner"] {
+  align-items: center;
+  block-size: var(--bh-button-xs-height);
+  color: var(--bh-content-subtle);
+  display: inline-flex;
+  inline-size: var(--bh-button-xs-height);
+  justify-content: center;
+}
+
+@keyframes bh-agent-input-ring-spin {
+  to {
+    --agent-input-angle: 360deg;
+  }
+}
+
+@keyframes bh-agent-input-fade-in {
+  from {
+    opacity: var(--bh-opacity-0);
+  }
+
+  to {
+    opacity: var(--bh-opacity-100);
+  }
+}
+
+@keyframes bh-agent-input-chip-in {
+  from {
+    filter: blur(var(--bh-space-xxs-2));
+    opacity: var(--bh-opacity-0);
+    transform: translateY(var(--bh-space-xs-4));
+  }
+
+  to {
+    filter: blur(0);
+    opacity: var(--bh-opacity-100);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bh-agent-input-pill-in {
+  from {
+    filter: blur(var(--bh-space-xxs-2));
+    opacity: var(--bh-opacity-0);
+    transform: scale(0.96);
+  }
+
+  to {
+    filter: blur(0);
+    opacity: var(--bh-opacity-100);
+    transform: scale(1);
+  }
+}
+
+@keyframes bh-agent-input-out {
+  from {
+    filter: blur(0);
+    opacity: var(--bh-opacity-100);
+    transform: scale(1);
+  }
+
+  to {
+    filter: blur(var(--bh-space-xxs-2));
+    opacity: var(--bh-opacity-0);
+    transform: scale(0.96);
+  }
+}
+
+@keyframes bh-agent-input-palette-in {
+  from {
+    filter: blur(var(--bh-space-xxs-2));
+    opacity: var(--bh-opacity-0);
+    transform: translateY(var(--bh-space-sm-6)) scale(0.98);
+  }
+
+  to {
+    filter: blur(0);
+    opacity: var(--bh-opacity-100);
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="agent-input-frame"][data-enhancing="true"]::after {
+    animation: none;
+  }
+}

package/registry/components/agent-input.tsx

@@ -0,0 +1,382 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ShimmerText } from "@/components/ui/shimmer-text"
+import { Spinner } from "@/components/ui/spinner"
+import { useControllableState } from "@/hooks/use-controllable-state"
+
+import {
+  AddMenu,
+  ChipRow,
+  SlashPalette,
+  useChipPresence,
+  useEnhancePill,
+  useFilePicker,
+  usePromptEnhancement,
+  useSlashPalette,
+} from "./agent-input-parts"
+import {
+  attachmentKind,
+  chipsOf,
+  withoutSlashToken,
+  type AgentInputAttachment,
+  type AgentInputLabels,
+  type AgentInputModel,
+  type AgentInputPayload,
+  type AgentInputSkill,
+} from "./agent-input-state"
+
+import "./agent-input.css"
+
+type AgentInputProps = Omit<
+  React.ComponentProps<"div">,
+  "defaultValue" | "onSubmit"
+> & {
+  /** Controlled attachment chips. Omit to let the field own picked files. */
+  attachments?: readonly AgentInputAttachment[]
+  defaultModel?: string
+  defaultSelectedSkills?: readonly string[]
+  defaultValue?: string
+  disabled?: boolean
+  labels?: Partial<AgentInputLabels>
+  model?: string
+  models?: readonly AgentInputModel[]
+  onAttachmentsChange?: (attachments: AgentInputAttachment[]) => void
+  /** Enables the Enhance Prompt action. Resolve to the rewritten prompt. */
+  onEnhance?: (prompt: string, signal: AbortSignal) => Promise<string>
+  onModelChange?: (model: string) => void
+  onSelectedSkillsChange?: (skills: string[]) => void
+  onSend?: (payload: AgentInputPayload) => void
+  onValueChange?: (value: string) => void
+  selectedSkills?: readonly string[]
+  skills?: readonly AgentInputSkill[]
+  value?: string
+}
+
+const defaultLabels: AgentInputLabels = {
+  addFiles: "Attach files",
+  addMenu: "Add attachment or switch model",
+  addPhotos: "Add photos",
+  enhance: "Enhance prompt",
+  enhancing: "Enhancing prompt",
+  model: "Model",
+  noSkills: "No matching skills",
+  placeholder: "Ask AI Agent",
+  removeAttachment: (name) => `Remove ${name}`,
+  removeSkill: (name) => `Remove ${name}`,
+  revert: "Revert",
+  send: "Send",
+  skills: "Skills",
+}
+
+/**
+ * Prompt composer for agent conversations: attachments, skills, model choice,
+ * a slash-command palette, and prompt enhancement inside one field.
+ */
+const AgentInput = React.forwardRef<HTMLDivElement, AgentInputProps>(
+  function AgentInput(
+    {
+      attachments: controlledAttachments,
+      className,
+      defaultModel,
+      defaultSelectedSkills = [],
+      defaultValue = "",
+      disabled = false,
+      labels: labelOverrides,
+      model: controlledModel,
+      models = [],
+      onAttachmentsChange,
+      onEnhance,
+      onModelChange,
+      onSelectedSkillsChange,
+      onSend,
+      onValueChange,
+      selectedSkills: controlledSkills,
+      skills = [],
+      value: controlledValue,
+      ...props
+    },
+    ref
+  ) {
+    const labels = { ...defaultLabels, ...labelOverrides }
+    const [value, setValue] = useControllableState({
+      defaultValue,
+      onChange: onValueChange,
+      value: controlledValue,
+    })
+    const [selectedModel, setModel] = useControllableState({
+      defaultValue: defaultModel ?? "",
+      onChange: onModelChange,
+      value: controlledModel,
+    })
+    // An empty id means nothing is picked yet. Fall back to the first model at
+    // read time so a list that arrives after mount still yields a selection
+    // in the payload and the menu.
+    const model = selectedModel || models[0]?.id
+    // State stays readonly; the change callbacks receive fresh arrays.
+    const [attachments, setAttachments] = useControllableState<
+      readonly AgentInputAttachment[]
+    >({
+      defaultValue: [],
+      onChange: (next) => onAttachmentsChange?.([...next]),
+      value: controlledAttachments,
+    })
+    const [selectedSkills, setSelectedSkills] = useControllableState<readonly string[]>({
+      defaultValue: defaultSelectedSkills,
+      onChange: (next) => onSelectedSkillsChange?.([...next]),
+      value: controlledSkills,
+    })
+
+    const fieldRef = React.useRef<HTMLTextAreaElement>(null)
+    const frameRef = React.useRef<HTMLDivElement>(null)
+    const nextId = React.useRef(1)
+    // Differs per mount, so picked ids stay unique when the field remounts
+    // while the host still holds earlier attachments.
+    const attachmentIdPrefix = React.useId()
+
+    const focusField = () => window.requestAnimationFrame(() => fieldRef.current?.focus())
+    // The editor unmounts while enhancing, so focus returns to it afterwards
+    // unless the user has meanwhile moved to a control outside the field.
+    const refocusField = () => {
+      const active = document.activeElement
+      if (active && active !== document.body && !frameRef.current?.contains(active)) return
+      focusField()
+    }
+
+    const slash = useSlashPalette(skills)
+    const enhancement = usePromptEnhancement({
+      frameRef,
+      onEnhance,
+      onFinish: refocusField,
+      onStart: slash.close,
+      setValue,
+      value,
+    })
+    const hasText = value.trim().length > 0
+    const sendActive = hasText && !enhancement.enhancing && !disabled
+    const pill = useEnhancePill(
+      Boolean(onEnhance) && hasText && !enhancement.enhancing && !disabled,
+      enhancement.enhancing
+    )
+    const presence = useChipPresence(chipsOf(selectedSkills, attachments))
+    const picker = useFilePicker((files, pickerKind) => {
+      setAttachments([
+        ...attachments,
+        ...files.map((file) => ({
+          file,
+          id: `${attachmentIdPrefix}-${nextId.current++}`,
+          kind: attachmentKind(file, pickerKind),
+          name: file.name,
+        })),
+      ])
+      focusField()
+    })
+    const skillName = (id: string) =>
+      skills.find((skill) => skill.id === id)?.name ?? id
+
+    // Auto-grow the editor with its content up to the token max height.
+    React.useLayoutEffect(() => {
+      const field = fieldRef.current
+      if (!field) return
+      field.style.height = "auto"
+      field.style.height = `${field.scrollHeight}px`
+    }, [value, enhancement.enhancing])
+
+    // Picking from the palette swaps the "/query" token for a skill chip.
+    const applySlash = (skill: AgentInputSkill) => {
+      const field = fieldRef.current
+      const token = slash.token.current
+      if (field && token) {
+        setValue(withoutSlashToken(value, token))
+        window.requestAnimationFrame(() => {
+          field.focus()
+          field.setSelectionRange(token.start, token.start)
+        })
+      }
+      if (!selectedSkills.includes(skill.id)) {
+        setSelectedSkills([...selectedSkills, skill.id])
+      }
+      slash.close()
+    }
+
+    const removeChip = (key: string) => {
+      const chip = presence.leave(key)
+      if (chip?.kind === "skill") {
+        setSelectedSkills(selectedSkills.filter((id) => id !== chip.skillId))
+      } else if (chip?.kind === "attachment") {
+        setAttachments(attachments.filter((item) => item.id !== chip.attachment.id))
+      }
+    }
+
+    const toggleSkill = (skillId: string) => {
+      if (selectedSkills.includes(skillId)) {
+        removeChip(`skill-${skillId}`)
+        return
+      }
+      setSelectedSkills([...selectedSkills, skillId])
+      focusField()
+    }
+
+    const send = () => {
+      if (!sendActive) return
+      onSend?.({ attachments, model, skills: selectedSkills, text: value.trim() })
+      setValue("")
+      if (attachments.length > 0) setAttachments([])
+      if (selectedSkills.length > 0) setSelectedSkills([])
+      enhancement.reset()
+      slash.close()
+      focusField()
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Keys that pick or confirm an IME candidate (Japanese, Chinese, Korean)
+      // belong to the composition, so they never send or move the palette.
+      // Safari reports the confirming Enter with keyCode 229 instead.
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return
+      if (slash.handleKey(event, applySlash)) return
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault()
+        send()
+      }
+    }
+
+    return (
+      <div
+        data-disabled={disabled ? "true" : "false"}
+        data-phase={enhancement.phase}
+        data-slot="agent-input"
+        ref={ref}
+        className={cn("min-w-0 max-w-full", className)}
+        {...props}
+      >
+        <input {...picker.inputProps} />
+        {/* Stays mounted so the text it gains is announced: a live region
+            inserted together with its text is often skipped. */}
+        <span className="sr-only" data-slot="agent-input-status" role="status">
+          {enhancement.enhancing ? labels.enhancing : null}
+        </span>
+
+        <div
+          data-enhancing={enhancement.enhancing ? "true" : "false"}
+          data-slot="agent-input-frame"
+          ref={frameRef}
+        >
+          <ChipRow
+            chips={presence.chips}
+            disabled={disabled}
+            labels={labels}
+            onExited={presence.settle}
+            onRemove={removeChip}
+            skillName={skillName}
+          />
+
+          <div data-slot="agent-input-editor">
+            {enhancement.enhancing ? (
+              <div data-slot="agent-input-enhancing">
+                <ShimmerText tone="default">{value}</ShimmerText>
+              </div>
+            ) : (
+              <textarea
+                aria-activedescendant={slash.nav.activeOptionId}
+                aria-autocomplete="list"
+                aria-controls={slash.open ? slash.id : undefined}
+                aria-haspopup="listbox"
+                aria-label={labels.placeholder}
+                data-slot="agent-input-field"
+                disabled={disabled}
+                onBlur={slash.close}
+                onChange={(event) => {
+                  setValue(event.target.value)
+                  if (enhancement.phase === "enhanced") enhancement.reset()
+                  slash.detect(event.target.value, event.target.selectionStart)
+                }}
+                onClick={(event) =>
+                  slash.detect(event.currentTarget.value, event.currentTarget.selectionStart)
+                }
+                onKeyDown={handleKeyDown}
+                onKeyUp={(event) => {
+                  if (["ArrowUp", "ArrowDown", "Enter", "Tab", "Escape"].includes(event.key))
+                    return
+                  slash.detect(event.currentTarget.value, event.currentTarget.selectionStart)
+                }}
+                placeholder={labels.placeholder}
+                ref={fieldRef}
+                rows={1}
+                value={value}
+              />
+            )}
+
+            {slash.open && !enhancement.enhancing ? (
+              <SlashPalette labels={labels} onPick={applySlash} slash={slash} />
+            ) : null}
+          </div>
+
+          <div data-slot="agent-input-row">
+            <AddMenu
+              disabled={disabled || enhancement.enhancing}
+              labels={labels}
+              model={model}
+              models={models}
+              onModelChange={setModel}
+              onPickFiles={picker.open}
+              onToggleSkill={toggleSkill}
+              selectedSkills={selectedSkills}
+              skills={skills}
+            />
+
+            <div data-slot="agent-input-actions">
+              {enhancement.enhancing ? (
+                <span data-slot="agent-input-spinner">
+                  <Spinner />
+                </span>
+              ) : pill.mounted ? (
+                <Button
+                  data-exit={pill.exiting ? "true" : "false"}
+                  data-slot="agent-input-enhance"
+                  onClick={() => {
+                    if (enhancement.phase === "enhanced") {
+                      enhancement.revert()
+                      focusField()
+                      return
+                    }
+                    void enhancement.run()
+                  }}
+                  ref={pill.ref}
+                  size="xs"
+                  variant="soft"
+                >
+                  {enhancement.phase === "enhanced" ? labels.revert : labels.enhance}
+                </Button>
+              ) : null}
+              <Button
+                aria-label={labels.send}
+                data-slot="agent-input-send"
+                disabled={!sendActive}
+                onClick={send}
+                size="icon-xs"
+                variant={sendActive ? "default" : "soft"}
+              >
+                <ArrowUpIcon />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+export { AgentInput }
+export type {
+  AgentInputAttachment,
+  AgentInputLabels,
+  AgentInputModel,
+  AgentInputPayload,
+  AgentInputPhase,
+  AgentInputSkill,
+} from "./agent-input-state"
+export type { AgentInputProps }