---
title: "Chat"
id: "342"
type: "page"
slug: "chat"
published_at: "2026-05-19T11:30:45+00:00"
modified_at: "2026-06-08T16:48:40+00:00"
url: "https://xedant.com/code/docs/chat"
markdown_url: "https://xedant.com/code/docs/chat.md"
excerpt: "The chat interface is your primary way to interact with AI assistance. Send messages, request…"
---

# Chat

[https://xedant.com/code/docs/chat.md](https://xedant.com/code/docs/chat.md)

The chat interface is your primary way to interact with AI assistance. Send messages, request tasks, review responses, and track progress—all through a conversational experience that adapts to your workflow.

## The Chat Input

At the bottom of the chat interface, you’ll find the input area where you type your messages and requests.

### Text Field

The main text input field supports multi-line messages. Type as much text as you need—the field expands automatically up to a maximum height. To send, press **Enter twice**: the first Enter inserts a new line, and the second Enter on the resulting empty line sends the message. This prevents accidental sends while composing longer messages.

Press **Ctrl+Enter** (or **Cmd+Enter** on Mac) to [continue in a new chat](#continue-in-new-chat)
 instead of sending in the current one. Use **Ctrl+V** or **Shift+Insert** to [paste from clipboard](#paste-button)
, including images and files.

### Send Button

Click the Send button to transmit your message. You can keep sending more messages at any time—even while the AI is still processing a previous one. Additional messages are [queued](#message-queuing)
 and processed one at a time. Hold **Ctrl** (or **Cmd**) and click the Send button to [continue in a new chat](#continue-in-new-chat)
 instead.

Next to the Send button, a separate **Continue** button (up-arrow icon) also opens the message in a new chat. Both the Ctrl+Click shortcut and the Continue button are disabled while a message is being sent.

### Command Typeahead

Type `/` followed by a skill name to quickly load a skill into the conversation context. A typeahead dropdown appears showing all activated skills that match your input.

- Type `/` to see all available skills
- Continue typing to filter by skill name
- Navigate with **Arrow keys**, select with **Enter**, **Tab**, or **Arrow Right**
- Press **Escape** to dismiss the dropdown
- Click a suggestion to select it

When you select a skill from the typeahead, the `/skillname` is automatically replaced with the proper command format: `start with loading /skillname skill`, followed by a newline so you can immediately type your message.

### Microphone Button

The microphone button is **only visible when speech recognition is enabled in settings** ([Settings → Speech Recognition](/code/docs/settings)
). When enabled, the system uses a **Whisper model running server-side** — not the browser’s built-in speech API — for transcription.

Click the microphone to start recording. A red pulsing indicator with ● appears while recording. Speak your message clearly, then click the microphone again to stop. The audio is sent to the server for transcription, and the resulting text is automatically inserted into the input field. A spinner appears next to the button while the audio is being processed.

*Note: The first time you use speech recognition, the Whisper model must be downloaded in settings. Multiple models are available (tiny, base, small, medium, large, turbo) — larger models offer better accuracy but are slower. You can also set a specific language or use auto-detect mode.*

### Paste Button

A Paste button (clipboard icon) appears in the top-right corner of the textarea on hover. Click it or use **Ctrl+V** / **Shift+Insert** to paste content from the clipboard.

The paste handler intelligently processes clipboard content: plain text is inserted at the cursor position, while images and files are uploaded to the server and their file paths are inserted into the input. By default, images go to `assets/images` and files go to `assets/files`, relative to the project root. Pasted files exceeding the size limit are rejected with an error toast.

All clipboard settings are configurable in [Settings → Clipboard](/code/docs/settings)
:

- **Paste images** — Toggle to enable or disable image pasting (enabled by default)
- **Images path** — Relative path for uploaded images (default: `assets/images`)
- **Paste files** — Toggle to enable or disable file pasting (enabled by default)
- **Files path** — Relative path for uploaded files (default: `assets/files`)
- **File size limit** — Maximum file size in MB, range 1–1000 (default: 100 MB)

### Input Controls Bar

Below the textarea, a controls bar provides quick access to all chat settings and tools. Controls are split into left and right sides:

### Left Controls

- **Environment** — Dropdown selector to choose which AI model processes your requests. You can switch environments mid-chat—the change applies to the next message you send. Learn more in [Environments](/code/docs/environments) .
- **Skill** — Dropdown to select a skill (shown only when at least one skill is enabled). Selecting a skill automatically asks the model to load it on the next message if it wasn’t loaded yet. You can load additional skills as you need them throughout the chat. Learn more in [Skills](/code/docs/skills) .
- **AutoFix** — Toggle switch that enables a background service which monitors build output for errors and warnings, then automatically sends them to the chat so the AI can fix them. Learn more in [AutoFix](/code/docs/autofix) .

### Right Controls

- **Prompts** — Opens a drawer panel with kanban-style boards where you can collect feedback, ideas, and observations while the chat is running, organize them into columns and cards, and send them directly into the chat when ready. Learn more in [Boards](/code/docs/boards) .
- **Skills** — Opens the Skills dialog to view and manage all available skills. Learn more in [Skills](/code/docs/skills) .
- **Hooks** — Opens the Hooks dialog to configure event hooks that run automatically at specific points in the chat workflow
- **MCP** — Opens the MCP Servers dialog to manage Model Context Protocol servers and their tools
- **Microphone** — Starts voice recording (shown only when speech recognition is enabled)
- **Send / Continue** — The Send button and Continue button (see [Send Button](#send-button) )

## Skills

Skills are instruction documents, similar to `CLAUDE.md` but loaded on demand. Unlike `CLAUDE.md`, each skill is a folder that can contain sub-documents, scripts, code samples, and other resources. Loading a skill brings its root `SKILL.md` file into the AI’s context, which then controls how the rest of the skill’s contents are loaded. You can load skills using the **Skill** dropdown in the input controls bar or by typing [slash commands](#command-typeahead)
 (`/skillname`) directly in the input field.

When you select a skill, the next message you send automatically instructs the model to load it. You can load additional skills at any point throughout the conversation as your needs evolve. Click the **Skills** button in the right controls to open the full Skills dialog and manage all available skills.

Learn more about skills in the [Skills documentation](/code/docs/skills)
.

## Continue in a New Chat

Continue in a new chat lets you take the current conversation context and open it in a separate chat window. The new chat preserves the Claude Code session, so the AI retains awareness of the conversation history.

You can trigger this in several ways:

- **Ctrl+Enter** (or **Cmd+Enter**) while typing in the input field
- **Ctrl+Click** (or **Cmd+Click**) the Send button
- Click the **Continue** button (up-arrow icon) next to the Send button

If you have a skill selected in the dropdown or used a `/skillname` command, the skill prefix is automatically included in the new chat message. The current input field is cleared and the new chat opens in a new browser tab.

## Environment Selector

The Environment dropdown lets you choose which AI model processes your requests. Different models offer varying capabilities, speeds, and costs.

### Available Environments

Typical environments include:

- **Default** — Balanced performance and speed for most tasks
- **Fast** — Quick responses for simple queries and iterations
- **Premium** — Advanced reasoning for complex tasks
- **Custom** — Project-specific models configured by your team

### Switching Environments

Click the Environment dropdown to select a different model. Your choice applies immediately to the next message you send. The selector shows the current environment and highlights any changes from your previous selection.

Learn more about configuring environments in the [Environments documentation](/code/docs/environments)
.

## Understanding AI Responses

The chat displays different message types with distinct visual styles. Each type indicates the kind of information being presented.

### User Messages

Your messages appear with a green border on the right side of the chat. This makes it easy to distinguish your input from AI responses at a glance.

### AI Text Responses

Standard AI text responses have a blue border. These contain the AI’s conversational replies, explanations, and recommendations. Text responses support markdown formatting including headings, lists, code snippets, and links.

### File Reads

When the AI reads a file, the content appears in a collapsible panel. Click the panel header to expand or collapse the file contents. This keeps the chat clean while allowing you to review file contents when needed.

File read panels show the file path and line count. Large files may be truncated to prevent overwhelming the chat display.

### File Edits

When the AI modifies an existing file, the changes appear as a diff view. Added lines show in green, removed lines show in red, and unchanged lines provide context. This shows exactly what changed before and after.

Click the file path to open the diff in a larger view if needed.

### File Writes and Creates

When the AI creates a new file or completely overwrites an existing one, the full file contents appear in a code block. The code block includes syntax highlighting and line numbers for readability.

The file path appears above the code block, showing where the content was written.

### Todo Lists

Todo lists display as interactive checklists. Each item shows its current status: pending, in progress, or completed. You’ll see todo lists update in real-time as the AI works through tasks.

Todo lists help you track multi-step operations and understand what work remains. See [The Floating Todo Panel](#todo-panel)
 below for more details.

### Question Prompts

When the AI needs clarification or additional information, it presents clickable question cards. Each card shows a suggested response. Click a card to send that response automatically, or type your own answer in the chat input.

Question prompts speed up interactions by reducing typing. They’re especially useful for choosing between options, confirming actions, or providing structured information.

### Permission Requests

Messages requiring your approval appear with a yellow border. These include requests to perform potentially risky operations like deleting files, running commands, or making database changes.

Each permission request includes:

- A clear description of the proposed action
- The specific files or resources affected
- Approve and Deny buttons

You must approve these requests before the AI proceeds. This safety mechanism prevents unintended changes to your system.

### Error Messages

Errors and failures appear with a red border. These messages explain what went wrong and often include suggestions for fixing the problem. Common errors include file not found, permission denied, or invalid command syntax.

Error messages are collapsible—click to dismiss them from view after reading. Dismissed errors remain in the chat history but stay collapsed.

### System Messages

System notifications appear with a gray border. These provide informational updates like “processing your request” or “operation completed successfully.” System messages keep you informed about background activity without interrupting the conversation flow.

## Message Actions

Hover over any AI response to reveal action buttons. These quick actions help you work with message content efficiently.

### Copy

Click the Copy button to copy the message text to your clipboard. This includes all text, code blocks, and formatting. Use this to grab explanations, code snippets, or commands for use elsewhere.

### Continue

The Continue button (play icon) on any AI response lets you continue the conversation from that specific message. Clicking it appends a continuation prompt to the input field, instructing the AI to pick up from that point while forgetting what was said and done after it. This effectively rewinds the conversation context to that message.

### View JSON

Click View JSON to see the raw message data in JSON format. This reveals the internal structure of the response, including metadata, tool calls, and other technical details not shown in the formatted display.

View JSON is helpful for debugging, understanding how the AI processed your request, or extracting structured data from responses.

## Token Usage Indicator

A token usage bar appears at the top of the chat, showing how many tokens you’ve used in the current session. Tokens represent the amount of text processed by the AI model.

### Reading the Indicator

The bar shows two values:

- **Used** — Tokens consumed so far in this session
- **Limit** — Your maximum token allowance for the current billing period

A colored fill visualizes your usage relative to the limit. Green indicates plenty of capacity, yellow shows moderate usage, and red warns that you’re approaching your limit.

### Viewing Breakdown

Click the token usage bar to see a detailed breakdown. This shows token consumption per message, separating input tokens (your messages) from output tokens (AI responses). Use this breakdown to understand which requests consumed the most tokens and optimize your usage if needed.

## Message Queuing

When you send multiple messages in quick succession, they queue above the chat input instead of executing immediately. This queuing system ensures messages process one at a time in order.

### Queued Messages Display

Queued messages appear as a list above the input field. Each message shows its text and position in the queue. A counter indicates how many messages are waiting to process.

### Managing the Queue

Three actions let you control queued messages:

- **Pause** — Stop processing the queue. The current message finishes, but subsequent messages wait until you resume.
- **Edit** — Modify a queued message before it sends. Click to change the text, add details, or fix typos.
- **Delete** — Remove a message from the queue entirely. This cancels that specific request without affecting other queued messages.

Message queuing prevents overwhelming the AI with simultaneous requests. It also gives you a chance to revise or cancel messages before they’re processed.

## The Floating Todo Panel

When the AI creates a todo list for your session, a floating panel appears at the top center of the screen. This panel provides a dedicated view of task progress without cluttering the main chat area.

### Task Status Display

The todo panel shows all tasks in the current list with their current status:

- **Pending** — Task not yet started
- **In Progress** — Currently being worked on (highlighted)
- **Completed** — Finished successfully (checked off)

Only one task shows as “in progress” at a time, giving you clear visibility into what the AI is doing right now.

### Real-Time Updates

The todo panel updates automatically as tasks progress. You’ll see tasks move from pending to in progress to completed in real-time. This provides immediate feedback on operation status without needing to ask “are you done yet?”

### Collapsing the Panel

Click the collapse button (chevron) in the panel header to hide the todo panel. The panel minimizes to a small tab on the right edge of the screen. Click the tab again to expand the panel when you want to check progress.

Collapsing the panel doesn’t affect task execution. The AI continues working through the todo list normally, and status updates continue in the background.

The todo panel is especially useful for multi-step operations like refactoring code, running test suites, or executing complex build processes where tracking progress matters.

## Navigation

Continue exploring the documentation:

**Previous:**  
[Getting Started](/code/docs/getting-started)

**Next:**  
[Files](/code/docs/files)