代码修改

web-code/components/angentchat/StreamErrorNotice.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { AlertTriangle, ChevronDown, ChevronUp, XCircle } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import type { StreamErrorItem } from './types';
+
+interface StreamErrorNoticeProps {
+  errors: StreamErrorItem[];
+}
+
+const StreamErrorNotice: React.FC<StreamErrorNoticeProps> = ({ errors }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [expanded, setExpanded] = useState(false);
+
+  if (!errors || errors.length === 0) return null;
+
+  const hasErrors = errors.some((e) => e.level === 'error');
+  const errorCount = errors.filter((e) => e.level === 'error').length;
+  const warnCount = errors.filter((e) => e.level === 'warning').length;
+
+  let summaryText: string;
+  if (hasErrors && warnCount > 0) {
+    summaryText = `${errorCount} 个步骤失败，${warnCount} 个能力调用降级`;
+  } else if (hasErrors) {
+    summaryText = `${errorCount} 个步骤执行失败`;
+  } else {
+    summaryText = `${warnCount} 个能力调用失败，系统已继续执行`;
+  }
+
+  const borderClass = hasErrors
+    ? isDark ? 'border-red-500/40 bg-red-500/10 text-red-200' : 'border-red-200 bg-red-50 text-red-700'
+    : isDark ? 'border-amber-500/40 bg-amber-500/10 text-amber-200' : 'border-amber-200 bg-amber-50 text-amber-700';
+
+  const dividerClass = hasErrors
+    ? isDark ? 'border-red-500/20' : 'border-red-200'
+    : isDark ? 'border-amber-500/20' : 'border-amber-200';
+
+  return (
+    <div className={`rounded-xl border text-xs ${borderClass}`}>
+      <button
+        className="w-full flex items-center gap-2 px-3 py-2 text-left"
+        onClick={() => setExpanded((v) => !v)}
+      >
+        {hasErrors
+          ? <XCircle className="w-3.5 h-3.5 shrink-0" />
+          : <AlertTriangle className="w-3.5 h-3.5 shrink-0" />}
+        <span className="flex-1 font-medium">{summaryText}</span>
+        {expanded
+          ? <ChevronUp className="w-3.5 h-3.5 shrink-0 opacity-50" />
+          : <ChevronDown className="w-3.5 h-3.5 shrink-0 opacity-50" />}
+      </button>
+
+      {expanded && (
+        <div className={`border-t px-3 py-2 space-y-2.5 ${dividerClass}`}>
+          {errors.map((err) => (
+            <div key={err.errorId}>
+              <div className="flex items-start gap-1.5">
+                {err.level === 'error'
+                  ? <XCircle className="w-3 h-3 mt-0.5 shrink-0" />
+                  : <AlertTriangle className="w-3 h-3 mt-0.5 shrink-0" />}
+                <span className="leading-snug">{err.message}</span>
+              </div>
+              <div className={`mt-0.5 pl-[18px] font-mono text-[10px] opacity-40`}>
+                错误 ID：{err.errorId}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StreamErrorNotice;