> ## Documentation Index
> Fetch the complete documentation index at: https://reedai-07fa30f1.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Interface Tour

> Navigate ZeroTwo's interface like a pro - learn about every element and feature in the workspace

## Welcome to Your Workspace

ZeroTwo's interface is designed for efficiency and ease of use. This tour will walk you through every major component so you can work confidently.

<Note>
  The interface is responsive and adapts to your screen size - from mobile phones to large desktop displays.
</Note>

## Main Interface Layout

### Overview

The ZeroTwo interface consists of four main areas:

<CardGroup cols={2}>
  <Card title="Left Sidebar" icon="sidebar">
    Navigation, history, and projects
  </Card>

  <Card title="Main Chat Area" icon="comments">
    Your conversation with AI
  </Card>

  <Card title="Right Panel" icon="window-restore">
    Canvas, settings, and additional features
  </Card>

  <Card title="Top Bar" icon="bars">
    Model selector, tools, and account menu
  </Card>
</CardGroup>

## Left Sidebar

The command center for navigation and organization.

### Navigation Sections

**Home & Chat**:

* 🏠 **Home**: Return to main dashboard
* ➕ **New Chat**: Start a fresh conversation (`Cmd/Ctrl + N`)
* 💬 **Current Chat**: Active conversation highlighted

**History & Organization**:

* 🕒 **Recent Chats**: Your latest conversations
* ⭐ **Starred**: Favorited conversations for quick access
* 📁 **Projects**: Team workspaces and organized folders
* 📚 **Library**: Saved templates and resources

**Tools & Features**:

* 🔍 **Search**: Find any past conversation (`Cmd/Ctrl + K`)
* 🎨 **Canvas**: Access saved canvases
* 🔧 **Tools**: Quick access to features
* 🔌 **Integrations**: Connected services

<Tip>
  Pin your most-used projects and chats to the top of the sidebar by right-clicking and selecting "Pin to top".
</Tip>

### Sidebar Features

<AccordionGroup>
  <Accordion title="Chat History">
    **Organization**:

    * Automatically sorted by date
    * Smart titles generated by AI
    * Search across all conversations
    * Filter by date, model, or project

    **Actions**:

    * Hover over chat to see options
    * Rename, star, archive, or delete
    * Share with team members
    * Move to projects
  </Accordion>

  <Accordion title="Projects Panel">
    **View your workspaces**:

    * Personal projects (🔒 private)
    * Team projects (👥 shared)
    * Recently accessed
    * Starred projects

    **Quick actions**:

    * Click to open project
    * Right-click for options
    * Drag chats to organize
  </Accordion>

  <Accordion title="Search Function">
    **Powerful search** (`Cmd/Ctrl + K`):

    * Search conversation content
    * Find by keywords
    * Filter by date range
    * Search within projects
    * Find files and documents

    **Search tips**:

    * Use quotes for exact phrases
    * Filter with `in:project-name`
    * Date range: `after:2024-01-01`
  </Accordion>
</AccordionGroup>

### Collapsible Sidebar

Toggle sidebar visibility:

* **Keyboard**: `Cmd/Ctrl + B`
* **Button**: Click hamburger menu (☰)
* **Auto-hide**: Available in settings for more screen space

## Top Navigation Bar

Your control center for models, tools, and account settings.

### Left Section

**Model Selector**:

* Click to open model dropdown
* Shows current model with icon
* Quick switch without context loss
* Keyboard shortcut: `Cmd/Ctrl + M`

**Project Context** (when in a project):

* Breadcrumb navigation
* Project name and icon
* Click to navigate levels

### Center Section

**Tool Toggles**:

* 🌐 **Web Search**: Enable real-time web information
* 🎨 **Canvas Mode**: Toggle canvas creation
* 🧠 **Memory**: Enable conversation memory
* 🔌 **Connectors**: Quick access to integrations

<Tip>
  Tools show visual indicators when active - look for colored highlights.
</Tip>

### Right Section

**Account & Settings**:

* 👤 **Profile Menu**: Click avatar for account options
  * Settings
  * Subscriptions
  * Help & Support
  * Sign Out
* 🔔 **Notifications**: Updates and alerts
* ⚙️ **Settings**: Quick access to preferences

## Main Chat Area

Where the magic happens - your conversation workspace.

### Chat Header

**Information Display**:

* 📊 **Model Badge**: Current AI model
* 🎯 **Active Tools**: Shows which tools are enabled
* 🔄 **Status**: Connection and processing indicators

**Action Buttons**:

* 📤 **Share**: Share this conversation
* ⭐ **Star**: Add to favorites
* 📋 **Export**: Download conversation
* ⋮ **More Options**: Additional actions

