@lobehub/lobehub 2.0.0-next.322 → 2.0.0-next.324

package/src/features/CommandMenu/components/CommandInput.tsx

@@ -1,4 +1,4 @@
-import { Tag } from '@lobehub/ui';
+import { Avatar, Tag } from '@lobehub/ui';
 import { Command } from 'cmdk';
 import { ArrowLeft, X } from 'lucide-react';
 import { memo } from 'react';
@@ -13,10 +13,20 @@ const CommandInput = memo(() => {
   const { t } = useTranslation('common');
 
   const { handleBack } = useCommandMenu();
-  const { menuContext, pages, page, search, setSearch, typeFilter, setTypeFilter } =
-    useCommandMenuContext();
+  const {
+    menuContext,
+    pages,
+    page,
+    search,
+    setSearch,
+    typeFilter,
+    setTypeFilter,
+    selectedAgent,
+    setSelectedAgent,
+  } = useCommandMenuContext();
 
   const hasPages = pages.length > 0;
+  const hasSelectedAgent = !!selectedAgent;
 
   // Get localized context name
   const contextName = t(`cmdk.context.${menuContext}`, { defaultValue: menuContext });
@@ -25,9 +35,19 @@ const CommandInput = memo(() => {
     return t(`cmdk.search.${type}`);
   };
 
+  const getPlaceholder = () => {
+    if (hasSelectedAgent) {
+      return t('cmdk.askAgentPlaceholder', { agent: selectedAgent.title });
+    }
+    if (page === 'ask-ai') {
+      return t('cmdk.aiModePlaceholder');
+    }
+    return t('cmdk.searchPlaceholder');
+  };
+
   return (
     <>
-      {(menuContext !== 'general' || typeFilter) && !hasPages && (
+      {(menuContext !== 'general' || typeFilter) && !hasPages && !hasSelectedAgent && (
         <div className={styles.contextWrapper}>
           {menuContext !== 'general' && <Tag className={styles.contextTag}>{contextName}</Tag>}
           {typeFilter && (
@@ -42,18 +62,32 @@ const CommandInput = memo(() => {
         </div>
       )}
       <div className={styles.inputWrapper}>
-        {hasPages && (
+        {hasPages && !hasSelectedAgent && (
           <Tag className={styles.backTag} icon={<ArrowLeft size={12} />} onClick={handleBack} />
         )}
+        {hasSelectedAgent && (
+          <Tag
+            closable
+            icon={
+              <Avatar
+                avatar={selectedAgent.avatar}
+                emojiScaleWithBackground
+                shape="square"
+                size={14}
+              />
+            }
+            onClose={() => setSelectedAgent(undefined)}
+          >
+            {selectedAgent.title}
+          </Tag>
+        )}
         <Command.Input
           autoFocus
           onValueChange={setSearch}
-          placeholder={
-            page === 'ask-ai' ? t('cmdk.aiModePlaceholder') : t('cmdk.searchPlaceholder')
-          }
+          placeholder={getPlaceholder()}
           value={search}
         />
-        {page !== 'ask-ai' && search.trim() ? (
+        {page !== 'ask-ai' && !hasSelectedAgent && search.trim() ? (
           <>
             <span style={{ fontSize: '14px', opacity: 0.6 }}>{t('cmdk.askAI')}</span>
             <Tag>{t('cmdk.keyboard.Tab')}</Tag>

package/src/features/CommandMenu/index.tsx

@@ -1,6 +1,8 @@
 'use client';
 
+import { Avatar } from '@lobehub/ui';
 import { Command } from 'cmdk';
+import { CornerDownLeft } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
@@ -9,6 +11,7 @@ import { useLocation } from 'react-router-dom';
 import { useGlobalStore } from '@/store/global';
 
 import AskAIMenu from './AskAIMenu';
+import AskAgentCommands from './AskAgentCommands';
 import { CommandMenuProvider, useCommandMenuContext } from './CommandMenuContext';
 import MainMenu from './MainMenu';
 import SearchResults from './SearchResults';
@@ -23,10 +26,19 @@ import { useCommandMenu } from './useCommandMenu';
  */
 const CommandMenuContent = memo(() => {
   const { t } = useTranslation('common');
-  const { closeCommandMenu, handleBack, hasSearch, isSearching, searchQuery, searchResults } =
-    useCommandMenu();
-
-  const { setPages, page, pages, search, setTypeFilter, typeFilter } = useCommandMenuContext();
+  const {
+    closeCommandMenu,
+    handleBack,
+    handleSendToSelectedAgent,
+    hasSearch,
+    isSearching,
+    searchQuery,
+    searchResults,
+    selectedAgent,
+  } = useCommandMenu();
+
+  const { setPages, page, pages, search, setTypeFilter, setSelectedAgent, typeFilter } =
+    useCommandMenuContext();
 
   return (
     <div className={styles.overlay} onClick={closeCommandMenu}>
@@ -34,40 +46,81 @@ const CommandMenuContent = memo(() => {
         <Command
           className={styles.commandRoot}
           onKeyDown={(e) => {
+            // Enter key to send message to selected agent
+            if (e.key === 'Enter' && selectedAgent && search.trim()) {
+              e.preventDefault();
+              handleSendToSelectedAgent();
+              return;
+            }
             // Tab key to ask AI
-            if (e.key === 'Tab' && page !== 'ask-ai') {
+            if (e.key === 'Tab' && page !== 'ask-ai' && !selectedAgent) {
               e.preventDefault();
               setPages([...pages, 'ask-ai']);
               return;
             }
-            // Escape goes to previous page or closes
+            // Escape goes to previous page, clears selected agent, or closes
             if (e.key === 'Escape') {
               e.preventDefault();
-              if (pages.length > 0) {
+              if (selectedAgent) {
+                setSelectedAgent(undefined);
+              } else if (pages.length > 0) {
                 handleBack();
               } else {
                 closeCommandMenu();
               }
             }
-            // Backspace goes to previous page when search is empty
-            if (e.key === 'Backspace' && !search && pages.length > 0) {
-              e.preventDefault();
-              setPages((prev) => prev.slice(0, -1));
+            // Backspace clears selected agent when search is empty, or goes to previous page
+            if (e.key === 'Backspace' && !search) {
+              if (selectedAgent) {
+                e.preventDefault();
+                setSelectedAgent(undefined);
+              } else if (pages.length > 0) {
+                e.preventDefault();
+                setPages((prev) => prev.slice(0, -1));
+              }
             }
           }}
-          shouldFilter={page !== 'ask-ai'}
+          shouldFilter={page !== 'ask-ai' && !selectedAgent && !search.trimStart().startsWith('@')}
         >
           <CommandInput />
 
           <Command.List>
             <Command.Empty>{t('cmdk.noResults')}</Command.Empty>
 
-            {!page && <MainMenu />}
+            {/* Show send command when agent is selected */}
+            {selectedAgent && (
+              <Command.Group>
+                <Command.Item
+                  disabled={!search.trim()}
+                  onSelect={handleSendToSelectedAgent}
+                  value="send-to-agent"
+                >
+                  <Avatar
+                    avatar={selectedAgent.avatar}
+                    emojiScaleWithBackground
+                    shape="square"
+                    size={20}
+                  />
+                  <div className={styles.itemContent}>
+                    <div className={styles.itemLabel}>
+                      {t('cmdk.sendToAgent', { agent: selectedAgent.title } as any)}
+                    </div>
+                  </div>
+                  <CornerDownLeft className={styles.icon} />
+                </Command.Item>
+              </Command.Group>
+            )}
+
+            {/* @ mention agent commands */}
+            {!page && !selectedAgent && <AskAgentCommands />}
+
+            {/* Hide MainMenu and SearchResults when in @ mention mode */}
+            {!page && !selectedAgent && !search.trimStart().startsWith('@') && <MainMenu />}
 
             {page === 'theme' && <ThemeMenu />}
             {page === 'ask-ai' && <AskAIMenu />}
 
-            {!page && hasSearch && (
+            {!page && !selectedAgent && hasSearch && !search.trimStart().startsWith('@') && (
               <SearchResults
                 isLoading={isSearching}
                 onClose={closeCommandMenu}
@@ -109,27 +162,36 @@ const CommandMenu = memo(() => {
   useEffect(() => {
     if (!mounted) return;
 
-    const findAppRoot = () => {
-      const appElement = document.querySelector('.ant-app') as HTMLElement;
-      if (appElement) {
-        setAppRoot(appElement);
-      } else {
-        // Fallback to body if App root not found
-        setAppRoot(document.body);
+    const appElement = document.querySelector('.ant-app') as HTMLElement;
+    if (appElement) {
+      setAppRoot(appElement);
+      return;
+    }
+
+    // Fallback: use MutationObserver only if .ant-app not found yet
+    // Observe only direct children of body for better performance
+    const observer = new MutationObserver((_, obs) => {
+      const el = document.querySelector('.ant-app') as HTMLElement;
+      if (el) {
+        setAppRoot(el);
+        obs.disconnect(); // Stop observing once found
       }
-    };
-
-    findAppRoot();
+    });
 
-    // Use MutationObserver to handle dynamic rendering
-    const observer = new MutationObserver(findAppRoot);
     observer.observe(document.body, {
       childList: true,
-      subtree: true,
+      subtree: false, // Only watch direct children, not entire DOM tree
     });
 
+    // Fallback timeout: if .ant-app not found after 2s, use body
+    const timeoutId = setTimeout(() => {
+      observer.disconnect();
+      setAppRoot((prev) => prev || document.body);
+    }, 2000);
+
     return () => {
       observer.disconnect();
+      clearTimeout(timeoutId);
     };
   }, [mounted]);
 

package/src/features/CommandMenu/types.ts

@@ -4,6 +4,12 @@ export interface ChatMessage {
   role: 'user' | 'assistant';
 }
 
+export interface SelectedAgent {
+  avatar: string;
+  id: string;
+  title: string;
+}
+
 export type ThemeMode = 'light' | 'dark' | 'system';
 
 export type PageType = 'theme' | 'ask-ai' | string;

package/src/features/CommandMenu/useCommandMenu.ts

@@ -1,6 +1,6 @@
 import { useDebounce } from 'ahooks';
 import { useTheme as useNextThemesTheme } from 'next-themes';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useSWR from 'swr';
 
@@ -35,6 +35,8 @@ export const useCommandMenu = () => {
     page,
     menuContext: context,
     pathname,
+    selectedAgent,
+    setSelectedAgent,
   } = useCommandMenuContext();
 
   const navigate = useNavigate();
@@ -92,48 +94,66 @@ export const useCommandMenu = () => {
     }
   }, [open]);
 
-  const closeCommandMenu = () => {
+  const closeCommandMenu = useCallback(() => {
     setOpen({ showCommandMenu: false });
-  };
+  }, [setOpen]);
 
-  const handleNavigate = (path: string) => {
-    navigate(path);
-    closeCommandMenu();
-  };
+  const handleNavigate = useCallback(
+    (path: string) => {
+      navigate(path);
+      setOpen({ showCommandMenu: false });
+    },
+    [navigate, setOpen],
+  );
 
-  const handleExternalLink = (url: string) => {
-    window.open(url, '_blank', 'noopener,noreferrer');
-    closeCommandMenu();
-  };
+  const handleExternalLink = useCallback(
+    (url: string) => {
+      window.open(url, '_blank', 'noopener,noreferrer');
+      setOpen({ showCommandMenu: false });
+    },
+    [setOpen],
+  );
 
-  const handleThemeChange = (theme: ThemeMode) => {
-    setTheme(theme);
-    closeCommandMenu();
-  };
+  const handleThemeChange = useCallback(
+    (theme: ThemeMode) => {
+      setTheme(theme);
+      setOpen({ showCommandMenu: false });
+    },
+    [setTheme, setOpen],
+  );
 
-  const handleAskLobeAI = () => {
+  const handleAskLobeAI = useCallback(() => {
     // Navigate to inbox agent with the message query parameter
     if (inboxAgentId && search.trim()) {
       const message = encodeURIComponent(search.trim());
       navigate(`/agent/${inboxAgentId}?message=${message}`);
-      closeCommandMenu();
+      setOpen({ showCommandMenu: false });
     }
-  };
+  }, [inboxAgentId, search, navigate, setOpen]);
 
-  const handleAIPainting = () => {
+  const handleAIPainting = useCallback(() => {
     // Navigate to painting page with search as prompt
     if (search.trim()) {
       const prompt = encodeURIComponent(search.trim());
       navigate(`/image?prompt=${prompt}`);
-      closeCommandMenu();
+      setOpen({ showCommandMenu: false });
     }
-  };
+  }, [search, navigate, setOpen]);
 
-  const handleBack = () => {
+  const handleBack = useCallback(() => {
     setPages((prev) => prev.slice(0, -1));
-  };
+  }, [setPages]);
 
-  const handleCreateSession = async () => {
+  const handleSendToSelectedAgent = useCallback(() => {
+    if (selectedAgent && search.trim()) {
+      const message = encodeURIComponent(search.trim());
+      navigate(`/agent/${selectedAgent.id}?message=${message}`);
+      setSelectedAgent(undefined);
+      setOpen({ showCommandMenu: false });
+    }
+  }, [selectedAgent, search, navigate, setSelectedAgent, setOpen]);
+
+  const handleCreateSession = useCallback(async () => {
     const result = await createAgent({});
     await refreshAgentList();
 
@@ -142,32 +162,32 @@ export const useCommandMenu = () => {
       navigate(`/agent/${result.agentId}`);
     }
 
-    closeCommandMenu();
-  };
+    setOpen({ showCommandMenu: false });
+  }, [createAgent, refreshAgentList, navigate, setOpen]);
 
-  const [openNewTopicOrSaveTopic] = useChatStore((s) => [s.openNewTopicOrSaveTopic]);
+  const openNewTopicOrSaveTopic = useChatStore((s) => s.openNewTopicOrSaveTopic);
 
-  const handleCreateTopic = async () => {
+  const handleCreateTopic = useCallback(() => {
     openNewTopicOrSaveTopic();
-    closeCommandMenu();
-  };
+    setOpen({ showCommandMenu: false });
+  }, [openNewTopicOrSaveTopic, setOpen]);
 
-  const handleCreateLibrary = async () => {
-    closeCommandMenu();
+  const handleCreateLibrary = useCallback(() => {
+    setOpen({ showCommandMenu: false });
     openCreateLibraryModal({
       onSuccess: (id) => {
         navigate(`/resource/library/${id}`);
       },
     });
-  };
+  }, [setOpen, openCreateLibraryModal, navigate]);
 
-  const handleCreatePage = async () => {
+  const handleCreatePage = useCallback(async () => {
     await createPage();
-    closeCommandMenu();
-  };
+    setOpen({ showCommandMenu: false });
+  }, [createPage, setOpen]);
 
-  const handleCreateAgentTeam = async () => {
-    closeCommandMenu();
+  const handleCreateAgentTeam = useCallback(() => {
+    setOpen({ showCommandMenu: false });
     openGroupWizard({
       onCreateCustom: async (selectedAgents) => {
         await createGroupWithMembers(selectedAgents);
@@ -176,7 +196,7 @@ export const useCommandMenu = () => {
         await createGroupFromTemplate(templateId, selectedMemberTitles);
       },
     });
-  };
+  }, [setOpen, openGroupWizard, createGroupWithMembers, createGroupFromTemplate]);
 
   return {
     closeCommandMenu,
@@ -190,6 +210,7 @@ export const useCommandMenu = () => {
     handleCreateTopic,
     handleExternalLink,
     handleNavigate,
+    handleSendToSelectedAgent,
     handleThemeChange,
     hasSearch,
     isSearching,
@@ -201,7 +222,9 @@ export const useCommandMenu = () => {
     search,
     searchQuery,
     searchResults: searchResults || ([] as SearchResult[]),
+    selectedAgent,
     setSearch,
+    setSelectedAgent,
     setTypeFilter,
     typeFilter,
   };

package/src/locales/default/common.ts

@@ -113,6 +113,8 @@ export default {
   'cmdk.askAI': 'Ask Agent',
   'cmdk.askAIHeading': 'Use the following features for {{query}}',
   'cmdk.askAIHeadingEmpty': 'Choose an AI feature',
+  'cmdk.askAgentHeading': 'Ask Agent',
+  'cmdk.askAgentPlaceholder': 'Ask {{agent}} something...',
   'cmdk.askLobeAI': 'Ask Lobe AI',
   'cmdk.community': 'Community',
   'cmdk.communitySupport': 'Community Support',
@@ -128,8 +130,10 @@ export default {
   'cmdk.context.settings': 'Settings',
   'cmdk.discover': 'Discover',
   'cmdk.keyboard.ESC': 'ESC',
+  'cmdk.keyboard.Enter': 'Enter',
   'cmdk.keyboard.Tab': 'Tab',
   'cmdk.memory': 'Memory',
+  'cmdk.mentionAgent': 'Mention Agent',
   'cmdk.navigate': 'Navigate',
   'cmdk.newAgent': 'Create New Agent',
   'cmdk.newAgentTeam': 'Create New Group',
@@ -165,6 +169,7 @@ export default {
   'cmdk.search.topic': 'Topic',
   'cmdk.search.topics': 'Topics',
   'cmdk.searchPlaceholder': 'Enter a command or search...',
+  'cmdk.sendToAgent': 'Send to {{agent}}',
   'cmdk.settings': 'Settings',
   'cmdk.starOnGitHub': 'Star us on GitHub',
   'cmdk.submitIssue': 'Submit Issue',