import type { ExampleUsage, StoryUsage } from './types'; /** * Focused — full-window, single-column reading layout (Claude.ai-style). * A `max-w` measure centered in the viewport; user messages right-aligned, * assistant messages left-aligned, composer pinned below. */ const focused: StoryUsage = { intro: 'Use **Centered Conversation** for a full-window, distraction-free chat — the Claude.ai layout. A `max-w` reading column is centered in the viewport: user messages align right inside pill bubbles, assistant responses align left with markdown + hover action bar, and the `PromptInput` composer is pinned to the bottom, also constrained to the same max-width. Prefer this over the Chat Panel Layout when the chat *is* the page, not a widget embedded inside one.', snippets: { html: `
New conversation
Why is SolidJS reactivity fast?
Signals are fine-grained — only the DOM nodes that read a signal update.
`, react: `import { useState } from 'react'; import { ChatConfig, ChatContainer, ChatContainerContent, ChatContainerScrollAnchor, Message, MessageContent, MessageActions, PromptInput, PromptInputTextarea, PromptInputActions, Button, } from '@kitn.ai/chat/react'; /** * Centered Conversation — full-window single reading column. * User messages right-aligned; assistant messages left-aligned with * markdown + hover actions. Composer constrained to the same max-width. */ export function CenteredConversation() { const [input, setInput] = useState(''); return (
{/* Optional header */}
New conversation
{/* Scrollable thread */}
{/* User message — right-aligned bubble */} Why is SolidJS reactivity fast? {/* Assistant message — left-aligned with hover actions */}
Signals are fine-grained — only the DOM nodes that read a signal update.
{/* Composer — same max-width as messages */}
setInput('')}>
); }`, vue: ` `, svelte: `
New conversation
Why is SolidJS reactivity fast?
Signals are fine-grained — only the DOM nodes that read a signal update.
(input = e.detail.value)} on:kc-submit={() => (input = '')} >
`, angular: `// main.ts: import '@kitn.ai/chat/elements' before bootstrapApplication, // and add CUSTOM_ELEMENTS_SCHEMA to the component. import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; /** * Centered Conversation — full-window single reading column. * User messages right-aligned; assistant messages left-aligned with * markdown + hover actions. Composer constrained to the same max-width. */ @Component({ selector: 'app-centered-conversation', standalone: true, imports: [FormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: \`
New conversation
Why is SolidJS reactivity fast?
Signals are fine-grained — only the DOM nodes that read a signal update.
\`, }) export class CenteredConversationComponent { input = ''; }`, solid: `import { createSignal } from 'solid-js'; import { ChatConfig, ChatContainer, ChatContainerContent, ChatContainerScrollAnchor, Message, MessageContent, MessageActions, PromptInput, PromptInputTextarea, PromptInputActions, ModelSwitcher, Button, } from '@kitn.ai/chat'; import type { ModelOption } from '@kitn.ai/chat'; import { Copy, ThumbsUp, ArrowUp } from 'lucide-solid'; const models: ModelOption[] = [ { id: 'claude-4', name: 'Claude 4 Opus', provider: 'Anthropic' }, { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' }, ]; /** * Centered Conversation — full-window single reading column. * User messages right-aligned; assistant messages left-aligned with * markdown + hover actions. Composer constrained to the same max-width. */ export function CenteredConversation() { const [input, setInput] = createSignal(''); const [model, setModel] = createSignal('claude-4'); return (
{/* Optional header */}
New conversation
{/* Scrollable thread */}
{/* User message — right-aligned bubble */} Why is SolidJS reactivity fast? {/* Assistant message — left-aligned, markdown, hover actions */}
Signals are fine-grained — only the DOM nodes that read a signal update.
{/* Composer — constrained to the same max-width as messages */}
setInput('')}>
); }`, }, }; /** * Pattern: Centered Conversation — full-window, single-column reading layout * (Claude.ai-style). `max-w` measure centered in the viewport; user bubbles * right-aligned, assistant prose left-aligned with hover action bar, composer * pinned to the bottom. Per-story: the Usage tab shows the snippet for the * story you're on; the example-level fields below are the fallback. */ const centeredConversation: ExampleUsage = { title: 'Patterns/Centered Conversation', ...focused, stories: { Focused: focused, }, }; export default centeredConversation;