@infinilabs/ai-chat 0.0.0 → 0.0.2

package/README.md

@@ -1,81 +1,335 @@
 # @infinilabs/ai-chat
 
-这是一个 AI Chat 组件库，用于在 React 应用中集成 AI 聊天功能。
+一个「开箱即用」的 AI Chat 组件库，用于在 React 应用中快速集成带有：
 
-## 项目简介
+- 会话历史列表（选择、重命名、删除、刷新、搜索）
+- 小助手列表（选择、翻页、搜索）
+- AI 聊天区域（支持流式回答、思考过程展示、引用来源等）
 
-1. 项目是 pnpm 项目，执行命令需要用 pnpm
-2. 项目是 AI Chat 组件库，最后是需要 pnpm build 之后部署发布 npm 库的
+---
 
-## 对外的参数
+## 安装与构建
+
+- 项目使用 pnpm 进行依赖管理和构建。
+- 最终以 npm 包形式对外发布。
+
+```bash
+pnpm add @infinilabs/ai-chat
+```
+
+### Peer Dependencies
+
+在使用本组件库之前，请确保你的项目中安装了以下依赖（通常这些也是你项目的基础依赖）：
+
+- `react` >= 18.3.1
+- `react-dom` >= 18.3.1
+- `antd` >= 6
+
+本包默认内置：
+
+- React 组件 + Zustand 状态管理
+- Tailwind v4 + 一套内置样式（JS 自动注入，无需手动引入 CSS）
+- `react-i18next` 国际化配置（中英文文案）
+- 依赖 `antd` 的 `message` 组件做操作反馈
+- `axios`, `dayjs`, `lucide-react` 等工具库
+
+开发与构建：
+
+```bash
+pnpm dev     # 本地开发预览
+pnpm build   # 构建 npm 产物（dist）
+pnpm lint    # 代码检查
+```
+
+---
+
+## 导出组件一览
+
+1. `Chat`：核心 AI 聊天区域（流式回答、思考过程、引用文档等）。
+2. `History`：会话历史列表（选择、重命名、删除、刷新、搜索）。
+3. `AssistantList`：小助手选择列表（支持翻页、搜索、限制 ID）。
+4. `ChatInput`：独立输入框组件（高级用法，可单独组合 UI）。
+
+通常推荐的组合方式是：左侧 `AssistantList + History`，右侧 `Chat`。
+
+---
+
+## 快速开始示例
+
+一个最小可用的布局示例（假设你已经在后端实现了对应的接口，见后文「后端接口约定」）：
+
+```tsx
+import { useRef } from "react";
+import {
+  Chat,
+  History,
+  AssistantList,
+} from "@infinilabs/ai-chat";
+
+// Chat 组件内部的 ref 方法定义（仅类型示意，见下文详细说明）
+interface ChatAIRef {
+  init: (params: { message?: string; attachments?: string[] }) => void;
+  cancelChat: () => void;
+  clearChat: () => void;
+}
+
+function AIChatApp() {
+  const chatRef = useRef<ChatAIRef | null>(null);
+
+  const BaseUrl = "https://your-api-endpoint.example.com";
+  const Token = "your-api-token";
+
+  return (
+    <div className="flex h-full">
+      <div className="w-72 border-r flex flex-col gap-3 p-3">
+        <AssistantList BaseUrl={BaseUrl} Token={Token} />
+        <History BaseUrl={BaseUrl} Token={Token} />
+      </div>
+
+      <div className="flex-1 flex flex-col p-3">
+        <Chat ref={chatRef} BaseUrl={BaseUrl} />
+      </div>
+    </div>
+  );
+}
+```
+
+要点说明：
+
+- 必须提供后端 HTTP 地址 `BaseUrl`，用于请求 `/chat/*`、`/assistant/*` 等接口。
+- 如果后端需要鉴权，可以通过 `Token` 传入 `History`（下文有解释）。
+- `Chat` 组件通过 `ref` 暴露方法来发送消息、取消对话等。
+- 历史、助手列表和 Chat 使用一个共享的 Zustand store 做状态同步。
+
+---
+
+## Chat 组件
+
+### Props 定义
 
