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

# Chat Interface Overview

> A tour of the ZeroTwo chat interface — the left sidebar, main chat area, prompt bar, and contextual side panels.

The ZeroTwo chat interface at `/c` is your primary workspace for AI conversations. It is organized into several distinct areas, each with a specific purpose. Understanding the layout helps you move efficiently between conversations, tools, and models.

The chat is not just a messaging window — it is a command center. From a single prompt bar you can activate web search, launch deep research, open a canvas editor, trigger agent mode, or start a voice session. Every tool is one click away.

## Interface Anatomy

The chat interface is divided into a left sidebar, a central main area, and a right panel that appears contextually based on the active tool.

```
┌─────────────────┬──────────────────────────────┬────────────────┐
│   Left Sidebar  │       Main Chat Area          │  Right Panel   │
│                 │                               │  (contextual)  │
│  [New Chat]     │  Conversation thread          │                │
│                 │  ─ user messages (right)      │  Sources panel │
│  Chat history   │  ─ AI responses (left)        │  (web search)  │
│  ─ Pinned       │  ─ streaming, markdown        │                │
│  ─ Today        │  ─ code highlighting          │  Agent panel   │
│  ─ Yesterday    │  ─ message actions on hover   │  (agent mode)  │
│  ─ This Week    │                               │                │
│  ─ Older        │  ┌──────────────────────────┐ │                │
│                 │  │       Prompt Bar          │ │                │
│  Projects       │  │  [Model] [Tools] [Input]  │ │                │
│  ─ Project A    │  └──────────────────────────┘ │                │
│  ─ Project B    │                               │                │
│                 │                               │                │
│  [User Avatar]  │                               │                │
└─────────────────┴──────────────────────────────┴────────────────┘
```

### Left Sidebar

The left sidebar is your navigation hub for all conversations and projects.

**New Chat button.** The pencil (compose) icon at the top of the sidebar starts a new conversation. Keyboard shortcut: `Cmd+Shift+O` on Mac / `Ctrl+Shift+O` on Windows/Linux.

**Search.** A search bar at the top of the sidebar searches across all chat titles and conversation content in real time. Click and type to find any past conversation by keyword or topic.

**Chat history.** All conversations are listed chronologically in groups:

* **Pinned** — chats you have explicitly pinned; always at the top
* **Today** — conversations active in the last 24 hours
* **Yesterday** — conversations active the prior calendar day
* **This Week** — earlier conversations from the current week
* **Older** — everything before this week, in reverse chronological order

Click any chat to open it. Right-click any chat to see options: Rename, Pin, Share, Delete.

**Projects section.** Projects appear as collapsible sections below the main chat history. Click a project name to expand or collapse its list of chats. Project chats are separate from your main chat history and share the project's instruction set.

**User profile.** Your account avatar and name appear at the bottom of the sidebar. Click to access Settings, account management, plan details, and the gear icon (⚙️) for the settings panel.

### Main Chat Area

The central column displays the active conversation thread.

**Message layout.** User messages appear right-aligned; AI responses appear left-aligned with the model's avatar indicator. Responses stream in real time as they are generated.

**Message actions.** Hover over any AI response to reveal action icons:

* **Copy** — copies the full response text to clipboard
* **Regenerate** — asks the model to produce a new response to the same prompt
* **Thumbs up / Thumbs down** — provide feedback on response quality
* **Edit** — available on your own messages; edit and resend

**Markdown rendering.** ZeroTwo renders full markdown in all responses: headers, bold, italics, lists, tables, code blocks with syntax highlighting, and inline code. LaTeX math expressions are also rendered where supported.

**Canvas mode split.** When Canvas Mode is active, the main area splits into a left conversation thread and a right canvas editor. See [Canvas Mode](/tools/canvas) for details on all 7 editor types.

### Prompt Bar

The prompt bar sits at the bottom of the main chat area and is the primary input control for every interaction.

**Model selector.** The model name on the left of the prompt bar is a clickable button. Click it to open the [model picker](/overview/model-picker) — a searchable panel listing all 95+ models from 19 providers. The selected model handles your next message.

