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

package/src/features/EditorModal/EditorCanvas.tsx

@@ -0,0 +1,62 @@
+import {
+  IEditor,
+  ReactCodePlugin,
+  ReactCodemirrorPlugin,
+  ReactHRPlugin,
+  ReactLinkPlugin,
+  ReactListPlugin,
+  ReactMathPlugin,
+  ReactTablePlugin,
+} from '@lobehub/editor';
+import { Editor } from '@lobehub/editor/react';
+import { Flexbox } from '@lobehub/ui';
+import { FC } from 'react';
+
+import TypoBar from './Typobar';
+
+interface EditorCanvasProps {
+  defaultValue?: string;
+  editor?: IEditor;
+}
+
+const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, editor }) => {
+  return (
+    <>
+      <TypoBar editor={editor} />
+      <Flexbox
+        padding={16}
+        style={{ cursor: 'text', maxHeight: '80vh', minHeight: '50vh', overflowY: 'auto' }}
+      >
+        <Editor
+          autoFocus
+          content={''}
+          editor={editor}
+          onInit={(editor) => {
+            if (!editor || !defaultValue) return;
+            try {
+              editor?.setDocument('markdown', defaultValue);
+            } catch (e) {
+              console.error('setDocument error:', e);
+            }
+          }}
+          plugins={[
+            ReactListPlugin,
+            ReactCodePlugin,
+            ReactCodemirrorPlugin,
+            ReactHRPlugin,
+            ReactLinkPlugin,
+            ReactTablePlugin,
+            ReactMathPlugin,
+          ]}
+          style={{
+            paddingBottom: 120,
+          }}
+          type={'text'}
+          variant={'chat'}
+        />
+      </Flexbox>
+    </>
+  );
+};
+
+export default EditorCanvas;

package/src/features/EditorModal/TextArea.tsx

@@ -0,0 +1,30 @@
+import { TextArea } from '@lobehub/ui';
+import { FC } from 'react';
+
+interface EditorCanvasProps {
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  value?: string;
+}
+
+const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, value, onChange }) => {
+  return (
+    <TextArea
+      defaultValue={defaultValue}
+      onChange={(e) => {
+        onChange?.(e.target.value);
+      }}
+      style={{
+        cursor: 'text',
+        maxHeight: '80vh',
+        minHeight: '50vh',
+        overflowY: 'auto',
+        padding: 16,
+      }}
+      value={value}
+      variant={'borderless'}
+    />
+  );
+};
+
+export default EditorCanvas;

package/src/features/EditorModal/Typobar.tsx

@@ -0,0 +1,139 @@
+import { HotkeyEnum, type IEditor, getHotkeyById } from '@lobehub/editor';
+import { useEditorState } from '@lobehub/editor/react';
+import {
+  ChatInputActionBar,
+  ChatInputActions,
+  type ChatInputActionsProps,
+} from '@lobehub/editor/react';
+import { cssVar } from 'antd-style';
+import {
+  BoldIcon,
+  CodeXmlIcon,
+  ItalicIcon,
+  ListIcon,
+  ListOrderedIcon,
+  ListTodoIcon,
+  MessageSquareQuote,
+  SigmaIcon,
+  SquareDashedBottomCodeIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+} from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const TypoBar = memo<{ editor?: IEditor }>(({ editor }) => {
+  const { t } = useTranslation('editor');
+  const editorState = useEditorState(editor);
+
+  const items: ChatInputActionsProps['items'] = useMemo(
+    () =>
+      [
+        {
+          active: editorState.isBold,
+          icon: BoldIcon,
+          key: 'bold',
+          label: t('typobar.bold'),
+          onClick: editorState.bold,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Bold).keys },
+        },
+        {
+          active: editorState.isItalic,
+          icon: ItalicIcon,
+          key: 'italic',
+          label: t('typobar.italic'),
+          onClick: editorState.italic,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Italic).keys },
+        },
+        {
+          active: editorState.isUnderline,
+          icon: UnderlineIcon,
+          key: 'underline',
+          label: t('typobar.underline'),
+          onClick: editorState.underline,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Underline).keys },
+        },
+        {
+          active: editorState.isStrikethrough,
+          icon: StrikethroughIcon,
+          key: 'strikethrough',
+          label: t('typobar.strikethrough'),
+          onClick: editorState.strikethrough,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Strikethrough).keys },
+        },
+        {
+          type: 'divider',
+        },
+
+        {
+          icon: ListIcon,
+          key: 'bulletList',
+          label: t('typobar.bulletList'),
+          onClick: editorState.bulletList,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.BulletList).keys },
+        },
+        {
+          icon: ListOrderedIcon,
+          key: 'numberlist',
+          label: t('typobar.numberList'),
+          onClick: editorState.numberList,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.NumberList).keys },
+        },
+        {
+          icon: ListTodoIcon,
+          key: 'tasklist',
+          label: t('typobar.taskList'),
+          onClick: editorState.checkList,
+        },
+        {
+          type: 'divider',
+        },
+        {
+          active: editorState.isBlockquote,
+          icon: MessageSquareQuote,
+          key: 'blockquote',
+          label: t('typobar.blockquote'),
+          onClick: editorState.blockquote,
+        },
+        {
+          type: 'divider',
+        },
+        {
+          icon: SigmaIcon,
+          key: 'math',
+          label: t('typobar.tex'),
+          onClick: editorState.insertMath,
+        },
+        {
+          active: editorState.isCode,
+          icon: CodeXmlIcon,
+          key: 'code',
+          label: t('typobar.code'),
+          onClick: editorState.code,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.CodeInline).keys },
+        },
+        {
+          icon: SquareDashedBottomCodeIcon,
+          key: 'codeblock',
+          label: t('typobar.codeblock'),
+          onClick: editorState.codeblock,
+        },
+      ].filter(Boolean) as ChatInputActionsProps['items'],
+    [editorState],
+  );
+
+  return (
+    <ChatInputActionBar
+      left={<ChatInputActions items={items} />}
+      style={{
+        background: cssVar.colorFillQuaternary,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+      }}
+    />
+  );
+});
+
+TypoBar.displayName = 'TypoBar';
+
+export default TypoBar;

