@lobehub/ui 1.6.1 → 1.7.1

package/es/Chat/const.d.ts

@@ -0,0 +1 @@
+export declare const LOADING_FLAT = "...";

package/es/Chat/const.js

@@ -0,0 +1 @@
+export var LOADING_FLAT = '...';

package/es/Chat/index.d.ts

@@ -0,0 +1,2 @@
+export { messagesReducer } from './store';
+export * from './types';

package/es/Chat/index.js

@@ -0,0 +1,2 @@
+export { messagesReducer } from "./store";
+export * from "./types";

package/es/Chat/store/index.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { StoreApi } from 'zustand';
+import { ChatStore } from './store';
+export declare const createChatStore: (showDevtools?: boolean) => import("zustand").UseBoundStore<Omit<StoreApi<ChatStore>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: ChatStore | Partial<ChatStore> | ((state: ChatStore) => ChatStore | Partial<ChatStore>), replace?: boolean | undefined, action?: A | undefined): void;
+}>;
+export declare const Provider: ({ createStore, children }: {
+    createStore: () => StoreApi<ChatStore>;
+    children: any;
+}) => import("react").FunctionComponentElement<import("react").ProviderProps<StoreApi<ChatStore> | undefined>>, useStore: import("zustand-utils").UseContextStore<StoreApi<ChatStore>>, useStoreApi: () => {
+    setState: (partial: ChatStore | Partial<ChatStore> | ((state: ChatStore) => ChatStore | Partial<ChatStore>), replace?: boolean | undefined) => void;
+    getState: () => ChatStore;
+    subscribe: (listener: (state: ChatStore, prevState: ChatStore) => void) => () => void;
+    destroy: () => void;
+};
+export { messagesReducer, type MessageDispatch } from './messageReducer';
+export * from './selectors';
+export type { ChatStore } from './store';

package/es/Chat/store/index.js

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+import { createContext, optionalDevtools } from 'zustand-utils';
+import { createStore } from "./store";
+export var createChatStore = function createChatStore() {
+  var showDevtools = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return create()(optionalDevtools(showDevtools)(createStore, {
+    name: 'CHAT_COMPONENT'
+  }));
+};
+var _createContext = createContext(),
+  Provider = _createContext.Provider,
+  useStore = _createContext.useStore,
+  useStoreApi = _createContext.useStoreApi;
+export { Provider, useStore, useStoreApi };
+export { messagesReducer } from "./messageReducer";
+export * from "./selectors";

package/es/Chat/store/initialState.d.ts

@@ -0,0 +1,28 @@
+import { ChatMessage, InternalChatContext, OpenAIRequestParams } from '../types';
+export interface ChatState extends InternalChatContext {
+    /**
+     * @title 消息
+     * @type {string}
+     */
+    message: string;
+    /**
+     * @title 加载状态
+     * @type {boolean}
+     */
+    loading: boolean;
+    /**
+     * @title 改变系统角色状态
+     * @type {boolean}
+     */
+    changingSystemRole: boolean;
+    /**
+     * 编辑中的消息 id
+     */
+    editingMessageId?: number | null;
+    onMessagesChange?: (messages: ChatMessage[]) => void;
+    onResponseStart?: (messages: ChatMessage[]) => Promise<void>;
+    onResponseFinished?: (session: any) => void;
+    onAgentChange?: (agent: any, type: 'update' | 'remove') => void;
+    request?: (params: OpenAIRequestParams) => Promise<Response>;
+}
+export declare const initialState: ChatState;

package/es/Chat/store/initialState.js

@@ -0,0 +1,9 @@
+export var initialState = {
+  message: '',
+  messages: [],
+  loading: false,
+  changingSystemRole: false,
+  editingMessageId: null,
+  createAt: -1,
+  updateAt: -1
+};

package/es/Chat/store/messageReducer.d.ts

