@alpaca-editor/core 1.0.4184 → 1.0.4186

package/src/agents-view/AgentCard.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import { Agent } from "../editor/services/agentService";
+import { getAgentStatusConfig } from "../editor/ai/AgentStatusBadge";
+import { cn } from "../lib/utils";
+import { Trash, X, Play, Users } from "lucide-react";
+import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
+import { SecretAgentIcon } from "../editor/ui/Icons";
+
+interface AgentCardProps {
+  agent: Agent;
+  onClick: (agent: Agent) => void;
+  onResume: (agent: Agent) => void;
+  onClose: (agentId: string, agentName: string) => void;
+  onDelete: (
+    agentId: string,
+    agentName: string,
+    event: React.MouseEvent,
+  ) => void;
+  formatDateTime: (dateString: string) => string;
+}
+
+export function AgentCard({
+  agent,
+  onClick,
+  onResume,
+  onClose,
+  onDelete,
+  formatDateTime,
+}: AgentCardProps) {
+  const statusConfig = getAgentStatusConfig(agent);
+  const isClosed = agent.status === "closed" || agent.status === 5;
+
+  const handleCardClick = () => {
+    if (isClosed) {
+      // If agent is closed, resume it directly
+      onResume(agent);
+    } else {
+      // If agent is active, just select it
+      onClick(agent);
+    }
+  };
+
+  return (
+    <div
+      key={agent.id}
+      className="cursor-pointer rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md"
+      onClick={handleCardClick}
+    >
+      <div className="flex items-start justify-between">
+        {/* Agent Icon */}
+        <div className="mr-3 flex-shrink-0">
+          {agent.profileSvgIcon ? (
+            <div
+              className="flex h-6 w-6 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full"
+              dangerouslySetInnerHTML={{
+                __html: agent.profileSvgIcon,
+              }}
+            />
+          ) : (
+            <SecretAgentIcon
+              size={24}
+              strokeWidth={1}
+              className="text-gray-400"
+            />
+          )}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          {/* Agent Name & Status */}
+          <div className="mb-1 flex items-center gap-2">
+            <div
+              className={cn(
+                "h-2 w-2 flex-shrink-0 rounded-full",
+                statusConfig.color,
+                statusConfig.shouldPulse && "animate-pulse",
+              )}
+              title={statusConfig.label}
+            />
+            <h4 className="truncate font-medium text-gray-900">{agent.name}</h4>
+            {agent.isShared && (
+              <div className="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5 text-xs text-blue-700">
+                <Users className="size-3" strokeWidth={1} />
+                <span>Shared</span>
+              </div>
+            )}
+          </div>
+
+          {/* Shared Agent Owner */}
+          {agent.isShared && agent.ownerName && (
+            <p className="mb-1 text-xs text-gray-500">
+              Created by {agent.ownerName}
+            </p>
+          )}
+
+          {/* Agent Description */}
+          {agent.description && (
+            <p className="mb-2 truncate text-xs text-gray-500">
+              {agent.description}
+            </p>
+          )}
+
+          {/* Agent Details */}
+          <div className="space-y-1 text-xs text-gray-600">
+            <div className="flex items-center gap-2">
+              <span className="font-medium">Updated:</span>
+              <span>{formatDateTime(agent.updatedDate)}</span>
+            </div>
+            {agent.messageCount !== undefined && agent.messageCount > 0 && (
+              <div className="flex items-center gap-2">
+                <span className="font-medium">Messages:</span>
+                <span>{agent.messageCount}</span>
+              </div>
+            )}
+            {agent.totalCost !== undefined && agent.totalCost > 0 && (
+              <div className="flex items-center gap-2">
+                <span className="font-medium">Cost:</span>
+                <span>${agent.totalCost.toFixed(4)}</span>
+                {agent.totalTokensUsed !== undefined && (
+                  <span className="text-gray-400">
+                    ({agent.totalTokensUsed.toLocaleString()} tokens)
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="ml-3 flex gap-1">
+          {isClosed && (
+            <SimpleIconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                onResume(agent);
+              }}
+              icon={<Play className="size-3" strokeWidth={1.5} />}
+              label="Resume Agent"
+              className="text-blue-600 opacity-60 hover:text-blue-700 hover:opacity-100"
+            />
+          )}
+          {!isClosed && (
+            <SimpleIconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                onClose(agent.id, agent.name);
+              }}
+              icon={<X className="size-3" strokeWidth={1.5} />}
+              label="Close Agent"
+              className="text-gray-600 opacity-60 hover:text-gray-800 hover:opacity-100"
+            />
+          )}
+          <SimpleIconButton
+            onClick={(e) => onDelete(agent.id, agent.name, e)}
+            icon={<Trash className="size-3" strokeWidth={1.5} />}
+            label="Delete Agent"
+            className="text-red-600 opacity-60 hover:text-red-700 hover:opacity-100"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}