@lobehub/chat 0.57.0 → 0.59.0

package/src/pages/chat/mobile.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+import Header from '@/pages/chat/SessionList/Header';
+import { useSwitchSideBarOnInit } from '@/store/global';
+
+import { Sessions } from './SessionList';
+
+const ChatMobileLayout = memo(() => {
+  useSwitchSideBarOnInit('chat');
+  const theme = useTheme();
+
+  return (
+    <AppMobileLayout
+      navBar={<Header mobile={'navbar'} />}
+      showTabBar
+      style={{ background: theme.colorBgContainer }}
+    >
+      <Sessions mobile />
+    </AppMobileLayout>
+  );
+});
+
+export default ChatMobileLayout;

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

@@ -1,21 +1,53 @@
+import { useResponsive } from 'antd-style';
+import Head from 'next/head';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/components/HeaderSpacing';
+import SafeSpacing from '@/components/SafeSpacing';
+import { createI18nNext } from '@/locales/create';
+import { useOnFinishHydrationGlobal, useSwitchSideBarOnInit } from '@/store/global';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Header from './Header';
 import Settings from './Settings';
 import SettingLayout from './layout';
+import Mobile from './mobile';
+
+const initI18n = createI18nNext({ namespace: 'setting' });
 
 const Setting = memo(() => {
+  const { mobile } = useResponsive();
+  const { t } = useTranslation('setting');
+  const pageTitle = genSiteHeadTitle(t('header.global'));
+
+  useSwitchSideBarOnInit('settings');
+
+  useOnFinishHydrationGlobal(() => {
+    initI18n.then(() => {});
+  });
+
   return (
-    <SettingLayout>
-      <Header />
-      <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
-        <HeaderSpacing />
-        <Settings />
-      </Flexbox>
-    </SettingLayout>
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      {mobile ? (
+        <Mobile>
+          <Flexbox align={'center'} padding={16} style={{ overflow: 'auto' }}>
+            <Settings />
+          </Flexbox>
+        </Mobile>
+      ) : (
+        <SettingLayout>
+          <Header />
+          <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
+            <SafeSpacing />
+            <Settings />
+          </Flexbox>
+        </SettingLayout>
+      )}
+    </>
   );
 });
 

package/src/pages/settings/layout.tsx

@@ -1,37 +1,15 @@
-import Head from 'next/head';
 import { ReactNode, memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import SideBar from '@/features/SideBar';
-import { createI18nNext } from '@/locales/create';
-import { useOnFinishHydrationGlobal, useSwitchSideBarOnInit } from '@/store/global';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
-
-const initI18n = createI18nNext({ namespace: 'setting' });
+import AppLayout from '@/layout/AppLayout';
 
 const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
-  const { t } = useTranslation('setting');
-  const pageTitle = genSiteHeadTitle(t('header.global'));
-
-  useSwitchSideBarOnInit('settings');
-
-  useOnFinishHydrationGlobal(() => {
-    initI18n.then(() => {});
-  });
-
   return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <Flexbox horizontal width={'100%'}>
-        <SideBar />
-        <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
-          {children}
-        </Flexbox>
+    <AppLayout>
+      <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
+        {children}
       </Flexbox>
-    </>
+    </AppLayout>
   );
 });
 

package/src/pages/settings/mobile.tsx

@@ -0,0 +1,20 @@
+import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <AppMobileLayout
+      navBar={<MobileNavBar center={<MobileNavBarTitle title={t('header.global')} />} />}
+      showTabBar
+    >
+      {children}
+    </AppMobileLayout>
+  );
+});
+
+export default SettingLayout;

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

