@lobehub/chat 0.1.6

package/src/services/chatModel.ts

@@ -0,0 +1,34 @@
+import { merge } from 'lodash-es';
+
+import type { OpenAIStreamPayload } from '@/types/openai';
+
+import { URLS } from './url';
+
+/**
+ * 专门用于对话的 fetch
+ */
+export const fetchChatModel = (
+  params: Partial<OpenAIStreamPayload>,
+  signal?: AbortSignal | undefined,
+) => {
+  const payload = merge(
+    {
+      frequency_penalty: 0,
+      model: 'gpt-3.5-turbo',
+      presence_penalty: 0,
+      stream: true,
+      temperature: 0.6,
+      top_p: 1,
+    },
+    params,
+  );
+
+  return fetch(URLS.openai, {
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    signal,
+  });
+};

package/src/services/langChain.ts

@@ -0,0 +1,18 @@
+import { URLS } from '@/services/url';
+import { LangChainParams } from '@/types/langchain';
+import { fetchAIFactory } from '@/utils/fetch';
+
+/**
+ * 专门用于 FlowChain 的 fetch
+ */
+export const fetchLangChain = fetchAIFactory(
+  (params: LangChainParams, signal?: AbortSignal | undefined) =>
+    fetch(URLS.chain, {
+      body: JSON.stringify(params),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+      signal,
+    }),
+);

package/src/services/url.ts

@@ -0,0 +1,8 @@
+const isDev = process.env.NODE_ENV === 'development';
+
+const prefix = isDev ? '-dev' : '';
+
+export const URLS = {
+  chain: '/api/chain' + prefix,
+  openai: '/api/openai' + prefix,
+};

package/src/store/middleware/createHashStorage.ts

@@ -0,0 +1,49 @@
+import { isEmpty } from 'lodash-es';
+import { PersistStorage } from 'zustand/middleware';
+
+import { Compressor } from '@/utils/compass';
+
+export const createHashStorage = <T extends object>(): PersistStorage<T> => {
+  return {
+    getItem: async () => {
+      const searchParameters = new URLSearchParams(location.hash.slice(1));
+      const state: any = {};
+      const pool = [...searchParameters.entries()].map(async ([k, v]) => {
+        const string_ = await Compressor.decompressAsync(v);
+
+        try {
+          state[k] = JSON.parse(string_);
+        } catch {
+          state[k] = string_;
+        }
+      });
+
+      await Promise.all(pool);
+
+      return { state } as any;
+    },
+    removeItem: (key): void => {
+      const searchParameters = new URLSearchParams(location.hash.slice(1));
+      searchParameters.delete(key);
+      location.hash = searchParameters.toString();
+    },
+    setItem: async (_, newValue) => {
+      const searchParameters = new URLSearchParams(location.hash.slice(1));
+
+      const pool = Object.entries(newValue.state).map(async ([k, v]) => {
+        if (isEmpty(v)) {
+          searchParameters.delete(k);
+          return;
+        }
+        if (typeof v === 'string') {
+          searchParameters.set(k, await Compressor.compressAsync(v));
+        } else {
+          searchParameters.set(k, await Compressor.compressAsync(JSON.stringify(v)));
+        }
+      });
+      await Promise.all(pool);
+
+      location.hash = searchParameters.toString();
+    },
+  };
+};

package/src/store/session/index.ts

@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+import { PersistOptions, devtools, persist } from 'zustand/middleware';
+
+import { SessionStore, createStore } from './store';
+
+type SessionPersist = Pick<SessionStore, 'sessions'>;
+
+export const LOBE_CHAT = 'LOBE_CHAT';
+
+const persistOptions: PersistOptions<SessionStore, SessionPersist> = {
+  name: LOBE_CHAT,
+
+  partialize: (s) => ({
+    sessions: s.sessions,
+  }),
+
+  // 手动控制 Hydration ，避免 ssr 报错
+  skipHydration: true,
+  version: 0,
+  // version: Migration.targetVersion,
+};
+
+export const useSessionStore = create<SessionStore>()(
+  persist(
+    devtools(createStore, {
+      name: LOBE_CHAT,
+    }),
+    persistOptions,
+  ),
+);
+
+export * from './selectors';
+export type { SessionStore } from './store';

package/src/store/session/initialState.ts