package/src/features/EditorModal/index.tsx

@@ -3,7 +3,11 @@ import { Modal, ModalProps, createRawModal } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { EditorCanvas } from '@/features/EditorCanvas';
+import { useUserStore } from '@/store/user';
+import { labPreferSelectors } from '@/store/user/selectors';
+
+import EditorCanvas from './EditorCanvas';
+import TextareCanvas from './TextArea';
 
 interface EditorModalProps extends ModalProps {
   onConfirm?: (value: string) => Promise<void>;
@@ -13,7 +17,8 @@ interface EditorModalProps extends ModalProps {
 export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const { t } = useTranslation('common');
-
+  const [v, setV] = useState(value);
+  const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
   const editor = useEditor();
 
   return (
@@ -25,12 +30,13 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       okText={t('ok')}
       onOk={async () => {
         setConfirmLoading(true);
-        try {
-          await onConfirm?.((editor?.getDocument('markdown') as unknown as string) || '');
-        } catch (e) {
-          console.error('EditorModal onOk error:', e);
-          onConfirm?.(value || '');
+        let finalValue;
+        if (enableRichRender) {
+          finalValue = editor?.getDocument('markdown') as unknown as string;
+        } else {
+          finalValue = v;
         }
+        await onConfirm?.(finalValue || '');
         setConfirmLoading(false);
       }}
       styles={{
@@ -43,7 +49,11 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       width={'min(90vw, 920px)'}
       {...rest}
     >
-      <EditorCanvas editor={editor} editorData={{ content: value }} />
+      {enableRichRender ? (
+        <EditorCanvas defaultValue={value} editor={editor} />
+      ) : (
+        <TextareCanvas defaultValue={value} onChange={(v) => setV(v)} value={v} />
+      )}
     </Modal>
   );
 });

package/src/features/NavPanel/components/EmptyNavItem.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Block, Center, Text } from '@lobehub/ui';
+import { Block, Center, Icon, Text } from '@lobehub/ui';
 import { PlusIcon } from 'lucide-react';
 import { memo } from 'react';
 
@@ -22,7 +22,7 @@ const EmptyNavItem = memo<EmptyStatusProps>(({ title, onClick, className }) => {
       variant={'borderless'}
     >
       <Center flex={'none'} height={28} width={28}>
-        <ActionIcon icon={PlusIcon} size={'small'} />
+        <Icon icon={PlusIcon} size={'small'} />
       </Center>
       <Text align={'center'} type={'secondary'}>
         {title}

package/src/features/NavPanel/components/NavItem.tsx

@@ -12,9 +12,10 @@ import {
   Text,
 } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import { Loader2Icon } from 'lucide-react';
 import { type ReactNode, memo } from 'react';
 
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+
 const ACTION_CLASS_NAME = 'nav-item-actions';
 
 const styles = createStaticStyles(({ css }) => ({
@@ -50,6 +51,10 @@ export interface NavItemProps extends Omit<BlockProps, 'children' | 'title'> {
   contextMenuItems?: GenericItemType[] | (() => GenericItemType[]);
   disabled?: boolean;
   extra?: ReactNode;
+  /**
+   * Optional href for cmd+click to open in new tab
+   */
+  href?: string;
   icon?: IconProps['icon'];
   loading?: boolean;
   title: ReactNode;
@@ -61,6 +66,7 @@ const NavItem = memo<NavItemProps>(
     actions,
     contextMenuItems,
     active,
+    href,
     icon,
     title,
     onClick,
@@ -72,7 +78,15 @@ const NavItem = memo<NavItemProps>(
     const iconColor = active ? cssVar.colorText : cssVar.colorTextDescription;
     const textColor = active ? cssVar.colorText : cssVar.colorTextSecondary;
     const variant = active ? 'filled' : 'borderless';
-    const iconComponent = loading ? Loader2Icon : icon;
+
+    // Link props for cmd+click support
+    const linkProps = href
+      ? {
+          as: 'a' as const,
+          href,
+          style: { color: 'inherit', textDecoration: 'none' },
+        }
+      : {};
 
     const Content = (
       <Block
@@ -84,15 +98,25 @@ const NavItem = memo<NavItemProps>(
         horizontal
         onClick={(e) => {
           if (disabled || loading) return;
+          // Prevent default link behavior for normal clicks (let onClick handle it)
+          // But allow cmd+click to open in new tab
+          if (href && !e.metaKey && !e.ctrlKey) {
+            e.preventDefault();
+          }
           onClick?.(e);
         }}
         paddingInline={4}
         variant={variant}
+        {...linkProps}
         {...rest}
       >
         {icon && (
           <Center flex={'none'} height={28} width={28}>
-            <Icon color={iconColor} icon={iconComponent} size={18} spin={loading} />
+            {loading ? (
+              <NeuralNetworkLoading size={18} />
+            ) : (
+              <Icon color={iconColor} icon={icon} size={18} />
+            )}
           </Center>
         )}
 

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 {