integrate-atlas-chat

集成 Atlas Agent 聊天

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

Agent 外部 ID：$ARGUMENTS

你的任务

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

---

步骤 1 — 了解应用

开始操作前先阅读以下文件：

• package.json — 检查包管理器（packageManager 字段或锁文件）和现有依赖项
• src/App.tsx（或等效入口组件）— 了解当前结构

---

步骤 2 — 安装依赖项

使用应用的包管理器安装该包及其必需的同级依赖项：

• 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

---

步骤 3 — 构建聊天组件

将主 App.tsx 替换为（或新建）完整的聊天 UI。该组件必须：

1. 导入 useAtlasChat 和 ChatMessage，来源为 @cognite/dune-industrial-components/atlas-agent/react
2. 通过 @cognite/dune 中的 useDune() 获取 SDK
3. 加载期间传入 null — client: isLoading ? null : sdk
4. 使用 msg.isStreaming 实时显示流式文本，并显示闪烁光标
5. 显示工具调用事件 — 当 progress.startsWith("Executing:") 时，以不同样式呈现（例如，使用 ⚙ 图标和等宽字体显示工具名称），让工具调用清晰可见
6. 显示工具调用 — 流式传输完成后，每条助手 message.toolCalls 都应以可展开卡片的形式显示在消息下方
7. 中止按钮 — 当 isStreaming 时显示 “Stop” 按钮，并将其绑定到 abort()
8. 重置按钮 — 添加绑定到 reset() 的 “New chat” 按钮
9. 自动滚动 — 有新消息或进度更新时滚动到底部
10. 文本区域自动调整大小 — 高度最多扩展到约 120px，按 Enter 提交，按 Shift+Enter 换行

Hook 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

工具调用显示模式

// 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} />
))}

---

步骤 4 — Python 工具（可选）

如果该 Agent 有 Python 工具（在其 CDF 配置中存在 runPythonCode 类型），运行 setup-python-tools 技能以添加基于 Pyodide 的客户端执行：

/setup-python-tools $ARGUMENTS

该技能会安装 pyodide、设置 usePyodideRuntime，并通过 pythonRuntime 将运行时接入 useAtlasChat。该库会自动从 Agent 配置中获取 Python 工具代码，无需添加 PythonToolConfig 条目。

如果该 Agent 仅使用内置工具或常规客户端工具，则无需执行此操作。

---

完成

启动应用后，你应该会看到一个连接到 Atlas Agent $ARGUMENTS 的流式聊天 UI。