# @e-llm-studio/requirement-ai 中文文档

规范地址：https://npmcn.com/package/%40e-llm-studio/requirement-ai/

版本：0\.0\.382
npm 元数据更新时间：2026-11-11T13:06:48.063Z
中文译文更新时间：2026-11-13T03:03:48.882Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40e-llm-studio/requirement-ai
原文对照：https://npmcn.com/package/%40e-llm-studio/requirement-ai/?lang=original
项目主页：https://github.com/Techolution/e-llm-studio-lib#readme
源码仓库：https://github.com/Techolution/e-llm-studio-lib

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

- 包体积（解压后）：3.3 MB，2160 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：29 个
- peer 依赖：react \>=16\.8\.0 \<19\.0\.0，video\.js ^8\.23\.7，react-dom \>=16\.8\.0 \<19\.0\.0，pdfjs-dist ^3\.11\.174，highlight\.js ^11\.11\.1，react-player ^3\.4\.0，react-reader ^2\.0\.13，@mui/material ^6\.5\.0，monaco-editor ^0\.55\.1，wavesurfer\.js ^7\.12\.1，@emotion/react ^11\.13\.5，@emotion/styled ^11\.13\.0，@mui/icons-material ^6\.5\.0，@monaco-editor/react ^4\.7\.0，@e-llm-studio/citation \>=0\.0\.190，@react-pdf-viewer/core ^3\.12\.0，@react-pdf-viewer/zoom ^3\.12\.0，@react-pdf-viewer/search ^3\.12\.0，@react-pdf-viewer/page-navigation ^3\.12\.0
- 首次发布：2026-03-16T18:44:52.390Z
- 最新版本发布：2026-11-11T13:06:47.846Z
- 近 30 天下载量：5981（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：375（近 12 个月 375 个）

## 中文简介

* * *

## 安装

```sh
npm install @e-llm-studio/requirement-ai
```

也可以使用：`pnpm add @e-llm-studio/requirement-ai`、`yarn add @e-llm-studio/requirement-ai`、`bun add @e-llm-studio/requirement-ai`

## README

# 要求AI 处理器

* * *

# 道具

| Prop | 类型 |
| --- | --- |
| 用户故事 | `IUserStory | null` |
| 用户故事 | `React.Dispatch<React.SetStateAction<IUserStory | null>>` |
| 爱因斯坦语 | `TAIReasoning[]` |
| 设置 | `React.Dispatch<React.SetStateAction<TAIReasoning[]>>` |
| 引用 | `UserStoryCitations[]` |
| 设置 | `React.Dispatch<React.SetStateAction<UserStoryCitations[]>>` |
| 儿童 | `ReactNode` |

* * *

# 数据结构

## 用户故事

```ts
export interface IUserStory {
  artifactId: string;
  title: string;
  value: string;
  sub_features?: IUserStory[];

  storyNumber?: string;
  description?: string;
  section?: "intro" | "subfeature";
  blockNumber?: string;

  citation?: UserStoryCitations;
  aiReasoning?: TAIReasoning[];

  isEnd?: boolean;
}
```

* * *

## 针锋相对

```ts
export type TAIReasoning = {
  id: string;
  reason: string;
  gap: string;
  relevance_score: number;
  reasonSource?: string;
  gapSource?: string;
  isOpen?: boolean;
  relevance_score_diff?: number;
  explanation?: string;
};
```

* * *

## 用户故事

```ts
export type UserStoryCitations = {
  image_citations?: ImageCitation[];
  appmod_citations?: TextCitation[];
  audio_citations?: AudioCitation[];
  file_citations?: FileCitation[];
  file_image_data?: ImageCitationsForFile | null;
  rca_citations?: RcaCitation[];
  web_citations?: WebCitation[];
  code_generated?: GeneratedCodeCitation[];
};
```

* * *

## 图像选择文件

```ts
interface ImageCitationsForFile {
  [key: string]: FileImageData;
}
```

* * *

## 文件图像数据

```ts
interface FileImageData {
  filename: string;
  signed_url: string;
  gs_url: string;
}
```

* * *

# 使用量

## 创建状态

```tsx
const [userStory, setUserStory] = useState<IUserStory | null>(null);

const [aiReasoning, setAiReasoning] = useState<TAIReasoning[]>([]);

const [citations, setCitations] = useState<UserStoryCitations[]>([]);
```