@@ -0,0 +1,11 @@
+import { AgentConfigState, initialAgentConfigState } from './slices/agentConfig';
+import { ChatState, initialChatState } from './slices/chat';
+import { SessionState, initialSessionState } from './slices/session';
+
+export type SessionStoreState = SessionState & ChatState & AgentConfigState;
+
+export const initialState: SessionStoreState = {
+  ...initialSessionState,
+  ...initialChatState,
+  ...initialAgentConfigState,
+};

package/src/store/session/selectors.ts

@@ -0,0 +1,3 @@
+export { agentSelectors } from './slices/agentConfig';
+export { chatSelectors } from './slices/chat';
+export { sessionSelectors } from './slices/session';

package/src/store/session/slices/agentConfig/action.ts

@@ -0,0 +1,226 @@
+import { StateCreator } from 'zustand/vanilla';
+
+import { promptPickEmoji, promptSummaryAgentName, promptSummaryDescription } from '@/prompts/agent';
+import { SessionStore, sessionSelectors } from '@/store/session';
+import { MetaData } from '@/types/meta';
+import { LobeAgentConfig } from '@/types/session';
+import { fetchPresetTaskResult } from '@/utils/fetch';
+
+import { SessionLoadingState } from './initialState';
+
+/**
+ * 代理行为接口
+ */
+export interface AgentAction {
+  /**
+   * 自动选择表情
+   * @param id - 表情的 ID
+   */
+  autoPickEmoji: (id: string) => void;
+  /**
+   * 自动完成代理描述
+   * @param id - 代理的 ID
+   * @returns 一个 Promise，用于异步操作完成后的处理
+   */
+  autocompleteAgentDescription: (id: string) => Promise<void>;
+  /**
+   * 自动完成代理标题
+   * @param id - 代理的 ID
+   * @returns 一个 Promise，用于异步操作完成后的处理
+   */
+  autocompleteAgentTitle: (id: string) => Promise<void>;
+
+  autocompleteMeta: (key: keyof MetaData) => void;
+  /**
+   * 自动完成会话代理元数据
+   * @param id - 代理的 ID
+   */
+  autocompleteSessionAgentMeta: (id: string, replace?: boolean) => void;
+
+  /**
+   * 内部更新代理元数据
+   * @param id - 代理的 ID
+   * @returns 任意类型的返回值
+   */
+  internalUpdateAgentMeta: (id: string) => any;
+  /**
+   * 切换配置
+   * @param showPanel - 是否显示面板，默认为 true
+   */
+  toggleConfig: (showPanel?: boolean) => void;
+
+  /**
+   * 更新代理配置
+   * @param config - 部分 LobeAgentConfig 的配置
+   */
+  updateAgentConfig: (config: Partial<LobeAgentConfig>) => void;
+  updateAgentMeta: (meta: Partial<MetaData>) => void;
+  /**
+   * 更新加载状态
+   * @param key - SessionLoadingState 的键
+   * @param value - 加载状态的值
+   */
+  updateLoadingState: (key: keyof SessionLoadingState, value: boolean) => void;
+}
+
+export const createAgentSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  AgentAction
+> = (set, get) => ({
+  autoPickEmoji: async (id) => {
+    const { dispatchSession } = get();
+    const session = sessionSelectors.getSessionById(id)(get());
+    if (!session) return;
+
+    const systemRole = session.config.systemRole;
+
+    const emoji = await fetchPresetTaskResult({
+      onLoadingChange: (loading) => {
+        get().updateLoadingState('avatar', loading);
+      },
+      params: promptPickEmoji(systemRole),
+    });
+
+    if (emoji) {
+      dispatchSession({ id, key: 'avatar', type: 'updateSessionMeta', value: emoji });
+    }
+  },
+
+  autocompleteAgentDescription: async (id) => {
+    const { dispatchSession, updateLoadingState, internalUpdateAgentMeta } = get();
+    const session = sessionSelectors.getSessionById(id)(get());
+    if (!session) return;
+
+    const systemRole = session.config.systemRole;
+
+    if (!systemRole) return;
+
+    const preValue = session.meta.description;
+
+    // 替换为 ...
+    dispatchSession({ id, key: 'description', type: 'updateSessionMeta', value: '...' });
+
+    fetchPresetTaskResult({
+      onError: () => {
+        dispatchSession({
+          id,
+          key: 'description',
+          type: 'updateSessionMeta',
+          value: preValue,
+        });
+      },
+      onLoadingChange: (loading) => {
+        updateLoadingState('description', loading);
+      },
+      onMessageHandle: internalUpdateAgentMeta(id)('description'),
+      params: promptSummaryDescription(systemRole),
+    });
+  },
+
+  autocompleteAgentTitle: async (id) => {
+    const { dispatchSession, updateLoadingState, internalUpdateAgentMeta } = get();
+    const session = sessionSelectors.getSessionById(id)(get());
+    if (!session) return;
+
+    const systemRole = session.config.systemRole;
+
+    if (!systemRole) return;
+
+    const previousTitle = session.meta.title;
+
+    // 替换为 ...
+    dispatchSession({ id, key: 'title', type: 'updateSessionMeta', value: '...' });
+
+    fetchPresetTaskResult({
+      onError: () => {
+        dispatchSession({ id, key: 'title', type: 'updateSessionMeta', value: previousTitle });
+      },
+      onLoadingChange: (loading) => {
+        updateLoadingState('title', loading);
+      },
+      onMessageHandle: internalUpdateAgentMeta(id)('title'),
+      params: promptSummaryAgentName(systemRole),
+    });
+  },
+
+  autocompleteMeta: (key) => {
+    const { activeId, autoPickEmoji, autocompleteAgentTitle, autocompleteAgentDescription } = get();
+    if (!activeId) return;
+
+    switch (key) {
+      case 'avatar': {
+        autoPickEmoji(activeId);
+        return;
+      }
+
+      case 'description': {
+        autocompleteAgentDescription(activeId);
+        return;
+      }
+
+      case 'title': {
+        autocompleteAgentTitle(activeId);
+      }
+    }
+  },
+
+  autocompleteSessionAgentMeta: (id, replace) => {
+    const session = sessionSelectors.getSessionById(id)(get());
+
+    if (!session) return;
+
+    if (!session.meta.title || replace) {
+      get().autocompleteAgentTitle(id);
+    }
+
+    if (!session.meta.description || replace) {
+      get().autocompleteAgentDescription(id);
+    }
+
+    if (!session.meta.avatar || replace) {
+      get().autoPickEmoji(id);
+    }
+  },
+  internalUpdateAgentMeta: (id: string) => (key: keyof MetaData) => {
+    let value = '';
+    return (text: string) => {
+      value += text;
+      get().dispatchSession({ id, key, type: 'updateSessionMeta', value });
+    };
+  },
+
+  toggleConfig: (newValue) => {
+    const showAgentSettings = typeof newValue === 'boolean' ? newValue : !get().showAgentSettings;
+
+    set({ showAgentSettings });
+  },
+
+  updateAgentConfig: (config) => {
+    const { activeId } = get();
+    const session = sessionSelectors.currentSession(get());
+    if (!activeId || !session) return;
+
+    get().dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
+  },
+  updateAgentMeta: (meta) => {
+    const { activeId } = get();
+    const session = sessionSelectors.currentSession(get());
+    if (!activeId || !session) return;
+
+    for (const [key, value] of Object.entries(meta)) {
+      if (value !== undefined) {
+        get().dispatchSession({
+          id: activeId,
+          key: key as keyof MetaData,
+          type: 'updateSessionMeta',
+          value,
+        });
+      }
+    }
+  },
+  updateLoadingState: (key, value) => {
+    set({ autocompleteLoading: { ...get().autocompleteLoading, [key]: value } });
+  },
+});

