@lobehub/lobehub 2.0.0-next.326 → 2.0.0-next.328

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

@@ -1,26 +1,23 @@
 import { ActionIcon, type ActionIconProps } from '@lobehub/ui';
 import { ChevronLeftIcon } from 'lucide-react';
 import { memo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 
 export const BACK_BUTTON_ID = 'lobe-back-button';
 
 const BackButton = memo<ActionIconProps & { to?: string }>(({ to = '/', onClick, ...rest }) => {
-  const navigate = useNavigate();
-
   return (
-    <ActionIcon
-      icon={ChevronLeftIcon}
-      id={BACK_BUTTON_ID}
-      onClick={(e) => {
-        navigate(to);
-        onClick?.(e);
-      }}
-      size={DESKTOP_HEADER_ICON_SIZE}
-      {...rest}
-    />
+    // @ts-expect-error
+    <Link onClick={onClick} to={to}>
+      <ActionIcon
+        icon={ChevronLeftIcon}
+        id={BACK_BUTTON_ID}
+        size={DESKTOP_HEADER_ICON_SIZE}
+        {...rest}
+      />
+    </Link>
   );
 });
 

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

@@ -13,6 +13,7 @@ import { systemStatusSelectors } from '@/store/global/selectors';
 import { isMacOS } from '@/utils/platform';
 
 import { useNavPanelSizeChangeHandler } from '../hooks/useNavPanel';
+import { BACK_BUTTON_ID } from './BackButton';
 
 const motionVariants = {
   animate: { opacity: 1, x: 0 },
@@ -76,6 +77,9 @@ const draggableStyles = createStaticStyles(({ css, cssVar }) => ({
         opacity,
         width 0.2s ${cssVar.motionEaseOut};
     }
+    #${BACK_BUTTON_ID} {
+      width: 24px !important;
+    }
 
     &:hover {
       #${TOGGLE_BUTTON_ID} {

package/src/hooks/useAutoScroll.ts

@@ -0,0 +1,117 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+interface UseAutoScrollOptions {
+  /**
+   * Dependencies that trigger auto-scroll when changed
+   */
+  deps?: unknown[];
+  /**
+   * Whether auto-scroll is enabled (e.g., only when streaming/executing)
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Distance threshold from bottom to consider "near bottom" (in pixels)
+   * @default 20
+   */
+  threshold?: number;
+}
+
+interface UseAutoScrollReturn<T extends HTMLElement> {
+  /**
+   * Callback to handle scroll events, attach to onScroll
+   */
+  handleScroll: () => void;
+  /**
+   * Ref to attach to the scrollable container
+   */
+  ref: RefObject<T | null>;
+  /**
+   * Reset the scroll lock state (e.g., when new content starts)
+   */
+  resetScrollLock: () => void;
+  /**
+   * Whether user has scrolled away from bottom (scroll lock active)
+   */
+  userHasScrolled: boolean;
+}
+
+/**
+ * Hook for auto-scrolling content with user scroll detection
+ *
+ * Features:
+ * - Auto-scrolls to bottom when dependencies change
+ * - Detects when user scrolls away from bottom and stops auto-scrolling
+ * - Provides reset function for when new content starts
+ * - Ignores scroll events triggered by auto-scroll itself
+ *
+ * @example
+ * ```tsx
+ * const { ref, handleScroll } = useAutoScroll<HTMLDivElement>({
+ *   deps: [content],
+ *   enabled: isStreaming,
+ * });
+ *
+ * return (
+ *   <ScrollShadow ref={ref} onScroll={handleScroll}>
+ *     {content}
+ *   </ScrollShadow>
+ * );
+ * ```
+ */
+export function useAutoScroll<T extends HTMLElement = HTMLDivElement>(
+  options: UseAutoScrollOptions = {},
+): UseAutoScrollReturn<T> {
+  const { deps = [], enabled = true, threshold = 20 } = options;
+
+  const ref = useRef<T | null>(null);
+  const [userHasScrolled, setUserHasScrolled] = useState(false);
+  const isAutoScrollingRef = useRef(false);
+
+  // Handle user scroll detection
+  const handleScroll = useCallback(() => {
+    // Ignore scroll events triggered by auto-scroll
+    if (isAutoScrollingRef.current) return;
+
+    const container = ref.current;
+    if (!container) return;
+
+    // Check if user scrolled away from bottom
+    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+    const isAtBottom = distanceToBottom < threshold;
+
+    // If user scrolled up, stop auto-scrolling
+    if (!isAtBottom) {
+      setUserHasScrolled(true);
+    }
+  }, [threshold]);
+
+  // Reset scroll lock state
+  const resetScrollLock = useCallback(() => {
+    setUserHasScrolled(false);
+  }, []);
+
+  // Auto scroll to bottom when deps change (unless user has scrolled or disabled)
+  useEffect(() => {
+    if (!enabled || userHasScrolled) return;
+
+    const container = ref.current;
+    if (!container) return;
+
+    isAutoScrollingRef.current = true;
+    requestAnimationFrame(() => {
+      container.scrollTop = container.scrollHeight;
+      // Reset the flag after scroll completes
+      requestAnimationFrame(() => {
+        isAutoScrollingRef.current = false;
+      });
+    });
+  }, [enabled, userHasScrolled, ...deps]);
+
+  return {
+    handleScroll,
+    ref,
+    resetScrollLock,
+    userHasScrolled,
+  };
+}

package/src/locales/default/chat.ts

@@ -230,6 +230,7 @@ export default {
   'noSelectedAgents': 'No members selected yet',
   'openInNewWindow': 'Open in New Window',
   'operation.execAgentRuntime': 'Preparing response',
+  'operation.execClientTask': 'Executing task',
   'operation.sendMessage': 'Sending message',
   'owner': 'Group owner',
   'pageCopilot.title': 'Page Agent',
@@ -354,13 +355,17 @@ export default {
   'tab.profile': 'Agent Profile',
   'tab.search': 'Search',
   'task.activity.calling': 'Calling Skill...',
+  'task.activity.clientExecuting': 'Executing locally...',
   'task.activity.generating': 'Generating response...',
   'task.activity.gotResult': 'Tool result received',
   'task.activity.toolCalling': 'Calling {{toolName}}...',
   'task.activity.toolResult': '{{toolName}} result received',
   'task.batchTasks': '{{count}} Batch Subtasks',
+  'task.instruction': 'Task Instruction',
+  'task.intermediateSteps': '{{count}} intermediate steps',
+  'task.metrics.duration': '(took {{duration}})',
   'task.metrics.stepsShort': 'steps',
-  'task.metrics.toolCallsShort': 'tool uses',
+  'task.metrics.toolCallsShort': 'skill uses',
   'task.status.cancelled': 'Task Cancelled',
   'task.status.failed': 'Task Failed',
   'task.status.initializing': 'Initializing task...',

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

@@ -1,5 +1,10 @@
 import { type AgentRuntimeContext } from '@lobechat/agent-runtime';
-import { type TaskCurrentActivity, type TaskStatusResult, ThreadStatus } from '@lobechat/types';
+import {
+  type TaskCurrentActivity,
+  type TaskStatusResult,
+  ThreadStatus,
+  ThreadType,
+} from '@lobechat/types';
 import { TRPCError } from '@trpc/server';
 import debug from 'debug';
 import pMap from 'p-map';
@@ -154,6 +159,49 @@ const ExecSubAgentTaskSchema = z.object({
   topicId: z.string(),
 });
 
+/**
+ * Schema for createClientTaskThread - create Thread for client-side task execution
+ * This is used when runInClient=true on desktop client
+ */
+const CreateClientTaskThreadSchema = z.object({
+  /** The Agent ID to execute the task */
+  agentId: z.string(),
+  /** The Group ID (optional, only for Group mode) */
+  groupId: z.string().optional(),
+  /** Initial user message content (task instruction) */
+  instruction: z.string(),
+  /** The parent message ID (task message) */
+  parentMessageId: z.string(),
+  /** Task title (shown in UI, used as thread title) */
+  title: z.string().optional(),
+  /** The Topic ID */
+  topicId: z.string(),
+});
+
+/**
+ * Schema for updateClientTaskThreadStatus - update Thread status after client-side execution
+ */
+const UpdateClientTaskThreadStatusSchema = z.object({
+  /** Completion reason */
+  completionReason: z.enum(['done', 'error', 'interrupted']),
+  /** Error message if failed */
+  error: z.string().optional(),
+  /** Thread metadata to update */
+  metadata: z
+    .object({
+      totalCost: z.number().optional(),
+      totalMessages: z.number().optional(),
+      totalSteps: z.number().optional(),
+      totalTokens: z.number().optional(),
+      totalToolCalls: z.number().optional(),
+    })
+    .optional(),
+  /** Result content (last assistant message) */
+  resultContent: z.string().optional(),
+  /** The Thread ID */
+  threadId: z.string(),
+});
+
 /**
  * Schema for interruptTask - interrupt a running task
  */
@@ -184,6 +232,100 @@ const aiAgentProcedure = authedProcedure.use(serverDatabase).use(async (opts) =>
 });
 
 export const aiAgentRouter = router({
+  /**
+   * Create Thread for client-side task execution
+   *
+   * This endpoint is called by desktop client when runInClient=true.
+   * It creates the Thread but does NOT execute the task - execution happens on client side.
+   */
+  createClientTaskThread: aiAgentProcedure
+    .input(CreateClientTaskThreadSchema)
+    .mutation(async ({ input, ctx }) => {
+      const { agentId, groupId, instruction, parentMessageId, title, topicId } = input;
+
+      log('createClientTaskThread: agentId=%s, groupId=%s', agentId, groupId);
+
+      try {
+        // 1. Create Thread for isolated task execution
+        const startedAt = new Date().toISOString();
+        const thread = await ctx.threadModel.create({
+          agentId,
+          groupId,
+          metadata: { clientMode: true, startedAt },
+          sourceMessageId: parentMessageId,
+          status: ThreadStatus.Processing,
+          title,
+          topicId,
+          type: ThreadType.Isolation,
+        });
+
+        if (!thread) {
+          throw new TRPCError({
+            code: 'INTERNAL_SERVER_ERROR',
+            message: 'Failed to create thread for task execution',
+          });
+        }
+
+        log('createClientTaskThread: created thread %s', thread.id);
+
+        // 2. Create initial user message (persisted to database)
+        const userMessage = await ctx.messageModel.create({
+          agentId,
+          content: instruction,
+          parentId: parentMessageId,
+          role: 'user',
+          threadId: thread.id,
+          topicId,
+        });
+
+        log('createClientTaskThread: created user message %s', userMessage.id);
+
+        // 3. Query thread messages and main chat messages in parallel
+        const [threadMessages, messages] = await Promise.all([
+          // Thread messages (messages within this thread)
+          ctx.messageModel.query({
+            agentId,
+            threadId: thread.id,
+            topicId,
+          }),
+          // Main chat messages (messages without threadId, includes updated taskDetail)
+          ctx.messageModel.query({
+            agentId,
+            topicId,
+            // No threadId - matchThread will filter for threadId IS NULL (main chat)
+          }),
+        ]);
+
+        log(
+          'createClientTaskThread: queried %d thread messages, %d main messages',
+          threadMessages.length,
+          messages.length,
+        );
+
+        // 4. Return Thread, userMessageId, threadMessages and messages
+        return {
+          messages,
+          startedAt,
+          success: true,
+          threadId: thread.id,
+          threadMessages,
+          userMessageId: userMessage.id,
+        };
+      } catch (error: any) {
+        log('createClientTaskThread failed: %O', error);
+
+        if (error instanceof TRPCError) {
+          throw error;
+        }
+
+        throw new TRPCError({
+          cause: error,
+          code: 'INTERNAL_SERVER_ERROR',
+          message: `Failed to create client task thread: ${error.message}`,
+        });
+      }
+    }),
+
   createOperation: aiAgentProcedure
     .input(CreateAgentOperationSchema)
     .mutation(async ({ input, ctx }) => {
@@ -846,4 +988,100 @@ export const aiAgentRouter = router({
       timestamp: new Date().toISOString(),
     };
   }),
+
+  /**
+   * Update Thread status after client-side task execution completes
+   *
+   * This endpoint is called by desktop client after task execution finishes.
+   * It updates the Thread status and metadata similar to server-side completion.
+   */
+  updateClientTaskThreadStatus: aiAgentProcedure
+    .input(UpdateClientTaskThreadStatusSchema)
+    .mutation(async ({ input, ctx }) => {
+      const { threadId, completionReason, error, resultContent, metadata } = input;
+
+      log('updateClientTaskThreadStatus: threadId=%s, reason=%s', threadId, completionReason);
+
+      try {
+        // Find thread
+        const thread = await ctx.threadModel.findById(threadId);
+        if (!thread) {
+          throw new TRPCError({
+            code: 'NOT_FOUND',
+            message: 'Thread not found',
+          });
+        }
+
+        const completedAt = new Date().toISOString();
+        const startedAt = thread.metadata?.startedAt;
+        const duration = startedAt ? Date.now() - new Date(startedAt).getTime() : undefined;
+
+        // Determine thread status based on completion reason
+        let status: ThreadStatus;
+        switch (completionReason) {
+          case 'done': {
+            status = ThreadStatus.Completed;
+            break;
+          }
+          case 'error': {
+            status = ThreadStatus.Failed;
+            break;
+          }
+          case 'interrupted': {
+            status = ThreadStatus.Cancel;
+            break;
+          }
+          default: {
+            status = ThreadStatus.Completed;
+          }
+        }
+
+        // Update Thread metadata and status
+        await ctx.threadModel.update(threadId, {
+          metadata: {
+            ...thread.metadata,
+            completedAt,
+            duration,
+            error: error || undefined,
+            totalCost: metadata?.totalCost,
+            totalMessages: metadata?.totalMessages,
+            totalSteps: metadata?.totalSteps,
+            totalTokens: metadata?.totalTokens,
+            totalToolCalls: metadata?.totalToolCalls,
+          },
+          status,
+        });
+
+        // Update task message (sourceMessageId) with result content if provided
+        if (resultContent && thread.sourceMessageId) {
+          await ctx.messageModel.update(thread.sourceMessageId, {
+            content: resultContent,
+          });
+          log(
+            'updateClientTaskThreadStatus: updated task message %s with result',
+            thread.sourceMessageId,
+          );
+        }
+
+        log('updateClientTaskThreadStatus: thread %s completed with status %s', threadId, status);
+
+        return {
+          status,
+          success: true,
+          threadId,
+        };
+      } catch (error: any) {
+        log('updateClientTaskThreadStatus failed: %O', error);
+
+        if (error instanceof TRPCError) {
+          throw error;
+        }
+
+        throw new TRPCError({
+          cause: error,
+          code: 'INTERNAL_SERVER_ERROR',
+          message: `Failed to update client task thread status: ${error.message}`,
+        });
+      }
+    }),
 });

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

@@ -21,6 +21,7 @@ const threadProcedure = authedProcedure.use(serverDatabase).use(async (opts) =>
 export const threadRouter = router({
   createThread: threadProcedure.input(createThreadSchema).mutation(async ({ input, ctx }) => {
     const thread = await ctx.threadModel.create({
+      metadata: input.metadata,
       parentThreadId: input.parentThreadId,
       sourceMessageId: input.sourceMessageId,
       title: input.title,
@@ -38,6 +39,7 @@ export const threadRouter = router({
     )
     .mutation(async ({ input, ctx }) => {
       const thread = await ctx.threadModel.create({
+        metadata: input.metadata,
         parentThreadId: input.parentThreadId,
         sourceMessageId: input.sourceMessageId,
         title: input.message.content.slice(0, 20),

package/src/server/services/message/__tests__/index.test.ts

@@ -293,6 +293,7 @@ describe('MessageService', () => {
           current: 0,
           groupId: undefined,
           pageSize: 9999,
+          threadId: undefined,
           topicId: undefined,
         },
         expect.objectContaining({
@@ -327,6 +328,42 @@ describe('MessageService', () => {
           current: 0,
           groupId: 'group-1',
           pageSize: 9999,
+          threadId: undefined,
+          topicId: 'topic-1',
+        },
+        expect.objectContaining({
+          postProcessUrl: expect.any(Function),
+        }),
+      );
+      expect(result.id).toBe('msg-1');
+      expect(result.messages).toEqual(mockMessages);
+    });
+
+    it('should create message with threadId and query thread messages', async () => {
+      const params = {
+        agentId: 'agent-1',
+        content: 'Hello in thread',
+        groupId: 'group-1',
+        role: 'user' as const,
+        threadId: 'thread-1',
+        topicId: 'topic-1',
+      };
+      const createdMessage = { id: 'msg-1', ...params };
+      const mockMessages = [createdMessage];
+
+      vi.mocked(mockMessageModel.create).mockResolvedValue(createdMessage as any);
+      vi.mocked(mockMessageModel.query).mockResolvedValue(mockMessages as any);
+
+      const result = await messageService.createMessage(params as any);
+
+      expect(mockMessageModel.create).toHaveBeenCalledWith(params);
+      expect(mockMessageModel.query).toHaveBeenCalledWith(
+        {
+          agentId: 'agent-1',
+          current: 0,
+          groupId: 'group-1',
+          pageSize: 9999,
+          threadId: 'thread-1',
           topicId: 'topic-1',
         },
         expect.objectContaining({

package/src/server/services/message/index.ts

@@ -1,5 +1,9 @@
 import { type LobeChatDatabase } from '@lobechat/database';
-import { type CreateMessageParams, type UIChatMessage, type UpdateMessageParams } from '@lobechat/types';
+import {
+  type CreateMessageParams,
+  type UIChatMessage,
+  type UpdateMessageParams,
+} from '@lobechat/types';
 
 import { MessageModel } from '@/database/models/message';
 
@@ -95,6 +99,7 @@ export class MessageService {
         current: 0,
         groupId: params.groupId,
         pageSize: 9999,
+        threadId: params.threadId,
         topicId: params.topicId,
       },
       {

package/src/services/aiAgent.ts

@@ -40,6 +40,38 @@ export interface InterruptTaskParams {
   threadId?: string;
 }
 
+/**
+ * Parameters for createClientTaskThread
+ * Creates a Thread for client-side task execution (desktop only)
+ */
+export interface CreateClientTaskThreadParams {
+  agentId: string;
+  groupId?: string;
+  /** Initial user message content (task instruction) */
+  instruction: string;
+  parentMessageId: string;
+  title?: string;
+  topicId: string;
+}
+
+/**
+ * Parameters for updateClientTaskThreadStatus
+ * Updates Thread status after client-side execution completes
+ */
+export interface UpdateClientTaskThreadStatusParams {
+  completionReason: 'done' | 'error' | 'interrupted';
+  error?: string;
+  metadata?: {
+    totalCost?: number;
+    totalMessages?: number;
+    totalSteps?: number;
+    totalTokens?: number;
+    totalToolCalls?: number;
+  };
+  resultContent?: string;
+  threadId: string;
+}
+
 class AiAgentService {
   /**
    * Execute a single Agent task
@@ -72,6 +104,25 @@ class AiAgentService {
   async interruptTask(params: InterruptTaskParams) {
     return await lambdaClient.aiAgent.interruptTask.mutate(params);
   }
+
+  /**
+   * Create Thread for client-side task execution (desktop only)
+   *
+   * This method is called when runInClient=true on desktop client.
+   * It creates the Thread but does NOT execute the task - execution happens locally.
+   */
+  async createClientTaskThread(params: CreateClientTaskThreadParams) {
+    return await lambdaClient.aiAgent.createClientTaskThread.mutate(params);
+  }
+
+  /**
+   * Update Thread status after client-side task execution completes
+   *
+   * This method is called by desktop client after task execution finishes.
+   */
+  async updateClientTaskThreadStatus(params: UpdateClientTaskThreadStatusParams) {
+    return await lambdaClient.aiAgent.updateClientTaskThreadStatus.mutate(params);
+  }
 }
 
 export const aiAgentService = new AiAgentService();