integrate-atlas-chat

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Integrate Atlas Agent Chat

集成Atlas Agent聊天功能

Add a streaming Atlas Agent chat UI to this Dune app.

Agent external ID: $ARGUMENTS

为当前Dune应用添加流式Atlas Agent聊天UI。

Agent外部ID：$ARGUMENTS

Your job

你的任务

Complete these steps in order. Read each file before modifying it.

按顺序完成以下步骤。修改文件前请先阅读每个文件。

Step 1 — Understand the app

步骤1 — 了解应用

Read these files before touching anything:

```
package.json
```
— detect package manager (
```
packageManager
```
field or lock file) and existing deps
```
src/App.tsx
```
(or equivalent entry component) — understand current structure

在进行任何修改前，请先阅读以下文件：

```
package.json
```
— 检测包管理器（
```
packageManager
```
字段或锁文件）以及已有的依赖项
```
src/App.tsx
```
（或等效的入口组件） — 了解当前应用结构

Step 2 — Install dependencies

步骤2 — 安装依赖项

Install the package and its required peer deps using the app's package manager:

pnpm →

pnpm add "github:cognitedata/dune-industrial-components#semver:*" @sinclair/typebox ajv ajv-formats

npm →

npm install "github:cognitedata/dune-industrial-components#semver:*" @sinclair/typebox ajv ajv-formats

yarn →

yarn add "github:cognitedata/dune-industrial-components#semver:*" @sinclair/typebox ajv ajv-formats

使用应用对应的包管理器安装所需包及其对等依赖：

pnpm →

pnpm add "github:cognitedata/dune-industrial-components#semver:*" @sinclair/typebox ajv ajv-formats

npm →

npm install "github:cognitedata/dune-industrial-components#semver:*" @sinclair/typebox ajv ajv-formats

yarn →

yarn add "github:cognitedata/dune-industrial-components#semver:*" @sinclair/typebox ajv ajv-formats

Step 3 — Build the chat component

步骤3 — 构建聊天组件

Replace (or create) the main

App.tsx

with a full chat UI. The component must:

Import

useAtlasChat

and

ChatMessage

from

@cognite/dune-industrial-components/atlas-agent/react

Get the SDK via
```
useDune()
```
from
```
@cognite/dune
```
Pass
null
while loading —
```
client: isLoading ? null : sdk
```
Show streaming text in real time using
```
msg.isStreaming
```
with a blinking cursor
Show tool call events — when
```
progress.startsWith("Executing:")
```
, render it distinctly (e.g. a ⚙ icon + monospace tool name) so tool calls are clearly visible
Show tool calls — each assistant
```
message.toolCalls
```
(after streaming completes) should appear as expandable cards beneath the message
Abort button — show a "Stop" button while
```
isStreaming
```
, wired to
```
abort()
```
Reset button — "New chat" button wired to
```
reset()
```
Auto-scroll — scroll to bottom on new messages and progress updates
Auto-resize textarea — expand up to ~120px, submit on Enter, newline on Shift+Enter

替换（或创建）主

App.tsx

文件，实现完整的聊天UI。该组件必须满足以下要求：

导入

useAtlasChat

和

ChatMessage

从

@cognite/dune-industrial-components/atlas-agent/react

通过
```
@cognite/dune
```
中的
```
useDune()
```
获取SDK
加载时传入
null
—
```
client: isLoading ? null : sdk
```
实时显示流式文本 — 使用
```
msg.isStreaming
```
配合闪烁光标效果
显示工具调用事件 — 当
```
progress.startsWith("Executing:")
```
时，以独特样式渲染（例如⚙图标等宽字体工具名称），确保工具调用清晰可见
显示工具调用详情 — 助手消息的
```
message.toolCalls
```
（流式完成后）应显示为消息下方的可展开卡片
终止按钮 — 在
```
isStreaming
```
状态时显示“停止”按钮，绑定到
```
abort()
```
方法
重置按钮 — “新聊天”按钮绑定到
```
reset()
```
方法
自动滚动 — 新消息和进度更新时自动滚动到底部
自动调整大小的文本框 — 最大扩展至约120px，按Enter提交，Shift+Enter换行

