Chat Layout – Code

Implementation
ChatLayout Props
ChatLayoutHandle

Common Examples

To use the ChatLayout, give it a parent with a real height and pass conversation and prompt as configured slots. The kit forbids children. The column fills a narrow region and caps at 768px when wider.

import { ChatLayout, PromptBar, UserMessage } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <ChatLayout
      conversation={<UserMessage content="Hello" timestamp={sentAt} />}
      prompt={<PromptBar value={value} onChange={setValue} />}
    />
  );
}

Slots

Both slots are optional. Omit conversation for a prompt-only landing. Omit prompt for a transcript with no composer. The prompt stays bottom-pinned in both cases.

Stick to bottom

New messages stick the transcript to the bottom. Scrolling up to read history stops auto-scroll. Scrolling back to the bottom re-engages the lock. A floating scroll to latest button appears while the user is not at the bottom.

Scroll after send

The layout cannot infer when the user sends. Pass controlRef and call scrollToBottom() after send so the transcript snaps to the latest regardless of scroll position.

const controlRef = useRef<ChatLayoutHandle>(null);

function send() {
  appendUserMessage(value);
  controlRef.current?.scrollToBottom();
}

return <ChatLayout controlRef={controlRef} conversation={…} prompt={…} />;

Internationalization

ChatLayout owns these localized strings:

ai-kit.chatLayout.conversation
ai-kit.chatLayout.scrollToBottom

Mount AiKitIntlProvider inside CartoTheme to switch them.

React Accessibility

The transcript is a role="log" live region. Appended messages are announced.
Render streaming token nodes as non-live and let the final message land in the log.
controlRef.current.isAtBottom mirrors whether the scroll-to-latest button is shown.

<ChatLayout
  conversation={messages}
  prompt={<PromptBar value={value} onChange={setValue} />}
  controlRef={controlRef}
/>

`ChatLayout` Props

The ChatLayout accepts the following props and forwards remaining <div> attributes except children and style.

string

Class merged onto the column, not replaced.

Ref<ChatLayoutHandle>

Imperative handle for scrollToBottom() and isAtBottom.

ReactNode

Transcript rendered above the prompt in a scrolling log. Omit for a prompt-only landing.

ReactNode

Composer pinned to the bottom. Typically a PromptBar. Omit to render the transcript alone.

controlRef.current?.scrollToBottom();

`ChatLayoutHandle`

boolean

required

Whether the transcript is locked to the bottom. Mirrors the scroll-to-latest button’s visibility.

() => void

required

Smoothly scrolls to the latest content and re-engages the stick-to-bottom lock. Call after the user sends.

AI Kit

Agent Experience

Chat Layout – Code

Common Examples

Slots

Stick to bottom

Scroll after send

Internationalization

React Accessibility

`ChatLayout` Props

`ChatLayoutHandle`

​Common Examples

​Slots

​Stick to bottom

​Scroll after send

​Internationalization

​React Accessibility

​ChatLayout Props

​ChatLayoutHandle

Common Examples

Slots

Stick to bottom

Scroll after send

Internationalization

React Accessibility

`ChatLayout` Props

`ChatLayoutHandle`