@lobehub/chat 0.56.0 → 0.58.0

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/services/plugin.ts

@@ -1,8 +1,8 @@
 import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 
-import { LOBE_CHAT_ACCESS_CODE } from '@/const/fetch';
-import { PLUGINS_INDEX_URL } from '@/const/url';
-import { useGlobalStore } from '@/store/global';
+import { LOBE_PLUGIN_SETTINGS } from '@/const/fetch';
+import { usePluginStore } from '@/store/plugin';
+import { getMessageError } from '@/utils/fetch';
 
 import { URLS } from './url';
 
@@ -12,30 +12,27 @@ interface FetchChatModelOptions {
 }
 
 /**
- * 请求插件结果
+ * 请求插件结果´
  */
 export const fetchPlugin = async (
   params: PluginRequestPayload,
   options?: FetchChatModelOptions,
 ) => {
+  const settings = usePluginStore.getState().pluginsSettings?.[params.identifier];
+
   const res = await fetch(URLS.plugins, {
     body: JSON.stringify(params),
     headers: {
       'Content-Type': 'application/json',
-      [LOBE_CHAT_ACCESS_CODE]: useGlobalStore.getState().settings.password || '',
+      [LOBE_PLUGIN_SETTINGS]: JSON.stringify(settings) || '',
     },
     method: 'POST',
     signal: options?.signal,
   });
 
-  return await res.text();
-};
+  if (!res.ok) {
+    throw await getMessageError(res);
+  }
 
-/**
- * 请求插件列表
- */
-export const getPluginList = async () => {
-  const res = await fetch(PLUGINS_INDEX_URL);
-
-  return res.json();
+  return await res.text();
 };

package/src/services/pluginMarket.ts

@@ -0,0 +1,10 @@
+import { PLUGINS_INDEX_URL } from '@/const/url';
+
+/**
+ * 请求插件列表
+ */
+export const getPluginList = async () => {
+  const res = await fetch(PLUGINS_INDEX_URL);
+
+  return res.json();
+};

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/selectors.ts