* * *

## 环绕组件

```tsx
<RequirementAIWrapper
  userStory={userStory}
  setUserStory={setUserStory}
  aiReasoning={aiReasoning}
  setAiReasoning={setAiReasoning}
  citations={citations}
  setCitations={setCitations}
>
  {children}
</RequirementAIWrapper>
```

* * *

# 上下文值

包装提供了以下上下文值:

```ts
{
  (userStory,
    setUserStory,
    aiReasoning,
    setAiReasoning,
    citations,
    setCitations);
}
```

# 使用量

```tsx
import { useStreamContentHandler } from "@e-llm-studio/requirement-ai";

function StreamingComponent() {
  const { processStreamContent } = useStreamContentHandler({
    setUserStory,
    setAiReasoning,
    setUserStoryCitations,
    onStreamingCompleted,
    isGraphQLCallInProgress,
    knowledgeBase,
    projectAnalyserSummary,
    dataSourceFiles,
    aiReasoning,
    setRedisValue,
    fetchCitationByBlock,
  });

  const handleStream = (blockList) => {
    processStreamContent(blockList, metadata, "story-artifact-id");
  };

  return <div>Streaming...</div>;
}
```

* * *

# 虎克 API

## 使用Stream ContentHandler(道具)

### 回返

```ts
{
  processStreamContent: (
    blockList: BlockStreamItem[],
    customMetadata: any,
    storyArtifactID: string
  ) => void
}
```

* * *

# 道具

## 用户故事

反应状态设置器用于存储生成的用户故事.

```ts
React.Dispatch<React.SetStateAction<IUserStory[]>>;
```

* * *

## 设置

国家设置器用来存储提取的AI推理.

```ts
React.Dispatch<React.SetStateAction<TAIReasoning[]>>;
```

* * *

## 用户的故事

用于存储从块生成的引用的状态设置器 .

```ts
React.Dispatch<React.SetStateAction<UserStoryCitations>>;
```

* * *

## 已安装完成

召回一次执行 **所有引用生成任务已完成**。 。 。 .

```ts
(gap_items_prompt?: string, risk_items_prompt?: string) => Promise<void>;
```

* * *

## 是 GraphQLCall 在进步中

显示 GraphQL 调用是否正在运行的布尔旗 .

这使得完成回调不能过早地发射.

```ts
boolean;
```

* * *

## 知识库

与当前流相关的知识基础元数据.

```ts
any;
```

* * *

## 分析器概要

处理过程中使用的项目分析摘要.

```ts
any;
```

* * *

## 数据源文件

关于上传数据源文件的信息.

```ts
{
  document: string[];
  image: string[];
  meetingRecording: string[];
}
```

* * *

## 爱因斯坦语

现有AI推理状态.

```ts
TAIReasoning[]
```

* * *

## 设置重置值

负责在 Redis 存储流状态的函数 .

```ts
<T>({ key, value }: SetRedisParams<T>) => Promise<any>;
```

实施实例:

```ts
async function setRedisValue({ key, value }) {
  await redis.set(key, JSON.stringify(value));
}
```

* * *

## 获取 CitationByBlock

Async 函数负责生成给定块的引用 .

```ts
(block: BlockStreamItem, metadata: any, ai_reasonings: TAIReasoning[]) =>
  Promise<IGetCitationsByBlock>;
```

* * *

# 类型

## 块结构项目

代表一个串行的AI块.

```ts
type BlockStreamItem = {
  title: string;
  section: "intro" | "subfeature";
  description?: string;
  blockNumber: string;
  value: string;
  storyNumber: string;
};
```

* * *

# 流动

```
AI Stream
   ↓
Block List
   ↓
processStreamContent
   ↓
Reasoning Extraction
   ↓
User Story Generation
   ↓
Citation Generation
   ↓
Redis Persistence
   ↓
Streaming Completed Callback
```

* * *

# 内部保障

钩子包括几种优化流出性能的机制:

| 机制 | 目的 |
| --- | --- |
| 更新 CitationCallKeys 参考文献 | 防止重复引用请求 |
| 引用Generation 完成键 | 音轨已完成引用任务 |
| 上次处理的 BlockListHash 参考文献 | 避免后处理相同的区块清单 |
| 最后一个Redisvalue 注释 | 防止冗余 Redis 写入 |

