@lobehub/chat 1.83.8 → 1.84.0

package/src/features/ChatInput/ActionBar/Clear.tsx

@@ -49,12 +49,14 @@ const Clear = memo(() => {
     >
       <ActionIcon
         icon={Eraser}
-        placement={'bottom'}
-        styles={{
-          root: { maxWidth: 'none' },
-        }}
         title={actionTitle}
-        tooltipHotkey={hotkey}
+        tooltipProps={{
+          hotkey,
+          placement: 'bottom',
+          styles: {
+            root: { maxWidth: 'none' },
+          },
+        }}
       />
     </Popconfirm>
   );

package/src/features/ChatInput/ActionBar/History.tsx

@@ -1,16 +1,17 @@
 import { ActionIcon, SliderWithInput } from '@lobehub/ui';
-import { Popover, Switch } from 'antd';
+import { Switch } from 'antd';
 import { Timer, TimerOff } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 
+import ActionPopover from '../components/ActionPopover';
+
 const History = memo(() => {
   const { t } = useTranslation('setting');
+  const [loading, setLoading] = useState(false);
   const [popoverOpen, setPopoverOpen] = useState(false);
 
   const [historyCount, enableHistoryCount, updateAgentConfig] = useAgentStore((s) => {
@@ -27,49 +28,50 @@ const History = memo(() => {
       : 'settingChat.enableHistoryCount.unlimited',
     { number: historyCount || 0 },
   );
-  const mobile = useIsMobile();
 
   return (
-    <Popover
+    <ActionPopover
       arrow={false}
       content={
-        <Flexbox align={'center'} gap={16} horizontal>
-          <SliderWithInput
-            disabled={!enableHistoryCount}
-            max={20}
-            min={0}
-            onChange={(v) => {
-              updateAgentConfig({ historyCount: v });
-            }}
-            step={1}
-            style={{ width: mobile ? 160 : 300 }}
-            value={historyCount}
-          />
-        </Flexbox>
+        <SliderWithInput
+          disabled={!enableHistoryCount}
+          max={20}
+          min={0}
+          onChange={async (v) => {
+            setLoading(true);
+            await updateAgentConfig({ historyCount: v });
+            setLoading(false);
+          }}
+          size={'small'}
+          step={1}
+          value={historyCount}
+        />
+      }
+      extra={
+        <Switch
+          checked={enableHistoryCount}
+          loading={loading}
+          onChange={async (enableHistoryCount) => {
+            setLoading(true);
+            await updateAgentConfig({ enableHistoryCount });
+            setLoading(false);
+          }}
+          size={'small'}
+        />
       }
+      minWidth={240}
       onOpenChange={setPopoverOpen}
       open={popoverOpen}
-      placement={'top'}
-      title={
-        <Flexbox align={'center'} gap={4} horizontal>
-          <Switch
-            checked={enableHistoryCount}
-            onChange={(enableHistoryCount) => {
-              updateAgentConfig({ enableHistoryCount });
-            }}
-            size={'small'}
-          />
-          {t('settingChat.enableHistoryCount.title')}
-        </Flexbox>
-      }
-      trigger={'click'}
+      title={t('settingChat.enableHistoryCount.title')}
     >
       <ActionIcon
         icon={enableHistoryCount ? Timer : TimerOff}
-        placement={'bottom'}
-        title={popoverOpen ? undefined : title}
+        title={title}
+        tooltipProps={{
+          placement: 'bottom',
+        }}
       />
-    </Popover>
+    </ActionPopover>
   );
 });
 

package/src/features/ChatInput/ActionBar/Knowledge/Dropdown.tsx

@@ -1,12 +1,8 @@
-import { Icon } from '@lobehub/ui';
-import { Dropdown } from 'antd';
-import { createStyles } from 'antd-style';
-import type { ItemType } from 'antd/es/menu/interface';
+import { DropdownProps, Icon, ItemType } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ArrowRight, LibraryBig } from 'lucide-react';
 import { PropsWithChildren, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import FileIcon from '@/components/FileIcon';
 import RepoIcon from '@/components/RepoIcon';
@@ -14,28 +10,15 @@ import { AssignKnowledgeBaseModal } from '@/features/KnowledgeBaseModal';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 
+import ActionDropdown from '../../components/ActionDropdown';
 import ListItem from './ListItem';
 
-const useStyles = createStyles(({ css, prefixCls }) => ({
-  knowledgeBase: css``,
-  menu: css`
-    &.${prefixCls}-dropdown-menu {
-      padding-block: 8px;
-    }
-
-    .${prefixCls}-dropdown-menu-item-group-list .${prefixCls}-dropdown-menu-item {
-      padding: 0;
-      padding-inline-start: 8px;
-      border-radius: 4px;
-    }
-  `,
-}));
-
 const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
   const { t } = useTranslation('chat');
 
-  const { styles } = useStyles();
   const [open, setOpen] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   const files = useAgentStore(agentSelectors.currentAgentFiles, isEqual);
   const knowledgeBases = useAgentStore(agentSelectors.currentAgentKnowledgeBases, isEqual);
 
@@ -100,58 +83,45 @@ const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
             />
           ),
         })),