@@ -11,10 +11,10 @@ const currentSettings = (s: GlobalStore) => merge({}, DEFAULT_SETTINGS, s.settin
 const currentDefaultAgent = (s: GlobalStore) => merge({}, DEFAULT_AGENT, s.settings.defaultAgent);
 
 const currentAgentConfig = (s: GlobalStore) =>
-  merge({}, DEFAULT_AGENT_CONFIG, s.settings.defaultAgent.config);
+  merge({}, DEFAULT_AGENT_CONFIG, currentDefaultAgent(s).config);
 
 const currentAgentMeta = (s: GlobalStore) =>
-  merge({}, DEFAULT_AGENT_META, s.settings.defaultAgent.meta);
+  merge({}, DEFAULT_AGENT_META, currentDefaultAgent(s).meta);
 
 export const exportSettings = (s: GlobalStore) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

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/global/store.ts

@@ -3,6 +3,7 @@ import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
+import { DEFAULT_AGENT } from '@/const/settings';
 import { isDev } from '@/utils/env';
 
 import { type GlobalState, initialState } from './initialState';
@@ -25,6 +26,12 @@ const createStore: StateCreator<GlobalStore, [['zustand/devtools', never]]> = (.
 type GlobalPersist = Pick<GlobalStore, 'preference' | 'settings'>;
 
 const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
+  merge: (persistedState, currentState) => {
+    if (!(persistedState as GlobalPersist).settings.defaultAgent) {
+      currentState.settings.defaultAgent = DEFAULT_AGENT;
+    }
+    return currentState;
+  },
   name: 'LOBE_SETTINGS',
   partialize: (s) => ({
     preference: s.preference,

package/src/store/plugin/action.ts

@@ -5,11 +5,11 @@ import {
 } from '@lobehub/chat-plugin-sdk';
 import { message } from 'antd';
 import { produce } from 'immer';
-import { uniq } from 'lodash-es';
+import { merge, uniq } from 'lodash-es';
 import useSWR, { SWRResponse } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
 
-import { getPluginList } from '@/services/plugin';
+import { getPluginList } from '@/services/pluginMarket';
 import { pluginSelectors } from '@/store/plugin/selectors';
 import { LobeSessions } from '@/types/session';
 import { setNamespace } from '@/utils/storeDebug';
@@ -27,6 +27,7 @@ export interface PluginAction {
   dispatchPluginManifest: (payload: PluginDispatch) => void;
   fetchPluginManifest: (name: string) => Promise<void>;
   updateManifestLoadingState: (key: string, value: boolean | undefined) => void;
+  updatePluginSettings: <T>(id: string, settings: Partial<T>) => void;
   useFetchPluginList: () => SWRResponse<LobeChatPluginsMarketIndex>;
 }
 
@@ -112,6 +113,16 @@ export const createPluginSlice: StateCreator<
       t('updateManifestLoadingState'),
     );
   },
+
+  updatePluginSettings: (id, settings) => {
+    set(
+      produce((draft) => {
+        draft.pluginsSettings[id] = merge({}, draft.pluginsSettings[id], settings);
+      }),
+      false,
+      t('updatePluginSettings'),
+    );
+  },
   useFetchPluginList: () =>
     useSWR<LobeChatPluginsMarketIndex>('fetchPluginList', getPluginList, {
       onSuccess: (pluginMarketIndex) => {

package/src/store/plugin/initialState.ts

@@ -3,12 +3,14 @@ import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
 import { PluginManifestMap } from '@/types/plugin';
 
 export type PluginManifestLoadingState = Record<string, boolean>;
+export type PluginsSettings = Record<string, any>;
 
 export interface PluginStoreState {
   manifestPrepared: boolean;
   pluginList: LobeChatPluginMeta[];
   pluginManifestLoading: PluginManifestLoadingState;
   pluginManifestMap: PluginManifestMap;
+  pluginsSettings: PluginsSettings;
 }
 
 export const initialState: PluginStoreState = {
@@ -16,4 +18,5 @@ export const initialState: PluginStoreState = {
   pluginList: [],
   pluginManifestLoading: {},
   pluginManifestMap: {},
+  pluginsSettings: {},
 };

package/src/store/plugin/selectors.ts

@@ -25,7 +25,11 @@ const enabledSchema =
 const getPluginMetaById = (id: string) => (s: PluginStoreState) =>
   s.pluginList?.find((p) => p.identifier === id);
 
+const getPluginManifestSettingsById = (id: string) => (s: PluginStoreState) =>
+  s.pluginManifestMap[id];
+
 export const pluginSelectors = {
   enabledSchema,
+  getPluginManifestSettingsById,
   getPluginMetaById,
 };

package/src/store/plugin/store.ts

@@ -19,7 +19,7 @@ const createStore: StateCreator<PluginStore, [['zustand/devtools', never]]> = (.
 
 //  ===============  persist 本地缓存中间件配置 ============ //
 
-type SessionPersist = Pick<PluginStore, 'pluginList' | 'pluginManifestMap'>;
+type SessionPersist = Pick<PluginStore, 'pluginList' | 'pluginManifestMap' | 'pluginsSettings'>;
 
 const storeName = 'LOBE_PLUGIN';
 
@@ -29,6 +29,7 @@ const persistOptions: PersistOptions<PluginStore, SessionPersist> = {
   partialize: (s) => ({
     pluginList: s.pluginList,
     pluginManifestMap: s.pluginManifestMap,
+    pluginsSettings: s.pluginsSettings,
   }),
 
   // 手动控制 Hydration ，避免 ssr 报错

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

@@ -346,9 +346,18 @@ export const chatMessage: StateCreator<
     dispatchMessage({ id, key: 'name', type: 'updateMessage', value: payload.identifier });
     dispatchMessage({ id, key: 'plugin', type: 'updateMessage', value: payload });
 
-    const abortController = toggleChatLoading(true, id);
-    const data = await fetchPlugin(payload, { signal: abortController?.signal });
+    let data: string;
+    try {
+      const abortController = toggleChatLoading(true, id);
+      data = await fetchPlugin(payload, { signal: abortController?.signal });
+    } catch (error) {
+      dispatchMessage({ id, key: 'error', type: 'updateMessage', value: error });
+
+      data = '';
+    }
     toggleChatLoading(false);
+    // 如果报错则结束了
+    if (!data) return;
 
     dispatchMessage({ id, key: 'content', type: 'updateMessage', value: data });
 

package/src/types/fetch.ts

@@ -1,25 +1,29 @@
-export enum ErrorType {
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+export const ChatErrorType = {
   // ******* 业务错误语义 ******* //
 
   // 密码无效
-  InvalidAccessCode = 'InvalidAccessCode',
+  InvalidAccessCode: 'InvalidAccessCode',
   // OpenAI 返回的业务错误
-  OpenAIBizError = 'OpenAIBizError',
+  OpenAIBizError: 'OpenAIBizError',
 
   // ******* 客户端错误 ******* //
-  BadRequest = 400,
-  Unauthorized = 401,
-  Forbidden = 403,
-  ContentNotFound = 404, // 没找到接口
-  MethodNotAllowed = 405, // 不支持
-  TooManyRequests = 429,
+  BadRequest: 400,
+  Unauthorized: 401,
+  Forbidden: 403,
+  ContentNotFound: 404, // 没找到接口
+  MethodNotAllowed: 405, // 不支持
+  TooManyRequests: 429,
 
   // ******* 服务端错误 ******* //
-  InternalServerError = 500,
-  BadGateway = 502,
-  ServiceUnavailable = 503,
-  GatewayTimeout = 504,
-}
+  InternalServerError: 500,
+  BadGateway: 502,
+  ServiceUnavailable: 503,
+  GatewayTimeout: 504,
+} as const;
+/* eslint-enable */
+
+export type ErrorType = (typeof ChatErrorType)[keyof typeof ChatErrorType];
 
 export interface ErrorResponse {
   body: any;

package/src/utils/fetch.ts

@@ -2,7 +2,29 @@ import { t } from 'i18next';
 
 import { fetchChatModel } from '@/services/chatModel';
 import { ChatMessageError } from '@/types/chatMessage';
-import { ErrorResponse } from '@/types/fetch';
+import { ErrorResponse, ErrorType } from '@/types/fetch';
+
+export const getMessageError = async (response: Response) => {
+  let chatMessageError: ChatMessageError;
+
+  // 尝试取一波业务错误语义
+  try {
+    const data = (await response.json()) as ErrorResponse;
+    chatMessageError = {
+      body: data.body,
+      message: t(`response.${data.errorType}`),
+      type: data.errorType,
+    };
+  } catch {
+    // 如果无法正常返回，说明是常规报错
+    chatMessageError = {
+      message: t(`response.${response.status}`),
+      type: response.status as ErrorType,
+    };
+  }
+
+  return chatMessageError;
+};
 
 export interface FetchSSEOptions {
   onErrorHandle?: (error: ChatMessageError) => void;
@@ -19,23 +41,7 @@ export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchS
 
   // 如果不 ok 说明有请求错误
   if (!response.ok) {
-    let chatMessageError: ChatMessageError;
-
-    // 尝试取一波业务错误语义
-    try {
-      const data = (await response.json()) as ErrorResponse;
-      chatMessageError = {
-        body: data.body,
-        message: t(`response.${data.errorType}`),
-        type: data.errorType,
-      };
-    } catch {
-      // 如果无法正常返回，说明是常规报错
-      chatMessageError = {
-        message: t(`response.${response.status}`),
-        type: response.status,
-      };
-    }
+    const chatMessageError = await getMessageError(response);
 
     options.onErrorHandle?.(chatMessageError);
     return;

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;