# @e-llm-studio/watch-me-work 中文文档

规范地址：https://npmcn.com/package/%40e-llm-studio/watch-me-work/

版本：0\.0\.30
npm 元数据更新时间：2026-11-02T11:18:08.687Z
中文译文更新时间：2026-11-13T03:05:45.382Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40e-llm-studio/watch-me-work
原文对照：https://npmcn.com/package/%40e-llm-studio/watch-me-work/?lang=original
项目主页：https://github.com/Techolution/bpa-ai/tree/dev/packages/frontend/features/watch-me-work#readme
源码仓库：https://github.com/Techolution/bpa-ai

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：9.2 MB，40 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=16\.8\.0 \<19\.0\.0，react-dom \>=16\.8\.0 \<19\.0\.0
- 首次发布：2026-03-17T15:38:54.755Z
- 最新版本发布：2026-11-02T11:18:08.495Z
- 近 30 天下载量：2637（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 30 个）

## 中文简介

可再用 React 组件,用于可视化多代理推理进度.

## 安装

```sh
npm install @e-llm-studio/watch-me-work
```

也可以使用：`pnpm add @e-llm-studio/watch-me-work`、`yarn add @e-llm-studio/watch-me-work`、`bun add @e-llm-studio/watch-me-work`

## README

# @e-llm-studio/watch-我的工作

一个使多剂管弦乐的活生生的动画取景的React组件库——显示每个代理的思维步骤,流出状态,以及相撞手风琴UI所花的时间.

* * *

## 安装

```bash
npm install @e-llm-studio/watch-me-work
```

* * *

## 使用量

```tsx
import { WatchMeWork } from '@e-llm-studio/watch-me-work';

<WatchMeWork
  orchestratorAndAgentsMessages={message?.orchestratorAndAgentsMessages}
  isStreamEnd={isStreamEnd}
  finalTimeTaken={message?.finalTimeTaken}
/>
```

* * *

## 道具

| Prop | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `orchestratorAndAgentsMessages` | `ThinkingResponseData[]` | 对 | 作为步骤的代理信件阵列 |
| `isStreamEnd` | `boolean` | 对 | 溪流是否已完成 。 控制步骤定稿和定时器停止 |
| `finalTimeTaken` | `number` | 对 | 流结束后显示的总时间( 秒) |
| `thinkingStartTime` | `number | null` | 备选 | 思考开始时的时标 (ms). 用于已过期计时器 |
| `streamEndTime` | `number | null` | 备选 | 溪流结束的时间戳( ms) |
| `storeTime` | `number` | 备选 | 用于存储时标的时标(秒) |

* * *

## `ThinkingResponseData` 形状

每个项目在 `orchestratorAndAgentsMessages` 应符合:

```ts
interface ThinkingResponseData {
  responseFrom: string;         // Agent or orchestrator name
  responseMessage?: string;     // Optional message string
  header_message: string;       // Step label shown in the accordion header
  finalResponseStatus: boolean; // Whether this step has completed
  responsedata?: string;        // Markdown content shown in the expanded step body
}
```

* * *

## 完整示例

```tsx
import { WatchMeWork } from '@e-llm-studio/watch-me-work';

const agentMessages = [
  {
    responseFrom: 'orchestrator',
    header_message: 'Analyzing your request...',
    finalResponseStatus: false,
    responsedata: '',
  },
  {
    responseFrom: 'search-agent',
    header_message: 'Fetching relevant documents',
    finalResponseStatus: true,
    responsedata: '**Found 3 relevant sources.** Summarizing content now.',
  },
];

export default function ChatMessage() {
  return (
    <WatchMeWork
      orchestratorAndAgentsMessages={agentMessages}
      isStreamEnd={false}
      finalTimeTaken={0}
      thinkingStartTime={Date.now()}
      streamEndTime={null}
      storeTime={undefined}
    />
  );
}
```

* * *

## 行为

-   虽然 `isStreamEnd` 实值 `false`显示特工工作的时间有多长.
-   每一步作为可折叠的手风琴一行使出一发闪光的动画在站头的标签上,同时该步骤正在进行.
-   何时 `finalResponseStatus` 实值 `true` 在步骤上,页眉会向表示完成的梯度样式过渡.
-   何时 `isStreamEnd` 变成 `true`,总时间(`finalTimeTaken`)显示并停止所有计时器.

* * *

## 样式

WatchMeWork是一个高度自定义的组件,用于渲染AI推理流,包括:

\* 思考指标 QQ 步骤细节视图( acordion) 多步骤代理时间表(Watch Me Work)

您可以使用自定义Styles prof来完全控制它的UI.

基本用途

```tsx
<WatchMeWork
  orchestratorAndAgentsMessages={data}
  isStreamEnd={true}
  finalTimeTaken={1200}
  customStyles={styles}
/>
```