-        {
-          icon: (
-            <Icon
-              icon={LibraryBig}
-              size={{ fontSize: 16 }}
-              style={{ marginInlineEnd: 0, paddingInlineStart: 4 }}
-            />
-          ),
-          key: 'knowledge-base-store',
-          label: (
-            <Flexbox gap={40} horizontal justify={'space-between'} padding={'8px 12px'}>
-              {t('knowledgeBase.viewMore')} <Icon icon={ArrowRight} />
-            </Flexbox>
-          ),
-          onClick: (e) => {
-            e.domEvent.stopPropagation();
-            setOpen(true);
-          },
-        },
       ],
-      className: styles.knowledgeBase,
       key: 'relativeFilesOrKnowledgeBases',
-      label: (
-        <Flexbox horizontal justify={'space-between'}>
-          {t('knowledgeBase.relativeFilesOrKnowledgeBases')}
-          {/*<Link href={'/files'}>{t('knowledgeBase.more')}</Link>*/}
-        </Flexbox>
-      ),
+      label: t('knowledgeBase.relativeFilesOrKnowledgeBases'),
       type: 'group',
     },
+    {
+      type: 'divider',
+    },
+    {
+      extra: <Icon icon={ArrowRight} />,
+      icon: LibraryBig,
+      key: 'knowledge-base-store',
+      label: t('knowledgeBase.viewMore'),
+      onClick: () => {
+        setDropdownOpen(false);
+        setOpen(true);
+      },
+    },
   ];
 
+  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
+    if (info.source === 'trigger' || nextOpen) {
+      setDropdownOpen(nextOpen);
+    }
+  };
+
   return (
     <>
-      <Dropdown
-        arrow={false}
+      <ActionDropdown
+        maxHeight={500}
         menu={{
-          className: styles.menu,
           items,
-          onClick: (e) => {
-            e.domEvent.preventDefault();
-          },
-          style: {
-            maxHeight: 500,
-            overflowY: 'scroll',
-          },
         }}
-        placement={'top'}
-        trigger={['click']}
+        minWidth={240}
+        onOpenChange={handleOpenChange}
+        open={dropdownOpen}
       >
         {children}
-      </Dropdown>
+      </ActionDropdown>
       <AssignKnowledgeBaseModal open={open} setOpen={setOpen} />
     </>
   );

package/src/features/ChatInput/ActionBar/Knowledge/index.tsx

