@lobehub/chat 0.56.0 → 0.58.0

package/src/locales/default/error.ts

@@ -1,4 +1,12 @@
+import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
+
+import { ChatErrorType } from '@/types/fetch';
+
 export default {
+  pluginSettings: {
+    desc: '完成以下配置，即可开始使用该插件',
+    title: '{{name}}插件配置',
+  },
   response: {
     400: '很抱歉，服务器不明白您的请求，请确认您的请求参数是否正确',
     401: '很抱歉，服务器拒绝了您的请求，可能是因为您的权限不足或未提供有效的身份验证',
@@ -11,8 +19,28 @@ export default {
     503: '很抱歉，服务器当前无法处理您的请求，可能是由于过载或正在进行维护，请稍后再试',
     504: '很抱歉，服务器没有等到上游服务器的回应，请稍后再试',
 
-    InvalidAccessCode: '密码不正确或为空，请输入正确的访问密码，或者添加自定义 OpenAI API Key',
-    OpenAIBizError: '请求 OpenAI 服务出错，请根据以下信息排查或重试',
+    [PluginErrorType.PluginMarketIndexNotFound]:
+      '很抱歉，服务器没有找到插件索引，请检查索引地址是否正确',
+    [PluginErrorType.PluginMarketIndexInvalid]:
+      '很抱歉，插件索引校验未通过，请检查索引文件格式是否规范',
+    [PluginErrorType.PluginMetaNotFound]:
+      '很抱歉，没有在索引中发现该插件，请插件在索引中的配置信息',
+    [PluginErrorType.PluginMetaInvalid]:
+      '很抱歉，该插件的元信息校验未通过，请检查插件元信息格式是否规范',
+    [PluginErrorType.PluginManifestNotFound]:
+      '很抱歉，服务器没有找到该插件的描述清单 (manifest.json)，请检查插件描述文件地址是否正确',
+    [PluginErrorType.PluginManifestInvalid]:
+      '很抱歉，该插件的描述清单校验未通过，请检查描述清单格式是否规范',
+    [PluginErrorType.PluginApiNotFound]:
+      '很抱歉，插件描述清单中不存在该 API ，请检查你的请求方法与插件清单 API 是否匹配',
+    [PluginErrorType.PluginApiParamsError]:
+      '很抱歉，该插件请求的入参校验未通过，请检查入参与 Api 描述信息是否匹配',
+    [PluginErrorType.PluginSettingsInvalid]:
+      '很抱歉，该插件需要正确配置后才可以使用，请检查你的配置是否正确',
+
+    [ChatErrorType.InvalidAccessCode]:
+      '密码不正确或为空，请输入正确的访问密码，或者添加自定义 OpenAI API Key',
+    [ChatErrorType.OpenAIBizError]: '请求 OpenAI 服务出错，请根据以下信息排查或重试',
   },
   unlock: {
     apikey: {

package/src/locales/default/setting.ts

@@ -128,6 +128,7 @@ export default {
     },
   },
   settingPlugin: {
+    config: '{{id}} 插件配置',
     title: '插件列表',
   },
   settingSystem: {

package/src/pages/api/auth.ts

@@ -1,5 +1,5 @@
 import { getServerConfig } from '@/config/server';
-import { ErrorType } from '@/types/fetch';
+import { ChatErrorType } from '@/types/fetch';
 
 interface AuthConfig {
   accessCode?: string | null;
@@ -18,7 +18,7 @@ export const checkAuth = ({ apiKey, accessCode }: AuthConfig) => {
   if (!ACCESS_CODE) return { auth: true };
 
   if (accessCode !== ACCESS_CODE) {
-    return { auth: false, error: ErrorType.InvalidAccessCode };
+    return { auth: false, error: ChatErrorType.InvalidAccessCode };
   }
 
   return { auth: true };

package/src/pages/api/error.ts

@@ -1,12 +1,12 @@
-import { ErrorResponse, ErrorType } from '@/types/fetch';
+import { ChatErrorType, ErrorResponse, ErrorType } from '@/types/fetch';
 
 const getStatus = (errorType: ErrorType) => {
   switch (errorType) {
-    case ErrorType.InvalidAccessCode: {
+    case ChatErrorType.InvalidAccessCode: {
       return 401;
     }
 
-    case ErrorType.OpenAIBizError: {
+    case ChatErrorType.OpenAIBizError: {
       return 577;
     }
   }

package/src/pages/api/openai.ts

@@ -3,7 +3,7 @@ import { Configuration, OpenAIApi } from 'openai-edge';
 
 import { getServerConfig } from '@/config/server';
 import { createErrorResponse } from '@/pages/api/error';
-import { ErrorType } from '@/types/fetch';
+import { ChatErrorType } from '@/types/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
 // 创建 OpenAI 实例
@@ -55,7 +55,7 @@ export const createChatCompletion = async ({
     response = await openai.createChatCompletion(requestParams);
   } catch (error) {
     // 如果 await 超时报错，说明是 OpenAI 服务端的问题
-    return createErrorResponse(ErrorType.GatewayTimeout, { message: error });
+    return createErrorResponse(ChatErrorType.GatewayTimeout, { message: error });
   }
 
   // ============  4. 处理异常响应   ============ //
@@ -72,7 +72,7 @@ export const createChatCompletion = async ({
       error = { message: result };
     }
 
-    return createErrorResponse(ErrorType.OpenAIBizError, { ...error, endpoint });
+    return createErrorResponse(ChatErrorType.OpenAIBizError, { ...error, endpoint });
   }
 
   // ============  5. 发送正常相应   ============ //

package/src/pages/chat/SessionList/Header.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
+import { ActionIcon, Logo, MobileNavBar, SearchBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
 import Link from 'next/link';
@@ -6,6 +6,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useSessionStore } from '@/store/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -18,11 +19,34 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Header = memo(() => {
+const Header = memo<{ mobile?: 'navbar' | 'search' }>(({ mobile }) => {
   const { styles } = useStyles();
   const { t } = useTranslation('common');
   const [keywords, createSession] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
 
+  if (mobile === 'navbar') {
+    return (
+      <MobileNavBar
+        center={<Logo type={'text'} />}
+        left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
+        right={<ActionIcon icon={MessageSquarePlus} onClick={createSession} />}
+      />
+    );
+  }
+
+  if (mobile === 'search')
+    return (
+      <Flexbox className={styles.top} padding={16}>
+        <SearchBar
+          allowClear
+          onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
+          placeholder={t('searchAgentPlaceholder')}
+          type={'block'}
+          value={keywords}
+        />
+      </Flexbox>
+    );
+
   return (
     <Flexbox className={styles.top} gap={16} padding={16}>
       <Flexbox distribution={'space-between'} horizontal>

package/src/pages/chat/SessionList/List/Item/index.tsx

@@ -6,7 +6,7 @@ import { memo, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { agentSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 
 import Actions from './Actions';
@@ -35,7 +35,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const isHovering = useHover(ref);
 
   const { styles } = useStyles();
-  const [defaultModel] = useGlobalStore((s) => [s.settings.defaultAgent.config?.model]);
+  const [defaultModel] = useGlobalStore((s) => [settingsSelectors.currentAgentConfig(s).model]);
 
   const [
     active,

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

@@ -13,7 +13,7 @@ import SessionList from './List';
 
 const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
 
-export const Sessions = memo(() => {
+export const Sessions = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
 
@@ -28,6 +28,15 @@ export const Sessions = memo(() => {
     [],
   );
 
+  if (mobile)
+    return (
+      <>
+        <Header mobile={'search'} />
+        <Inbox />
+        <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
+      </>
+    );
+
   return (
     <FolderPanel>
       <Header />

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

@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -9,8 +10,10 @@ import Conversation from '../features/Conversation';
 import Header from '../features/Header';
 import SideBar from '../features/Sidebar';
 import Layout from './layout';
+import Mobile from './mobile';
 
 const Chat = memo(() => {
+  const { mobile } = useResponsive();
   const [avatar, title] = useSessionStore((s) => [
     agentSelectors.currentAgentAvatar(s),
     agentSelectors.currentAgentTitle(s),
@@ -23,13 +26,22 @@ const Chat = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Layout>
-        <Header />
-        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-          <Conversation />
-          <SideBar />
-        </Flexbox>
-      </Layout>
+      {mobile ? (
+        <Mobile>
+          <Flexbox height={'calc(100vh - 44px)'} horizontal>
+            <Conversation mobile />
+            <SideBar mobile />
+          </Flexbox>
+        </Mobile>
+      ) : (
+        <Layout>
+          <Header />
+          <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+            <Conversation />
+            <SideBar />
+          </Flexbox>
+        </Layout>
+      )}
     </>
   );
 });

package/src/pages/chat/[id]/mobile.tsx

@@ -0,0 +1,31 @@
+import { useRouter } from 'next/router';
+import { PropsWithChildren, memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+
+import Header from '../features/Header';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  const [activeSession, toggleTopic] = useSessionStore((s) => {
+    return [s.activeSession, s.toggleTopic];
+  }, shallow);
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  useOnFinishHydrationSession(() => {
+    // 1. 正常激活会话
+    if (typeof id === 'string') {
+      activeSession(id);
+    }
+
+    // 将话题重置为默认值
+    toggleTopic();
+  }, [id]);
+
+  return <AppMobileLayout navBar={<Header />}>{children}</AppMobileLayout>;
+});
+
+export default MobileLayout;

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

@@ -1,4 +1,10 @@
-import { ActionIcon, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
+import {
+  ActionIcon,
+  ChatHeader,
+  ChatHeaderTitle,
+  MobileNavBar,
+  MobileNavBarTitle,
+} from '@lobehub/ui';
 import { Dropdown, MenuProps } from 'antd';
 import { HardDriveDownload, Share2 } from 'lucide-react';
 import Router from 'next/router';
@@ -8,7 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { useSessionStore } from '@/store/session';
 
-const Header = memo(() => {
+const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('setting');
   const id = useSessionStore((s) => s.activeId);
 
@@ -36,6 +42,23 @@ const Header = memo(() => {
     [],
   );
 
+  if (mobile)
+    return (
+      <MobileNavBar
+        center={<MobileNavBarTitle title={t('header.session')} />}
+        onBackClick={() => Router.back()}
+        right={
+          <>
+            <ActionIcon icon={Share2} title={t('share', { ns: 'common' })} />
+            <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+              <ActionIcon icon={HardDriveDownload} title={t('export', { ns: 'common' })} />
+            </Dropdown>
+          </>
+        }
+        showBackButton
+      />
+    );
+
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.session')} />}

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

@@ -1,10 +1,11 @@
+import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 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 { HEADER_HEIGHT } from '@/const/layoutTokens';
 import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
 import { agentSelectors, useSessionStore } from '@/store/session';
@@ -12,8 +13,10 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import ChatLayout from '../layout';
 import Header from './Header';
+import Mobile from './mobile';
 
 const EditPage = memo(() => {
+  const { mobile } = useResponsive();
   const { t } = useTranslation('setting');
   const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
   const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
@@ -27,26 +30,40 @@ const EditPage = memo(() => {
 
   const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
 
+  const settings = (
+    <>
+      <AgentPrompt config={config} updateConfig={updateAgentConfig} />
+      <AgentMeta
+        autocomplete={autocomplete}
+        config={config}
+        meta={meta}
+        updateMeta={updateAgentMeta}
+      />
+      <AgentConfig config={config} updateConfig={updateAgentConfig} />
+      <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
+    </>
+  );
+
   return (
     <>
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <ChatLayout>
-        <Header />
-        <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
-          <HeaderSpacing height={HEADER_HEIGHT - 16} />
-          <AgentPrompt config={config} updateConfig={updateAgentConfig} />
-          <AgentMeta
-            autocomplete={autocomplete}
-            config={config}
-            meta={meta}
-            updateMeta={updateAgentMeta}
-          />
-          <AgentConfig config={config} updateConfig={updateAgentConfig} />
-          <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
-        </Flexbox>
-      </ChatLayout>
+      {mobile ? (
+        <Mobile>
+          <Flexbox gap={16} padding={16}>
+            {settings}
+          </Flexbox>
+        </Mobile>
+      ) : (
+        <ChatLayout>
+          <Header />
+          <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
+            <SafeSpacing height={HEADER_HEIGHT - 16} />
+            {settings}
+          </Flexbox>
+        </ChatLayout>
+      )}
     </>
   );
 });

package/src/pages/chat/[id]/setting/mobile.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren, memo } from 'react';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import Header from './Header';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  return <AppMobileLayout navBar={<Header mobile />}>{children}</AppMobileLayout>;
+});
+
+export default MobileLayout;

package/src/pages/chat/features/Conversation/ChatList/Error/Plugin/PluginError.tsx

@@ -0,0 +1,28 @@
+import { Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+
+interface OpenAIError {
+  code: 'invalid_api_key' | string;
+  message: string;
+  param?: any;
+  type: string;
+}
+
+interface OpenAIErrorResponse {
+  error: OpenAIError;
+}
+
+const PluginError = memo<{ content: OpenAIErrorResponse; id: string }>(({ content }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.container} style={{ maxWidth: 600 }}>
+      <Highlighter language={'json'}>{JSON.stringify(content, null, 2)}</Highlighter>
+    </Flexbox>
+  );
+});
+
+export default PluginError;

package/src/pages/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx

@@ -0,0 +1,61 @@
+import { Avatar } from '@lobehub/ui';
+import { Button, Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import PluginSettingsConfig from '@/features/PluginSettings';
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { useSessionStore } from '@/store/session';
+
+import { ErrorActionContainer, useStyles } from '../style';
+
+interface PluginSettingsProps {
+  id: string;
+  pluginIdentifier: string;
+}
+
+const PluginSettings = memo<PluginSettingsProps>(({ id, pluginIdentifier }) => {
+  const { styles } = useStyles();
+
+  const { t } = useTranslation('error');
+  const theme = useTheme();
+  const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
+  const plugin = usePluginStore(pluginSelectors.getPluginMetaById(pluginIdentifier));
+  const manifest = usePluginStore(pluginSelectors.getPluginManifestSettingsById(pluginIdentifier));
+
+  return (
+    <ErrorActionContainer>
+      <Center gap={16} style={{ maxWidth: 400 }}>
+        <Avatar
+          avatar={plugin?.meta.avatar || '⚙️'}
+          background={theme.colorFillContent}
+          gap={12}
+          size={80}
+        />
+        <Flexbox style={{ fontSize: 20 }}>
+          {t('pluginSettings.title', { name: plugin?.meta.title })}
+        </Flexbox>
+        <Flexbox className={styles.desc}>{t('pluginSettings.desc')}</Flexbox>
+        <Divider style={{ margin: '0 16px' }} />
+        {manifest.settings && (
+          <PluginSettingsConfig id={manifest.identifier} settings={manifest.settings} />
+        )}
+        <Button
+          block
+          onClick={() => {
+            resend(id);
+            deleteMessage(id);
+          }}
+          style={{ marginTop: 8 }}
+          type={'primary'}
+        >
+          {t('unlock.confirm')}
+        </Button>
+      </Center>
+    </ErrorActionContainer>
+  );
+});
+
+export default PluginSettings;

package/src/pages/chat/features/Conversation/ChatList/Error/index.tsx

@@ -0,0 +1,42 @@
+import { IPluginErrorType, PluginErrorType } from '@lobehub/chat-plugin-sdk';
+import { RenderErrorMessage } from '@lobehub/ui';
+
+import { ChatMessage } from '@/types/chatMessage';
+import { ChatErrorType, ErrorType } from '@/types/fetch';
+
+import InvalidAccess from './InvalidAccess';
+import OpenAiBizError from './OpenAiBizError';
+import PluginError from './Plugin/PluginError';
+import PluginSettings from './Plugin/PluginSettings';
+
+export const renderErrorMessage: RenderErrorMessage = (error, message: ChatMessage) => {
+  switch (error.type as IPluginErrorType) {
+    case PluginErrorType.PluginMarketIndexNotFound:
+    case PluginErrorType.PluginMarketIndexInvalid:
+    case PluginErrorType.PluginMetaInvalid:
+    case PluginErrorType.PluginMetaNotFound:
+    case PluginErrorType.PluginManifestInvalid:
+    case PluginErrorType.PluginManifestNotFound:
+    case PluginErrorType.PluginApiNotFound:
+    case PluginErrorType.PluginApiParamsError: {
+      return <PluginError content={(error as any).body} id={message.id} />;
+    }
+    case PluginErrorType.PluginSettingsInvalid: {
+      return (
+        message.plugin?.identifier && (
+          <PluginSettings id={message.id} pluginIdentifier={message.plugin?.identifier} />
+        )
+      );
+    }
+  }
+
+  switch (error.type as ErrorType) {
+    case ChatErrorType.InvalidAccessCode: {
+      return <InvalidAccess id={message.id} />;
+    }
+
+    case ChatErrorType.OpenAIBizError: {
+      return <OpenAiBizError content={(error as any).body} id={message.id} />;
+    }
+  }
+};

package/src/pages/chat/features/Conversation/ChatList/index.tsx

@@ -1,4 +1,4 @@
-import { ChatList, RenderErrorMessage, RenderMessage } from '@lobehub/ui';
+import { ChatList, RenderMessage } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,27 +11,14 @@ import {
   useSessionStore,
 } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
-import { ErrorType } from '@/types/fetch';
 import { isFunctionMessage } from '@/utils/message';
 
-import InvalidAccess from './Error/InvalidAccess';
-import OpenAiBizError from './Error/OpenAiBizError';
+import { renderErrorMessage } from './Error';
 import MessageExtra from './MessageExtra';
 import FunctionCall from './Plugins/FunctionCall';
 import PluginMessage from './Plugins/PluginMessage';
 import SkeletonList from './SkeletonList';
 
-const renderErrorMessage: RenderErrorMessage = (error, message) => {
-  switch (error.type as ErrorType) {
-    case 'InvalidAccessCode': {
-      return <InvalidAccess id={message.id} />;
-    }
-    case 'OpenAIBizError': {
-      return <OpenAiBizError content={(error as any).body} id={message.id} />;
-    }
-  }
-};
-
 const List = () => {
   const init = useSessionChatInit();
   const { t } = useTranslation('common');

package/src/pages/chat/features/Conversation/index.tsx

@@ -3,19 +3,19 @@ import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/components/HeaderSpacing';
+import SafeSpacing from '@/components/SafeSpacing';
 
 import ChatList from './ChatList';
 import ChatInput from './Input';
 
-const Conversation = () => {
+const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   const ref = useRef(null);
   const { t } = useTranslation('common');
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
         <div ref={ref} style={{ height: '100%', overflowY: 'scroll' }}>
-          <HeaderSpacing />
+          {!mobile && <SafeSpacing />}
           <ChatList />
         </div>
         <BackBottom target={ref} text={t('backToBottom')} />
@@ -23,6 +23,6 @@ const Conversation = () => {
       <ChatInput />
     </Flexbox>
   );
-};
+});
 
-export default memo(Conversation);
+export default Conversation;