@lobehub/lobehub 2.0.0-next.280 → 2.0.0-next.281

package/src/features/ToolTag/index.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { KLAVIS_SERVER_TYPES, type KlavisServerType } from '@lobechat/const';
+import { Avatar, Icon, Tag } from '@lobehub/ui';
+import { createStaticStyles, cssVar } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo, useMemo } from 'react';
+
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import { useIsDark } from '@/hooks/useIsDark';
+import { useDiscoverStore } from '@/store/discover';
+import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { useToolStore } from '@/store/tool';
+import {
+  builtinToolSelectors,
+  klavisStoreSelectors,
+  pluginSelectors,
+} from '@/store/tool/selectors';
+
+/**
+ * Klavis server icon component
+ */
+const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label }) => {
+  if (typeof icon === 'string') {
+    return <img alt={label} height={16} src={icon} style={{ flexShrink: 0 }} width={16} />;
+  }
+
+  return <Icon fill={cssVar.colorText} icon={icon} size={16} />;
+});
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  compact: css`
+    height: auto !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+  `,
+  tag: css`
+    height: 24px !important;
+    border-radius: ${cssVar.borderRadiusSM} !important;
+  `,
+}));
+
+export interface ToolTagProps {
+  /**
+   * The tool identifier to display
+   */
+  identifier: string;
+  /**
+   * Variant style of the tag
+   * - 'default': normal tag with background and border
+   * - 'compact': no padding, no background, no border (text only with icon)
+   * @default 'default'
+   */
+  variant?: 'compact' | 'default';
+}
+
+/**
+ * A readonly tag component that displays tool information based on identifier.
+ * Unlike PluginTag, this component is not closable and is designed for display-only purposes.
+ */
+const ToolTag = memo<ToolTagProps>(({ identifier, variant = 'default' }) => {
+  const isDarkMode = useIsDark();
+  const isCompact = variant === 'compact';
+
+  // Get local plugin lists
+  const builtinList = useToolStore(builtinToolSelectors.metaList, isEqual);
+  const installedPluginList = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
+
+  // Klavis related state
+  const allKlavisServers = useToolStore(klavisStoreSelectors.getServers, isEqual);
+  const isKlavisEnabledInEnv = useServerConfigStore(serverConfigSelectors.enableKlavis);
+
+  // Check if plugin is installed
+  const isInstalled = useToolStore(pluginSelectors.isPluginInstalled(identifier));
+
+  // Try to find in local lists first (including Klavis)
+  const localMeta = useMemo(() => {
+    // Check if it's a Klavis server type
+    if (isKlavisEnabledInEnv) {
+      const klavisType = KLAVIS_SERVER_TYPES.find((type) => type.identifier === identifier);
+      if (klavisType) {
+        const connectedServer = allKlavisServers.find((s) => s.identifier === identifier);
+        return {
+          icon: klavisType.icon,
+          isInstalled: !!connectedServer,
+          label: klavisType.label,
+          title: klavisType.label,
+          type: 'klavis' as const,
+        };
+      }
+    }
+
+    const builtinMeta = builtinList.find((p) => p.identifier === identifier);
+    if (builtinMeta) {
+      return {
+        avatar: builtinMeta.meta.avatar,
+        isInstalled: true,
+        title: builtinMeta.meta.title,
+        type: 'builtin' as const,
+      };
+    }
+
+    const installedMeta = installedPluginList.find((p) => p.identifier === identifier);
+    if (installedMeta) {
+      return {
+        avatar: installedMeta.avatar,
+        isInstalled: true,
+        title: installedMeta.title,
+        type: 'plugin' as const,
+      };
+    }
+
+    return null;
+  }, [identifier, builtinList, installedPluginList, isKlavisEnabledInEnv, allKlavisServers]);
+
+  // Fetch from remote if not found locally
+  const usePluginDetail = useDiscoverStore((s) => s.usePluginDetail);
+  const { data: remoteData, isLoading } = usePluginDetail({
+    identifier: !localMeta && !isInstalled ? identifier : undefined,
+    withManifest: false,
+  });
+
+  // Determine final metadata
+  const meta = localMeta || {
+    avatar: remoteData?.avatar,
+    isInstalled: false,
+    title: remoteData?.title || identifier,
+    type: 'plugin' as const,
+  };
+
+  const displayTitle = isLoading ? 'Loading...' : meta.title;
+
+  // Render icon based on type
+  const renderIcon = () => {
+    // Klavis type has icon property
+    if (meta.type === 'klavis' && 'icon' in meta && 'label' in meta) {
+      return <KlavisIcon icon={meta.icon} label={meta.label} />;
+    }
+
+    // Builtin type has avatar
+    if (meta.type === 'builtin' && 'avatar' in meta && meta.avatar) {
+      return <Avatar avatar={meta.avatar} shape={'square'} size={16} style={{ flexShrink: 0 }} />;
+    }
+
+    // Plugin type
+    if ('avatar' in meta) {
+      return <PluginAvatar avatar={meta.avatar} size={16} />;
+    }
+
+    return null;
+  };
+
+  return (
+    <Tag
+      className={isCompact ? styles.compact : styles.tag}
+      icon={renderIcon()}
+      variant={isCompact ? 'borderless' : isDarkMode ? 'filled' : 'outlined'}
+    >
+      {displayTitle}
+    </Tag>
+  );
+});
+
+ToolTag.displayName = 'ToolTag';
+
+export default ToolTag;

