Prompt bar

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type ChangeEvent,  type KeyboardEvent as ReactKeyboardEvent,  type ReactNode,} from 'react';import {  COMMANDS,  MODELS,  SAMPLE_TRANSCRIPT,  type PromptCommand,  type PromptModel,  type PromptShape,  type PromptSource,} from './data';

/* Prompt bar (prompt-bar.tsx): a soft grey stage with the composer near its foot, 420 px wide at   most, its menus opening above it; at night a graphite stage with the composer a step lighter.   Colours are the tokens below, light-dark(light, dark): the component takes the color-scheme it   inherits from the page (light unless the page says otherwise), or the one its colorScheme prop   sets (data-color-scheme). Each shadow is one list for both schemes, each layer coloured for one   of them and clear in the other.   Motion: the menus pop in (opacity and scale), the highlight glides by top, the shape eases its   corners, the dictation bars bounce by scaleY. The flagship flash is drawn on a canvas. */.root {  /* The stage, the composer and menus, the highlight, and the shape switch's track. */  --canvas: light-dark(oklch(96.1% 0.002 247.84), oklch(23.1% 0.004 264.487));  --surface: light-dark(oklch(100% 0 0), oklch(26% 0.006 271.191));  --hover: light-dark(oklch(97% 0.002 247.839), oklch(28.9% 0.006 271.22));  --field: light-dark(oklch(96.1% 0.001 286.375), oklch(29.3% 0.006 271.223));  /* Words: strong, for buttons, and quiet. */  --ink: light-dark(oklch(24.7% 0.006 258.361), oklch(96.4% 0.002 247.839));  --ink-2: light-dark(oklch(50.6% 0.01 264.477), oklch(73.1% 0.008 260.731));  --ink-3: light-dark(oklch(69.5% 0.009 264.505), oklch(54.1% 0.01 264.484));  /* Edges: the composer's border, and the same focused (also the idle send button). */  --line: light-dark(oklch(94.6% 0.003 264.542), oklch(30.8% 0.006 258.354));  --line-strong: light-dark(oklch(91.2% 0.005 258.326), oklch(35.6% 0.007 264.474));

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The flash that greets a flagship model: a band of spectrum colours that sweeps across the * composer from left to right in about 110 ms, lighting each point as it passes, and leaves a dim * tint behind that fades out by 900 ms. * * Each point across the width has its own hue, red at the left edge to violet at the right, so * the whole flash is a single horizontal gradient redrawn every frame: only its stops' alpha * changes. The canvas sits behind the composer's content and is cleared when the flash ends. *//** How long the flash lasts, in ms. */export const GLOW_DURATION = 900;/** Where the sweeping front is at 0 ms, in widths, and how far it travels per ms. */const FRONT_START = 0.08;const FRONT_SPEED = 0.0085;/** * How long a point stays at its brightest once the front has passed (ms), how fast it dims after * (ms), and the softness of the front (ms). */const HOLD = 55;const DECAY = 35;const LEAD = 25;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { ReactNode } from 'react';/** Something a message can draw on: picked from the @ menu or the + menu. */export type PromptSource = {  id: string;  label: string;  /** The quieter words after the label. */  detail?: string;  /** A 22 px icon (decorative). */  icon?: ReactNode;  /** Shows a Connect button until it is connected. */  connect?: boolean;  /** Picking it calls onAttach instead of mentioning it (a file picker, say). */  attach?: boolean;};/** A / command. Its name is written without the slash. */export type PromptCommand = { name: string; detail?: string };export type PromptModel = {  id: string;  label: string;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The prompt bar's icons, drawn on a 24-unit grid and stroked with the text colour, except the * three coloured marks of the sample sources. All are decorative: the buttons carry the names. */const stroke = {  fill: 'none',  stroke: 'currentColor',  strokeLinecap: 'round',  strokeLinejoin: 'round',} as const;export function PlusIcon() {  return (    <svg width="16" height="16" viewBox="0 0 24 24" {...stroke} strokeWidth={2} aria-hidden="true">      <line x1="12" y1="5" x2="12" y2="19" />      <line x1="5" y1="12" x2="19" y2="12" />    </svg>  );}export function ArrowUpIcon() {

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;