package/src/store/session/slices/agentConfig/index.ts

@@ -0,0 +1,3 @@
+export * from './action';
+export * from './initialState';
+export * from './selectors';

package/src/store/session/slices/agentConfig/initialState.ts

@@ -0,0 +1,34 @@
+import { LanguageModel } from '@/types/llm';
+import { MetaData } from '@/types/meta';
+import { LobeAgentConfig } from '@/types/session';
+
+export type SessionLoadingState = Record<Partial<keyof MetaData>, boolean>;
+
+export interface AgentConfigState {
+  autocompleteLoading: SessionLoadingState;
+
+  showAgentSettings: boolean;
+}
+
+export const initialLobeAgentConfig: LobeAgentConfig = {
+  model: LanguageModel.GPT3_5,
+  params: { temperature: 0.6 },
+  systemRole: '',
+};
+
+export const DEFAULT_AVATAR = 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp';
+
+export const DEFAULT_TITLE = '默认对话';
+
+export const initialAgentConfigState: AgentConfigState = {
+  // // loading 中间态
+  autocompleteLoading: {
+    avatar: false,
+    backgroundColor: false,
+    description: false,
+    tag: false,
+    title: false,
+  },
+
+  showAgentSettings: false,
+};

package/src/store/session/slices/agentConfig/selectors.ts

