banhaten 0.4.0 → 0.6.0

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,
+}

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;
+  }
+}