@lobehub/lobehub 2.0.0-next.327 → 2.0.0-next.329

package/packages/database/src/models/thread.ts

@@ -32,7 +32,7 @@ export class ThreadModel {
     // @ts-ignore
     const [result] = await this.db
       .insert(threads)
-      .values({ ...params, status: ThreadStatus.Active, userId: this.userId })
+      .values({ status: ThreadStatus.Active, ...params, userId: this.userId })
       .onConflictDoNothing()
       .returning();
 

package/packages/types/src/message/ui/chat.ts

@@ -64,6 +64,8 @@ interface UIMessageBranch {
  * Retrieved from the associated Thread via sourceMessageId
  */
 export interface TaskDetail {
+  /** Whether this task runs in client mode (local execution) */
+  clientMode?: boolean;
   /** Task completion time (ISO string) */
   completedAt?: string;
   /** Execution duration in milliseconds */

package/packages/types/src/topic/thread.ts

@@ -23,6 +23,8 @@ export enum ThreadStatus {
  * Metadata for Thread, used for agent task execution
  */
 export interface ThreadMetadata {
+  /** Whether this thread runs in client mode (local execution) */
+  clientMode?: boolean;
   /** Task completion time */
   completedAt?: string;
   /** Execution duration in milliseconds */
@@ -68,16 +70,34 @@ export interface CreateThreadParams {
   agentId?: string;
   /** Group ID for group chat context */
   groupId?: string;
+  /** Initial metadata for the thread */
+  metadata?: ThreadMetadata;
   parentThreadId?: string;
   sourceMessageId?: string;
+  /** Initial status (defaults to Active) */
+  status?: ThreadStatus;
   title?: string;
   topicId: string;
   type: IThreadType;
 }
 
+export const threadMetadataSchema = z.object({
+  clientMode: z.boolean().optional(),
+  completedAt: z.string().optional(),
+  duration: z.number().optional(),
+  error: z.any().optional(),
+  operationId: z.string().optional(),
+  startedAt: z.string().optional(),
+  totalCost: z.number().optional(),
+  totalMessages: z.number().optional(),
+  totalTokens: z.number().optional(),
+  totalToolCalls: z.number().optional(),
+});
+
 export const createThreadSchema = z.object({
   agentId: z.string().optional(),
   groupId: z.string().optional(),
+  metadata: threadMetadataSchema.optional(),
   parentThreadId: z.string().optional(),
   sourceMessageId: z.string().optional(),
   title: z.string().optional(),

package/scripts/prebuild.mts

@@ -51,10 +51,10 @@ const printEnvInfo = () => {
 
   // Auth-related env vars
   console.log('\n  Auth Environment Variables:');
-  console.log(`    NEXT_PUBLIC_AUTH_URL: ${process.env.NEXT_PUBLIC_AUTH_URL ?? '(not set)'}`);
-  console.log(`    NEXTAUTH_URL: ${process.env.NEXTAUTH_URL ?? '(not set)'}`);
   console.log(`    APP_URL: ${process.env.APP_URL ?? '(not set)'}`);
   console.log(`    VERCEL_URL: ${process.env.VERCEL_URL ?? '(not set)'}`);
+  console.log(`    VERCEL_BRANCH_URL: ${process.env.VERCEL_BRANCH_URL ?? '(not set)'}`);
+  console.log(`    VERCEL_PROJECT_PRODUCTION_URL: ${process.env.VERCEL_PROJECT_PRODUCTION_URL ?? '(not set)'}`);
   console.log(`    AUTH_EMAIL_VERIFICATION: ${process.env.AUTH_EMAIL_VERIFICATION ?? '(not set)'}`);
   console.log(`    ENABLE_MAGIC_LINK: ${process.env.ENABLE_MAGIC_LINK ?? '(not set)'}`);
   console.log(`    AUTH_SECRET: ${process.env.AUTH_SECRET ? '✓ set' : '✗ not set'}`);

package/src/app/[variants]/(main)/community/(list)/agent/features/List/Item.tsx

@@ -139,6 +139,7 @@ const AssistantItem = memo<DiscoverAssistantItem>(
           horizontal
           justify={'space-between'}
           padding={16}
+          style={{ paddingRight: isGroupAgent ? 80 : 16 }}
           width={'100%'}
         >
           <Flexbox

package/src/components/StreamingMarkdown/index.tsx

@@ -2,7 +2,9 @@
 
 import { Markdown, ScrollShadow } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { type RefObject, memo, useEffect } from 'react';
+
+import { useAutoScroll } from '@/hooks/useAutoScroll';
 
 const styles = createStaticStyles(({ css }) => ({
   container: css`
@@ -19,51 +21,16 @@ interface StreamingMarkdownProps {
 }
 
 const StreamingMarkdown = memo<StreamingMarkdownProps>(({ children, maxHeight = 400 }) => {
-  const containerRef = useRef<HTMLDivElement>(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 = containerRef.current;
-    if (!container) return;
-
-    // Check if user scrolled away from bottom
-    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-    const isAtBottom = distanceToBottom < 20;
-
-    // If user scrolled up, stop auto-scrolling
-    if (!isAtBottom) {
-      setUserHasScrolled(true);
-    }
-  }, []);
-
-  // Auto scroll to bottom when content changes (unless user has scrolled)
-  useEffect(() => {
-    if (userHasScrolled) return;
-
-    const container = containerRef.current;
-    if (!container) return;
-
-    isAutoScrollingRef.current = true;
-    requestAnimationFrame(() => {
-      container.scrollTop = container.scrollHeight;
-      // Reset the flag after scroll completes
-      requestAnimationFrame(() => {
-        isAutoScrollingRef.current = false;
-      });
-    });
-  }, [children, userHasScrolled]);
+  const { ref, handleScroll, resetScrollLock } = useAutoScroll<HTMLDivElement>({
+    deps: [children],
+  });
 
-  // Reset userHasScrolled when content is cleared (new stream starts)
+  // Reset scroll lock when content is cleared (new stream starts)
   useEffect(() => {
     if (!children) {
-      setUserHasScrolled(false);
+      resetScrollLock();
     }
-  }, [children]);
+  }, [children, resetScrollLock]);
 
   if (!children) return null;
 
@@ -72,7 +39,7 @@ const StreamingMarkdown = memo<StreamingMarkdownProps>(({ children, maxHeight =
       className={styles.container}
       offset={12}
       onScroll={handleScroll}
-      ref={containerRef}
+      ref={ref as RefObject<HTMLDivElement>}
       size={12}
       style={{ maxHeight }}
     >

package/src/envs/__tests__/app.test.ts

@@ -82,3 +82,84 @@ describe('getServerConfig', () => {
     });
   });
 });
+
+describe('APP_URL fallback', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    // Clean up all related env vars
+    delete process.env.APP_URL;
+    delete process.env.VERCEL;
+    delete process.env.VERCEL_ENV;
+    delete process.env.VERCEL_URL;
+    delete process.env.VERCEL_BRANCH_URL;
+    delete process.env.VERCEL_PROJECT_PRODUCTION_URL;
+  });
+
+  it('should use APP_URL when explicitly set', async () => {
+    process.env.APP_URL = 'https://custom-app.com';
+    process.env.VERCEL = '1';
+
+    const { getAppConfig } = await import('../app');
+    const config = getAppConfig();
+    expect(config.APP_URL).toBe('https://custom-app.com');
+  });
+
+  describe('Vercel environment', () => {
+    it('should use VERCEL_PROJECT_PRODUCTION_URL in production', async () => {
+      process.env.VERCEL = '1';
+      process.env.VERCEL_ENV = 'production';
+      process.env.VERCEL_PROJECT_PRODUCTION_URL = 'lobechat.vercel.app';
+      process.env.VERCEL_BRANCH_URL = 'lobechat-git-main-org.vercel.app';
+      process.env.VERCEL_URL = 'lobechat-abc123.vercel.app';
+
+      const { getAppConfig } = await import('../app');
+      const config = getAppConfig();
+      expect(config.APP_URL).toBe('https://lobechat.vercel.app');
+    });
+
+    it('should use VERCEL_BRANCH_URL in preview environment', async () => {
+      process.env.VERCEL = '1';
+      process.env.VERCEL_ENV = 'preview';
+      process.env.VERCEL_BRANCH_URL = 'lobechat-git-feature-org.vercel.app';
+      process.env.VERCEL_URL = 'lobechat-abc123.vercel.app';
+
+      const { getAppConfig } = await import('../app');
+      const config = getAppConfig();
+      expect(config.APP_URL).toBe('https://lobechat-git-feature-org.vercel.app');
+    });
+
+    it('should fallback to VERCEL_URL when VERCEL_BRANCH_URL is not set', async () => {
+      process.env.VERCEL = '1';
+      process.env.VERCEL_ENV = 'preview';
+      process.env.VERCEL_URL = 'lobechat-abc123.vercel.app';
+
+      const { getAppConfig } = await import('../app');
+      const config = getAppConfig();
+      expect(config.APP_URL).toBe('https://lobechat-abc123.vercel.app');
+    });
+  });
+
+  describe('local environment', () => {
+    it('should use localhost:3010 in development', async () => {
+      
+      vi.stubEnv('NODE_ENV', 'development');
+
+      const { getAppConfig } = await import('../app');
+      const config = getAppConfig();
+      expect(config.APP_URL).toBe('http://localhost:3010');
+
+      
+    });
+
+    it('should use localhost:3210 in non-development', async () => {
+      
+      vi.stubEnv('NODE_ENV', 'test');
+
+      const { getAppConfig } = await import('../app');
+      const config = getAppConfig();
+      expect(config.APP_URL).toBe('http://localhost:3210');
+
+      
+    });
+  });
+});

package/src/envs/app.ts

@@ -12,12 +12,24 @@ declare global {
 }
 const isInVercel = process.env.VERCEL === '1';
 
-const vercelUrl = `https://${process.env.VERCEL_URL}`;
+// Vercel URL fallback order (by stability):
+// 1. VERCEL_PROJECT_PRODUCTION_URL - project level, most stable
+// 2. VERCEL_BRANCH_URL - branch level, stable across deployments on same branch
+// 3. VERCEL_URL - deployment level, changes every deployment
+const getVercelUrl = () => {
+  if (process.env.VERCEL_ENV === 'production' && process.env.VERCEL_PROJECT_PRODUCTION_URL) {
+    return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;
+  }
+  if (process.env.VERCEL_BRANCH_URL) {
+    return `https://${process.env.VERCEL_BRANCH_URL}`;
+  }
+  return `https://${process.env.VERCEL_URL}`;
+};
 
 const APP_URL = process.env.APP_URL
   ? process.env.APP_URL
   : isInVercel
-    ? vercelUrl
+    ? getVercelUrl()
     : process.env.NODE_ENV === 'development'
       ? 'http://localhost:3010'
       : 'http://localhost:3210';

package/src/envs/auth.test.ts

@@ -44,17 +44,4 @@ describe('getAuthConfig fallbacks', () => {
 
     expect(config.AUTH_SECRET).toBe('nextauth-secret');
   });
-
-  it('should fall back to NEXTAUTH_URL origin when NEXT_PUBLIC_AUTH_URL is empty string', () => {
-    process.env.NEXT_PUBLIC_AUTH_URL = '';
-    process.env.NEXTAUTH_URL = 'https://example.com/api/auth';
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error - allow overriding for test
-    globalThis.window = undefined;
-
-    const config = getAuthConfig();
-
-    expect(config.NEXT_PUBLIC_AUTH_URL).toBe('https://example.com');
-  });
 });

package/src/envs/auth.ts

@@ -2,43 +2,6 @@
 import { createEnv } from '@t3-oss/env-nextjs';
 import { z } from 'zod';
 
-/**
- * Resolve public auth URL with compatibility fallbacks for NextAuth and Vercel deployments.
- */
-const resolvePublicAuthUrl = () => {
-  if (process.env.NEXT_PUBLIC_AUTH_URL) return process.env.NEXT_PUBLIC_AUTH_URL;
-
-  if (process.env.NEXTAUTH_URL) {
-    try {
-      return new URL(process.env.NEXTAUTH_URL).origin;
-    } catch {
-      // ignore invalid NEXTAUTH_URL
-    }
-  }
-
-  if (process.env.APP_URL) {
-    try {
-      return new URL(process.env.APP_URL).origin;
-    } catch {
-      // ignore invalid APP_URL
-    }
-  }
-
-  if (process.env.VERCEL_URL) {
-    try {
-      const normalizedVercelUrl = process.env.VERCEL_URL.startsWith('http')
-        ? process.env.VERCEL_URL
-        : `https://${process.env.VERCEL_URL}`;
-
-      return new URL(normalizedVercelUrl).origin;
-    } catch {
-      // ignore invalid Vercel URL
-    }
-  }
-
-  return undefined;
-};
-
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace NodeJS {
@@ -50,7 +13,6 @@ declare global {
 
       // ===== Auth (shared by Better Auth / Next Auth) ===== //
       AUTH_SECRET?: string;
-      NEXT_PUBLIC_AUTH_URL?: string;
       AUTH_EMAIL_VERIFICATION?: string;
       ENABLE_MAGIC_LINK?: string;
       AUTH_SSO_PROVIDERS?: string;
@@ -180,7 +142,6 @@ export const getAuthConfig = () => {
 
       // ---------------------------------- better auth ----------------------------------
       NEXT_PUBLIC_ENABLE_BETTER_AUTH: z.boolean().optional(),
-      NEXT_PUBLIC_AUTH_URL: z.string().optional(),
 
       // ---------------------------------- next auth ----------------------------------
       NEXT_PUBLIC_ENABLE_NEXT_AUTH: z.boolean().optional(),
@@ -310,8 +271,6 @@ export const getAuthConfig = () => {
 
       // ---------------------------------- better auth ----------------------------------
       NEXT_PUBLIC_ENABLE_BETTER_AUTH: process.env.NEXT_PUBLIC_ENABLE_BETTER_AUTH === '1',
-      // Fallback to NEXTAUTH_URL origin or Vercel deployment domain for seamless migration from next-auth
-      NEXT_PUBLIC_AUTH_URL: resolvePublicAuthUrl(),
       // Fallback to NEXT_PUBLIC_* for seamless migration
       AUTH_EMAIL_VERIFICATION:
         process.env.AUTH_EMAIL_VERIFICATION === '1' ||

package/src/features/Conversation/Messages/AssistantGroup/components/MessageContent.tsx

@@ -28,8 +28,6 @@ const MessageContent = memo<ContentBlockProps>(({ content, hasTools, id }) => {
   if (!content && !hasTools) return <ContentLoading id={id} />;
 
   if (content === LOADING_FLAT) {
-    if (hasTools) return null;
-
     return <ContentLoading id={id} />;
   }
 

package/src/features/Conversation/Messages/Task/ClientTaskDetail/CompletedState.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { type AssistantContentBlock } from '@lobechat/types';
+import { Accordion, AccordionItem, Block, Flexbox, Icon, Text } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { Workflow } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ContentBlock from '../../AssistantGroup/components/ContentBlock';
+import { formatDuration } from '../../Tasks/shared/utils';
+import Usage from '../../components/Extras/Usage';
+
+interface CompletedStateProps {
+  assistantId: string;
+  blocks: AssistantContentBlock[];
+  duration?: number;
+  model?: string;
+  provider?: string;
+  totalCost?: number;
+  totalTokens?: number;
+  totalToolCalls?: number;
+}
+
+const CompletedState = memo<CompletedStateProps>(
+  ({ blocks, assistantId, duration, totalToolCalls, model, provider, totalTokens, totalCost }) => {
+    const { t } = useTranslation('chat');
+
+    // Split blocks: intermediate steps (all but last) and final result (last)
+    const { intermediateBlocks, finalBlock } = useMemo(() => {
+      if (blocks.length === 0) return { finalBlock: null, intermediateBlocks: [] };
+      if (blocks.length === 1) return { finalBlock: blocks[0], intermediateBlocks: [] };
+
+      return {
+        finalBlock: blocks.at(-1)!,
+        intermediateBlocks: blocks.slice(0, -1),
+      };
+    }, [blocks]);
+
+    if (!finalBlock) return null;
+
+    const title = (
+      <Flexbox align="center" gap={8} horizontal>
+        <Block
+          align="center"
+          flex="none"
+          gap={4}
+          height={24}
+          horizontal
+          justify="center"
+          style={{ fontSize: 12 }}
+          variant="outlined"
+          width={24}
+        >
+          <Icon color={cssVar.colorTextSecondary} icon={Workflow} />
+        </Block>
+        <Flexbox align="center" gap={4} horizontal>
+          <Text as="span" type="secondary" weight={500}>
+            {totalToolCalls}
+          </Text>
+          <Text as="span" type="secondary">
+            {t('task.metrics.toolCallsShort')}
+          </Text>
+          {/* Duration display */}
+          {duration && (
+            <Text as="span" type="secondary">
+              {t('task.metrics.duration', { duration: formatDuration(duration) })}
+            </Text>
+          )}
+        </Flexbox>
+      </Flexbox>
+    );
+
+    return (
+      <Flexbox gap={8}>
+        {/* Intermediate steps - collapsed by default */}
+        {intermediateBlocks.length > 0 && (
+          <Accordion defaultExpandedKeys={[]} gap={8}>
+            <AccordionItem itemKey="intermediate" paddingBlock={4} paddingInline={4} title={title}>
+              <Flexbox gap={8} paddingInline={4} style={{ marginTop: 8 }}>
+                {intermediateBlocks.map((block) => (
+                  <ContentBlock
+                    {...block}
+                    assistantId={assistantId}
+                    disableEditing
+                    key={block.id}
+                  />
+                ))}
+              </Flexbox>
+            </AccordionItem>
+          </Accordion>
+        )}
+
+        {/* Final result - always visible */}
+        <ContentBlock {...finalBlock} assistantId={assistantId} disableEditing />
+
+        {/* Usage display */}
+        {model && provider && (
+          <Usage model={model} provider={provider} usage={{ cost: totalCost, totalTokens }} />
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+CompletedState.displayName = 'ClientCompletedState';
+
+export default CompletedState;

package/src/features/Conversation/Messages/Task/ClientTaskDetail/InitializingState.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Flexbox, Text } from '@lobehub/ui';
+import { createStaticStyles, keyframes } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+import { shinyTextStyles } from '@/styles';
+
+const shimmer = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+`;
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  container: css`
+    padding-block: 12px;
+  `,
+  progress: css`
+    position: relative;
+
+    overflow: hidden;
+
+    height: 3px;
+    border-radius: 2px;
+
+    background: ${cssVar.colorFillSecondary};
+  `,
+  progressShimmer: css`
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: linear-gradient(90deg, transparent, ${cssVar.colorPrimaryBgHover}, transparent);
+
+    animation: ${shimmer} 2s infinite;
+  `,
+}));
+
+const InitializingState = memo(() => {
+  const { t } = useTranslation('chat');
+
+  return (
+    <Flexbox className={styles.container} gap={12}>
+      <Flexbox align="center" gap={8} horizontal>
+        <NeuralNetworkLoading size={14} />
+        <Text className={shinyTextStyles.shinyText} weight={500}>
+          {t('task.status.initializing')}
+        </Text>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+InitializingState.displayName = 'InitializingState';
+
+export default InitializingState;

package/src/features/Conversation/Messages/Task/ClientTaskDetail/InstructionAccordion.tsx

@@ -0,0 +1,63 @@
+import { Accordion, AccordionItem, Block, Flexbox, Icon, Markdown, Text } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import { ScrollText } from 'lucide-react';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface InstructionAccordionProps {
+  childrenCount: number;
+  instruction: string;
+}
+
+const InstructionAccordion = memo<InstructionAccordionProps>(({ instruction, childrenCount }) => {
+  const { t } = useTranslation('chat');
+
+  // Auto-collapse instruction when children count exceeds threshold
+  const [expandedKeys, setExpandedKeys] = useState<string[]>(['instruction']);
+
+  useEffect(() => {
+    if (childrenCount > 1) {
+      setExpandedKeys([]);
+    }
+  }, [childrenCount > 1]);
+
+  return (
+    <Accordion
+      expandedKeys={expandedKeys}
+      gap={8}
+      onExpandedChange={(keys) => setExpandedKeys(keys as string[])}
+    >
+      <AccordionItem
+        itemKey="instruction"
+        paddingBlock={4}
+        paddingInline={4}
+        title={
+          <Flexbox align="center" gap={8} horizontal>
+            <Block
+              align="center"
+              flex="none"
+              gap={4}
+              height={24}
+              horizontal
+              justify="center"
+              style={{ fontSize: 12 }}
+              variant="outlined"
+              width={24}
+            >
+              <Icon color={cssVar.colorTextSecondary} icon={ScrollText} />
+            </Block>
+            <Text as="span" type="secondary">
+              {t('task.instruction')}
+            </Text>
+          </Flexbox>
+        }
+      >
+        <Block padding={12} style={{ marginBlock: 8, maxHeight: 300, overflow: 'auto' }} variant={'outlined'}>
+          <Markdown variant={'chat'}>{instruction}</Markdown>
+        </Block>
+      </AccordionItem>
+    </Accordion>
+  );
+});
+
+export default InstructionAccordion;