Integrate role asset studio into custom world agent flow

2026-04-14 20:16:41 +08:00
parent 0981d6ee1b
commit bc2999ffb9
118 changed files with 31211 additions and 1232 deletions
--- a/src/components/custom-world-agent/CustomWorldAgentOperationBanner.tsx
+++ b/src/components/custom-world-agent/CustomWorldAgentOperationBanner.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+
+import type { CustomWorldAgentOperationRecord } from '../../../packages/shared/src/contracts/customWorldAgent';
+
+type CustomWorldAgentOperationBannerProps = {
+  operation: CustomWorldAgentOperationRecord | null;
+};
+
+export function CustomWorldAgentOperationBanner({
+  operation,
+}: CustomWorldAgentOperationBannerProps) {
+  const [visibleOperation, setVisibleOperation] =
+    useState<CustomWorldAgentOperationRecord | null>(operation);
+
+  useEffect(() => {
+    setVisibleOperation(operation);
+
+    if (operation?.status !== 'completed') {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setVisibleOperation((current) =>
+        current?.operationId === operation.operationId ? null : current,
+      );
+    }, 1200);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [operation]);
+
+  if (!visibleOperation) {
+    return null;
+  }
+
+  const isFailed = visibleOperation.status === 'failed';
+  const isRunning =
+    visibleOperation.status === 'running' || visibleOperation.status === 'queued';
+
+  return (
+    <div
+      className={`rounded-[1.4rem] border px-4 py-4 ${
+        isFailed
+          ? 'border-rose-400/20 bg-[#111318]/95'
+          : isRunning
+            ? 'border-emerald-300/20 bg-[#111318]/95'
+            : 'border-emerald-300/20 bg-[#111318]/95'
+      }`}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <div className="text-sm font-semibold text-white">
+          {visibleOperation.phaseLabel}
+        </div>
+        <div className="text-xs text-zinc-300">
+          {Math.max(0, Math.min(100, Math.round(visibleOperation.progress)))}%
+        </div>
+      </div>
+      {visibleOperation.error ? (
+        <div className="mt-2 text-sm text-zinc-200">
+          {visibleOperation.error}
+        </div>
+      ) : null}
+      <div className="mt-3 h-2 overflow-hidden rounded-full bg-white/10">
+        <div
+          className={`h-full rounded-full transition-[width] duration-300 ${
+            isFailed ? 'bg-rose-300' : 'bg-emerald-300'
+          }`}
+          style={{
+            width: `${Math.max(8, Math.min(100, visibleOperation.progress))}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+}