@lobehub/chat 1.49.11 → 1.49.12

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.49.12](https://github.com/lobehub/lobe-chat/compare/v1.49.11...v1.49.12)
+
+<sup>Released on **2025-02-02**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix can not stop generating.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix can not stop generating, closes [#5671](https://github.com/lobehub/lobe-chat/issues/5671) ([ae39c35](https://github.com/lobehub/lobe-chat/commit/ae39c35))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.49.11](https://github.com/lobehub/lobe-chat/compare/v1.49.10...v1.49.11)
 
 <sup>Released on **2025-02-02**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Fix can not stop generating."
+      ]
+    },
+    "date": "2025-02-02",
+    "version": "1.49.12"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.49.11",
+  "version": "1.49.12",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/chat/(workspace)/@portal/_layout/Mobile.tsx

@@ -28,6 +28,7 @@ const Layout = ({ children }: PropsWithChildren) => {
     <Modal
       allowFullscreen
       className={cx(isPortalThread && styles.container)}
+      footer={null}
       height={'95%'}
       onCancel={() => togglePortal(false)}
       open={showMobilePortal}

package/src/app/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
+import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { rgba } from 'polished';
-import { PropsWithChildren, memo } from 'react';
+import { PropsWithChildren, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import {
@@ -13,6 +14,8 @@ import {
 } from '@/const/layoutTokens';
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, portalThreadSelectors } from '@/store/chat/selectors';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   content: css`
@@ -49,6 +52,24 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
     portalThreadSelectors.showThread(s),
   ]);
 
+  const [portalWidth, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.portalWidth(s),
+    s.updateSystemStatus,
+  ]);
+
+  const [tmpWidth, setWidth] = useState(portalWidth);
+  if (tmpWidth !== portalWidth) setWidth(portalWidth);
+
+  const handleSizeChange: DraggablePanelProps['onSizeChange'] = (_, size) => {
+    if (!size) return;
+    const nextWidth = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
+    if (!nextWidth) return;
+
+    if (isEqual(nextWidth, portalWidth)) return;
+    setWidth(nextWidth);
+    updateSystemStatus({ portalWidth: nextWidth });
+  };
+
   return (
     showInspector && (
       <DraggablePanel
@@ -56,6 +77,7 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
         classNames={{
           content: styles.content,
         }}
+        defaultSize={{ width: tmpWidth }}
         expand
         hanlderStyle={{ display: 'none' }}
         maxWidth={CHAT_PORTAL_MAX_WIDTH}
@@ -63,9 +85,11 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
           showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
         }
         mode={md ? 'fixed' : 'float'}
+        onSizeChange={handleSizeChange}
         placement={'right'}
         showHandlerWhenUnexpand={false}
         showHandlerWideArea={false}
+        size={{ height: '100%', width: portalWidth }}
       >
         <DraggablePanelContainer
           style={{

package/src/components/Thinking/index.tsx

@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 import { AnimatePresence, motion } from 'framer-motion';
 import { AtomIcon, ChevronDown, ChevronRight } from 'lucide-react';
 import { rgba } from 'polished';
-import { memo, useEffect, useState } from 'react';
+import { CSSProperties, memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -61,30 +61,26 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 interface ThinkingProps {
   content?: string;
   duration?: number;
+  style?: CSSProperties;
   thinking?: boolean;
 }
 
-const Thinking = memo<ThinkingProps>(({ content, duration, thinking }) => {
+const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style }) => {
   const { t } = useTranslation(['components', 'common']);
   const { styles, cx } = useStyles();
 
   const [showDetail, setShowDetail] = useState(false);
 
   useEffect(() => {
-    if (thinking && !content) {
-      setShowDetail(true);
-    }
-
-    if (!thinking) {
-      setShowDetail(false);
-    }
-  }, [thinking, content]);
+    setShowDetail(!!thinking);
+  }, [thinking]);
 
   return (
-    <Flexbox className={cx(styles.container, showDetail && styles.expand)} gap={16}>
+    <Flexbox className={cx(styles.container, showDetail && styles.expand)} gap={16} style={style}>
       <Flexbox
         distribution={'space-between'}
         flex={1}
+        gap={8}
         horizontal
         onClick={() => {
           setShowDetail(!showDetail);
@@ -92,18 +88,20 @@ const Thinking = memo<ThinkingProps>(({ content, duration, thinking }) => {
         style={{ cursor: 'pointer' }}
       >
         {thinking ? (
-          <Flexbox gap={8} horizontal>
+          <Flexbox align={'center'} gap={8} horizontal>
             <Icon icon={AtomIcon} />
             <Flexbox className={styles.shinyText} horizontal>
               {t('Thinking.thinking')}
             </Flexbox>
           </Flexbox>
         ) : (
-          <Flexbox gap={8} horizontal>
+          <Flexbox align={'center'} gap={8} horizontal>
             <Icon icon={AtomIcon} />
-            {!duration
-              ? t('Thinking.thoughtWithDuration')
-              : t('Thinking.thought', { duration: ((duration || 0) / 1000).toFixed(1) })}
+            <Flexbox>
+              {!duration
+                ? t('Thinking.thoughtWithDuration')
+                : t('Thinking.thought', { duration: ((duration || 0) / 1000).toFixed(1) })}
+            </Flexbox>
           </Flexbox>
         )}
         <Flexbox gap={4} horizontal>

package/src/config/modelProviders/siliconcloud.ts

@@ -1,6 +1,6 @@
 import { ModelProviderCard } from '@/types/llm';
 
-// ref :https://siliconflow.cn/zh-cn/pricing
+// ref: https://siliconflow.cn/zh-cn/pricing
 const SiliconCloud: ModelProviderCard = {
   chatModels: [
     {
@@ -582,7 +582,7 @@ const SiliconCloud: ModelProviderCard = {
       vision: true,
     },
   ],
-  checkModel: 'Qwen/Qwen2.5-7B-Instruct',
+  checkModel: 'Pro/Qwen/Qwen2-1.5B-Instruct',
   description: 'SiliconCloud，基于优秀开源基础模型的高性价比 GenAI 云服务',
   id: 'siliconcloud',
   modelList: { showModelFetcher: true },

package/src/features/Conversation/components/MarkdownElements/LobeThinking/Render.tsx

@@ -1,14 +1,9 @@
-import { Icon } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { BringToFrontIcon, ChevronDown, ChevronRight, Loader2Icon } from 'lucide-react';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { memo } from 'react';
 
+import Thinking from '@/components/Thinking';
 import { ARTIFACT_THINKING_TAG } from '@/const/plugin';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { dotLoading } from '@/styles/loading';
 
 import { MarkdownElementProps } from '../type';
 
@@ -22,64 +17,18 @@ export const isLobeThinkingClosed = (input: string = '') => {
   return input.includes(openTag) && input.includes(closeTag);
 };
 
-const useStyles = createStyles(({ css, token }) => ({
-  container: css`
-    cursor: pointer;
-
-    padding-block: 8px;
-    padding-inline: 12px;
-    padding-inline-end: 12px;
-    border-radius: 8px;
-
-    color: ${token.colorText};
-
-    background: ${token.colorFillQuaternary};
-  `,
-  title: css`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    font-size: 12px;
-    text-overflow: ellipsis;
-  `,
-}));
-
 const Render = memo<MarkdownElementProps>(({ children, id }) => {
-  const { t } = useTranslation('chat');
-  const { styles, cx } = useStyles();
-
   const [isGenerating] = useChatStore((s) => {
     const message = chatSelectors.getMessageById(id)(s);
     return [!isLobeThinkingClosed(message?.content)];
   });
 
-  const [showDetail, setShowDetail] = useState(false);
-
-  const expand = showDetail || isGenerating;
   return (
-    <Flexbox
-      className={styles.container}
-      gap={16}
-      onClick={() => {
-        setShowDetail(!showDetail);
-      }}
-      width={'100%'}
-    >
-      <Flexbox distribution={'space-between'} flex={1} horizontal>
-        <Flexbox gap={8} horizontal>
-          <Icon icon={isGenerating ? Loader2Icon : BringToFrontIcon} spin={isGenerating} />
-          {isGenerating ? (
-            <span className={cx(dotLoading)}>{t('artifact.thinking')}</span>
-          ) : (
-            t('artifact.thought')
-          )}
-        </Flexbox>
-        <Icon icon={expand ? ChevronDown : ChevronRight} />
-      </Flexbox>
-      {expand && children}
-    </Flexbox>
+    <Thinking
+      content={children as string}
+      style={{ width: isGenerating ? '100%' : undefined }}
+      thinking={isGenerating}
+    />
   );
 });
 

package/src/libs/agent-runtime/siliconcloud/index.ts

@@ -1,4 +1,5 @@
-import { ModelProvider } from '../types';
+import { AgentRuntimeErrorType } from '../error';
+import { ChatCompletionErrorPayload, ModelProvider } from '../types';
 import { LobeOpenAICompatibleFactory } from '../utils/openaiCompatibleFactory';
 
 import { LOBE_DEFAULT_MODEL_LIST } from '@/config/aiModels';
@@ -10,6 +11,33 @@ export interface SiliconCloudModelCard {
 export const LobeSiliconCloudAI = LobeOpenAICompatibleFactory({
   baseURL: 'https://api.siliconflow.cn/v1',
   chatCompletion: {
+    handleError: (error: any): Omit<ChatCompletionErrorPayload, 'provider'> | undefined => {
+      let errorResponse: Response | undefined;
+      if (error instanceof Response) {
+        errorResponse = error;
+      } else if ('status' in (error as any)) {
+        errorResponse = error as Response;
+      }
+      if (errorResponse) {
+        if (errorResponse.status === 401) {
+          return {
+            error: errorResponse.status,
+            errorType: AgentRuntimeErrorType.InvalidProviderAPIKey,
+          };
+        }
+
+        if (errorResponse.status === 403) {
+          return {
+            error: errorResponse.status,
+            errorType: AgentRuntimeErrorType.ProviderBizError,
+            message: '请检查 API Key 余额是否充足，或者是否在用未实名的 API Key 访问需要实名的模型。',
+          };
+        }
+      }
+      return {
+        error,
+      };
+    },
     handlePayload: (payload) => {
       return {
         ...payload,
@@ -20,6 +48,10 @@ export const LobeSiliconCloudAI = LobeOpenAICompatibleFactory({
   debug: {
     chatCompletion: () => process.env.DEBUG_SILICONCLOUD_CHAT_COMPLETION === '1',
   },
+  errorType: {
+    bizError: AgentRuntimeErrorType.ProviderBizError,
+    invalidAPIKey: AgentRuntimeErrorType.InvalidProviderAPIKey,
+  },
   models: {
     transformModel: (m) => {
       const functionCallKeywords = [

package/src/store/chat/slices/aiChat/actions/__tests__/generateAIChat.test.ts

@@ -576,7 +576,7 @@ describe('chatMessage actions', () => {
       const abortController = new AbortController();
 
       act(() => {
-        useChatStore.setState({ abortController });
+        useChatStore.setState({ chatLoadingIdsAbortController: abortController });
       });
 
       await act(async () => {
@@ -596,18 +596,18 @@ describe('chatMessage actions', () => {
 
       await act(async () => {
         // 确保没有设置 abortController
-        useChatStore.setState({ abortController: undefined });
+        useChatStore.setState({ chatLoadingIdsAbortController: undefined });
 
         result.current.stopGenerateMessage();
       });
 
       // 由于没有 abortController，不应调用任何方法
-      expect(result.current.abortController).toBeUndefined();
+      expect(result.current.chatLoadingIdsAbortController).toBeUndefined();
     });
 
     it('should return early if abortController is undefined', () => {
       act(() => {
-        useChatStore.setState({ abortController: undefined });
+        useChatStore.setState({ chatLoadingIdsAbortController: undefined });
       });
 
       const { result } = renderHook(() => useChatStore());
@@ -625,7 +625,7 @@ describe('chatMessage actions', () => {
       const abortMock = vi.fn();
       const abortController = { abort: abortMock } as unknown as AbortController;
       act(() => {
-        useChatStore.setState({ abortController });
+        useChatStore.setState({ chatLoadingIdsAbortController: abortController });
       });
       const { result } = renderHook(() => useChatStore());
 
@@ -639,7 +639,7 @@ describe('chatMessage actions', () => {
     it('should call internal_toggleChatLoading with correct parameters', () => {
       const abortController = new AbortController();
       act(() => {
-        useChatStore.setState({ abortController });
+        useChatStore.setState({ chatLoadingIdsAbortController: abortController });
       });
       const { result } = renderHook(() => useChatStore());
       const spy = vi.spyOn(result.current, 'internal_toggleChatLoading');
@@ -868,7 +868,7 @@ describe('chatMessage actions', () => {
       });
 
       const state = useChatStore.getState();
-      expect(state.abortController).toBeInstanceOf(AbortController);
+      expect(state.chatLoadingIdsAbortController).toBeInstanceOf(AbortController);
       expect(state.chatLoadingIds).toEqual(['message-id']);
     });
 
@@ -887,7 +887,7 @@ describe('chatMessage actions', () => {
       });
 
       const state = useChatStore.getState();
-      expect(state.abortController).toBeUndefined();
+      expect(state.chatLoadingIdsAbortController).toBeUndefined();
       expect(state.chatLoadingIds).toEqual([]);
     });
 
@@ -920,12 +920,12 @@ describe('chatMessage actions', () => {
       const abortController = new AbortController();
 
       act(() => {
-        useChatStore.setState({ abortController });
+        useChatStore.setState({ chatLoadingIdsAbortController: abortController });
         result.current.internal_toggleChatLoading(true, 'message-id', 'loading-action');
       });
 
       const state = useChatStore.getState();
-      expect(state.abortController).toEqual(abortController);
+      expect(state.chatLoadingIdsAbortController).toEqual(abortController);
     });
   });
 

package/src/store/chat/slices/aiChat/actions/generateAIChat.ts

@@ -267,10 +267,11 @@ export const generateAIChat: StateCreator<
     await Promise.all([summaryTitle(), addFilesToAgent()]);
   },
   stopGenerateMessage: () => {
-    const { abortController, internal_toggleChatLoading } = get();
-    if (!abortController) return;
+    const { chatLoadingIdsAbortController, internal_toggleChatLoading } = get();
 
-    abortController.abort(MESSAGE_CANCEL_FLAT);
+    if (!chatLoadingIdsAbortController) return;
+
+    chatLoadingIdsAbortController.abort(MESSAGE_CANCEL_FLAT);
 
     internal_toggleChatLoading(false, undefined, n('stopGenerateMessage') as string);
   },

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

@@ -1,9 +1,9 @@
 export interface ChatAIChatState {
-  abortController?: AbortController;
   /**
    * is the AI message is generating
    */
   chatLoadingIds: string[];
+  chatLoadingIdsAbortController?: AbortController;
   inputFiles: File[];
   inputMessage: string;
   /**

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

@@ -368,13 +368,14 @@ export const chatMessage: StateCreator<
     );
   },
   internal_toggleLoadingArrays: (key, loading, id, action) => {
+    const abortControllerKey = `${key}AbortController`;
     if (loading) {
       window.addEventListener('beforeunload', preventLeavingFn);
 
       const abortController = new AbortController();
       set(
         {
-          abortController,
+          [abortControllerKey]: abortController,
           [key]: toggleBooleanList(get()[key] as string[], id!, loading),
         },
         false,
@@ -384,11 +385,11 @@ export const chatMessage: StateCreator<
       return abortController;
     } else {
       if (!id) {
-        set({ abortController: undefined, [key]: [] }, false, action);
+        set({ [abortControllerKey]: undefined, [key]: [] }, false, action);
       } else
         set(
           {
-            abortController: undefined,
+            [abortControllerKey]: undefined,
             [key]: toggleBooleanList(get()[key] as string[], id, loading),
           },
           false,

package/src/store/global/initialState.ts

@@ -52,6 +52,7 @@ export interface SystemStatus {
   latestChangelogId?: string;
   mobileShowPortal?: boolean;
   mobileShowTopic?: boolean;
+  portalWidth: number;
   sessionsWidth: number;
   showChatSideBar?: boolean;
   showFilePanel?: boolean;
@@ -86,6 +87,7 @@ export const INITIAL_STATUS = {
   hideThreadLimitAlert: false,
   inputHeight: 200,
   mobileShowTopic: false,
+  portalWidth: 400,
   sessionsWidth: 320,
   showChatSideBar: true,
   showFilePanel: true,

package/src/store/global/selectors.ts

@@ -20,6 +20,7 @@ const hidePWAInstaller = (s: GlobalStore) => s.status.hidePWAInstaller;
 const showChatHeader = (s: GlobalStore) => !s.status.zenMode;
 const inZenMode = (s: GlobalStore) => s.status.zenMode;
 const sessionWidth = (s: GlobalStore) => s.status.sessionsWidth;
+const portalWidth = (s: GlobalStore) => s.status.portalWidth || 400;
 const filePanelWidth = (s: GlobalStore) => s.status.filePanelWidth;
 const inputHeight = (s: GlobalStore) => s.status.inputHeight;
 const threadInputHeight = (s: GlobalStore) => s.status.threadInputHeight;
@@ -59,6 +60,7 @@ export const systemStatusSelectors = {
   isPgliteNotInited,
   mobileShowPortal,
   mobileShowTopic,
+  portalWidth,
   sessionGroupKeys,
   sessionWidth,
   showChatHeader,