@lobehub/chat 0.159.8 → 0.159.10

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.159.10](https://github.com/lobehub/lobe-chat/compare/v0.159.9...v0.159.10)
+
+<sup>Released on **2024-05-15**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix setting modal on responsive and some other style problem.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix setting modal on responsive and some other style problem, closes [#2512](https://github.com/lobehub/lobe-chat/issues/2512) ([f6b4ca4](https://github.com/lobehub/lobe-chat/commit/f6b4ca4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.159.9](https://github.com/lobehub/lobe-chat/compare/v0.159.8...v0.159.9)
+
+<sup>Released on **2024-05-14**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix agent config on page init.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix agent config on page init, closes [#2506](https://github.com/lobehub/lobe-chat/issues/2506) ([90e742d](https://github.com/lobehub/lobe-chat/commit/90e742d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.159.8](https://github.com/lobehub/lobe-chat/compare/v0.159.7...v0.159.8)
 
 <sup>Released on **2024-05-14**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.159.8",
+  "version": "0.159.10",
   "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",
@@ -96,7 +96,7 @@
     "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/icons": "latest",
     "@lobehub/tts": "latest",
-    "@lobehub/ui": "^1.138.23",
+    "@lobehub/ui": "^1.138.24",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@next/third-parties": "^14.2.3",
     "@sentry/nextjs": "^7.114.0",

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/index.tsx

@@ -113,6 +113,6 @@ TopicListContent.displayName = 'TopicListContent';
 
 export default memo(() => (
   <Suspense fallback={<SkeletonList />}>
-    <TopicListContent />;
+    <TopicListContent />
   </Suspense>
 ));

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

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useInitAgentConfig } from '@/app/(main)/chat/(workspace)/_layout/useInitAgentConfig';
+import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
@@ -45,7 +46,7 @@ const Main = memo(() => {
       />
     </Flexbox>
   ) : (
-    <Flexbox align={'flex-start'} gap={12} horizontal>
+    <Flexbox align={'center'} gap={4} horizontal>
       {
         <ActionIcon
           aria-label={t('agentsAndConversations')}
@@ -57,7 +58,7 @@ const Main = memo(() => {
               showSessionPanel: !currentShowSessionPanel,
             });
           }}
-          size="large"
+          size={DESKTOP_HEADER_ICON_SIZE}
           title={t('agentsAndConversations')}
         />
       }

package/src/app/(main)/chat/(workspace)/_layout/useInitAgentConfig.ts

@@ -1,30 +1,10 @@
-import { useEffect } from 'react';
-
 import { useAgentStore } from '@/store/agent';
-import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 
 export const useInitAgentConfig = () => {
   const [useFetchAgentConfig] = useAgentStore((s) => [s.useFetchAgentConfig]);
 
-  const [switchTopic] = useChatStore((s) => [s.switchTopic]);
   const [sessionId] = useSessionStore((s) => [s.activeId]);
 
-  useEffect(() => {
-    // // when activeId changed, switch topic to undefined
-    const unsubscribe = useSessionStore.subscribe(
-      (s) => s.activeId,
-      (activeId) => {
-        switchTopic();
-
-        useAgentStore.setState({ activeId }, false, 'updateActiveId');
-      },
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
   return useFetchAgentConfig(sessionId);
 };

package/src/app/(main)/chat/@session/features/SessionHydration.tsx

@@ -1,32 +1,35 @@
 'use client';
 
-import { useResponsive } from 'antd-style';
 import { useQueryState } from 'nuqs';
 import { parseAsString } from 'nuqs/server';
 import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { useAgentStore } from '@/store/agent';
+import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 
 // sync outside state to useSessionStore
 const SessionHydration = memo(() => {
   const useStoreUpdater = createStoreUpdater(useSessionStore);
-
-  // TODO: 后面考虑可以删除了，用 useServerConfigStore 就不需要再这里注入了
-  const { mobile } = useResponsive();
-  useStoreUpdater('isMobile', mobile);
+  const useAgentStoreUpdater = createStoreUpdater(useAgentStore);
+  const [switchTopic] = useChatStore((s) => [s.switchTopic]);
 
   // two-way bindings the url and session store
   const [session, setSession] = useQueryState(
     'session',
-    parseAsString.withDefault('inbox').withOptions({ history: 'replace', throttleMs: 500 }),
+    parseAsString.withDefault('inbox').withOptions({ history: 'replace', throttleMs: 50 }),
   );
   useStoreUpdater('activeId', session);
+  useAgentStoreUpdater('activeId', session);
 
   useEffect(() => {
     const unsubscribe = useSessionStore.subscribe(
       (s) => s.activeId,
-      (state) => setSession(state),
+      (state) => {
+        switchTopic();
+        setSession(state);
+      },
     );
 
     return () => {

package/src/app/(main)/market/@detail/features/Header.tsx

@@ -3,7 +3,7 @@ import { App, Button, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { startCase } from 'lodash-es';
 import { useRouter } from 'next/navigation';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -23,7 +23,7 @@ const Header = memo(() => {
   const { styles } = useStyles();
   const createSession = useSessionStore((s) => s.createSession);
   const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem, isEqual);
-
+  const [isLoading, setIsLoading] = useState(false);
   const { message } = App.useApp();
 
   const { meta, createAt, author, homepage, config } = agentItem;
@@ -34,15 +34,19 @@ const Header = memo(() => {
   const handleAddAgentAndConverse = async () => {
     if (!agentItem) return;
 
+    setIsLoading(true);
     const session = await createSession({ config, meta });
+    setIsLoading(false);
     message.success(t('addAgentSuccess'));
     router.push(SESSION_CHAT_URL(session, isMobile));
   };
 
-  const handleAddAgent = () => {
+  const handleAddAgent = async () => {
     if (!agentItem) return;
+    setIsLoading(true);
     createSession({ config, meta }, false);
     message.success(t('addAgentSuccess'));
+    setIsLoading(false);
   };
 
   return (
@@ -56,10 +60,10 @@ const Header = memo(() => {
         ))}
       </Center>
       <div className={styles.desc}>{description}</div>
-      <Button block onClick={handleAddAgentAndConverse} type={'primary'}>
+      <Button block loading={isLoading} onClick={handleAddAgentAndConverse} type={'primary'}>
         {t('addAgentAndConverse')}
       </Button>
-      <Button block onClick={handleAddAgent}>
+      <Button block loading={isLoading} onClick={handleAddAgent}>
         {t('addAgent')}
       </Button>
       <Flexbox align={'center'} gap={12} horizontal>

package/src/app/(main)/settings/_layout/Desktop/Header.tsx

@@ -1,20 +1,15 @@
 'use client';
 
 import { ActionIcon, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
-import { Drawer, type DrawerProps, Tag } from 'antd';
+import { type DrawerProps, Popover } from 'antd';
 import { createStyles } from 'antd-style';
 import { Menu } from 'lucide-react';
-import { PropsWithChildren, memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import BrandWatermark from '@/components/BrandWatermark';
-import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
-import { SettingsTabs } from '@/store/global/initialState';
+import { PropsWithChildren, memo } from 'react';
 
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
     position: relative;
+    flex: none;
     height: 54px;
     background: ${token.colorBgContainer};
   `,
@@ -25,68 +20,33 @@ const useStyles = createStyles(({ token, css }) => ({
   `,
 }));
 
-const Header = memo<PropsWithChildren & Pick<DrawerProps, 'getContainer'>>(
-  ({ children, getContainer }) => {
-    const [open, setOpen] = useState(false);
-    const { styles, theme } = useStyles();
-    const { t } = useTranslation('setting');
-
-    const activeKey = useActiveSettingsKey();
+const Header = memo<PropsWithChildren & Pick<DrawerProps, 'getContainer'>>(({ children }) => {
+  const { styles, theme } = useStyles();
 
-    return (
-      <>
-        <ChatHeader
-          className={styles.container}
-          left={
-            <div style={{ paddingLeft: 8 }}>
-              <ChatHeaderTitle
-                title={
-                  <Flexbox align={'center'} className={styles.title} gap={4} horizontal>
-                    <ActionIcon
-                      color={theme.colorText}
-                      icon={Menu}
-                      onClick={() => setOpen(true)}
-                      size={{ blockSize: 32, fontSize: 18 }}
-                    />
-                    {t(`tab.${activeKey}`)}
-                    {activeKey === SettingsTabs.Sync && (
-                      <Tag color={'gold'}>{t('tab.experiment')}</Tag>
-                    )}
-                  </Flexbox>
-                }
+  return (
+    <ChatHeader
+      className={styles.container}
+      left={
+        <ChatHeaderTitle
+          title={
+            <Popover
+              arrow={false}
+              content={children}
+              overlayInnerStyle={{ minWidth: 240, padding: '2px 4px' }}
+              placement={'bottomLeft'}
+              trigger={['click']}
+            >
+              <ActionIcon
+                color={theme.colorText}
+                icon={Menu}
+                size={{ blockSize: 32, fontSize: 18 }}
               />
-            </div>
+            </Popover>
           }
         />
-        <Drawer
-          bodyStyle={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 20,
-            justifyContent: 'space-between',
-            padding: 16,
-          }}
-          getContainer={getContainer}
-          headerStyle={{ display: 'none' }}
-          maskStyle={{ background: 'transparent' }}
-          onClick={() => setOpen(false)}
-          onClose={() => setOpen(false)}
-          open={open}
-          placement={'left'}
-          rootStyle={{ position: 'absolute' }}
-          style={{
-            background: theme.colorBgContainer,
-            borderRight: `1px solid ${theme.colorSplit}`,
-          }}
-          width={260}
-          zIndex={10}
-        >
-          {children}
-          <BrandWatermark paddingInline={12} />
-        </Drawer>
-      </>
-    );
-  },
-);
+      }
+    />
+  );
+});
 
 export default Header;

package/src/app/@modal/_layout/SettingModalLayout.tsx

@@ -18,11 +18,11 @@ const SettingModalLayout = memo<SettingLayoutProps>(({ children, category, desc,
   const ref = useRef<any>(null);
   const theme = useTheme();
   const { isDarkMode } = useThemeMode();
-  const { md = true } = useResponsive();
+  const { mobile = false } = useResponsive();
 
   return (
-    <>
-      {md ? (
+    <Flexbox horizontal={!mobile} width={'100%'}>
+      {!mobile ? (
         <SideBar
           desc={desc}
           style={{
@@ -38,19 +38,25 @@ const SettingModalLayout = memo<SettingLayoutProps>(({ children, category, desc,
       )}
       <Flexbox
         align={'center'}
-        gap={64}
+        gap={mobile ? 0 : 64}
+        ref={ref}
         style={{
-          background: isDarkMode ? theme.colorFillQuaternary : theme.colorBgElevated,
+          background: mobile
+            ? theme.colorBgContainer
+            : isDarkMode
+              ? theme.colorFillQuaternary
+              : theme.colorBgElevated,
+          minHeight: '100%',
           overflowX: 'hidden',
           overflowY: 'auto',
-          paddingBlock: 40,
-          paddingInline: 56,
+          paddingBlock: mobile ? 0 : 40,
+          paddingInline: mobile ? 0 : 56,
         }}
         width={'100%'}
       >
         {children}
       </Flexbox>
-    </>
+    </Flexbox>
   );
 });
 

package/src/components/404/index.tsx

@@ -12,7 +12,7 @@ import { MAX_WIDTH } from '@/const/layoutTokens';
 const NotFound = memo(() => {
   const { t } = useTranslation('error');
   return (
-    <Flexbox align={'center'} justify={'center'} style={{ height: '100%', width: '100%' }}>
+    <Flexbox align={'center'} justify={'center'} style={{ minHeight: '100%', width: '100%' }}>
       <h1
         style={{
           filter: 'blur(8px)',

package/src/components/Error/index.tsx

@@ -24,7 +24,7 @@ const ErrorCapture = memo<ErrorCaptureProps>(({ reset, error }) => {
   }, [error]);
 
   return (
-    <Flexbox align={'center'} justify={'center'} style={{ height: '100%', width: '100%' }}>
+    <Flexbox align={'center'} justify={'center'} style={{ minHeight: '100%', width: '100%' }}>
       <h1
         style={{
           filter: 'blur(8px)',

package/src/hooks/useActiveSettingsKey.ts

@@ -1,5 +1,6 @@
 import { usePathname } from 'next/navigation';
 
+import { useQuery } from '@/hooks/useQuery';
 import { SettingsTabs } from '@/store/global/initialState';
 
 /**
@@ -7,10 +8,13 @@ import { SettingsTabs } from '@/store/global/initialState';
  */
 export const useActiveSettingsKey = () => {
   const pathname = usePathname();
+  const { tab } = useQuery();
 
   const tabs = pathname.split('/').at(-1);
 
   if (tabs === 'settings') return SettingsTabs.Common;
 
+  if (tabs === 'modal') return tab as SettingsTabs;
+
   return tabs as SettingsTabs;
 };

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

@@ -101,9 +101,6 @@ describe('SessionAction', () => {
       expect(call[1]).toMatchObject({ config: { displayMode: 'docs' } });
 
       expect(createdSessionId).toBe(newSessionId);
-      expect(mockRouterPush).not.toHaveBeenCalledWith(
-        SESSION_CHAT_URL(newSessionId, result.current.isMobile),
-      );
     });
   });
 

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

@@ -8,7 +8,6 @@ export interface SessionState {
   activeId: string;
   customSessionGroups: CustomSessionGroup[];
   defaultSessions: LobeAgentSession[];
-  isMobile?: boolean;
   isSearching: boolean;
   isSessionsFirstFetchFinished: boolean;
   pinnedSessions: LobeAgentSession[];
@@ -25,7 +24,6 @@ export const initialSessionState: SessionState = {
   activeId: 'inbox',
   customSessionGroups: [],
   defaultSessions: [],
-  isMobile: false,
   isSearching: false,
   isSessionsFirstFetchFinished: false,
   pinnedSessions: [],