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

# Chat Interface

> The chat panel is where you drive the agent: streaming output, inline tool calls, approval cards, agent and model selectors, file picker, attachments, and a full session history.

<img src="https://mintcdn.com/tesslate/VT6tbZolrCfpx26M/images/opensail-banner.png?fit=max&auto=format&n=VT6tbZolrCfpx26M&q=85&s=66579c47537b3464fb65b229cc9ab0fd" alt="Tesslate OpenSail" width="4712" height="1612" data-path="images/opensail-banner.png" />

## What the chat does

The chat panel is your primary interface to the agent. You type what you want, the agent plans, calls tools, writes files, runs commands, and streams its work back in real time. Every tool call is visible, every dangerous write pauses for approval, and every session persists so you can pick up later.

Chat ships in two surfaces: the project-builder sidebar (`ChatContainer`) and the standalone `/chat` page (not scoped to a project).

<CardGroup cols={2}>
  <Card title="Streaming" icon="water">
    Token-by-token between tool calls. See reasoning as it happens.
  </Card>

  <Card title="Inline tool calls" icon="wrench">
    Every tool invocation expands to show parameters, result, and duration.
  </Card>

  <Card title="Approval cards" icon="shield-check">
    Dangerous writes surface an inline card: Allow Once, Allow All, Stop.
  </Card>

  <Card title="Session history" icon="clock-rotate-left">
    Named sessions per project. Switch, rename, search, delete.
  </Card>
</CardGroup>

## Anatomy

<AccordionGroup>
  <Accordion icon="comments" title="Message list">
    User and agent bubbles with markdown, GFM, code blocks, and syntax highlighting. Every agent message shows its `AgentStep` list inline (tool name, parameters, result summary, duration). Click a step to expand for full details.
  </Accordion>

  <Accordion icon="keyboard" title="Input box">
    Message input with attachment picker, slash command dropdown, model and agent pills, edit-mode button, file-picker (`@filename`) dropdown, up/down arrow history, and chip mode when a slash command matches exactly.
  </Accordion>

  <Accordion icon="bolt" title="Top bar">
    Session title, session popover (switch, rename, create, delete), project connector (for standalone chat), and the usage ribbon showing credits remaining.
  </Accordion>

  <Accordion icon="sidebar" title="Sessions sidebar">
    Standalone chat gets a dedicated left sidebar with the full session list. Project chat uses a popover invoked from the top bar. Both support search, new, rename, delete, and collapse.
  </Accordion>
</AccordionGroup>

## Agent and model selectors

<Tabs>
  <Tab title="Agent selector">
    Dropdown that switches the active agent. Shows icon, name, model. Search filters the list. "Navigate to library" opens `/library?tab=agents` where you can install or create more.

    The selected agent persists per project in localStorage.
  </Tab>

  <Tab title="Model selector">
    Model picker rendered via `createPortal` so it escapes transform parents. Search, check for active model, caret for future sort options. Populated from `marketplaceApi.getModels`.

    Switching models mid-session is allowed. Compaction adapts automatically to the new context window.
  </Tab>
</Tabs>

## Edit modes

The mode pill in the input cycles between three states. The active mode controls what tools run without prompting.

<Tabs>
  <Tab title="Ask (default)">
    Read-only tools run without interruption. Writes, shell commands, and git pushes surface an `ApprovalRequestCard`. Three buttons:

    * **Allow Once** run this call, prompt again next time
    * **Allow All** stop prompting for this tool for the rest of the session
    * **Stop** cancel the call and return control to the user
  </Tab>

  <Tab title="Allow">
    Fully autonomous. All tools run immediately. Use when you trust the agent fully.
  </Tab>

  <Tab title="Plan">
    Read-only. The agent gathers context and produces a structured markdown plan instead of mutating anything. Activate with the mode button or `/plan` slash command.
  </Tab>
</Tabs>

## Attachments

Drop files into the input or click the attachment button. Supported:

* **Images** PNG, JPG, WebP, GIF (agent uses vision-capable models to read them)
* **Code and text files** any text MIME; content inlines in the next message
* **Project files** type `@filename` and the file picker dropdown autocompletes from the project