Key hook API

核心钩子API

import { useAtlasChat } from "@cognite/dune-industrial-components/atlas-agent/react";
import type { ChatMessage } from "@cognite/dune-industrial-components/atlas-agent/react";

const { messages, send, isStreaming, progress, error, reset, abort } = useAtlasChat({
  client: isLoading ? null : sdk,   // null-safe — hook waits for a real client
  agentExternalId: "...",
  tools?: AtlasTool[],              // optional client-side tools
});

// messages[n].role          — "user" | "assistant"
// messages[n].text          — full text (streams chunk-by-chunk via isStreaming)
// messages[n].isStreaming   — true while this message is being written
// messages[n].toolCalls     — ToolCall[] once response is complete (client + server-side, in call order)
// progress                  — e.g. "Agent thinking" or "Executing: get_timeseries"
// isStreaming               — true for the entire duration of a response

import { useAtlasChat } from "@cognite/dune-industrial-components/atlas-agent/react";
import type { ChatMessage } from "@cognite/dune-industrial-components/atlas-agent/react";

const { messages, send, isStreaming, progress, error, reset, abort } = useAtlasChat({
  client: isLoading ? null : sdk,   // 空值安全——钩子会等待真实客户端实例
  agentExternalId: "...",
  tools?: AtlasTool[],              // 可选的客户端工具
});

// messages[n].role          — "user" | "assistant"
// messages[n].text          — 完整文本（通过isStreaming逐块流式传输）
// messages[n].isStreaming   — 当该消息正在生成时为true
// messages[n].toolCalls     — 响应完成后的ToolCall[]（客户端和服务器端，按调用顺序）
// progress                  — 例如"Agent thinking"或"Executing: get_timeseries"
// isStreaming               — 在整个响应过程中为true

Tool call display pattern

工具调用显示示例

tsx

// During streaming — show as a distinct "tool call" bubble above the message
{isStreaming && progress?.startsWith("Executing:") && (
  <div>⚙ {progress}</div>
)}

// After response — show tool calls on the assistant message
{msg.toolCalls?.map((tc, i) => (
  <ToolResult key={i} name={tc.name} output={tc.output} details={tc.details} />
))}

tsx

// 流式传输期间——在消息上方显示独特的“工具调用”气泡
{isStreaming && progress?.startsWith("Executing:") && (
  <div>⚙ {progress}</div>
)}

// 响应完成后——在助手消息上显示工具调用详情
{msg.toolCalls?.map((tc, i) => (
  <ToolResult key={i} name={tc.name} output={tc.output} details={tc.details} />
))}

Step 4 — Python tools (optional)

步骤4 — Python工具（可选）

If the agent has Python tools (type

runPythonCode

in its CDF config), run the

setup-python-tools

skill to add Pyodide-based client-side execution:

/setup-python-tools $ARGUMENTS

That skill installs

pyodide

, sets up

usePyodideRuntime

, and wires the runtime into

useAtlasChat

via

pythonRuntime

. The library fetches Python tool code from the agent config automatically — no

PythonToolConfig

entries needed.

You don't need this if the agent only uses built-in or regular client tools.

如果Agent在其CDF配置中包含Python工具（类型为

runPythonCode

），请运行

setup-python-tools

技能以添加基于Pyodide的客户端执行功能：

/setup-python-tools $ARGUMENTS

该技能会安装

pyodide

，设置

usePyodideRuntime

，并通过

pythonRuntime

将运行时连接到

useAtlasChat

。库会自动从Agent配置中获取Python工具代码——无需手动添加

PythonToolConfig

条目。

如果Agent仅使用内置工具或常规客户端工具，则无需此步骤。

Done

完成

Start the app and you should see a streaming chat UI connected to Atlas Agent

$ARGUMENTS

启动应用后，你将看到连接到Atlas Agent

$ARGUMENTS

的流式聊天UI。