### Message Display

<Tabs>
  <Tab title="Your Messages">
    **User message styling**:

    * Right-aligned (or left, based on preference)
    * Your avatar
    * Timestamp
    * Edit and delete options on hover

    **Message actions**:

    * ✏️ Edit message and regenerate
    * 🗑️ Delete message
    * 📋 Copy message text
  </Tab>

  <Tab title="AI Responses">
    **AI message features**:

    * Model icon identifier
    * Streaming text (appears in real-time)
    * Code syntax highlighting
    * Markdown rendering

    **Response actions**:

    * 📋 Copy to clipboard
    * 🔄 Regenerate response
    * 👍👎 Rate response quality
    * 🎨 Open in Canvas (when applicable)
  </Tab>

  <Tab title="System Messages">
    **Tool usage indicators**:

    * Web search results
    * File processing status
    * Integration actions
    * Error messages

    Styled differently for easy identification.
  </Tab>
</Tabs>

### Message Formatting

Messages support rich formatting:

**Text Styling**:

* **Bold**, *italic*, ~~strikethrough~~
* `inline code`
* [Links](url)
* > Blockquotes
* Bulleted and numbered lists

**Code Blocks**:

```python theme={null}
# Syntax highlighted code
def example():
    return "Formatted beautifully!"
```

**Tables**:

| Feature | Status |
| ------- | ------ |
| Tables  | ✅      |
| Math    | ✅      |

**Math** (LaTeX):

* Inline: $E = mc^2$
* Block: $\sum_{i=1}^n i = \frac{n(n+1)}{2}$

### Chat Input

**Input Box Features**:

* **Multi-line Support**: Shift+Enter for new line
* **File Attachments**: Drag & drop or click 📎
* **Voice Input**: Click 🎤 to dictate (where available)
* **Emoji Picker**: Click 😊 for emojis

**Smart Features**:

* Auto-complete for commands
* @ mentions for team members (in projects)
* Slash commands for quick actions
* Character count indicator for long messages

**Send Options**:

* **Enter**: Send message (default)
* **Shift+Enter**: New line
* **Cmd/Ctrl+Enter**: Send with modifier

<Tip>
  You can change send behavior in Settings > Preferences > Chat Settings.
</Tip>

## Right Panel (Canvas & More)

The right panel dynamically shows different content based on context.

### Canvas Panel

When Canvas is active:

**Canvas Toolbar** (top):

* Type indicator (Text, Code, Spreadsheet, HTML)
* Version history dropdown
* Preview toggle
* Share and export buttons

**Canvas Editor** (main area):

* Full-featured editor
* Real-time AI collaboration
* Syntax highlighting (for code)
* Formatting tools (for text)

**Canvas Footer** (bottom):

* Save status
* Word/line count
* Language selector (for code)
* Settings

### Settings Panel

Access various settings:

* **General**: Theme, language, preferences
* **Account**: Profile, security, billing
* **Integrations**: Connected services
* **Notifications**: Email and in-app alerts
* **Keyboard Shortcuts**: Customize shortcuts
* **Data & Privacy**: Export, delete, controls

### Project Panel

When working in projects:

* **Members**: Team member list
* **Files**: Uploaded documents
* **Settings**: Project-specific configurations
* **Activity**: Recent project updates

## Responsive Design

### Desktop View (1024px+)

Full three-column layout:

* Sidebar visible by default
* Main chat in center (60% width)
* Right panel for Canvas/settings (30% width)

### Tablet View (768px - 1023px)

Optimized two-column layout:

* Collapsible sidebar
* Main chat takes more space
* Right panel overlays when needed

### Mobile View (\< 768px)

Single-column, touch-optimized:

* Slide-out sidebar navigation
* Full-width chat area
* Canvas opens in modal
* Bottom navigation bar
* Swipe gestures for navigation

<Info>
  The interface automatically adapts to your screen size for optimal usability.
</Info>

## Keyboard Shortcuts

Master these shortcuts for efficient navigation:

### Global Shortcuts

| Shortcut       | Action                         |
| -------------- | ------------------------------ |
| `Cmd/Ctrl + K` | Quick search / Command palette |
| `Cmd/Ctrl + N` | New chat                       |
| `Cmd/Ctrl + B` | Toggle sidebar                 |
| `Cmd/Ctrl + /` | Show all shortcuts             |
| `Cmd/Ctrl + ,` | Open settings                  |
| `Cmd/Ctrl + F` | Find in conversation           |

### Chat Shortcuts

| Shortcut           | Action                     |
| ------------------ | -------------------------- |
| `Cmd/Ctrl + Enter` | Send message               |
| `Shift + Enter`    | New line in input          |
| `↑`                | Edit last message          |
| `Cmd/Ctrl + ↑/↓`   | Navigate messages          |
| `Esc`              | Cancel message composition |