@@ -0,0 +1,37 @@
+import { ChatMessage, ChatMessageError, MessageRoleType } from '../types';
+export declare type MessageDispatch = {
+    type: 'addMessage';
+    message: ChatMessage;
+} | {
+    type: 'insertMessage';
+    message: ChatMessage;
+    index: number;
+} | {
+    type: 'deleteMessage';
+    index: number;
+} | {
+    type: 'resetMessages';
+} | {
+    type: 'updateMessage';
+    index: number;
+    message: string;
+} | {
+    type: 'updateMessageRole';
+    index: number;
+    role: MessageRoleType;
+} | {
+    type: 'addUserMessage';
+    message: string;
+} | {
+    type: 'updateLatestBotMessage';
+    responseStream: string[];
+} | {
+    type: 'updateMessageChoice';
+    message: string;
+    index: number;
+} | {
+    type: 'setErrorMessage';
+    index: number;
+    error: ChatMessageError | undefined;
+};
+export declare const messagesReducer: (state: ChatMessage[], payload: MessageDispatch) => ChatMessage[];

package/es/Chat/store/messageReducer.js

@@ -0,0 +1,67 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { produce } from 'immer';
+export var messagesReducer = function messagesReducer(state, payload) {
+  switch (payload.type) {
+    case 'addMessage':
+      return [].concat(_toConsumableArray(state), [payload.message]);
+    case 'insertMessage':
+      return produce(state, function (draftState) {
+        draftState.splice(payload.index, 0, payload.message);
+      });
+    case 'deleteMessage':
+      return state.filter(function (_, i) {
+        return i !== payload.index;
+      });
+    case 'resetMessages':
+      return [];
+    case 'updateMessage':
+      return produce(state, function (draftState) {
+        var index = payload.index,
+          message = payload.message;
+        draftState[index].content = message;
+      });
+    case 'updateMessageRole':
+      return produce(state, function (draftState) {
+        var index = payload.index,
+          role = payload.role;
+        draftState[index].role = role;
+      });
+    case 'addUserMessage':
+      return produce(state, function (draftState) {
+        draftState.push({
+          role: 'user',
+          content: payload.message
+        });
+      });
+    case 'updateLatestBotMessage':
+      return produce(state, function () {
+        var responseStream = payload.responseStream;
+        var newMessage = {
+          role: 'assistant',
+          content: responseStream.join('')
+        };
+        return [].concat(_toConsumableArray(state.slice(0, -1)), [newMessage]);
+      });
+    case 'setErrorMessage':
+      return produce(state, function (draftState) {
+        var index = payload.index,
+          error = payload.error;
+        draftState[index].error = error;
+      });
+    case 'updateMessageChoice':
+      return produce(state, function (draftState) {
+        var index = payload.index,
+          message = payload.message;
+        var botMessage = draftState[index];
+        var prevMsg = botMessage.content;
+        botMessage.content = message;
+        if (botMessage.choices) {
+          botMessage.choices.push(prevMsg);
+        } else {
+          botMessage.choices = [prevMsg];
+        }
+      });
+    default:
+      throw Error('暂未实现的 type，请检查 reducer');
+  }
+};

package/es/Chat/store/selectors.d.ts

@@ -0,0 +1,9 @@
+import type { ChatStore } from './store';
+export declare const chatSelectors: {
+    totalTokenCount: (s: ChatStore) => number;
+    agentTokenCount: (s: ChatStore) => number;
+    messagesTokenCount: (s: ChatStore) => number;
+    totalTokens: (s: ChatStore) => number[];
+    messagesTokens: (s: ChatStore) => number[];
+    disableInput: (s: ChatStore) => boolean;
+};

package/es/Chat/store/selectors.js