-1. 需要获取历史数据的方法，支持组件内部调用获取数据
 ```ts
-const [_error, res] = await Get(`/chat/_history`, {
-    from: 0,
-    size: 100,
-});
+interface ChatAIProps {
+  BaseUrl: string;
+  Token?: string;
+  formatUrl?: (data: IChunkData) => string;
+  locale?: string;
+  t?: TFunction;
+}
 ```
-2. 需要删除历史记录的方法，支持组件内部调用操作数据
-3. 需要获取小助手列表数据的方法，支持组件内部调用获取数据
-4. 需要创建新的会话的方法，支持组件内部调用获取第一次聊天的数据
+
 ```ts
-await streamPost({
-    url: "/chat/_create",
-    body: { message },
-    queryParams,
-    onMessage: (line) => {
-    // console.log("⏳", line);
-    handleChatCreateStreamMessage(line);
-    // append to chat box
-    },
-});
+export interface IChunkData {
+  message_chunk?: string;
+  [key: string]: unknown;
+}
 ```
-5. 需要继续聊天的方法，支持组件内部调用获取继续聊天的数据
+
+### 必填 / 选填一览
+
+| Prop       | 是否必填 | 类型                              | 说明 |
+|-----------|----------|-----------------------------------|------|
+| `BaseUrl` | 必填     | `string`                          | 后端服务基础地址，例如 `https://api.example.com`。用于文件访问等。网络请求本身通过 localStorage 中的配置读取，见「后端接口约定」。 |
+| `Token`   | 选填     | `string`                          | 预留的鉴权 Token。当前版本主要通过 `History` 组件统一写入 localStorage 中的 `headers`，供所有请求复用。 |
+| `formatUrl` | 选填   | `(data: IChunkData) => string`    | 用于把引用文档等 chunk 数据转换为链接地址，传递给底层 `@infinilabs/chat-message`。 |
+| `locale`  | 选填     | `string`                          | 语言标识（如 `"en"`、`"zh"`）。不传时使用 `react-i18next` 默认语言。 |
+| `t`       | 选填     | `TFunction`                       | 自定义翻译函数；不传时使用组件内部的 `useTranslation`。 |
+
+注意：
+
+- `BaseUrl` 目前主要用接口请求，可以知道使用的哪个 coco-server 服务。
+
+### Ref 方法
+
 ```ts
-await streamPost({
-    url: `/chat/${newChat?._id}/_chat`,
-    body: { message },
-    queryParams,
-    onMessage: (line) => {
-    // console.log("line", line);
-    handleChatCreateStreamMessage(line);
-    // append to chat box
-    },
-});
+export interface SendMessageParams {
+  message?: string;
+  attachments?: string[];
+}
+
+export interface ChatAIRef {
+  init: (params: SendMessageParams) => void;
+  cancelChat: () => void;
+  clearChat: () => void;
+  onSelectChat: (chat: Chat) => void;
+}
 ```
-6. 需要取消聊天的方法，支持组件内部调用取消聊天
+
+方法说明：
+
+| 方法名         | 参数                         | 说明 |
+|----------------|------------------------------|------|
+| `init`         | `SendMessageParams`          | 发送一条消息：如果当前还没有会话，则创建新会话并调用 `/chat/_create`；如果有正在使用的会话，则调用 `/chat/{chatId}/_chat`。 |
+| `cancelChat`   | 无                           | 取消当前正在进行的回答，内部会请求 `/chat/{chatId}/_cancel?message_id={curId}`，并重置流式状态。 |
+| `clearChat`    | 无                           | 清空当前激活会话，在有 `_id` 时会调用 `/chat/{chatId}/_close`，然后清空 `activeChat`。 |
+| `onSelectChat` | `chat: Chat`                 | 手动选择一个会话作为当前会话。内部会自动拉取该会话的历史记录。 |
+
+`Chat` 内部使用了多个 Hook 来处理流式 chunk、思考过程、工具调用等（`useMessageChunkData`、`useMessageHandler`），并把这些数据传给 `ChatContent` 再由 `@infinilabs/chat-message` 渲染。
+
+---
+
+## History 组件
+
+### Props 定义
+
 ```ts
-const [_error, res] = await Post(
-    `/chat/${activeChat?._id}/_cancel?message_id=${curIdRef.current}`,
-    undefined
-);
+interface HistoryProps {
+  BaseUrl: string;
+  Token?: string;
+  locale?: string;
+  t?: TFunction;
+}
 ```
