@lobehub/chat 0.118.7 → 0.118.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.118.7",
+  "version": "0.118.9",
   "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",
@@ -32,6 +32,7 @@
     "dev": "next dev -p 3010",
     "docs": "lobe-i18n md && npm run workflow:docs",
     "i18n": "npm run workflow:i18n && lobe-i18n",
+    "i18n-md": "lobe-i18n md",
     "lint": "npm run lint:ts && npm run lint:style && npm run type-check && npm run lint:circular",
     "lint:circular": "dpdm src/**/*.ts  --warning false  --tree false  --exit-code circular:1  -T true",
     "lint:md": "remark . --quiet --frail --output",

package/src/app/chat/(desktop)/features/ChatInput/index.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, ChatInputArea, ChatSendButton } from '@lobehub/ui';
 import { Maximize2, Minimize2 } from 'lucide-react';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -78,6 +78,23 @@ const ChatInputDesktopLayout = memo(() => {
     [expand],
   );
 
+  const hasValue = !!value;
+
+  useEffect(() => {
+    const fn = (e: BeforeUnloadEvent) => {
+      if (hasValue) {
+        // set returnValue to trigger alert modal
+        // Note: No matter what value is set, the browser will display the standard text
+        e.returnValue = '你有正在输入中的内容，确定要离开吗？';
+      }
+    };
+
+    window.addEventListener('beforeunload', fn);
+    return () => {
+      window.removeEventListener('beforeunload', fn);
+    };
+  }, [hasValue]);
+
   return (
     <>
       {canUpload && <DragUpload />}

package/src/locales/resources.ts

@@ -12,6 +12,7 @@ export const locales = [
   'tr-TR',
   'zh-CN',
   'zh-TW',
+  'vi-VN',
 ] as const;
 
 export type DefaultResources = typeof resources;
@@ -96,6 +97,10 @@ export const localeOptions: LocaleOptions = [
     label: 'Italiano',
     value: 'it-IT',
   },
+  {
+    label: 'Tiếng Việt',
+    value: 'vi-VN',
+  },
 ] as LocaleOptions;
 
 export const supportLocales: string[] = [...locales, 'en', 'zh'];

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

@@ -666,4 +666,75 @@ describe('chatMessage actions', () => {
       });
     });
   });
+
+  describe('toggleChatLoading', () => {
+    it('should set loading state and create an AbortController when loading is true', () => {
+      const { result } = renderHook(() => useChatStore());
+      const action = 'loading-action';
+
+      act(() => {
+        result.current.toggleChatLoading(true, 'message-id', action);
+      });
+
+      const state = useChatStore.getState();
+      expect(state.abortController).toBeInstanceOf(AbortController);
+      expect(state.chatLoadingId).toEqual('message-id');
+    });
+
+    it('should clear loading state and abort controller when loading is false', () => {
+      const { result } = renderHook(() => useChatStore());
+      const action = 'stop-loading-action';
+
+      // Set initial loading state
+      act(() => {
+        result.current.toggleChatLoading(true, 'message-id', 'start-loading-action');
+      });
+
+      // Stop loading
+      act(() => {
+        result.current.toggleChatLoading(false, undefined, action);
+      });
+
+      const state = useChatStore.getState();
+      expect(state.abortController).toBeUndefined();
+      expect(state.chatLoadingId).toBeUndefined();
+    });
+
+    it('should attach beforeunload event listener when loading starts', () => {
+      const { result } = renderHook(() => useChatStore());
+      const addEventListenerSpy = vi.spyOn(window, 'addEventListener');
+
+      act(() => {
+        result.current.toggleChatLoading(true, 'message-id', 'loading-action');
+      });
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+    });
+
+    it('should remove beforeunload event listener when loading stops', () => {
+      const { result } = renderHook(() => useChatStore());
+      const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+
+      // Start and then stop loading to trigger the removal of the event listener
+      act(() => {
+        result.current.toggleChatLoading(true, 'message-id', 'start-loading-action');
+        result.current.toggleChatLoading(false, undefined, 'stop-loading-action');
+      });
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+    });
+
+    it('should not create a new AbortController if one already exists', () => {
+      const { result } = renderHook(() => useChatStore());
+      const abortController = new AbortController();
+
+      act(() => {
+        useChatStore.setState({ abortController });
+        result.current.toggleChatLoading(true, 'message-id', 'loading-action');
+      });
+
+      const state = useChatStore.getState();
+      expect(state.abortController).toEqual(abortController);
+    });
+  });
 });

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

@@ -75,6 +75,12 @@ export interface ChatMessageAction {
 
 const getAgentConfig = () => agentSelectors.currentAgentConfig(useSessionStore.getState());
 
+const preventLeavingFn = (e: BeforeUnloadEvent) => {
+  // set returnValue to trigger alert modal
+  // Note: No matter what value is set, the browser will display the standard text
+  e.returnValue = '你有正在生成中的请求，确定要离开吗？';
+};
+
 export const chatMessage: StateCreator<
   ChatStore,
   [['zustand/devtools', never]],
@@ -398,11 +404,16 @@ export const chatMessage: StateCreator<
   },
   toggleChatLoading: (loading, id, action) => {
     if (loading) {
+      window.addEventListener('beforeunload', preventLeavingFn);
+
       const abortController = new AbortController();
       set({ abortController, chatLoadingId: id }, false, action);
+
       return abortController;
     } else {
       set({ abortController: undefined, chatLoadingId: undefined }, false, action);
+
+      window.removeEventListener('beforeunload', preventLeavingFn);
     }
   },
 });