Chat Area
The chat area is your main workspace for interacting with Agents, occupying most of the space on the right side of the interface.
Area Structure
+------------------------------------------+
| [Avatar] Agent Name · Online | <- Header (70px)
| [Interact] [Buttons] [More] |
+------------------------------------------+
| |
| Hello, how can I help?| <- Agent message (left)
| |
| I want to learn about contract review [My Avatar] | <- User message (right)
| |
| Okay, let me analyze... |
| |
+------------------------------------------+
| Query Summary Bar | <- Displayed when not thinking
+------------------------------------------+
| [+] [Img] [Scr] [Type text...] [Send] | <- Input area
| / commands Enter send Shift+Enter newline |
+------------------------------------------+
Header Information Bar
The header is 70px high and contains Agent information and action buttons.
Left: Agent Information
- Avatar: General Agents are circular, Pro Agents are rounded square, colors vary by Agent
- Name: 15px bold font
- Running Status: Current status indicator of the Agent
| Status | Dot Color | Description |
|---|---|---|
| Online | Green + breathing animation | Agent ready, can receive instructions |
| Working | Orange | Currently executing tasks or thinking |
| Using Tools | Blue | Currently calling external tools |
| Offline | Gray | Agent not started, click "Start" button to power on |
- Description: Brief introduction text of the Agent
Right: Action Button Group
Buttons from left to right:
| Button | Function |
|---|---|
| Immersive Interaction | Flip to Digital Avatar 3D interface |
| Agent Profile | View detailed configuration information of the current Agent |
| Resource Management | Manage Agent files and resources |
| Running Status | View currently running tasks and historical topics |
| Publish/API | Publish Agent or view API access information |
| More | Expand more actions (chat history, clear history, delete Agent, etc.) |
When the chat area width is less than 640px, the middle buttons are automatically moved to the "More" menu, leaving only the "More" button to avoid interface clutter.
Message List
The message list shows the current conversation. Scroll up to read earlier messages.
Message Types
Agent Messages (Left):
- Assistant messages have no left avatar or reserved avatar space; the Agent identity remains in the chat header
- The default flat mode displays content directly; classic mode retains the translucent glass bubble
- Can contain rich content such as text, code blocks, function cards, etc.
User Messages (Right):
- Neutral rounded bubbles in the default flat mode; green gradient bubbles with white text in classic mode
- Top-right corner is right-angled, other corners rounded
- Supports plain text and image attachments
System Messages (Center):
- Pill shape
- Semi-transparent glass material
- Used for time separators, status prompts, etc.
Function Cards
In conversations, Agents may return various function cards:
- Workflow Cards (green border): Display task execution steps and progress
- Action Receipt Cards (green/orange/blue borders): Display operation results (success/warning/pending)
- Teaching Cards (purple border): Display rules you have taught the Agent
- Learned Cards (purple border): Confirm content the Agent has learned
- Delegation Cards (blue border): Display task flow between different Agents
Message Animation
New messages enter with a fadeUp animation — fading in and rising from 8px below, with each message appearing sequentially at 40ms intervals, creating a smooth conversation experience.
Input Area
Use the input area at the bottom to send text, images, file references, and commands.
Text Input
- Auto-expanding text box, minimum one line, maximum height 120px
- Border turns green with outer glow effect when focused
- Supports multi-line input
Left Buttons
| Button | Function |
|---|---|
| + | Add file or folder reference |
| Image | Upload image (supports JPEG, PNG, WebP) |
| Screenshot | Area selection screenshot and annotation |
Send Button
Green circular button (36x36), click or press shortcut to send message. Button turns gray and disabled when there is no content.
Keyboard Shortcuts
| Action | Default Shortcut |
|---|---|
| Send Message | Enter |
| New Line | Shift + Enter |
| Slash Commands | Input / to summon command panel |
| History Recall | Up Arrow recalls last sent message |
Slash Commands
Typing / in the input box pops up the command auto-completion panel, allowing you to quickly use:
/skill:skill_name— Call a specific skill/skill_name— Direct shortcut syntax to call a skill- Other built-in commands
Use up/down arrow keys to navigate, Tab or Enter to confirm selection, Esc to close the panel.
Images and Files
You can attach images in the following ways:
- Click the image button to select files
- Directly paste images into the input box (Ctrl/Cmd + V)
- Drag and drop images into the input area
- Drag files or folders onto the full chat area and release when it highlights to add attachments or working-directory references
Attached images are displayed as thumbnails above the input box. Hover to delete, click to preview larger image.
The "+" button adds files as path references — only telling the Agent where the file is; the image button is actual upload — the Agent can see the image content.
Message Action Bar
Hover over a message to show its action bar. On narrow layouts, labels collapse into icons to keep the controls on one line.
Message times use a compact display by default. Hover over a time to see the full local date and time including seconds, which is useful when checking cross-day or closely spaced execution records.
Common actions include:
- Copy plain text or Markdown
- Retry the previous response
- Edit a user message, including image attachments and deleting or reselecting document references already attached to that message
- Read a message aloud
- Select multiple messages and export them
- Rewind to the checkpoint before a user message