@lobehub/chat 0.81.0 → 0.82.2

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

@@ -1,9 +1,10 @@
-import { Input, Modal, Tooltip } from '@lobehub/ui';
-import { Form } from 'antd';
+import { Form, Input, Modal } from '@lobehub/ui';
+import { Alert } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import MobilePadding from '@/components/MobilePadding';
 import { PLUGINS_INDEX_URL } from '@/const/url';
 
 interface MarketSettingModalProps {
@@ -15,20 +16,32 @@ const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }
   const { t } = useTranslation('plugin');
 
   return (
-    <Modal
-      footer={null}
-      onCancel={() => onOpenChange(false)}
-      open={open}
-      title={t('settings.title')}
-    >
-      <Flexbox gap={12}>
-        <Form layout={'vertical'}>
-          <Form.Item extra={t('settings.modalDesc')} label={t('settings.indexUrl.title')}>
-            <Tooltip title={t('settings.indexUrl.tooltip')}>
-              <Input defaultValue={PLUGINS_INDEX_URL} disabled placeholder={'https://xxxxx.com'} />
-            </Tooltip>
-          </Form.Item>
-        </Form>
+    <Modal footer={null} onCancel={() => onOpenChange(false)} open={open} title={t('setting')}>
+      <Flexbox gap={16}>
+        <MobilePadding bottom={0} gap={16}>
+          <Alert message={t('settings.indexUrl.tooltip')} showIcon type={'warning'} />
+        </MobilePadding>
+        <Form
+          items={[
+            {
+              children: [
+                {
+                  children: (
+                    <Input
+                      defaultValue={PLUGINS_INDEX_URL}
+                      disabled
+                      placeholder={PLUGINS_INDEX_URL}
+                      style={{ width: '100%' }}
+                    />
+                  ),
+                  desc: t('settings.modalDesc'),
+                  label: t('settings.indexUrl.title'),
+                },
+              ],
+              title: t('settings.title'),
+            },
+          ]}
+        />
       </Flexbox>
     </Modal>
   );

package/src/features/AvatarWithUpload/index.tsx

@@ -4,6 +4,7 @@ import { createStyles } from 'antd-style';
 import { CSSProperties, memo } from 'react';
 
 import { useGlobalStore } from '@/store/global';