@@ -28,21 +28,25 @@ const Knowledge = memo(() => {
     return null;
   }
 
-  const content = (
-    <DropdownMenu>
-      <ActionIcon
-        disable={!enableKnowledge}
-        icon={LibraryBig}
-        placement={'bottom'}
-        title={
-          enableKnowledge
-            ? t('knowledgeBase.title')
-            : t('knowledgeBase.disabled', { cloud: LOBE_CHAT_CLOUD })
-        }
-      />
-    </DropdownMenu>
+  const icon = (
+    <ActionIcon
+      disabled={!enableKnowledge}
+      icon={LibraryBig}
+      title={
+        enableKnowledge
+          ? t('knowledgeBase.title')
+          : t('knowledgeBase.disabled', { cloud: LOBE_CHAT_CLOUD })
+      }
+      tooltipProps={{
+        placement: 'bottom',
+      }}
+    />
   );
 
+  if (!enableKnowledge) return icon;
+
+  const content = <DropdownMenu>{icon}</DropdownMenu>;
+
   return (
     <Suspense fallback={<ActionIcon icon={LucideLoader2} spin />}>
       {showTip ? (

package/src/features/ChatInput/ActionBar/Model/ControlsForm.tsx

@@ -67,6 +67,7 @@ const ControlsForm = memo(() => {
         </span>
       ),
       label: t('extendParams.enableReasoning.title'),
+      layout: 'horizontal',
       minWidth: undefined,
       name: 'enableReasoning',
     },
@@ -97,7 +98,7 @@ const ControlsForm = memo(() => {
       }}
       size={'small'}
       style={{ fontSize: 12 }}
-      variant={'pure'}
+      variant={'borderless'}
     />
   );
 });

package/src/features/ChatInput/ActionBar/Model/ReasoningTokenSlider.tsx

@@ -1,4 +1,5 @@
-import { InputNumber, Slider } from 'antd';
+import { InputNumber } from '@lobehub/ui';
+import { Slider } from 'antd';
 import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
@@ -70,8 +71,7 @@ const ReasoningTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defau
           min={0}
           onChange={(e) => {
             if (!e && e !== 0) return;
-
-            updateWithRealValue(e);
+            updateWithRealValue(e as number);
           }}
           step={4 * Kibi}
           style={{ width: 60 }}

package/src/features/ChatInput/ActionBar/Model/index.tsx

@@ -1,6 +1,5 @@
 import { ModelIcon } from '@lobehub/icons';
 import { ActionIcon } from '@lobehub/ui';
-import { Popover } from 'antd';
 import { createStyles } from 'antd-style';
 import { Settings2Icon } from 'lucide-react';
 import { memo } from 'react';
@@ -8,17 +7,17 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import ModelSwitchPanel from '@/features/ModelSwitchPanel';
-import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 
+import ActionPopover from '../../components/ActionPopover';
 import ControlsForm from './ControlsForm';
 
-const useStyles = createStyles(({ css, token, isDarkMode, cx }) => ({
+const useStyles = createStyles(({ css, token, cx }) => ({
   container: css`
     border-radius: 20px;
-    background: ${isDarkMode ? token.colorFillSecondary : token.colorFillTertiary};
+    background: ${token.colorFillTertiary};
   `,
   icon: cx(
     'model-switch',
@@ -67,20 +66,6 @@ const ModelSwitch = memo(() => {
     aiModelSelectors.isModelHasExtendParams(model, provider),
   );
 
-  const isMobile = useIsMobile();
-
-  // if (isLoading && isLoginWithAuth)
-  //   return (
-  //     <ActionIcon
-  //       icon={Brain}
-  //       placement={'bottom'}
-  //       style={{
-  //         cursor: 'not-allowed',
-  //       }}
-  //       title={t('ModelSwitch.title')}
-  //     />
-  //   );
-
   return (
     <Flexbox align={'center'} className={isModelHasExtendParams ? styles.container : ''} horizontal>
       <ModelSwitchPanel>
@@ -96,27 +81,16 @@ const ModelSwitch = memo(() => {
       </ModelSwitchPanel>
 
       {isModelHasExtendParams && (
-        <Flexbox style={{ marginInlineStart: -4 }}>
-          <Popover
-            arrow={false}
-            content={<ControlsForm />}
-            placement={'topLeft'}
-            styles={{
-              body: {
-                minWidth: isMobile ? undefined : 350,
-                paddingBlock: 4,
-                width: isMobile ? '100vw' : undefined,
-              },
+        <ActionPopover content={<ControlsForm />} minWidth={350} placement={'topLeft'}>
+          <ActionIcon
+            icon={Settings2Icon}
+            style={{ borderRadius: 20, marginInlineStart: -4 }}
+            title={t('extendParams.title')}
+            tooltipProps={{
+              placement: 'bottom',
             }}
-          >
-            <ActionIcon
-              icon={Settings2Icon}
-              placement={'bottom'}
-              style={{ borderRadius: 20 }}
-              title={t('extendParams.title')}
-            />
-          </Popover>
-        </Flexbox>
+          />
+        </ActionPopover>
       )}
     </Flexbox>
   );

package/src/features/ChatInput/ActionBar/Params/ParamsControls.tsx

@@ -1,6 +1,4 @@
-import { Form, Tag } from '@lobehub/ui';
-import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
-import { createStyles } from 'antd-style';
+import { Form, type FormItemProps, Tag } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
 import { memo } from 'react';
@@ -17,20 +15,10 @@ import {
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    .ant-form-group {
-      padding-inline: 0;
-      background: transparent;
-    }
-  `,
-}));
-
 interface ParamsControlsProps {
   setUpdating: (updating: boolean) => void;
 }
 const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
-  const { styles } = useStyles();
   const { t } = useTranslation('setting');
 
   const updateAgentConfig = useAgentStore((s) => s.updateAgentConfig);
@@ -42,7 +30,7 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
       children: <Temperature />,
       desc: <Tag>temperature</Tag>,
       label: (
-        <Flexbox gap={8} horizontal>
+        <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
           {t('settingModel.temperature.title')}
           <InfoTooltip title={t('settingModel.temperature.desc')} />
         </Flexbox>
@@ -86,7 +74,6 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
 
   return (
     <Form
-      className={styles.container}
       initialValues={config}
       itemMinWidth={200}
       items={items}
@@ -96,9 +83,8 @@ const ParamsControls = memo<ParamsControlsProps>(({ setUpdating }) => {
         await updateAgentConfig(values);
         setUpdating(false);
       }, 500)}
-      size={'small'}
       style={{ fontSize: 12 }}
-      variant={'pure'}
+      variant={'borderless'}
     />
   );
 });

package/src/features/ChatInput/ActionBar/Params/index.tsx

@@ -1,14 +1,9 @@
 import { ActionIcon } from '@lobehub/ui';
-import { Popover } from 'antd';
-import { useTheme } from 'antd-style';
 import { SlidersHorizontal } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import UpdateLoading from '@/components/Loading/UpdateLoading';
-import { useIsMobile } from '@/hooks/useIsMobile';
 
+import ActionPopover from '../../components/ActionPopover';
 import ParamsControls from './ParamsControls';
 
 const Params = memo(() => {
@@ -16,36 +11,23 @@ const Params = memo(() => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [isUpdating, setUpdating] = useState(false);
 
-  const theme = useTheme();
-  const isMobile = useIsMobile();
   return (
-    <Popover
-      arrow={false}
+    <ActionPopover
       content={<ParamsControls setUpdating={setUpdating} />}
+      loading={isUpdating}
+      minWidth={400}
       onOpenChange={setPopoverOpen}
       open={popoverOpen}
-      placement={'top'}
-      styles={{
-        body: {
-          minWidth: isMobile ? undefined : 400,
-          width: isMobile ? '100vw' : undefined,
-        },
-      }}
-      title={
-        <Flexbox horizontal justify={'space-between'}>
-          {t('settingModel.params.title')}
-
-          {isUpdating && <UpdateLoading style={{ color: theme.colorTextSecondary }} />}
-        </Flexbox>
-      }
-      trigger={'click'}
+      title={t('settingModel.params.title')}
     >
       <ActionIcon
         icon={SlidersHorizontal}
-        placement={'bottom'}
-        title={popoverOpen ? undefined : t('settingModel.params.title')}
+        title={t('settingModel.params.title')}
+        tooltipProps={{
+          placement: 'bottom',
+        }}
       />
-    </Popover>
+    </ActionPopover>
   );
 });
 

package/src/features/ChatInput/ActionBar/Search/FCSearchModel.tsx

@@ -1,4 +1,5 @@
 import { createStyles } from 'antd-style';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -30,7 +31,11 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const FCSearchModel = () => {
+interface FCSearchModelProps {
+  setLoading?: (loading: boolean) => void;
+}
+
+const FCSearchModel = memo<FCSearchModelProps>(({ setLoading }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
   const [searchFCModel, updateAgentChatConfig] = useAgentStore((s) => [
@@ -44,13 +49,19 @@ const FCSearchModel = () => {
         <InfoTooltip title={t('search.searchModel.desc')} />
       </Flexbox>
       <FunctionCallingModelSelect
-        onChange={(value) => {
-          updateAgentChatConfig({ searchFCModel: value });
+        onChange={async (value) => {
+          setLoading?.(true);
+          await updateAgentChatConfig({ searchFCModel: value });
+          setLoading?.(false);
+        }}
+        style={{
+          maxWidth: 160,
+          width: 160,
         }}
         value={searchFCModel}
       />
     </Flexbox>
   );
-};
+});
 
 export default FCSearchModel;

package/src/features/ChatInput/ActionBar/Search/FunctionCallingModelSelect/index.tsx

@@ -1,4 +1,4 @@
-import { Select, SelectProps } from 'antd';
+import { Select, type SelectProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { memo, useMemo } from 'react';
 
@@ -21,13 +21,13 @@ interface ModelOption {
   value: string;
 }
 
-interface ModelSelectProps {
+interface ModelSelectProps extends SelectProps {
   onChange?: (props: WorkingModel) => void;
   showAbility?: boolean;
   value?: WorkingModel;
 }
 
-const ModelSelect = memo<ModelSelectProps>(({ value, onChange }) => {
+const ModelSelect = memo<ModelSelectProps>(({ value, onChange, ...rest }) => {
   const enabledList = useEnabledChatModels();
 
   const { styles } = useStyles();
@@ -78,6 +78,7 @@ const ModelSelect = memo<ModelSelectProps>(({ value, onChange }) => {
       popupMatchSelectWidth={false}
       value={`${value?.provider}/${value?.model}`}
       variant={'filled'}
+      {...rest}
     />
   );
 });

package/src/features/ChatInput/ActionBar/Search/ModelBuiltinSearch.tsx

@@ -1,4 +1,4 @@
-import { Google } from '@lobehub/icons';
+import { Exa, Google } from '@lobehub/icons';
 import { Icon } from '@lobehub/ui';
 import { Switch } from 'antd';
 import { Search } from 'lucide-react';
@@ -10,8 +10,6 @@ import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 
-import ExaIcon from './ExaIcon';
-
 interface SearchEngineIconProps {
   icon?: string;
 }
@@ -19,15 +17,15 @@ interface SearchEngineIconProps {
 const SearchEngineIcon = ({ icon }: SearchEngineIconProps) => {
   switch (icon) {
     case 'google': {
-      return <Google.Color />;
+      return <Google.Avatar size={20} />;
     }
 
     case 'exa': {
-      return <ExaIcon />;
+      return <Exa.Avatar size={20} />;
     }
 
     default: {
-      return <Icon icon={Search} size={{ fontSize: 16 }} />;
+      return <Icon icon={Search} size={14} />;
     }
   }
 };
@@ -57,7 +55,7 @@ const ModelBuiltinSearch = memo(() => {
       padding={'8px 12px'}
       style={{ cursor: 'pointer', userSelect: 'none' }}
     >
-      <Flexbox align={'center'} gap={4} horizontal>
+      <Flexbox align={'center'} gap={8} horizontal>
         <SearchEngineIcon icon={modelCard?.settings?.searchProvider} />
         {t('search.mode.useModelBuiltin')}
       </Flexbox>