-7. 需要每个聊天会话都有历史记录，历史记录包含用户输入和小助手回复
+
+### 功能与行为
+
+- 初始化时根据 `BaseUrl`、`Token` 写入：
+  - `localStorage["app-store"] = { state: { endpoint_http: BaseUrl } }`
+  - `localStorage["headers"] = { "X-API-TOKEN": Token }`（仅当传入 `Token` 时）
+- 使用 `GET /chat/_history` 拉取会话列表并写入 Zustand store：
+  - 默认请求参数：`{ from: 0, size: 100, keyword }`
+  - 当没有当前激活会话时，会自动选中第一条。
+- 渲染内部的 `HistoryList`，支持：
+  - 搜索（关键字筛选）
+  - 手动刷新
+  - 选择会话
+  - 重命名会话（`PUT /chat/{chatId}`）
+  - 删除会话（`DELETE /chat/{chatId}`）
+
+### 使用示例
+
+```tsx
+import { History } from "@infinilabs/ai-chat";
+
+function Sidebar() {
+  return (
+    <History
+      BaseUrl="https://api.example.com"
+      Token="your-api-token"
+      locale="zh"
+    />
+  );
+}
+```
+
+推荐做法：
+
+- 统一通过 `History` 组件初始化 `BaseUrl` 和 `Token`，后续所有 `Get` / `Post` / `streamPost` 请求都会复用这两个配置。
+
+---
+
+## AssistantList 组件
+
+### Props 定义
+
 ```ts
-const [_error, res] = await Get(`/chat/${chat?._id}/_history`, {
-    from: 0,
-    size: 1000,
-});
-response = res;
+interface AssistantListProps {
+  BaseUrl: string;
+  Token?: string;
+  assistantIDs?: string[];
+  locale?: string;
+  t?: TFunction;
+}
+```
+
+注意：当前实现中，`BaseUrl`、`Token` 同样依赖 `axiosRequest.ts` 中从 localStorage 读取的配置，因此实际生效的仍然是 `History` 写入的值；在布局中同时使用 `History` 和 `AssistantList` 即可。
+
+### 功能与行为
+
+- 使用 `POST /assistant/_search` 获取小助手列表，支持：
+  - 分页：`current`（页码）、`pageSize`（每页数量，默认 10）
+  - 搜索：`keyword`
+  - 过滤：`ids`（通过 `assistantIDs` 传入一组助手 ID）
+- 将获取到的助手列表写入 Zustand store。
+- 当列表不为空且当前没有已选助手时，自动选择第一条。
+- 支持滚动加载更多（触底 + `hasMore` 控制）。
+- UI 方面：
+  - 顶部按钮显示当前助手 name 与 icon。
+  - 点击后浮层中展示搜索输入框 + 列表，可切换助手。
+
+### 使用示例
+
+```tsx
+import { AssistantList } from "@infinilabs/ai-chat";
+
+function AssistantSelector() {
+  return (
+    <AssistantList
+      BaseUrl="https://api.example.com"
+      Token="your-api-token"
+      assistantIDs={["assistant-1", "assistant-2"]}
+      locale="zh"
+    />
+  );
+}
 ```
-8. 需要打开聊天会话的方法，支持组件内部调用打开聊天会话
+
+`Chat` 组件在创建新会话时，会从 store 中读取当前助手的 `_id`，并作为 `assistant_id` 写入 `/chat/_create` 请求体。
+
+---
+
+## ChatInput 组件（可选）
+
+该组件内部已被 `Chat` 使用，一般不需要单独使用。如果你希望自定义布局、只复用输入框，可以单独引入：
+
 ```ts
-const [_error, res] = await Post(`/chat/${chat?._id}/_open`, {});
-response = res;
+interface ChatInputProps {
+  onSend: (params: SendMessageParams) => void;
+  disabled: boolean;
+  isChatMode: boolean;
+  inputValue: string;
+  changeInput: (val: string) => void;
+  isDeepThinkActive: boolean;
+  setIsDeepThinkActive: () => void;
+  chatPlaceholder?: string;
+  searchPlaceholder?: string;
+  returnToInputShortcut?: string; // 默认 "i"
+}
 ```