### Canvas Shortcuts

| Shortcut               | Action                   |
| ---------------------- | ------------------------ |
| `Cmd/Ctrl + L`         | Insert link              |
| `Cmd/Ctrl + Alt + I`   | AI assistance menu       |
| `Cmd/Ctrl + Z`         | Undo                     |
| `Cmd/Ctrl + Shift + Z` | Redo                     |
| `Cmd/Ctrl + S`         | Save (auto-saves anyway) |

<Tip>
  Press `Cmd/Ctrl + /` anytime to see a complete list of keyboard shortcuts.
</Tip>

## Customization Options

### Theme Settings

**Color Themes**:

* 🌞 **Light Mode**: Bright, clean interface
* 🌙 **Dark Mode**: Easy on the eyes
* 🌗 **Auto**: Matches system preference
* 🎨 **Custom**: Create your own theme (Pro)

**Accent Colors**:

* Purple (default)
* Blue
* Green
* Red
* Custom (Pro)

### Layout Preferences

**Density**:

* Compact: More content on screen
* Comfortable: Balanced spacing (default)
* Spacious: Generous padding

**Message Display**:

* Bubbles (chat-style)
* Full-width (document-style)
* Minimal (code-focused)

### Font Options

**Chat Font**:

* System default
* Inter (recommended)
* Roboto
* Custom fonts (Pro)

**Code Font**:

* Menlo (macOS)
* Consolas (Windows)
* Monaco
* Source Code Pro
* JetBrains Mono

**Font Size**:

* Small (14px)
* Medium (16px, default)
* Large (18px)
* Extra Large (20px)

## Status Indicators

Understanding visual feedback:

<CardGroup cols={2}>
  <Card title="Connection Status" icon="signal">
    * 🟢 **Connected**: All systems operational
    * 🟡 **Reconnecting**: Temporary disruption
    * 🔴 **Disconnected**: No connection
    * 🔵 **Syncing**: Saving changes
  </Card>

  <Card title="Processing Status" icon="spinner">
    * ⏳ **Processing**: AI is thinking
    * ✍️ **Streaming**: Response generating
    * 🔍 **Searching**: Web search active
    * ✅ **Complete**: Action finished
  </Card>

  <Card title="Tool Status" icon="wrench">
    * 🌐 **Web Search**: Active (blue)
    * 🎨 **Canvas**: Open (purple)
    * 🧠 **Memory**: Enabled (green)
    * 🔌 **Connected**: Integration active
  </Card>

  <Card title="Notification Icons" icon="bell">
    * 🔴 **Dot**: Unread notifications
    * 🔔 **Bell**: New alerts
    * ✉️ **Envelope**: Messages
    * ⚠️ **Warning**: Requires attention
  </Card>
</CardGroup>

## Tips for Efficient Navigation

<AccordionGroup>
  <Accordion title="Use Keyboard Shortcuts">
    Learn the top 10 shortcuts to 5x your speed:

    1. `Cmd+K` - Quick search everything
    2. `Cmd+N` - New chat instantly
    3. `Cmd+B` - Toggle sidebar
    4. `Cmd+Enter` - Send messages
    5. `Cmd+/` - See all shortcuts
    6. `Cmd+F` - Find in conversation
    7. `↑` - Edit previous message
    8. `Esc` - Cancel actions
    9. `Cmd+,` - Settings
    10. `Cmd+M` - Switch models
  </Accordion>

  <Accordion title="Organize with Projects">
    Keep your workspace tidy:

    * Create projects for different topics
    * Move related chats into projects
    * Use folders for sub-organization
    * Star important items
    * Archive old conversations
  </Accordion>

  <Accordion title="Customize Your Workspace">
    Make it yours:

    * Choose your preferred theme
    * Adjust font sizes for comfort
    * Set default tools and models
    * Configure notification preferences
    * Create custom keyboard shortcuts (Pro)
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Start Your First Chat" icon="comments" href="/getting-started/first-chat">
    Learn how to communicate effectively with AI
  </Card>

  <Card title="Switch Models" icon="shuffle" href="/getting-started/switch-models">
    Understand when to use different AI models
  </Card>

  <Card title="Upload Files" icon="file" href="/getting-started/files-and-history">
    Learn about file uploads and history
  </Card>

  <Card title="Keyboard Shortcuts" icon="keyboard" href="/getting-started/shortcuts">
    Master all available shortcuts
  </Card>
</CardGroup>

<Check>
  You're now familiar with ZeroTwo's interface - time to start creating!
</Check>