@@ -0,0 +1,44 @@
+import { get_encoding } from '@dqbd/tiktoken';
+var tiktoken = get_encoding('cl100k_base');
+var encode = function encode(text) {
+  if (!text) return [];
+  var tokens = tiktoken.encode(text);
+  return tokens;
+};
+var disableInputSel = function disableInputSel(s) {
+  return s.changingSystemRole;
+};
+var messagesTokens = function messagesTokens(s) {
+  return encode(s.messages.map(function (m) {
+    return m.content;
+  }).join(''));
+};
+var agentContentTokens = function agentContentTokens(s) {
+  return encode(s.messages.filter(function (s) {
+    return s.role === 'system';
+  }).map(function (c) {
+    return c.content;
+  }).join('') || '');
+};
+var totalTokens = function totalTokens(s) {
+  return encode(s.messages.map(function (m) {
+    return m.content;
+  }).join(''));
+};
+var totalTokenCount = function totalTokenCount(s) {
+  return totalTokens(s).length;
+};
+var agentTokenCount = function agentTokenCount(s) {
+  return agentContentTokens(s).length;
+};
+var messagesTokenCount = function messagesTokenCount(s) {
+  return messagesTokens(s).length;
+};
+export var chatSelectors = {
+  totalTokenCount: totalTokenCount,
+  agentTokenCount: agentTokenCount,
+  messagesTokenCount: messagesTokenCount,
+  totalTokens: totalTokens,
+  messagesTokens: messagesTokens,
+  disableInput: disableInputSel
+};

package/es/Chat/store/store.d.ts

@@ -0,0 +1,34 @@
+import { StateCreator } from 'zustand/vanilla';
+import { ChatMessage } from '../types';
+import { FetchSSEOptions } from '../utils/fetch';
+import { ChatState } from './initialState';
+import { MessageDispatch } from './messageReducer';
+interface ChatAction {
+    /**
+     * @title 发送消息
+     * @returns Promise<void>
+     */
+    sendMessage: () => Promise<void>;
+    /**
+     * @title 重发消息
+     * @param index - 消息索引
+     * @returns Promise<void>
+     */
+    resendMessage: (index: number) => Promise<void>;
+    generateMessage: (message: string, messages: ChatMessage[], options: FetchSSEOptions) => Promise<void>;
+    /**
+     * @title 派发消息
+     * @param payload - 消息分发
+     * @returns void
+     */
+    dispatchMessage: (payload: MessageDispatch) => void;
+    /**
+     * @title 处理消息编辑
+     * @param index - 消息索引或空
+     * @returns void
+     */
+    handleMessageEditing: (index?: number | null) => void;
+}
+export declare type ChatStore = ChatAction & ChatState;
+export declare const createStore: StateCreator<ChatStore, [['zustand/devtools', never]]>;
+export {};

package/es/Chat/store/store.js