-9. 需要关闭聊天会话的方法，支持组件内部调用关闭聊天会话
+
+特性：
+
+- 自动高度 textarea。
+- 支持 Enter 发送、Shift+Enter 换行。
+- 支持「按 i 聚焦输入框」的快捷键提示。
+- 底部附加一些模式切换、深度思考开关等控制按钮。
+
+---
+
+## 类型定义汇总
+
 ```ts
-const [_error, res] = await Post(`/chat/${chat?._id}/_close`, {});
-response = res;
+export interface ChatMessageSource {
+  type: string;
+  assistant_id?: string;
+  message: string;
+  question?: string;
+  [key: string]: unknown;
+}
+
+export interface ChatMessageItem {
+  _id: string;
+  _source: ChatMessageSource;
+}
+
+export interface Chat {
+  _id: string;
+  messages?: ChatMessageItem[];
+  _source?: {
+    id?: string;
+    [key: string]: unknown;
+  };
+}
 ```
 
-## 包含组件
+你可以在自己的代码中根据需要复制这些接口，用于约束后端返回的数据结构。
+
+---
 
-1. 独立历史列表组件（支持选择、重命名、删除、刷新、搜索）
-2. 独立小助手列表组件（支持选择、翻页、搜索）
-3. 独立 AI Chat 聊天组件（组件会话渲染 采用 "@infinilabs/chat-message": "workspace:*" 这个组件）
+## 小结与推荐接入方式
 
-外部用户使用的时候，可以自由拼装，自己根据需要选择使用哪个组件。
+1. 在应用中引入 `AssistantList`、`History`、`Chat` 三个组件，组成完整的 AI Chat 页面。
+2. 使用 `History` 组件统一配置 `BaseUrl`、`Token`，确保所有请求都能访问到后端。
+3. 如需手动发送消息或控制对话流程，可以通过 `Chat` 的 `ref` 调用 `init`、`cancelChat`、`clearChat` 等方法。
+4. 如需深度定制 UI，仅复用其中部分组件（例如只用 `Chat` 或 `ChatInput`），也完全支持。
 
 

package/dist/_baseUniq-BFn6cCm9.js

