@lobehub/lobehub 2.0.0-next.47 → 2.0.0-next.49

package/src/features/Conversation/Messages/Group/Tool/Render/Intervention/index.tsx

@@ -0,0 +1,99 @@
+import { safeParseJSON } from '@lobechat/utils';
+import { ActionIcon } from '@lobehub/ui';
+import { Edit3Icon } from 'lucide-react';
+import { Suspense, memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { useUserStore } from '@/store/user';
+
+import Arguments from '../Arguments';
+import ApprovalActions from './ApprovalActions';
+import KeyValueEditor from './KeyValueEditor';
+import ModeSelector from './ModeSelector';
+
+export type ApprovalMode = 'auto-run' | 'allow-list' | 'manual';
+
+interface InterventionProps {
+  apiName: string;
+  id: string;
+  identifier: string;
+  requestArgs: string;
+  toolCallId: string;
+}
+
+const Intervention = memo<InterventionProps>(
+  ({ requestArgs, id, identifier, apiName, toolCallId }) => {
+    const { t } = useTranslation('chat');
+    const approvalMode = useUserStore((s) => s.settings.tool?.approvalMode || 'manual');
+    const [isEditing, setIsEditing] = useState(false);
+    const [optimisticUpdatePluginArguments] = useChatStore((s) => [
+      s.optimisticUpdatePluginArguments,
+    ]);
+
+    const handleCancel = useCallback(() => {
+      setIsEditing(false);
+    }, []);
+
+    const handleFinish = useCallback(
+      async (editedObject: Record<string, any>) => {
+        if (!id) return;
+
+        try {
+          const newArgsString = JSON.stringify(editedObject, null, 2);
+
+          if (newArgsString !== requestArgs) {
+            await optimisticUpdatePluginArguments(id, editedObject, true);
+          }
+          setIsEditing(false);
+        } catch (error) {
+          console.error('Error stringifying arguments:', error);
+        }
+      },
+      [requestArgs, id],
+    );
+
+    if (isEditing)
+      return (
+        <Suspense fallback={<Arguments arguments={requestArgs} />}>
+          <KeyValueEditor
+            initialValue={safeParseJSON(requestArgs || '')}
+            onCancel={handleCancel}
+            onFinish={handleFinish}
+          />
+        </Suspense>
+      );
+
+    return (
+      <Flexbox gap={12}>
+        <Arguments
+          actions={
+            <ActionIcon
+              icon={Edit3Icon}
+              onClick={() => {
+                setIsEditing(true);
+              }}
+              size={'small'}
+              title={t('edit', { ns: 'common' })}
+            />
+          }
+          arguments={requestArgs}
+        />
+
+        <Flexbox horizontal justify={'space-between'}>
+          <ModeSelector />
+          <ApprovalActions
+            apiName={apiName}
+            approvalMode={approvalMode}
+            identifier={identifier}
+            messageId={id}
+            toolCallId={toolCallId}
+          />
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default Intervention;

package/src/features/Conversation/Messages/Group/Tool/Render/RejectedResponse.tsx

@@ -0,0 +1,45 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { AlertTriangle } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding-block: 8px;
+    padding-inline: 6px;
+  `,
+  reason: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  title: css`
+    font-size: 14px;
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+interface RejectedResponseProps {
+  reason?: string;
+}
+
+const RejectedResponse = memo<RejectedResponseProps>(({ reason }) => {
+  const { t } = useTranslation('chat');
+  const { styles, theme } = useStyles();
+
+  return (
+    <Flexbox className={styles.container} gap={8}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Icon color={theme.colorWarning} icon={AlertTriangle} size={16} />
+        <div className={styles.title}>
+          {reason
+            ? t('tool.intervention.rejectedWithReason', { reason })
+            : t('tool.intervention.toolRejected')}
+        </div>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default RejectedResponse;

package/src/features/Conversation/Messages/Group/Tool/Render/index.tsx

@@ -1,15 +1,18 @@
 import { LOADING_FLAT } from '@lobechat/const';
-import { ChatToolResult } from '@lobechat/types';
+import { ChatToolResult, ToolIntervention } from '@lobechat/types';
 import { Suspense, memo } from 'react';
 
 import CustomRender from './CustomRender';
 import ErrorResponse from './ErrorResponse';
+import Intervention from './Intervention';
 import LoadingPlaceholder from './LoadingPlaceholder';
+import RejectedResponse from './RejectedResponse';
 
 interface RenderProps {
   apiName: string;
   arguments?: string;
   identifier: string;
+  intervention?: ToolIntervention;
   /**
    * ContentBlock ID (not the group message ID)
    */
@@ -18,6 +21,7 @@ interface RenderProps {
   setShowPluginRender: (show: boolean) => void;
   showPluginRender: boolean;
   toolCallId: string;
+  toolMessageId?: string;
   type?: string;
 }
 
@@ -38,7 +42,25 @@ const Render = memo<RenderProps>(
     apiName,
     result,
     type,
+    intervention,
+    toolMessageId,
   }) => {
+    if (toolMessageId && intervention?.status === 'pending') {
+      return (
+        <Intervention
+          apiName={apiName}
+          id={toolMessageId}
+          identifier={identifier}
+          requestArgs={requestArgs || ''}
+          toolCallId={toolCallId}
+        />
+      );
+    }
+
+    if (intervention?.status === 'rejected') {
+      return <RejectedResponse reason={intervention.rejectedReason} />;
+    }
+
     if (!result) return null;
 
     // Handle error state

package/src/features/Conversation/Messages/Group/Tool/index.tsx

@@ -1,5 +1,5 @@
-import { ChatToolResult } from '@lobechat/types';
-import { CSSProperties, memo, useState } from 'react';
+import { ChatToolResult, ToolIntervention } from '@lobechat/types';
+import { CSSProperties, memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AnimatedCollapsed from '@/components/AnimatedCollapsed';
@@ -10,15 +10,17 @@ import Render from './Render';
 export interface GroupToolProps {
   apiName: string;
   arguments?: string;
-  id: string;
-  identifier: string;
-  index: number;
   /**
    * ContentBlock ID (not the group message ID)
    */
-  messageId: string;
+  assistantMessageId: string;
+  id: string;
+  identifier: string;
+  index: number;
+  intervention?: ToolIntervention;
   result?: ChatToolResult;
   style?: CSSProperties;
+  toolMessageId?: string;
   type?: string;
 }
 
@@ -29,10 +31,29 @@ export interface GroupToolProps {
  * so we always show the results directly.
  */
 const Tool = memo<GroupToolProps>(
-  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, result, type }) => {
+  ({
+    arguments: requestArgs,
+    apiName,
+    assistantMessageId,
+    id,
+    intervention,
+    index,
+    identifier,
+    style,
+    result,
+    type,
+    toolMessageId,
+  }) => {
     // Default to false since group messages are all completed
-    const [showDetail, setShowDetail] = useState(false);
-    const [showPluginRender, setShowPluginRender] = useState(false);
+
+    const [showToolContent, setShowToolDetail] = useState(false);
+    const [showCustomPluginUI, setShowCustomPluginUI] = useState(false);
+
+    useEffect(() => {
+      if (intervention?.status === 'pending') {
+        setShowToolDetail(true);
+      }
+    }, [intervention?.status]);
 
     return (
       <Flexbox gap={8} style={style}>
@@ -42,24 +63,27 @@ const Tool = memo<GroupToolProps>(
           id={id}
           identifier={identifier}
           index={index}
-          messageId={messageId}
+          intervention={intervention}
+          messageId={assistantMessageId}
           result={result}
-          setShowPluginRender={setShowPluginRender}
-          setShowRender={setShowDetail}
-          showPluginRender={showPluginRender}
-          showRender={showDetail}
+          setShowPluginRender={setShowCustomPluginUI}
+          setShowRender={setShowToolDetail}
+          showPluginRender={showCustomPluginUI}
+          showRender={showToolContent}
           type={type}
         />
-        <AnimatedCollapsed open={showDetail} width={{ collapsed: 'auto' }}>
+        <AnimatedCollapsed open={showToolContent} width={{ collapsed: 'auto' }}>
           <Render
             apiName={apiName}
             arguments={requestArgs}
             identifier={identifier}
-            messageId={messageId}
+            intervention={intervention}
+            messageId={assistantMessageId}
             result={result}
-            setShowPluginRender={setShowPluginRender}
-            showPluginRender={showPluginRender}
+            setShowPluginRender={setShowCustomPluginUI}
+            showPluginRender={showCustomPluginUI}
             toolCallId={id}
+            toolMessageId={toolMessageId}
             type={type}
           />
         </AnimatedCollapsed>

package/src/features/Conversation/Messages/Group/Tools.tsx

@@ -32,12 +32,14 @@ export const Tools = memo<ToolsRendererProps>(({ messageId, tools }) => {
         <Tool
           apiName={tool.apiName}
           arguments={tool.arguments}
+          assistantMessageId={messageId}
           id={tool.id}
           identifier={tool.identifier}
           index={index}
+          intervention={tool.intervention}
           key={tool.id}
-          messageId={messageId}
           result={tool.result}
+          toolMessageId={tool.result_msg_id}
           type={tool.type}
         />
       ))}

package/src/features/Conversation/components/Extras/TTS/InitPlayer.tsx

@@ -1,3 +1,4 @@
+import { getMessageError } from '@lobechat/fetch-sse';
 import { ChatMessageError, ChatTTS } from '@lobechat/types';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -5,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 import { useTTS } from '@/hooks/useTTS';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
-import { getMessageError } from '@/utils/fetch';
 
 import Player from './Player';
 

package/src/features/PluginTag/PluginStatus.tsx

@@ -54,7 +54,7 @@ const PluginStatus = memo<PluginStatusProps>(({ title, id, deprecated }) => {
   }, [status]);
 
   const tag =
-    // 废弃标签
+    // 拒绝标签
     deprecated ? (
       <Tag bordered={false} color={'red'} style={{ marginRight: 0 }}>
         {t('list.item.deprecated.title', { ns: 'plugin' })}

package/src/hooks/useAgentOwnershipCheck.ts

@@ -0,0 +1,143 @@
+import { useEffect, useState } from 'react';
+
+import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
+import { MarketAuthContextType } from '@/layout/AuthProvider/MarketAuth/types';
+import { marketApiService } from '@/services/marketApi';
+
+interface AgentOwnershipResult {
+  // null = loading, true = 是用户的, false = 不是用户的
+  error?: string;
+  isOwnAgent: boolean | null;
+}
+
+// 简单的缓存机制避免重复 API 调用
+const agentOwnershipCache = new Map<string, { result: boolean; timestamp: number }>();
+const CACHE_DURATION = 5 * 60 * 1000; // 5分钟缓存
+
+const buildCacheKey = (marketIdentifier: string, accountId?: string | number | null) =>
+  `${marketIdentifier}::${accountId ?? 'unknown'}`;
+
+/**
+ * 获取当前用户 ID
+ */
+function getCurrentAccountId(marketAuth: MarketAuthContextType): string | number | null {
+  try {
+    // 首先尝试从 marketAuth 中获取用户信息
+    const userInfo = marketAuth.getCurrentUserInfo?.();
+    if (userInfo?.accountId !== null) {
+      console.log('[useAgentOwnershipCheck] User ID from userInfo:', userInfo?.accountId);
+      return userInfo?.accountId ?? null;
+    }
+
+    // 如果没有，尝试从 sessionStorage 中获取
+    const userInfoData = sessionStorage.getItem('market_user_info');
+    if (userInfoData) {
+      const parsedUserInfo = JSON.parse(userInfoData);
+      console.log(
+        '[useAgentOwnershipCheck] User ID from sessionStorage:',
+        parsedUserInfo.accountId,
+      );
+      return parsedUserInfo.accountId ?? parsedUserInfo.sub ?? null;
+    }
+
+    console.warn('[useAgentOwnershipCheck] No user ID found');
+    return null;
+  } catch (error) {
+    console.error('[useAgentOwnershipCheck] Failed to get current user ID:', error);
+    return null;
+  }
+}
+
+interface CheckOwnershipParams {
+  accessToken?: string;
+  accountId?: string | number | null;
+  marketIdentifier?: string;
+  skipCache?: boolean;
+}
+
+/**
+ * 校验当前账号是否为指定 agent 的 owner
+ */
+export const checkOwnership = async ({
+  accountId,
+  accessToken,
+  marketIdentifier,
+  skipCache = false,
+}: CheckOwnershipParams): Promise<boolean> => {
+  if (!marketIdentifier || !accountId || !accessToken) {
+    console.warn('[checkOwnership] Missing required parameters', {
+      accessToken: Boolean(accessToken),
+      accountId,
+      marketIdentifier,
+    });
+    return false;
+  }
+
+  const cacheKey = buildCacheKey(marketIdentifier, accountId);
+  const cached = agentOwnershipCache.get(cacheKey);
+  if (!skipCache && cached && Date.now() - cached.timestamp < CACHE_DURATION) {
+    console.log('[checkOwnership] Using cached result:', cached.result);
+    return cached.result;
+  }
+
+  marketApiService.setAccessToken(accessToken);
+  const agentDetail = await marketApiService.getAgentDetail(marketIdentifier);
+  console.log('[checkOwnership] Agent detail:', agentDetail);
+
+  const isOwner = `${agentDetail?.ownerId ?? ''}` === `${accountId}`;
+  agentOwnershipCache.set(cacheKey, {
+    result: isOwner,
+    timestamp: Date.now(),
+  });
+
+  return isOwner;
+};
+
+/**
+ * 检查当前用户是否拥有指定的 agent
+ */
+export const useAgentOwnershipCheck = (marketIdentifier?: string): AgentOwnershipResult => {
+  const [result, setResult] = useState<AgentOwnershipResult>({ isOwnAgent: null });
+  const marketAuth = useMarketAuth();
+  const { session, isAuthenticated } = marketAuth;
+
+  useEffect(() => {
+    if (!marketIdentifier || !isAuthenticated || !session) {
+      setResult({ isOwnAgent: false });
+      return;
+    }
+
+    const runOwnershipCheck = async () => {
+      try {
+        console.log('[useAgentOwnershipCheck] Checking ownership for:', marketIdentifier);
+
+        // 获取当前用户 ID
+        const currentAccountId = getCurrentAccountId(marketAuth);
+        console.log('[useAgentOwnershipCheck] Current user ID:', currentAccountId);
+
+        if (!currentAccountId) {
+          console.warn('[useAgentOwnershipCheck] Could not get current user ID');
+          setResult({ isOwnAgent: false });
+          return;
+        }
+
+        const isOwner = await checkOwnership({
+          accessToken: session.accessToken,
+          accountId: currentAccountId,
+          marketIdentifier,
+        });
+
+        setResult({ isOwnAgent: isOwner });
+      } catch (error) {
+        setResult({
+          error: error instanceof Error ? error.message : 'Unknown error',
+          isOwnAgent: false,
+        });
+      }
+    };
+
+    runOwnershipCheck();
+  }, [marketIdentifier, isAuthenticated, session, marketAuth]);
+
+  return result;
+};

package/src/instrumentation.node.ts

@@ -1,4 +1,5 @@
-import { register } from '@lobechat/observability-otel/node'
+import { register } from '@lobechat/observability-otel/node';
+
 import { version } from '../package.json';
 
-register({ version })
+register({ version });