@lobehub/chat 0.106.0 → 0.107.0

package/src/app/chat/features/SessionListContent/DefaultMode.tsx

@@ -0,0 +1,54 @@
+import { CollapseProps } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { preferenceSelectors, useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+import CollapseGroup from './CollapseGroup';
+import Inbox from './Inbox';
+import SessionList from './List';
+
+const SessionListContent = memo(() => {
+  const { t } = useTranslation('chat');
+  const unpinnedSessionList = useSessionStore(sessionSelectors.unpinnedSessionList, isEqual);
+  const pinnedList = useSessionStore(sessionSelectors.pinnedSessionList, isEqual);
+  const hasPinnedSessionList = useSessionStore(sessionSelectors.hasPinnedSessionList);
+
+  const [sessionGroupKeys, updatePreference] = useGlobalStore((s) => [
+    preferenceSelectors.sessionGroupKeys(s),
+    s.updatePreference,
+  ]);
+
+  const items = [
+    hasPinnedSessionList && {
+      children: <SessionList dataSource={pinnedList} />,
+      key: 'pinned',
+      label: t('pin'),
+    },
+    {
+      children: <SessionList dataSource={unpinnedSessionList} />,
+      key: 'sessionList',
+      label: t('sessionList'),
+    },
+  ].filter(Boolean) as CollapseProps['items'];
+
+  return (
+    <>
+      <Inbox />
+      <CollapseGroup
+        activeKey={sessionGroupKeys}
+        items={items}
+        onChange={(keys) => {
+          const sessionGroupKeys = typeof keys === 'string' ? [keys] : keys;
+
+          updatePreference({ sessionGroupKeys });
+        }}
+      />
+    </>
+  );
+});
+
+export default SessionListContent;

package/src/app/chat/features/SessionListContent/List/Item/Actions.tsx

@@ -5,8 +5,9 @@ import { HardDriveDownload, MoreVertical, Pin, PinOff, Trash } from 'lucide-reac
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
+import { configService } from '@/services/config';
 import { useSessionStore } from '@/store/session';
+import { sessionHelpers } from '@/store/session/helpers';
 import { sessionSelectors } from '@/store/session/selectors';
 
 const useStyles = createStyles(({ css }) => ({
@@ -27,7 +28,7 @@ const Actions = memo<ActionProps>(({ id, setOpen }) => {
 
   const [pin, removeSession, pinSession] = useSessionStore((s) => {
     const session = sessionSelectors.getSessionById(id)(s);
-    return [session.pinned, s.removeSession, s.pinSession];
+    return [sessionHelpers.getSessionPinned(session), s.removeSession, s.pinSession];
   });
 
   const { modal } = App.useApp();
@@ -48,14 +49,14 @@ const Actions = memo<ActionProps>(({ id, setOpen }) => {
             key: 'agent',
             label: <div>{t('exportType.agent')}</div>,
             onClick: () => {
-              exportSingleAgent(id);
+              configService.exportSingleAgent(id);
             },
           },
           {
             key: 'agentWithMessage',
             label: <div>{t('exportType.agentWithMessage')}</div>,
             onClick: () => {
-              exportSingleSession(id);
+              configService.exportSingleSession(id);
             },
           },
         ],

package/src/app/chat/features/SessionListContent/List/Item/index.tsx

@@ -4,8 +4,10 @@ import { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { useChatStore } from '@/store/chat';
 import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
+import { sessionHelpers } from '@/store/session/helpers';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
 import ListItem from '../../ListItem';
@@ -19,36 +21,28 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const [open, setOpen] = useState(false);
 
   const [defaultModel] = useGlobalStore((s) => [settingsSelectors.defaultAgentConfig(s).model]);
+  const [active, loading] = useChatStore((s) => [
+    s.activeId === id,
+    !!s.chatLoadingId && id === s.activeId,
+  ]);
 
-  const [
-    active,
-    loading,
-    pin,
-    title,
-    description,
-    systemRole,
-    avatar,
-    avatarBackground,
-    updateAt,
-    model,
-  ] = useSessionStore((s) => {
-    const session = sessionSelectors.getSessionById(id)(s);
-    const meta = session.meta;
-    const systemRole = session.config.systemRole;
+  const [pin, title, description, systemRole, avatar, avatarBackground, updateAt, model] =
+    useSessionStore((s) => {
+      const session = sessionSelectors.getSessionById(id)(s);
+      const meta = session.meta;
+      const systemRole = session.config.systemRole;
 
-    return [
-      s.activeId === id,
-      !!s.chatLoadingId && id === s.activeId,
-      session.pinned,
-      agentSelectors.getTitle(meta),
-      agentSelectors.getDescription(meta),
-      systemRole,
-      agentSelectors.getAvatar(meta),
-      meta.backgroundColor,
-      session?.updateAt,
-      session.config.model,
-    ];
-  });
+      return [
+        sessionHelpers.getSessionPinned(session),
+        agentSelectors.getTitle(meta),
+        agentSelectors.getDescription(meta),
+        systemRole,
+        agentSelectors.getAvatar(meta),
+        meta.backgroundColor,
+        session?.updatedAt,
+        session.config.model,
+      ];
+    });
 
   const showModel = model !== defaultModel;
 

package/src/app/chat/features/SessionListContent/SearchMode.tsx

@@ -0,0 +1,15 @@
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+import SessionList from './List';
+
+const SessionListContent = memo(() => {
+  const searchSessions = useSessionStore(sessionSelectors.searchSessions, isEqual);
+
+  return <SessionList dataSource={searchSessions} />;
+});
+
+export default SessionListContent;

package/src/app/chat/features/SessionListContent/index.tsx

@@ -1,54 +1,14 @@
-import { CollapseProps } from 'antd';
-import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { preferenceSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
 
-import CollapseGroup from './CollapseGroup';
-import Inbox from './Inbox';
-import SessionList from './List';
+import DefaultMode from './DefaultMode';
+import SearchMode from './SearchMode';
 
 const SessionListContent = memo(() => {
-  const { t } = useTranslation('chat');
-  const unpinnedSessionList = useSessionStore(sessionSelectors.unpinnedSessionList, isEqual);
-  const pinnedList = useSessionStore(sessionSelectors.pinnedSessionList, isEqual);
-  const hasPinnedSessionList = useSessionStore(sessionSelectors.hasPinnedSessionList);
+  const isSearching = useSessionStore((s) => s.isSearching);
 
-  const [sessionGroupKeys, updatePreference] = useGlobalStore((s) => [
-    preferenceSelectors.sessionGroupKeys(s),
-    s.updatePreference,
-  ]);
-
-  const items = [
-    hasPinnedSessionList && {
-      children: <SessionList dataSource={pinnedList} />,
-      key: 'pinned',
-      label: t('pin'),
-    },
-    {
-      children: <SessionList dataSource={unpinnedSessionList} />,
-      key: 'sessionList',
-      label: t('sessionList'),
-    },
-  ].filter(Boolean) as CollapseProps['items'];
-
-  return (
-    <>
-      <Inbox />
-      <CollapseGroup
-        activeKey={sessionGroupKeys}
-        items={items}
-        onChange={(keys) => {
-          const sessionGroupKeys = typeof keys === 'string' ? [keys] : keys;
-
-          updatePreference({ sessionGroupKeys });
-        }}
-      />
-    </>
-  );
+  return isSearching ? <SearchMode /> : <DefaultMode />;
 });
 
 export default SessionListContent;

package/src/app/chat/features/SessionSearchBar/index.tsx

@@ -1,19 +1,27 @@
 import { SearchBar } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSessionStore } from '@/store/session';
 
 const SessionSearchBar = memo(() => {
   const { t } = useTranslation('chat');
-  const [keywords] = useSessionStore((s) => [s.searchKeywords]);
+  const [keywords, setKeywords] = useState<string | undefined>(undefined);
+  const [useSearchSessions] = useSessionStore((s) => [s.useSearchSessions]);
+
+  useSearchSessions(keywords);
+
   const { mobile } = useResponsive();
   return (
     <SearchBar
       allowClear
       enableShortKey={!mobile}
-      onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
+      onChange={(e) => {
+        const newKeywords = e.target.value;
+        setKeywords(newKeywords);
+        useSessionStore.setState({ isSearching: !!newKeywords });
+      }}
       placeholder={t('searchAgentPlaceholder')}
       shortKey={'k'}
       spotlight={!mobile}

package/src/app/chat/features/TopicListContent/Header.tsx

@@ -5,18 +5,18 @@ import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSessionStore } from '@/store/session';
-import { topicSelectors } from '@/store/session/selectors';
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
 
 import SidebarHeader from '../SidebarHeader';
 import TopicSearchBar from './TopicSearchBar';
 
 const Header = memo(() => {
   const { t } = useTranslation('chat');
-  const [topicLength, removeUnstarredTopic, removeAllTopic] = useSessionStore((s) => [
+  const [topicLength, removeUnstarredTopic, removeAllTopic] = useChatStore((s) => [
     topicSelectors.currentTopicLength(s),
     s.removeUnstarredTopic,
-    s.removeAllTopic,
+    s.removeSessionTopics,
   ]);
 
   const [showSearch, setShowSearch] = useState(false);

package/src/app/chat/features/TopicListContent/Topic/TopicContent.tsx

@@ -6,7 +6,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 
 const useStyles = createStyles(({ css }) => ({
   content: css`
@@ -26,21 +26,23 @@ const { Paragraph } = Typography;
 interface TopicContentProps {
   fav?: boolean;
   id: string;
+  showMore?: boolean;
   title: string;
 }
 
-const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
+const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
   const { t } = useTranslation('common');
 
-  const [editing, dispatchTopic, removeTopic] = useSessionStore((s) => [
-    s.renameTopicId === id,
-    s.dispatchTopic,
+  const [editing, favoriteTopic, updateTopicTitle, removeTopic] = useChatStore((s) => [
+    s.topicRenamingId === id,
+    s.favoriteTopic,
+    s.updateTopicTitle,
     s.removeTopic,
   ]);
   const { styles, theme } = useStyles();
 
   const toggleEditing = (visible?: boolean) => {
-    useSessionStore.setState({ renameTopicId: visible ? id : '' });
+    useChatStore.setState({ topicRenamingId: visible ? id : '' });
   };
 
   const { modal } = App.useApp();
@@ -99,7 +101,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
         icon={Star}
         onClick={() => {
           if (!id) return;
-          dispatchTopic({ favorite: !fav, id, type: 'favorChatTopic' });
+          favoriteTopic(id, !fav);
         }}
         size={'small'}
       />
@@ -116,7 +118,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
           editing={editing}
           onChangeEnd={(v) => {
             if (title !== v) {
-              dispatchTopic({ id, key: 'title', type: 'updateChatTopic', value: v });
+              updateTopicTitle(id, v);
             }
             toggleEditing(false);
           }}
@@ -130,7 +132,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
           value={title}
         />
       )}
-      {!editing && (
+      {showMore && !editing && (
         <Dropdown
           arrow={false}
           menu={{

package/src/app/chat/features/TopicListContent/Topic/TopicItem.tsx

@@ -1,8 +1,8 @@
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 
 import DefaultContent from './DefaultContent';
 import TopicContent from './TopicContent';
@@ -21,17 +21,8 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     padding: 8px;
     border-radius: ${token.borderRadius}px;
 
-    .topic-more {
-      opacity: 0;
-      transition: opacity 400ms ${token.motionEaseOut};
-    }
-
     &:hover {
       background: ${token.colorFillSecondary};
-
-      .topic-more {
-        opacity: 1;
-      }
     }
   `,
   split: css`
@@ -49,7 +40,8 @@ export interface ConfigCellProps {
 const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav }) => {
   const { styles, cx } = useStyles();
 
-  const [toggleTopic] = useSessionStore((s) => [s.toggleTopic]);
+  const [toggleTopic] = useChatStore((s) => [s.switchTopic]);
+  const [isHover, setHovering] = useState(false);
 
   return (
     <Flexbox
@@ -60,8 +52,18 @@ const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav }) => {
       onClick={() => {
         toggleTopic(id);
       }}
+      onMouseEnter={() => {
+        setHovering(true);
+      }}
+      onMouseLeave={() => {
+        setHovering(false);
+      }}
     >
-      {!id ? <DefaultContent /> : <TopicContent fav={fav} id={id} title={title} />}
+      {!id ? (
+        <DefaultContent />
+      ) : (
+        <TopicContent fav={fav} id={id} showMore={isHover} title={title} />
+      )}
     </Flexbox>
   );
 });

package/src/app/chat/features/TopicListContent/Topic/index.tsx

@@ -1,37 +1,30 @@
 import { EmptyCard } from '@lobehub/ui';
 import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useChatStore } from '@/store/chat';
+import { topicSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
-import { useSessionChatInit, useSessionStore } from '@/store/session';
-import { topicSelectors } from '@/store/session/selectors';
 
 import SkeletonList from './SkeletonList';
 import TopicItem from './TopicItem';
 
 export const Topic = () => {
-  const init = useSessionChatInit();
-  const topics = useSessionStore(topicSelectors.currentTopics, isEqual);
   const { isDarkMode } = useThemeMode();
-  const [activeTopicId, keywords] = useSessionStore((s) => [
-    s.activeTopicId,
-    s.topicSearchKeywords,
-  ]);
+
+  const topics = useChatStore(topicSelectors.displayTopics, isEqual);
+
+  const [topicsInit, activeTopicId] = useChatStore((s) => [s.topicsInit, s.activeTopicId]);
+
   const { t } = useTranslation('empty');
   const [visible, updateGuideState] = useGlobalStore((s) => [
     s.preference.guide?.topic,
     s.updateGuideState,
   ]);
 
-  const topicsData = useMemo(() => {
-    if (!keywords) return topics;
-    return topics.filter(({ title }) => title.toLowerCase().includes(keywords.toLowerCase()));
-  }, [topics, keywords]);
-
-  return !init ? (
+  return !topicsInit ? (
     <SkeletonList />
   ) : (
     <Flexbox gap={2} style={{ marginBottom: 12 }}>
@@ -57,7 +50,7 @@ export const Topic = () => {
         title={t('topic.defaultTitle', { ns: 'chat' })}
       />
 
-      {topicsData.map(({ id, favorite, title }) => (
+      {topics.map(({ id, favorite, title }) => (
         <TopicItem active={activeTopicId === id} fav={favorite} id={id} key={id} title={title} />
       ))}
     </Flexbox>

package/src/app/chat/features/TopicListContent/TopicSearchBar/index.tsx

@@ -1,14 +1,20 @@
 import { SearchBar } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 
 const TopicSearchBar = memo<{ onClear?: () => void }>(({ onClear }) => {
   const { t } = useTranslation('chat');
-  const [keywords] = useSessionStore((s) => [s.topicSearchKeywords]);
+
+  const [keywords, setKeywords] = useState<string | undefined>(undefined);
   const { mobile } = useResponsive();
+
+  const useSearchTopics = useChatStore((s) => s.useSearchTopics);
+
+  useSearchTopics(keywords);
+
   return (
     <SearchBar
       autoFocus
@@ -16,7 +22,10 @@ const TopicSearchBar = memo<{ onClear?: () => void }>(({ onClear }) => {
         if (keywords === '') onClear?.();
       }}
       onChange={(e) => {
-        useSessionStore.setState({ topicSearchKeywords: e.target.value });
+        const value = e.target.value;
+
+        setKeywords(value);
+        useChatStore.setState({ isSearchingTopic: !!value });
       }}
       placeholder={t('topic.searchPlaceholder')}
       spotlight={!mobile}

package/src/app/chat/features/TopicListContent/index.tsx

@@ -1,10 +1,9 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import TopicSearchBar from '@/app/chat/features/TopicListContent/TopicSearchBar';
-
 import Header from './Header';
 import { Topic } from './Topic';
+import TopicSearchBar from './TopicSearchBar';
 
 const TopicListContent = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (

package/src/app/chat/page.tsx

@@ -2,13 +2,18 @@ import { isMobileDevice } from '@/utils/responsive';
 
 import DesktopPage from './(desktop)';
 import MobilePage from './(mobile)';
+import Migration from './features/Migration';
 
 const Page = () => {
   const mobile = isMobileDevice();
 
   const Page = mobile ? MobilePage : DesktopPage;
 
-  return <Page />;
+  return (
+    <Migration>
+      <Page />
+    </Migration>
+  );
 };
 
 export default Page;

package/src/app/chat/settings/features/HeaderContent.tsx

@@ -6,7 +6,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
+import { configService } from '@/services/config';
 import { useSessionStore } from '@/store/session';
 
 import SubmitAgentButton from './SubmitAgentButton';
@@ -25,7 +25,7 @@ export const HeaderContent = memo<{ mobile?: boolean }>(() => {
         onClick: () => {
           if (!id) return;
 
-          exportSingleAgent(id);
+          configService.exportSingleAgent(id);
         },
       },
       {
@@ -34,7 +34,7 @@ export const HeaderContent = memo<{ mobile?: boolean }>(() => {
         onClick: () => {
           if (!id) return;
 
-          exportSingleSession(id);
+          configService.exportSingleSession(id);
         },
       },
     ],

package/src/app/home/Redirect.tsx

@@ -3,20 +3,26 @@
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
+import { messageService } from '@/services/message';
+import { sessionService } from '@/services/session';
 import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
+
+const checkHasConversation = async () => {
+  const hasMessages = await messageService.hasMessages();
+  const hasAgents = await sessionService.hasSessions();
+  return hasMessages || hasAgents;
+};
 
 const Redirect = memo(() => {
   const router = useRouter();
+  const [switchSession] = useSessionStore((s) => [s.switchSession]);
 
   useEffect(() => {
-    useSessionStore.persist.onFinishHydration(() => {
-      const store = useSessionStore.getState();
-      const hasConversion = sessionSelectors.hasConversion(store);
-
-      if (hasConversion) {
+    checkHasConversation().then((hasData) => {
+      if (hasData) {
         router.push('/chat');
-        store.switchSession();
+
+        switchSession();
       } else {
         router.push('/welcome');
       }

package/src/app/settings/(mobile)/features/ExtraList.tsx

@@ -5,15 +5,15 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ABOUT, CHANGELOG, FEEDBACK } from '@/const/url';
-import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
+import { configService } from '@/services/config';
 import { useGlobalStore } from '@/store/global';
 
 import Item from '../../features/SideBar/Item';
 
 const ExtraList = memo(() => {
   const { t } = useTranslation('common');
-  const { exportAll } = useExportConfig();
+
   const { importConfig } = useImportConfig();
   const tab = useGlobalStore((s) => s.settingsTab);
   const { mobile } = useResponsive();
@@ -21,7 +21,7 @@ const ExtraList = memo(() => {
     {
       icon: HardDriveDownload,
       label: t('export'),
-      onClick: exportAll,
+      onClick: configService.exportAll,
       value: 'export',
     },
     {
@@ -46,7 +46,15 @@ const ExtraList = memo(() => {
 
   return (
     <>
-      <Upload maxCount={1} onChange={importConfig} showUploadList={false}>
+      <Upload
+        beforeUpload={(file) => {
+          importConfig(file);
+
+          return false;
+        }}
+        maxCount={1}
+        showUploadList={false}
+      >
         <Item icon={HardDriveUpload} label={t('import')} style={{ width: '100vw' }} />
       </Upload>
       {items.map(({ value, icon, label, onClick }) => (