* * *

# 最佳做法

-   保证 `fetchCitationByBlock` 是无能的.
-   避免频繁打来 `processStreamContent` 没有批量.
-   总是使用 JSON 序列化 Redis 值 .

* * *

# 用户史克林组件

用于显示和编辑用户故事并带有AI推理引用的可调和的UI组件系统. 它必须包裹在内 `RequirementAIWrapper` 进入共享状态.

## 快速演示

```tsx
import React, { useState } from "react";
import RequirementAIWrapper from "@e-llm-studio/requirement-ai";
import UserStoryScreen from "@e-llm-studio/requirement-ai";
import UserStoryWithCitations from "@e-llm-studio/requirement-ai";
import RichTextEditor from "@e-llm-studio/requirement-ai";
import AtomicButton from "@e-llm-studio/requirement-ai";

function MyStoryApp() {
  const [userStory, setUserStory] = useState<IUserStory[]>([
    {
      artifactId: "story-1",
      title: "User Login",
      value: "As a user, I want to login to the system",
    },
  ]);

  const [aiReasoning, setAiReasoning] = useState<TAIReasoning[]>([]);
  const [citations, setCitations] = useState<UserStoryCitations[]>([]);

  return (
    <RequirementAIWrapper
      userStory={userStory}
      setUserStory={setUserStory}
      aiReasoning={aiReasoning}
      setAiReasoning={setAiReasoning}
      citations={citations}
      setCitations={setCitations}
      apiCachingConfig={{
        queryClient: null, // replace with original tanstack-query client
        useGetSignedUrlQuery: (gsUtilPath: string, cacheKey: string[]) => null, // replace with original hook
        useGetSignedUrlMutation: (gsUtilPath: string) => null, // replace with original hook
        useExtractAudioPeaksMutation: () => null, // replace with original hook
        useExtractAudioPeaksQuery: (gsUtilPath: string, cacheKey: string[]) => null, // replace with original hook
        useGetVideoSignedUrlMutation: (gsUtilPath: string) => null, // replace with original hook
        useGetVideoSignedUrlQuery: (gsUtilPath: string, cacheKey: string[]) => null, // replace with original hook
      }}
    >
      <UserStoryScreen scenario="ready" isCitationLoadingNotStarted={true}>
        <UserStoryScreen.Content AtomicButton={AtomicButton}>
          <UserStoryScreen.Body>
            <UserStoryScreen.Story Component={UserStoryWithCitations} />
            <UserStoryScreen.Editor Component={RichTextEditor} />
            <UserStoryScreen.SubFeatures />
          </UserStoryScreen.Body>
          <UserStoryScreen.ScrollButton />
        </UserStoryScreen.Content>
      </UserStoryScreen>
    </RequirementAIWrapper>
  );
}
```

## 核心子组成部分

| 构成部分 | 目的 |
| --- | --- |
| `UserStoryScreen.Sidebar` | 故事选择的导航侧边栏 |
| `UserStoryScreen.SidebarToggle` | 折叠/扩展侧边栏按钮 |
| `UserStoryScreen.Content` | 主要内容有标题和控件 |
| `UserStoryScreen.Body` | 故事/编辑容器(相互排除) |
| `UserStoryScreen.Story` | 以引用( 读取模式) 显示选中的故事 |
| `UserStoryScreen.Editor` | 编辑故事的丰富文本编辑器( 编辑模式) |
| `UserStoryScreen.SubFeatures` | 嵌入子地块的受体 |
| `UserStoryScreen.ScrollButton` | 向下滚动的浮动按钮 |

## 根道具

```ts
interface UserStoryScreenProps {
  scenario: "streaming" | "ready"; // "streaming" for real-time, "ready" for static
  isCitationLoadingNotStarted: boolean; // Flag for citation loading state
  children: React.ReactNode; // Sub-components
  classNames?: UserStoryScreenClassNames; // Optional custom CSS classes
}
```

## 关键特性

