Chat pane

import ChatPane from "@/pages/library/ChatPane";
import "@/pages/library/library.css";

ChatPane is the left column of every library editor: the conversation that builds or changes what is on the canvas beside it. Its bubbles use the session chat's classes (s-msg-*), so it reads as the same chat as the rest of Petavue. An assistant reply can show the steps it took and what it was built from. A part picked on the canvas shows above the text box, and the next message applies to it. When the agent is asking a question, footer takes the place of the text box.

The column's right edge can be dragged. Its width is remembered in localStorage and shared by every editor.

Building a pageCopy Anchor Link

A thread with a first build and a change to a picked part. The reply shows its steps, then the template and components it used. "Show the description the agent followed for each" opens the description of every component. A part is picked ("Button · Demo request form"), so the placeholder asks what should change there; clear it with the cross.

<div className="lib-editor__body">
  <ChatPane
    greeting={BUILD_GREETING}
    thread={page.thread}
    busy={busy}
    placeholder={target ? "What should change here?" : "Describe the change you want…"}
    onSend={send}
    target={target ? { label: targetLabel(page, target) } : null}
    onClearTarget={() => setPicked(null)}
  />
  <section className="lib-stage" aria-label="Page">…</section>
</div>

Asking before it buildsCopy Anchor Link

Before the first build, the page builder asks up to three questions. The question card goes in footer, which hides the text box and the picked part until it is answered.

<ChatPane
  greeting={BUILD_GREETING}
  thread={thread}
  busy={busy}
  placeholder="Describe the page you want…"
  onSend={send}
  footer={asking && !busy && (
    <AskCard step={step} total={questions.length} question={questions[step].question} options={questions[step].options} onAnswer={answer} onSkip={() => answer(null)} onBack={back} />
  )}
/>

MessagesCopy Anchor Link

thread is an array. The greeting is drawn first as an assistant message and is not part of it.

While busy is true, a "Thinking…" reply in the muted text colour is added at the end, and the send button is disabled.

ResizingCopy Anchor Link

The parent has to be a row the chat can size against. The editors use .lib-editor__body, a grid of auto minmax(600px, 1fr) that scrolls sideways when the window is too narrow.

AnatomyCopy Anchor Link

PropsCopy Anchor Link

AccessibilityCopy Anchor Link

• The column is a <section> labelled "Chat".
• The resize edge has role="separator", aria-orientation="vertical", aria-valuenow, aria-valuemin and aria-valuemax, and the label "Resize the chat. Double-click to reset." It is focusable, and works with the arrow keys and Home. Double-click has no keyboard equivalent other than Home.
• The text box is a single-line <input> labelled "Message". Enter sends; there is no way to type a line break.
• The send button and the clear button have aria-labels ("Send", "Clear selection").
• New messages are not announced: the thread has no live region, so a screen reader user has to move to the reply to hear it.
• The avatar image has an empty alt, so it is skipped.

Do and don'tCopy Anchor Link

• Do put it first in a .lib-editor__body row, with the canvas second, so the resize rules work.
• Do set busy while a reply is on its way, so people cannot send twice.
• Do use footer for a question the agent is asking, instead of a dialog. The conversation stays the one place a request is shaped.
• Don't mount it inside a scrolling page or a small panel. It takes focus and scrolls itself into view.
• Don't use it for the main Petavue chat. That is the session chat, which has its own composer; see Chat composer.

When to use itCopy Anchor Link

Use ChatPane for an editor where chat changes something drawn beside it. For a conversation on its own page, use the session chat and its composer, described in Chat composer.

Where it is usedCopy Anchor Link