💄 style: Enable toggling search on/off via search button click & historyCount button (lobehub#9173)

* ✨ feat: Enhance Search Action with mobile support and update agent chat config

* ✨ feat: Update History component to support mobile interactions and enhance Controls with form handling

Author: sxjeru

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

@@ -1,7 +1,7 @@
 import { Form, type FormItemProps, SliderWithInput } from '@lobehub/ui';
-import { Switch } from 'antd';
+import { Switch, Form as AntdForm } from 'antd';
 import { debounce } from 'lodash-es';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAgentStore } from '@/store/agent';
@@ -13,6 +13,7 @@ interface ControlsProps {
 }
 const Controls = memo<ControlsProps>(({ updating, setUpdating }) => {
   const { t } = useTranslation('setting');
+  const [form] = AntdForm.useForm();
 
   const [historyCount, enableHistoryCount, updateAgentConfig] = useAgentStore((s) => {
     return [
@@ -22,6 +23,14 @@ const Controls = memo<ControlsProps>(({ updating, setUpdating }) => {
     ];
   });
 
+  // Sync external store updates to the form without remounting to keep Switch animation
+  useEffect(() => {
+    form?.setFieldsValue({
+      enableHistoryCount,
+      historyCount,
+    });
+  }, [enableHistoryCount, historyCount, form]);
+
   let items: FormItemProps[] = [
     {
       children: <Switch loading={updating} size={'small'} />,
@@ -55,6 +64,7 @@ const Controls = memo<ControlsProps>(({ updating, setUpdating }) => {
 
   return (
     <Form
+      form={form}
       initialValues={{
         enableHistoryCount,
         historyCount,

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

@@ -4,14 +4,20 @@ import { useTranslation } from 'react-i18next';
 
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 import Action from '../components/Action';
 import Controls from './Controls';
 
 const History = memo(() => {
-  const [isLoading] = useAgentStore((s) => [agentSelectors.isAgentConfigLoading(s)]);
+  const [isLoading, chatConfig, updateAgentChatConfig] = useAgentStore((s) => [
+    agentSelectors.isAgentConfigLoading(s),
+    agentChatConfigSelectors.currentChatConfig(s),
+    s.updateAgentChatConfig,
+  ]);
   const [updating, setUpdating] = useState(false);
   const { t } = useTranslation('setting');
+  const isMobile = useIsMobile();
 
   const [historyCount, enableHistoryCount] = useAgentStore((s) => {
     return [
@@ -33,9 +39,20 @@ const History = memo(() => {
     <Action
       icon={enableHistoryCount ? Timer : TimerOff}
       loading={updating}
+      onClick={
+        isMobile
+          ? undefined
+          : async (e) => {
+            e?.preventDefault?.();
+            e?.stopPropagation?.();
+            const next = !Boolean(chatConfig.enableHistoryCount);
+            await updateAgentChatConfig({ enableHistoryCount: next });
+          }
+      }
       popover={{
         content: <Controls setUpdating={setUpdating} updating={updating} />,
         minWidth: 240,
+        trigger: isMobile ? ['click'] : ['hover'],
       }}
       showTooltip={false}
       title={title}

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

@@ -6,17 +6,24 @@ import { useTranslation } from 'react-i18next';
 
 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 { agentChatConfigSelectors } from '@/store/agent/slices/chat';
 
 import Action from '../components/Action';
 import Controls from './Controls';
 
 const Search = memo(() => {
   const { t } = useTranslation('chat');
-  const [isLoading] = useAgentStore((s) => [agentSelectors.isAgentConfigLoading(s)]);
+  const [isLoading, mode, updateAgentChatConfig] = useAgentStore((s) => [
+    agentSelectors.isAgentConfigLoading(s),
+    agentChatConfigSelectors.agentSearchMode(s),
+    s.updateAgentChatConfig,
+  ]);
   const isAgentEnableSearch = useAgentEnableSearch();
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   if (isDeprecatedEdition) return null;
   if (isLoading) return <Action disabled icon={GlobeOffIcon} />;
@@ -25,6 +32,16 @@ const Search = memo(() => {
     <Action
       color={isAgentEnableSearch ? theme.colorInfo : undefined}
       icon={isAgentEnableSearch ? Globe : GlobeOffIcon}
+      onClick={
+        isMobile
+          ? undefined
+          : async (e) => {
+            e?.preventDefault?.();
+            e?.stopPropagation?.();
+            const next = mode === 'off' ? 'auto' : 'off';
+            await updateAgentChatConfig({ searchMode: next });
+          }
+      }
       popover={{
         content: <Controls />,
         maxWidth: 320,
@@ -35,6 +52,7 @@ const Search = memo(() => {
             padding: 4,
           },
         },
+        trigger: isMobile ? ['click'] : ['hover'],
       }}
       showTooltip={false}
       title={t('search.title')}

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

@@ -31,6 +31,7 @@ const Action = memo<ActionProps>(
     onOpenChange,
     trigger,
     disabled,
+    onClick,
     ...rest
   }) => {
     const [show, setShow] = useMergeState(false, {
@@ -43,7 +44,10 @@ const Action = memo<ActionProps>(
         disabled={disabled}
         icon={icon}
         loading={loading}
-        onClick={() => setShow(true)}
+        onClick={(e) => {
+          if (onClick) return onClick(e);
+          setShow(true);
+        }}
         title={
           isUndefined(showTooltip) ? (mobile ? undefined : title) : showTooltip ? title : undefined
         }