@lobehub/chat 1.84.9 → 1.84.11

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

@@ -1,33 +1,30 @@
-import { ActionIcon } from '@lobehub/ui';
 import { SlidersHorizontal } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import ActionPopover from '../../components/ActionPopover';
-import ParamsControls from './ParamsControls';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+
+import Action from '../components/Action';
+import Controls from './Controls';
 
 const Params = memo(() => {
+  const [isLoading] = useAgentStore((s) => [agentSelectors.isAgentConfigLoading(s)]);
+  const [updating, setUpdating] = useState(false);
   const { t } = useTranslation('setting');
-  const [popoverOpen, setPopoverOpen] = useState(false);
-  const [isUpdating, setUpdating] = useState(false);
+
+  if (isLoading) return <Action disabled icon={SlidersHorizontal} />;
 
   return (
-    <ActionPopover
-      content={<ParamsControls setUpdating={setUpdating} />}
-      loading={isUpdating}
-      minWidth={400}
-      onOpenChange={setPopoverOpen}
-      open={popoverOpen}
+    <Action
+      icon={SlidersHorizontal}
+      loading={updating}
+      popover={{
+        content: <Controls setUpdating={setUpdating} updating={updating} />,
+      }}
+      showTooltip={false}
       title={t('settingModel.params.title')}
-    >
-      <ActionIcon
-        icon={SlidersHorizontal}
-        title={t('settingModel.params.title')}
-        tooltipProps={{
-          placement: 'bottom',
-        }}
-      />
-    </ActionPopover>
+    />
   );
 });
 

package/src/features/ChatInput/{STT → ActionBar/STT}/common.tsx

@@ -116,6 +116,7 @@ const CommonSTT = memo<{
           tooltipProps={{
             placement: 'bottom',
           }}
+          variant={mobile ? 'outlined' : 'borderless'}
         />
       </Dropdown>
     );

package/src/features/ChatInput/ActionBar/Search/{SwitchPanel.tsx → Controls.tsx}

