Chat composer

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,} from 'react';import { APPS, type MentionApp } from './apps';import { Attachments, type Attachment } from './attachments';import {  atBeforeCaret,  insertMention,  isBlank,  lastAt,  placeCaret,  readMessage,  typeAtEnd,  type MentionAnchor,

/* Chat composer (chat-composer.tsx): a stage with the composer near its foot and the thread's   title under it; menus, the picker and the tooltip open upward over the stage.   Colours are the tokens below, light-dark(light, dark) where the two differ: 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). The apps' glyphs and the attached portrait are   pictures, and keep their colours on both.   Memory. The stage is one layout boundary of a fixed height. A phone keeps a page's pixels in   tiles the width of the screen, about 7 MB each, and a tile painted again gets more buffers, so   nothing the demo changes paints on the page itself. The dock is a layer that paints nothing of   its own, and each part of it paints on a layer of its own: the card (which typing repaints),   the title, the tray, the tooltip, the menu and the picker; the carets blink on tiny layers.   Each keeps one size while it is shown, since a layer that changes size gets new buffers. While   the demo plays, the picker's list and the tray clip rather than scroll: on a phone a box that   scrolls gets layers of its own, drawn again at every highlight. No style reaches an icon while   the demo plays: highlights change backgrounds and text colours, never the colour an icon   inherits, since Safari lays out every drawing a style change reaches, and two at once make it   lay out the whole page. */.root {  /* The stage and its edge; the card, a step up, its ring (darker while it has focus) and its     lift; the popovers, another step up, their ring and their shadows. */  --surface: #fbfbfb;

/* * The message field is a contenteditable box: plain text, plus mentions, which are small tokens * the caret steps over as a whole (contenteditable="false"). These helpers read and change it * directly; React does not render its content. *//** Where an "@" was typed: its text node and its offset in it. */export type MentionAnchor = { node: Text; offset: number };/** The "@" just before the caret, if the caret sits right after one at the start of a word. */export function atBeforeCaret(field: HTMLElement): MentionAnchor | null {  const selection = window.getSelection();  const node = selection?.anchorNode;  if (!selection?.isCollapsed || !node || node.nodeType !== Node.TEXT_NODE) return null;  if (!field.contains(node)) return null;  const offset = selection.anchorOffset - 1;  const text = node.textContent ?? '';  if (offset < 0 || text[offset] !== '@') return null;  if (offset > 0 && !/\s/.test(text[offset - 1])) return null;  return { node: node as Text, offset };}/** Puts the caret at `offset` in `node`. */export function placeCaret(node: Node, offset: number) {

'use client';import { useEffect, useId, useRef, type Ref } from 'react';import type { MentionApp } from './apps';import styles from './chat-composer.module.css';/* * The mention picker: a small popover over the message field with a search box and the apps that * match it. The search box is a combobox: the arrow keys move through the list, Enter mentions * the app in view, Escape closes the picker and puts the caret back after the "@". A row the * pointer moves over is the one in view, so the pointer and the keys share one highlight. *//** The picker's width, in px; the composer keeps it inside the field's box. */export const PICKER_WIDTH = 201;/** The apps whose names contain `query`, ignoring case. */export const matchesOf = (apps: MentionApp[], query: string) => {  const needle = query.trim().toLowerCase();  return needle ? apps.filter((app) => app.name.toLowerCase().includes(needle)) : apps;};export function MentionPicker({  apps,

'use client';import { useId, useRef, type ReactNode } from 'react';import { RenameIcon, ShareIcon, StarIcon, TrashIcon } from './icons';import styles from './chat-composer.module.css';/* * The thread's menu, opened from its title: the person the thread is with (a way to their * profile), then the thread's actions. It is a menu: the arrow keys, Home and End move between * its items, Enter or Space runs one, Escape closes it. One highlight serves the keys and the * pointer, and Delete turns red under it. */export type ThreadAction = 'profile' | 'rename' | 'favourite' | 'share' | 'delete';/** The menu's items, in order: the person first. */export const MENU_ITEMS: ThreadAction[] = ['profile', 'rename', 'favourite', 'share', 'delete'];const ACTIONS: { action: Exclude<ThreadAction, 'profile'>; label: string; icon: ReactNode }[] = [  { action: 'rename', label: 'Rename', icon: <RenameIcon /> },  { action: 'favourite', label: 'Favourite', icon: <StarIcon /> },  { action: 'share', label: 'Share', icon: <ShareIcon /> },  { action: 'delete', label: 'Delete', icon: <TrashIcon /> },];

'use client';import { AvatarPicture } from './avatar';import { CrossIcon, FileIcon, PlusIcon } from './icons';import styles from './chat-composer.module.css';/* * The files attached to the message, in a grey tray over the field: a picture shows as a square * tile, any other file as a card with its name and type. Each one's cross, at its corner, shows * under the pointer or the keyboard's focus (always, on touch screens); the dashed tile adds more. */export type Attachment = {  id: string;  name: string;  /** "PDF", "PNG"…: shown under a file's name. */  label: string;  /** A picture's address; a picture without one shows the illustrated portrait. */  url?: string;  picture: boolean;};export function Attachments({  items,

import type { ReactNode } from 'react';/* * The apps a message can mention, each with a small square glyph drawn here. The names and the * glyphs are made up for the demo; pass your own through the composer's `apps` prop. */export type MentionApp = {  id: string;  name: string;  /** A 16 × 16 glyph. */  glyph: ReactNode;};const square = { viewBox: '0 0 16 16', 'aria-hidden': true } as const;/** Two nodes on a looping branch, dark on white. */function LoomGlyph() {  return (    <svg {...square}>      <rect x=".5" y=".5" width="15" height="15" rx="3.5" fill="#fff" stroke="#e4e4e4" />      <path        d="M5.4 4.6v6.8M5.4 8.8c0-2 1.4-2.8 3.2-2.8h1.2"        fill="none"

import { useId } from 'react';/* * A picture attached to a message: an illustrated portrait (a man with glasses, a short beard and * a dark jumper on a sand-coloured ground), drawn once with soft gradients. */export function AvatarPicture({ className }: { className?: string }) {  const id = useId();  return (    <svg className={className} viewBox="0 0 64 64" aria-hidden="true">      <defs>        <radialGradient id={`${id}-ground`} cx="0.5" cy="0.35" r="0.75">          <stop offset="0" stopColor="#f1ece2" />          <stop offset="1" stopColor="#d9d0c0" />        </radialGradient>        <radialGradient id={`${id}-skin`} cx="0.42" cy="0.35" r="0.7">          <stop offset="0" stopColor="#ffd9a6" />          <stop offset="0.65" stopColor="#efb878" />          <stop offset="1" stopColor="#d89a5c" />        </radialGradient>        <linearGradient id={`${id}-jumper`} x1="0" y1="0" x2="0" y2="1">          <stop offset="0" stopColor="#3a342e" />          <stop offset="1" stopColor="#1b1815" />

/* * The composer's icons: outlined, drawn on a 16 × 16 grid with round caps, in the current colour. * They are decorative; the controls that hold them carry the labels. */type IconProps = { className?: string };const outline = {  viewBox: '0 0 16 16',  fill: 'none',  stroke: 'currentColor',  strokeWidth: 1.3,  strokeLinecap: 'round' as const,  strokeLinejoin: 'round' as const,  'aria-hidden': true,};/** A paper clip. */export function ClipIcon({ className }: IconProps) {  return (    <svg className={className} {...outline}>      <path d="m13.2 7.4-5.4 5.4a3.3 3.3 0 0 1-4.7-4.7l5.6-5.6a2.2 2.2 0 0 1 3.1 3.1l-5.5 5.5a1.1 1.1 0 0 1-1.6-1.6l5-5" />    </svg>  );

'use client';import type { Ref } from 'react';import styles from './ghost-pointer.module.css';/* * The demo's ghost pointer, and the timeline that moves it. A demo is a script of awaited steps: * wait, glide the pointer onto a control, press it and call the component's own handler, as a * click would. The pointer takes the shape a real one would: an arrow, a hand over buttons, an * I-beam over text. Its shapes are drawn once, each in a small layer of its own, and swapped by * scaling those layers to nothing and back: a change of opacity or of a rule matched through the * pointer would reach the drawings, and Safari would lay out the whole page again. Stopping the * demo (the reader takes over, or it scrolls away) ends the step in progress at once: its promise * rejects, which ends the script right there, and the pointer fades. */export type Shape = 'arrow' | 'hand' | 'text';/** A point in the stage's own pixels. */export type Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;

/* The demo's pointer (ghost-pointer.tsx): an arrow, a hand over buttons, an I-beam over text. Its   tip sits at the point it is moved to. Each shape sits in a small layer of its own, inside a layer   that paints nothing, so moving or fading the pointer never repaints the page. Its colours are   the stage's tokens (chat-composer.module.css). */.ghost {  position: absolute;  z-index: 40;  top: 0;  left: 0;  width: 0;  height: 0;  pointer-events: none;  opacity: 0;  transition: opacity 0.3s ease;  will-change: transform;}.shape {  position: absolute;  width: 22px;  height: 22px;  /* The script shows one shape at a time by its scale. */  transform: scale(0);  will-change: transform;

'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;