@lobehub/chat 0.56.0 → 0.58.0

package/CHANGELOG.md

@@ -2,6 +2,77 @@
 
 # Changelog
 
+## [Version 0.58.0](https://github.com/lobehub/lobe-chat/compare/v0.57.0...v0.58.0)
+
+<sup>Released on **2023-08-26**</sup>
+
+#### ✨ Features
+
+- **misc**: Implement responsive design for mobile devices.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Implement responsive design for mobile devices, closes [#95](https://github.com/lobehub/lobe-chat/issues/95) ([fdb3c93](https://github.com/lobehub/lobe-chat/commit/fdb3c93))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.57.0](https://github.com/lobehub/lobe-chat/compare/v0.56.0...v0.57.0)
+
+<sup>Released on **2023-08-26**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor to ChatErrorType.
+
+#### ✨ Features
+
+- **misc**: 完善插件请求的错误处理, 支持修改与记录插件的配置, 支持发送插件配置信息, 支持渲染 manifest 中的 settings, 支持设置不正确时进行插件的配置, 新增插件请求状态的错误处理.
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正缓存旧数据的报错问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor to ChatErrorType ([cd1a033](https://github.com/lobehub/lobe-chat/commit/cd1a033))
+
+#### What's improved
+
+- **misc**: 完善插件请求的错误处理 ([0698d89](https://github.com/lobehub/lobe-chat/commit/0698d89))
+- **misc**: 支持修改与记录插件的配置 ([76e8237](https://github.com/lobehub/lobe-chat/commit/76e8237))
+- **misc**: 支持发送插件配置信息 ([2cedc85](https://github.com/lobehub/lobe-chat/commit/2cedc85))
+- **misc**: 支持渲染 manifest 中的 settings ([1185300](https://github.com/lobehub/lobe-chat/commit/1185300))
+- **misc**: 支持设置不正确时进行插件的配置 ([f972481](https://github.com/lobehub/lobe-chat/commit/f972481))
+- **misc**: 新增插件请求状态的错误处理 ([228002a](https://github.com/lobehub/lobe-chat/commit/228002a))
+
+#### What's fixed
+
+- **misc**: 修正缓存旧数据的报错问题 ([5d8008f](https://github.com/lobehub/lobe-chat/commit/5d8008f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.56.0](https://github.com/lobehub/lobe-chat/compare/v0.55.1...v0.56.0)
 
 <sup>Released on **2023-08-24**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.56.0",
+  "version": "0.58.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -130,7 +130,7 @@
     "lint-staged": "^14",
     "next-pwa": "^5",
     "node-fetch": "^3",
-    "prettier": "^2",
+    "prettier": "^3",
     "remark": "^14",
     "remark-cli": "^11",
     "semantic-release": "^21",

package/src/components/SafeSpacing/index.tsx

@@ -0,0 +1,27 @@
+import { MobileSafeArea, type MobileSafeAreaProps } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { HEADER_HEIGHT, MOBILE_NABBAR_HEIGHT, MOBILE_TABBAR_HEIGHT } from '@/const/layoutTokens';
+
+interface SafeSpacingProps {
+  height?: number;
+  mobile?: boolean;
+  position?: MobileSafeAreaProps['position'];
+}
+
+const SafeSpacing = memo<SafeSpacingProps>(({ height, position = 'top', mobile }) => {
+  let h;
+  if (mobile) {
+    h = position === 'top' ? MOBILE_NABBAR_HEIGHT : MOBILE_TABBAR_HEIGHT;
+  } else {
+    h = HEADER_HEIGHT;
+  }
+  return (
+    <>
+      <div style={{ flex: 'none', height: height || h }} />
+      {mobile && <MobileSafeArea position={position} />}
+    </>
+  );
+});
+
+export default SafeSpacing;

package/src/const/fetch.ts

@@ -3,3 +3,5 @@ export const OPENAI_END_POINT = 'X-OPENAI-END_POINT';
 export const OPENAI_API_KEY_HEADER_KEY = 'X-OPENAI-API-KEY';
 
 export const LOBE_CHAT_ACCESS_CODE = 'X-LOBE_CHAT_ACCESS_CODE';
+
+export const LOBE_PLUGIN_SETTINGS = 'X-LOBE_PLUGIN_SETTINGS';

package/src/const/layoutTokens.ts

@@ -1,6 +1,8 @@
 import type { FormProps } from '@lobehub/ui';
 
 export const HEADER_HEIGHT = 64;
+export const MOBILE_NABBAR_HEIGHT = 44;
+export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_HEIGHT = 200;
 export const CHAT_SIDEBAR_WIDTH = 280;
 export const FOLDER_WIDTH = 256;

package/src/features/AgentSetting/AgentPlugin/index.tsx

@@ -1,17 +1,20 @@
-import { Avatar, Form, ItemGroup } from '@lobehub/ui';
+import { Avatar, Form, ItemGroup, Markdown } from '@lobehub/ui';
 import { Skeleton, Switch } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ToyBrick } from 'lucide-react';
-import { memo, useMemo } from 'react';
+import { LucideStore, ToyBrick } from 'lucide-react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { transformPluginSettings } from '@/features/PluginSettings';
+import PluginSettingRender from '@/features/PluginSettings/PluginSettingRender';
 import { usePluginStore } from '@/store/plugin';
-import { AgentAction } from '@/store/session/slices/agentConfig';
+import { useSessionStore } from '@/store/session';
+import { AgentAction, agentSelectors } from '@/store/session/slices/agentConfig';
 import { LobeAgentConfig } from '@/types/session';
 
-const useStyles = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css, token }) => ({
   avatar: css`
     .ant-skeleton-header {
       padding-right: 0;
@@ -26,6 +29,11 @@ const useStyles = createStyles(({ css }) => ({
       margin-block-start: 12px !important;
     }
   `,
+  md: css`
+    p {
+      color: ${token.colorTextDescription};
+    }
+  `,
 }));
 
 export interface AgentPluginProps {
@@ -36,72 +44,111 @@ export interface AgentPluginProps {
 const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
-  const [useFetchPluginList, fetchPluginManifest] = usePluginStore((s) => [
+  const [useFetchPluginList, fetchPluginManifest, updatePluginSettings] = usePluginStore((s) => [
     s.useFetchPluginList,
     s.fetchPluginManifest,
+    s.updatePluginSettings,
   ]);
   const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
+  const pluginManifestMap = usePluginStore((s) => s.pluginManifestMap, isEqual);
+  const pluginsSettings = usePluginStore((s) => s.pluginsSettings, isEqual);
   const { data } = useFetchPluginList();
 
-  const plugin: ItemGroup = useMemo(() => {
-    let children;
+  const plugins = useSessionStore(agentSelectors.currentAgentPlugins);
 
-    const loadingItem = {
-      avatar: (
-        <Skeleton
-          active
-          avatar={{ size: 40 }}
-          className={styles.avatar}
-          paragraph={false}
-          title={false}
-        />
-      ),
-      label: (
-        <Skeleton
-          active
-          avatar={false}
-          paragraph={{ className: styles.label, style: { marginBottom: 0 } }}
-          style={{ width: 300 }}
-          title={false}
-        />
-      ),
-    };
+  const loadingItem = {
+    avatar: (
+      <Skeleton
+        active
+        avatar={{ size: 40 }}
+        className={styles.avatar}
+        paragraph={false}
+        title={false}
+      />
+    ),
+    label: (
+      <Skeleton
+        active
+        avatar={false}
+        paragraph={{ className: styles.label, style: { marginBottom: 0 } }}
+        style={{ width: 300 }}
+        title={false}
+      />
+    ),
+  };
 
-    children = !data
-      ? [loadingItem, loadingItem, loadingItem]
-      : data.plugins.map((item) => ({
-          avatar: <Avatar avatar={item.meta.avatar} />,
-          children: (
-            <Switch
-              checked={
-                // 如果在加载中，说明激活了
-                pluginManifestLoading[item.identifier] || !config.plugins
-                  ? false
-                  : config.plugins.includes(item.identifier)
+  const children = !data
+    ? [loadingItem, loadingItem, loadingItem]
+    : data.plugins.map(({ identifier, meta }) => ({
+        avatar: <Avatar avatar={meta.avatar} />,
+        children: (
+          <Switch
+            checked={
+              // 如果在加载中，说明激活了
+              pluginManifestLoading[identifier] || !config.plugins
+                ? false
+                : config.plugins.includes(identifier)
+            }
+            loading={pluginManifestLoading[identifier]}
+            onChange={(checked) => {
+              updateConfig(identifier, checked);
+              if (checked) {
+                fetchPluginManifest(identifier);
               }
-              loading={pluginManifestLoading[item.identifier]}
-              onChange={(checked) => {
-                updateConfig(item.identifier, checked);
-                if (checked) {
-                  fetchPluginManifest(item.identifier);
-                }
-              }}
-            />
-          ),
-          desc: item.meta?.description,
-          label: t(`plugins.${item.identifier}` as any, { ns: 'plugin' }),
-          minWidth: undefined,
-          tag: item.identifier,
-        }));
+            }}
+          />
+        ),
+        desc: meta?.description,
+        label: meta.title,
+        minWidth: undefined,
+        tag: identifier,
+      }));
+
+  const pluginsConfig = !data
+    ? []
+    : (plugins
+        .map((identifier) => {
+          const item = data.plugins.find((i) => i.identifier === identifier);
+
+          if (!item) return null;
+          const manifest = pluginManifestMap[identifier];
+
+          if (!manifest.settings) return null;
 
-    return {
-      children,
-      icon: ToyBrick,
-      title: t('settingPlugin.title'),
-    };
-  }, [config, data?.plugins, pluginManifestLoading]);
+          return {
+            children: transformPluginSettings(manifest.settings).map((item) => ({
+              ...item,
+              children: (
+                <PluginSettingRender
+                  defaultValue={pluginsSettings[identifier]?.[item.name]}
+                  format={item.format}
+                  onChange={(value) => {
+                    updatePluginSettings(identifier, { [item.name]: value });
+                  }}
+                  type={item.type as any}
+                />
+              ),
+              desc: item.desc && <Markdown className={styles.md}>{item.desc}</Markdown>,
+            })),
+            icon: ToyBrick,
+            title: t('settingPlugin.config', { id: item.meta.title || item.identifier }),
+          };
+        })
+        .filter(Boolean) as unknown as ItemGroup[]);
 
-  return <Form items={[plugin]} {...FORM_STYLE} />;
+  return (
+    <Form
+      items={[
+        {
+          children,
+          icon: LucideStore,
+          title: t('settingPlugin.title'),
+        },
+        ...pluginsConfig,
+      ]}
+      {...FORM_STYLE}
+    />
+  );
 });
 
 export default AgentPlugin;

package/src/features/AvatarWithUpload/index.tsx

@@ -1,7 +1,7 @@
 import { Avatar, Logo } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 
 import { useGlobalStore } from '@/store/global';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
@@ -25,9 +25,10 @@ const useStyle = createStyles(
 interface AvatarWithUploadProps {
   compressSize?: number;
   size?: number;
+  style?: CSSProperties;
 }
 
-const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40, compressSize = 128 }) => {
+const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40, compressSize = 128, style }) => {
   const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
   const { styles } = useStyle();
 
@@ -67,7 +68,7 @@ const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40, compressSize
   });
 
   return (
-    <div className={styles} style={{ maxHeight: size, maxWidth: size }}>
+    <div className={styles} style={{ maxHeight: size, maxWidth: size, ...style }}>
       <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
         {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
       </Upload>

package/src/features/MobileTabBar/index.tsx

@@ -0,0 +1,60 @@
+import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { MessageSquare, Settings2, Sticker } from 'lucide-react';
+import Router from 'next/router';
+import { rgba } from 'polished';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    svg {
+      fill: ${rgba(token.colorPrimary, 0.25)};
+    }
+  `,
+}));
+
+export default memo<{ className?: string }>(({ className }) => {
+  const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+  const items: MobileTabBarProps['items'] = useMemo(
+    () => [
+      {
+        icon: (active) => (
+          <Icon className={active ? styles.active : undefined} icon={MessageSquare} />
+        ),
+        key: 'chat',
+        onClick: () => {
+          Router.push('/chat');
+        },
+        title: t('tab.chat'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Sticker} />,
+        key: 'market',
+
+        title: t('tab.market'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Settings2} />,
+        key: 'settings',
+        onClick: () => {
+          Router.push('/settings');
+        },
+        title: t('tab.setting'),
+      },
+    ],
+    [t],
+  );
+  return (
+    <MobileTabBar
+      activeKey={tab}
+      className={className}
+      items={items}
+      onChange={(key) => setTab(key as any)}
+    />
+  );
+});

package/src/features/PluginSettings/PluginSettingRender.tsx

@@ -0,0 +1,65 @@
+import { Input, InputNumber, Switch } from 'antd';
+import { memo } from 'react';
+
+interface PluginSettingsProps {
+  defaultValue?: any;
+  format?: string;
+  onChange: (value: any) => void;
+  props?: any;
+  type?: 'string' | 'number' | 'boolean';
+}
+
+const PluginSettingRender = memo<PluginSettingsProps>(
+  ({ type, defaultValue, onChange, format, props }) => {
+    switch (type) {
+      case 'string': {
+        switch (format) {
+          case 'password': {
+            return (
+              <Input.Password
+                {...props}
+                defaultValue={defaultValue}
+                onChange={(v) => {
+                  onChange(v.target.value);
+                }}
+              />
+            );
+          }
+        }
+        return (
+          <Input
+            {...props}
+            defaultValue={defaultValue}
+            onChange={(v) => {
+              onChange(v.target.value);
+            }}
+          />
+        );
+      }
+      case 'number': {
+        return (
+          <InputNumber
+            {...props}
+            defaultValue={defaultValue}
+            onChange={(v) => {
+              onChange(v);
+            }}
+          />
+        );
+      }
+      case 'boolean': {
+        return (
+          <Switch
+            {...props}
+            defaultValue={defaultValue}
+            onChange={(e) => {
+              onChange(e);
+            }}
+          />
+        );
+      }
+    }
+  },
+);
+
+export default PluginSettingRender;

package/src/features/PluginSettings/index.tsx

@@ -0,0 +1,65 @@
+import { PluginSchema } from '@lobehub/chat-plugin-sdk';
+import { Form, Markdown } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { usePluginStore } from '@/store/plugin';
+
+import PluginSettingRender from './PluginSettingRender';
+
+export const transformPluginSettings = (pluginSettings: PluginSchema) => {
+  return Object.entries(pluginSettings.properties).map(([name, i]) => ({
+    desc: i.description,
+    format: i.format,
+    label: i.title,
+    name,
+    tag: name,
+    type: i.type,
+  }));
+};
+
+interface PluginSettingsConfigProps {
+  id: string;
+  settings: PluginSchema;
+}
+
+const useStyles = createStyles(({ css, token }) => ({
+  md: css`
+    p {
+      color: ${token.colorTextDescription};
+    }
+  `,
+}));
+
+const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ settings, id }) => {
+  const items = transformPluginSettings(settings);
+
+  const { styles } = useStyles();
+  const [updatePluginSettings] = usePluginStore((s) => [s.updatePluginSettings]);
+  const pluginSetting = usePluginStore((s) => s.pluginsSettings[id] || {}, isEqual);
+
+  return (
+    <Form layout={'vertical'}>
+      {items.map((item) => (
+        <Form.Item
+          desc={item.desc && <Markdown className={styles.md}>{item.desc as string}</Markdown>}
+          key={item.label}
+          label={item.label}
+          tag={item.tag}
+        >
+          <PluginSettingRender
+            defaultValue={pluginSetting[item.name]}
+            format={item.format}
+            onChange={(value) => {
+              updatePluginSettings(id, { [item.name]: value });
+            }}
+            type={item.type as any}
+          />
+        </Form.Item>
+      ))}
+    </Form>
+  );
+});
+
+export default PluginSettingsConfig;

package/src/features/SideBar/TopActions.tsx

@@ -22,8 +22,8 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         onClick={() => {
           // 如果已经在 chat 路径下了，那么就不用再跳转了
           if (Router.asPath.startsWith('/chat')) return;
-
           Router.push('/chat');
+          setTab('chat');
         }}
         size="large"
         title={t('tab.chat')}

package/src/layout/AppMobileLayout.tsx

@@ -0,0 +1,76 @@
+import { type MobileNavBarTitleProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Head from 'next/head';
+import { CSSProperties, PropsWithChildren, ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import MobileTabBar from '@/features/MobileTabBar';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    position: relative;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    width: 100vw;
+    height: 100vh;
+  `,
+  mobileNavBar: css`
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    right: 0;
+    left: 0;
+  `,
+  mobileTabBar: css`
+    position: fixed;
+    z-index: 100;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  `,
+}));
+
+interface AppMobileLayoutProps extends PropsWithChildren {
+  className?: string;
+  navBar?: ReactNode;
+  showTabBar?: boolean;
+  style?: CSSProperties;
+  title?: MobileNavBarTitleProps;
+}
+
+const AppMobileLayout = memo<AppMobileLayoutProps>(
+  ({ children, showTabBar, navBar, style, className }) => {
+    const { styles, cx } = useStyles();
+
+    return (
+      <>
+        <Head>
+          <meta
+            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+            name="viewport"
+          />
+        </Head>
+        <Flexbox className={cx(styles.container, className)} style={style}>
+          {navBar && (
+            <>
+              <div className={styles.mobileNavBar}>{navBar}</div>
+              <SafeSpacing mobile position={'top'} />
+            </>
+          )}
+          {children}
+          {showTabBar && (
+            <>
+              <SafeSpacing mobile position={'bottom'} />
+              <MobileTabBar className={styles.mobileTabBar} />
+            </>
+          )}
+        </Flexbox>
+      </>
+    );
+  },
+);
+
+export default AppMobileLayout;

package/src/locales/default/common.ts

@@ -63,7 +63,8 @@ export default {
   stop: '停止',
   tab: {
     chat: '会话',
-    market: '助手市场',
+    market: '发现',
+    setting: '设置',
   },
   temp: '临时',
   tokenDetail: '角色设定: {{systemRoleToken}} · 历史消息: {{chatsToken}}',
@@ -77,6 +78,7 @@ export default {
     defaultTitle: '默认话题',
     saveCurrentMessages: '将当前会话保存为话题',
     searchPlaceholder: '搜索话题...',
+    title: '话题',
   },
   updateAgent: '更新助理信息',
   updatePrompt: '更新提示词',