@@ -29,7 +29,7 @@ const useStyles = createStyles(({ css, token }) => ({
     color: ${token.colorTextDescription};
   `,
   icon: css`
-    border: 1px solid ${token.colorBorderSecondary};
+    border: 1px solid ${token.colorFillTertiary};
     border-radius: ${token.borderRadius}px;
     background: ${token.colorBgElevated};
   `,
@@ -59,11 +59,11 @@ interface NetworkOption {
   disable?: boolean;
   icon: LucideIcon;
   label: string;
-  setLoading?: (loading: boolean) => void;
+  setUpdating?: (loading: boolean) => void;
   value: SearchMode;
 }
 
-const Item = memo<NetworkOption>(({ value, description, icon, label, setLoading }) => {
+const Item = memo<NetworkOption>(({ value, description, icon, label, setUpdating }) => {
   const { cx, styles } = useStyles();
   const [mode, updateAgentChatConfig] = useAgentStore((s) => [
     agentChatConfigSelectors.agentSearchMode(s),
@@ -78,9 +78,9 @@ const Item = memo<NetworkOption>(({ value, description, icon, label, setLoading
       horizontal
       key={value}
       onClick={async () => {
-        setLoading?.(true);
+        setUpdating?.(true);
         await updateAgentChatConfig({ searchMode: value });
-        setLoading?.(false);
+        setUpdating?.(false);
       }}
     >
       <Center className={styles.icon} flex={'none'} height={32} width={32}>
@@ -94,11 +94,12 @@ const Item = memo<NetworkOption>(({ value, description, icon, label, setLoading
   );
 });
 
-interface AINetworkSettingsProps {
-  setLoading?: (loading: boolean) => void;
+interface ControlsProps {
+  setUpdating: (updating: boolean) => void;
+  updating: boolean;
 }
 
-const AINetworkSettings = memo<AINetworkSettingsProps>(({ setLoading }) => {
+const Controls = memo<ControlsProps>(({ setUpdating }) => {
   const { t } = useTranslation('chat');
   const [model, provider] = useAgentStore((s) => [
     agentSelectors.currentAgentModel(s),
@@ -130,13 +131,13 @@ const AINetworkSettings = memo<AINetworkSettingsProps>(({ setLoading }) => {
   return (
     <Flexbox gap={4}>
       {options.map((option) => (
-        <Item setLoading={setLoading} {...option} key={option.value} />
+        <Item setUpdating={setUpdating} {...option} key={option.value} />
       ))}
       {showDivider && <Divider style={{ margin: 0 }} />}
       {isModelHasBuiltinSearchConfig && <ModelBuiltinSearch />}
-      {!supportFC && <FCSearchModel setLoading={setLoading} />}
+      {!supportFC && <FCSearchModel setLoading={setUpdating} />}
     </Flexbox>
   );
 });
 
-export default AINetworkSettings;
+export default Controls;

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

@@ -1,4 +1,3 @@
-import { ActionIcon } from '@lobehub/ui';
 import { GlobeOffIcon } from '@lobehub/ui/icons';
 import { useTheme } from 'antd-style';
 import { Globe } from 'lucide-react';
@@ -10,42 +9,38 @@ import { useAgentEnableSearch } from '@/hooks/useAgentEnableSearch';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 
-import ActionPopover from '../../components/ActionPopover';
-import AINetworkSettings from './SwitchPanel';
+import Action from '../components/Action';
+import Controls from './Controls';
 
 const Search = memo(() => {
   const { t } = useTranslation('chat');
-  const [loading, setLoading] = useState(false);
   const [isLoading] = useAgentStore((s) => [agentSelectors.isAgentConfigLoading(s)]);
+  const [updating, setUpdating] = useState(false);
   const isAgentEnableSearch = useAgentEnableSearch();
   const theme = useTheme();
 
-  if (isLoading) return <ActionIcon disabled icon={GlobeOffIcon} />;
+  if (isDeprecatedEdition) return null;
+  if (isLoading) return <Action disabled icon={GlobeOffIcon} />;
 
   return (
-    !isDeprecatedEdition && (
-      <ActionPopover
-        content={<AINetworkSettings setLoading={setLoading} />}
-        maxWidth={320}
-        minWidth={320}
-        placement={'topLeft'}
-        styles={{
+    <Action
+      color={isAgentEnableSearch ? theme.colorInfo : undefined}
+      icon={isAgentEnableSearch ? Globe : GlobeOffIcon}
+      loading={updating}
+      popover={{
+        content: <Controls setUpdating={setUpdating} updating={updating} />,
+        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',
-          }}
-        />
-      </ActionPopover>
-    )
+        },
+      }}
+      showTooltip={false}
+      title={t('search.title')}
+    />
   );
 });
 

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

@@ -16,7 +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 ActionPopover from '../components/ActionPopover';
 import TokenProgress from './TokenProgress';
 
 interface TokenTagProps {

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

@@ -5,14 +5,23 @@ import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { useToolStore } from '@/store/tool';
 import { customPluginSelectors } from '@/store/tool/selectors';
 
-const ToolItem = memo<{ identifier: string; label?: string }>(({ identifier, label }) => {
-  const isCustom = useToolStore((s) => customPluginSelectors.isCustomPlugin(identifier)(s));
+import CheckboxItem, { CheckboxItemProps } from '../components/CheckbokWithLoading';
+
+const ToolItem = memo<CheckboxItemProps>(({ id, onUpdate, label, checked }) => {
+  const isCustom = useToolStore((s) => customPluginSelectors.isCustomPlugin(id)(s));
 
   return (
-    <Flexbox align={'center'} gap={8} horizontal>
-      {label || identifier}
-      {isCustom && <PluginTag showText={false} type={'customPlugin'} />}
-    </Flexbox>
+    <CheckboxItem
+      checked={checked}
+      id={id}
+      label={
+        <Flexbox align={'center'} gap={8} horizontal>
+          {label || id}
+          {isCustom && <PluginTag showText={false} type={'customPlugin'} />}
+        </Flexbox>
+      }
+      onUpdate={onUpdate}
+    />
   );
 });
 

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

@@ -1,17 +1,21 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Blocks, LucideLoader2 } from 'lucide-react';
-import { Suspense, memo } from 'react';
+import { Blocks } from 'lucide-react';
+import { Suspense, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import PluginStore from '@/features/PluginStore';
 import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
-import DropdownMenu from './Dropdown';
+import Action from '../components/Action';
+import { useControls } from './useControls';
 
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
+  const [modalOpen, setModalOpen] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const items = useControls({ setModalOpen, setUpdating });
   const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);
 
   const model = useAgentStore(agentSelectors.currentAgentModel);
@@ -19,21 +23,25 @@ const Tools = memo(() => {
 
   const enableFC = useModelSupportToolUse(model, provider);
 
+  if (!enablePlugins) return null;
+  if (!enableFC)
+    return <Action disabled icon={Blocks} showTooltip={true} title={t('tools.disabled')} />;
+
   return (
-    enablePlugins && (
-      <Suspense fallback={<ActionIcon icon={LucideLoader2} spin />}>
-        <DropdownMenu disabled={!enableFC}>
-          <ActionIcon
-            disabled={!enableFC}
-            icon={Blocks}
-            title={t(enableFC ? 'tools.title' : 'tools.disabled')}
-            tooltipProps={{
-              placement: 'bottom',
-            }}
-          />
-        </DropdownMenu>
-      </Suspense>
-    )
+    <Suspense fallback={<Action disabled icon={Blocks} title={t('tools.title')} />}>
+      <Action
+        dropdown={{
+          maxWidth: 320,
+          menu: { items },
+          minWidth: 240,
+        }}
+        icon={Blocks}
+        loading={updating}
+        showTooltip={false}
+        title={t('tools.title')}
+      />
+      <PluginStore open={modalOpen} setOpen={setModalOpen} />
+    </Suspense>
   );
 });
 

package/src/features/ChatInput/ActionBar/Tools/{Dropdown.tsx → useControls.tsx}

@@ -1,31 +1,30 @@
-import { Avatar, DropdownProps, Icon, ItemType } from '@lobehub/ui';
-import { Checkbox } from 'antd';
+import { Avatar, Icon, ItemType } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ArrowRight, Store, ToyBrick } from 'lucide-react';
-import { PropsWithChildren, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import PluginStore from '@/features/PluginStore';
 import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
 import { useCheckPluginsIsInstalled } from '@/hooks/useCheckPluginsIsInstalled';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
-import { useWorkspaceModal } from '@/hooks/useWorkspaceModal';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { builtinToolSelectors, pluginSelectors } from '@/store/tool/selectors';
 
-import ActionDropdown from '../../components/ActionDropdown';
 import ToolItem from './ToolItem';
 
-const DropdownMenu = memo<PropsWithChildren<{ disabled?: boolean }>>(({ children, disabled }) => {
+export const useControls = ({
+  setModalOpen,
+  setUpdating,
+}: {
+  setModalOpen: (open: boolean) => void;
+  setUpdating: (updating: boolean) => void;
+}) => {
   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,
@@ -37,23 +36,31 @@ const DropdownMenu = memo<PropsWithChildren<{ disabled?: boolean }>>(({ children
         .currentAgentPlugins(s)
         .filter((i) => !builtinList.some((b) => b.identifier === i)).length,
   );
+  const plugins = useAgentStore((s) => agentSelectors.currentAgentPlugins(s));
+
+  const [useFetchPluginStore] = useToolStore((s) => [s.useFetchPluginStore]);
+
+  useFetchPluginStore();
+  useFetchInstalledPlugins();
+  useCheckPluginsIsInstalled(plugins);
 
   const items: ItemType[] = [
     {
       children: builtinList.map((item) => ({
-        extra: (
-          <Checkbox
+        icon: <Avatar avatar={item.meta.avatar} size={20} style={{ flex: 'none' }} />,
+        key: item.identifier,
+        label: (
+          <ToolItem
             checked={checked.includes(item.identifier)}
-            onClick={(e) => {
-              e.stopPropagation();
-              togglePlugin(item.identifier);
+            id={item.identifier}
+            label={item.meta?.title}
+            onUpdate={async () => {
+              setUpdating(true);
+              await togglePlugin(item.identifier);
+              setUpdating(false);
             }}
           />
         ),
-        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',
@@ -62,15 +69,6 @@ const DropdownMenu = memo<PropsWithChildren<{ disabled?: boolean }>>(({ children
     },
     {
       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} />
         ) : (
@@ -78,9 +76,17 @@ const DropdownMenu = memo<PropsWithChildren<{ disabled?: boolean }>>(({ children
         ),
         key: item.identifier,
         label: (
-          <ToolItem identifier={item.identifier} label={pluginHelpers.getPluginTitle(item?.meta)} />
+          <ToolItem
+            checked={checked.includes(item.identifier)}
+            id={item.identifier}
+            label={pluginHelpers.getPluginTitle(item?.meta)}
+            onUpdate={async () => {
+              setUpdating(true);
+              await togglePlugin(item.identifier);
+              setUpdating(false);
+            }}
+          />
         ),
-        onClick: () => togglePlugin(item.identifier),
       })),
       key: 'plugins',
       label: (
@@ -104,41 +110,10 @@ const DropdownMenu = memo<PropsWithChildren<{ disabled?: boolean }>>(({ children
       key: 'plugin-store',
       label: t('tools.plugins.store'),
       onClick: () => {
-        setDropdownOpen(false);
-        setOpen(true);
+        setModalOpen(true);
       },
     },
   ];
 
-  const plugins = useAgentStore((s) => agentSelectors.currentAgentPlugins(s));
-
-  const [useFetchPluginStore] = useToolStore((s) => [s.useFetchPluginStore]);
-
-  useFetchPluginStore();
-  useFetchInstalledPlugins();
-  useCheckPluginsIsInstalled(plugins);
-
-  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
-    if (info.source === 'trigger' || nextOpen) {
-      setDropdownOpen(nextOpen);
-    }
-  };
-
-  return (
-    <>
-      <ActionDropdown
-        disabled={disabled}
-        maxHeight={500}
-        menu={{ items }}
-        minWidth={240}
-        onOpenChange={handleOpenChange}
-        open={dropdownOpen}
-      >
-        {children}
-      </ActionDropdown>
-      <PluginStore open={open} setOpen={setOpen} />
-    </>
-  );
-});
-
-export default DropdownMenu;
+  return items;
+};

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

@@ -1,4 +1,4 @@
-import { ActionIcon, MenuProps, Tooltip } from '@lobehub/ui';
+import { MenuProps, Tooltip } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { css, cx } from 'antd-style';
 import { FileUp, FolderUp, ImageUp, Paperclip } from 'lucide-react';
@@ -10,7 +10,7 @@ import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useFileStore } from '@/store/file';
 
-import ActionDropdown from '../../components/ActionDropdown';
+import Action from '../components/Action';
 
 const hotArea = css`
   &::before {
@@ -97,15 +97,14 @@ const FileUpload = memo(() => {
   ];
 
   return (
-    <ActionDropdown menu={{ items }}>
-      <ActionIcon
-        icon={Paperclip}
-        title={t('upload.action.tooltip')}
-        tooltipProps={{
-          placement: 'bottom',
-        }}
-      />
-    </ActionDropdown>
+    <Action
+      dropdown={{
+        menu: { items },
+      }}
+      icon={Paperclip}
+      showTooltip={false}
+      title={t('upload.action.tooltip')}
+    />
   );
 });
 

package/src/features/ChatInput/ActionBar/components/Action.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { ActionIcon, type ActionIconProps } from '@lobehub/ui';
+import { isUndefined } from 'lodash-es';
+import { memo } from 'react';
+import useMergeState from 'use-merge-value';
+
+import { useServerConfigStore } from '@/store/serverConfig';
+
+import ActionDropdown, { ActionDropdownProps } from './ActionDropdown';
+import ActionPopover, { ActionPopoverProps } from './ActionPopover';
+
+interface ActionProps extends Omit<ActionIconProps, 'popover'> {
+  dropdown?: ActionDropdownProps;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+  popover?: ActionPopoverProps;
+  showTooltip?: boolean;
+  trigger?: ActionDropdownProps['trigger'];
+}
+
+const Action = memo<ActionProps>(
+  ({
+    showTooltip,
+    loading,
+    icon,
+    title,
+    dropdown,
+    popover,
+    open,
+    onOpenChange,
+    trigger,
+    disabled,
+    ...rest
+  }) => {
+    const [show, setShow] = useMergeState(false, {
+      onChange: onOpenChange,
+      value: open,
+    });
+    const mobile = useServerConfigStore((s) => s.isMobile);
+    const iconNode = (
+      <ActionIcon
+        disabled={disabled}
+        icon={icon}
+        loading={loading}
+        onClick={() => setShow(true)}
+        title={
+          isUndefined(showTooltip) ? (mobile ? undefined : title) : showTooltip ? title : undefined
+        }
+        tooltipProps={{
+          placement: 'bottom',
+        }}
+        {...rest}
+      />
+    );
+
+    if (disabled) return iconNode;
+
+    if (dropdown)
+      return (
+        <ActionDropdown
+          onOpenChange={setShow}
+          open={show}
+          trigger={trigger}
+          {...dropdown}
+          minWidth={mobile ? '100%' : dropdown.minWidth}
+          placement={mobile ? 'top' : dropdown.placement}
+        >
+          {iconNode}
+        </ActionDropdown>
+      );
+    if (popover)
+      return (
+        <ActionPopover
+          onOpenChange={setShow}
+          open={show}
+          trigger={trigger}
+          {...popover}
+          minWidth={mobile ? '100%' : popover.minWidth}
+          placement={mobile ? 'top' : popover.placement}
+        >
+          {iconNode}
+        </ActionPopover>
+      );
+
+    return iconNode;
+  },
+);
+
+export default Action;

package/src/features/ChatInput/{components → ActionBar/components}/ActionDropdown.tsx

@@ -19,10 +19,10 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
   `,
 }));
 
-interface ActionDropdownProps extends DropdownProps {
-  maxHeight?: number;
-  maxWidth?: number;
-  minWidth?: number;
+export interface ActionDropdownProps extends DropdownProps {
+  maxHeight?: number | string;
+  maxWidth?: number | string;
+  minWidth?: number | string;
 }
 
 const ActionDropdown = memo<ActionDropdownProps>(

package/src/features/ChatInput/{components → ActionBar/components}/ActionPopover.tsx

@@ -21,12 +21,13 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
   `,
 }));
 
-interface ActionPopoverProps extends Omit<PopoverProps, 'title'> {
+export interface ActionPopoverProps extends Omit<PopoverProps, 'title' | 'content'> {
+  content?: ReactNode;
   extra?: ReactNode;
   loading?: boolean;
-  maxHeight?: number;
-  maxWidth?: number;
-  minWidth?: number;
+  maxHeight?: number | string;
+  maxWidth?: number | string;
+  minWidth?: number | string;
   title?: ReactNode;
 }