@lobehub/chat 1.83.8 → 1.84.0

package/src/features/KnowledgeBaseModal/CreateNew/CreateForm.tsx

@@ -1,22 +1,10 @@
-import { Button, Form, Input } from 'antd';
-import { css, cx } from 'antd-style';
+import { Button, Form, Input, TextArea } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 import { CreateKnowledgeBaseParams } from '@/types/knowledgeBase';
 
-const formItem = css`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .ant-form-item {
-    margin-block-end: 0;
-  }
-`;
-
 interface CreateFormProps {
   onClose?: () => void;
 }
@@ -40,33 +28,35 @@ const CreateForm = memo<CreateFormProps>(({ onClose }) => {
   };
 
   return (
-    <Flexbox gap={8}>
-      <div>{t('createNew.formTitle')}</div>
-      <Form className={cx(formItem)} onFinish={onFinish}>
-        <Form.Item
-          name={'name'}
-          rules={[{ message: t('createNew.name.required'), required: true }]}
-        >
-          <Input autoFocus placeholder={t('createNew.name.placeholder')} variant={'filled'} />
-        </Form.Item>
-        <Form.Item name={'description'}>
-          <Input.TextArea
-            placeholder={t('createNew.description.placeholder')}
-            style={{ minHeight: 120 }}
-            variant={'filled'}
-          />
-        </Form.Item>
-        <Button
-          block
-          htmlType={'submit'}
-          loading={loading}
-          style={{ marginTop: 16 }}
-          type={'primary'}
-        >
+    <Form
+      footer={
+        <Button block htmlType={'submit'} loading={loading} type={'primary'}>
           {t('createNew.confirm')}
         </Button>
-      </Form>
-    </Flexbox>
+      }
+      gap={16}
+      items={[
+        {
+          children: <Input autoFocus placeholder={t('createNew.name.placeholder')} />,
+          label: t('createNew.name.placeholder'),
+          name: 'name',
+          rules: [{ message: t('createNew.name.required'), required: true }],
+        },
+        {
+          children: (
+            <TextArea
+              placeholder={t('createNew.description.placeholder')}
+              style={{ minHeight: 120 }}
+            />
+          ),
+          label: t('createNew.description.placeholder'),
+          name: 'description',
+        },
+      ]}
+      itemsType={'flat'}
+      layout={'vertical'}
+      onFinish={onFinish}
+    />
   );
 });
 

package/src/features/KnowledgeBaseModal/CreateNew/index.tsx

