@lobehub/chat 1.83.7 → 1.84.0

package/src/features/PluginSettings/PluginSettingRender.tsx

@@ -1,4 +1,5 @@
-import { Input, InputNumber, Select, Slider, Switch } from 'antd';
+import { Input, InputNumber, InputPassword, Select } from '@lobehub/ui';
+import { Slider, Switch } from 'antd';
 import { JSONSchema7Type } from 'json-schema';
 import { memo } from 'react';
 
@@ -8,35 +9,26 @@ interface PluginSettingsProps {
   format?: string;
   maximum?: number;
   minimum?: number;
-  onChange: (value: any) => void;
+  onChange?: (value: any) => void;
   props?: any;
   type?: 'string' | 'number' | 'boolean';
+  value?: any;
 }
 
 const PluginSettingRender = memo<PluginSettingsProps>(
-  ({ type, defaultValue, enum: enumItems, onChange, format, minimum, maximum, props }) => {
+  ({ type, enum: enumItems, format, minimum, maximum, ...props }) => {
     switch (type) {
       case 'string': {
         switch (format) {
           case 'password': {
-            return (
-              <Input.Password
-                {...props}
-                autoComplete={'new-password'}
-                defaultValue={defaultValue}
-                onChange={(v) => {
-                  onChange(v.target.value);
-                }}
-              />
-            );
+            return <InputPassword {...props} autoComplete={'new-password'} />;
           }
         }
 
         if (enumItems) {
           return (
             <Select
-              defaultValue={defaultValue}
-              onChange={onChange}
+              {...props}
               options={enumItems.map((i) =>
                 typeof i === 'string' ? { label: i, value: i } : (i as any),
               )}
@@ -44,40 +36,16 @@ const PluginSettingRender = memo<PluginSettingsProps>(
           );
         }
 
-        return (
-          <Input
-            {...props}
-            defaultValue={defaultValue}
-            onChange={(v) => {
-              onChange(v.target.value);
-            }}
-          />
-        );
+        return <Input {...props} />;
       }
 
       case 'number': {
         if (typeof minimum === 'number' || typeof maximum === 'number')
-          return <Slider defaultValue={defaultValue} max={maximum} min={minimum} {...props} />;
-        return (
-          <InputNumber
-            {...props}
-            defaultValue={defaultValue}
-            onChange={(v) => {
-              onChange(v);
-            }}
-          />
-        );
+          return <Slider max={maximum} min={minimum} {...props} />;
+        return <InputNumber {...props} />;
       }
       case 'boolean': {
-        return (
-          <Switch
-            {...props}
-            defaultValue={defaultValue}
-            onChange={(e) => {
-              onChange(e);
-            }}
-          />
-        );
+        return <Switch {...props} />;
       }
     }
   },

package/src/features/PluginSettings/index.tsx

@@ -3,7 +3,8 @@ import { Form, Markdown } from '@lobehub/ui';
 import { Form as AForm } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
@@ -41,46 +42,58 @@ const useStyles = createStyles(({ css, token }) => ({
 
 const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ schema, id }) => {
   const { styles } = useStyles();
+  const { t } = useTranslation('setting');
 
   const [updatePluginSettings] = useToolStore((s) => [s.updatePluginSettings]);
   const pluginSetting = useToolStore(pluginSelectors.getPluginSettingsById(id), isEqual);
 
   const [form] = AForm.useForm();
-  useEffect(() => {
-    form.setFieldsValue(pluginSetting);
-  }, []);
 
   const items = transformPluginSettings(schema);
 
   return (
-    <Form form={form} layout={'vertical'} style={{ width: '100%' }}>
-      {items.map((item) => (
-        <Form.Item
-          desc={
-            item.desc && (
-              <Markdown className={styles.markdown} variant={'chat'}>
-                {item.desc as string}
-              </Markdown>
-            )
-          }
-          key={item.label}
-          label={item.label}
-          tag={item.tag}
-        >
+    <Form
+      footer={
+        <Form.SubmitFooter
+          texts={{
+            reset: t('submitFooter.reset'),
+            submit: t('submitFooter.submit'),
+            unSaved: t('submitFooter.unSaved'),
+            unSavedWarning: t('submitFooter.unSavedWarning'),
+          }}
+        />
+      }
+      form={form}
+      gap={16}
+      initialValues={pluginSetting}
+      items={items.map((item) => ({
+        children: (
           <PluginSettingRender
-            defaultValue={pluginSetting[item.name]}
             enum={item.enum}
             format={item.format}
             maximum={item.maximum}
             minimum={item.minimum}
-            onChange={(value) => {
-              updatePluginSettings(id, { [item.name]: value });
-            }}
             type={item.type as any}
           />
-        </Form.Item>
-      ))}
-    </Form>
+        ),
+        desc: item.desc && (
+          <Markdown className={styles.markdown} variant={'chat'}>
+            {item.desc as string}
+          </Markdown>
+        ),
+        key: item.label,
+        label: item.label,
+        name: item.name,
+        tag: item.tag,
+        valuePropName: item.type === 'boolean' ? 'checked' : undefined,
+      }))}
+      itemsType={'flat'}
+      layout={'vertical'}
+      onFinish={async (v) => {
+        await updatePluginSettings(id, v);
+      }}
+      variant={'borderless'}
+    />
   );
 });
 

package/src/features/PluginStore/AddPluginButton.tsx

@@ -1,5 +1,4 @@
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { PackagePlus } from 'lucide-react';
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -34,7 +33,7 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
         open={showModal}
       />
       <Button
-        icon={<Icon icon={PackagePlus} />}
+        icon={PackagePlus}
         onClick={() => {
           setModal(true);
         }}

package/src/features/PluginStore/InstalledPluginList.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { Virtuoso } from 'react-virtuoso';
 
-import { useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
@@ -15,7 +14,6 @@ import PluginItem from './PluginItem';
 export const InstalledPluginList = memo(() => {
   const { t } = useTranslation('plugin');
   const [keywords, setKeywords] = useState<string>();
-  const mobile = useServerConfigStore((s) => s.isMobile);
   const installedPlugins = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
 
   const filteredPluginList = useMemo(
@@ -39,8 +37,8 @@ export const InstalledPluginList = memo(() => {
             onChange={(e) => setKeywords(e.target.value)}
             placeholder={t('store.placeholder')}
             style={{ flex: 1, width: '100%' }}
-            type={mobile ? 'block' : 'ghost'}
             value={keywords}
+            variant={'filled'}
           />
         </Flexbox>
         <AddPluginButton />

package/src/features/PluginStore/OnlineList.tsx

@@ -8,7 +8,6 @@ import { Center, Flexbox } from 'react-layout-kit';
 import { Virtuoso } from 'react-virtuoso';
 
 import AddPluginButton from '@/features/PluginStore/AddPluginButton';
-import { useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
 
@@ -18,7 +17,6 @@ import PluginItem from './PluginItem';
 export const OnlineList = memo(() => {
   const { t } = useTranslation('plugin');
   const [keywords, setKeywords] = useState<string>();
-  const mobile = useServerConfigStore((s) => s.isMobile);
   const pluginStoreList = useToolStore((s) => {
     const custom = pluginSelectors.installedCustomPluginMetaList(s);
     const store = pluginStoreSelectors.onlinePluginStore(s);
@@ -52,8 +50,8 @@ export const OnlineList = memo(() => {
             allowClear
             onChange={(e) => setKeywords(e.target.value)}
             placeholder={t('store.placeholder')}
-            type={mobile ? 'block' : 'ghost'}
             value={keywords}
+            variant={'filled'}
           />
         </Flexbox>
         <AddPluginButton />
@@ -64,7 +62,7 @@ export const OnlineList = memo(() => {
         <Center gap={12} padding={40}>
           {error ? (
             <>
-              <Icon icon={ServerCrash} size={{ fontSize: 80 }} />
+              <Icon icon={ServerCrash} size={80} />
               {t('store.networkError')}
             </>
           ) : (

package/src/features/PluginStore/PluginItem/Action.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Button, Dropdown } from 'antd';
+import { ActionIcon, Button, Dropdown, Icon } from '@lobehub/ui';
+import { App } from 'antd';
 import { InfoIcon, MoreVerticalIcon, Settings, Trash2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/features/PluginStore/PluginItem/PluginAvatar.tsx

@@ -1,5 +1,6 @@
 import { MCP } from '@lobehub/icons';
 import { Avatar } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import { CSSProperties, memo } from 'react';
 
 interface PluginAvatarProps {
@@ -9,9 +10,14 @@ interface PluginAvatarProps {
   style?: CSSProperties;
 }
 
-const PluginAvatar = memo<PluginAvatarProps>(({ avatar, style, size, alt }) => {
+const PluginAvatar = memo<PluginAvatarProps>(({ avatar, style, size = 40, alt }) => {
+  const theme = useTheme();
   return avatar === 'MCP_AVATAR' ? (
-    <MCP.Avatar size={size ? size * 0.8 : 36} />
+    <MCP.Avatar
+      className={`${theme.prefixCls}-avatar`}
+      size={size}
+      style={{ flex: 'none', overflow: 'hidden', ...style }}
+    />
   ) : (
     <Avatar
       alt={alt}

package/src/features/PluginStore/PluginItem/PluginTag.tsx

@@ -1,39 +1,10 @@
 import { Icon, Tag } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
 import { BadgeCheck, CircleUser, Package } from 'lucide-react';
-import { rgba } from 'polished';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { InstallPluginMeta } from '@/types/tool/plugin';
 
-const useStyles = createStyles(({ css, token }) => ({
-  community: css`
-    color: ${rgba(token.colorInfo, 0.75)};
-    background: ${token.colorInfoBg};
-
-    &:hover {
-      color: ${token.colorInfo};
-    }
-  `,
-  custom: css`
-    color: ${rgba(token.colorWarning, 0.75)};
-    background: ${token.colorWarningBg};
-
-    &:hover {
-      color: ${token.colorWarning};
-    }
-  `,
-  official: css`
-    color: ${rgba(token.colorSuccess, 0.75)};
-    background: ${token.colorSuccessBg};
-
-    &:hover {
-      color: ${token.colorSuccess};
-    }
-  `,
-}));
-
 interface PluginTagProps extends Pick<InstallPluginMeta, 'author' | 'type'> {
   showIcon?: boolean;
   showText?: boolean;
@@ -41,14 +12,14 @@ interface PluginTagProps extends Pick<InstallPluginMeta, 'author' | 'type'> {
 
 const PluginTag = memo<PluginTagProps>(({ showIcon = true, author, type, showText = true }) => {
   const { t } = useTranslation('plugin');
-  const { styles, cx } = useStyles();
   const isCustom = type === 'customPlugin';
   const isOfficial = author === 'LobeHub';
 
   return (
     <Tag
-      className={cx(isCustom ? styles.custom : isOfficial ? styles.official : styles.community)}
+      color={isCustom ? 'warning' : isOfficial ? 'success' : undefined}
       icon={showIcon && <Icon icon={isCustom ? Package : isOfficial ? BadgeCheck : CircleUser} />}
+      size={'small'}
     >
       {showText && (author || t(isCustom ? 'store.customPlugin' : 'store.communityPlugin'))}
     </Tag>

package/src/features/PluginStore/index.tsx

@@ -1,5 +1,4 @@
-import { Modal } from '@lobehub/ui';
-import { Segmented } from 'antd';
+import { Modal, Segmented } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -47,6 +46,7 @@ export const PluginStore = memo<PluginStoreProps>(({ setOpen, open }) => {
           ]}
           style={{ flex: 1 }}
           value={listType}
+          variant={'filled'}
         />
         {listType === 'all' ? <OnlineList /> : <InstalledPluginList />}
       </Flexbox>

package/src/features/PluginTag/PluginStatus.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Badge, Button, Tag } from 'antd';
+import { ActionIcon, Button, Tag } from '@lobehub/ui';
+import { Badge } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideRotateCw, LucideTrash2, RotateCwIcon } from 'lucide-react';
 import { memo, useMemo } from 'react';

package/src/features/PluginTag/index.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { Icon, Tag } from '@lobehub/ui';
-import type { MenuProps } from 'antd';
-import { Dropdown } from 'antd';
+import { Dropdown, Icon, type MenuProps, Tag } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';

package/src/features/PluginsUI/Render/DefaultType/SystemJsRender/utils.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-undef */
-
 /**
  * 本动态加载模块使用 SystemJS 实现，在 Lobe Chat 中缓存了 React、ReactDOM、antd、antd-style 四个模块。
  */

package/src/features/Portal/Artifacts/Body/Renderer/SVG.tsx

@@ -1,5 +1,5 @@
-import { Icon, Tooltip } from '@lobehub/ui';
-import { App, Button, Dropdown, Space } from 'antd';
+import { Button, Dropdown, Tooltip } from '@lobehub/ui';
+import { App, Space } from 'antd';
 import { css, cx } from 'antd-style';
 import { CopyIcon, DownloadIcon } from 'lucide-react';
 import { domToPng } from 'modern-screenshot';
@@ -89,11 +89,11 @@ const SVGRenderer = ({ content }: SVGRendererProps) => {
               },
             }}
           >
-            <Button icon={<Icon icon={DownloadIcon} />} />
+            <Button icon={DownloadIcon} />
           </Dropdown>
           <Tooltip title={t('artifacts.svg.copyAsImage')}>
             <Button
-              icon={<Icon icon={CopyIcon} />}
+              icon={CopyIcon}
               onClick={async () => {
                 const dataUrl = await generatePng();
                 try {

package/src/features/Portal/Artifacts/Body/Renderer/index.tsx

@@ -18,7 +18,7 @@ const Renderer = memo<{ content: string; type?: string }>(({ content, type }) =>
     }
 
     case 'application/lobe.artifacts.mermaid': {
-      return <Mermaid type={'pure'}>{content}</Mermaid>;
+      return <Mermaid variant={'borderless'}>{content}</Mermaid>;
     }
 
     case 'text/markdown': {

package/src/features/Portal/Artifacts/Body/index.tsx

@@ -4,6 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
+import { ArtifactDisplayMode } from '@/store/chat/slices/portal/initialState';
 import { ArtifactType } from '@/types/artifact';
 
 import Renderer from './Renderer';
@@ -34,8 +35,8 @@ const ArtifactsUI = memo(() => {
   useEffect(() => {
     // when message generating , check whether the artifact is closed
     // if close, move the display mode to preview
-    if (isMessageGenerating && isArtifactTagClosed && displayMode === 'code') {
-      useChatStore.setState({ portalArtifactDisplayMode: 'preview' });
+    if (isMessageGenerating && isArtifactTagClosed && displayMode === ArtifactDisplayMode.Code) {
+      useChatStore.setState({ portalArtifactDisplayMode: ArtifactDisplayMode.Preview });
     }
   }, [isMessageGenerating, displayMode, isArtifactTagClosed]);
 
@@ -64,7 +65,9 @@ const ArtifactsUI = memo(() => {
 
   // show code when the artifact is not closed or the display mode is code or the artifact type is code
   const showCode =
-    !isArtifactTagClosed || displayMode === 'code' || artifactType === ArtifactType.Code;
+    !isArtifactTagClosed ||
+    displayMode === ArtifactDisplayMode.Code ||
+    artifactType === ArtifactType.Code;
 
   return (
     <Flexbox

package/src/features/Portal/Artifacts/Header.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { ConfigProvider, Segmented, Typography } from 'antd';
+import { ActionIcon, Icon, Segmented } from '@lobehub/ui';
+import { ConfigProvider, Typography } from 'antd';
 import { cx } from 'antd-style';
 import { ArrowLeft, CodeIcon, EyeIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
+import { ArtifactDisplayMode } from '@/store/chat/slices/portal/initialState';
 import { oneLineEllipsis } from '@/styles';
 import { ArtifactType } from '@/types/artifact';
 
@@ -52,16 +53,20 @@ const Header = () => {
       >
         {showSwitch && (
           <Segmented
-            onChange={(value: 'code' | 'preview') => {
-              useChatStore.setState({ portalArtifactDisplayMode: value });
+            onChange={(value) => {
+              useChatStore.setState({ portalArtifactDisplayMode: value as ArtifactDisplayMode });
             }}
             options={[
               {
                 icon: <Icon icon={EyeIcon} />,
                 label: t('artifacts.display.preview'),
-                value: 'preview',
+                value: ArtifactDisplayMode.Preview,
+              },
+              {
+                icon: <Icon icon={CodeIcon} />,
+                label: t('artifacts.display.code'),
+                value: ArtifactDisplayMode.Code,
               },
-              { icon: <Icon icon={CodeIcon} />, label: t('artifacts.display.code'), value: 'code' },
             ]}
             size={'small'}
             value={displayMode}

package/src/features/Portal/FilePreview/Body/index.tsx

@@ -1,5 +1,4 @@
-import { Icon, Markdown } from '@lobehub/ui';
-import { Segmented } from 'antd';
+import { Icon, Markdown, Segmented } from '@lobehub/ui';
 import { BoltIcon, FileIcon } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,19 +10,24 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 import { useFileStore } from '@/store/file';
 
+enum FilePreviewTab {
+  Chunk = 'chunk',
+  File = 'file',
+}
+
 const FilePreview = () => {
   const previewFileId = useChatStore(chatPortalSelectors.previewFileId);
   const chunkText = useChatStore(chatPortalSelectors.chunkText);
   const useFetchFileItem = useFileStore((s) => s.useFetchFileItem);
   const { t } = useTranslation('portal');
 
-  const [tab, setTab] = useState('chunk');
+  const [tab, setTab] = useState<FilePreviewTab>(FilePreviewTab.File);
   const { data, isLoading } = useFetchFileItem(previewFileId);
 
   if (isLoading) return <Loading />;
   if (!data) return;
 
-  const showChunk = tab === 'chunk' && !!chunkText;
+  const showChunk = tab === FilePreviewTab.Chunk && !!chunkText;
   return (
     <Flexbox
       height={'100%'}
@@ -34,12 +38,21 @@ const FilePreview = () => {
       {chunkText && (
         <Segmented
           block
-          onChange={setTab}
+          onChange={(v) => setTab(v as FilePreviewTab)}
           options={[
-            { icon: <Icon icon={BoltIcon} />, label: t('FilePreview.tabs.chunk'), value: 'chunk' },
-            { icon: <Icon icon={FileIcon} />, label: t('FilePreview.tabs.file'), value: 'file' },
+            {
+              icon: <Icon icon={BoltIcon} />,
+              label: t('FilePreview.tabs.chunk'),
+              value: FilePreviewTab.Chunk,
+            },
+            {
+              icon: <Icon icon={FileIcon} />,
+              label: t('FilePreview.tabs.file'),
+              value: FilePreviewTab.File,
+            },
           ]}
           value={tab}
+          variant={'filled'}
         />
       )}
 

package/src/features/Portal/Plugins/Header.tsx

@@ -26,7 +26,7 @@ const Header = () => {
     return (
       <Flexbox align={'center'} gap={8} horizontal>
         <ActionIcon icon={ArrowLeft} onClick={() => closeToolUI()} />
-        <Icon icon={Globe} size={{ fontSize: 16 }} />
+        <Icon icon={Globe} size={16} />
         <Typography.Text style={{ fontSize: 16 }} type={'secondary'}>
           {t('search.title')}
         </Typography.Text>

package/src/features/Portal/Thread/Chat/ChatInput/Footer.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 import { memo } from 'react';
@@ -57,7 +57,7 @@ const Footer = memo<FooterProps>(({ onExpandChange }) => {
       flex={'none'}
       gap={8}
       horizontal
-      padding={'0 24px'}
+      paddingInline={16}
     >
       <div />
       {isAIGenerating ? (

package/src/features/Portal/Thread/Header/Active.tsx

@@ -1,7 +1,9 @@
 import { Icon } from '@lobehub/ui';
 import { Typography } from 'antd';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ListTree } from 'lucide-react';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import BubblesLoading from '@/components/BubblesLoading';
@@ -10,15 +12,19 @@ import { useChatStore } from '@/store/chat';
 import { portalThreadSelectors } from '@/store/chat/selectors';
 import { oneLineEllipsis } from '@/styles';
 
-const Active = () => {
+const Active = memo(() => {
+  const theme = useTheme();
   const currentThread = useChatStore(portalThreadSelectors.portalCurrentThread, isEqual);
 
   return (
     currentThread && (
-      <Flexbox align={'center'} gap={8} horizontal style={{ marginInlineStart: 8 }}>
-        <Icon icon={ListTree} size={{ fontSize: 20 }} />
-
-        <Typography.Text className={oneLineEllipsis} style={{ fontSize: 16, fontWeight: 'bold' }}>
+      <Flexbox align={'center'} gap={8} horizontal style={{ marginInlineStart: 4 }}>
+        <Icon color={theme.colorTextSecondary} icon={ListTree} size={18} />
+        <Typography.Text
+          className={oneLineEllipsis}
+          ellipsis={true}
+          style={{ color: theme.colorTextSecondary, fontSize: 14 }}
+        >
           {currentThread?.title === LOADING_FLAT ? (
             <Flexbox flex={1} height={30} justify={'center'}>
               <BubblesLoading />
@@ -30,6 +36,6 @@ const Active = () => {
       </Flexbox>
     )
   );
-};
+});
 
 export default Active;