> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cedarcopilot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat Components (Advanced)

> Deep dive into individual chat components for advanced customization

Cedar provides you with fully working chat out of the box, so this documentation is only needed if you want to customize or build your own chat interface. We break down every component so you can understand how they work together and modify them as needed.

## Chat Input Components

The chat input system consists of several key components that handle user input, mentions, and context management.

<img src="https://vrhlhwfhghqbpdpfnpdq.supabase.co/storage/v1/object/public/logos/caption.gif" alt="Bottom Center Chat Demo" />

### ContextBadgeRow

The `ContextBadgeRow` component displays selected context items (like mentions, state, or custom context) as badges above the input field. Users can click these badges to remove them from the context.

```tsx theme={null}
import { ContextBadgeRow } from '@/chatInput/ContextBadgeRow';

<ContextBadgeRow editor={editor} />;
```

**Key Features:**

* Displays context entries as removable badges
* Shows icons and colors from mention providers
* Handles removal of mentions from both context and editor
* Supports custom rendering through mention providers
* Automatically renders badges for all registered mention types

**Props:**

* `editor` - The Tiptap editor instance for mention removal

### Editor Section (Tiptap Integration)

Cedar uses [Tiptap](https://tiptap.dev/) as the rich text editor for chat input. This provides powerful text editing capabilities with support for mentions, formatting, and extensibility.

```tsx theme={null}
import { useCedarEditor } from 'cedar-os';
import { EditorContent } from '@tiptap/react';

const { editor, isEditorEmpty, handleSubmit } = useCedarEditor({
	onSubmit,
	onFocus: handleFocus,
	onBlur: handleBlur,
});

<EditorContent
	editor={editor}
	className='prose prose-sm max-w-none focus:outline-none'
/>;
```

**Key Features:**

* Rich text editing with markdown support
* Mention system integration (@, #, / triggers)
* Keyboard shortcuts and navigation
* Multi-line input support
* Extensible through Tiptap extensions

**Editor Extensions Included:**

* Document, Paragraph, Text (core)
* HardBreak for line breaks
* Mention extension for @mentions
* History for undo/redo
* Placeholder support

### MentionList

The `MentionList` component renders the dropdown menu that appears when users type mention triggers (like @ or #). It displays available mention options with custom rendering support.

```tsx theme={null}
import MentionList from '@/components/chatInput/MentionList';

<MentionList items={mentionItems} command={selectMention} />;
```

**Key Features:**

* Keyboard navigation (arrow keys, enter)
* Custom rendering through mention providers
* Color theming based on mention metadata
* Hover and selection states
* Provider-specific item rendering

**Props:**

* `items` - Array of `MentionItem` objects to display
* `command` - Function called when an item is selected

For more details on setting up mentions, see the [Mentions documentation](/agent-context/mentions).

## Message Components

Message components handle the display and rendering of chat messages in different formats and layouts.

### ChatRenderer

The `ChatRenderer` is the core component responsible for rendering individual messages based on their type. It supports both built-in message types and custom message renderers.

```tsx theme={null}
import { ChatRenderer } from '@/chatMessages/ChatRenderer';

<ChatRenderer message={message} />;
```

**Built-in Message Types:**

* `text` - Standard text messages with markdown support
* `dialogue_options` - Interactive option buttons
* `multiple_choice` - Choice buttons with keyboard shortcuts
* `todolist` - Interactive todo list items
* `ticker` - Horizontal scrolling content cards
* `slider` - Slider input for numeric values

**Key Features:**

* Automatic message type detection
* Custom renderer registration support
* Markdown rendering with code block support
* Consistent styling across message types
* Dark/light mode support

**Custom Renderers:**

```tsx theme={null}
// Register a custom message renderer
store.registerMessageRenderer({
	type: 'my-custom-type',
	renderer: ({ message }) => <div>{message.content}</div>,
});
```

### ChatBubbles

The `ChatBubbles` component manages the scrollable message container with animations and auto-scrolling behavior.

```tsx theme={null}
import { ChatBubbles } from '@/chatMessages/ChatBubbles';

<ChatBubbles maxHeight='400px' className='custom-chat-container' />;
```

**Key Features:**

* Auto-scroll to latest messages
* Smooth animations for new messages
* Typing indicator support
* Consecutive message grouping
* Custom height and styling options
* Optimized scrolling performance

**Props:**

* `maxHeight` - Maximum height (e.g., "300px", "60vh")
* `className` - Additional CSS classes

### CaptionMessages

The `CaptionMessages` component is specialized for caption-style chat interfaces, showing only the latest message with enhanced typography and interactions.

```tsx theme={null}
import CaptionMessages from '@/chatMessages/CaptionMessages';

<CaptionMessages showThinking={true} />;
```

**Key Features:**

* Shows only the latest relevant message
* Enhanced typography with typewriter effects
* Shimmer text for thinking states
* Interactive elements (buttons, sliders)
* Keyboard shortcut integration
* Optimized for overlay/caption use cases

**Props:**

* `showThinking` - Whether to show user messages and thinking states

**Message Type Handling:**

* `text` - Typewriter animation with "Cedar:" prefix
* `dialogue_options` - 3D button grid with hover effects
* `ticker` - Horizontal scrolling with "Next Step" button
* `multiple_choice` - Inline choice buttons with shortcuts
* `slider` - Interactive 3D slider component

## Container Components

Container components provide the structural layout and positioning for different chat interface styles.

### FloatingContainer

The `FloatingContainer` provides a floating, resizable chat window that can be positioned at different screen locations.

```tsx theme={null}
import { FloatingContainer } from '@/structural/FloatingContainer';

<FloatingContainer
	isActive={isOpen}
	position='bottom-right'
	dimensions={{
		width: 400,
		height: 600,
		minWidth: 300,
		minHeight: 400,
	}}
	resizable={true}
	onResize={(width, height) => console.log('Resized:', width, height)}>
	{/* Chat content */}
</FloatingContainer>;
```

**Key Features:**

* Multiple positioning options (bottom-left, bottom-right, bottom-center)
* Resizable with drag handles (corner positions only)
* Smooth animations with spring physics
* Responsive design with mobile adaptations
* Constraint-based resizing with min/max limits

**Props:**

* `isActive` - Whether the container is visible
* `position` - Screen position ('bottom-left' | 'bottom-right' | 'bottom-center')
* `dimensions` - Size configuration object
* `resizable` - Enable/disable resize functionality
* `onResize` - Callback for size changes
* `className` - Additional CSS classes

**Dimensions Object:**

```tsx theme={null}
interface FloatingDimensions {
	width?: number | string;
	height?: number | string;
	minWidth?: number | string;
	minHeight?: number | string;
	maxWidth?: number | string;
	maxHeight?: number | string;
}
```

### SidePanelContainer

The `SidePanelContainer` creates a side panel that pushes the main content to make room for the chat interface.

```tsx theme={null}
import { SidePanelContainer } from '@/structural/SidePanelContainer';

<SidePanelContainer
	isActive={isOpen}
	side='right'
	dimensions={{
		width: 600,
		minWidth: 300,
		maxWidth: 800,
	}}
	resizable={true}
	topOffset={64} // Account for navbar
	onResize={(width) => console.log('Panel width:', width)}
	panelContent={<ChatInterface />}>
	{/* Main page content */}
	<div>Your app content here</div>
</SidePanelContainer>;
```

**Key Features:**

* Left or right side positioning
* Content area automatically adjusts padding
* Resizable with drag handle
* Mobile-responsive (full screen on mobile)
* Top offset support for fixed headers
* Smooth slide animations

**Props:**

* `isActive` - Whether the panel is open
* `side` - Panel position ('left' | 'right')
* `panelContent` - React node to render in the panel
* `dimensions` - Width configuration object
* `resizable` - Enable/disable resize functionality
* `topOffset` - Top spacing in pixels (for fixed headers)
* `onResize` - Callback for width changes
* `className` - Additional CSS classes for main content
* `panelClassName` - Additional CSS classes for panel

**Dimensions Object:**

```tsx theme={null}
interface SidePanelDimensions {
	width?: number;
	minWidth?: number;
	maxWidth?: number;
}
```

## Component Integration

These components work together to create the complete chat experience:

1. **Input Flow**: `ContextBadgeRow` → Tiptap Editor → `MentionList`
2. **Message Flow**: `ChatRenderer` → `ChatBubbles` or `CaptionMessages`
3. **Layout Flow**: `FloatingContainer` or `SidePanelContainer` wraps the entire chat

Each component is designed to be used independently or as part of the complete system, giving you flexibility in how you build your chat interface.

## Next Steps

* Explore [Custom Message Rendering](/chat/custom-message-rendering) to create your own message types
* Learn about [Mentions](/agent-context/mentions) to add contextual references
* Check out [Streaming](/chat/streaming) for real-time message updates