+import { imageToBase64 } from '@/utils/imageToBase64';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
 const useStyle = createStyles(
@@ -26,56 +27,33 @@ const useStyle = createStyles(
 
 interface AvatarWithUploadProps {
   compressSize?: number;
+  id?: string;
   size?: number;
   style?: CSSProperties;
 }
 
-const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40, compressSize = 128, style }) => {
-  const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
-  const { styles } = useStyle();
-
-  const handleUploadAvatar = createUploadImageHandler((avatar) => {
-    const img = new Image();
-    img.src = avatar;
-    img.addEventListener('load', () => {
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-      let startX = 0;
-      let startY = 0;
-
-      if (img.width > img.height) {
-        startX = (img.width - img.height) / 2;
-      } else {
-        startY = (img.height - img.width) / 2;
-      }
-
-      canvas.width = compressSize;
-      canvas.height = compressSize;
-
-      ctx.drawImage(
-        img,
-        startX,
-        startY,
-        Math.min(img.width, img.height),
-        Math.min(img.width, img.height),
-        0,
-        0,
-        compressSize,
-        compressSize,
-      );
-
-      const webpBase64 = canvas.toDataURL('image/webp');
-      setSettings({ avatar: webpBase64 });
+const AvatarWithUpload = memo<AvatarWithUploadProps>(
+  ({ size = 40, compressSize = 128, style, id }) => {
+    const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
+    const { styles } = useStyle();
+
+    const handleUploadAvatar = createUploadImageHandler((avatar) => {
+      const img = new Image();
+      img.src = avatar;
+      img.addEventListener('load', () => {
+        const webpBase64 = imageToBase64({ img, size: compressSize });
+        setSettings({ avatar: webpBase64 });
+      });
     });
-  });
 
-  return (
-    <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>
-    </div>
-  );
-});
+    return (
+      <div className={styles} id={id} style={{ maxHeight: size, maxWidth: size, ...style }}>
+        <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+          {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
+        </Upload>
+      </div>
+    );
+  },
+);
 
 export default AvatarWithUpload;

package/src/features/MobileTabBar/index.tsx

@@ -1,12 +1,13 @@
 import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { Bot, MessageSquare } from 'lucide-react';
+import { Bot, MessageSquare, User } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 const useStyles = createStyles(({ css, token }) => ({
   active: css`
@@ -27,20 +28,31 @@ export default memo<{ className?: string }>(({ className }) => {
         icon: (active) => (
           <Icon className={active ? styles.active : undefined} icon={MessageSquare} />
         ),
-        key: 'chat',
+        key: SidebarTabKey.Chat,
         onClick: () => {
+          setTab(SidebarTabKey.Chat);
           router.push('/chat');
         },
         title: t('tab.chat'),
       },
       {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
-        key: 'market',
+        key: SidebarTabKey.Market,
         onClick: () => {
+          setTab(SidebarTabKey.Market);
           router.push('/market');
         },
         title: t('tab.market'),
       },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
+        key: SidebarTabKey.Setting,
+        onClick: () => {
+          setTab(SidebarTabKey.Setting);
+          router.push('/settings/mobile');
+        },
+        title: t('tab.setting'),
+      },
     ],
     [t],
   );

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -1,5 +1,5 @@
 import { Avatar, Form } from '@lobehub/ui';
-import { Form as AForm, Card, FormInstance, Switch, Tag } from 'antd';
+import { Form as AForm, FormInstance, Switch, Tag } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -28,9 +28,16 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   };
 
   return (
-    <Card size={'small'} title={t('dev.preview.card')}>
-      <Form.Item {...items} colon={false} style={{ marginBottom: 0 }} />
-    </Card>
+    <Form
+      colon={false}
+      items={[
+        {
+          children: [items],
+          title: t('dev.preview.card'),
+        },
+      ]}
+      style={{ marginBottom: 0 }}
+    />
   );
 });
 

package/src/features/PluginDevModal/index.tsx

@@ -1,9 +1,11 @@
 import { Modal } from '@lobehub/ui';
-import { App, Button, Form, Popconfirm } from 'antd';
+import { Alert, App, Button, Form, Popconfirm } from 'antd';
+import { useResponsive } from 'antd-style';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import MobilePadding from '@/components/MobilePadding';
 import { CustomPlugin } from '@/types/plugin';
 
 import ManifestForm from './ManifestForm';
@@ -25,7 +27,7 @@ const DevModal = memo<DevModalProps>(
     const isEditMode = mode === 'edit';
     const { t } = useTranslation('plugin');
     const { message } = App.useApp();
-
+    const { mobile } = useResponsive();
     const [submitting, setSubmitting] = useState(false);
     const [form] = Form.useForm();
     useEffect(() => {
@@ -98,14 +100,16 @@ const DevModal = memo<DevModalProps>(
           open={open}
           title={t('dev.title')}
         >
-          <Flexbox gap={12}>
-            {t('dev.modalDesc')}
-            {/*<Tabs*/}
-            {/*  items={[*/}
-            {/*    { children: <MetaForm />, key: 'meta', label: t('dev.tabs.meta') },*/}
-            {/*    { children: <ManifestForm />, key: 'manifest', label: t('dev.tabs.manifest') },*/}
-            {/*  ]}*/}
-            {/*/>*/}
+          <Flexbox gap={mobile ? 0 : 16}>
+            <MobilePadding bottom={0} gap={16}>
+              <Alert message={t('dev.modalDesc')} showIcon type={'info'} />
+              {/*<Tabs*/}
+              {/*  items={[*/}
+              {/*    { children: <MetaForm />, key: 'meta', label: t('dev.tabs.meta') },*/}
+              {/*    { children: <ManifestForm />, key: 'manifest', label: t('dev.tabs.manifest') },*/}
+              {/*  ]}*/}
+              {/*/>*/}
+            </MobilePadding>
             <PluginPreview form={form} />
             <ManifestForm form={form} />
             <MetaForm form={form} mode={mode} />

package/src/features/SideBar/BottomActions.tsx

@@ -18,6 +18,7 @@ import { ABOUT, CHANGELOG, DISCORD, FEEDBACK, GITHUB } from '@/const/url';
 import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
 import { GlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 export interface BottomActionProps {
   setTab: GlobalStore['switchSideBar'];
@@ -27,7 +28,6 @@ export interface BottomActionProps {
 const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
   const router = useRouter();
   const { t } = useTranslation('common');
-
   const { exportSessions, exportSettings, exportAll, exportAgents } = useExportConfig();
   const { importConfig } = useImportConfig();
 
@@ -101,7 +101,7 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         key: 'setting',
         label: t('setting'),
         onClick: () => {
-          setTab('settings');
+          setTab(SidebarTabKey.Setting);
           router.push('/settings');
         },
       },
@@ -124,7 +124,7 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         title={'Github'}
       />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        <ActionIcon active={tab === 'settings'} icon={Settings2} />
+        <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
       </Dropdown>
     </>
   );

package/src/features/SideBar/TopActions.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { GlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 export interface TopActionProps {
@@ -20,25 +21,25 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
   return (
     <>
       <ActionIcon
-        active={tab === 'chat'}
+        active={tab === SidebarTabKey.Chat}
         icon={MessageSquare}
         onClick={() => {
           // 如果已经在 chat 路径下了，那么就不用再跳转了
           if (pathname?.startsWith('/chat')) return;
           switchBackToChat();
-          setTab('chat');
+          setTab(SidebarTabKey.Chat);
         }}
         placement={'right'}
         size="large"
         title={t('tab.chat')}
       />
       <ActionIcon
-        active={tab === 'market'}
+        active={tab === SidebarTabKey.Market}
         icon={Bot}
         onClick={() => {
           if (pathname?.startsWith('/market')) return;
           router.push('/market');
-          setTab('market');
+          setTab(SidebarTabKey.Market);
         }}
         placement={'right'}
         size="large"

package/src/features/SideBar/index.tsx

@@ -12,7 +12,7 @@ export default memo(() => {
 
   return (
     <SideNav
-      avatar={<AvatarWithUpload />}
+      avatar={<AvatarWithUpload id={'avatar'} />}
       bottomActions={<BottomActions setTab={setTab} tab={tab} />}
       style={{ height: '100vh' }}
       topActions={<TopActions setTab={setTab} tab={tab} />}

package/src/locales/create.ts

@@ -7,6 +7,8 @@ import type { Namespaces } from '@/types/locale';
 
 import resources from './resources';
 
+const isDev = process.env.NODE_ENV === 'development';
+
 export const createI18nNext = (params: { namespace?: Namespaces[] | Namespaces } = {}) => {
   const { namespace } = params;
 
@@ -18,16 +20,16 @@ export const createI18nNext = (params: { namespace?: Namespaces[] | Namespaces }
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({
-      debug: process.env.NODE_ENV === 'development',
+      debug: isDev,
       defaultNS: ns,
       detection: {
         caches: [],
       },
-      fallbackLng: 'en-US',
+      fallbackLng: isDev ? 'zh-CN' : 'en-US',
       interpolation: {
         escapeValue: false,
       },
-      lng: 'en-US',
+      lng: isDev ? 'zh-CN' : 'en-US',
       ns,
       resources,
     });

package/src/locales/default/common.ts

@@ -38,7 +38,7 @@ export default {
   import: '导入配置',
   inbox: {
     defaultMessage:
-      '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击<kbd>+</kbd>创建自定义助手',
+      '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击`+`创建自定义助手',
     desc: '开启大脑集群，激发思维火花。你的智能助理，在这里与你交流一切',
     title: '随便聊聊',
   },
@@ -49,6 +49,7 @@ export default {
   newAgent: '新建助手',
   noDescription: '暂无描述',
   ok: '确定',
+  password: '密码',
   pin: '置顶',
   pinOff: '取消置顶',
   regenerate: '重新生成',
@@ -62,6 +63,17 @@ export default {
   sessionList: '助手列表',
   setting: '设置',
   share: '分享',
+  shareModal: {
+    download: '下载截图',
+    imageType: '图片格式',
+    screenshot: '截图',
+    settings: '导出设置',
+    shareToShareGPT: '生成 ShareGPT 分享链接',
+    withBackground: '包含背景图片',
+    withFooter: '包含页脚',
+    withPluginInfo: '包含插件信息',
+    withSystemRole: '包含助手角色设定',
+  },
   stop: '停止',
   tab: {
     chat: '会话',

package/src/locales/default/plugin.ts

@@ -96,10 +96,11 @@ export default {
   plugins: {
     unknown: '插件检测中...',
   },
+  setting: '插件设置',
   settings: {
     indexUrl: {
       title: '市场索引',
-      tooltip: '暂不支持编辑',
+      tooltip: '暂不支持在线编辑，请通过部署时环境变量进行设置',
     },
     modalDesc: '配置插件市场的地址后，可以使用自定义的插件市场',
     title: '设置插件市场',

package/src/services/shareGPT.ts

@@ -1,10 +1,20 @@
 import { ShareGPTConversation } from '@/types/share';
+import { parseMarkdown } from '@/utils/parseMarkdown';
 
 const SHAREGPT_URL = 'https://sharegpt.com/api/conversations';
 
 export const genShareGPTUrl = async (conversation: ShareGPTConversation) => {
+  const items = [];
+
+  for (const item of conversation.items) {
+    items.push({
+      from: item.from,
+      value: item.from === 'gpt' ? await parseMarkdown(item.value) : item.value,
+    });
+  }
+
   const res = await fetch(SHAREGPT_URL, {
-    body: JSON.stringify(conversation),
+    body: JSON.stringify({ ...conversation, items }),
     headers: {
       'Content-Type': 'application/json',
     },

package/src/store/global/hooks/useSwitchSettingsOnInit.ts

@@ -0,0 +1,9 @@
+import { SettingsTabs } from '../initialState';
+import { useGlobalStore } from '../store';
+
+/**
+ * 切换设置侧边栏选项
+ */
+export const useSwitchSideBarOnInit = (key: SettingsTabs) => {
+  useGlobalStore.getState().switchSettingTabs(key);
+};

package/src/store/global/initialState.ts

@@ -1,9 +1,17 @@
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import type { GlobalSettings } from '@/types/settings';
 
-export type SidebarTabKey = 'chat' | 'market' | 'settings';
+export enum SidebarTabKey {
+  Chat = 'chat',
+  Market = 'market',
+  Setting = 'settings',
+}
 
-export type SettingsTabs = 'agent' | 'common' | 'llm';
+export enum SettingsTabs {
+  Agent = 'agent',
+  Common = 'common',
+  LLM = 'llm',
+}
 
 export interface Guide {
   // Topic 引导
@@ -21,7 +29,7 @@ export interface GlobalState {
    * 用户设置
    */
   settings: GlobalSettings;
-  settingsTab?: SettingsTabs;
+  settingsTab: SettingsTabs;
   sidebarKey: SidebarTabKey;
 }
 
@@ -44,5 +52,6 @@ export const initialState: GlobalState = {
     showSessionPanel: true,
   },
   settings: DEFAULT_SETTINGS,
-  sidebarKey: 'chat',
+  settingsTab: SettingsTabs.Common,
+  sidebarKey: SidebarTabKey.Chat,
 };

package/src/store/global/store.ts

@@ -69,10 +69,6 @@ const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
       dbName: 'LobeHub',
       selectors: ['preference', 'settings'],
     },
-    url: {
-      mode: 'hash',
-      selectors: [{ settingsTab: 'tab' }],
-    },
   }),
 };