@lobehub/chat 0.116.0 → 0.116.2

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/PluginSettings/PluginSettingRender.tsx

@@ -1,16 +1,20 @@
-import { Input, InputNumber, Switch } from 'antd';
+import { Input, InputNumber, Select, Slider, Switch } from 'antd';
+import { JSONSchema7Type } from 'json-schema';
 import { memo } from 'react';
 
 interface PluginSettingsProps {
   defaultValue?: any;
+  enum?: JSONSchema7Type[];
   format?: string;
+  maximum?: number;
+  minimum?: number;
   onChange: (value: any) => void;
   props?: any;
   type?: 'string' | 'number' | 'boolean';
 }
 
 const PluginSettingRender = memo<PluginSettingsProps>(
-  ({ type, defaultValue, onChange, format, props }) => {
+  ({ type, defaultValue, enum: enumItems, onChange, format, minimum, maximum, props }) => {
     switch (type) {
       case 'string': {
         switch (format) {
@@ -26,6 +30,19 @@ const PluginSettingRender = memo<PluginSettingsProps>(
             );
           }
         }
+
+        if (enumItems) {
+          return (
+            <Select
+              defaultValue={defaultValue}
+              onChange={onChange}
+              options={enumItems.map((i) =>
+                typeof i === 'string' ? { label: i, value: i } : (i as any),
+              )}
+            />
+          );
+        }
+
         return (
           <Input
             {...props}
@@ -36,7 +53,10 @@ const PluginSettingRender = memo<PluginSettingsProps>(
           />
         );
       }
+
       case 'number': {
+        if (typeof minimum === 'number' || typeof maximum === 'number')
+          return <Slider defaultValue={defaultValue} max={maximum} min={minimum} {...props} />;
         return (
           <InputNumber
             {...props}

package/src/features/PluginSettings/index.tsx

@@ -15,8 +15,11 @@ export const transformPluginSettings = (pluginSettings: PluginSchema) => {
 
   return Object.entries(pluginSettings.properties).map(([name, i]) => ({
     desc: i.description,
+    enum: i.enum,
     format: i.format,
-    label: i.title,
+    label: i.title || name,
+    maximum: i.maximum,
+    minimum: i.minimum,
     name,
     tag: name,
     type: i.type,
@@ -63,7 +66,10 @@ const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) =>
         >
           <PluginSettingRender
             defaultValue={pluginSetting[item.name]}
+            enum={item.enum}
             format={item.format}
+            maximum={item.maximum}
+            minimum={item.minimum}
             onChange={(value) => {
               updatePluginSettings(id, { [item.name]: value });
             }}

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;