@@ -21,12 +21,10 @@ const Hero = memo<{ width: number }>(({ width }) => {
 
   return (
     <>
-      <LogoThree
-        size={size.logo}
-        style={{ marginBottom: -size.logo / 40, marginTop: -size.logo / 5 }}
-      />
+      <LogoThree size={size.logo} style={{ marginTop: -size.logo / 5 }} />
       <div className={styles.title} style={{ fontSize: size.title }}>
-        LobeChat{mobile ? <br /> : ' '}
+        <span style={mobile ? { fontSize: '1.2em' } : {}}>LobeChat</span>
+        {mobile ? <br /> : ' '}
         {t('slogan.title')}
       </div>
       <div className={styles.desc} style={{ fontSize: size.desc }}>

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

@@ -13,7 +13,7 @@ import { useImportConfig } from '@/hooks/useImportConfig';
 import { useStyles } from '../style';
 import Hero from './Hero';
 
-const Banner = memo(() => {
+const Banner = memo<{ mobile?: boolean }>(() => {
   const { importConfig } = useImportConfig();
   const ref = useRef(null);
   const domSize = useSize(ref);
@@ -28,12 +28,15 @@ const Banner = memo(() => {
   }, []);
 
   return (
-    <Flexbox height={'80vh'} style={{ marginTop: '10vh' }}>
+    <Flexbox height={'80vh'} style={{ paddingTop: '10vh' }}>
       <GridShowcase>
         <div className={styles.container} ref={ref}>
           <Hero width={width} />
         </div>
         <Flexbox gap={16} horizontal style={{ marginTop: 16 }}>
+          <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
+            <Button size={'large'}>{t('button.import')}</Button>
+          </Upload>
           <Link href={'/chat'}>
             <Button size={'large'} type={'primary'}>
               <Flexbox align={'center'} gap={4} horizontal>
@@ -42,9 +45,6 @@ const Banner = memo(() => {
               </Flexbox>
             </Button>
           </Link>
-          <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
-            <Button size={'large'}>{t('button.import')}</Button>
-          </Upload>
         </Flexbox>
       </GridShowcase>
       {/*TODO：暂时隐藏，待模板完成后再补回*/}

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

@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,8 +8,10 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 import Banner from './Banner';
 import Footer from './Footer';
 import Layout from './layout';
+import Mobile from './mobile';
 
 const Welcome = memo(() => {
+  const { mobile } = useResponsive();
   const { t } = useTranslation('welcome');
   const pageTitle = genSiteHeadTitle(t('header'));
 
@@ -17,10 +20,16 @@ const Welcome = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Layout>
-        <Banner />
-        <Footer />
-      </Layout>
+      {mobile ? (
+        <Mobile>
+          <Banner />
+        </Mobile>
+      ) : (
+        <Layout>
+          <Banner />
+          <Footer />
+        </Layout>
+      )}
     </>
   );
 });

package/src/pages/welcome/mobile.tsx

@@ -0,0 +1,20 @@
+import { Logo, MobileNavBar } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+import AppMobileLayout from '../../layout/AppMobileLayout';
+
+const WelcomeLayout = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+  return (
+    <AppMobileLayout
+      navBar={<MobileNavBar center={<Logo type={'text'} />} />}
+      showTabBar
+      style={{ background: theme.colorBgContainer }}
+    >
+      {children}
+    </AppMobileLayout>
+  );
+});
+
+export default WelcomeLayout;

package/src/pages/welcome/style.ts

@@ -41,9 +41,9 @@ export const useStyles = createStyles(({ css, token, stylish, cx }) => {
       padding: 16px;
     `,
     title: css`
-      margin-bottom: 0.2em;
+      margin-bottom: 0.25em;
       font-weight: 800;
-      line-height: 1.2;
+      line-height: 1.4;
       text-align: center;
     `,
     view: cx(

package/src/store/global/initialState.ts

@@ -25,6 +25,7 @@ export interface GlobalState {
 export interface GlobalPreference {
   guide?: Guide;
   inputHeight: number;
+  mobileShowTopic?: boolean;
   sessionsWidth: number;
   showChatSideBar?: boolean;
   showSessionPanel?: boolean;
@@ -34,6 +35,7 @@ export const initialState: GlobalState = {
   preference: {
     guide: {},
     inputHeight: 200,
+    mobileShowTopic: false,
     sessionsWidth: 320,
     showChatSideBar: true,
     showSessionPanel: true,

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

@@ -19,6 +19,7 @@ export interface CommonAction {
    */
   switchSideBar: (key: SidebarTabKey) => void;
   toggleChatSideBar: (visible?: boolean) => void;
+  toggleMobileTopic: (visible?: boolean) => void;
   updateGuideState: (guide: Partial<Guide>) => void;
   updatePreference: (preference: Partial<GlobalPreference>, action?: string) => void;
 }
@@ -38,6 +39,12 @@ export const createCommonSlice: StateCreator<
 
     get().updatePreference({ showChatSideBar }, t('toggleAgentPanel', newValue) as string);
   },
+  toggleMobileTopic: (newValue) => {
+    const mobileShowTopic =
+      typeof newValue === 'boolean' ? newValue : !get().preference.mobileShowTopic;
+
+    get().updatePreference({ mobileShowTopic }, t('toggleMobileTopic', newValue) as string);
+  },
   updateGuideState: (guide) => {
     const { updatePreference } = get();
     const nextGuide = merge({}, get().preference.guide, guide);

package/src/store/plugin/helpers.ts

@@ -0,0 +1,26 @@
+import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
+import i18n from 'i18next';
+
+const getI18nValue = (value: string | Record<string, string> | undefined) => {
+  if (!value) return;
+
+  if (typeof value === 'string') return value;
+
+  if (value[i18n.language]) return value[i18n.language];
+
+  return Object.values(value)[0];
+};
+
+const getPluginFormList = (pluginList: LobeChatPluginMeta[], id: string) =>
+  pluginList?.find((p) => p.identifier === id);
+
+const getPluginTitle = (meta?: LobeChatPluginMeta['meta']) => getI18nValue(meta?.title);
+const getPluginDesc = (meta?: LobeChatPluginMeta['meta']) => getI18nValue(meta?.description);
+const getPluginAvatar = (meta?: LobeChatPluginMeta['meta']) => meta?.avatar;
+
+export const pluginHelpers = {
+  getPluginAvatar,
+  getPluginDesc,
+  getPluginFormList,
+  getPluginTitle,
+};

package/src/store/plugin/index.ts

@@ -1,2 +1,3 @@
+export * from './helpers';
 export * from './selectors';
 export { usePluginStore } from './store';

package/src/store/plugin/selectors.ts

@@ -1,4 +1,5 @@
 import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
+import { pluginHelpers } from '@/store/plugin/helpers';
 
 import { PluginStoreState } from './initialState';
 
@@ -23,13 +24,38 @@ const enabledSchema =
   };
 
 const getPluginMetaById = (id: string) => (s: PluginStoreState) =>
-  s.pluginList?.find((p) => p.identifier === id);
+  pluginHelpers.getPluginFormList(s.pluginList, id);
 
-const getPluginManifestSettingsById = (id: string) => (s: PluginStoreState) =>
-  s.pluginManifestMap[id];
+const getPluginManifestById = (id: string) => (s: PluginStoreState) => s.pluginManifestMap[id];
+const getPluginSettingsById = (id: string) => (s: PluginStoreState) => s.pluginsSettings[id];
+
+// 获取插件 manifest 加载状态
+const getPluginManifestLoadingStatus = (id: string) => (s: PluginStoreState) => {
+  const manifest = getPluginManifestById(id);
+
+  if (s.pluginManifestLoading[id]) return 'loading';
+
+  if (!manifest) return 'error';
+
+  if (!!manifest) return 'success';
+};
+
+const displayPluginList = (s: PluginStoreState) =>
+  s.pluginList.map((p) => ({
+    author: p.author,
+    avatar: p.meta?.avatar,
+    createAt: p.createAt,
+    desc: pluginHelpers.getPluginDesc(p.meta),
+    homepage: p.homepage,
+    identifier: p.identifier,
+    title: pluginHelpers.getPluginTitle(p.meta),
+  }));
 
 export const pluginSelectors = {
+  displayPluginList,
   enabledSchema,
-  getPluginManifestSettingsById,
+  getPluginManifestById,
+  getPluginManifestLoadingStatus,
   getPluginMetaById,
+  getPluginSettingsById,
 };

package/src/components/HeaderSpacing/index.tsx

@@ -1,9 +0,0 @@
-import { memo } from 'react';
-
-import { HEADER_HEIGHT } from '@/const/layoutTokens';
-
-const HeaderSpacing = memo<{ height?: number }>(({ height = HEADER_HEIGHT }) => (
-  <div style={{ flex: 'none', height }} />
-));
-
-export default HeaderSpacing;