@lobehub/chat 0.45.0 → 0.46.1

package/CHANGELOG.md

@@ -2,6 +2,65 @@
 
 # Changelog
 
+### [Version 0.46.1](https://github.com/lobehub/lobe-chat/compare/v0.46.0...v0.46.1)
+
+<sup>Released on **2023-08-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix SystemRole Skeleton padding.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix SystemRole Skeleton padding ([ce485a0](https://github.com/lobehub/lobe-chat/commit/ce485a0))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.45.0",
+  "version": "0.46.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

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/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/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

@@ -13,7 +13,11 @@ 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 {
@@ -64,9 +68,15 @@ const SystemRole = memo(() => {
         }
         title={t('settingAgent.prompt.title', { ns: 'setting' })}
       />
-      <Flexbox className={styles.promptBox} height={200} padding={'0 16px 16px'}>
+      <Flexbox className={styles.promptBox} height={200}>
         {!init ? (
-          <Skeleton active avatar={false} round style={{ marginTop: 12 }} title={false} />
+          <Skeleton
+            active
+            avatar={false}
+            round
+            style={{ marginTop: 12, paddingInline: 16 }}
+            title={false}
+          />
         ) : (
           <>
             <EditableMessage

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/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,
   },