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

package/src/app/[variants]/(main)/community/(detail)/user/features/UserForkedAgentGroups.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { Flexbox, Grid, Tag, Text } from '@lobehub/ui';
+import { Pagination } from 'antd';
+import { GitForkIcon } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { type DiscoverGroupAgentItem } from '@/types/discover';
+
+import UserGroupCard from './UserGroupCard';
+
+interface UserForkedAgentGroupsProps {
+  agentGroups?: DiscoverGroupAgentItem[];
+  pageSize?: number;
+  rows?: number;
+}
+
+const UserForkedAgentGroups = memo<UserForkedAgentGroupsProps>(
+  ({ agentGroups = [], rows = 4, pageSize = 10 }) => {
+    const { t } = useTranslation('discover');
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const paginatedGroups = useMemo(() => {
+      const startIndex = (currentPage - 1) * pageSize;
+      return agentGroups.slice(startIndex, startIndex + pageSize);
+    }, [agentGroups, currentPage, pageSize]);
+
+    if (agentGroups.length === 0) return null;
+
+    const showPagination = agentGroups.length > pageSize;
+
+    return (
+      <Flexbox gap={16}>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <GitForkIcon size={16} />
+          <Text fontSize={16} weight={500}>
+            {t('user.forkedAgentGroups')}
+          </Text>
+          <Tag>{agentGroups.length}</Tag>
+        </Flexbox>
+        <Grid rows={rows} width={'100%'}>
+          {paginatedGroups.map((group, index) => (
+            <UserGroupCard key={group.identifier || index} {...group} />
+          ))}
+        </Grid>
+        {showPagination && (
+          <Flexbox align={'center'} justify={'center'}>
+            <Pagination
+              current={currentPage}
+              onChange={(page) => setCurrentPage(page)}
+              pageSize={pageSize}
+              showSizeChanger={false}
+              total={agentGroups.length}
+            />
+          </Flexbox>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default UserForkedAgentGroups;

package/src/app/[variants]/(main)/community/(detail)/user/features/UserForkedAgents.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { Flexbox, Grid, Tag, Text } from '@lobehub/ui';
+import { Pagination } from 'antd';
+import { GitForkIcon } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { type DiscoverAssistantItem } from '@/types/discover';
+
+import UserAgentCard from './UserAgentCard';
+
+interface UserForkedAgentsProps {
+  agents?: DiscoverAssistantItem[];
+  pageSize?: number;
+  rows?: number;
+}
+
+const UserForkedAgents = memo<UserForkedAgentsProps>(({ agents = [], rows = 4, pageSize = 10 }) => {
+  const { t } = useTranslation('discover');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const paginatedAgents = useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    return agents.slice(startIndex, startIndex + pageSize);
+  }, [agents, currentPage, pageSize]);
+
+  if (agents.length === 0) return null;
+
+  const showPagination = agents.length > pageSize;
+
+  return (
+    <Flexbox gap={16}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <GitForkIcon size={16} />
+        <Text fontSize={16} weight={500}>
+          {t('user.forkedAgents')}
+        </Text>
+        <Tag>{agents.length}</Tag>
+      </Flexbox>
+      <Grid rows={rows} width={'100%'}>
+        {paginatedAgents.map((agent, index) => (
+          <UserAgentCard key={agent.identifier || index} {...agent} />
+        ))}
+      </Grid>
+      {showPagination && (
+        <Flexbox align={'center'} justify={'center'}>
+          <Pagination
+            current={currentPage}
+            onChange={(page) => setCurrentPage(page)}
+            pageSize={pageSize}
+            showSizeChanger={false}
+            total={agents.length}
+          />
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default UserForkedAgents;

package/src/app/[variants]/(main)/community/(detail)/user/index.tsx

@@ -61,12 +61,14 @@ const UserDetailPage = memo<UserDetailPageProps>(({ mobile }) => {
 
   const contextConfig = useMemo(() => {
     if (!data || !data.user) return null;
-    const { user, agents, agentGroups } = data;
+    const { user, agents, agentGroups, forkedAgents, forkedAgentGroups } = data;
     const totalInstalls = agents.reduce((sum, agent) => sum + (agent.installCount || 0), 0);
     return {
       agentCount: agents.length,
       agentGroups: agentGroups || [],
       agents,
+      forkedAgentGroups: forkedAgentGroups || [],
+      forkedAgents: forkedAgents || [],
       groupCount: agentGroups?.length || 0,
       isOwner,
       mobile,

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/List/Item/index.tsx

@@ -3,7 +3,6 @@ import { cssVar } from 'antd-style';
 import { MessageSquareDashed, Star } from 'lucide-react';
 import { Suspense, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import urlJoin from 'url-join';
 
 import { isDesktop } from '@/const/version';
 import NavItem from '@/features/NavPanel/components/NavItem';
@@ -35,7 +34,7 @@ const TopicItem = memo<TopicItemProps>(({ id, title, fav, active, threadId }) =>
   // Construct href for cmd+click support
   const href = useMemo(() => {
     if (!activeGroupId || !id) return undefined;
-    return urlJoin('/group', activeGroupId, `?topic=${id}`);
+    return `/group/${activeGroupId}?topic=${id}`;
   }, [activeGroupId, id]);
 
   const [editing, isLoading] = useChatStore((s) => [

package/src/app/[variants]/(main)/home/features/WelcomeText/index.tsx

@@ -7,7 +7,8 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const WelcomeText = memo(() => {
-  const { t } = useTranslation('welcome');
+  const { t, i18n } = useTranslation('welcome');
+  const locale = i18n.language;
 
   const sentences = useMemo(() => {
     const messages = t('welcomeMessages', { returnObjects: true }) as Record<string, string>;
@@ -28,6 +29,7 @@ const WelcomeText = memo(() => {
         deletePauseDuration={1000}
         deletingSpeed={32}
         hideCursorWhileTyping={'afterTyping'}
+        key={locale}
         pauseDuration={16_000}
         sentences={sentences}
         typingSpeed={64}

package/src/app/[variants]/(main)/settings/profile/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { isDesktop } from '@lobechat/const';
-import { FormGroup, Skeleton, Text } from '@lobehub/ui';
-import { Divider } from 'antd';
+import { Flexbox, FormGroup, Text } from '@lobehub/ui';
+import { Skeleton as AntSkeleton, Divider } from 'antd';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -19,10 +19,33 @@ import FullNameRow from './features/FullNameRow';
 import InterestsRow from './features/InterestsRow';
 import KlavisAuthorizationList from './features/KlavisAuthorizationList';
 import PasswordRow from './features/PasswordRow';
-import ProfileRow from './features/ProfileRow';
+import ProfileRow, { labelStyle, rowStyle } from './features/ProfileRow';
 import SSOProvidersList from './features/SSOProvidersList';
 import UsernameRow from './features/UsernameRow';
 
+const SkeletonRow = ({ mobile }: { mobile?: boolean }) => {
+  if (mobile) {
+    return (
+      <Flexbox gap={12} style={rowStyle}>
+        <Flexbox align="center" horizontal justify="space-between">
+          <AntSkeleton.Input active size="small" style={{ height: 22, width: 60 }} />
+          <AntSkeleton.Input active size="small" style={{ height: 22, width: 80 }} />
+        </Flexbox>
+        <AntSkeleton.Input active size="small" style={{ height: 22, width: 120 }} />
+      </Flexbox>
+    );
+  }
+  return (
+    <Flexbox align="center" gap={24} horizontal justify="space-between" style={rowStyle}>
+      <Flexbox align="center" gap={24} horizontal style={{ flex: 1 }}>
+        <AntSkeleton.Input active size="small" style={{ ...labelStyle, height: 22 }} />
+        <AntSkeleton.Input active size="small" style={{ height: 22, minWidth: 120, width: 160 }} />
+      </Flexbox>
+      <AntSkeleton.Input active size="small" style={{ height: 22, width: 100 }} />
+    </Flexbox>
+  );
+};
+
 interface ProfileSettingProps {
   mobile?: boolean;
 }
@@ -63,75 +86,76 @@ const ProfileSetting = ({ mobile }: ProfileSettingProps) => {
 
   const { t } = useTranslation('auth');
 
-  if (isLoading)
-    return (
-      <Skeleton
-        active
-        paragraph={{ rows: 6 }}
-        style={{ padding: mobile ? 16 : undefined }}
-        title={false}
-      />
-    );
-
   return (
     <>
       <SettingHeader title={t('profile.title')} />
       <FormGroup collapsible={false} gap={16} title={t('profile.account')} variant={'filled'}>
-        {/* Avatar Row - Editable */}
-        <AvatarRow mobile={mobile} />
-
-        <Divider style={{ margin: 0 }} />
-
-        {/* Full Name Row - Editable */}
-        <FullNameRow mobile={mobile} />
-
-        <Divider style={{ margin: 0 }} />
-
-        {/* Username Row - Editable */}
-        <UsernameRow mobile={mobile} />
-
-        <Divider style={{ margin: 0 }} />
-
-        {/* Interests Row - Editable */}
-        <InterestsRow mobile={mobile} />
-
-        {/* Password Row - For Better Auth users to change or set password */}
-        {!isDesktop && isLoginWithBetterAuth && (
-          <>
-            <Divider style={{ margin: 0 }} />
-            <PasswordRow mobile={mobile} />
-          </>
-        )}
-
-        {/* Email Row - Read Only */}
-        {isLoginWithAuth && userProfile?.email && (
-          <>
-            <Divider style={{ margin: 0 }} />
-            <ProfileRow label={t('profile.email')} mobile={mobile}>
-              <Text>{userProfile.email}</Text>
-            </ProfileRow>
-          </>
-        )}
-
-        {/* SSO Providers Row */}
-        {isLoginWithAuth && (
-          <>
-            <Divider style={{ margin: 0 }} />
-            <ProfileRow label={t('profile.sso.providers')} mobile={mobile}>
-              <SSOProvidersList />
-            </ProfileRow>
-          </>
-        )}
-
-        {/* Klavis Authorizations Row */}
-        {enableKlavis && connectedServers.length > 0 && (
-          <>
-            <Divider style={{ margin: 0 }} />
-            <ProfileRow label={t('profile.authorizations.title')} mobile={mobile}>
-              <KlavisAuthorizationList servers={connectedServers} />
-            </ProfileRow>
-          </>
-        )}
+        <Flexbox style={{ display: isLoading ? 'flex' : 'none' }}>
+          <SkeletonRow mobile={mobile} />
+          <Divider style={{ margin: 0 }} />
+          <SkeletonRow mobile={mobile} />
+          <Divider style={{ margin: 0 }} />
+          <SkeletonRow mobile={mobile} />
+          <Divider style={{ margin: 0 }} />
+          <SkeletonRow mobile={mobile} />
+        </Flexbox>
+        <Flexbox style={{ display: isLoading ? 'none' : 'flex' }}>
+          {/* Avatar Row - Editable */}
+          <AvatarRow mobile={mobile} />
+
+          <Divider style={{ margin: 0 }} />
+
+          {/* Full Name Row - Editable */}
+          <FullNameRow mobile={mobile} />
+
+          <Divider style={{ margin: 0 }} />
+
+          {/* Username Row - Editable */}
+          <UsernameRow mobile={mobile} />
+
+          <Divider style={{ margin: 0 }} />
+
+          {/* Interests Row - Editable */}
+          <InterestsRow mobile={mobile} />
+
+          {/* Password Row - For Better Auth users to change or set password */}
+          {!isDesktop && isLoginWithBetterAuth && (
+            <>
+              <Divider style={{ margin: 0 }} />
+              <PasswordRow mobile={mobile} />
+            </>
+          )}
+
+          {/* Email Row - Read Only */}
+          {isLoginWithAuth && userProfile?.email && (
+            <>
+              <Divider style={{ margin: 0 }} />
+              <ProfileRow label={t('profile.email')} mobile={mobile}>
+                <Text>{userProfile.email}</Text>
+              </ProfileRow>
+            </>
+          )}
+
+          {/* SSO Providers Row */}
+          {isLoginWithAuth && (
+            <>
+              <Divider style={{ margin: 0 }} />
+              <ProfileRow label={t('profile.sso.providers')} mobile={mobile}>
+                <SSOProvidersList />
+              </ProfileRow>
+            </>
+          )}
+
+          {/* Klavis Authorizations Row */}
+          {enableKlavis && connectedServers.length > 0 && (
+            <>
+              <Divider style={{ margin: 0 }} />
+              <ProfileRow label={t('profile.authorizations.title')} mobile={mobile}>
+                <KlavisAuthorizationList servers={connectedServers} />
+              </ProfileRow>
+            </>
+          )}
+        </Flexbox>
       </FormGroup>
     </>
   );

package/src/app/[variants]/(mobile)/chat/features/Topic/index.tsx

@@ -1,5 +1,6 @@
 import { Flexbox } from '@lobehub/ui';
 
+import TopicListContent from '@/app/[variants]/(main)/agent/_layout/Sidebar/Topic/TopicListContent';
 import TopicSearchBar from '@/app/[variants]/(main)/agent/_layout/Sidebar/Topic/TopicSearchBar';
 
 import TopicModal from './features/TopicModal';
@@ -14,7 +15,7 @@ const Topic = () => {
           style={{ marginInline: -8, overflow: 'hidden', position: 'relative' }}
           width={'calc(100% + 16px)'}
         >
-          <Topic />
+          <TopicListContent />
         </Flexbox>
       </Flexbox>
     </TopicModal>

package/src/app/[variants]/onboarding/components/LobeMessage.tsx

@@ -2,6 +2,7 @@ import { Flexbox, type FlexboxProps, Text } from '@lobehub/ui';
 import { TypewriterEffect, type TypewriterEffectProps } from '@lobehub/ui/awesome';
 import { LoadingDots } from '@lobehub/ui/chat';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { ProductLogo } from '@/components/Branding';
 
@@ -11,6 +12,9 @@ interface LobeMessageProps extends Omit<FlexboxProps, 'children'> {
 }
 
 const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest }) => {
+  const { i18n } = useTranslation();
+  const locale = i18n.language;
+
   return (
     <Flexbox gap={8} {...rest}>
       <ProductLogo size={fontSize * 2} />
@@ -21,6 +25,7 @@ const LobeMessage = memo<LobeMessageProps>(({ sentences, fontSize = 24, ...rest
           deletePauseDuration={1000}
           deletingSpeed={32}
           hideCursorWhileTyping={'afterTyping'}
+          key={locale}
           pauseDuration={16_000}
           sentences={sentences}
           typingSpeed={64}

package/src/app/[variants]/onboarding/features/TelemetryStep.tsx

@@ -19,7 +19,8 @@ interface TelemetryStepProps {
 }
 
 const TelemetryStep = memo<TelemetryStepProps>(({ onNext }) => {
-  const { t } = useTranslation('onboarding');
+  const { t, i18n } = useTranslation('onboarding');
+  const locale = i18n.language;
   const [check, setCheck] = useState(true);
   const [isNavigating, setIsNavigating] = useState(false);
   const isNavigatingRef = useRef(false);
@@ -63,6 +64,7 @@ const TelemetryStep = memo<TelemetryStepProps>(({ onNext }) => {
             deletePauseDuration={1000}
             deletingSpeed={32}
             hideCursorWhileTyping={'afterTyping'}
+            key={locale}
             pauseDuration={16_000}
             sentences={[
               t('telemetry.title', { name: 'Lobe AI' }),

package/src/features/CommandMenu/AskAgentCommands.tsx

@@ -0,0 +1,105 @@
+import { DEFAULT_AVATAR, DEFAULT_INBOX_AVATAR } from '@lobechat/const';
+import { Avatar } from '@lobehub/ui';
+import { Command } from 'cmdk';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentStore } from '@/store/agent';
+import { builtinAgentSelectors } from '@/store/agent/selectors/builtinAgentSelectors';
+import { useHomeStore } from '@/store/home';
+import { homeAgentListSelectors } from '@/store/home/selectors';
+
+import { useCommandMenuContext } from './CommandMenuContext';
+import { styles } from './styles';
+
+const AskAgentCommands = memo(() => {
+  const { t } = useTranslation('common');
+  const { search, setSearch, setSelectedAgent } = useCommandMenuContext();
+
+  const inboxAgentId = useAgentStore(builtinAgentSelectors.inboxAgentId);
+  const allAgents = useHomeStore(homeAgentListSelectors.allAgents);
+
+  // Check if search starts with "@"
+  const isAtMention = search.trimStart().startsWith('@');
+
+  // Get the query after "@" for filtering
+  const mentionQuery = useMemo(() => {
+    if (!isAtMention) return '';
+    return search.trimStart().slice(1).toLowerCase();
+  }, [search, isAtMention]);
+
+  // Filter agents based on the query after "@"
+  const filteredAgents = useMemo(() => {
+    const agents = allAgents.filter((item) => item.type === 'agent');
+    if (!mentionQuery) {
+      return agents.slice(0, 10);
+    }
+    return agents
+      .filter((agent) => {
+        const title = (agent.title || '').toLowerCase();
+        return title.includes(mentionQuery);
+      })
+      .slice(0, 10);
+  }, [allAgents, mentionQuery]);
+
+  const handleAgentSelect = (agentId: string, agentTitle: string, agentAvatar: string) => {
+    setSelectedAgent({
+      avatar: agentAvatar,
+      id: agentId,
+      title: agentTitle,
+    });
+    setSearch('');
+  };
+
+  // Only show when user types "@"
+  if (!isAtMention) return null;
+
+  // Check if Lobe AI matches the query
+  const showLobeAI = !mentionQuery || 'lobe ai'.includes(mentionQuery);
+
+  return (
+    <Command.Group heading={t('cmdk.mentionAgent')}>
+      {/* @Lobe AI option */}
+      {showLobeAI && (
+        <Command.Item
+          onSelect={() => handleAgentSelect(inboxAgentId, 'Lobe AI', DEFAULT_INBOX_AVATAR)}
+          value="@lobe-ai"
+        >
+          <Avatar avatar={DEFAULT_INBOX_AVATAR} emojiScaleWithBackground shape="square" size={18} />
+          <div className={styles.itemContent}>
+            <div className={styles.itemLabel}>@Lobe AI</div>
+          </div>
+        </Command.Item>
+      )}
+
+      {/* @agent options */}
+      {filteredAgents.map((agent) => (
+        <Command.Item
+          key={agent.id}
+          onSelect={() =>
+            handleAgentSelect(
+              agent.id,
+              agent.title || t('defaultAgent'),
+              typeof agent.avatar === 'string' ? agent.avatar : DEFAULT_AVATAR,
+            )
+          }
+          value={`@${agent.title || 'agent'}-${agent.id}`}
+        >
+          <Avatar
+            avatar={typeof agent.avatar === 'string' ? agent.avatar : DEFAULT_AVATAR}
+            emojiScaleWithBackground
+            shape="square"
+            size={18}
+          />
+          <div className={styles.itemContent}>
+            <div className={styles.itemLabel}>@{agent.title || t('defaultAgent')}</div>
+          </div>
+        </Command.Item>
+      ))}
+    </Command.Group>
+  );
+});
+
+AskAgentCommands.displayName = 'AskAgentCommands';
+
+export default AskAgentCommands;

package/src/features/CommandMenu/CommandMenuContext.tsx

@@ -5,12 +5,13 @@ import {
   type ReactNode,
   type SetStateAction,
   createContext,
+  useCallback,
   useContext,
-  useEffect,
+  useMemo,
   useState,
 } from 'react';
 
-import { type MenuContext, type PageType } from './types';
+import { type MenuContext, type PageType, type SelectedAgent } from './types';
 import { detectContext } from './utils/context';
 import type { ValidSearchType } from './utils/queryParser';
 
@@ -21,8 +22,10 @@ interface CommandMenuContextValue {
   pages: PageType[];
   pathname: string | null;
   search: string;
+  selectedAgent: SelectedAgent | undefined;
   setPages: Dispatch<SetStateAction<PageType[]>>;
   setSearch: (search: string) => void;
+  setSelectedAgent: (agent: SelectedAgent | undefined) => void;
   setTypeFilter: (typeFilter: ValidSearchType | undefined) => void;
   setViewMode: (viewMode: MenuViewMode) => void;
   typeFilter: ValidSearchType | undefined;
@@ -39,49 +42,65 @@ interface CommandMenuProviderProps {
 }
 
 export const CommandMenuProvider = ({ children, pathname }: CommandMenuProviderProps) => {
-  const menuContext = detectContext(pathname ?? '/');
-  const [viewMode, setViewMode] = useState<MenuViewMode>('default');
   const [pages, setPages] = useState<PageType[]>([]);
-  const [search, setSearch] = useState('');
-  const [typeFilter, setTypeFilter] = useState<ValidSearchType | undefined>(undefined);
-  const [mounted, setMounted] = useState(false);
+  const [search, setSearchState] = useState('');
+  const [typeFilter, setTypeFilterState] = useState<ValidSearchType | undefined>(undefined);
+  const [selectedAgent, setSelectedAgentState] = useState<SelectedAgent | undefined>(undefined);
 
-  // Derived values
+  // Memoize derived values
+  const menuContext = useMemo(() => detectContext(pathname ?? '/'), [pathname]);
   const page = pages.at(-1);
+  const viewMode: MenuViewMode = search.trim().length > 0 ? 'search' : 'default';
 
-  // Ensure we're mounted on the client
-  useEffect(() => {
-    setMounted(true);
+  // Memoize setters to maintain stable references
+  const setSearch = useCallback((value: string) => setSearchState(value), []);
+  const setTypeFilter = useCallback(
+    (value: ValidSearchType | undefined) => setTypeFilterState(value),
+    [],
+  );
+  const setSelectedAgent = useCallback(
+    (value: SelectedAgent | undefined) => setSelectedAgentState(value),
+    [],
+  );
+  const setViewMode = useCallback(() => {
+    // viewMode is now derived from search, this is a no-op for backwards compatibility
   }, []);
 
-  useEffect(() => {
-    if (search.trim().length > 0) {
-      setViewMode('search');
-    } else {
-      setViewMode('default');
-    }
-  }, [search]);
-
-  return (
-    <CommandMenuContext.Provider
-      value={{
-        menuContext,
-        mounted,
-        page,
-        pages,
-        pathname,
-        search,
-        setPages,
-        setSearch,
-        setTypeFilter,
-        setViewMode,
-        typeFilter,
-        viewMode,
-      }}
-    >
-      {children}
-    </CommandMenuContext.Provider>
+  // Memoize the context value to prevent unnecessary re-renders
+  const contextValue = useMemo<CommandMenuContextValue>(
+    () => ({
+      menuContext,
+      mounted: true, // Always true after initial render since provider only mounts on client
+      page,
+      pages,
+      pathname,
+      search,
+      selectedAgent,
+      setPages,
+      setSearch,
+      setSelectedAgent,
+      setTypeFilter,
+      setViewMode,
+      typeFilter,
+      viewMode,
+    }),
+    [
+      menuContext,
+      page,
+      pages,
+      pathname,
+      search,
+      selectedAgent,
+      setSearch,
+      setSelectedAgent,
+      setTypeFilter,
+      setViewMode,
+      typeFilter,
+      viewMode,
+    ],
   );
+
+  return <CommandMenuContext.Provider value={contextValue}>{children}</CommandMenuContext.Provider>;
 };
 
 export const useCommandMenuContext = () => {