@@ -0,0 +1,54 @@
+import { SessionStore } from '@/store/session';
+import { LanguageModel } from '@/types/llm';
+import { MetaData } from '@/types/meta';
+import { LobeAgentConfig } from '@/types/session';
+
+import { sessionSelectors } from '../session';
+import { DEFAULT_AVATAR, initialLobeAgentConfig } from './initialState';
+
+const currentAgentMeta = (s: SessionStore): MetaData => {
+  const session = sessionSelectors.currentSession(s);
+
+  return session?.meta || {};
+};
+
+const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title;
+
+const currentAgentAvatar = (s: SessionStore) => {
+  const session = sessionSelectors.currentSession(s);
+
+  if (!session) return DEFAULT_AVATAR;
+
+  return session.meta.avatar || DEFAULT_AVATAR;
+};
+
+const currentAgentConfig = (s: SessionStore) => {
+  const session = sessionSelectors.currentSession(s);
+
+  return session?.config;
+};
+
+const currentAgentConfigSafe = (s: SessionStore): LobeAgentConfig => {
+  return currentAgentConfig(s) || initialLobeAgentConfig;
+};
+
+const currentAgentModel = (s: SessionStore): LanguageModel => {
+  const config = currentAgentConfig(s);
+
+  return config?.model || LanguageModel.GPT3_5;
+};
+
+const hasSystemRole = (s: SessionStore) => {
+  const config = currentAgentConfigSafe(s);
+
+  return !!config.systemRole;
+};
+export const agentSelectors = {
+  currentAgentAvatar,
+  currentAgentConfig,
+  currentAgentConfigSafe,
+  currentAgentMeta,
+  currentAgentModel,
+  currentAgentTitle,
+  hasSystemRole,
+};

package/src/store/session/slices/chat/action.ts

