代码修改

2026-05-27 19:43:15 +08:00
1 parent 8f5af46ec2
commit 8f75e12871
@@ -0,0 +1,246 @@
+import { useEffect, useState } from 'react';
+import { Bot, CheckCircle2, ChevronDown, Info, Sparkles, UserRound, Wrench } from 'lucide-react';
+import MarkdownRenderer from '../MarkdownRenderer';
+import { useTheme } from '../../contexts/ThemeContext';
+
+interface ConversationStep {
+  text: string;
+  subText?: string;
+  status: 'done' | 'processing';
+}
+
+interface ToolCall {
+  id: string;
+  name: string;
+  input?: Record<string, unknown>;
+  output?: string;
+}
+
+interface ConversationMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  steps?: ConversationStep[];
+  thinkings?: Array<{ duration: number; content: string }>;
+  toolCalls?: ToolCall[];
+}
+
+interface SkillCreatorConversationItemProps {
+  message: ConversationMessage;
+  isConnecting?: boolean;
+}
+
+function MessageAvatar({ role, active = false }: { role: 'user' | 'assistant'; active?: boolean }) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+  const Icon = role === 'assistant' ? Bot : UserRound;
+
+  return (
+    <div
+      className={`relative w-9 h-9 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm ${
+        role === 'assistant'
+          ? isDarkMode
+            ? 'bg-gradient-to-br from-slate-700 to-slate-900 text-sky-200 ring-1 ring-slate-600'
+            : 'bg-gradient-to-br from-red-50 to-rose-100 text-red-500 ring-1 ring-red-100'
+          : isDarkMode
+            ? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white'
+            : 'bg-gradient-to-br from-red-500 to-rose-500 text-white'
+      }`}
+    >
+      <Icon className="w-4 h-4" />
+      {role === 'assistant' && active && (
+        <Sparkles className={`absolute -right-0.5 -top-0.5 w-3.5 h-3.5 ${isDarkMode ? 'text-sky-200' : 'text-amber-400'}`} />
+      )}
+    </div>
+  );
+}
+
+function StepsSummary({ steps }: { steps: ConversationStep[] }) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+  const [open, setOpen] = useState(true);
+  const doneCount = steps.filter((step) => step.status === 'done').length;
+
+  return (
+    <div
+      className={`mb-3 overflow-hidden rounded-2xl border shadow-sm ${
+        isDarkMode ? 'border-slate-700 bg-slate-900/60 text-slate-300' : 'border-red-100 bg-white text-gray-600'
+      }`}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className={`w-full h-10 px-3.5 flex items-center gap-2 text-xs transition ${
+          isDarkMode ? 'bg-slate-800/70 hover:bg-slate-800' : 'bg-red-50/60 hover:bg-red-50'
+        }`}
+      >
+        <CheckCircle2 className={`w-3.5 h-3.5 ${isDarkMode ? 'text-emerald-400' : 'text-red-500'}`} />
+        <span className="font-medium">执行步骤</span>
+        <span className={isDarkMode ? 'text-slate-500' : 'text-gray-400'}>已完成 {doneCount} / {steps.length}</span>
+        <ChevronDown className={`w-3.5 h-3.5 ml-auto transition-transform ${open ? '' : '-rotate-90'}`} />
+      </button>
+      <div className={`overflow-hidden transition-all duration-300 ease-in-out ${open ? 'max-h-[640px] opacity-100' : 'max-h-0 opacity-0'}`}>
+        <div className={`border-t px-4 py-3 space-y-3 ${isDarkMode ? 'border-slate-700' : 'border-red-50'}`}>
+          {steps.map((step, index) => {
+            const done = step.status === 'done';
+
+            return (
+              <div key={`${step.text}-${index}`} className="flex gap-3">
+                <div className="pt-0.5">
+                  {done ? (
+                    <CheckCircle2 className={`w-4 h-4 ${isDarkMode ? 'text-emerald-400' : 'text-red-500'}`} />
+                  ) : (
+                    <span className={`block w-4 h-4 rounded-full border-2 ${isDarkMode ? 'border-sky-300 border-t-transparent' : 'border-red-400 border-t-transparent'} animate-spin`} />
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className={`text-xs font-medium ${isDarkMode ? 'text-slate-200' : 'text-gray-800'}`}>
+                    第 {index + 1} 步：{step.text}
+                  </div>
+                  {step.subText && (
+                    <div className={`mt-1 rounded-xl px-3 py-2 text-xs leading-5 ${isDarkMode ? 'bg-slate-950/50 text-slate-400' : 'bg-gray-50 text-gray-600'}`}>
+                      {step.subText}
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ThinkingPanel({ duration, content }: { duration: number; content: string }) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+  const [open, setOpen] = useState(true);
+
+  useEffect(() => {
+    if (duration > 0) setOpen(false);
+  }, [duration]);
+
+  return (
+    <div className={`mb-3 rounded-2xl border overflow-hidden shadow-sm ${isDarkMode ? 'border-slate-700 bg-slate-900/60' : 'border-red-100 bg-white'}`}>
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className={`w-full h-10 px-3.5 flex items-center gap-2 text-xs transition ${
+          isDarkMode ? 'text-slate-300 bg-slate-800/70 hover:bg-slate-800' : 'text-gray-600 bg-red-50/60 hover:bg-red-50'
+        }`}
+      >
+        <Info className={`w-3.5 h-3.5 ${isDarkMode ? 'text-sky-300' : 'text-red-500'}`} />
+        <span className="font-medium">思考过程</span>
+        <ChevronDown className={`w-3.5 h-3.5 ml-auto transition-transform ${open ? '' : '-rotate-90'}`} />
+      </button>
+      <div className={`overflow-hidden transition-all duration-300 ease-in-out ${open ? 'opacity-100' : 'max-h-0 opacity-0'}`}>
+        <div className={`px-4 py-3 text-xs leading-6 whitespace-pre-wrap border-t ${isDarkMode ? 'border-slate-700 text-slate-300' : 'border-red-50 text-gray-600'}`}>
+          {content}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ToolCallPanel({ toolCall }: { toolCall: ToolCall }) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+  const [open, setOpen] = useState(false);
+
+  const details = {
+    input: toolCall.input && Object.keys(toolCall.input).length > 0 ? JSON.stringify(toolCall.input, null, 2) : '',
+    output: toolCall.output ?? '',
+  };
+  const hasDetails = Boolean(details.input || details.output);
+
+  return (
+    <div className={`mb-3 rounded-2xl border overflow-hidden shadow-sm ${isDarkMode ? 'border-slate-700 bg-slate-900/60' : 'border-red-100 bg-white'}`}>
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className={`w-full h-10 px-3.5 flex items-center gap-2 text-xs transition ${
+          isDarkMode ? 'text-slate-300 bg-slate-800/70 hover:bg-slate-800' : 'text-gray-600 bg-red-50/60 hover:bg-red-50'
+        }`}
+      >
+        <Wrench className={`w-3.5 h-3.5 ${isDarkMode ? 'text-amber-300' : 'text-red-500'}`} />
+        <span className="font-medium">{toolCall.name}</span>
+        {hasDetails && <ChevronDown className={`w-3.5 h-3.5 ml-auto transition-transform ${open ? '' : '-rotate-90'}`} />}
+      </button>
+      {hasDetails && (
+        <div className={`overflow-hidden transition-all duration-300 ease-in-out ${open ? 'max-h-[520px] opacity-100' : 'max-h-0 opacity-0'}`}>
+          <div className={`border-t px-4 py-3 space-y-3 ${isDarkMode ? 'border-slate-700' : 'border-red-50'}`}>
+            {details.input && (
+              <div>
+                <p className={`text-[11px] mb-1 ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>请求参数</p>
+                <pre className={`rounded-xl px-3 py-2 text-[11px] leading-5 overflow-x-auto ${isDarkMode ? 'bg-slate-950/60 text-slate-300' : 'bg-gray-50 text-gray-700'}`}>{details.input}</pre>
+              </div>
+            )}
+            {details.output && (
+              <div>
+                <p className={`text-[11px] mb-1 ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>返回结果</p>
+                <pre className={`rounded-xl px-3 py-2 text-[11px] leading-5 overflow-x-auto ${isDarkMode ? 'bg-slate-950/60 text-slate-300' : 'bg-gray-50 text-gray-700'}`}>{details.output}</pre>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function SkillCreatorConversationItem({ message, isConnecting = false }: SkillCreatorConversationItemProps) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+
+  if (message.role === 'user') {
+    return (
+      <div className="flex justify-end gap-3">
+        <div className={`max-w-[72%] rounded-2xl rounded-tr-md px-4 py-3 text-sm leading-relaxed shadow-sm ${
+          isDarkMode ? 'bg-blue-600/80 text-white shadow-blue-950/20' : 'bg-gradient-to-r from-red-500 to-rose-500 text-white shadow-red-200/70'
+        }`}>
+          {message.content}
+        </div>
+        <MessageAvatar role="user" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-3">
+      <MessageAvatar role="assistant" active={!message.content} />
+      <div
+        className={`max-w-[86%] flex-1 rounded-3xl border px-4 py-3.5 text-sm shadow-sm ${
+          isDarkMode ? 'border-slate-700 bg-slate-800/45 text-slate-200 shadow-black/10' : 'border-red-100 bg-white text-[#2a2f3f] shadow-red-100/60'
+        }`}
+      >
+        {message.steps && message.steps.length > 0 && <StepsSummary steps={message.steps} />}
+        {message.thinkings?.map((thinking, index) => (
+          <ThinkingPanel key={`${message.id}-thinking-${index}`} duration={thinking.duration} content={thinking.content} />
+        ))}
+        {message.toolCalls?.map((toolCall) => (
+          <ToolCallPanel key={toolCall.id} toolCall={toolCall} />
+        ))}
+        {isConnecting && (
+          <div className={`flex items-center gap-2 text-sm ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
+            <span className="skill-creator-dot" />
+            <span className="skill-creator-dot" />
+            <span className="skill-creator-dot" />
+            <span
+              data-text="正在连接技能服务..."
+              className={`ml-1 skill-creator-shimmer-text ${isDarkMode ? 'skill-creator-shimmer-dark' : 'skill-creator-shimmer-light'}`}
+            >
+              正在连接技能服务...
+            </span>
+          </div>
+        )}
+        {message.content && (
+          <MarkdownRenderer
+            content={message.content}
+            className={isDarkMode ? '[&_p]:text-slate-200 [&_li]:text-slate-200' : '[&_p]:text-[#2a2f3f] [&_li]:text-[#2a2f3f]'}
+          />
+        )}
+      </div>
+    </div>
+  );
+}