AI Chat Interface

• index.html: the demo page and the component markup to copy
• assets/style.css: component styles and both themes, every colour a custom property
• assets/script.js: readable, commented source exposing window.AIChat
• assets/script.min.js: minified production script

What it does:

• Streams replies in word chunks that fade and rise in, with an accent caret at the end
• Renders paragraphs, - bullet lists and `inline code` by building DOM nodes with textContent; model text is never parsed as HTML
• Animates the sent text from the composer into its bubble while the composer clears and shrinks back to one line
• Grows the composer with a height tween up to six lines, then scrolls inside it
• Morphs Send into Stop while a reply streams; Stop (or Escape) aborts the request and keeps the partial text with a "Stopped" note
• Follows new text while you are at the bottom; scroll up and a "Jump to latest" pill springs in
• Shows an empty state with suggestion chips that send on click
• Adds Copy and Regenerate under finished replies
• Supports several panels on one page, with no ids and no globals besides AIChat

1. Add to your <head>:

In your downloadThe working code for this step, in index.html.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Copy the component markup (between <!-- Component starts here --> and <!-- Component ends here --> in index.html). Its shape:

In your downloadThe working code for this step, in index.html.

The script finds everything by class inside the root you mount, so rename nothing unless you rename it in assets/script.js too. The empty state, the chips, the jump pill and the hint line are optional: delete them and the panel still works. A chip sends its data-prompt attribute if it has one, otherwise its text. Use whichever heading level fits your page for the empty-state title.

4. Mount it with your respond function:

In your downloadThe working code for this step, in script.js.

The toolbar strip, the centring .stage, the scripted demo responder and the Google Font link in index.html are demo furniture, not part of the component. Leave them behind.

AIChat.mount(root, options)

Returns a controller, or the existing one if root is already mounted.

The controller

In your downloadThe working code for this step, in script.js.

send() returns false and does nothing while a reply is streaming or when the text is empty.

Events

Dispatched on the root and bubbling:

In your downloadThe working code for this step, in script.js.

Streaming from your own server

Keep API keys on the server. Have an endpoint of yours call the model and stream plain text back, then read that stream in respond:

In your downloadThe working code for this step, in script.js.

If your endpoint sends server-sent events or JSON lines instead of plain text, parse each line inside the loop and yield only the text. If respond throws, the reply shows "Something went wrong. Try regenerating." and the error is logged.

• Roles: the thread is role="log" with aria-live="off", so the reply is not read token by token while it streams. It carries aria-busy="true" while a reply is streaming.
• Announcements: the finished reply is announced once through the polite .ai-chat__announcer region; a stopped reply announces "Response stopped." and Copy announces "Copied to clipboard."
• Labels: the textarea has an aria-label; the send button's label switches between "Send message" and "Stop response" (set your own with aria-label and data-stop-label); Copy and Regenerate are labelled buttons.
• Focus: stays in the composer after sending, including from a chip or the jump pill, and after pressing Stop.
• The thread is focusable (tabindex="0") so it can be scrolled with the keyboard.
• prefers-reduced-motion: text appears as it arrives with no rise, the sent message appears in its bubble without travelling, and the pill, icons and empty state change without tweens. The preference is read at the moment of each animation, so changing it while the page is open takes effect straight away.

One generator, any backend. The panel calls respond with a copy of the conversation and an AbortSignal, then reads it in a loop that races each step against the abort. Stop therefore takes effect immediately even when the source is between chunks, and the generator's return() is called so a finally block can release its reader. If clear() runs mid-stream, the late result is dropped instead of being written into the emptied thread.

Streaming without innerHTML. A small renderer consumes text a character at a time. A leading - or * opens a list item, a blank line opens a new paragraph, backticks open and close <code>, and every new word goes into a span. The spans from one chunk rise in with gsap.fromTo and a 25ms stagger while the caret moves to the end. When the reply finishes, the spans are unwrapped back into text nodes, so the finished message is ordinary paragraphs for screen readers, selection and copy.

Scroll anchoring. While the thread is within 32px of the bottom it follows new text. An upward wheel unpins it straight away, and any scroll away from the bottom springs in the pill with a damped back.out. Pressing it tweens a progress value and re-reads the bottom every frame, because a streaming reply keeps growing during the scroll.

The travel. On send, the bubble is laid out in the thread and measured, and a ghost copy is placed over the panel at that spot, then tweened from the composer's text position with its fill fading in. The ghost lives on the panel root rather than in the thread, so the thread's overflow cannot clip it. The fill colour is read from the bubble with getComputedStyle at that moment, which is why the travel is right in either theme.

The composer. On input it measures the textarea's natural height, caps it at six lines and tweens height to it; past the cap it switches overflow-y to auto. The send button's two icons cross-fade with a quarter turn when streaming starts and ends.

Teardown. Every tween, including those started from events and after await, is created inside the instance's gsap.context, so destroy() reverts them all, removes its listeners and generated nodes, and restores the empty state and the composer.

Two themes, light (the default) and dark, set with one attribute on <body>, or on the .ai-chat root itself:

In your downloadThe working code for this step, in index.html.

They are the same design at two token values. Nothing in assets/script.js reads the attribute. The demo's toolbar and the ?variant=dark URL parameter only set it.

Re-value for your brand in both blocks at the top of assets/style.css:

• Surfaces: --ground, --ground-2, --raised, --hover
• Ink: --ink, --ink-2, --ink-3
• Hairlines: --line, --line-strong
• Accent (send button, focus ring, caret): --accent, --accent-ink, --accent-wash
• Messages: --bubble, --bubble-ink, --code-bg, --code-ink
• Disabled send: --disabled-bg, --disabled-ink
• --shadow, --shadow-panel, --font, --font-mono, --radius, --radius-sm, --radius-xs
• Size: --chat-width (720px) and --chat-height (640px); under 560px wide the panel fills the screen

Keep text colours solid rather than translucent, so contrast can be measured in both themes.

• Chunk animation: the gsap.fromTo(fresh, ...) call in place inside runReply. Lower duration or stagger for fast models.
• Growth limit: MAX_LINES at the top of assets/script.js.
• Anchoring tolerance: SCROLL_THRESHOLD (px from the bottom that still counts as the bottom).
• Bubble shape: .ai-chat__bubble border radius and max-width.
• Do not put a CSS transform on .ai-chat__bubble, .ai-chat__jump, the send icons or the streamed words: GSAP owns those transforms.

• GSAP 3.12+ (the demo uses 3.15.0; core only, no plugins)
• A browser with async generators and AbortController (every current browser)
• No build step, no framework