@lobehub/chat 1.83.8 → 1.84.1

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

@@ -1,11 +1,11 @@
-import { DisconnectOutlined } from '@ant-design/icons';
 import { Icon } from '@lobehub/ui';
-import { Divider, Typography } from 'antd';
+import { GlobeOffIcon } from '@lobehub/ui/icons';
+import { Divider } from 'antd';
 import { createStyles } from 'antd-style';
-import { CheckIcon, SparklesIcon } from 'lucide-react';
-import { ReactNode, memo } from 'react';
+import { LucideIcon, SparkleIcon } from 'lucide-react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/slices/chat';
@@ -15,53 +15,31 @@ import { SearchMode } from '@/types/search';
 import FCSearchModel from './FCSearchModel';
 import ModelBuiltinSearch from './ModelBuiltinSearch';
 
-const { Text } = Typography;
-
-interface NetworkOption {
-  description: string;
-  disable?: boolean;
-  icon: ReactNode;
-  label: string;
-  value: SearchMode;
-}
-
 const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    background: ${token.colorFillTertiary};
+  `,
   check: css`
     margin-inline-start: 12px;
     font-size: 16px;
     color: ${token.colorPrimary};
   `,
-  content: css`
-    flex: 1;
-    width: 230px;
-  `,
   description: css`
     font-size: 12px;
-    color: ${token.colorTextSecondary};
+    color: ${token.colorTextDescription};
   `,
-  iconWrapper: css`
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-
-    font-size: 16px;
-
-    background: ${token.colorFillQuaternary};
+  icon: css`
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadius}px;
+    background: ${token.colorBgElevated};
   `,
   option: css`
     cursor: pointer;
 
-    align-items: center;
-
     width: 100%;
     padding-block: 8px;
-    padding-inline: 12px;
-    border-radius: 8px;
+    padding-inline: 8px;
+    border-radius: ${token.borderRadius}px;
 
     transition: background-color 0.2s;
 
@@ -70,15 +48,23 @@ const useStyles = createStyles(({ css, token }) => ({
     }
   `,
   title: css`
-    margin-block-end: 2px;
     font-size: 14px;
     font-weight: 500;
     color: ${token.colorText};
   `,
 }));
 
