---
sidebar_label: 'Conversation Layout'
---

import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';

import app from './0012-conversation-layout/app';
import setup from './0012-conversation-layout/setup';
import layout from './0012-conversation-layout/layout';

# Conversation Layout

This example shows how the messages in the conversation can either be displayed in bubbles (WhatsApp style) or in a
list (slack style). The configuration is done via the `conversationOptions.layout` property.

<CodeEditor
    files={{
        'App.tsx': app,
        'layout.tsx': layout,
        'setup.tsx': setup,
    }}
    editorHeight={420}
    simulatedPrompt={'If a pirate loses his ship\'s wheel in a storm, does he become disoriented or reoriented?'}
/>