@@ -0,0 +1,210 @@
+import { StateCreator } from 'zustand/vanilla';
+
+import { fetchChatModel } from '@/services/chatModel';
+import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@/store/session';
+import { ChatMessage } from '@/types/chatMessage';
+import { FetchSSEOptions, fetchSSE } from '@/utils/fetch';
+import { nanoid } from '@/utils/uuid';
+
+import { MessageDispatch, messagesReducer } from './messageReducer';
+
+const LOADING_FLAT = '...';
+
+/**
+ * 聊天操作
+ */
+export interface ChatAction {
+  /**
+   * 清除消息
+   */
+  clearMessage: () => void;
+  /**
+   * 创建或发送消息
+   * @param text - 消息文本
+   */
+  createOrSendMsg: (text: string) => Promise<void>;
+  /**
+   * 删除消息
+   * @param id - 消息 ID
+   */
+  deleteMessage: (id: string) => void;
+  /**
+   * 分发消息
+   * @param payload - 消息分发参数
+   */
+  dispatchMessage: (payload: MessageDispatch) => void;
+  /**
+   * 生成消息
+   * @param messages - 聊天消息数组
+   * @param options - 获取 SSE 选项
+   */
+  generateMessage: (messages: ChatMessage[], options: FetchSSEOptions) => Promise<void>;
+  /**
+   * 处理消息编辑
+   * @param messageId - 消息 ID，可选
+   */
+  handleMessageEditing: (messageId: string | undefined) => void;
+  /**
+   * 实际获取 AI 响应
+   *
+   * @param messages - 聊天消息数组
+   * @param parentId - 父消息 ID，可选
+   */
+  realFetchAIResponse: (messages: ChatMessage[], parentId?: string) => Promise<void>;
+  /**
+   * 重新发送消息
+   * @param id - 消息 ID
+   */
+  resendMessage: (id: string) => Promise<void>;
+  /**
+   * 发送消息
+   * @param text - 消息文本
+   */
+  sendMessage: (text: string) => Promise<void>;
+}
+
+export const createChatSlice: StateCreator<
+  SessionStore,
+  [['zustand/devtools', never]],
+  [],
+  ChatAction
+> = (set, get) => ({
+  clearMessage: () => {
+    get().dispatchMessage({ type: 'resetMessages' });
+  },
+
+  createOrSendMsg: async (message) => {
+    if (!message) return;
+
+    const { sendMessage, createSession } = get();
+    const session = sessionSelectors.currentSession(get());
+
+    if (!session) {
+      await createSession();
+    }
+
+    sendMessage(message);
+  },
+
+  deleteMessage: (id) => {
+    get().dispatchMessage({ id, type: 'deleteMessage' });
+  },
+
+  dispatchMessage: (payload) => {
+    const { activeId } = get();
+    const session = sessionSelectors.currentSession(get());
+    if (!activeId || !session) return;
+
+    const chats = messagesReducer(session.chats, payload);
+
+    get().dispatchSession({ chats, id: activeId, type: 'updateSessionChat' });
+  },
+
+  generateMessage: async (messages, options) => {
+    set({ chatLoading: true });
+    const config = agentSelectors.currentAgentConfigSafe(get());
+
+    const fetcher = () => fetchChatModel({ messages, model: config.model, ...config.params });
+
+    await fetchSSE(fetcher, options);
+
+    set({ chatLoading: false });
+  },
+
+  handleMessageEditing: (messageId) => {
+    set({ editingMessageId: messageId });
+  },
+
+  realFetchAIResponse: async (messages: ChatMessage[], parentId?: string) => {
+    const { dispatchMessage, generateMessage } = get();
+
+    // 添加 systemRole
+    const { systemRole } = agentSelectors.currentAgentConfigSafe(get());
+    if (systemRole) {
+      messages.unshift({ content: systemRole, role: 'system' } as ChatMessage);
+    }
+
+    // 再添加一个空的信息用于放置 ai 响应，注意顺序不能反
+    // 因为如果顺序反了，messages 中将包含新增的 ai message
+    const assistantId = nanoid();
+    const userId = parentId ?? nanoid();
+
+    dispatchMessage({
+      id: assistantId,
+      message: LOADING_FLAT,
+      parentId: userId,
+      role: 'assistant',
+      type: 'addMessage',
+    });
+
+    let output = '';
+    // 生成 ai message
+    await generateMessage(messages, {
+      onErrorHandle: (error) => {
+        dispatchMessage({ id: assistantId, key: 'error', type: 'updateMessage', value: error });
+      },
+      onMessageHandle: (text) => {
+        output += text;
+
+        dispatchMessage({
+          id: assistantId,
+          key: 'content',
+          type: 'updateMessage',
+          value: output,
+        });
+
+        // 滚动到最后一条消息
+        const item = document.querySelector('#for-loading');
+        if (!item) return;
+
+        item.scrollIntoView({ behavior: 'smooth' });
+      },
+    });
+  },
+
+  resendMessage: async (messageId) => {
+    const session = sessionSelectors.currentSession(get());
+
+    if (!session) return;
+
+    // 1. 构造所有相关的历史记录
+    const chats = chatSelectors.currentChats(get());
+
+    const currentIndex = chats.findIndex((c) => c.id === messageId);
+
+    const histories = chats
+      .slice(0, currentIndex + 1)
+      // 如果点击重新发送的 message 其 role 是 assistant，那么需要移除
+      // 如果点击重新发送的 message 其 role 是 user，则不需要移除
+      .filter((c) => !(c.role === 'assistant' && c.id === messageId));
+
+    if (histories.length <= 0) return;
+
+    const { realFetchAIResponse } = get();
+
+    const latestMsg = histories.filter((s) => s.role === 'user').at(-1);
+
+    if (!latestMsg) return;
+
+    await realFetchAIResponse(histories, latestMsg.id);
+  },
+
+  sendMessage: async (message) => {
+    const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta } = get();
+    const session = sessionSelectors.currentSession(get());
+    if (!session || !message) return;
+
+    const userId = nanoid();
+    dispatchMessage({ id: userId, message, role: 'user', type: 'addMessage' });
+
+    // 先拿到当前的 messages
+    const messages = chatSelectors.currentChats(get());
+
+    await realFetchAIResponse(messages);
+
+    const chats = chatSelectors.currentChats(get());
+    if (chats.length >= 4) {
+      autocompleteSessionAgentMeta(session.id);
+    }
+  },
+});

package/src/store/session/slices/chat/index.ts

@@ -0,0 +1,3 @@
+export * from './action';
+export * from './initialState';
+export * from './selectors';