@@ -0,0 +1,240 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["type"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { fetchSSE } from "../utils/fetch";
+import { LOADING_FLAT } from "../const";
+import { initialState } from "./initialState";
+import { messagesReducer } from "./messageReducer";
+export var createStore = function createStore(set, get) {
+  return _objectSpread(_objectSpread({}, initialState), {}, {
+    dispatchMessage: function dispatchMessage(payload) {
+      var _get$onMessagesChange, _get;
+      var type = payload.type,
+        res = _objectWithoutProperties(payload, _excluded);
+      var messages = messagesReducer(get().messages, payload);
+      set({
+        messages: messages
+      }, false, {
+        type: "dispatchMessage/".concat(type),
+        payload: res
+      });
+      (_get$onMessagesChange = (_get = get()).onMessagesChange) === null || _get$onMessagesChange === void 0 ? void 0 : _get$onMessagesChange.call(_get, messages);
+    },
+    handleMessageEditing: function handleMessageEditing(index) {
+      set({
+        editingMessageId: index
+      });
+    },
+    generateMessage: function () {
+      var _generateMessage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(message, messages, options) {
+        var _get2, onResponseStart, request, onResponseFinished, fetcher;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _get2 = get(), onResponseStart = _get2.onResponseStart, request = _get2.request, onResponseFinished = _get2.onResponseFinished;
+              if (request) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return");
+            case 3:
+              _context.next = 5;
+              return onResponseStart === null || onResponseStart === void 0 ? void 0 : onResponseStart(get().messages);
+            case 5:
+              set({
+                loading: true
+              });
+              fetcher = function fetcher() {
+                return request({
+                  messages: messages
+                });
+              };
+              _context.next = 9;
+              return fetchSSE(fetcher, options);
+            case 9:
+              set({
+                loading: false
+              });
+              onResponseFinished === null || onResponseFinished === void 0 ? void 0 : onResponseFinished({
+                messages: get().messages
+              });
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function generateMessage(_x, _x2, _x3) {
+        return _generateMessage.apply(this, arguments);
+      }
+      return generateMessage;
+    }(),
+    sendMessage: function () {
+      var _sendMessage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _get3, message, dispatchMessage, generateMessage, messages, currentResponse;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _get3 = get(), message = _get3.message, dispatchMessage = _get3.dispatchMessage, generateMessage = _get3.generateMessage, messages = _get3.messages;
+              if (message) {
+                _context2.next = 3;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 3:
+              set({
+                message: ''
+              });
+              dispatchMessage({
+                type: 'addUserMessage',
+                message: message
+              });
+
+              // 添加一个空的信息用于放置 ai 响应
+              dispatchMessage({
+                type: 'addMessage',
+                message: {
+                  role: 'assistant',
+                  content: LOADING_FLAT
+                }
+              });
+              currentResponse = []; // 生成 messages
+              _context2.next = 9;
+              return generateMessage(message, messages, {
+                onMessageHandle: function onMessageHandle(text) {
+                  currentResponse = [].concat(_toConsumableArray(currentResponse), [text]);
+                  dispatchMessage({
+                    type: 'updateLatestBotMessage',
+                    responseStream: currentResponse
+                  });
+
+                  // 滚动到最后一条消息
+                  var item = document.getElementById('for-loading');
+                  if (!item) return;
+                  item.scrollIntoView({
+                    behavior: 'smooth'
+                  });
+                },
+                onErrorHandle: function onErrorHandle(error) {
+                  dispatchMessage({
+                    type: 'setErrorMessage',
+                    error: error,
+                    index: get().messages.length - 1
+                  });
+                }
+              });
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      function sendMessage() {
+        return _sendMessage.apply(this, arguments);
+      }
+      return sendMessage;
+    }(),
+    resendMessage: function () {
+      var _resendMessage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(index) {
+        var _contextMessages$at;
+        var _get4, dispatchMessage, sendMessage, generateMessage, messages, lastMessage, contextMessages, userMessage, targetMsg, botPrevMsg, currentResponse;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _get4 = get(), dispatchMessage = _get4.dispatchMessage, sendMessage = _get4.sendMessage, generateMessage = _get4.generateMessage, messages = _get4.messages;
+              lastMessage = messages.at(-1); // 用户通过手动删除，造成了他的问题是最后一条消息
+              // 这种情况下，相当于用户重新发送消息
+              if (!(messages.length === index && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.role) === 'user')) {
+                _context3.next = 8;
+                break;
+              }
+              dispatchMessage({
+                type: 'deleteMessage',
+                index: index - 1
+              });
+              set({
+                message: lastMessage.content
+              });
+              _context3.next = 7;
+              return sendMessage();
+            case 7:
+              return _context3.abrupt("return");
+            case 8:
+              // 上下文消息就是当前消息之前的消息
+              contextMessages = get().messages.slice(0, index); // 上下文消息中最后一条消息
+              userMessage = (_contextMessages$at = contextMessages.at(-1)) === null || _contextMessages$at === void 0 ? void 0 : _contextMessages$at.content;
+              if (userMessage) {
+                _context3.next = 12;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 12:
+              targetMsg = messages[index]; // 如果不是 assistant 的消息，那么需要额外插入一条消息
+              if (targetMsg.role !== 'assistant') {
+                dispatchMessage({
+                  type: 'insertMessage',
+                  index: index,
+                  message: {
+                    role: 'assistant',
+                    content: LOADING_FLAT
+                  }
+                });
+              } else {
+                botPrevMsg = targetMsg.content; // 保存之前的消息为历史消息
+                dispatchMessage({
+                  type: 'updateMessageChoice',
+                  message: botPrevMsg,
+                  index: index
+                });
+                dispatchMessage({
+                  type: 'updateMessage',
+                  message: LOADING_FLAT,
+                  index: index
+                });
+              }
+
+              // 重置错误信息
+              dispatchMessage({
+                type: 'setErrorMessage',
+                error: undefined,
+                index: index
+              });
+
+              // 开始更新消息
+              currentResponse = [];
+              _context3.next = 18;
+              return generateMessage(userMessage, contextMessages, {
+                onMessageHandle: function onMessageHandle(text) {
+                  currentResponse = [].concat(_toConsumableArray(currentResponse), [text]);
+                  dispatchMessage({
+                    type: 'updateMessage',
+                    message: currentResponse.join(''),
+                    index: index
+                  });
+                },
+                onErrorHandle: function onErrorHandle(error) {
+                  dispatchMessage({
+                    type: 'setErrorMessage',
+                    error: error,
+                    index: index
+                  });
+                }
+              });
+            case 18:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      function resendMessage(_x4) {
+        return _resendMessage.apply(this, arguments);
+      }
+      return resendMessage;
+    }()
+  });
+};

package/es/Chat/types.d.ts

@@ -0,0 +1,77 @@
+export declare type InternalChatContext = Omit<ChatContext, 'id'>;
+export declare type MessageRoleType = 'user' | 'system' | 'assistant';
+/**
+ * 聊天消息错误对象
+ */
+export interface ChatMessageError {
+    /**
+     * 错误信息
+     */
+    message: string;
+    /**
+     * 错误状态码
+     */
+    status: number;
+    /**
+     * 错误类型
+     * @enum ["chatbot", "openai"]
+     * @enumNames ["聊天机器人", "开放AI"]
+     */
+    type: 'chatbot' | 'openai';
+}
+/**
+ * @title ChatGPTMessage 聊天消息
+ * @category Model
+ */
+export interface ChatMessage {
+    /**
+     * @title 角色
+     * @description 消息发送者的角色
+     * @enum {MessageRoleType} ChatGPTAgent
+     */
+    role: MessageRoleType;
+    /**
+     * @title 内容
+     * @description 消息内容
+     */
+    content: string;
+    /**
+     * 其余生成项
+     */
+    choices?: string[];
+    /**
+     * 如果存在错误消息
+     */
+    error?: ChatMessageError;
+}
+export interface ChatContext {
+    id: string;
+    /**
+     * @title 会话标题
+     */
+    title?: string;
+    /**
+     * @title 会话描述
+     * @description 用户设置的会话描述
+     * @type {string}
+     */
+    description?: string;
+    /**
+     * @title 消息列表
+     * @description 聊天室中的所有消息
+     * @type {ChatMessage[]}
+     */
+    messages: ChatMessage[];
+    createAt: number;
+    updateAt: number;
+}
+export declare type ChatContextMap = Record<string, Omit<ChatContext, 'systemRole'>>;
+/**
+ * 请求数据类型
+ */
+export interface OpenAIRequestParams {
+    /**
+     * 中间的聊天记录
+     */
+    messages?: ChatMessage[];
+}

package/es/Chat/types.js

@@ -0,0 +1 @@
+export {};

package/es/Chat/utils/fetch.d.ts

@@ -0,0 +1,11 @@
+import { ChatMessageError } from '../types';
+export interface FetchSSEOptions {
+    onMessageHandle?: (text: string) => void;
+    onErrorHandle?: (error: ChatMessageError) => void;
+}
+/**
+ * 使用流式方法获取数据
+ * @param fetchFn
+ * @param options
+ */
+export declare const fetchSSE: (fetchFn: () => Promise<Response>, options?: FetchSSEOptions) => Promise<Response | undefined>;