-   **自动国家管理**: 所有组件从 `RequirementAIWrapper` 上下文
-   **相互排斥**: 故事和编辑器视图自动为专属
-   **流程支持**: 有骨架加载器的实时更新
-   **引用整合**: AI 故事中强调的推理和引用
-   **标记下方支持**: 故事支持自定义标记下标记格式

## 用法说明

1.  **总是用 `RequirementAIWrapper`** - 为所有子组成部分提供上下文
2.  **使用 `Body` 包装** - 确保适当的故事/编辑相互排斥
3.  **通过自定义组件** - 故事和编辑器期望将反应组件作为道具
4.  **正确设定情景** - 实时数据的"流",静态内容的"已就绪"

* * *

# 用户Story核准Screen组件

用于审查和批准AI生成的用户故事的专用审批工作流程组件. 它必须包裹在内 `RequirementAIWrapper` 进入共享状态.

## 概览

用户StoryApprovalScreen提供了一个结构化的界面,用于:

-   逐块审查生成的用户故事
-   编辑单个内容部分
-   逐步核准内容
-   管理具有删除能力的子特征
-   带有“ 全部验证” 功能的批量审批

## 快速演示

```tsx
import React, { useState } from "react";
import RequirementAIWrapper from "@e-llm-studio/requirement-ai";
import UserStoryApprovalScreen from "@e-llm-studio/requirement-ai";
import UserStoryWithCitations from "@e-llm-studio/requirement-ai";
import RichTextEditor from "@e-llm-studio/requirement-ai";
import AtomicButton from "@e-llm-studio/requirement-ai";

function MyApprovalFlow() {
  const [userStory, setUserStory] = useState<IUserStory[]>([]);
  const [aiReasoning, setAiReasoning] = useState<TAIReasoning[]>([]);
  const [citations, setCitations] = useState<UserStoryCitations[]>([]);

  return (
    <RequirementAIWrapper
      userStory={userStory}
      setUserStory={setUserStory}
      aiReasoning={aiReasoning}
      setAiReasoning={setAiReasoning}
      citations={citations}
      setCitations={setCitations}
      apiCachingConfig={{
        queryClient: null, // replace with original tanstack-query client
        useGetSignedUrlQuery: (gsUtilPath: string, cacheKey: string[]) => null, // replace with original hook
        useGetSignedUrlMutation: (gsUtilPath: string) => null, // replace with original hook
        useExtractAudioPeaksMutation: () => null, // replace with original hook
        useExtractAudioPeaksQuery: (gsUtilPath: string, cacheKey: string[]) => null, // replace with original hook
        useGetVideoSignedUrlMutation: (gsUtilPath: string) => null, // replace with original hook
        useGetVideoSignedUrlQuery: (gsUtilPath: string, cacheKey: string[]) => null, // replace with original hook
      }}
    >
      <UserStoryApprovalScreen
        artifactTitleIds={["STORY-001"]}
        config={{
          showApproveAllButton: true,
          allowEditing: true,
          allowDeletion: true,
          containerHeight: "calc(100vh - 100px)",
        }}
        callbacks={{
          onShowNotification: (type, title, message) => {
            console.log(`[${type}] ${title}: ${message}`);
          },
          onInitialize: () => {
            console.log("Approval screen initialized");
          },
          onSaveState: async (stories) => {
            await saveToRedis(stories);
          },
          onAllApproved: async (stories) => {
            await submitApprovedStories(stories);
          },
        }}
      >
        <UserStoryApprovalScreen.Content ButtonComponent={AtomicButton}>
          <UserStoryApprovalScreen.Body
            EditorComponent={RichTextEditor}
            ViewerComponent={UserStoryWithCitations}
          />
        </UserStoryApprovalScreen.Content>
      </UserStoryApprovalScreen>
    </RequirementAIWrapper>
  );
}
```

## 构成部分结构

| 构成部分 | 目的 |
| --- | --- |
| `UserStoryApprovalScreen` (旋转) | 经批准的国家管理集装箱 |
| `UserStoryApprovalScreen.Content` | 标题、元数据以及“ 证明全部” 按钮的标题 |
| `UserStoryApprovalScreen.Body` | 有编辑/批准/删除动作的渲染内容段 |

* * *

## 根组件道具

