@lobehub/chat 0.44.4 → 0.46.0

package/.eslintrc.js

@@ -9,5 +9,6 @@ config.rules['unicorn/no-null'] = 0;
 config.rules['unicorn/no-typeof-undefined'] = 0;
 config.rules['unicorn/explicit-length-check'] = 0;
 config.rules['unicorn/prefer-code-point'] = 0;
+config.rules['no-extra-boolean-cast'] = 0;
 
 module.exports = config;

package/CHANGELOG.md

@@ -2,6 +2,73 @@
 
 # Changelog
 
+## [Version 0.46.0](https://github.com/lobehub/lobe-chat/compare/v0.45.0...v0.46.0)
+
+<sup>Released on **2023-08-14**</sup>
+
+#### ✨ Features
+
+- **misc**: Update styling and functionality of AgentPrompt and EditableMessage components, 支持停止生成消息.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Remove input highlight.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Update styling and functionality of AgentPrompt and EditableMessage components ([80b521c](https://github.com/lobehub/lobe-chat/commit/80b521c))
+- **misc**: 支持停止生成消息, closes [#78](https://github.com/lobehub/lobe-chat/issues/78) ([9eeca80](https://github.com/lobehub/lobe-chat/commit/9eeca80))
+
+#### What's fixed
+
+- **misc**: Remove input highlight ([ad2001a](https://github.com/lobehub/lobe-chat/commit/ad2001a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.45.0](https://github.com/lobehub/lobe-chat/compare/v0.44.4...v0.45.0)
+
+<sup>Released on **2023-08-14**</sup>
+
+#### ✨ Features
+
+- **misc**: 优化每个角色的初始引导.
+
+#### 💄 Styles
+
+- **misc**: 优化初始化加载状态，等到会话加载完毕再显示内容.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 优化每个角色的初始引导, closes [#76](https://github.com/lobehub/lobe-chat/issues/76) ([8d78dc5](https://github.com/lobehub/lobe-chat/commit/8d78dc5))
+
+#### Styles
+
+- **misc**: 优化初始化加载状态，等到会话加载完毕再显示内容 ([cf603cb](https://github.com/lobehub/lobe-chat/commit/cf603cb))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.44.4](https://github.com/lobehub/lobe-chat/compare/v0.44.3...v0.44.4)
 
 <sup>Released on **2023-08-13**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.44.4",
+  "version": "0.46.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -91,7 +91,7 @@
     "react-dom": "^18",
     "react-hotkeys-hook": "^4",
     "react-i18next": "^13",
-    "react-layout-kit": "^1",
+    "react-layout-kit": "^1.7.1",
     "serpapi": "^2",
     "swr": "^2",
     "ts-md5": "^1",
@@ -105,7 +105,7 @@
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
     "@next/eslint-plugin-next": "^13",
-    "@testing-library/jest-dom": "^5",
+    "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
     "@types/lodash-es": "^4",

package/src/features/AgentSetting/AgentPrompt/index.tsx

@@ -14,14 +14,9 @@ import { LobeAgentConfig } from '@/types/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
   input: css`
-    padding: 12px;
-    background: ${token.colorFillTertiary};
-    border: 1px solid ${token.colorPrimaryBorder};
-    border-radius: 8px;
+    border: 1px solid ${token.colorBorderSecondary};
   `,
   markdown: css`
-    padding: 12px;
-    background: ${token.colorFillTertiary};
     border: 1px solid transparent;
   `,
 }));
@@ -45,6 +40,7 @@ const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
           <TokenTag
             displayMode={'used'}
             maxValue={ModelTokens[model]}
+            shape={'square'}
             text={{
               overload: t('tokenTag.overload', { ns: 'common' }),
               remained: t('tokenTag.remained', { ns: 'common' }),
@@ -61,12 +57,20 @@ const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
       <Flexbox gap={16} paddingBlock={16}>
         <EditableMessage
           classNames={styles}
+          editButtonSize={'small'}
           editing={editing}
+          height={'auto'}
+          inputType={'block'}
           onChange={(e) => {
             updateConfig({ systemRole: e });
           }}
           onEditingChange={setEditing}
+          placeholder={t('settingAgent.prompt.placeholder')}
           showEditWhenEmpty
+          text={{
+            cancel: t('cancel', { ns: 'common' }),
+            confirm: t('ok', { ns: 'common' }),
+          }}
           value={systemRole}
         />
         {!editing && !!systemRole && (
@@ -76,6 +80,7 @@ const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
                 e.stopPropagation();
                 setEditing(true);
               }}
+              size={'small'}
               type={'primary'}
             >
               {t('edit', { ns: 'common' })}

package/src/locales/default/common.ts

@@ -1,6 +1,10 @@
 export default {
   about: '关于',
   advanceSettings: '高级设置',
+  agentDefaultMessage:
+    '你好，我是你的自定义助手，你可以立即与我开始对话，也可以前往 [助手设置](/chat/{{id}}/setting) 完善我的信息。',
+  agentDefaultMessageWithSystemRole:
+    '你好，我是你的自定义助手，我的角色设定如下: \n\n --- \n\n {{systemRole}} \n\n --- \n\n 立即与我开始对话吧~',
   agentMaxToken: '会话最大长度',
   agentModel: '模型',
   agentProfile: '助手信息',
@@ -31,6 +35,7 @@ export default {
   },
   feedback: '反馈与建议',
   import: '导入配置',
+
   inbox: {
     defaultMessage:
       '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击「+」创建自定义助手',

package/src/pages/chat/features/Conversation/ChatList/index.tsx

@@ -1,15 +1,13 @@
 import { ChatList, RenderErrorMessage, RenderMessage } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
-import { INBOX_SESSION_ID } from '@/const/session';
 import {
   agentSelectors,
   chatSelectors,
-  useSessionHydrated,
+  useSessionChatInit,
   useSessionStore,
 } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
@@ -35,14 +33,13 @@ const renderErrorMessage: RenderErrorMessage = (error, message) => {
 };
 
 const List = () => {
-  const init = useSessionHydrated();
+  const init = useSessionChatInit();
   const { t } = useTranslation('common');
 
-  const data = useSessionStore(chatSelectors.currentChats, isEqual);
+  const data = useSessionStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
 
-  const [isInbox, displayMode, chatLoadingId, deleteMessage, resendMessage, dispatchMessage] =
+  const [displayMode, chatLoadingId, deleteMessage, resendMessage, dispatchMessage] =
     useSessionStore((s) => [
-      s.activeId === INBOX_SESSION_ID,
       agentSelectors.currentAgentConfig(s).displayMode,
       s.chatLoadingId,
       s.deleteMessage,
@@ -81,28 +78,11 @@ const List = () => {
     [chatLoadingId],
   );
 
-  // 针对 inbox 添加初始化时的自定义消息
-  const displayDataSource = useMemo(() => {
-    const emptyGuideMessage = {
-      content: t('inbox.defaultMessage'),
-      createAt: Date.now(),
-      extra: {},
-      id: 'default',
-      meta: {
-        avatar: DEFAULT_INBOX_AVATAR,
-      },
-      role: 'assistant',
-      updateAt: Date.now(),
-    } as ChatMessage;
-
-    return isInbox && data.length === 0 ? [emptyGuideMessage] : data;
-  }, [data]);
-
   return !init ? (
     <SkeletonList />
   ) : (
     <ChatList
-      data={displayDataSource}
+      data={data}
       loadingId={chatLoadingId}
       onActionClick={(key, id) => {
         switch (key) {

package/src/pages/chat/features/Conversation/Input/index.tsx

@@ -21,11 +21,15 @@ const ChatInput = () => {
     s.preference.inputHeight,
     s.updatePreference,
   ]);
-  const [sendMessage, hasTopic, saveToTopic] = useSessionStore((s) => [
-    s.sendMessage,
-    !!s.activeTopicId,
-    s.saveToTopic,
-  ]);
+  const [isLoading, hasTopic, sendMessage, saveToTopic, stopGenerateMessage] = useSessionStore(
+    (s) => [
+      !!s.chatLoadingId,
+      !!s.activeTopicId,
+      s.sendMessage,
+      s.saveToTopic,
+      s.stopGenerateMessage,
+    ],
+  );
 
   const footer = hasTopic ? null : (
     <Tooltip title={t('topic.saveCurrentMessages')}>
@@ -60,10 +64,12 @@ const ChatInput = () => {
         actionsRight={<ActionsRight />}
         expand={expand}
         footer={footer}
+        loading={isLoading}
         minHeight={CHAT_TEXTAREA_HEIGHT}
         onExpandChange={setExpand}
         onInputChange={setText}
         onSend={sendMessage}
+        onStop={stopGenerateMessage}
         placeholder={t('sendPlaceholder')}
         text={{
           send: t('send'),

package/src/pages/chat/features/Header/index.tsx

@@ -11,12 +11,12 @@ import HeaderTitle from '@/components/HeaderTitle';
 import Tag from '@/components/Tag';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
-import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
+import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
 
 import PluginTag from './PluginTag';
 
 const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
-  const init = useSessionHydrated();
+  const init = useSessionChatInit();
 
   const { t } = useTranslation('common');
 

package/src/pages/chat/features/Sidebar/Header.tsx

@@ -1,15 +1,25 @@
+import { createStyles } from 'antd-style';
 import { type ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    z-index: 10;
+    box-shadow: 0 2px 8px ${token.colorBgLayout};
+  `,
+);
+
 interface HeaderProps {
   actions?: ReactNode;
   title: string;
 }
 
 const Header = memo<HeaderProps>(({ title, actions }) => {
+  const { styles } = useStyles();
   return (
     <Flexbox
       align={'center'}
+      className={styles}
       distribution={'space-between'}
       horizontal
       padding={12}

package/src/pages/chat/features/Sidebar/SystemRole.tsx

@@ -7,13 +7,17 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import Header from '@/pages/chat/features/Sidebar/Header';
-import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
+import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, token }) => ({
   prompt: css`
     overflow-x: hidden;
     overflow-y: auto;
+
+    padding: 0 16px 16px;
+
     opacity: 0.75;
+
     transition: opacity 200ms ${token.motionEaseOut};
 
     &:hover {
@@ -49,7 +53,7 @@ const SystemRole = memo(() => {
     s.updateAgentConfig,
   ]);
 
-  const hydrated = useSessionHydrated();
+  const init = useSessionChatInit();
   const { t } = useTranslation('common');
   return (
     <Flexbox height={'fit-content'}>
@@ -64,8 +68,10 @@ const SystemRole = memo(() => {
         }
         title={t('settingAgent.prompt.title', { ns: 'setting' })}
       />
-      <Flexbox className={styles.promptBox} height={200} padding={'0 16px 16px'}>
-        {hydrated ? (
+      <Flexbox className={styles.promptBox} height={200}>
+        {!init ? (
+          <Skeleton active avatar={false} round style={{ marginTop: 12 }} title={false} />
+        ) : (
           <>
             <EditableMessage
               classNames={{ markdown: styles.prompt }}
@@ -86,8 +92,6 @@ const SystemRole = memo(() => {
             />
             <div className={styles.promptMask} />
           </>
-        ) : (
-          <Skeleton active avatar={false} style={{ marginTop: 12 }} title={false} />
         )}
       </Flexbox>
     </Flexbox>

package/src/pages/chat/features/Sidebar/Topic/index.tsx

@@ -5,13 +5,13 @@ import { Flexbox } from 'react-layout-kit';
 
 import Empty from '@/components/Empty';
 import { useGlobalStore } from '@/store/global';
-import { topicSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
+import { topicSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
 
 import SkeletonList from './SkeletonList';
 import TopicItem from './TopicItem';
 
 export const Topic = () => {
-  const hydrated = useSessionHydrated();
+  const init = useSessionChatInit();
   const topics = useSessionStore(topicSelectors.currentTopics, isEqual);
   const { isDarkMode } = useThemeMode();
   const [activeTopicId] = useSessionStore((s) => [s.activeTopicId]);
@@ -22,7 +22,7 @@ export const Topic = () => {
     s.updateGuideState,
   ]);
 
-  return !hydrated ? (
+  return !init ? (
     <SkeletonList />
   ) : (
     <Flexbox gap={2} style={{ marginBottom: 12 }}>

package/src/plugins/type.ts

@@ -1,17 +1,59 @@
 import { ChatCompletionFunctions } from 'openai-edge/types/api';
 import { ReactNode } from 'react';
 
+/**
+ * 插件项
+ * @template Result - 结果类型，默认为 any
+ * @template RunnerParams - 运行参数类型，默认为 any
+ */
 export interface PluginItem<Result = any, RunnerParams = any> {
+  /**
+   * 头像
+   */
   avatar: string;
+  /**
+   * 名称
+   */
   name: string;
+  /**
+   * 运行器
+   * @param params - 运行参数
+   * @returns 运行结果的 Promise
+   */
   runner: PluginRunner<RunnerParams, Result>;
+  /**
+   * 聊天完成函数的模式
+   */
   schema: ChatCompletionFunctions;
 }
+
+/**
+ * 插件渲染函数
+ * @param props - 插件渲染属性
+ * @returns React 节点
+ */
 export type PluginRender = (props: PluginRenderProps) => ReactNode;
 
+/**
+ * 插件运行器
+ * @template Params - 参数类型，默认为 object
+ * @template Result - 结果类型，默认为 any
+ * @param params - 运行参数
+ * @returns 运行结果的 Promise
+ */
 export type PluginRunner<Params = object, Result = any> = (params: Params) => Promise<Result>;
 
+/**
+ * 插件渲染属性
+ * @template Result - 结果类型，默认为 any
+ */
 export interface PluginRenderProps<Result = any> {
+  /**
+   * 内容
+   */
   content: Result;
+  /**
+   * 名称
+   */
   name: string;
 }

package/src/store/session/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useOnFinishHydrationSession';
+export * from './useSessionChatInit';
 export * from './useSessionHydrated';

package/src/store/session/hooks/useSessionChatInit.ts

@@ -0,0 +1,12 @@
+import { useSessionStore } from '../store';
+import { useSessionHydrated } from './useSessionHydrated';
+
+/**
+ * 用于判断某个会话是否完全被激活
+ */
+export const useSessionChatInit = () => {
+  const sessionHydrated = useSessionHydrated();
+  const [hasActive] = useSessionStore((s) => [!!s.activeId]);
+
+  return sessionHydrated && hasActive;
+};

package/src/store/session/slices/chat/actions/message.ts

@@ -46,7 +46,6 @@ export interface ChatMessageAction {
     messages: ChatMessage[],
     assistantMessageId: string,
   ) => Promise<{ isFunctionCall: boolean }>;
-
   /**
    * 实际获取 AI 响应
    *
@@ -54,17 +53,24 @@ export interface ChatMessageAction {
    * @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>;
+
+  stopGenerateMessage: () => void;
+  toggleChatLoading: (
+    loading: boolean,
+    id?: string,
+    action?: string,
+  ) => AbortController | undefined;
   triggerFunctionCall: (id: string) => Promise<void>;
 }
 
@@ -97,14 +103,15 @@ export const chatMessage: StateCreator<
 
     get().dispatchSession({ chats, id: activeId, type: 'updateSessionChat' });
   },
-
   generateMessage: async (messages, assistantId) => {
-    const { dispatchMessage } = get();
-    set(
-      { chatLoadingId: assistantId },
-      false,
-      t('generateMessage(start)', { assistantId, messages }),
+    const { dispatchMessage, toggleChatLoading } = get();
+
+    const abortController = toggleChatLoading(
+      true,
+      assistantId,
+      t('generateMessage(start)', { assistantId, messages }) as string,
     );
+
     const config = agentSelectors.currentAgentConfig(get());
 
     const compiler = template(config.inputTemplate, { interpolate: /{{([\S\s]+?)}}/g });
@@ -138,12 +145,15 @@ export const chatMessage: StateCreator<
     }
 
     const fetcher = () =>
-      fetchChatModel({
-        messages: postMessages,
-        model: config.model,
-        ...config.params,
-        plugins: config.plugins,
-      });
+      fetchChatModel(
+        {
+          messages: postMessages,
+          model: config.model,
+          ...config.params,
+          plugins: config.plugins,
+        },
+        { signal: abortController?.signal },
+      );
 
     let output = '';
     let isFunctionCall = false;
@@ -175,7 +185,7 @@ export const chatMessage: StateCreator<
       },
     });
 
-    set({ chatLoadingId: undefined }, false, t('generateMessage(end)'));
+    toggleChatLoading(false, undefined, t('generateMessage(end)') as string);
 
     return { isFunctionCall };
   },
@@ -281,8 +291,27 @@ export const chatMessage: StateCreator<
     }
   },
 
+  stopGenerateMessage: () => {
+    const { abortController, toggleChatLoading } = get();
+    if (!abortController) return;
+
+    abortController.abort();
+
+    toggleChatLoading(false);
+  },
+
+  toggleChatLoading: (loading, id, action) => {
+    if (loading) {
+      const abortController = new AbortController();
+      set({ abortController, chatLoadingId: id }, false, action);
+      return abortController;
+    } else {
+      set({ abortController: undefined, chatLoadingId: undefined }, false, action);
+    }
+  },
+
   triggerFunctionCall: async (id) => {
-    const { dispatchMessage, realFetchAIResponse } = get();
+    const { dispatchMessage, realFetchAIResponse, toggleChatLoading } = get();
     const session = sessionSelectors.currentSession(get());
 
     if (!session) return;
@@ -317,7 +346,9 @@ export const chatMessage: StateCreator<
     //   type: 'addMessage',
     // });
 
-    const data = await fetchPlugin(payload);
+    const abortController = toggleChatLoading(true, id);
+    const data = await fetchPlugin(payload, { signal: abortController?.signal });
+    toggleChatLoading(false);
 
     dispatchMessage({ id, key: 'content', type: 'updateMessage', value: data });
 
@@ -325,7 +356,6 @@ export const chatMessage: StateCreator<
 
     await realFetchAIResponse(chats, message.id);
   },
-
   // genShareUrl: () => {
   //   const session = sessionSelectors.currentSession(get());
   //   if (!session) return '';

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

@@ -1,4 +1,5 @@
 export interface ChatState {
+  abortController?: AbortController;
   activeTopicId?: string;
   chatLoadingId?: string;
   renameTopicId?: string;

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

@@ -1,4 +1,7 @@
-import { DEFAULT_USER_AVATAR } from '@/const/meta';
+import { t } from 'i18next';
+
+import { DEFAULT_INBOX_AVATAR, DEFAULT_USER_AVATAR } from '@/const/meta';
+import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
 import { ChatMessage } from '@/types/chatMessage';
 
@@ -6,6 +9,7 @@ import type { SessionStore } from '../../../store';
 import { agentSelectors } from '../../agentConfig';
 import { sessionSelectors } from '../../session/selectors';
 import { getSlicedMessagesWithConfig } from '../utils';
+import { currentTopics } from './topic';
 import { organizeChats } from './utils';
 
 export const getChatsById =
@@ -36,6 +40,37 @@ export const currentChats = (s: SessionStore): ChatMessage[] => {
   return getChatsById(s.activeId)(s);
 };
 
+// 针对新助手添加初始化时的自定义消息
+export const currentChatsWithGuideMessage = (s: SessionStore): ChatMessage[] => {
+  const data = currentChats(s);
+  const noTopic = currentTopics(s);
+
+  const isBrandNewChat = data.length === 0 && noTopic;
+
+  if (!isBrandNewChat) return data;
+
+  const [activeId, isInbox] = [s.activeId, s.activeId === INBOX_SESSION_ID];
+  const systemRole = agentSelectors.currentAgentSystemRole(s);
+
+  const emptyInboxGuideMessage = {
+    content: isInbox
+      ? t('inbox.defaultMessage')
+      : !!systemRole
+      ? t('agentDefaultMessageWithSystemRole', { systemRole })
+      : t('agentDefaultMessage', { id: activeId }),
+    createAt: Date.now(),
+    extra: {},
+    id: 'default',
+    meta: {
+      avatar: DEFAULT_INBOX_AVATAR,
+    },
+    role: 'assistant',
+    updateAt: Date.now(),
+  } as ChatMessage;
+
+  return [emptyInboxGuideMessage];
+};
+
 export const currentChatsWithHistoryConfig = (s: SessionStore): ChatMessage[] => {
   const chats = currentChats(s);
   const config = agentSelectors.currentAgentConfig(s);

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

@@ -1,10 +1,11 @@
-import { currentChats, getChatsById } from './chat';
+import { currentChats, currentChatsWithGuideMessage, getChatsById } from './chat';
 import { chatsTokenCount, systemRoleTokenCount, totalTokenCount } from './token';
 import { currentTopics, getTopicMessages } from './topic';
 
 export const chatSelectors = {
   chatsTokenCount,
   currentChats,
+  currentChatsWithGuideMessage,
   getChatsById,
   systemRoleTokenCount,
   totalTokenCount,

package/vitest.config.ts

@@ -6,6 +6,10 @@ export default defineConfig({
     alias: {
       '@': resolve(__dirname, './src'),
     },
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'lcov', 'text-summary'],
+    },
     environment: 'jsdom',
     globals: true,
   },