@lobehub/chat 0.41.1 → 0.42.0

package/src/pages/chat/[id]/Header/index.tsx

@@ -6,7 +6,6 @@ import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import Tag from '@/components/Tag';
@@ -19,23 +18,20 @@ const Header = memo(() => {
   const init = useSessionHydrated();
   const { t } = useTranslation('common');
 
-  const [title, description, avatar, backgroundColor, id, model, plugins] = useSessionStore(
-    (s) => [
-      agentSelectors.currentAgentTitle(s),
-      agentSelectors.currentAgentDescription(s),
-      agentSelectors.currentAgentAvatar(s),
-      agentSelectors.currentAgentBackgroundColor(s),
-      s.activeId,
-      agentSelectors.currentAgentModel(s),
-      agentSelectors.currentAgentPlugins(s),
-    ],
-    shallow,
-  );
+  const [title, description, avatar, backgroundColor, id, model, plugins] = useSessionStore((s) => [
+    agentSelectors.currentAgentTitle(s),
+    agentSelectors.currentAgentDescription(s),
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentBackgroundColor(s),
+    s.activeId,
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentPlugins(s),
+  ]);
 
-  const [showAgentSettings, toggleConfig] = useSettings(
-    (s) => [s.showAgentConfig, s.toggleAgentPanel],
-    shallow,
-  );
+  const [showAgentSettings, toggleConfig] = useSettings((s) => [
+    s.showAgentConfig,
+    s.toggleAgentPanel,
+  ]);
 
   return (
     <ChatHeader

package/src/pages/chat/[id]/Sidebar/Inner.tsx

@@ -5,7 +5,6 @@ import { Maximize2Icon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
@@ -29,22 +28,37 @@ const useStyles = createStyles(({ css, token }) => ({
       opacity: 1;
     }
   `,
+  promptBox: css`
+    position: relative;
+    overflow: hidden;
+    border-bottom: 1px solid ${token.colorBorder};
+  `,
+  promptMask: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 10;
+    bottom: 0;
+    left: 0;
+
+    width: 100%;
+    height: 32px;
+
+    background: linear-gradient(to bottom, transparent, ${token.colorBgLayout});
+  `,
   title: css`
     font-size: ${token.fontSizeHeading4}px;
     font-weight: bold;
   `,
-  topic: css`
-    border-top: 1px solid ${token.colorBorder};
-  `,
 }));
 
 const Inner = memo(() => {
   const [openModal, setOpenModal] = useState(false);
   const { styles } = useStyles();
-  const [systemRole, updateAgentConfig] = useSessionStore(
-    (s) => [agentSelectors.currentAgentSystemRole(s), s.updateAgentConfig],
-    shallow,
-  );
+  const [systemRole, updateAgentConfig] = useSessionStore((s) => [
+    agentSelectors.currentAgentSystemRole(s),
+    s.updateAgentConfig,
+  ]);
 
   const hydrated = useSessionHydrated();
   const { t } = useTranslation('common');
@@ -61,33 +75,36 @@ const Inner = memo(() => {
         }
         title={t('settingAgent.prompt.title', { ns: 'setting' })}
       />
-      <Flexbox height={200} padding={'0 16px 16px'}>
+      <Flexbox className={styles.promptBox} height={200} padding={'0 16px 16px'}>
         {hydrated ? (
-          <EditableMessage
-            classNames={{ markdown: styles.prompt }}
-            onChange={(e) => {
-              updateAgentConfig({ systemRole: e });
-            }}
-            onOpenChange={setOpenModal}
-            openModal={openModal}
-            placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
-            styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
-            text={{
-              cancel: t('cancel'),
-              confirm: t('ok'),
-              edit: t('edit'),
-              title: t('settingAgent.prompt.title', { ns: 'setting' }),
-            }}
-            value={systemRole}
-          />
+          <>
+            <EditableMessage
+              classNames={{ markdown: styles.prompt }}
+              onChange={(e) => {
+                updateAgentConfig({ systemRole: e });
+              }}
+              onOpenChange={setOpenModal}
+              openModal={openModal}
+              placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
+              styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
+              text={{
+                cancel: t('cancel'),
+                confirm: t('ok'),
+                edit: t('edit'),
+                title: t('settingAgent.prompt.title', { ns: 'setting' }),
+              }}
+              value={systemRole}
+            />
+            <div className={styles.promptMask} />
+          </>
         ) : (
           <Skeleton active avatar={false} style={{ marginTop: 12 }} title={false} />
         )}
       </Flexbox>
-      <Flexbox className={styles.topic} gap={16} padding={16}>
+      <Flexbox gap={16} padding={16}>
         <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
         {!hydrated ? (
-          <Flexbox gap={8} style={{ marginTop: 12 }}>
+          <Flexbox gap={8} style={{ marginTop: 8 }}>
             {Array.from({ length: 8 }).map((_, i) => (
               <Skeleton
                 active

package/src/pages/chat/[id]/Sidebar/Topic/TopicContent.tsx

@@ -5,7 +5,6 @@ import { MoreVertical, PencilLine, Star, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 
@@ -33,10 +32,11 @@ interface TopicContentProps {
 const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
   const { t } = useTranslation('common');
 
-  const [editing, dispatchTopic, removeTopic] = useSessionStore(
-    (s) => [s.renameTopicId === id, s.dispatchTopic, s.removeTopic],
-    shallow,
-  );
+  const [editing, dispatchTopic, removeTopic] = useSessionStore((s) => [
+    s.renameTopicId === id,
+    s.dispatchTopic,
+    s.removeTopic,
+  ]);
   const { styles, theme } = useStyles();
 
   const toggleEditing = (visible?: boolean) => {

package/src/pages/chat/[id]/Sidebar/Topic/TopicItem.tsx

@@ -1,7 +1,6 @@
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 
@@ -50,7 +49,7 @@ export interface ConfigCellProps {
 const TopicItem = memo<ConfigCellProps>(({ title, active, id, fav }) => {
   const { styles, cx } = useStyles();
 
-  const [toggleTopic] = useSessionStore((s) => [s.toggleTopic], shallow);
+  const [toggleTopic] = useSessionStore((s) => [s.toggleTopic]);
 
   return (
     <Flexbox

package/src/pages/chat/[id]/Sidebar/Topic/index.tsx

@@ -2,7 +2,6 @@ import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import Empty from '@/components/Empty';
 import { topicSelectors, useSessionStore } from '@/store/session';
@@ -13,13 +12,10 @@ import TopicItem from './TopicItem';
 export const Topic = () => {
   const topics = useSessionStore(topicSelectors.currentTopics, isEqual);
   const { isDarkMode } = useThemeMode();
-  const [activeTopicId] = useSessionStore((s) => [s.activeTopicId], shallow);
+  const [activeTopicId] = useSessionStore((s) => [s.activeTopicId]);
   const { t } = useTranslation('empty');
 
-  const [visible, updateGuideState] = useSettings(
-    (s) => [s.guide?.topic, s.updateGuideState],
-    shallow,
-  );
+  const [visible, updateGuideState] = useSettings((s) => [s.guide?.topic, s.updateGuideState]);
 
   return (
     <Flexbox gap={2}>

package/src/pages/chat/[id]/Sidebar/index.tsx

@@ -1,7 +1,6 @@
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
-import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
@@ -23,10 +22,10 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 
 const Config = () => {
   const { styles } = useStyles();
-  const [showAgentSettings, toggleConfig] = useSettings(
-    (s) => [s.showAgentConfig, s.toggleAgentPanel],
-    shallow,
-  );
+  const [showAgentSettings, toggleConfig] = useSettings((s) => [
+    s.showAgentConfig,
+    s.toggleAgentPanel,
+  ]);
 
   return (
     <DraggablePanel

package/src/pages/chat/[id]/index.page.tsx

@@ -1,4 +1,3 @@
-import isEqual from 'fast-deep-equal';
 import Head from 'next/head';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -6,16 +5,16 @@ import { Flexbox } from 'react-layout-kit';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import Layout from '../layout';
 import Conversation from './Conversation';
 import Header from './Header';
 import Config from './Sidebar';
+import Layout from './layout';
 
 const Chat = memo(() => {
-  const [avatar, title] = useSessionStore(
-    (s) => [agentSelectors.currentAgentAvatar(s), agentSelectors.currentAgentTitle(s)],
-    isEqual,
-  );
+  const [avatar, title] = useSessionStore((s) => [
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentTitle(s),
+  ]);
 
   const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
 

package/src/pages/chat/{layout.tsx → [id]/layout.tsx}

@@ -3,20 +3,13 @@ import { PropsWithChildren, memo, useEffect } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import SideBar from '@/features/SideBar';
-import { createI18nNext } from '@/locales/create';
+import AppLayout from '@/layout/AppLayout';
 import { useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
-import { Sessions } from './SessionList';
-
-const initI18n = createI18nNext();
+import { Sessions } from '../SessionList';
 
 const ChatLayout = memo<PropsWithChildren>(({ children }) => {
-  useEffect(() => {
-    initI18n.finally();
-  }, []);
-
   const [activeSession, toggleTopic] = useSessionStore((s) => {
     return [s.activeSession, s.toggleTopic];
   }, shallow);
@@ -46,13 +39,12 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
   }, []);
 
   return (
-    <Flexbox horizontal width={'100%'}>
-      <SideBar />
+    <AppLayout>
       <Sessions />
       <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
         {children}
       </Flexbox>
-    </Flexbox>
+    </AppLayout>
   );
 });
 

package/src/pages/chat/[id]/setting/index.page.tsx

@@ -3,31 +3,27 @@ import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
 import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
+import AppLayout from '@/layout/AppLayout';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import ChatLayout from '../../layout';
 import Header from './Header';
 
 const EditPage = memo(() => {
   const { t } = useTranslation('setting');
   const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
   const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
-  const autocomplete = useSessionStore(agentSelectors.currentAutocomplete, shallow);
-  const [updateAgentConfig, toggleAgentPlugin, updateAgentMeta, title] = useSessionStore(
-    (s) => [
-      s.updateAgentConfig,
-      s.toggleAgentPlugin,
-      s.updateAgentMeta,
-      agentSelectors.currentAgentTitle(s),
-    ],
-    shallow,
-  );
+  const autocomplete = useSessionStore(agentSelectors.currentAutocomplete);
+  const [updateAgentConfig, toggleAgentPlugin, updateAgentMeta, title] = useSessionStore((s) => [
+    s.updateAgentConfig,
+    s.toggleAgentPlugin,
+    s.updateAgentMeta,
+    agentSelectors.currentAgentTitle(s),
+  ]);
 
   const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
 
@@ -36,7 +32,7 @@ const EditPage = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <ChatLayout>
+      <AppLayout>
         <Header />
         <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
           <HeaderSpacing height={HEADER_HEIGHT - 16} />
@@ -50,7 +46,7 @@ const EditPage = memo(() => {
           <AgentConfig config={config} updateConfig={updateAgentConfig} />
           <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
         </Flexbox>
-      </ChatLayout>
+      </AppLayout>
     </>
   );
 });

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

@@ -1,24 +1 @@
-import Router from 'next/router';
-import { useEffect } from 'react';
-
-import { sessionSelectors, useSessionStore } from '@/store/session';
-
-import Chat from './[id]/index.page';
-
-export default () => {
-  // 支持用户在进到首页时，自动激活列表中的第一个角色
-  useEffect(() => {
-    const hasRehydrated = useSessionStore.persist.hasHydrated();
-    // 只有当水合完毕后，才往下走
-    if (!hasRehydrated) return;
-
-    // 如果当前有会话，那么就激活第一个会话
-    const list = sessionSelectors.sessionList(useSessionStore.getState());
-    if (list.length > 0) {
-      const sessionId = list[0].id;
-      Router.push(`/chat/${sessionId}`);
-    }
-  }, []);
-
-  return <Chat />;
-};
+export { default } from './[id]/index.page';

package/src/pages/index.page.tsx

@@ -1 +1,33 @@
-export { default } from './chat/index.page';
+import { Icon } from '@lobehub/ui';
+import { useWhyDidYouUpdate } from 'ahooks';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
+
+import Chat from './chat/index.page';
+import Welcome from './welcome/index.page';
+
+const Loading = memo(() => {
+  const { t } = useTranslation('common');
+
+  return (
+    <Center gap={12} height={'100vh'} width={'100%'}>
+      <Icon icon={Loader2} size={{ fontSize: 64 }} spin />
+      {t('appInitializing')}
+    </Center>
+  );
+});
+
+export default memo(() => {
+  const hydrated = useSessionHydrated();
+  const hasSession = useSessionStore(sessionSelectors.hasSessionList);
+
+  useWhyDidYouUpdate('index.page', { hasSession, hydrated });
+
+  if (!hydrated) return <Loading />;
+
+  return !hasSession ? <Welcome /> : <Chat />;
+});

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

@@ -1,6 +1,5 @@
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
 import { settingsSelectors, useSettings } from '@/store/settings';
@@ -8,10 +7,11 @@ import { settingsSelectors, useSettings } from '@/store/settings';
 const Agent = memo(() => {
   const config = useSettings(settingsSelectors.currentAgentConfig, isEqual);
   const meta = useSettings(settingsSelectors.currentAgentMeta, isEqual);
-  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useSettings(
-    (s) => [s.setAgentConfig, s.setAgentMeta, s.toggleAgentPlugin],
-    shallow,
-  );
+  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useSettings((s) => [
+    s.setAgentConfig,
+    s.setAgentMeta,
+    s.toggleAgentPlugin,
+  ]);
   return (
     <>
       <AgentPrompt config={config} updateConfig={setAgentConfig} />

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

@@ -6,7 +6,6 @@ import { AppWindow, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import SliderWithInput from 'src/components/SliderWithInput';
-import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
@@ -29,14 +28,11 @@ const Common = memo(() => {
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
   const settings = useSettings(settingsSelectors.currentSettings, isEqual);
-  const { setThemeMode, setSettings, resetSettings } = useSettings(
-    (s) => ({
-      resetSettings: s.resetSettings,
-      setSettings: s.setSettings,
-      setThemeMode: s.setThemeMode,
-    }),
-    shallow,
-  );
+  const [setThemeMode, setSettings, resetSettings] = useSettings((s) => [
+    s.setThemeMode,
+    s.setSettings,
+    s.resetSettings,
+  ]);
 
   const { message, modal } = App.useApp();
   const handleReset = useCallback(() => {

package/src/pages/settings/ThemeSwatches/ThemeSwatchesNeutral.tsx

@@ -6,15 +6,11 @@ import {
   neutralColorsSwatches,
 } from '@lobehub/ui';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
 
 const ThemeSwatchesNeutral = memo(() => {
-  const { neutralColor, setSettings } = useSettings(
-    (s) => ({ neutralColor: s.settings.neutralColor, setSettings: s.setSettings }),
-    shallow,
-  );
+  const [neutralColor, setSettings] = useSettings((s) => [s.settings.neutralColor, s.setSettings]);
 
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('neutral', v) as NeutralColors;

package/src/pages/settings/ThemeSwatches/ThemeSwatchesPrimary.tsx

@@ -6,15 +6,11 @@ import {
   primaryColorsSwatches,
 } from '@lobehub/ui';
 import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
 
 const ThemeSwatchesPrimary = memo(() => {
-  const { primaryColor, setSettings } = useSettings(
-    (s) => ({ primaryColor: s.settings.primaryColor, setSettings: s.setSettings }),
-    shallow,
-  );
+  const [primaryColor, setSettings] = useSettings((s) => [s.settings.primaryColor, s.setSettings]);
 
   const handleSelect = (v: any) => {
     const name = findCustomThemeName('primary', v) as PrimaryColors;

package/src/pages/welcome/Banner/AgentCard.tsx

@@ -0,0 +1,71 @@
+import { Avatar, Spotlight } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { LobeAgentSession } from '@/types/session';
+
+const { Paragraph, Title } = Typography;
+
+const useStyles = createStyles(({ css, token, cx, stylish }) => ({
+  container: cx(
+    stylish.blur,
+    css`
+      cursor: pointer;
+
+      position: relative;
+
+      overflow: hidden;
+      flex: 1;
+
+      padding: 16px;
+
+      background-color: ${rgba(token.colorBgContainer, 0.5)};
+      border: 1px solid ${rgba(token.colorText, 0.2)};
+      border-radius: ${token.borderRadiusLG}px;
+
+      transition: all 400ms ${token.motionEaseOut};
+
+      &:hover {
+        background-color: ${rgba(token.colorBgElevated, 0.2)};
+        border-color: ${token.colorText};
+        box-shadow: 0 0 0 1px ${token.colorText};
+      }
+
+      ,
+      &:active {
+        scale: 0.98;
+      }
+    `,
+  ),
+  desc: css`
+    margin: 0 !important;
+  `,
+  title: css`
+    margin: 0 !important;
+  `,
+}));
+
+export interface AgentCardProps {
+  meta: LobeAgentSession['meta'];
+}
+
+const AgentCard = memo<AgentCardProps>(({ meta }) => {
+  const { styles } = useStyles();
+  return (
+    <Flexbox className={styles.container} gap={8}>
+      <Spotlight size={200} />
+      <Avatar avatar={meta.avatar} background={meta.backgroundColor} />
+      <Title className={styles.title} ellipsis level={5}>
+        {meta.title}
+      </Title>
+      <Paragraph className={styles.desc} ellipsis={{ rows: 2 }} type="secondary">
+        {meta.description}
+      </Paragraph>
+    </Flexbox>
+  );
+});
+
+export default AgentCard;

package/src/pages/welcome/Banner/AgentTemplate.tsx

@@ -0,0 +1,43 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+import AgentCard, { type AgentCardProps } from './AgentCard';
+
+const items: AgentCardProps['meta'][] = [
+  {
+    avatar: '😀',
+    description: 'dddddd',
+    title: 'Title',
+  },
+  {
+    avatar: '😀',
+    description: 'dddddd',
+    title: 'Title',
+  },
+  {
+    avatar: '😀',
+    description: 'dddddd',
+    title: 'Title',
+  },
+];
+
+const AgentTemplate = memo<{ width: number }>(({ width }) => {
+  const { styles } = useStyles();
+  const { mobile } = useResponsive();
+  return (
+    <Flexbox
+      className={styles.templateContainer}
+      gap={16}
+      horizontal={!mobile}
+      style={{ marginTop: -width / 20 }}
+    >
+      {items.map((meta, index) => (
+        <AgentCard key={index} meta={meta} />
+      ))}
+    </Flexbox>
+  );
+});
+
+export default AgentTemplate;