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

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

安装

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

使用量

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

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

道具

ThinkingResponseData 形状

每个项目在 orchestratorAndAgentsMessages 应符合:

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
}

完整示例

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.

基本用途

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

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

1. 集装箱型式

控制组件的外包.

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}你觉得呢 示例

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}你觉得呢

示例

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}你觉得呢 示例

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 完整示例

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'
      }
    }
  }
};

同伴依赖关系

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

仓库

github.com/Techolution/e-llm-studio-lib (英语)

许可证

麻省理工学院