Attachment chips appear above the input. `AttachmentStrip` renders them with preview, filename, and remove buttons. Persisted attachments (from the database) and pre-upload attachments share a single component.

## Slash commands

Built-ins:

| Command  | Action                                        |
| -------- | --------------------------------------------- |
| `/clear` | Delete every message in the current session   |
| `/undo`  | Undo the last user and agent exchange         |
| `/retry` | `/undo` then re-send the removed user message |

Installed skills also appear as slash commands (for example `/docker-dev` if the `docker-dev` skill is attached). Commands disable while the agent is running or waiting for approval.

## Streaming events

The chat consumes WebSocket and SSE events in a fixed protocol:

| Event                  | Purpose                                                        |
| ---------------------- | -------------------------------------------------------------- |
| `text_delta`           | Real-time token-by-token streaming between tool calls          |
| `agent_step`           | A completed agent iteration (tool calls and result summary)    |
| `agent_task_started`   | Execution kicked off from another origin (for example the API) |
| `agent_task_completed` | Final response ready                                           |
| `agent_task_error`     | Execution failed                                               |
| `approval_required`    | Show an `ApprovalRequestCard`                                  |
| `approval_response`    | Client reply to approval                                       |
| `complete`             | Stream finished                                                |

Key invariants kept by the UI:

* `text_delta` creates a streaming message with id `${thinkingMessageId}-stream` inserted before the thinking indicator; subsequent deltas append
* Tool iteration messages use id `${thinkingMessageId}-iter-${iteration}` to deduplicate parallel tool calls
* `isMountedRef` guards every setState inside WS/SSE callbacks, so the backend keeps running even after navigation

## Sessions

Every project has its own chat sessions. Sessions keep their own history, their own active agent, and their own model selection.

<Steps>
  <Step title="Create">
    The `+` button in the session popover or sidebar creates a new session.
  </Step>

  <Step title="Rename">
    Click the title to rename. Good names help you find them later.
  </Step>

  <Step title="Switch">
    Use the popover (project chat) or the sidebar (standalone chat) to jump between sessions.
  </Step>

  <Step title="Delete">
    Right-click (or the kebab menu) to delete. Confirmation required.
  </Step>
</Steps>

Standalone chat (`/chat`) also has a `ProjectConnector` widget so you can attach a session to any project, inherit its context, and detach later.

## MCP integrations

When an agent calls an MCP tool:

* **Citations** Results tagged with `_mcp_structured.citation` render as `CitationCard` with external-link buttons
* **Re-auth prompts** Tools that return `_mcp_reauth_required` trigger a yellow `ReauthBanner` linking to `/settings/connectors`
* **Structured outputs** MCP spec 2025-06-18+ structured payloads render in a dedicated viewer

## Thinking indicator

`TypingIndicator` animates three dots while the agent is streaming or running a tool. The indicator disappears as soon as the first `agent_step` completes for a given message.

## Tool debug modal

Developers can invoke tools manually through `ToolDebugModal` (rendered via `createPortal`). Pick a tool, supply JSON parameters, see the result, timing, and errors. Useful for writing custom agents and testing new tool configurations.

## Copy and regenerate

Every agent message has a copy button and a regenerate button. Regenerate re-runs the same user message from the previous turn with the same agent and model selection. Undo and retry are also available via slash commands.

## Usage and limits

`UsageRibbon` sits at the top of chat with credit balance and a Get More CTA. When credits run out, inputs disable and the user is prompted to upgrade or add BYOK keys. BYOK-configured models bypass platform wallets entirely.

## Mobile

On small viewports, the chat collapses to a bottom sheet with a drag handle. Full functionality is available, but multi-column layouts (editor + chat + preview) give way to one at a time.

## Related

<CardGroup cols={2}>
  <Card title="Agents" icon="robot" href="/guides/agents">
    The agent loop that drives chat.
  </Card>

  <Card title="Code editor" icon="code" href="/guides/code-editor">
    The files the agent edits from chat.
  </Card>

  <Card title="Skills" icon="graduation-cap" href="/guides/skills">
    How `/docker-dev` and other slash-command skills work.
  </Card>

  <Card title="Connectors (MCP)" icon="plug" href="/guides/connectors-mcp">
    MCP tool results rendering in chat.
  </Card>
</CardGroup>