```ts
interface UserStoryApprovalScreenProps {
  artifactTitleIds: string[]; // Display IDs for each story
  config?: UserStoryApprovalScreenConfig; // Feature toggles
  callbacks?: UserStoryApprovalScreenCallbacks; // Platform-specific handlers
  labels?: Partial<UserStoryApprovalScreenLabels>; // Custom text labels
  isDisabled?: boolean; // Disable all interactions
  children: React.ReactNode; // Sub-components
  classNames?: UserStoryApprovalScreenClassNames; // Custom CSS classes
}
```

## 配置选项

```ts
interface UserStoryApprovalScreenConfig {
  showApproveAllButton?: boolean; // Show/hide "Approve All" button (default: true)
  allowEditing?: boolean; // Enable editing segments (default: true)
  allowDeletion?: boolean; // Enable deleting sub-features (default: true)
  showSidebar?: boolean; // Show sidebar for multi-story navigation (default: false)
  containerHeight?: string; // CSS height value (default: "calc(100vh - 100px)")
  useFullWidth?: boolean; // Use 100% width without margins (default: false)
}
```

## 回调处理器

```ts
interface UserStoryApprovalScreenCallbacks {
  /** Show toast/notification - required for user feedback */
  onShowNotification?: (
    type: "success" | "error" | "warn" | "info",
    title: string,
    message: string,
    duration?: number,
  ) => void;

  /** Initialize platform (e.g., adjust chat width in web app) */
  onInitialize?: () => void;

  /** Persist approval state to Redis/storage */
  onSaveState?: (stories: IUserStoryForApproval[]) => Promise<void>;

  /** Triggered when all stories are approved */
  onAllApproved?: (stories: IUserStoryForApproval[]) => Promise<void>;

  /** Custom scroll behavior for focusing segments */
  onScrollToElement?: (element: HTMLElement) => void;
}
```

## 访问上下文

使用 `useRequirementAI()` 用户StoryScreen组件中的钩子 :

```tsx
import { useRequirementAI } from "@e-llm-studio/requirement-ai";

function MyCustomComponent() {
  const { userStory, setUserStory, aiReasoning } = useRequirementAI();
  return <div>{userStory?.[0]?.title}</div>;
}

```

* * *

## Diff 编辑工具 — 用法指南

### 1\. 联合国. `handleDiffEditApplied`

应用AI diff对用户故事,推理,聊天历史的响应.

```ts
handleDiffEditApplied(
  aiResponseString,
  selectedUserStoryType,
  username,
  setUserStory,
  setAiReasoning,
  setAiReasoningDiffView,
  setChatHistory,
  setUserStoryDiffView
);
```

**使用时 :**

-   你收到AI diff编辑的答复
-   您想要更新用户界面的新故事、 推理和聊天

* * *

### 2\. 联合国. `handleDiscardAll`

拒绝所有 diff 更改并恢复原始状态.

```ts
handleDiscardAll(
  userStory,
  setUserStory,
  setAiReasoning,
  setUserStoryDiffView
);
```

**使用时 :**

-   用户点击 **“丢弃所有更改”**
-   您想要恢复到原始内容

* * *

### 3个. `handleAcceptAllChanges`

接受所有 diff 更改并更新用户故事 .

```ts
handleAcceptAllChanges(
  userStory,
  setUserStory,
  setIsAutoSaveEnabled
);
```

## 许可证

这个图书馆根据麻省理工学院的许可证发行. 详见LICENSE文件.

许可证信息也可在下列表格中查阅: `citation/package.json` 在“许可证”栏下的文件.

## 常见问题

### 如何安装 @e-llm-studio/requirement-ai？

在项目目录运行 npm install @e-llm-studio/requirement-ai，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8\.0 \<19\.0\.0）、react-dom（\>=16\.8\.0 \<19\.0\.0）、@mui/material（^6\.5\.0）、monaco-editor（^0\.55\.1）、@emotion/react（^11\.13\.5）、@emotion/styled（^11\.13\.0）、@react-pdf-viewer/core（^3\.12\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @e-llm-studio/requirement-ai 支持 TypeScript 吗？

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

### @e-llm-studio/requirement-ai 支持 ESM 还是 CommonJS？

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

### @e-llm-studio/requirement-ai 可以商用吗？

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

### @e-llm-studio/requirement-ai 的下载量有多少？

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

### @e-llm-studio/requirement-ai 还在维护吗？

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