package/src/server/routers/lambda/topic.ts

@@ -3,6 +3,7 @@ import {
   type RecentTopicGroup,
   type RecentTopicGroupMember,
 } from '@lobechat/types';
+import { cleanObject } from '@lobechat/utils';
 import { eq, inArray } from 'drizzle-orm';
 import { after } from 'next/server';
 import { z } from 'zod';
@@ -410,8 +411,14 @@ export const topicRouter = router({
         const agentId = topicAgentIdMap.get(topic.id);
         const agentInfo = agentId ? agentInfoMap.get(agentId) : null;
 
+        // Clean agent info - if avatar/title are all null, return null
+        const cleanedAgent = agentInfo ? cleanObject(agentInfo) : null;
+        // Only return agent if it has meaningful display info (avatar or title)
+        const validAgent =
+          cleanedAgent && (cleanedAgent.avatar || cleanedAgent.title) ? cleanedAgent : null;
+
         return {
-          agent: agentInfo ?? null,
+          agent: validAgent,
           group: null,
           id: topic.id,
           title: topic.title,

package/src/services/chat/mecha/contextEngineering.test.ts

@@ -448,7 +448,7 @@ describe('contextEngineering', () => {
       ];
 
       // Mock topic memories and global identities separately
-      vi.spyOn(memoryManager, 'resolveTopicMemories').mockResolvedValue({
+      vi.spyOn(memoryManager, 'resolveTopicMemories').mockReturnValue({
         contexts: [
           {
             accessedAt: new Date('2024-01-01T00:00:00.000Z'),

package/src/services/chat/mecha/contextEngineering.ts

@@ -252,12 +252,11 @@ export const contextEngineering = async ({
     .map((kb) => ({ description: kb.description, id: kb.id, name: kb.name }));
 
   // Resolve user memories: topic memories and global identities are independent layers
+  // Both functions now read from cache only (no network requests) to avoid blocking sendMessage
   let userMemoryData;
   if (enableUserMemories) {
-    const [topicMemories, globalIdentities] = await Promise.all([
-      resolveTopicMemories(),
-      Promise.resolve(resolveGlobalIdentities()),
-    ]);
+    const topicMemories = resolveTopicMemories();
+    const globalIdentities = resolveGlobalIdentities();
     userMemoryData = combineUserMemoryData(topicMemories, globalIdentities);
   }
 

package/src/services/chat/mecha/memoryManager.ts

@@ -1,10 +1,8 @@
 import type { UserMemoryData, UserMemoryIdentityItem } from '@lobechat/context-engine';
 import type { RetrieveMemoryResult } from '@lobechat/types';
 
-import { mutate } from '@/libs/swr';
-import { userMemoryService } from '@/services/userMemory';
 import { getChatStoreState } from '@/store/chat';
-import { getUserMemoryStoreState, useUserMemoryStore } from '@/store/userMemory';
+import { getUserMemoryStoreState } from '@/store/userMemory';
 import { agentMemorySelectors, identitySelectors } from '@/store/userMemory/selectors';
 
 const EMPTY_MEMORIES: RetrieveMemoryResult = {
@@ -39,17 +37,13 @@ export interface TopicMemoryResolverContext {
 }
 
 /**
- * Resolves topic-based memories (contexts, experiences, preferences)
+ * Resolves topic-based memories (contexts, experiences, preferences) from cache only.
  *
- * This function handles:
- * 1. Getting the topic ID from context or active topic
- * 2. Checking if memories are already cached for the topic
- * 3. Fetching memories from the service if not cached
- * 4. Caching the fetched memories by topic ID
+ * This function only reads from cache and does NOT trigger network requests.
+ * Memory data is pre-loaded by SWR in ChatList via useFetchTopicMemories hook.
+ * This ensures sendMessage is not blocked by memory retrieval network calls.
  */
-export const resolveTopicMemories = async (
-  ctx?: TopicMemoryResolverContext,
-): Promise<RetrieveMemoryResult> => {
+export const resolveTopicMemories = (ctx?: TopicMemoryResolverContext): RetrieveMemoryResult => {
   // Get topic ID from context or active topic
   const topicId = ctx?.topicId ?? getChatStoreState().activeTopicId;
 
@@ -60,34 +54,11 @@ export const resolveTopicMemories = async (
 
   const userMemoryStoreState = getUserMemoryStoreState();
 
-  // Check if already have cached memories for this topic
+  // Only read from cache, do not trigger network request
+  // Memory data is pre-loaded by SWR in ChatList
   const cachedMemories = agentMemorySelectors.topicMemories(topicId)(userMemoryStoreState);
 
-  if (cachedMemories) {
-    return cachedMemories;
-  }
-
-  // Fetch memories for this topic
-  try {
-    const result = await userMemoryService.retrieveMemoryForTopic(topicId);
-    const memories = result ?? EMPTY_MEMORIES;
-
-    // Cache the fetched memories by topic ID
-    useUserMemoryStore.setState((state) => ({
-      topicMemoriesMap: {
-        ...state.topicMemoriesMap,
-        [topicId]: memories,
-      },
-    }));
-
-    // Also trigger SWR mutate to keep in sync
-    await mutate(['useFetchMemoriesForTopic', topicId]);
-
-    return memories;
-  } catch (error) {
-    console.error('Failed to retrieve memories for topic:', error);
-    return EMPTY_MEMORIES;
-  }
+  return cachedMemories ?? EMPTY_MEMORIES;
 };
 
 /**

package/src/store/agentGroup/initialState.ts

@@ -4,7 +4,7 @@ import type { ParsedQuery } from 'query-string';
 import type { ChatGroupItem } from '@/database/schemas/chatGroup';
 
 export interface QueryRouter {
-  push: (url: string, options?: { query?: ParsedQuery }) => void;
+  push: (url: string, options?: { query?: ParsedQuery; replace?: boolean }) => void;
 }
 
 export interface ChatGroupState {

package/src/store/agentGroup/slices/lifecycle.ts

@@ -14,10 +14,16 @@ export interface ChatGroupLifecycleAction {
     silent?: boolean,
   ) => Promise<string>;
   /**
+   * @deprecated Use switchTopic(undefined) instead
    * Switch to a new topic in the group
    * Clears activeTopicId and navigates to group root
    */
   switchToNewTopic: () => void;
+  /**
+   * Switch to a topic in the group with proper route handling
+   * @param topicId - Topic ID to switch to, or undefined/null for new topic
+   */
+  switchTopic: (topicId?: string | null) => void;
 }
 
 export const chatGroupLifecycleSlice: StateCreator<
@@ -57,13 +63,20 @@ export const chatGroupLifecycleSlice: StateCreator<
   },
 
   switchToNewTopic: () => {
+    get().switchTopic(undefined);
+  },
+
+  switchTopic: (topicId) => {
     const { activeGroupId, router } = get();
     if (!activeGroupId || !router) return;
 
-    useChatStore.setState({ activeTopicId: undefined });
+    // Update chat store's activeTopicId
+    useChatStore.getState().switchTopic(topicId ?? undefined);
 
+    // Navigate with replace to avoid stale query params
     router.push(urlJoin('/group', activeGroupId), {
-      query: { bt: null, tab: null, thread: null, topic: null },
+      query: { topic: topicId ?? null },
+      replace: true,
     });
   },
 });

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/hooks/useTopicNavigation.ts

@@ -1,49 +0,0 @@
-import { usePathname } from 'next/navigation';
-import { useCallback } from 'react';
-import urlJoin from 'url-join';
-
-import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { useAgentGroupStore } from '@/store/agentGroup';
-import { useChatStore } from '@/store/chat';
-import { useGlobalStore } from '@/store/global';
-
-/**
- * Hook to handle topic navigation with automatic route detection
- * If in agent sub-route (e.g., /agent/:aid/profile), navigate back to chat first
- */
-export const useTopicNavigation = () => {
-  const pathname = usePathname();
-  const activeGroupId = useAgentGroupStore((s) => s.activeGroupId);
-  const router = useQueryRoute();
-  const toggleConfig = useGlobalStore((s) => s.toggleMobileTopic);
-  const switchTopic = useChatStore((s) => s.switchTopic);
-
-  const isInAgentSubRoute = useCallback(() => {
-    if (!activeGroupId) return false;
-    const agentBasePath = `/group/${activeGroupId}`;
-    // If pathname has more segments after /agent/:aid, it's a sub-route
-    return (
-      pathname.startsWith(agentBasePath) &&
-      pathname !== agentBasePath &&
-      pathname !== `${agentBasePath}/`
-    );
-  }, [pathname, activeGroupId]);
-
-  const navigateToTopic = useCallback(
-    (topicId?: string) => {
-      // If in agent sub-route, navigate back to agent chat first
-      if (isInAgentSubRoute() && activeGroupId) {
-        router.push(urlJoin('/group', activeGroupId as string));
-      }
-
-      switchTopic(topicId);
-      toggleConfig(false);
-    },
-    [activeGroupId, router, switchTopic, toggleConfig, isInAgentSubRoute],
-  );
-
-  return {
-    isInAgentSubRoute: isInAgentSubRoute(),
-    navigateToTopic,
-  };
-};