@lobehub/chat 0.42.3 → 0.44.0

package/src/pages/chat/{[id] → features}/Header/index.tsx

@@ -9,30 +9,37 @@ import { Flexbox } from 'react-layout-kit';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import Tag from '@/components/Tag';
+import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
 import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
 import PluginTag from './PluginTag';
 
-const Header = memo(() => {
+const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
   const init = useSessionHydrated();
+
   const { t } = useTranslation('common');
 
-  const [title, description, avatar, backgroundColor, id, model, plugins] = useSessionStore((s) => [
+  const [id, title, description, avatar, backgroundColor, model, plugins] = useSessionStore((s) => [
+    s.activeId,
+
     agentSelectors.currentAgentTitle(s),
     agentSelectors.currentAgentDescription(s),
     agentSelectors.currentAgentAvatar(s),
     agentSelectors.currentAgentBackgroundColor(s),
-    s.activeId,
     agentSelectors.currentAgentModel(s),
     agentSelectors.currentAgentPlugins(s),
   ]);
 
+  const isInbox = id === INBOX_SESSION_ID;
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
   ]);
 
+  const displayTitle = isInbox ? t('inbox.title') : title;
+  const displayDesc = isInbox ? t('inbox.desc') : description;
+
   return (
     <ChatHeader
       left={
@@ -48,49 +55,40 @@ const Header = memo(() => {
           </Flexbox>
         ) : (
           <Flexbox align={'flex-start'} gap={12} horizontal>
-            <Avatar
-              avatar={avatar}
-              background={backgroundColor}
-              onClick={() => {
-                Router.push(`/chat/${id}/setting`);
-              }}
-              size={40}
-              style={{ cursor: 'pointer', flex: 'none' }}
-              title={title}
-            />
+            <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
             <HeaderTitle
-              desc={description}
+              desc={displayDesc}
               tag={
                 <>
                   <Tag>
-                    <SiOpenai size={'11px'} style={{ marginTop: 3 }} />
+                    <SiOpenai size={'11px'} style={{ marginTop: 2 }} />
                     {model}
                   </Tag>
                   {plugins?.length > 0 && <PluginTag plugins={plugins} />}
                 </>
               }
-              title={title}
+              title={displayTitle}
             />
           </Flexbox>
         )
       }
       right={
-        id && (
-          <>
-            {/*<ActionIcon*/}
-            {/*  icon={Share2}*/}
-            {/*  onClick={() => {*/}
-            {/*    // genShareUrl();*/}
-            {/*  }}*/}
-            {/*  size={{ fontSize: 24 }}*/}
-            {/*  title={t('share')}*/}
-            {/*/>*/}
-            <ActionIcon
-              icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
-              onClick={() => toggleConfig()}
-              size={{ fontSize: 24 }}
-              title={t('roleAndArchive')}
-            />
+        <>
+          {/*<ActionIcon*/}
+          {/*  icon={Share2}*/}
+          {/*  onClick={() => {*/}
+          {/*    // genShareUrl();*/}
+          {/*  }}*/}
+          {/*  size={{ fontSize: 24 }}*/}
+          {/*  title={t('share')}*/}
+          {/*/>*/}
+          <ActionIcon
+            icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
+            onClick={() => toggleConfig()}
+            size={{ fontSize: 24 }}
+            title={t('roleAndArchive')}
+          />
+          {settings && (
             <ActionIcon
               icon={Settings}
               onClick={() => {
@@ -99,8 +97,8 @@ const Header = memo(() => {
               size={{ fontSize: 24 }}
               title={t('header.session', { ns: 'setting' })}
             />
-          </>
-        )
+          )}
+        </>
       }
     />
   );

package/src/pages/chat/features/Sidebar/Inner.tsx

@@ -0,0 +1,42 @@
+import { DraggablePanelBody, SearchBar } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionHydrated } from '@/store/session';
+
+import SystemRole from './SystemRole';
+import { Topic } from './Topic';
+
+const Inner = memo<{ systemRole: boolean }>(({ systemRole }) => {
+  const hydrated = useSessionHydrated();
+  const { t } = useTranslation('common');
+
+  return (
+    <DraggablePanelBody style={{ padding: 0 }}>
+      {systemRole && <SystemRole />}
+      <Flexbox gap={16} padding={16}>
+        <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
+        {!hydrated ? (
+          <Flexbox gap={8} style={{ marginTop: 8 }}>
+            {Array.from({ length: 8 }).map((_, i) => (
+              <Skeleton
+                active
+                avatar={false}
+                key={i}
+                paragraph={{ rows: 1, width: '100%' }}
+                round
+                title={false}
+              />
+            ))}
+          </Flexbox>
+        ) : (
+          <Topic />
+        )}
+      </Flexbox>
+    </DraggablePanelBody>
+  );
+});
+
+export default Inner;

package/src/pages/chat/{[id]/Sidebar/Inner.tsx → features/Sidebar/SystemRole.tsx}

@@ -1,4 +1,4 @@
-import { ActionIcon, DraggablePanelBody, EditableMessage, SearchBar } from '@lobehub/ui';
+import { ActionIcon, EditableMessage } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { Maximize2Icon } from 'lucide-react';
@@ -6,18 +6,10 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import Header from '@/pages/chat/features/Sidebar/Header';
 import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
-import Header from './Header';
-import { Topic } from './Topic';
-
 const useStyles = createStyles(({ css, token }) => ({
-  desc: css`
-    color: ${token.colorText};
-  `,
-  model: css`
-    color: ${token.colorTextTertiary};
-  `,
   prompt: css`
     overflow-x: hidden;
     overflow-y: auto;
@@ -46,14 +38,11 @@ const useStyles = createStyles(({ css, token }) => ({
 
     background: linear-gradient(to bottom, transparent, ${token.colorBgLayout});
   `,
-  title: css`
-    font-size: ${token.fontSizeHeading4}px;
-    font-weight: bold;
-  `,
 }));
 
-const Inner = memo(() => {
+const SystemRole = memo(() => {
   const [openModal, setOpenModal] = useState(false);
+
   const { styles } = useStyles();
   const [systemRole, updateAgentConfig] = useSessionStore((s) => [
     agentSelectors.currentAgentSystemRole(s),
@@ -63,7 +52,7 @@ const Inner = memo(() => {
   const hydrated = useSessionHydrated();
   const { t } = useTranslation('common');
   return (
-    <DraggablePanelBody style={{ padding: 0 }}>
+    <>
       <Header
         actions={
           <ActionIcon
@@ -101,27 +90,8 @@ const Inner = memo(() => {
           <Skeleton active avatar={false} style={{ marginTop: 12 }} title={false} />
         )}
       </Flexbox>
-      <Flexbox gap={16} padding={16}>
-        <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
-        {!hydrated ? (
-          <Flexbox gap={8} style={{ marginTop: 8 }}>
-            {Array.from({ length: 8 }).map((_, i) => (
-              <Skeleton
-                active
-                avatar={false}
-                key={i}
-                paragraph={{ rows: 1, width: '100%' }}
-                round
-                title={false}
-              />
-            ))}
-          </Flexbox>
-        ) : (
-          <Topic />
-        )}
-      </Flexbox>
-    </DraggablePanelBody>
+    </>
   );
 });
 
-export default Inner;
+export default SystemRole;

package/src/pages/chat/{[id] → features}/Sidebar/index.tsx

@@ -1,6 +1,7 @@
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
+import { memo } from 'react';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
@@ -20,7 +21,10 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
   `,
 }));
 
-const Config = () => {
+interface SideBarProps {
+  systemRole?: boolean;
+}
+const SideBar = memo<SideBarProps>(({ systemRole = true }) => {
   const { styles } = useStyles();
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
@@ -37,10 +41,10 @@ const Config = () => {
     >
       <HeaderSpacing />
       <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>
-        <Inner />
+        <Inner systemRole={systemRole} />
       </DraggablePanelContainer>
     </DraggablePanel>
   );
-};
+});
 
-export default Config;
+export default SideBar;

package/src/pages/chat/index.page.tsx

@@ -1 +1,39 @@
-export { default } from './[id]/index.page';
+import Head from 'next/head';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import Conversation from './features/Conversation';
+import Header from './features/Header';
+import SideBar from './features/Sidebar';
+import Layout from './layout';
+
+const Chat = memo(() => {
+  const { t } = useTranslation('common');
+
+  const pageTitle = genSiteHeadTitle(t('inbox.title'));
+
+  useOnFinishHydrationSession(() => {
+    useSessionStore.getState().activeSession(INBOX_SESSION_ID);
+  });
+
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      <Layout>
+        <Header settings={false} />
+        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+          <Conversation />
+          <SideBar systemRole={false} />
+        </Flexbox>
+      </Layout>
+    </>
+  );
+});
+export default Chat;

package/src/pages/chat/layout.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppLayout from '@/layout/AppLayout';
+import { useSwitchSideBarOnInit } from '@/store/global';
+
+import { Sessions } from './SessionList';
+
+const ChatLayout = memo<PropsWithChildren>(({ children }) => {
+  useSwitchSideBarOnInit('chat');
+
+  return (
+    <AppLayout>
+      <Sessions />
+      <Flexbox
+        flex={1}
+        height={'100vh'}
+        id={'lobe-conversion-container'}
+        style={{ position: 'relative' }}
+      >
+        {children}
+      </Flexbox>
+    </AppLayout>
+  );
+});
+
+export default ChatLayout;

package/src/pages/settings/Settings/Common.tsx

@@ -1,6 +1,7 @@
 import { Form, type ItemGroup, ThemeSwitch } from '@lobehub/ui';
 import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
+import { changeLanguage } from 'i18next';
 import { debounce } from 'lodash-es';
 import { AppWindow, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
@@ -27,9 +28,10 @@ const Common = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
+
   const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
   const [setThemeMode, setSettings, resetSettings] = useGlobalStore((s) => [
-    s.setThemeMode,
+    s.switchThemeMode,
     s.setSettings,
     s.resetSettings,
   ]);
@@ -89,7 +91,14 @@ const Common = memo(() => {
           label: t('settingTheme.themeMode.title'),
         },
         {
-          children: <Select options={options} />,
+          children: (
+            <Select
+              onChange={(e) => {
+                changeLanguage(e);
+              }}
+              options={options}
+            />
+          ),
           label: t('settingTheme.lang.title'),
           name: 'language',
         },

package/src/pages/welcome/Footer/index.tsx

@@ -9,6 +9,7 @@ import { CHANGELOG, DISCORD, GITHUB } from '@/const/url';
 
 const Footer = memo(() => {
   const theme = useTheme();
+
   return (
     <Flexbox align={'center'} horizontal justify={'space-between'} style={{ padding: 16 }}>
       <span style={{ color: theme.colorTextDescription }}>©{new Date().getFullYear()} LobeHub</span>

package/src/services/chatModel.ts

@@ -2,7 +2,7 @@ import { merge } from 'lodash-es';
 
 import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
 import { useGlobalStore } from '@/store/global';
-import { initialLobeAgentConfig } from '@/store/session';
+import { initialLobeAgentConfig } from '@/store/session/initialState';
 import type { OpenAIStreamPayload } from '@/types/openai';
 
 import { URLS } from './url';

package/src/store/global/hooks/useOnFinishHydrationGlobal.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+import { useGlobalStore } from '../store';
+
+/**
+ * 当 Session 水合完毕后才会执行的 useEffect
+ * @param fn
+ * @param deps
+ */
+export const useOnFinishHydrationGlobal = (fn: () => void, deps: any[] = []) => {
+  useEffect(() => {
+    const hasRehydrated = useGlobalStore.persist.hasHydrated();
+    // 只有当水合完毕后再开始做操作
+    if (!hasRehydrated) return;
+
+    fn();
+  }, deps);
+};

package/src/store/global/hooks/useSwitchSideBarOnInit.ts

@@ -1,17 +1,13 @@
-import { useEffect } from 'react';
-
 import { SidebarTabKey } from '../initialState';
 import { useGlobalStore } from '../store';
+import { useOnFinishHydrationGlobal } from './useOnFinishHydrationGlobal';
 
 /**
  * 切换侧边栏选项
  * @desc 只会在应用初始化时（且水合后）执行一次
  */
 export const useSwitchSideBarOnInit = (key: SidebarTabKey) => {
-  useEffect(() => {
-    const hasRehydrated = useGlobalStore.persist.hasHydrated();
-    if (hasRehydrated) {
-      useGlobalStore.getState().switchSideBar(key);
-    }
-  }, []);
+  useOnFinishHydrationGlobal(() => {
+    useGlobalStore.getState().switchSideBar(key);
+  });
 };

package/src/store/global/slices/settings.ts

@@ -29,7 +29,7 @@ export interface SettingsAction {
    * 设置主题模式
    * @param themeMode - 主题模式
    */
-  setThemeMode: (themeMode: ThemeMode) => void;
+  switchThemeMode: (themeMode: ThemeMode) => void;
 }
 
 export const createSettingsSlice: StateCreator<
@@ -63,7 +63,7 @@ export const createSettingsSlice: StateCreator<
     const oldSetting = get().settings;
     set({ settings: merge(oldSetting, settings) }, false, t('setSettings', settings));
   },
-  setThemeMode: (themeMode) => {
+  switchThemeMode: (themeMode) => {
     get().setSettings({ themeMode });
   },
 });

package/src/store/session/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useOnFinishHydrationSession';
+export * from './useSessionHydrated';

package/src/store/session/hooks/useOnFinishHydrationSession.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+import { useSessionStore } from '../store';
+
+/**
+ * 当 Session 水合完毕后才会执行的 useEffect
+ * @param fn
+ * @param deps
+ */
+export const useOnFinishHydrationSession = (fn: () => void, deps: any[] = []) => {
+  useEffect(() => {
+    const hasRehydrated = useSessionStore.persist.hasHydrated();
+    // 只有当水合完毕后再开始做操作
+    if (!hasRehydrated) return;
+
+    fn();
+  }, deps);
+};

package/src/store/session/hooks/useSessionHydrated.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { useSessionStore } from '@/store/session';
+import { useSessionStore } from '../store';
 
 export const useSessionHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化

package/src/store/session/index.ts

@@ -1,6 +1,4 @@
-export * from './hooks/useSessionHydrated';
+export * from './hooks';
 export * from './selectors';
-export { initialLobeAgentConfig } from './slices/agentConfig';
-export { initLobeSession } from './slices/session';
 export type { SessionStore } from './store';
 export { useSessionStore } from './store';

package/src/store/session/initialState.ts

@@ -1,6 +1,6 @@
-import { AgentConfigState, initialAgentConfigState } from './slices/agentConfig';
-import { ChatState, initialChatState } from './slices/chat';
-import { SessionState, initialSessionState } from './slices/session';
+import { AgentConfigState, initialAgentConfigState } from './slices/agentConfig/initialState';
+import { ChatState, initialChatState } from './slices/chat/initialState';
+import { SessionState, initialSessionState } from './slices/session/initialState';
 
 export type SessionStoreState = SessionState & ChatState & AgentConfigState;
 
@@ -9,3 +9,6 @@ export const initialState: SessionStoreState = {
   ...initialChatState,
   ...initialAgentConfigState,
 };
+
+export { initialLobeAgentConfig } from './slices/agentConfig';
+export { initLobeSession } from './slices/session/initialState';

package/src/store/session/selectors.ts

@@ -1,3 +1,3 @@
-export { agentSelectors } from './slices/agentConfig';
-export { chatSelectors, topicSelectors } from './slices/chat';
-export { sessionSelectors } from './slices/session';
+export { agentSelectors } from './slices/agentConfig/selectors';
+export { chatSelectors, topicSelectors } from './slices/chat/selectors';
+export { sessionSelectors } from './slices/session/selectors';

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

@@ -2,12 +2,13 @@ import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
 import { promptPickEmoji, promptSummaryAgentName, promptSummaryDescription } from '@/prompts/agent';
-import { SessionStore, sessionSelectors } from '@/store/session';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
 import { fetchPresetTaskResult } from '@/utils/fetch';
 import { setNamespace } from '@/utils/storeDebug';
 
+import { SessionStore } from '../../store';
+import { sessionSelectors } from '../session/selectors';
 import { SessionLoadingState } from './initialState';
 
 const t = setNamespace('agentConfig');

package/src/store/session/slices/agentConfig/selectors.ts

@@ -7,7 +7,7 @@ import { SessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 import { MetaData } from '@/types/meta';
 
-import { sessionSelectors } from '../session';
+import { sessionSelectors } from '../session/selectors';
 import { initialLobeAgentConfig } from './initialState';
 
 const currentAgentMeta = (s: SessionStore): MetaData => {
@@ -25,8 +25,17 @@ const currentAutocomplete = (s: SessionStore): Autocomplete => ({
 
 const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title || t('defaultSession');
 
+const currentAgentConfig = (s: SessionStore) => {
+  const session = sessionSelectors.currentSession(s);
+  return merge({}, initialLobeAgentConfig, session?.config);
+};
+
+const currentAgentSystemRole = (s: SessionStore) => {
+  return currentAgentConfig(s).systemRole;
+};
+
 const currentAgentDescription = (s: SessionStore) =>
-  currentAgentMeta(s)?.description || t('noDescription');
+  currentAgentMeta(s)?.description || currentAgentSystemRole(s) || t('noDescription');
 
 const currentAgentBackgroundColor = (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
@@ -41,15 +50,6 @@ const currentAgentAvatar = (s: SessionStore) => {
   return session.meta.avatar || DEFAULT_AVATAR;
 };
 
-const currentAgentConfig = (s: SessionStore) => {
-  const session = sessionSelectors.currentSession(s);
-  return merge({}, initialLobeAgentConfig, session?.config);
-};
-
-const currentAgentSystemRole = (s: SessionStore) => {
-  return currentAgentConfig(s).systemRole;
-};
-
 const currentAgentModel = (s: SessionStore): LanguageModel => {
   const config = currentAgentConfig(s);
 

package/src/store/session/slices/chat/actions/message.ts

@@ -4,15 +4,18 @@ import { StateCreator } from 'zustand/vanilla';
 import { LOADING_FLAT } from '@/const/message';
 import { fetchChatModel } from '@/services/chatModel';
 import { fetchPlugin } from '@/services/plugin';
-import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@/store/session';
-import { getSlicedMessagesWithConfig } from '@/store/session/slices/chat/utils';
+import { SessionStore } from '@/store/session';
 import { ChatMessage, OpenAIFunctionCall } from '@/types/chatMessage';
 import { fetchSSE } from '@/utils/fetch';
 import { isFunctionMessage } from '@/utils/message';
 import { setNamespace } from '@/utils/storeDebug';
 import { nanoid } from '@/utils/uuid';
 
+import { agentSelectors } from '../../agentConfig/selectors';
+import { sessionSelectors } from '../../session/selectors';
 import { MessageDispatch, messagesReducer } from '../reducers/message';
+import { chatSelectors } from '../selectors';
+import { getSlicedMessagesWithConfig } from '../utils';
 
 const t = setNamespace('chat/message');
 
@@ -24,11 +27,6 @@ export interface ChatMessageAction {
    * 清除消息
    */
   clearMessage: () => void;
-  /**
-   * 创建或发送消息
-   * @param text - 消息文本
-   */
-  createOrSendMsg: (text: string) => Promise<void>;
   /**
    * 删除消息
    * @param id - 消息 ID
@@ -86,19 +84,6 @@ export const chatMessage: StateCreator<
     }
   },
 
-  createOrSendMsg: async (message) => {
-    if (!message) return;
-
-    const { sendMessage, createSession } = get();
-    const session = sessionSelectors.currentSession(get());
-
-    if (!session) {
-      await createSession();
-    }
-
-    sendMessage(message);
-  },
-
   deleteMessage: (id) => {
     get().dispatchMessage({ id, type: 'deleteMessage' });
   },
@@ -325,4 +310,12 @@ export const chatMessage: StateCreator<
 
     await realFetchAIResponse(chats, message.id);
   },
+
+  // genShareUrl: () => {
+  //   const session = sessionSelectors.currentSession(get());
+  //   if (!session) return '';
+  //
+  //   const agent = session.config;
+  //   return genShareMessagesUrl(session.chats, agent.systemRole);
+  // },
 });