-const Item = memo<NetworkOption>(({ value, description, icon, label }) => {
-  const { styles } = useStyles();
+interface NetworkOption {
+  description: string;
+  disable?: boolean;
+  icon: LucideIcon;
+  label: string;
+  setLoading?: (loading: boolean) => void;
+  value: SearchMode;
+}
+
+const Item = memo<NetworkOption>(({ value, description, icon, label, setLoading }) => {
+  const { cx, styles } = useStyles();
   const [mode, updateAgentChatConfig] = useAgentStore((s) => [
     agentChatConfigSelectors.agentSearchMode(s),
     s.updateAgentChatConfig,
@@ -86,30 +72,33 @@ const Item = memo<NetworkOption>(({ value, description, icon, label }) => {
 
   return (
     <Flexbox
-      className={styles.option}
-      gap={24}
+      align={'flex-start'}
+      className={cx(styles.option, mode === value && styles.active)}
+      gap={12}
       horizontal
       key={value}
-      onClick={() => updateAgentChatConfig({ searchMode: value })}
+      onClick={async () => {
+        setLoading?.(true);
+        await updateAgentChatConfig({ searchMode: value });
+        setLoading?.(false);
+      }}
     >
-      <Flexbox gap={8} horizontal>
-        <div className={styles.iconWrapper}>{icon}</div>
-        <div className={styles.content}>
-          <div className={styles.title}>{label}</div>
-          <Text className={styles.description} type="secondary">
-            {description}
-          </Text>
-        </div>
+      <Center className={styles.icon} flex={'none'} height={32} width={32}>
+        <Icon icon={icon} />
+      </Center>
+      <Flexbox flex={1}>
+        <div className={styles.title}>{label}</div>
+        <div className={styles.description}>{description}</div>
       </Flexbox>
-      {mode === value && <Icon className={styles.check} icon={CheckIcon} />}
     </Flexbox>
   );
 });
 
 interface AINetworkSettingsProps {
-  providerSearch?: boolean;
+  setLoading?: (loading: boolean) => void;
 }
-const AINetworkSettings = memo<AINetworkSettingsProps>(() => {
+
+const AINetworkSettings = memo<AINetworkSettingsProps>(({ setLoading }) => {
   const { t } = useTranslation('chat');
   const [model, provider] = useAgentStore((s) => [
     agentSelectors.currentAgentModel(s),
@@ -124,13 +113,13 @@ const AINetworkSettings = memo<AINetworkSettingsProps>(() => {
   const options: NetworkOption[] = [
     {
       description: t('search.mode.off.desc'),
-      icon: <DisconnectOutlined />,
+      icon: GlobeOffIcon,
       label: t('search.mode.off.title'),
       value: 'off',
     },
     {
       description: t('search.mode.auto.desc'),
-      icon: <Icon icon={SparklesIcon} />,
+      icon: SparkleIcon,
       label: t('search.mode.auto.title'),
       value: 'auto',
     },
@@ -139,13 +128,13 @@ const AINetworkSettings = memo<AINetworkSettingsProps>(() => {
   const showDivider = isModelHasBuiltinSearchConfig || !supportFC;
 
   return (
-    <Flexbox gap={8}>
+    <Flexbox gap={4}>
       {options.map((option) => (
-        <Item {...option} key={option.value} />
+        <Item setLoading={setLoading} {...option} key={option.value} />
       ))}
-      {showDivider && <Divider style={{ margin: 0, paddingInline: 12 }} />}
+      {showDivider && <Divider style={{ margin: 0 }} />}
       {isModelHasBuiltinSearchConfig && <ModelBuiltinSearch />}
-      {!supportFC && <FCSearchModel />}
+      {!supportFC && <FCSearchModel setLoading={setLoading} />}
     </Flexbox>
   );
 });

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

@@ -1,61 +1,50 @@
 import { ActionIcon } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { GlobeOffIcon } from '@lobehub/ui/icons';
 import { useTheme } from 'antd-style';
 import { Globe } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import { isDeprecatedEdition } from '@/const/version';
 import { useAgentEnableSearch } from '@/hooks/useAgentEnableSearch';
-import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 
+import ActionPopover from '../../components/ActionPopover';
 import AINetworkSettings from './SwitchPanel';
 
 const Search = memo(() => {
   const { t } = useTranslation('chat');
+  const [loading, setLoading] = useState(false);
   const [isLoading] = useAgentStore((s) => [agentSelectors.isAgentConfigLoading(s)]);
   const isAgentEnableSearch = useAgentEnableSearch();
-
-  const isMobile = useIsMobile();
-
   const theme = useTheme();
 
-  if (isLoading) return null;
-  // <ActionIcon
-  //   icon={Globe}
-  //   placement={'bottom'}
-  //   style={{
-  //     cursor: 'not-allowed',
-  //   }}
-  // />
+  if (isLoading) return <ActionIcon disabled icon={GlobeOffIcon} />;
 
   return (
     !isDeprecatedEdition && (
-      <Flexbox>
-        <Popover
-          arrow={false}
-          content={<AINetworkSettings />}
-          styles={{
-            body: {
-              minWidth: isMobile ? undefined : 200,
-              padding: 4,
-              width: isMobile ? '100vw' : undefined,
-            },
+      <ActionPopover
+        content={<AINetworkSettings setLoading={setLoading} />}
+        maxWidth={320}
+        minWidth={320}
+        placement={'topLeft'}
+        styles={{
+          body: {
+            padding: 4,
+          },
+        }}
+      >
+        <ActionIcon
+          color={isAgentEnableSearch ? theme.colorInfo : undefined}
+          icon={isAgentEnableSearch ? Globe : GlobeOffIcon}
+          loading={loading}
+          title={t('search.title')}
+          tooltipProps={{
+            placement: 'bottom',
           }}
-        >
-          <ActionIcon
-            color={
-              isAgentEnableSearch ? (theme.isDarkMode ? theme.cyan7 : theme.cyan10) : undefined
-            }
-            icon={Globe}
-            placement={'bottom'}
-            title={t('search.title')}
-          />
-        </Popover>
-      </Flexbox>
+        />
+      </ActionPopover>
     )
   );
 });

package/src/features/ChatInput/ActionBar/Token/TokenTag.tsx

@@ -1,5 +1,5 @@
-import { TokenTag, Tooltip } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Tooltip } from '@lobehub/ui';
+import { TokenTag } from '@lobehub/ui/chat';
 import { useTheme } from 'antd-style';
 import numeral from 'numeral';
 import { memo, useMemo } from 'react';
@@ -16,6 +16,7 @@ import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
 import { useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 
+import ActionPopover from '../../components/ActionPopover';
 import TokenProgress from './TokenProgress';
 
 interface TokenTagProps {
@@ -67,7 +68,7 @@ const Token = memo<TokenTagProps>(({ total: messageString }) => {
 
   const chatsString = useMemo(() => {
     const chats = chatSelectors.mainAIChatsWithHistoryConfig(useChatStore.getState());
-    return chats.map(chat => chat.content).join('');
+    return chats.map((chat) => chat.content).join('');
   }, [messageString, historyCount, enableHistoryCount]);
 
   const chatsToken = useTokenCount(chatsString) + inputTokenCount;
@@ -156,10 +157,10 @@ const Token = memo<TokenTagProps>(({ total: messageString }) => {
   );
 
   return (
-    <Popover arrow={false} content={content} placement={'top'} trigger={['hover', 'click']}>
+    <ActionPopover content={content}>
       <TokenTag
-        displayMode={'used'}
         maxValue={maxTokens}
+        mode={'used'}
         style={{ marginLeft: 8 }}
         text={{
           overload: t('tokenTag.overload'),
@@ -168,7 +169,7 @@ const Token = memo<TokenTagProps>(({ total: messageString }) => {
         }}
         value={totalToken}
       />
-    </Popover>
+    </ActionPopover>
   );
 });
 

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

@@ -1,10 +1,8 @@
-import { Avatar, Icon } from '@lobehub/ui';
-import { Dropdown } from 'antd';
-import { createStyles } from 'antd-style';
-import type { ItemType } from 'antd/es/menu/interface';
+import { Avatar, DropdownProps, Icon, ItemType } from '@lobehub/ui';
+import { Checkbox } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { ArrowRight, Store, ToyBrick } from 'lucide-react';
-import { PropsWithChildren, memo } from 'react';
+import { PropsWithChildren, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -19,27 +17,20 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { builtinToolSelectors, pluginSelectors } from '@/store/tool/selectors';
 
+import ActionDropdown from '../../components/ActionDropdown';
 import ToolItem from './ToolItem';
 
-const useStyles = createStyles(({ css, prefixCls }) => ({
-  menu: css`
-    &.${prefixCls}-dropdown-menu {
-      padding-block: 8px;
-    }
-
-    .${prefixCls}-dropdown-menu-item-group-list .${prefixCls}-dropdown-menu-item {
-      padding: 0;
-      border-radius: 4px;
-    }
-  `,
-}));
-
-const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
+const DropdownMenu = memo<PropsWithChildren<{ disabled?: boolean }>>(({ children, disabled }) => {
   const { t } = useTranslation('setting');
   const list = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
   const { showDalle } = useServerConfigStore(featureFlagsSelectors);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [open, setOpen] = useWorkspaceModal();
+  const [checked, togglePlugin] = useAgentStore((s) => [
+    agentSelectors.currentAgentPlugins(s),
+    s.togglePlugin,
+  ]);
   const builtinList = useToolStore(builtinToolSelectors.metaList(showDalle), isEqual);
-
   const enablePluginCount = useAgentStore(
     (s) =>
       agentSelectors
@@ -47,54 +38,50 @@ const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
         .filter((i) => !builtinList.some((b) => b.identifier === i)).length,
   );
 
-  const [open, setOpen] = useWorkspaceModal();
-  const { styles } = useStyles();
-
   const items: ItemType[] = [
-    (builtinList.length !== 0 && {
+    {
       children: builtinList.map((item) => ({
-        icon: <Avatar avatar={item.meta.avatar} size={24} />,
-        key: item.identifier,
-        label: (
-          <ToolItem identifier={item.identifier} label={item.meta?.title || item.identifier} />
+        extra: (
+          <Checkbox
+            checked={checked.includes(item.identifier)}
+            onClick={(e) => {
+              e.stopPropagation();
+              togglePlugin(item.identifier);
+            }}
+          />
         ),
+        icon: <Avatar avatar={item.meta.avatar} size={20} style={{ flex: 'none' }} />,
+        key: item.identifier,
+        label: <ToolItem identifier={item.identifier} label={item.meta?.title} />,
+        onClick: () => togglePlugin(item.identifier),
       })),
 
       key: 'builtins',
       label: t('tools.builtins.groupName'),
       type: 'group',
-    }) as ItemType,
+    },
     {
-      children: [
-        ...list.map((item) => ({
-          icon: item.meta?.avatar ? (
-            <PluginAvatar avatar={pluginHelpers.getPluginAvatar(item.meta)} size={24} />
-          ) : (
-            <Icon icon={ToyBrick} size={{ fontSize: 16 }} style={{ padding: 4 }} />
-          ),
-          key: item.identifier,
-          label: (
-            <ToolItem
-              identifier={item.identifier}
-              label={pluginHelpers.getPluginTitle(item?.meta) || item.identifier}
-            />
-          ),
-        })),
-        {
-          icon: <Icon icon={Store} size={{ fontSize: 16 }} style={{ padding: 4 }} />,
-
-          key: 'plugin-store',
-          label: (
-            <Flexbox gap={40} horizontal justify={'space-between'} padding={'8px 12px'}>
-              {t('tools.plugins.store')} <Icon icon={ArrowRight} />
-            </Flexbox>
-          ),
-          onClick: (e) => {
-            e.domEvent.stopPropagation();
-            setOpen(true);
-          },
-        },
-      ],
+      children: list.map((item) => ({
+        extra: (
+          <Checkbox
+            checked={checked.includes(item.identifier)}
+            onClick={(e) => {
+              e.stopPropagation();
+              togglePlugin(item.identifier);
+            }}
+          />
+        ),
+        icon: item.meta?.avatar ? (
+          <PluginAvatar avatar={pluginHelpers.getPluginAvatar(item.meta)} size={20} />
+        ) : (
+          <Icon icon={ToyBrick} size={20} />
+        ),
+        key: item.identifier,
+        label: (
+          <ToolItem identifier={item.identifier} label={pluginHelpers.getPluginTitle(item?.meta)} />
+        ),
+        onClick: () => togglePlugin(item.identifier),
+      })),
       key: 'plugins',
       label: (
         <Flexbox align={'center'} gap={40} horizontal justify={'space-between'}>
@@ -107,8 +94,21 @@ const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
         </Flexbox>
       ),
       type: 'group',
-    } as ItemType,
-  ].filter(Boolean);
+    },
+    {
+      type: 'divider',
+    },
+    {
+      extra: <Icon icon={ArrowRight} />,
+      icon: Store,
+      key: 'plugin-store',
+      label: t('tools.plugins.store'),
+      onClick: () => {
+        setDropdownOpen(false);
+        setOpen(true);
+      },
+    },
+  ];
 
   const plugins = useAgentStore((s) => agentSelectors.currentAgentPlugins(s));
 
@@ -118,26 +118,24 @@ const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
   useFetchInstalledPlugins();
   useCheckPluginsIsInstalled(plugins);
 
+  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
+    if (info.source === 'trigger' || nextOpen) {
+      setDropdownOpen(nextOpen);
+    }
+  };
+
   return (
     <>
-      <Dropdown
-        arrow={false}
-        menu={{
-          className: styles.menu,
-          items,
-          onClick: (e) => {
-            e.domEvent.preventDefault();
-          },
-          style: {
-            maxHeight: 500,
-            overflowY: 'scroll',
-          },
-        }}
-        placement={'top'}
-        trigger={['click']}
+      <ActionDropdown
+        disabled={disabled}
+        maxHeight={500}
+        menu={{ items }}
+        minWidth={240}
+        onOpenChange={handleOpenChange}
+        open={dropdownOpen}
       >
         {children}
-      </Dropdown>
+      </ActionDropdown>
       <PluginStore open={open} setOpen={setOpen} />
     </>
   );

package/src/features/ChatInput/ActionBar/Tools/ToolItem.tsx

@@ -1,43 +1,17 @@
-import { Checkbox } from 'antd';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
 import { useToolStore } from '@/store/tool';
 import { customPluginSelectors } from '@/store/tool/selectors';
 
-const ToolItem = memo<{ identifier: string; label: string }>(({ identifier, label }) => {
-  const [checked, togglePlugin] = useAgentStore((s) => [
-    agentSelectors.currentAgentPlugins(s).includes(identifier),
-    s.togglePlugin,
-  ]);
-
+const ToolItem = memo<{ identifier: string; label?: string }>(({ identifier, label }) => {
   const isCustom = useToolStore((s) => customPluginSelectors.isCustomPlugin(identifier)(s));
 
   return (
-    <Flexbox
-      gap={40}
-      horizontal
-      justify={'space-between'}
-      onClick={(e) => {
-        e.stopPropagation();
-        togglePlugin(identifier);
-      }}
-      padding={'8px 12px'}
-    >
-      <Flexbox align={'center'} gap={8} horizontal>
-        {label}
-        {isCustom && <PluginTag showText={false} type={'customPlugin'} />}
-      </Flexbox>
-      <Checkbox
-        checked={checked}
-        onClick={(e) => {
-          e.stopPropagation();
-          togglePlugin(identifier);
-        }}
-      />
+    <Flexbox align={'center'} gap={8} horizontal>
+      {label || identifier}
+      {isCustom && <PluginTag showText={false} type={'customPlugin'} />}
     </Flexbox>
   );
 });

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

@@ -22,12 +22,14 @@ const Tools = memo(() => {
   return (
     enablePlugins && (
       <Suspense fallback={<ActionIcon icon={LucideLoader2} spin />}>
-        <DropdownMenu>
+        <DropdownMenu disabled={!enableFC}>
           <ActionIcon
-            disable={!enableFC}
+            disabled={!enableFC}
             icon={Blocks}
-            placement={'bottom'}
             title={t(enableFC ? 'tools.title' : 'tools.disabled')}
+            tooltipProps={{
+              placement: 'bottom',
+            }}
           />
         </DropdownMenu>
       </Suspense>

package/src/features/ChatInput/ActionBar/Upload/ClientMode.tsx

@@ -4,11 +4,11 @@ import { FileUp, LucideImage } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useModelSupportFiles } from '@/hooks/useModelSupportFiles';
+import { useModelSupportVision } from '@/hooks/useModelSupportVision';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useFileStore } from '@/store/file';
-import { useModelSupportFiles } from "@/hooks/useModelSupportFiles";
-import { useModelSupportVision } from "@/hooks/useModelSupportVision";
 
 const FileUpload = memo(() => {
   const { t } = useTranslation('chat');
@@ -35,9 +35,8 @@ const FileUpload = memo(() => {
       showUploadList={false}
     >
       <ActionIcon
-        disable={!canUpload}
+        disabled={!canUpload}
         icon={enabledFiles ? FileUp : LucideImage}
-        placement={'bottom'}
         title={t(
           canUpload
             ? enabledFiles
@@ -45,6 +44,9 @@ const FileUpload = memo(() => {
               : 'upload.clientMode.actionTooltip'
             : 'upload.clientMode.disabled',
         )}
+        tooltipProps={{
+          placement: 'bottom',
+        }}
       />
     </Upload>
   );