@@ -20,7 +20,7 @@ const Title = () => {
 export const useCreateNewModal = createModal((instance) => {
   return {
     content: (
-      <Flexbox paddingInline={16} style={{ marginBlock: 24 }}>
+      <Flexbox paddingInline={16} style={{ paddingBottom: 16 }}>
         <CreateForm
           onClose={() => {
             instance.current?.destroy();

package/src/features/MobileSwitchLoading/index.tsx

@@ -14,7 +14,7 @@ const MobileSwitchLoading: DynamicOptions['loading'] = memo(() => {
       <Center flex={1} gap={16} width={'100%'}>
         <ProductLogo size={48} type={'combine'} />
         <Center gap={12} horizontal style={{ fontSize: 15, lineHeight: 1.5, opacity: 0.66 }}>
-          <Icon icon={Loader2} size={{ fontSize: 16 }} spin />
+          <Icon icon={Loader2} size={16} spin />
           {t('layoutInitializing')}
         </Center>
       </Center>

package/src/features/MobileTabBar/index.tsx

@@ -1,4 +1,5 @@
-import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
+import { TabBar, type TabBarProps } from '@lobehub/ui/mobile';
 import { createStyles } from 'antd-style';
 import { Bot, MessageSquare, User } from 'lucide-react';
 import { useRouter } from 'next/navigation';
@@ -31,7 +32,7 @@ export default memo<Props>(({ className, tabBarKey }) => {
   };
   const { showMarket } = useServerConfigStore(featureFlagsSelectors);
 
-  const items: MobileTabBarProps['items'] = useMemo(
+  const items: TabBarProps['items'] = useMemo(
     () =>
       [
         {
@@ -62,9 +63,9 @@ export default memo<Props>(({ className, tabBarKey }) => {
           onClick: openSettings,
           title: t('tab.setting'),
         },
-      ].filter(Boolean) as MobileTabBarProps['items'],
+      ].filter(Boolean) as TabBarProps['items'],
     [t],
   );
 
-  return <MobileTabBar activeKey={tabBarKey} className={className} items={items} safeArea />;
+  return <TabBar activeKey={tabBarKey} className={className} items={items} safeArea />;
 });

package/src/features/ModelParamsControl/Temperature.tsx

@@ -34,7 +34,7 @@ const Warning = memo(() => {
         message={t('settingModel.temperature.warning')}
         style={{ fontSize: 12 }}
         type={'warning'}
-        variant={'pure'}
+        variant={'borderless'}
       />
     )
   );

package/src/features/ModelSelect/index.tsx

@@ -1,17 +1,24 @@
-import { Select, SelectProps } from 'antd';
+import { Select, type SelectProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo, useMemo } from 'react';
 
-import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+import { ModelItemRender, ProviderItemRender, TAG_CLASSNAME } from '@/components/ModelSelect';
 import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 import { EnabledProviderWithModels } from '@/types/aiProvider';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
-  select: css`
+  popup: css`
     &.${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped {
       padding-inline-start: 12px;
     }
   `,
+  select: css`
+    .${prefixCls}-select-selection-item {
+      .${TAG_CLASSNAME} {
+        display: none;
+      }
+    }
+  `,
 }));
 
 interface ModelOption {
@@ -21,6 +28,7 @@ interface ModelOption {
 }
 
 interface ModelSelectProps {
+  defaultValue?: { model: string; provider?: string };
   onChange?: (props: { model: string; provider: string }) => void;
   showAbility?: boolean;
   value?: { model: string; provider?: string };
@@ -60,12 +68,14 @@ const ModelSelect = memo<ModelSelectProps>(({ value, onChange, showAbility = tru
 
   return (
     <Select
+      className={styles.select}
+      defaultValue={`${value?.provider}/${value?.model}`}
       onChange={(value, option) => {
         const model = value.split('/').slice(1).join('/');
         onChange?.({ model, provider: (option as unknown as ModelOption).provider });
       }}
       options={options}
-      popupClassName={styles.select}
+      popupClassName={styles.popup}
       popupMatchSelectWidth={false}
       value={`${value?.provider}/${value?.model}`}
     />

package/src/features/ModelSwitchPanel/index.tsx

@@ -1,5 +1,4 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
-import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import type { ItemType } from 'antd/es/menu/interface';
 import { LucideArrowRight, LucideBolt } from 'lucide-react';
@@ -11,8 +10,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
 import { isDeprecatedEdition } from '@/const/version';
+import ActionDropdown from '@/features/ChatInput/components/ActionDropdown';
 import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
-import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
@@ -49,12 +48,8 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
     agentSelectors.currentAgentModelProvider(s),
     s.updateAgentConfig,
   ]);
-
   const { showLLM } = useServerConfigStore(featureFlagsSelectors);
-  const isMobile = useIsMobile();
-
   const router = useRouter();
-
   const enabledList = useEnabledChatModels();
 
   const items = useMemo<ItemType[]>(() => {
@@ -135,20 +130,16 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
   }, [enabledList]);
 
   return (
-    <Dropdown
+    <ActionDropdown
       menu={{
         activeKey: menuKey(provider, model),
         className: styles.menu,
         items,
-        style: {
-          maxHeight: 500,
-          overflowY: 'scroll',
-        },
       }}
-      placement={isMobile ? 'top' : 'topLeft'}
+      placement={'topLeft'}
     >
       <div className={styles.tag}>{children}</div>
-    </Dropdown>
+    </ActionDropdown>
   );
 });
 

package/src/features/OllamaModelDownloader/index.tsx

@@ -1,6 +1,6 @@
 import { Ollama } from '@lobehub/icons';
-import { Alert } from '@lobehub/ui';
-import { Button, Input, Progress } from 'antd';
+import { Alert, Button, Input } from '@lobehub/ui';
+import { Progress } from 'antd';
 import { useTheme } from 'antd-style';
 import { ReactNode, memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/features/PluginDetailModal/Meta.tsx

@@ -1,56 +1,28 @@
-import { Avatar, Tag } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
+import { Block } from '@lobehub/ui';
+import { Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { startCase } from 'lodash-es';
 import { memo } from 'react';
-import { Center } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
+import PluginAvatar from '@/features/PluginAvatar';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
-const useStyles = createStyles(({ css, token }) => ({
-  avatar: css`
-    flex: none;
-  `,
-  desc: css`
-    color: ${token.colorTextDescription};
-    text-align: center;
-  `,
-  title: css`
-    font-size: 20px;
-    font-weight: 600;
-    text-align: center;
-  `,
-}));
-
 const Meta = memo<{
   id: string;
 }>(({ id }) => {
   const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(id), isEqual);
-  const { styles, theme } = useStyles();
 
   return (
-    <Center gap={16}>
-      <Avatar
-        animation
-        avatar={pluginHelpers.getPluginAvatar(pluginMeta)}
-        background={theme.colorFillTertiary}
-        className={styles.avatar}
-        size={100}
-      />
-
-      <div className={styles.title}>{pluginHelpers.getPluginTitle(pluginMeta)}</div>
-      {(pluginMeta?.tags as string[])?.length > 0 && (
-        <Center gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-          {(pluginHelpers.getPluginTags(pluginMeta) as string[]).map((tag: string, index) => (
-            <Tag key={index} style={{ margin: 0 }}>
-              {startCase(tag).trim()}
-            </Tag>
-          ))}
-        </Center>
-      )}
-      <div className={styles.desc}>{pluginHelpers.getPluginDesc(pluginMeta)}</div>
-    </Center>
+    <Block gap={16} horizontal padding={16} variant={'outlined'}>
+      <PluginAvatar identifier={id} size={40} />
+      <Flexbox gap={2}>
+        <div>{pluginHelpers.getPluginTitle(pluginMeta)}</div>
+        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          {pluginHelpers.getPluginDesc(pluginMeta)}
+        </Typography.Text>
+      </Flexbox>
+    </Block>
   );
 });
 

package/src/features/PluginDetailModal/index.tsx

@@ -1,8 +1,6 @@
-import { Modal, TabsNav } from '@lobehub/ui';
-import { Divider, TabsProps } from 'antd';
+import { Modal, Segmented, SegmentedProps } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
 
 import PluginSettingsConfig from '@/features/PluginSettings';
@@ -20,9 +18,14 @@ interface PluginDetailModalProps {
   tab?: string;
 }
 
+enum Tab {
+  Info = 'info',
+  Settings = 'settings',
+}
+
 const PluginDetailModal = memo<PluginDetailModalProps>(
   ({ schema, onClose, id, onTabChange, open, tab }) => {
-    const [tabKey, setTabKey] = useMergeState('info', {
+    const [tabKey, setTabKey] = useMergeState(Tab.Info, {
       onChange: onTabChange,
       value: tab,
     });
@@ -33,6 +36,7 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
     return (
       <Modal
         allowFullscreen
+        footer={null}
         onCancel={onClose}
         onOk={() => {
           onClose();
@@ -41,32 +45,32 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
         title={t('detailModal.title')}
         width={650}
       >
-        <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>
+        <Meta id={id} />
+        <Segmented
+          block
+          onChange={(v) => setTabKey(v as Tab)}
+          options={
+            [
+              {
+                label: t('detailModal.tabs.info'),
+                value: Tab.Info,
+              },
+              hasSettings && {
+                label: t('detailModal.tabs.settings'),
+                value: Tab.Settings,
+              },
+            ].filter(Boolean) as SegmentedProps['options']
+          }
+          style={{
+            marginBlock: 16,
+          }}
+          value={tabKey}
+        />
+        {tabKey === 'settings' ? (
+          hasSettings && <PluginSettingsConfig id={id} schema={schema} />
+        ) : (
+          <APIs id={id} />
+        )}
       </Modal>
     );
   },

package/src/features/PluginDevModal/LocalForm.tsx

@@ -114,6 +114,7 @@ const LocalForm = memo<{ form: FormInstance; mode?: 'edit' | 'create' }>(({ form
           title: t('dev.metaConfig'),
         },
       ]}
+      layout={'vertical'}
       validateMessages={{
         required: () => t('dev.meta.formFieldRequired'),
       }}

package/src/features/PluginDevModal/MCPManifestForm/ArgsInput.tsx

@@ -1,4 +1,4 @@
-import { Input, InputProps } from 'antd';
+import { Input, type InputProps } from '@lobehub/ui';
 import { memo } from 'react';
 
 interface ArgsInputProps extends Omit<InputProps, 'value' | 'onChange'> {

package/src/features/PluginDevModal/MCPManifestForm/MCPTypeSelect.tsx

@@ -65,7 +65,7 @@ const useStyles = createStyles(({ token, css }) => ({
   disabled: css`
     cursor: not-allowed;
     border-color: ${token.colorBorder};
-    opacity: 0.6;
+    opacity: 0.5;
     background-color: ${token.colorBgContainerDisabled};
 
     &:hover {
@@ -88,11 +88,11 @@ const useStyles = createStyles(({ token, css }) => ({
 
 // Helper component for feature list items (moved from MCPManifestForm)
 const FeatureItem = memo(({ children }: { children: React.ReactNode }) => {
-  const { styles } = useStyles();
+  const { styles, theme } = useStyles();
   return (
     <div className={styles.featureItem}>
       <Center className={styles.featureIcon}>
-        <CheckIcon size={16} />
+        <CheckIcon color={theme.colorSuccess} size={16} />
       </Center>
       <div className={styles.featureText}>{children}</div>
     </div>

package/src/features/PluginDevModal/MCPManifestForm/index.tsx

@@ -7,8 +7,8 @@ import {
   SiPython,
 } from '@icons-pack/react-simple-icons';
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
-import { Alert, FormItem, Icon } from '@lobehub/ui';
-import { AutoComplete, Button, Form, FormInstance, Input } from 'antd';
+import { Alert, AutoComplete, Button, FormItem, Icon, Input } from '@lobehub/ui';
+import { Form, FormInstance } from 'antd';
 import { FileCode } from 'lucide-react';
 import { ChangeEvent, FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -176,8 +176,8 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
         {pasteError && (
           <Alert message={pasteError} showIcon style={{ marginBottom: 16 }} type="error" />
         )}
-        <Form.Item
-          extra={t('dev.mcp.identifier.desc')}
+        <FormItem
+          desc={t('dev.mcp.identifier.desc')}
           label={t('dev.mcp.identifier.label')}
           name={'identifier'}
           rules={[
@@ -204,11 +204,11 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
             onChange={handleIdentifierChange}
             placeholder={t('dev.mcp.identifier.placeholder')}
           />
-        </Form.Item>
+        </FormItem>
 
         {mcpType === 'http' && (
-          <Form.Item
-            extra={t('dev.mcp.url.desc')}
+          <FormItem
+            desc={t('dev.mcp.url.desc')}
             label={t('dev.mcp.url.label')}
             name={HTTP_URL_KEY}
             rules={[
@@ -217,13 +217,13 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
             ]}
           >
             <Input placeholder="https://mcp.higress.ai/mcp-github/xxxxx" />
-          </Form.Item>
+          </FormItem>
         )}
 
         {mcpType === 'stdio' && (
           <>
-            <Form.Item
-              extra={t('dev.mcp.command.desc')}
+            <FormItem
+              desc={t('dev.mcp.command.desc')}
               label={t('dev.mcp.command.label')}
               name={STDIO_COMMAND}
               rules={[{ message: t('dev.mcp.command.required'), required: true }]}
@@ -240,26 +240,19 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
                 }))}
                 placeholder={t('dev.mcp.command.placeholder')}
               />
-            </Form.Item>
-            <Form.Item
-              extra={t('dev.mcp.args.desc')}
+            </FormItem>
+            <FormItem
+              desc={t('dev.mcp.args.desc')}
               label={t('dev.mcp.args.label')}
               name={STDIO_ARGS}
               rules={[{ message: t('dev.mcp.args.required'), required: true }]}
             >
               <ArgsInput placeholder={t('dev.mcp.args.placeholder')} />
-            </Form.Item>
+            </FormItem>
           </>
         )}
-        <Form.Item extra={t('dev.mcp.testConnectionTip')}>
-          <Flexbox align={'center'} gap={8} horizontal>
-            <Button
-              loading={isTesting}
-              onClick={handleTestConnection}
-              type={!!mcpType ? 'primary' : undefined}
-            >
-              {t('dev.mcp.testConnection')}
-            </Button>
+        <FormItem colon={false} label={t('dev.mcp.testConnectionTip')} layout={'horizontal'}>
+          <Flexbox align={'center'} gap={8} horizontal justify={'flex-end'}>
             {manifest && !connectionError && !isTesting && (
               <ManifestPreviewer manifest={manifest}>
                 <Flexbox>
@@ -267,8 +260,15 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
                 </Flexbox>
               </ManifestPreviewer>
             )}
+            <Button
+              loading={isTesting}
+              onClick={handleTestConnection}
+              type={!!mcpType ? 'primary' : undefined}
+            >
+              {t('dev.mcp.testConnection')}
+            </Button>
           </Flexbox>
-        </Form.Item>
+        </FormItem>
 
         {connectionError && (
           <Alert

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -1,5 +1,5 @@
-import { Form } from '@lobehub/ui';
-import { Form as AForm, Card, FormInstance } from 'antd';
+import { Block } from '@lobehub/ui';
+import { Form as AForm, FormInstance, Typography } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -15,22 +15,19 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   const plugin: LobeToolCustomPlugin = AForm.useWatch([], form);
   const meta = plugin?.manifest?.meta;
 
-  const items = {
-    avatar: <PluginAvatar avatar={pluginHelpers.getPluginAvatar(meta)} />,
-    desc: pluginHelpers.getPluginDesc(meta) || 'Plugin Description',
-    label: (
-      <Flexbox align={'center'} gap={8} horizontal>
-        {pluginHelpers.getPluginTitle(meta) || 'Plugin Title'}
-        <PluginTag type={'customPlugin'} />
-      </Flexbox>
-    ),
-    minWidth: undefined,
-  };
-
   return (
-    <Card size={'small'} styles={{ body: { padding: '0 16px' } }} title={t('dev.preview.card')}>
-      <Form.Item {...items} colon={false} style={{ alignItems: 'center', marginBottom: 0 }} />
-    </Card>
+    <Block gap={16} horizontal padding={16} title={t('dev.preview.card')} variant={'outlined'}>
+      <PluginAvatar avatar={pluginHelpers.getPluginAvatar(meta)} size={40} />
+      <Flexbox gap={2}>
+        <Flexbox align={'center'} gap={8} horizontal>
+          {pluginHelpers.getPluginTitle(meta) || 'Plugin Title'}
+          <PluginTag type={'customPlugin'} />
+        </Flexbox>
+        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          {pluginHelpers.getPluginDesc(meta) || 'Plugin Description'}
+        </Typography.Text>
+      </Flexbox>
+    </Block>
   );
 });
 

package/src/features/PluginDevModal/UrlManifestForm.tsx

@@ -48,7 +48,7 @@ const UrlManifestForm = memo<{ form: FormInstance; isEditMode: boolean }>(
     return (
       <Form form={form} layout={'vertical'}>
         <FormItem
-          extra={
+          desc={
             <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}>
               {t('dev.meta.manifest.desc', { appName: BRANDING_NAME })}
               {manifest && (

package/src/features/PluginDevModal/index.tsx

@@ -1,5 +1,5 @@
-import { Alert, Icon, Modal } from '@lobehub/ui';
-import { App, Button, Form, Popconfirm, Segmented, Tag } from 'antd';
+import { Alert, Button, Icon, Modal, Segmented, Tag } from '@lobehub/ui';
+import { App, Form, Popconfirm } from 'antd';
 import { useResponsive } from 'antd-style';
 import { MoveUpRight } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
@@ -153,6 +153,7 @@ const DevModal = memo<DevModalProps>(
                 },
               ]}
               value={configMode}
+              variant={'filled'}
             />
 
             {configMode === 'url' && (