🐛 fix(copilot): history popover not refreshing when agentId changes (#11731)

Innei · web-flow · commit 64f39e7414ea · 2026-01-23T17:36:03.000+08:00
* 🐛 fix(copilot): sync chatStore activeAgentId when switching agent

When user switches agent in Copilot toolbar, also update useChatStore's
activeAgentId to keep both stores in sync. This ensures topic selectors
and other chatStore-dependent features work correctly.

* 💄 style(copilot): show loading state for history button when switching agent

- Show loading/disabled state while topics are being fetched
- Only hide the button when confirmed there are no topics
- Improves UX by avoiding sudden button disappearance during agent switch
diff --git a/src/features/PageEditor/Copilot/Toolbar.tsx b/src/features/PageEditor/Copilot/Toolbar.tsx
@@ -1,7 +1,7 @@
 import { ActionIcon, Block, Flexbox, Popover } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { ChevronsUpDownIcon, Clock3Icon, PanelRightCloseIcon, PlusIcon } from 'lucide-react';
-import { Suspense, memo, useMemo, useState } from 'react';
+import { Suspense, memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AgentAvatar from '@/app/[variants]/(main)/home/_layout/Body/Agent/List/AgentItem/Avatar';
@@ -164,6 +164,15 @@ const CopilotToolbar = memo<CopilotToolbarProps>(({ agentId, isHovered }) => {
   const setActiveAgentId = useAgentStore((s) => s.setActiveAgentId);
   const [topicPopoverOpen, setTopicPopoverOpen] = useState(false);
 
+  const handleAgentChange = useCallback(
+    (id: string) => {
+      setActiveAgentId(id);
+      // Sync chatStore's activeAgentId to ensure topic selectors work correctly
+      useChatStore.setState({ activeAgentId: id });
+    },
+    [setActiveAgentId],
+  );
+
   // Fetch topics for the agent builder
   useChatStore((s) => s.useFetchTopics)(true, { agentId });
 
@@ -175,13 +184,15 @@ const CopilotToolbar = memo<CopilotToolbarProps>(({ agentId, isHovered }) => {
 
   const [toggleRightPanel] = useGlobalStore((s) => [s.toggleRightPanel]);
 
-  const hideHistory = !topics || topics.length === 0;
+  // topics === undefined means still loading, topics.length === 0 means confirmed empty
+  const isLoadingTopics = topics === undefined;
+  const hideHistory = !isLoadingTopics && topics.length === 0;
 
   return (
     <NavHeader
       left={
         <Flexbox align="center" gap={8} horizontal>
-          <AgentSelector agentId={agentId} onAgentChange={setActiveAgentId} />
+          <AgentSelector agentId={agentId} onAgentChange={handleAgentChange} />
         </Flexbox>
       }
       right={
@@ -218,7 +229,7 @@ const CopilotToolbar = memo<CopilotToolbarProps>(({ agentId, isHovered }) => {
                   </Flexbox>
                 }
                 onOpenChange={setTopicPopoverOpen}
-                open={topicPopoverOpen}
+                open={isLoadingTopics ? false : topicPopoverOpen}
                 placement="bottomRight"
                 styles={{
                   content: {
@@ -228,7 +239,12 @@ const CopilotToolbar = memo<CopilotToolbarProps>(({ agentId, isHovered }) => {
                 }}
                 trigger="click"
               >
-                <ActionIcon icon={Clock3Icon} size={DESKTOP_HEADER_ICON_SIZE} />
+                <ActionIcon
+                  disabled={isLoadingTopics}
+                  icon={Clock3Icon}
+                  loading={isLoadingTopics}
+                  size={DESKTOP_HEADER_ICON_SIZE}
+                />
               </Popover>
             )}
           </div>
