@alpaca-editor/core 1.0.4172 → 1.0.4174

package/src/editor/ai/AgentProfilesOverview.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { AiProfile } from "../services/aiService";
+import { cn } from "../../lib/utils";
+import { Bot } from "lucide-react";
+
+interface AgentProfilesOverviewProps {
+  profiles: AiProfile[];
+  onSelectProfile: (profileId: string) => void;
+  className?: string;
+}
+
+export const AgentProfilesOverview: React.FC<AgentProfilesOverviewProps> = ({
+  profiles,
+  onSelectProfile,
+  className,
+}) => {
+  // Filter out hidden profiles
+  const visibleProfiles = profiles.filter(
+    (profile) => !profile.hiddenFromOverview,
+  );
+
+  if (visibleProfiles.length === 0) {
+    return (
+      <div className={cn("text-center text-xs text-gray-500", className)}>
+        No agent profiles available
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-[repeat(auto-fit,minmax(min(200px,100%),1fr))] gap-3",
+        className,
+      )}
+    >
+      {visibleProfiles.map((profile) => {
+        const displayTitle = profile.displayTitle || profile.name;
+        const description = profile.description || "";
+
+        return (
+          <button
+            key={profile.id}
+            onClick={() => onSelectProfile(profile.id)}
+            className="group flex flex-col gap-3 rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:border-blue-300 hover:shadow-md focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none"
+            data-testid="agent-profile-card"
+            data-profile-id={profile.id}
+          >
+            {/* Icon */}
+            <div className="flex items-center justify-center">
+              {profile.svgIcon ? (
+                <div
+                  className="flex h-12 w-12 items-center justify-center transition-transform group-hover:scale-110 [&>svg]:h-full [&>svg]:w-full"
+                  dangerouslySetInnerHTML={{ __html: profile.svgIcon }}
+                />
+              ) : (
+                <Bot
+                  className="h-12 w-12 text-gray-400 transition-transform group-hover:scale-110 group-hover:text-blue-500"
+                  strokeWidth={1}
+                />
+              )}
+            </div>
+
+            {/* Title */}
+            <h3 className="text-sm font-semibold text-gray-900">
+              {displayTitle}
+            </h3>
+
+            {/* Description */}
+            {description && (
+              <p className="line-clamp-3 text-xs text-gray-500">
+                {description}
+              </p>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+