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. 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. 
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 as the rich text editor for chat input. This provides powerful text editing capabilities with support for mentions, formatting, and extensibility. 
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. 
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.

​
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. 
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: 
// 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. 
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. 
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. 
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: 
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. 
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: 
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