**Tool pills.** A row of tool buttons is displayed above or inline with the text input. Each pill activates a specific capability for the current message:

| Tool Pill         | What It Does                                                              | Plan               |
| ----------------- | ------------------------------------------------------------------------- | ------------------ |
| **Web Search**    | Searches the live web and cites sources inline; choose from 8 focus modes | Free (1/day), Pro+ |
| **Deep Research** | Launches a multi-step autonomous research task with plan approval         | Free (1/day), Pro+ |
| **Canvas**        | Opens a side-by-side canvas editor (7 editor types)                       | Free+              |
| **Agent Mode**    | Enables multi-step agentic actions using connected apps as tools          | Pro+               |
| **Voice**         | Activates real-time WebRTC voice input and output                         | Pro+               |

**File attach.** The paperclip icon opens the file picker. You can also drag and drop files directly onto the chat area. Files appear as thumbnail previews above the text input before sending. Free plan: 1 file/message. Pro+: up to 10 files/message. See [Attachments in Chat](/core-chat/attachments-in-chat).

**Text input.** Type your message here. Press `Enter` to send. Press `Shift+Enter` to insert a new line without sending.

**Send button.** The arrow icon sends your message. During generation, the send button becomes a stop button — click it or press `Escape` to halt the response mid-stream.

### Right Panel (Contextual)

The right panel appears automatically based on the active tool and is hidden when not in use.

**Sources panel.** When Web Search is active and the model has fetched sources, they appear in the right panel as expandable cards showing the source title, URL, and a relevant snippet. Click any source to open it in a new tab.

**Agent activity panel.** When Agent Mode is active, the right panel displays a live log of the agent's actions — each tool call, intermediate step, and reasoning step is shown as it happens. This gives you full visibility into what the agent is doing in real time.

### Topbar (Page Navigation)

When navigating to non-chat pages, a topbar appears with navigation links. This is visible on pages like `/files`, `/tasks`, `/agents`, `/apps`, `/studio/images`, `/studio/video`, and `/studio/audio`. The topbar lets you move between ZeroTwo's primary workspaces without going through the chat sidebar.

## Navigating Between Chats

* Click any chat in the left sidebar to switch to it; the URL updates to `/c/:chatId`
* Use the search bar to find a specific conversation by title or content keyword
* Press `Cmd+Shift+O` / `Ctrl+Shift+O` to immediately start a new chat from anywhere
* Use the browser back/forward buttons to navigate between recently viewed chats

## Feature Quick Links

<CardGroup cols={2}>
  <Card title="Starting and Managing Chats" icon="message-square" href="/core-chat/starting-and-managing-chats">
    Create, rename, pin, and organize chats. Learn when to use standalone chats vs. projects.
  </Card>

  <Card title="Attachments in Chat" icon="file" href="/core-chat/attachments-in-chat">
    How to attach files, supported formats, and what ZeroTwo does with each file type.
  </Card>

  <Card title="Chat History" icon="list" href="/core-chat/chat-history">
    Finding old conversations, searching, and understanding how history is organized.
  </Card>

  <Card title="Keyboard Shortcuts" icon="zap" href="/core-chat/keyboard-shortcuts">
    Speed up your workflow with ZeroTwo's keyboard shortcuts.
  </Card>

  <Card title="Canvas Mode" icon="pen-line" href="/tools/canvas">
    7 editor types for rich text, code, spreadsheets, diagrams, HTML, SVG, and PDFs.
  </Card>

  <Card title="Shared Context" icon="share2" href="/core-chat/shared-context-and-continuity">
    How ZeroTwo maintains conversation context, memory, and project instructions.
  </Card>
</CardGroup>

## Related Pages

* [Model Picker](/overview/model-picker) — how to select and switch between 95+ models
* [Shared Context and Continuity](/core-chat/shared-context-and-continuity) — how context windows, memory, and project instructions work
* [Answer Quality and Limitations](/core-chat/answer-quality-and-limitations) — understanding AI response quality and how to improve it
* [Plans and Pricing](/overview/plans-and-pricing) — which tools are available on your plan