@@ -0,0 +1,152 @@
+import { aO as Symbol$1, aH as isArray, aP as isArguments, aQ as arrayPush, aJ as identity, aE as baseEach, aR as arrayFilter, aG as baseIteratee, aS as Set, aT as setToArray, aU as SetCache, aV as cacheHas } from "./index-CjSgoo1P.js";
+function noop() {
+}
+function arrayEach(array, iteratee) {
+  var index = -1, length = array == null ? 0 : array.length;
+  while (++index < length) {
+    if (iteratee(array[index], index, array) === false) {
+      break;
+    }
+  }
+  return array;
+}
+function baseFindIndex(array, predicate, fromIndex, fromRight) {
+  var length = array.length, index = fromIndex + -1;
+  while (++index < length) {
+    if (predicate(array[index], index, array)) {
+      return index;
+    }
+  }
+  return -1;
+}
+function baseIsNaN(value) {
+  return value !== value;
+}
+function strictIndexOf(array, value, fromIndex) {
+  var index = fromIndex - 1, length = array.length;
+  while (++index < length) {
+    if (array[index] === value) {
+      return index;
+    }
+  }
+  return -1;
+}
+function baseIndexOf(array, value, fromIndex) {
+  return value === value ? strictIndexOf(array, value, fromIndex) : baseFindIndex(array, baseIsNaN, fromIndex);
+}
+function arrayIncludes(array, value) {
+  var length = array == null ? 0 : array.length;
+  return !!length && baseIndexOf(array, value, 0) > -1;
+}
+var spreadableSymbol = Symbol$1 ? Symbol$1.isConcatSpreadable : void 0;
+function isFlattenable(value) {
+  return isArray(value) || isArguments(value) || !!(spreadableSymbol && value && value[spreadableSymbol]);
+}
+function baseFlatten(array, depth, predicate, isStrict, result) {
+  var index = -1, length = array.length;
+  predicate || (predicate = isFlattenable);
+  result || (result = []);
+  while (++index < length) {
+    var value = array[index];
+    if (predicate(value)) {
+      {
+        arrayPush(result, value);
+      }
+    } else if (!isStrict) {
+      result[result.length] = value;
+    }
+  }
+  return result;
+}
+function arrayReduce(array, iteratee, accumulator, initAccum) {
+  var index = -1, length = array == null ? 0 : array.length;
+  if (initAccum && length) {
+    accumulator = array[++index];
+  }
+  while (++index < length) {
+    accumulator = iteratee(accumulator, array[index], index, array);
+  }
+  return accumulator;
+}
+function castFunction(value) {
+  return typeof value == "function" ? value : identity;
+}
+function forEach(collection, iteratee) {
+  var func = isArray(collection) ? arrayEach : baseEach;
+  return func(collection, castFunction(iteratee));
+}
+function baseFilter(collection, predicate) {
+  var result = [];
+  baseEach(collection, function(value, index, collection2) {
+    if (predicate(value, index, collection2)) {
+      result.push(value);
+    }
+  });
+  return result;
+}
+function filter(collection, predicate) {
+  var func = isArray(collection) ? arrayFilter : baseFilter;
+  return func(collection, baseIteratee(predicate));
+}
+function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) {
+  eachFunc(collection, function(value, index, collection2) {
+    accumulator = initAccum ? (initAccum = false, value) : iteratee(accumulator, value, index, collection2);
+  });
+  return accumulator;
+}
+function reduce(collection, iteratee, accumulator) {
+  var func = isArray(collection) ? arrayReduce : baseReduce, initAccum = arguments.length < 3;
+  return func(collection, baseIteratee(iteratee), accumulator, initAccum, baseEach);
+}
+var INFINITY = 1 / 0;
+var createSet = !(Set && 1 / setToArray(new Set([, -0]))[1] == INFINITY) ? noop : function(values) {
+  return new Set(values);
+};
+var LARGE_ARRAY_SIZE = 200;
+function baseUniq(array, iteratee, comparator) {
+  var index = -1, includes = arrayIncludes, length = array.length, isCommon = true, result = [], seen = result;
+  if (length >= LARGE_ARRAY_SIZE) {
+    var set = iteratee ? null : createSet(array);
+    if (set) {
+      return setToArray(set);
+    }
+    isCommon = false;
+    includes = cacheHas;
+    seen = new SetCache();
+  } else {
+    seen = iteratee ? [] : result;
+  }
+  outer:
+    while (++index < length) {
+      var value = array[index], computed = iteratee ? iteratee(value) : value;
+      value = value !== 0 ? value : 0;
+      if (isCommon && computed === computed) {
+        var seenIndex = seen.length;
+        while (seenIndex--) {
+          if (seen[seenIndex] === computed) {
+            continue outer;
+          }
+        }
+        if (iteratee) {
+          seen.push(computed);
+        }
+        result.push(value);
+      } else if (!includes(seen, computed, comparator)) {
+        if (seen !== result) {
+          seen.push(computed);
+        }
+        result.push(value);
+      }
+    }
+  return result;
+}
+export {
+  arrayEach as a,
+  baseFlatten as b,
+  baseUniq as c,
+  forEach as d,
+  baseFindIndex as e,
+  filter as f,
+  castFunction as g,
+  reduce as r
+};

package/dist/_baseUniq-nfJyj2zU.cjs

