banhaten 0.3.0 → 0.5.0

package/registry/components/thinking-reasoning.css

@@ -0,0 +1,178 @@
+[data-slot="thinking-reasoning"] {
+  --thinking-reasoning-fade: var(--bh-thinking-reasoning-fade);
+  --thinking-reasoning-max-height: var(--bh-thinking-reasoning-max-height);
+  --thinking-reasoning-step-height: calc(
+    2 * var(--bh-text-body-xs-regular-line-height)
+  );
+
+  animation: bh-thinking-reasoning-in var(--bh-duration-slow)
+    var(--bh-easing-emphasized) both;
+  color: var(--bh-content-subtle);
+  font-family: var(--bh-font-family);
+  inline-size: min(var(--bh-thinking-reasoning-width), 100%);
+}
+
+/* Anchor the header: label line + viewport gap + capped viewport. */
+[data-slot="thinking-reasoning"][data-reserve-space="true"] {
+  min-block-size: calc(
+    var(--bh-text-body-xs-medium-line-height) + var(--bh-space-sm-6) +
+      var(--thinking-reasoning-max-height)
+  );
+}
+
+[data-slot="thinking-reasoning-trigger"] {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--bh-radius-sm-4);
+  color: inherit;
+  cursor: default;
+  display: inline-flex;
+  font: inherit;
+  gap: var(--bh-space-sm-6);
+  margin: 0;
+  min-block-size: var(--bh-text-body-xs-medium-line-height);
+  outline: none;
+  padding: 0;
+}
+
+[data-slot="thinking-reasoning-trigger"]:enabled {
+  cursor: pointer;
+}
+
+[data-slot="thinking-reasoning-trigger"]:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+[data-slot="thinking-reasoning-label"] {
+  color: var(--bh-content-muted);
+  font-size: var(--bh-text-body-xs-medium-font-size);
+  font-weight: var(--bh-text-body-xs-medium-font-weight);
+  letter-spacing: var(--bh-text-body-xs-medium-letter-spacing);
+  line-height: var(--bh-text-body-xs-medium-line-height);
+}
+
+[data-slot="thinking-reasoning-verb"] {
+  color: var(--bh-content-subtle);
+}
+
+[data-slot="thinking-reasoning-chevron"] {
+  block-size: var(--bh-space-xl-12);
+  color: var(--bh-content-muted);
+  flex: none;
+  inline-size: var(--bh-space-xl-12);
+  transition: color var(--bh-duration-fast) var(--bh-easing-standard),
+    transform var(--bh-duration-moderate) var(--bh-easing-emphasized);
+}
+
+[data-slot="thinking-reasoning-trigger"][aria-expanded="true"]
+  [data-slot="thinking-reasoning-chevron"] {
+  transform: rotate(180deg);
+}
+
+[data-slot="thinking-reasoning-trigger"]:enabled:hover
+  [data-slot="thinking-reasoning-chevron"] {
+  color: var(--bh-content-subtle);
+}
+
+/* The body is a Collapsible panel; this tunes its fold motion. */
+[data-slot="thinking-reasoning-collapsible"] {
+  --collapsible-panel-duration: var(--bh-duration-slow);
+  --collapsible-panel-easing: var(--bh-easing-emphasized);
+
+  inline-size: 100%;
+}
+
+/* Grows with the content until capped; then the stream scrolls behind fades. */
+[data-slot="thinking-reasoning-viewport"] {
+  --thinking-reasoning-fade-top: 0px;
+  --thinking-reasoning-fade-bottom: 0px;
+
+  margin-block-start: var(--bh-space-sm-6);
+  outline: none;
+  overflow: hidden;
+  transition: height var(--bh-duration-slow) var(--bh-easing-emphasized);
+}
+
+[data-slot="thinking-reasoning-viewport"][data-capped="true"] {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--thinking-reasoning-fade-top),
+    black calc(100% - var(--thinking-reasoning-fade-bottom)),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    black var(--thinking-reasoning-fade-top),
+    black calc(100% - var(--thinking-reasoning-fade-bottom)),
+    transparent 100%
+  );
+}
+
+[data-slot="thinking-reasoning-viewport"][data-fade-top="true"] {
+  --thinking-reasoning-fade-top: var(--thinking-reasoning-fade);
+}
+
+[data-slot="thinking-reasoning-viewport"][data-fade-bottom="true"] {
+  --thinking-reasoning-fade-bottom: var(--thinking-reasoning-fade);
+}
+
+[data-slot="thinking-reasoning-viewport"][data-scrollable="true"] {
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+[data-slot="thinking-reasoning-viewport"][data-scrollable="true"]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-slot="thinking-reasoning-viewport"][data-scrollable="true"]:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+[data-slot="thinking-reasoning-stream"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-xs-4);
+  transition: transform var(--bh-duration-slower)
+    var(--bh-easing-emphasized);
+  will-change: transform;
+}
+
+[data-slot="thinking-reasoning-step"] {
+  animation: bh-thinking-reasoning-step-in var(--bh-duration-slow)
+    var(--bh-easing-emphasized) both;
+  block-size: var(--thinking-reasoning-step-height);
+  -webkit-box-orient: vertical;
+  color: var(--bh-content-subtle);
+  display: -webkit-box;
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-text-body-xs-regular-font-weight);
+  letter-spacing: var(--bh-text-body-xs-regular-letter-spacing);
+  -webkit-line-clamp: 2;
+  line-height: var(--bh-text-body-xs-regular-line-height);
+  margin: 0;
+  overflow: hidden;
+}
+
+@keyframes bh-thinking-reasoning-in {
+  from {
+    opacity: var(--bh-opacity-0);
+  }
+
+  to {
+    opacity: var(--bh-opacity-100);
+  }
+}
+
+@keyframes bh-thinking-reasoning-step-in {
+  from {
+    opacity: var(--bh-opacity-0);
+  }
+
+  to {
+    opacity: var(--bh-opacity-100);
+  }
+}