QQ 自定义样式 自定义样式={ cSS 产品, 步骤详细, 斯特普斯探员 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

1\. 集装箱型式

控制组件的外包.

```ts
container: {
  border: '1px solid #E4E7EC',
  padding: '8px',
  borderRadius: '12px',
  background: '#F9FAFB'
}
```

^ 2. 步骤细节视图(Accordion)

用于展示单一推理步骤.

结构 步骤详情 : { 包装?: CSS Propertys 标题 : CSS Properties 步骤标签 ?: CSS Propertys cSS 产品 体内?: CSS Propertys 滚动 ?: CSS Propertys 切夫龙 cSS 产品 切夫龙西兹 车身: 字符串 mdCustom Styles?: (原始内容存档于2018-09-29) p?: CSS 产品 代码 ?: CSS Properties : CSS 产品 强?: CSS Propertys {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 示例

```ts
stepDetail: {
  header: {
    background: '#7F56D9',
    color: '#FFFFFF',
    padding: '6px 10px'
  },
  stepLabel: {
    color: '#FFFFFF', 
    fontWeight: 600
  },
  body: {
    background: '#F4EBFF'
  },
  bodyInner: {
    borderRadius: '10px'
  },
  scroll: {
    maxHeight: '300px'
  },
    mdCustomStyles: {
    p: {
      color: '#DC2626'
    },
    code: {
      color: '#2563EB',
      background: '#000'
    },
    pre: {
      background: '#111827',
      color: '#F9FAFB'
    }
  }
}
```

QQ 3. 代理步骤视图( 时间线)

显示多个推理步骤时使用.

结构 代理服务器 : { 包装?: CSS Propertys 标题 : CSS Properties 页眉内?: CSS Propertys 标签?: CSS Propertys 步骤列表 ?: CSS Propertys 步骤列表内涵 ?: CSS Propertys 步骤项目 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

示例

```ts
agentSteps: {
  wrapper: {
    border: '1px solid #D1FADF',
    borderRadius: '10px'
  },
  header: {
    background: '#ECFDF5',
    padding: '8px'
  },
  label: {
    color: '#065F46',
    fontWeight: 600
  },
  stepList: {
    background: '#F0FFF5'
  }
}
```

4\. 步骤项目(深入自定义)

控制时间范围内的单个步骤.

结构 步骤项目 : { 步骤Wrapper ?: CSS 特性 脚步?: CSS Propertys 脊椎骨? CSS 产品 脊椎线 内容库?: CSS Propertys 标题Row?: CSS Propertys 标题标签 ?: CSS Propertys 内容框 ?: CSS Properties 标记下框 ?: CSS Propertys cSS 产品 显示 MoreBtn ?: CSS Properties 点 : CSS Propertys md 扩展海关系统? : { p?: CSS 产品 代码 ?: CSS Properties : CSS 产品 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 示例

```ts

stepItem: {
  headerLabel: {
    color: '#101828'
  },
  spineLine: {
    background: '#22C55E'
  },
  markdownBox: {
    background: '#F9FAFB'
  },
  markdownInner: {
    color: '#667085'
  },
  showMoreBtn: {
    color: '#2563EB'
  },
  Dot: {
    width: '10px',
    backgroundColor: '#22C55E'
  },
    mdExpandedCustomStyles: {
    p: {
      color: '#7C3AED'
    },
    code: {
      color: '#06B6D4',
      background: '#000'
    },
    pre: {
      background: '#020617',
      color: '#E2E8F0'
    }
  }
}
```

QQ 完整示例

```ts

const styles = {
  container: {
    border: '2px solid #007AFF',
    background: '#EAF2FF',
    padding: '10px'
  },

  stepDetail: {
    header: {
      background: '#AF52DE',
      color: '#fff'
    },
    stepLabel: {
      color: '#fff'
    },
    body: {
      background: '#F9F0FF'
    },
    mdCustomStyles: {
      p: { color: 'red' },
      code: { color: 'blue' },
      pre: { background: 'black', color: 'white' }
    }
  },

  agentSteps: {
    wrapper: {
      border: '2px solid #34C759'
    },
    label: {
      color: '#065F46'
    },
    stepItem: {
      headerLabel: {
        color: '#101828'
      }
    }
  }
};
```

* * *

## 同伴依赖关系

```json
{
  "react": ">=16.8.0 <19.0.0",
  "react-dom": "^17.0.2"
}
```

* * *

## 仓库

[github.com/Techolution/e-llm-studio-lib (英语)](https://github.com/Techolution/e-llm-studio-lib)

* * *

## 许可证

麻省理工学院

## 常见问题

### @e-llm-studio/watch-me-work 是什么？

可再用 React 组件,用于可视化多代理推理进度\.

### 如何安装 @e-llm-studio/watch-me-work？

在项目目录运行 npm install @e-llm-studio/watch-me-work，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8\.0 \<19\.0\.0）、react-dom（\>=16\.8\.0 \<19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @e-llm-studio/watch-me-work 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @e-llm-studio/watch-me-work 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @e-llm-studio/watch-me-work 可以商用吗？

@e-llm-studio/watch-me-work 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @e-llm-studio/watch-me-work 的下载量有多少？

根据 npm 官方下载统计，@e-llm-studio/watch-me-work 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,637 次，日均约 88 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @e-llm-studio/watch-me-work 还在维护吗？

最新版本 0\.0\.30 发布于 2026/11/02（11 天前）；至今共发布 30 个版本，其中过去 12 个月发布了 30 个；首次发布于 2026/03/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。