@@ -0,0 +1,151 @@
+"use strict";
+const index = require("./index-BctLGjTK.cjs");
+function noop() {
+}
+function arrayEach(array, iteratee) {
+  var index2 = -1, length = array == null ? 0 : array.length;
+  while (++index2 < length) {
+    if (iteratee(array[index2], index2, array) === false) {
+      break;
+    }
+  }
+  return array;
+}
+function baseFindIndex(array, predicate, fromIndex, fromRight) {
+  var length = array.length, index2 = fromIndex + -1;
+  while (++index2 < length) {
+    if (predicate(array[index2], index2, array)) {
+      return index2;
+    }
+  }
+  return -1;
+}
+function baseIsNaN(value) {
+  return value !== value;
+}
+function strictIndexOf(array, value, fromIndex) {
+  var index2 = fromIndex - 1, length = array.length;
+  while (++index2 < length) {
+    if (array[index2] === value) {
+      return index2;
+    }
+  }
+  return -1;
+}
+function baseIndexOf(array, value, fromIndex) {
+  return value === value ? strictIndexOf(array, value, fromIndex) : baseFindIndex(array, baseIsNaN, fromIndex);
+}
+function arrayIncludes(array, value) {
+  var length = array == null ? 0 : array.length;
+  return !!length && baseIndexOf(array, value, 0) > -1;
+}
+var spreadableSymbol = index.Symbol ? index.Symbol.isConcatSpreadable : void 0;
+function isFlattenable(value) {
+  return index.isArray(value) || index.isArguments(value) || !!(spreadableSymbol && value && value[spreadableSymbol]);
+}
+function baseFlatten(array, depth, predicate, isStrict, result) {
+  var index$1 = -1, length = array.length;
+  predicate || (predicate = isFlattenable);
+  result || (result = []);
+  while (++index$1 < length) {
+    var value = array[index$1];
+    if (predicate(value)) {
+      {
+        index.arrayPush(result, value);
+      }
+    } else if (!isStrict) {
+      result[result.length] = value;
+    }
+  }
+  return result;
+}
+function arrayReduce(array, iteratee, accumulator, initAccum) {
+  var index2 = -1, length = array == null ? 0 : array.length;
+  if (initAccum && length) {
+    accumulator = array[++index2];
+  }
+  while (++index2 < length) {
+    accumulator = iteratee(accumulator, array[index2], index2, array);
+  }
+  return accumulator;
+}
+function castFunction(value) {
+  return typeof value == "function" ? value : index.identity;
+}
+function forEach(collection, iteratee) {
+  var func = index.isArray(collection) ? arrayEach : index.baseEach;
+  return func(collection, castFunction(iteratee));
+}
+function baseFilter(collection, predicate) {
+  var result = [];
+  index.baseEach(collection, function(value, index2, collection2) {
+    if (predicate(value, index2, collection2)) {
+      result.push(value);
+    }
+  });
+  return result;
+}
+function filter(collection, predicate) {
+  var func = index.isArray(collection) ? index.arrayFilter : baseFilter;
+  return func(collection, index.baseIteratee(predicate));
+}
+function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) {
+  eachFunc(collection, function(value, index2, collection2) {
+    accumulator = initAccum ? (initAccum = false, value) : iteratee(accumulator, value, index2, collection2);
+  });
+  return accumulator;
+}
+function reduce(collection, iteratee, accumulator) {
+  var func = index.isArray(collection) ? arrayReduce : baseReduce, initAccum = arguments.length < 3;
+  return func(collection, index.baseIteratee(iteratee), accumulator, initAccum, index.baseEach);
+}
+var INFINITY = 1 / 0;
+var createSet = !(index.Set && 1 / index.setToArray(new index.Set([, -0]))[1] == INFINITY) ? noop : function(values) {
+  return new index.Set(values);
+};
+var LARGE_ARRAY_SIZE = 200;
+function baseUniq(array, iteratee, comparator) {
+  var index$1 = -1, includes = arrayIncludes, length = array.length, isCommon = true, result = [], seen = result;
+  if (length >= LARGE_ARRAY_SIZE) {
+    var set = iteratee ? null : createSet(array);
+    if (set) {
+      return index.setToArray(set);
+    }
+    isCommon = false;
+    includes = index.cacheHas;
+    seen = new index.SetCache();
+  } else {
+    seen = iteratee ? [] : result;
+  }
+  outer:
+    while (++index$1 < length) {
+      var value = array[index$1], computed = iteratee ? iteratee(value) : value;
+      value = value !== 0 ? value : 0;
+      if (isCommon && computed === computed) {
+        var seenIndex = seen.length;
+        while (seenIndex--) {
+          if (seen[seenIndex] === computed) {
+            continue outer;
+          }
+        }
+        if (iteratee) {
+          seen.push(computed);
+        }
+        result.push(value);
+      } else if (!includes(seen, computed, comparator)) {
+        if (seen !== result) {
+          seen.push(computed);
+        }
+        result.push(value);
+      }
+    }
+  return result;
+}
+exports.arrayEach = arrayEach;
+exports.baseFindIndex = baseFindIndex;
+exports.baseFlatten = baseFlatten;
+exports.baseUniq = baseUniq;
+exports.castFunction = castFunction;
+exports.filter = filter;
+exports.forEach = forEach;
+exports.reduce = reduce;