package/registry/components/thinking-reasoning.tsx

@@ -0,0 +1,253 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Collapsible,
+  CollapsiblePanel,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { ShimmerText } from "@/components/ui/shimmer-text"
+import { useControllableState } from "@/hooks/use-controllable-state"
+
+import "./thinking-reasoning.css"
+
+type ThinkingReasoningStatus = "thinking" | "done"
+
+type ThinkingReasoningLabels = {
+  /** Header label while the agent is still reasoning. */
+  thinking: string
+  /**
+   * Verb shown in the summary once reasoning ends, for example "Thought".
+   * With the duration it also names the summary toggle: "Thought for 5s".
+   */
+  thought: string
+  /** Duration suffix rendered after the verb, for example "for 5s". */
+  duration: (seconds: number) => React.ReactNode
+}
+
+type ThinkingReasoningProps = Omit<React.ComponentProps<"div">, "children"> & {
+  defaultOpen?: boolean
+  /** Elapsed seconds for the summary. Measured from mount when omitted. */
+  duration?: number
+  labels?: Partial<ThinkingReasoningLabels>
+  onOpenChange?: (open: boolean) => void
+  /** Controls whether the finished reasoning is unfolded. */
+  open?: boolean
+  /**
+   * Keeps the block height stable while the reasoning folds into its summary
+   * so content below does not jump. Off by default for chat threads.
+   */
+  reserveSpace?: boolean
+  status?: ThinkingReasoningStatus
+  /** Reasoning sentences in arrival order. Append to stream new ones. */
+  steps: readonly string[]
+}
+
+const defaultLabels: ThinkingReasoningLabels = {
+  duration: (seconds) => ` for ${seconds}s`,
+  thinking: "Thinking…",
+  thought: "Thought",
+}
+
+type ViewportMetrics = {
+  contentHeight: number
+  fade: number
+  maxHeight: number
+}
+
+function readLength(element: HTMLElement, property: string) {
+  const value = window.getComputedStyle(element).getPropertyValue(property)
+  const parsed = Number.parseFloat(value)
+  return Number.isFinite(parsed) ? parsed : 0
+}
+
+/**
+ * Collapsible reasoning block. While thinking, sentences reveal in sequence
+ * and auto-scroll behind a soft fade; once done the header folds into a
+ * "Thought for Ns" summary that unfolds the full, scrollable reasoning.
+ */
+const ThinkingReasoning = React.forwardRef<HTMLDivElement, ThinkingReasoningProps>(
+  function ThinkingReasoning(
+    {
+      className,
+      defaultOpen = false,
+      duration,
+      labels: labelOverrides,
+      onOpenChange,
+      open: controlledOpen,
+      reserveSpace = false,
+      status = "thinking",
+      steps,
+      ...props
+    },
+    ref
+  ) {
+    const labels = { ...defaultLabels, ...labelOverrides }
+    const done = status === "done"
+    const [open, setOpenState] = useControllableState({
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+      value: controlledOpen,
+    })
+    const expanded = done ? open : true
+    const scrollable = done && open
+
+    // Measured from the first thinking render. A block that mounts already
+    // done has nothing to measure, so its summary omits the duration.
+    const startedAt = React.useRef<number | null>(null)
+    const [measuredSeconds, setMeasuredSeconds] = React.useState<number>()
+    React.useEffect(() => {
+      if (done) {
+        if (startedAt.current !== null) {
+          setMeasuredSeconds(
+            Math.max(1, Math.round((Date.now() - startedAt.current) / 1000))
+          )
+        }
+        return
+      }
+      startedAt.current = Date.now()
+    }, [done])
+    const seconds = duration ?? measuredSeconds
+
+    const viewportRef = React.useRef<HTMLDivElement>(null)
+    const streamRef = React.useRef<HTMLDivElement>(null)
+    const [metrics, setMetrics] = React.useState<ViewportMetrics>({
+      contentHeight: 0,
+      fade: 0,
+      maxHeight: 0,
+    })
+    const [scrollFade, setScrollFade] = React.useState({
+      bottom: true,
+      top: false,
+    })
+
+    const measure = React.useCallback(() => {
+      const viewport = viewportRef.current
+      const stream = streamRef.current
+      if (!viewport || !stream) return
+      setMetrics({
+        contentHeight: stream.offsetHeight,
+        fade: readLength(viewport, "--thinking-reasoning-fade"),
+        maxHeight: readLength(viewport, "--thinking-reasoning-max-height"),
+      })
+    }, [])
+
+    // A folded block unmounts its content, so measuring and observing start
+    // again whenever it unfolds.
+    React.useLayoutEffect(measure, [expanded, measure, steps, status])
+    React.useEffect(() => {
+      const stream = streamRef.current
+      if (!stream || typeof ResizeObserver === "undefined") return
+      const observer = new ResizeObserver(measure)
+      observer.observe(stream)
+      return () => observer.disconnect()
+    }, [expanded, measure])
+
+    const capped =
+      metrics.maxHeight > 0 && metrics.contentHeight > metrics.maxHeight
+    const viewportHeight = capped ? metrics.maxHeight : metrics.contentHeight
+    const translate =
+      scrollable || !capped
+        ? 0
+        : metrics.maxHeight - metrics.fade - metrics.contentHeight
+    const fadeTop = scrollable ? scrollFade.top : capped
+    const fadeBottom = scrollable ? scrollFade.bottom : capped
+
+    const setOpen = (next: boolean) => {
+      if (next) {
+        if (viewportRef.current) viewportRef.current.scrollTop = 0
+        setScrollFade({ bottom: true, top: false })
+      }
+      setOpenState(next)
+    }
+
+    const handleScroll = () => {
+      const viewport = viewportRef.current
+      if (!viewport) return
+      setScrollFade({
+        bottom:
+          viewport.scrollTop + viewport.clientHeight <
+          viewport.scrollHeight - 1,
+        top: viewport.scrollTop > 1,
+      })
+    }
+
+    return (
+      <Collapsible
+        asChild
+        disabled={!done}
+        onOpenChange={setOpen}
+        open={expanded}
+      >
+        <div
+          data-open={expanded ? "true" : "false"}
+          data-reserve-space={reserveSpace ? "true" : "false"}
+          data-slot="thinking-reasoning"
+          data-state={status}
+          ref={ref}
+          className={cn("flex min-w-0 flex-col items-start", className)}
+          {...props}
+        >
+          {/* No aria-label: the label and summary it shows are its name. */}
+          <CollapsibleTrigger asChild>
+            <button data-slot="thinking-reasoning-trigger" type="button">
+              {done ? (
+                <span data-slot="thinking-reasoning-label">
+                  <span data-slot="thinking-reasoning-verb">{labels.thought}</span>
+                  {seconds !== undefined ? labels.duration(seconds) : null}
+                </span>
+              ) : (
+                <span aria-live="polite" data-slot="thinking-reasoning-label">
+                  <ShimmerText>{labels.thinking}</ShimmerText>
+                </span>
+              )}
+              {done ? (
+                <ChevronDownIcon
+                  aria-hidden="true"
+                  data-slot="thinking-reasoning-chevron"
+                  strokeWidth="var(--bh-icon-stroke-180)"
+                />
+              ) : null}
+            </button>
+          </CollapsibleTrigger>
+
+          <CollapsiblePanel data-slot="thinking-reasoning-collapsible">
+            <div
+              data-capped={capped ? "true" : "false"}
+              data-fade-bottom={fadeBottom ? "true" : "false"}
+              data-fade-top={fadeTop ? "true" : "false"}
+              data-scrollable={scrollable ? "true" : "false"}
+              data-slot="thinking-reasoning-viewport"
+              onScroll={scrollable ? handleScroll : undefined}
+              ref={viewportRef}
+              style={{ height: `${viewportHeight}px` }}
+              tabIndex={scrollable ? 0 : undefined}
+            >
+              <div
+                data-slot="thinking-reasoning-stream"
+                ref={streamRef}
+                style={{ transform: `translateY(${translate}px)` }}
+              >
+                {steps.map((step, index) => (
+                  <p data-slot="thinking-reasoning-step" key={index}>
+                    {step}
+                  </p>
+                ))}
+              </div>
+            </div>
+          </CollapsiblePanel>
+        </div>
+      </Collapsible>
+    )
+  }
+)
+
+export { ThinkingReasoning }
+export type {
+  ThinkingReasoningLabels,
+  ThinkingReasoningProps,
+  ThinkingReasoningStatus,
+}

