@lobehub/chat 0.116.1 → 0.116.3

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.116.3](https://github.com/lobehub/lobe-chat/compare/v0.116.2...v0.116.3)
+
+<sup>Released on **2023-12-26**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix typo.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix typo ([9d329a9](https://github.com/lobehub/lobe-chat/commit/9d329a9))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.116.2](https://github.com/lobehub/lobe-chat/compare/v0.116.1...v0.116.2)
+
+<sup>Released on **2023-12-26**</sup>
+
+#### 💄 Styles
+
+- **misc**: Update Modal style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Update Modal style ([ac7d309](https://github.com/lobehub/lobe-chat/commit/ac7d309))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.116.1](https://github.com/lobehub/lobe-chat/compare/v0.116.0...v0.116.1)
 
 <sup>Released on **2023-12-26**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.116.1",
+  "version": "0.116.3",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/chat/(mobile)/features/TopicList.tsx

@@ -15,7 +15,12 @@ const Topics = memo(() => {
   const { t } = useTranslation('chat');
 
   return (
-    <Modal onCancel={() => toggleConfig(false)} open={showAgentSettings} title={t('topic.title')}>
+    <Modal
+      allowFullscreen
+      onCancel={() => toggleConfig(false)}
+      open={showAgentSettings}
+      title={t('topic.title')}
+    >
       <TopicListContent mobile />
     </Modal>
   );

package/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx

@@ -1,9 +1,6 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { Avatar, ChatHeaderTitle, Logo, Markdown, Tag } from '@lobehub/ui';
-import { Button, SegmentedProps } from 'antd';
-import dayjs from 'dayjs';
-import { domToJpeg, domToPng, domToSvg, domToWebp } from 'modern-screenshot';
-import { memo, useCallback, useState } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -14,102 +11,27 @@ import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
 import PluginTag from '../../ChatHeader/PluginTag';
 import { useStyles } from './style';
+import { FieldType } from './type';
 
-export enum ImageType {
-  JPG = 'jpg',
-  PNG = 'png',
-  SVG = 'svg',
-  WEBP = 'webp',
-}
+const Preview = memo<FieldType & { title?: string }>(
+  ({ title, withSystemRole, withBackground, withFooter }) => {
+    const [isInbox, description, avatar, backgroundColor, model, plugins, systemRole] =
+      useSessionStore((s) => [
+        sessionSelectors.isInboxSession(s),
+        agentSelectors.currentAgentDescription(s),
+        agentSelectors.currentAgentAvatar(s),
+        agentSelectors.currentAgentBackgroundColor(s),
+        agentSelectors.currentAgentModel(s),
+        agentSelectors.currentAgentPlugins(s),
+        agentSelectors.currentAgentSystemRole(s),
+      ]);
+    const { t } = useTranslation('chat');
+    const { styles } = useStyles(withBackground);
 
-export const imageTypeOptions: SegmentedProps['options'] = [
-  {
-    label: 'JPG',
-    value: ImageType.JPG,
-  },
-  {
-    label: 'PNG',
-    value: ImageType.PNG,
-  },
-  {
-    label: 'SVG',
-    value: ImageType.SVG,
-  },
-  {
-    label: 'WEBP',
-    value: ImageType.WEBP,
-  },
-];
-
-interface PreviewProps {
-  imageType: ImageType;
-  withBackground: boolean;
-  withFooter: boolean;
-  withSystemRole: boolean;
-}
+    const displayTitle = isInbox ? t('inbox.title') : title;
+    const displayDesc = isInbox ? t('inbox.desc') : description;
 
-const Preview = memo<PreviewProps>(({ withSystemRole, imageType, withBackground, withFooter }) => {
-  const [loading, setLoading] = useState(false);
-  const [isInbox, title, description, avatar, backgroundColor, model, plugins, systemRole] =
-    useSessionStore((s) => [
-      sessionSelectors.isInboxSession(s),
-      agentSelectors.currentAgentTitle(s),
-      agentSelectors.currentAgentDescription(s),
-      agentSelectors.currentAgentAvatar(s),
-      agentSelectors.currentAgentBackgroundColor(s),
-      agentSelectors.currentAgentModel(s),
-      agentSelectors.currentAgentPlugins(s),
-      agentSelectors.currentAgentSystemRole(s),
-    ]);
-  const { t } = useTranslation('chat');
-  const { styles } = useStyles(withBackground);
-
-  const displayTitle = isInbox ? t('inbox.title') : title;
-  const displayDesc = isInbox ? t('inbox.desc') : description;
-
-  const handleDownload = useCallback(async () => {
-    setLoading(true);
-    try {
-      let screenshotFn: any;
-      switch (imageType) {
-        case ImageType.JPG: {
-          screenshotFn = domToJpeg;
-          break;
-        }
-        case ImageType.PNG: {
-          screenshotFn = domToPng;
-          break;
-        }
-        case ImageType.SVG: {
-          screenshotFn = domToSvg;
-          break;
-        }
-        case ImageType.WEBP: {
-          screenshotFn = domToWebp;
-          break;
-        }
-      }
-
-      const dataUrl = await screenshotFn(document.querySelector('#preview') as HTMLDivElement, {
-        features: {
-          // 不启用移除控制符，否则会导致 safari emoji 报错
-          removeControlCharacter: false,
-        },
-        scale: 2,
-      });
-      const link = document.createElement('a');
-      link.download = `LobeChat_${title}_${dayjs().format('YYYY-MM-DD')}.${imageType}`;
-      link.href = dataUrl;
-      link.click();
-      setLoading(false);
-    } catch (error) {
-      console.error('Failed to download image', error);
-      setLoading(false);
-    }
-  }, [imageType, title]);
-
-  return (
-    <>
+    return (
       <div className={styles.preview}>
         <div className={withBackground ? styles.background : undefined} id={'preview'}>
           <Flexbox className={styles.container} gap={16}>
@@ -145,11 +67,8 @@ const Preview = memo<PreviewProps>(({ withSystemRole, imageType, withBackground,
           </Flexbox>
         </div>
       </div>
-      <Button block loading={loading} onClick={handleDownload} size={'large'} type={'primary'}>
-        {t('shareModal.download')}
-      </Button>
-    </>
-  );
-});
+    );
+  },
+);
 
 export default Preview;

package/src/app/chat/features/ChatHeader/ShareButton/ShareModal.tsx

@@ -0,0 +1,160 @@
+import { Form, type FormItemProps, Modal, type ModalProps } from '@lobehub/ui';
+import { Button, Segmented, SegmentedProps, Switch } from 'antd';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useScreenshot } from '@/app/chat/features/ChatHeader/ShareButton/useScreenshot';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useChatStore } from '@/store/chat';
+import { useGlobalStore } from '@/store/global';
+
+import Preview from './Preview';
+import { FieldType, ImageType } from './type';
+
+enum Tab {
+  Screenshot = 'screenshot',
+  ShareGPT = 'sharegpt',
+}
+
+export const imageTypeOptions: SegmentedProps['options'] = [
+  {
+    label: 'JPG',
+    value: ImageType.JPG,
+  },
+  {
+    label: 'PNG',
+    value: ImageType.PNG,
+  },
+  {
+    label: 'SVG',
+    value: ImageType.SVG,
+  },
+  {
+    label: 'WEBP',
+    value: ImageType.WEBP,
+  },
+];
+
+const DEFAULT_FIELD_VALUE: FieldType = {
+  imageType: ImageType.JPG,
+  withBackground: true,
+  withFooter: false,
+  withPluginInfo: false,
+  withSystemRole: false,
+};
+
+const ShareModal = memo<ModalProps>(({ onCancel, open }) => {
+  const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
+  const [tab, setTab] = useState<Tab>(Tab.Screenshot);
+  const { t } = useTranslation('chat');
+  const avatar = useGlobalStore((s) => s.settings.avatar);
+  const [shareLoading, shareToShareGPT] = useChatStore((s) => [s.shareLoading, s.shareToShareGPT]);
+  const { loading, onDownload, title } = useScreenshot(fieldValue.imageType);
+
+  const options: SegmentedProps['options'] = useMemo(
+    () => [
+      {
+        label: t('shareModal.screenshot'),
+        value: Tab.Screenshot,
+      },
+      {
+        label: 'ShareGPT',
+        value: Tab.ShareGPT,
+      },
+    ],
+    [],
+  );
+
+  const settings: FormItemProps[] = useMemo(
+    () =>
+      [
+        {
+          children: <Switch />,
+          label: t('shareModal.withSystemRole'),
+          minWidth: undefined,
+          name: 'withSystemRole',
+          valuePropName: 'checked',
+        },
+        tab === Tab.Screenshot && {
+          children: <Switch />,
+          label: t('shareModal.withBackground'),
+          minWidth: undefined,
+          name: 'withBackground',
+          valuePropName: 'checked',
+        },
+        tab === Tab.Screenshot && {
+          children: <Switch />,
+          label: t('shareModal.withFooter'),
+          minWidth: undefined,
+          name: 'withFooter',
+          valuePropName: 'checked',
+        },
+        tab === Tab.Screenshot && {
+          children: <Segmented options={imageTypeOptions} />,
+          label: t('shareModal.imageType'),
+          minWidth: undefined,
+          name: 'imageType',
+        },
+        tab === Tab.ShareGPT && {
+          children: <Switch />,
+          label: t('shareModal.withPluginInfo'),
+          minWidth: undefined,
+          name: 'withPluginInfo',
+          valuePropName: 'checked',
+        },
+      ].filter(Boolean) as FormItemProps[],
+    [],
+  );
+
+  return (
+    <Modal
+      allowFullscreen
+      centered={false}
+      footer={
+        <>
+          {tab === Tab.Screenshot && (
+            <Button block loading={loading} onClick={onDownload} size={'large'} type={'primary'}>
+              {t('shareModal.download')}
+            </Button>
+          )}
+          {tab === Tab.ShareGPT && (
+            <Button
+              block
+              loading={shareLoading}
+              onClick={() => shareToShareGPT({ avatar, ...fieldValue })}
+              size={'large'}
+              type={'primary'}
+            >
+              {t('shareModal.shareToShareGPT')}
+            </Button>
+          )}
+        </>
+      }
+      maxHeight={false}
+      onCancel={onCancel}
+      open={open}
+      title={t('share', { ns: 'common' })}
+    >
+      <Flexbox gap={16}>
+        <Segmented
+          block
+          onChange={(value) => setTab(value as Tab)}
+          options={options}
+          style={{ width: '100%' }}
+          value={tab}
+        />
+        <Form
+          initialValues={DEFAULT_FIELD_VALUE}
+          items={settings}
+          itemsType={'flat'}
+          onValuesChange={(_, v) => setFieldValue(v)}
+          {...FORM_STYLE}
+        />
+        {tab === Tab.Screenshot && <Preview title={title} {...fieldValue} />}
+      </Flexbox>
+    </Modal>
+  );
+});
+
+export default ShareModal;

package/src/app/chat/features/ChatHeader/ShareButton/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Modal } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
 import { Share2 } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
@@ -8,7 +8,7 @@ import useMergeState from 'use-merge-value';
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useChatStore } from '@/store/chat';
 
-const Inner = dynamic(() => import('./Inner'));
+const ShareModal = dynamic(() => import('./ShareModal'));
 interface ShareButtonProps {
   mobile?: boolean;
   open?: boolean;
@@ -34,15 +34,7 @@ const ShareButton = memo<ShareButtonProps>(({ mobile, setOpen, open }) => {
         title={t('share')}
       />
 
-      <Modal
-        centered={false}
-        footer={null}
-        onCancel={() => setIsModalOpen(false)}
-        open={isModalOpen}
-        title={t('share')}
-      >
-        <Inner />
-      </Modal>
+      <ShareModal onCancel={() => setIsModalOpen(false)} open={isModalOpen} />
     </>
   );
 });

package/src/app/chat/features/ChatHeader/ShareButton/type.ts

@@ -0,0 +1,14 @@
+export enum ImageType {
+  JPG = 'jpg',
+  PNG = 'png',
+  SVG = 'svg',
+  WEBP = 'webp',
+}
+
+export type FieldType = {
+  imageType: ImageType;
+  withBackground: boolean;
+  withFooter: boolean;
+  withPluginInfo: boolean;
+  withSystemRole: boolean;
+};

package/src/app/chat/features/ChatHeader/ShareButton/useScreenshot.ts

@@ -0,0 +1,60 @@
+import dayjs from 'dayjs';
+import { domToJpeg, domToPng, domToSvg, domToWebp } from 'modern-screenshot';
+import { useCallback, useState } from 'react';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/slices/agent';
+
+import { ImageType } from './type';
+
+export const useScreenshot = (imageType: ImageType) => {
+  const [loading, setLoading] = useState(false);
+  const title = useSessionStore(agentSelectors.currentAgentTitle);
+
+  const handleDownload = useCallback(async () => {
+    setLoading(true);
+    try {
+      let screenshotFn: any;
+      switch (imageType) {
+        case ImageType.JPG: {
+          screenshotFn = domToJpeg;
+          break;
+        }
+        case ImageType.PNG: {
+          screenshotFn = domToPng;
+          break;
+        }
+        case ImageType.SVG: {
+          screenshotFn = domToSvg;
+          break;
+        }
+        case ImageType.WEBP: {
+          screenshotFn = domToWebp;
+          break;
+        }
+      }
+
+      const dataUrl = await screenshotFn(document.querySelector('#preview') as HTMLDivElement, {
+        features: {
+          // 不启用移除控制符，否则会导致 safari emoji 报错
+          removeControlCharacter: false,
+        },
+        scale: 2,
+      });
+      const link = document.createElement('a');
+      link.download = `LobeChat_${title}_${dayjs().format('YYYY-MM-DD')}.${imageType}`;
+      link.href = dataUrl;
+      link.click();
+      setLoading(false);
+    } catch (error) {
+      console.error('Failed to download image', error);
+      setLoading(false);
+    }
+  }, [imageType, title]);
+
+  return {
+    loading,
+    onDownload: handleDownload,
+    title,
+  };
+};

package/src/app/chat/features/SystemRole/index.tsx

@@ -78,7 +78,6 @@ const SystemRole = memo(() => {
             <EditableMessage
               classNames={{ markdown: styles.prompt }}
               editing={editing}
-              height={editing ? 'calc(70vh - 108px)' : 'calc(70vh - 357.43px)'}
               model={{
                 extra: (
                   <AgentInfo

package/src/app/chat/features/TopicListContent/index.tsx

@@ -7,17 +7,11 @@ import TopicSearchBar from './TopicSearchBar';
 
 const TopicListContent = memo<{ mobile?: boolean }>(({ mobile }) => {
   return (
-    <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
-      {mobile ? (
-        <Flexbox padding={'12px 16px'}>
-          <TopicSearchBar />
-        </Flexbox>
-      ) : (
-        <Header />
-      )}
+    <Flexbox gap={mobile ? 8 : 0} height={'100%'} style={{ overflow: 'hidden' }}>
+      {mobile ? <TopicSearchBar /> : <Header />}
       <Flexbox
         gap={16}
-        paddingInline={mobile ? 16 : 8}
+        paddingInline={mobile ? 0 : 8}
         style={{ overflowY: 'auto', paddingTop: 6, position: 'relative' }}
       >
         <Topic />

package/src/app/chat/settings/features/SubmitAgentButton/{Inner.tsx → SubmitAgentModal.tsx}

@@ -1,4 +1,4 @@
-import { Alert } from '@lobehub/ui';
+import { Alert, Modal, type ModalProps } from '@lobehub/ui';
 import { Button, Divider, Input } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -8,14 +8,13 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import MobilePadding from '@/components/MobilePadding';
 import { AGENTS_INDEX_GITHUB_ISSUE } from '@/const/url';
 import AgentInfo from '@/features/AgentInfo';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 
-const Inner = memo(() => {
+const SubmitAgentModal = memo<ModalProps>(({ open, onCancel }) => {
   const { t } = useTranslation('setting');
   const [identifier, setIdentifier] = useState('');
   const systemRole = useSessionStore(agentSelectors.currentAgentSystemRole);
@@ -54,8 +53,24 @@ const Inner = memo(() => {
   };
 
   return (
-    <Flexbox gap={16}>
-      <MobilePadding gap={16}>
+    <Modal
+      allowFullscreen
+      footer={
+        <Button
+          block
+          disabled={!isMetaPass || !identifier}
+          onClick={handleSubmit}
+          size={'large'}
+          type={'primary'}
+        >
+          {t('submitAgentModal.button')}
+        </Button>
+      }
+      onCancel={onCancel}
+      open={open}
+      title={t('submitAgentModal.tooltips')}
+    >
+      <Flexbox gap={16}>
         {!isMetaPass && (
           <Alert message={t('submitAgentModal.metaMiss')} showIcon type={'warning'} />
         )}
@@ -70,18 +85,9 @@ const Inner = memo(() => {
           placeholder={t('submitAgentModal.placeholder')}
           value={identifier}
         />
-        <Button
-          block
-          disabled={!isMetaPass || !identifier}
-          onClick={handleSubmit}
-          size={'large'}
-          type={'primary'}
-        >
-          {t('submitAgentModal.button')}
-        </Button>
-      </MobilePadding>
-    </Flexbox>
+      </Flexbox>
+    </Modal>
   );
 });
 
-export default Inner;
+export default SubmitAgentModal;

package/src/app/chat/settings/features/SubmitAgentButton/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Modal } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { Share2 } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { HEADER_ICON_SIZE } from '@/const/layoutTokens';
 
-import Inner from './Inner';
+import SubmitAgentModal from './SubmitAgentModal';
 
 const SubmitAgentButton = memo(() => {
   const { t } = useTranslation('setting');
@@ -20,14 +20,7 @@ const SubmitAgentButton = memo(() => {
         size={HEADER_ICON_SIZE(mobile)}
         title={t('submitAgentModal.tooltips')}
       />
-      <Modal
-        footer={null}
-        onCancel={() => setIsModalOpen(false)}
-        open={isModalOpen}
-        title={t('submitAgentModal.tooltips')}
-      >
-        <Inner />
-      </Modal>
+      <SubmitAgentModal onCancel={() => setIsModalOpen(false)} open={isModalOpen} />
     </>
   );
 });

package/src/app/market/(mobile)/features/AgentDetail.tsx

@@ -15,7 +15,13 @@ const AgentDetail = memo(() => {
   const { t } = useTranslation('market');
 
   return (
-    <Modal onCancel={deactivateAgent} open={showAgentSidebar} title={t('sidebar.title')}>
+    <Modal
+      allowFullscreen
+      onCancel={deactivateAgent}
+      open={showAgentSidebar}
+      styles={{ body: { padding: 0 } }}
+      title={t('sidebar.title')}
+    >
       <AgentDetailContent />
     </Modal>
   );

package/src/app/market/features/ShareAgentButton/Inner.tsx

@@ -5,13 +5,12 @@ import Image from 'next/image';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import MobilePadding from '@/components/MobilePadding';
 import { AGENTS_INDEX_GITHUB } from '@/const/url';
 
 const Inner = memo(() => {
   const { t } = useTranslation('market');
   return (
-    <MobilePadding>
+    <>
       <Image
         alt={'banner'}
         height={602}
@@ -46,7 +45,7 @@ const Inner = memo(() => {
       >
         {t('guide.func2.button')}
       </Button>
-    </MobilePadding>
+    </>
   );
 });
 

package/src/features/PluginDetailModal/index.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
 
-import MobilePadding from '@/components/MobilePadding';
 import PluginSettingsConfig from '@/features/PluginSettings';
 import { pluginHelpers } from '@/store/tool';
 
@@ -33,6 +32,7 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
 
     return (
       <Modal
+        allowFullscreen
         cancelText={t('cancel', { ns: 'common' })}
         okText={t('ok', { ns: 'common' })}
         onCancel={onClose}
@@ -43,34 +43,32 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
         title={t('detailModal.title')}
         width={650}
       >
-        <MobilePadding>
-          <Center gap={8}>
-            <Meta id={id} />
-            <Divider style={{ marginBottom: 0, marginTop: 8 }} />
-            <TabsNav
-              activeKey={tabKey}
-              items={
-                [
-                  {
-                    key: 'info',
-                    label: t('detailModal.tabs.info'),
-                  },
-                  hasSettings && {
-                    key: 'settings',
-                    label: t('detailModal.tabs.settings'),
-                  },
-                ].filter(Boolean) as TabsProps['items']
-              }
-              onChange={setTabKey}
-              variant={'compact'}
-            />
-            {tabKey === 'settings' ? (
-              hasSettings && <PluginSettingsConfig id={id} schema={schema} />
-            ) : (
-              <APIs id={id} />
-            )}
-          </Center>
-        </MobilePadding>
+        <Center gap={8}>
+          <Meta id={id} />
+          <Divider style={{ marginBottom: 0, marginTop: 8 }} />
+          <TabsNav
+            activeKey={tabKey}
+            items={
+              [
+                {
+                  key: 'info',
+                  label: t('detailModal.tabs.info'),
+                },
+                hasSettings && {
+                  key: 'settings',
+                  label: t('detailModal.tabs.settings'),
+                },
+              ].filter(Boolean) as TabsProps['items']
+            }
+            onChange={setTabKey}
+            variant={'compact'}
+          />
+          {tabKey === 'settings' ? (
+            hasSettings && <PluginSettingsConfig id={id} schema={schema} />
+          ) : (
+            <APIs id={id} />
+          )}
+        </Center>
       </Modal>
     );
   },

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -27,7 +27,7 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   };
 
   return (
-    <Card size={'small'} title={t('dev.preview.card')}>
+    <Card bodyStyle={{ padding: '0 16px' }} size={'small'} title={t('dev.preview.card')}>
       <Form.Item {...items} colon={false} style={{ alignItems: 'center', marginBottom: 0 }} />
     </Card>
   );

package/src/features/PluginDevModal/index.tsx

@@ -1,12 +1,11 @@
 import { Alert, Icon, Modal, Tooltip } from '@lobehub/ui';
-import { App, Button, Divider, Form, Popconfirm, Segmented } from 'antd';
+import { App, Button, Form, Popconfirm, Segmented } from 'antd';
 import { useResponsive } from 'antd-style';
 import { MoveUpRight } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import MobilePadding from '@/components/MobilePadding';
 import { WIKI_PLUGIN_GUIDE } from '@/const/url';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
@@ -29,15 +28,17 @@ const DevModal = memo<DevModalProps>(
     const [configMode, setConfigMode] = useState<'url' | 'local'>('url');
     const { t } = useTranslation('plugin');
     const { message } = App.useApp();
-    const { mobile } = useResponsive();
     const [submitting, setSubmitting] = useState(false);
+    const { mobile } = useResponsive();
     const [form] = Form.useForm();
     useEffect(() => {
       form.setFieldsValue(value);
     }, []);
 
+    const buttonStyle = mobile ? { flex: 1 } : { margin: 0 };
+
     const footer = (
-      <Flexbox horizontal justify={'space-between'} style={{ marginTop: 24 }}>
+      <Flexbox flex={1} gap={12} horizontal justify={'flex-end'}>
         {isEditMode ? (
           <Popconfirm
             okButtonProps={{
@@ -51,30 +52,29 @@ const DevModal = memo<DevModalProps>(
             placement={'topLeft'}
             title={t('dev.confirmDeleteDevPlugin')}
           >
-            <Button danger>{t('delete', { ns: 'common' })}</Button>
+            <Button danger style={buttonStyle}>
+              {t('delete', { ns: 'common' })}
+            </Button>
           </Popconfirm>
-        ) : (
-          <div />
-        )}
-
-        <Flexbox horizontal>
-          <Button
-            onClick={() => {
-              onOpenChange(false);
-            }}
-          >
-            {t('cancel', { ns: 'common' })}
-          </Button>
-          <Button
-            loading={submitting}
-            onClick={() => {
-              form.submit();
-            }}
-            type={'primary'}
-          >
-            {t(isEditMode ? 'dev.update' : 'dev.save')}
-          </Button>
-        </Flexbox>
+        ) : null}
+        <Button
+          onClick={() => {
+            onOpenChange(false);
+          }}
+          style={buttonStyle}
+        >
+          {t('cancel', { ns: 'common' })}
+        </Button>
+        <Button
+          loading={submitting}
+          onClick={() => {
+            form.submit();
+          }}
+          style={buttonStyle}
+          type={'primary'}
+        >
+          {t(isEditMode ? 'dev.update' : 'dev.save')}
+        </Button>
       </Flexbox>
     );
 
@@ -95,6 +95,7 @@ const DevModal = memo<DevModalProps>(
         }}
       >
         <Modal
+          allowFullscreen
           cancelText={t('cancel', { ns: 'common' })}
           footer={footer}
           okText={t('dev.save')}
@@ -110,59 +111,55 @@ const DevModal = memo<DevModalProps>(
           title={t(isEditMode ? 'dev.title.edit' : 'dev.title.create')}
         >
           <Flexbox
-            gap={mobile ? 0 : 16}
+            gap={16}
             onClick={(e) => {
               e.stopPropagation();
             }}
           >
-            <MobilePadding bottom={0} gap={16}>
-              <Alert
-                message={
-                  <Trans i18nKey={'dev.modalDesc'} ns={'plugin'}>
-                    添加自定义插件后，可用于插件开发验证，也可直接在会话中使用。插件开发文档请参考：
-                    <a
-                      href={WIKI_PLUGIN_GUIDE}
-                      rel="noreferrer"
-                      style={{ paddingInline: 8 }}
-                      target={'_blank'}
-                    >
-                      文档
-                    </a>
-                    <Icon icon={MoveUpRight} />
-                  </Trans>
-                }
-                showIcon
-                type={'info'}
-              />
-              <Segmented
-                block
-                onChange={(e) => {
-                  setConfigMode(e as any);
-                }}
-                options={[
-                  {
-                    label: t('dev.manifest.mode.url'),
-                    value: 'url',
-                  },
-                  {
-                    disabled: true,
-                    label: (
-                      <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
-                        {t('dev.manifest.mode.local')}
-                      </Tooltip>
-                    ),
-                    value: 'local',
-                  },
-                ]}
-              />
-              <Flexbox>
-                {configMode === 'url' ? (
-                  <UrlManifestForm form={form} isEditMode={mode === 'edit'} />
-                ) : null}
-                <Divider />
-                <PluginPreview form={form} />
-              </Flexbox>
-            </MobilePadding>
+            <Alert
+              message={
+                <Trans i18nKey={'dev.modalDesc'} ns={'plugin'}>
+                  添加自定义插件后，可用于插件开发验证，也可直接在会话中使用。插件开发文档请参考：
+                  <a
+                    href={WIKI_PLUGIN_GUIDE}
+                    rel="noreferrer"
+                    style={{ paddingInline: 8 }}
+                    target={'_blank'}
+                  >
+                    文档
+                  </a>
+                  <Icon icon={MoveUpRight} />
+                </Trans>
+              }
+              showIcon
+              type={'info'}
+            />
+            <Segmented
+              block
+              onChange={(e) => {
+                setConfigMode(e as any);
+              }}
+              options={[
+                {
+                  label: t('dev.manifest.mode.url'),
+                  value: 'url',
+                },
+                {
+                  disabled: true,
+                  label: (
+                    <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
+                      {t('dev.manifest.mode.local')}
+                    </Tooltip>
+                  ),
+                  value: 'local',
+                },
+              ]}
+            />
+
+            {configMode === 'url' ? (
+              <UrlManifestForm form={form} isEditMode={mode === 'edit'} />
+            ) : null}
+            <PluginPreview form={form} />
           </Flexbox>
         </Modal>
       </Form.Provider>

package/src/features/PluginStore/InstalledPluginList.tsx

@@ -18,7 +18,7 @@ export const InstalledPluginList = memo(() => {
   const installedPlugins = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
 
   return (
-    <Flexbox gap={16}>
+    <>
       <Flexbox align={'center'} gap={16} horizontal justify={'space-between'}>
         <Flexbox flex={1}>
           <SearchBar
@@ -47,7 +47,7 @@ export const InstalledPluginList = memo(() => {
             <PluginItem {...i} key={i.identifier} />
           ))}
       </Flexbox>
-    </Flexbox>
+    </>
   );
 });
 

package/src/features/PluginStore/OnlineList.tsx

@@ -39,7 +39,7 @@ export const OnlineList = memo(() => {
   const isEmpty = pluginStoreList.length === 0;
 
   return (
-    <Flexbox gap={16}>
+    <>
       <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
         <Flexbox flex={1}>
           <SearchBar
@@ -88,7 +88,7 @@ export const OnlineList = memo(() => {
             ))}
         </Flexbox>
       )}
-    </Flexbox>
+    </>
   );
 });
 

package/src/features/PluginStore/index.tsx

@@ -2,9 +2,8 @@ import { Modal } from '@lobehub/ui';
 import { Segmented } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
-import MobilePadding from '@/components/MobilePadding';
 import { useToolStore } from '@/store/tool';
 
 import InstalledPluginList from './InstalledPluginList';
@@ -21,6 +20,7 @@ export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
 
   return (
     <Modal
+      allowFullscreen
       footer={null}
       onCancel={() => {
         setOpen(false);
@@ -29,26 +29,21 @@ export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
       title={t('store.title')}
       width={800}
     >
-      <MobilePadding>
-        <Center>
-          <Flexbox gap={24} width={'100%'}>
-            <Segmented
-              block
-              onChange={(v) => {
-                useToolStore.setState({ listType: v as any });
-              }}
-              options={[
-                { label: t('store.tabs.all'), value: 'all' },
-                { label: t('store.tabs.installed'), value: 'installed' },
-              ]}
-              style={{ flex: 1 }}
-              value={listType}
-            />
-
-            {listType === 'all' ? <OnlineList /> : <InstalledPluginList />}
-          </Flexbox>
-        </Center>
-      </MobilePadding>
+      <Flexbox gap={16} width={'100%'}>
+        <Segmented
+          block
+          onChange={(v) => {
+            useToolStore.setState({ listType: v as any });
+          }}
+          options={[
+            { label: t('store.tabs.all'), value: 'all' },
+            { label: t('store.tabs.installed'), value: 'installed' },
+          ]}
+          style={{ flex: 1 }}
+          value={listType}
+        />
+        {listType === 'all' ? <OnlineList /> : <InstalledPluginList />}
+      </Flexbox>
     </Modal>
   );
 });

package/src/app/chat/features/ChatHeader/ShareButton/Inner.tsx

@@ -1,125 +0,0 @@
-import { Form, ItemGroup } from '@lobehub/ui';
-import { Button, Segmented, SegmentedProps, Switch } from 'antd';
-import { Share2 } from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import MobilePadding from '@/components/MobilePadding';
-import { FORM_STYLE } from '@/const/layoutTokens';
-import { useChatStore } from '@/store/chat';
-import { useGlobalStore } from '@/store/global';
-
-import Preview, { ImageType, imageTypeOptions } from './Preview';
-
-enum Tab {
-  Screenshot = 'screenshot',
-  ShareGPT = 'sharegpt',
-}
-
-const Inner = memo(() => {
-  const [withSystemRole, setWithSystemRole] = useState(false);
-  const [withPluginInfo, setWithPluginInfo] = useState(false);
-  const [withBackground, setWithBackground] = useState(true);
-  const [withFooter, setWithFooter] = useState(false);
-  const [imageType, setImageType] = useState<ImageType>(ImageType.JPG);
-  const [tab, setTab] = useState<Tab>(Tab.Screenshot);
-  const { t } = useTranslation('chat');
-
-  const avatar = useGlobalStore((s) => s.settings.avatar);
-  const [shareLoading, shareToShareGPT] = useChatStore((s) => [s.shareLoading, s.shareToShareGPT]);
-
-  const options: SegmentedProps['options'] = useMemo(
-    () => [
-      {
-        label: t('shareModal.screenshot'),
-        value: Tab.Screenshot,
-      },
-      {
-        label: 'ShareGPT',
-        value: Tab.ShareGPT,
-      },
-    ],
-    [],
-  );
-
-  const settings: ItemGroup = useMemo(
-    () =>
-      ({
-        children: [
-          {
-            children: <Switch checked={withSystemRole} onChange={setWithSystemRole} />,
-            label: t('shareModal.withSystemRole'),
-            minWidth: undefined,
-          },
-          tab === Tab.Screenshot && {
-            children: <Switch checked={withBackground} onChange={setWithBackground} />,
-            label: t('shareModal.withBackground'),
-            minWidth: undefined,
-          },
-          tab === Tab.Screenshot && {
-            children: <Switch checked={withFooter} onChange={setWithFooter} />,
-            label: t('shareModal.withFooter'),
-            minWidth: undefined,
-          },
-          tab === Tab.Screenshot && {
-            children: (
-              <Segmented
-                onChange={(value) => setImageType(value as ImageType)}
-                options={imageTypeOptions}
-                value={imageType}
-              />
-            ),
-            label: t('shareModal.imageType'),
-            minWidth: undefined,
-          },
-          tab === Tab.ShareGPT && {
-            children: <Switch checked={withPluginInfo} onChange={setWithPluginInfo} />,
-            label: t('shareModal.withPluginInfo'),
-            minWidth: undefined,
-          },
-        ].filter(Boolean),
-        icon: Share2,
-        title: t('shareModal.settings'),
-      }) as ItemGroup,
-    [tab, withSystemRole, withPluginInfo, withBackground, withFooter, imageType],
-  );
-
-  return (
-    <Flexbox gap={16}>
-      <MobilePadding bottom={0}>
-        <Segmented
-          block
-          onChange={(value) => setTab(value as Tab)}
-          options={options}
-          style={{ width: '100%' }}
-          value={tab}
-        />
-      </MobilePadding>
-      <Form items={[settings]} {...FORM_STYLE} />
-      <MobilePadding gap={16} top={0}>
-        {tab === Tab.Screenshot && (
-          <Preview
-            imageType={imageType}
-            withBackground={withBackground}
-            withFooter={withFooter}
-            withSystemRole={withSystemRole}
-          />
-        )}
-        {tab === Tab.ShareGPT && (
-          <Button
-            block
-            loading={shareLoading}
-            onClick={() => shareToShareGPT({ avatar, withPluginInfo, withSystemRole })}
-            size={'large'}
-            type={'primary'}
-          >
-            {t('shareModal.shareToShareGPT')}
-          </Button>
-        )}
-      </MobilePadding>
-    </Flexbox>
-  );
-});
-
-export default Inner;

package/src/components/MobilePadding/index.tsx

@@ -1,32 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-interface MobilePaddingProps {
-  bottom?: number;
-  children: ReactNode;
-  gap?: number;
-  left?: number;
-  right?: number;
-  top?: number;
-}
-
-const MobilePadding = memo<MobilePaddingProps>(
-  ({ children, top = 16, right = 16, left = 16, bottom = 16, gap }) => {
-    const { mobile } = useResponsive();
-
-    if (mobile)
-      return (
-        <Flexbox
-          gap={gap}
-          style={{ paddingBottom: bottom, paddingLeft: left, paddingRight: right, paddingTop: top }}
-        >
-          {children}
-        </Flexbox>
-      );
-
-    return children;
-  },
-);
-
-export default MobilePadding;

package/src/features/PluginStore/StoreSetting.tsx

@@ -1,56 +0,0 @@
-import { Alert, Form, Input, Modal } from '@lobehub/ui';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import MobilePadding from '@/components/MobilePadding';
-import { PLUGINS_INDEX_URL, WIKI_PLUGIN_GUIDE } from '@/const/url';
-
-interface MarketSettingModalProps {
-  onOpenChange: (open: boolean) => void;
-  open?: boolean;
-}
-
-const StoreSetting = memo<MarketSettingModalProps>(({ open, onOpenChange }) => {
-  const { t } = useTranslation('plugin');
-
-  return (
-    <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('dev.modalDesc')}
-                      <a href={WIKI_PLUGIN_GUIDE} rel="noreferrer" target={'_blank'}>
-                        {WIKI_PLUGIN_GUIDE}
-                      </a>
-                    </>
-                  ),
-                  label: t('settings.indexUrl.title'),
-                },
-              ],
-              title: t('settings.title'),
-            },
-          ]}
-        />
-      </Flexbox>
-    </Modal>
-  );
-});
-
-export default StoreSetting;