package/registry/components/thinking-state.css

@@ -0,0 +1,8 @@
+[data-slot="thinking-state"] {
+  color: var(--bh-content-subtle);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-xs-medium-font-size);
+  font-weight: var(--bh-text-body-xs-medium-font-weight);
+  letter-spacing: var(--bh-text-body-xs-medium-letter-spacing);
+  line-height: var(--bh-text-body-xs-medium-line-height);
+}

package/registry/components/thinking-state.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { ShimmerText, type ShimmerTextTone } from "@/components/ui/shimmer-text"
+
+import "./thinking-state.css"
+
+type ThinkingStateStatus = "thinking" | "done"
+
+type ThinkingStateProps = React.ComponentProps<"span"> & {
+  /** `done` stops the sweep and leaves the label as static text. */
+  status?: ThinkingStateStatus
+  tone?: ShimmerTextTone
+}
+
+/**
+ * Minimal "Thinking" status: a shimmering label that signals the agent is
+ * working before its first token arrives. Pass localized `children`.
+ */
+const ThinkingState = React.forwardRef<HTMLSpanElement, ThinkingStateProps>(
+  function ThinkingState(
+    { children = "Thinking", className, status = "thinking", tone, ...props },
+    ref
+  ) {
+    return (
+      <span
+        aria-live="polite"
+        data-slot="thinking-state"
+        data-state={status}
+        ref={ref}
+        role="status"
+        className={cn("inline-flex min-w-0 items-center", className)}
+        {...props}
+      >
+        <ShimmerText animated={status === "thinking"} tone={tone}>
+          {children}
+        </ShimmerText>
+      </span>
+    )
+  }
+)
+
+export { ThinkingState }
+export type { ThinkingStateProps, ThinkingStateStatus }