pxengine 0.1.0

package/src/molecules/creator-discovery/MCQCard/MCQCard.types.ts

@@ -0,0 +1,71 @@
+export interface MCQOption {
+  key: string;
+  label: string;
+}
+
+export interface MCQCardProps {
+  /**
+   * The question being asked
+   */
+  question: string;
+  
+  /**
+   * The options to choose from
+   */
+  options: Record<string, string>;
+  
+  /**
+   * The key of the recommended option
+   */
+  recommended?: string;
+  
+  /**
+   * The currently selected option key
+   */
+  selectedOption?: string;
+  
+  /**
+   * Triggered when an option is selected
+   */
+  onSelect?: (key: string) => void;
+  
+  /**
+   * Triggered when the user clicks continue
+   */
+  onProceed?: (key: string) => void;
+  
+  /**
+   * Whether the message is the latest
+   */
+  isLatestMessage?: boolean;
+  
+  /**
+   * Countdown in seconds
+   */
+  countdown?: number;
+  
+  /**
+   * Whether the countdown is paused
+   */
+  isPaused?: boolean;
+  
+  /**
+   * Pause/Resume handler
+   */
+  onPause?: () => void;
+  
+  /**
+   * Loading state during submission
+   */
+  isLoading?: boolean;
+  
+  /**
+   * Custom className
+   */
+  className?: string;
+  
+  /**
+   * Who made the final selection (for historical view)
+   */
+  selectionStatus?: "user" | "agent";
+}

package/src/molecules/creator-discovery/MCQCard/index.ts

@@ -0,0 +1,2 @@
+export * from "./MCQCard";
+export * from "./MCQCard.types";

package/src/molecules/creator-discovery/SearchSpecCard/CustomFieldRenderers.tsx

@@ -0,0 +1,334 @@
+import { useState, useRef, useEffect } from "react";
+import { ChevronDown, Check } from "lucide-react";
+import { countries } from "@/lib/countries";
+import { Badge } from "@/components";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// COUNTRY SELECT FIELD
+// ============================================================================
+
+export const CountrySelectEdit = ({
+  value,
+  onChange,
+}: {
+  value: any;
+  onChange: (value: any) => void;
+}) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const inputValue = Array.isArray(value) ? value : [];
+
+  return (
+    <div className="space-y-3">
+      <div className="relative" ref={dropdownRef}>
+        <div
+          className="flex-1 bg-white border border-gray200 rounded-md px-3 py-2 text-sm cursor-pointer flex items-center justify-between font-medium hover:border-purple500 transition-colors"
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        >
+          <span className="text-gray-700">
+            {inputValue.length > 0
+              ? `${inputValue.length} ${inputValue.length === 1 ? "country" : "countries"} selected`
+              : "Select countries..."}
+          </span>
+          <ChevronDown
+            className={cn(
+              "h-4 w-4 text-gray-400 transition-transform",
+              isDropdownOpen && "rotate-180",
+            )}
+          />
+        </div>
+
+        {isDropdownOpen && (
+          <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray200 rounded-lg shadow-xl z-50 max-h-60 overflow-hidden animate-in fade-in slide-in-from-top-1">
+            <div className="p-2 border-b border-gray-100">
+              <input
+                type="text"
+                placeholder="Search countries..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full px-3 py-1.5 text-sm border border-gray-100 rounded-md bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple500/20 focus:border-purple500"
+                onClick={(e) => e.stopPropagation()}
+              />
+            </div>
+
+            <div className="max-h-40 overflow-y-auto p-1">
+              {countries
+                .filter(
+                  (country) =>
+                    country.name
+                      .toLowerCase()
+                      .includes(searchTerm.toLowerCase()) ||
+                    country.code
+                      .toLowerCase()
+                      .includes(searchTerm.toLowerCase()),
+                )
+                .map((country) => (
+                  <div
+                    key={country.code}
+                    className={cn(
+                      "flex items-center justify-between px-3 py-2 rounded-md hover:bg-purple50 cursor-pointer transition-colors",
+                      inputValue.includes(country.code) && "bg-purple50/50",
+                    )}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      const currentGeography = inputValue;
+                      if (currentGeography.includes(country.code)) {
+                        onChange(
+                          currentGeography.filter(
+                            (c: string) => c !== country.code,
+                          ),
+                        );
+                      } else {
+                        onChange([...currentGeography, country.code]);
+                      }
+                    }}
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-gray-700">
+                        {country.name}
+                      </span>
+                      <span className="text-xs text-gray-400 font-mono">
+                        {country.code}
+                      </span>
+                    </div>
+                    {inputValue.includes(country.code) && (
+                      <Check className="h-4 w-4 text-purple500" />
+                    )}
+                  </div>
+                ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {inputValue.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {inputValue.map((countryCode: string) => (
+            <Badge
+              key={countryCode}
+              variant="secondary"
+              className="bg-purple50 text-purple700 border-purple100 hover:bg-purple100 cursor-default flex items-center gap-1 pr-1"
+            >
+              {countryCode}
+              <button
+                onClick={() =>
+                  onChange(inputValue.filter((c: string) => c !== countryCode))
+                }
+                className="hover:bg-purple200 rounded-full p-0.5 transition-colors"
+              >
+                <ChevronDown className="h-3 w-3 rotate-45" />{" "}
+                {/* Close icon substitute */}
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const CountrySelectDisplay = ({ value }: { value: any }) => {
+  if (!value || !Array.isArray(value) || value.length === 0) {
+    return <span className="text-muted-foreground italic">Not specified</span>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {value.map((countryCode: string) => (
+        <Badge
+          key={countryCode}
+          variant="outline"
+          className="bg-gray-50 text-gray-700 border-gray-200"
+        >
+          {countryCode}
+        </Badge>
+      ))}
+    </div>
+  );
+};
+
+// ============================================================================
+// KEYWORD BUNDLES FIELD
+// ============================================================================
+
+export const KeywordBundlesEdit = ({
+  value,
+  onChange,
+}: {
+  value: any;
+  onChange: (value: any) => void;
+}) => {
+  const bundles = Array.isArray(value) ? value : [];
+
+  const groups: { [priority: number]: { bundle: any; index: number }[] } = {};
+  bundles.forEach((b: any, idx: number) => {
+    const p = Number(b?.priority) || 1;
+    if (!groups[p]) groups[p] = [];
+    groups[p].push({ bundle: b, index: idx });
+  });
+
+  const sortedPriorities = Object.keys(groups)
+    .map((n) => parseInt(n))
+    .sort((a, b) => a - b);
+
+  return (
+    <div className="space-y-6 pt-2">
+      {sortedPriorities.map((priority) => (
+        <div key={priority} className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Badge className="bg-purple500 hover:bg-purple500">
+              Priority {priority}
+            </Badge>
+            <div className="h-px flex-1 bg-gray-100" />
+          </div>
+          {groups[priority].map(({ bundle, index: bundleIndex }) => (
+            <div
+              key={bundleIndex}
+              className="bg-gray-50/50 border border-gray-100 rounded-xl p-4 transition-all hover:bg-gray-50 hover:border-gray-200 shadow-sm"
+            >
+              <div className="flex flex-col gap-3">
+                <label className="text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1">
+                  Keywords
+                </label>
+                <div className="space-y-3">
+                  <div className="flex flex-wrap gap-1.5">
+                    {Array.isArray(bundle.keywords) &&
+                      bundle.keywords.map((keyword: string, kIndex: number) => (
+                        <Badge
+                          key={kIndex}
+                          className="bg-white border-gray-200 text-gray-700 hover:bg-red-50 hover:text-red-600 hover:border-red-100 transition-all cursor-pointer group"
+                          onClick={() => {
+                            const updatedBundles = [...bundles];
+                            updatedBundles[bundleIndex] = {
+                              ...bundle,
+                              keywords: bundle.keywords.filter(
+                                (_: string, i: number) => i !== kIndex,
+                              ),
+                            };
+                            onChange(updatedBundles);
+                          }}
+                        >
+                          {keyword}
+                          <span className="ml-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                            ×
+                          </span>
+                        </Badge>
+                      ))}
+                  </div>
+                  <div className="flex gap-2">
+                    <input
+                      type="text"
+                      placeholder="Add keyword..."
+                      className="flex-1 px-3 py-1.5 text-sm border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500"
+                      onKeyPress={(e) => {
+                        if (e.key === "Enter") {
+                          const input = e.target as HTMLInputElement;
+                          const val = input.value.trim();
+                          if (val) {
+                            const updatedBundles = [...bundles];
+                            updatedBundles[bundleIndex] = {
+                              ...bundle,
+                              keywords: [...(bundle.keywords || []), val],
+                            };
+                            onChange(updatedBundles);
+                            input.value = "";
+                          }
+                        }
+                      }}
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1.5 mt-1">
+                  <label className="text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1">
+                    Priority Level (1-5)
+                  </label>
+                  <input
+                    type="number"
+                    min="1"
+                    max="5"
+                    value={bundle.priority || 1}
+                    onChange={(e) => {
+                      const updatedBundles = [...bundles];
+                      updatedBundles[bundleIndex] = {
+                        ...bundle,
+                        priority: parseInt(e.target.value) || 1,
+                      };
+                      onChange(updatedBundles);
+                    }}
+                    className="w-20 px-3 py-1.5 text-sm border border-gray-200 rounded-md bg-white focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 outline-none"
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const KeywordBundlesDisplay = ({ value }: { value: any }) => {
+  const bundles = Array.isArray(value) ? value : [];
+  if (bundles.length === 0)
+    return <span className="text-muted-foreground italic">Not specified</span>;
+
+  const groups: { [priority: number]: string[] } = {};
+  bundles.forEach((b: any) => {
+    const p = Number(b?.priority) || 1;
+    const keywords = Array.isArray(b?.keywords) ? b.keywords : [];
+    if (!groups[p]) groups[p] = [];
+    groups[p].push(...keywords);
+  });
+
+  const sortedPriorities = Object.keys(groups)
+    .map((n) => parseInt(n))
+    .sort((a, b) => a - b);
+
+  return (
+    <div className="space-y-4 pt-1">
+      {sortedPriorities.map((priority) => {
+        const deduped = Array.from(new Set(groups[priority]));
+        return (
+          <div key={priority} className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Badge
+                variant="outline"
+                className="text-[10px] uppercase tracking-wider text-purple600 border-purple100 bg-purple50/30"
+              >
+                Priority {priority}
+              </Badge>
+              <div className="h-px flex-1 bg-gray-100/50" />
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              {deduped.map((keyword: string) => (
+                <Badge
+                  key={keyword}
+                  variant="secondary"
+                  className="bg-white border-gray-200 text-gray-700 font-medium"
+                >
+                  {keyword}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/molecules/creator-discovery/SearchSpecCard/SearchSpecCard.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { SearchSpecCardProps } from "./SearchSpecCard.types";
+import { FormCard } from "../../generic/FormCard";
+import { FieldConfig } from "@/types/common";
+import {
+  CountrySelectEdit,
+  CountrySelectDisplay,
+  KeywordBundlesEdit,
+  KeywordBundlesDisplay,
+} from "./CustomFieldRenderers";
+import { CheckCircle2 } from "lucide-react";
+
+/**
+ * Default field configuration for Search Specification
+ */
+export const SEARCH_SPEC_FIELDS: FieldConfig[] = [
+  {
+    key: "platforms",
+    label: "Platforms",
+    type: "select", // Changed to select for simplicity in form, or custom if multi-select needed
+    placeholder: "Select platforms",
+    options: ["Instagram", "YouTube", "TikTok"],
+  },
+  {
+    key: "follower_range",
+    label: "Follower Range",
+    type: "slider",
+    placeholder: "Not specified",
+    sliderConfig: {
+      min: 0,
+      max: 5000000,
+      step: 10000,
+      formatValue: (value: any) => {
+        if (!value || typeof value !== "object") return "0 - 2.5M followers";
+        const formatNum = (n: number) => {
+          if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
+          if (n >= 1000) return `${(n / 1000).toFixed(0)}K`;
+          return n.toLocaleString();
+        };
+        return `${formatNum(value.min || 0)} - ${formatNum(value.max || 2500000)} followers`;
+      },
+    },
+  },
+  {
+    key: "geography",
+    label: "Geography",
+    type: "custom",
+    renderEdit: (value, onChange) => (
+      <CountrySelectEdit value={value} onChange={onChange} />
+    ),
+    renderDisplay: (value) => <CountrySelectDisplay value={value} />,
+  },
+  {
+    key: "keyword_bundles",
+    label: "Keyword Bundles",
+    type: "custom",
+    renderEdit: (value, onChange) => (
+      <KeywordBundlesEdit value={value} onChange={onChange} />
+    ),
+    renderDisplay: (value) => <KeywordBundlesDisplay value={value} />,
+  },
+  {
+    key: "desired_candidate_count",
+    label: "Initial Creators",
+    type: "number",
+    numberConfig: {
+      min: 1,
+      formatValue: (value: any) => `${value || 0} creators`,
+    },
+  },
+];
+
+/**
+ * SearchSpecCard
+ *
+ * A domain-specific molecule for the Creator Discovery workflow.
+ * Encapsulates search settings like platforms, ranges, and custom keyword bundles.
+ */
+export const SearchSpecCard = React.memo<SearchSpecCardProps>(
+  ({
+    selectionStatus,
+    isLatestMessage = true,
+    className,
+    ...formCardProps
+  }) => {
+    return (
+      <FormCard
+        {...formCardProps}
+        title={formCardProps.title || "Creator Search Settings"}
+        fields={SEARCH_SPEC_FIELDS}
+        className={className}
+        footer={
+          !isLatestMessage && selectionStatus ? (
+            <div className="flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1">
+              <CheckCircle2 className="h-4 w-4" />
+              <span>
+                {selectionStatus === "agent"
+                  ? "Selected by Agent"
+                  : "Selected by User"}
+              </span>
+            </div>
+          ) : (
+            formCardProps.footer
+          )
+        }
+      />
+    );
+  },
+);
+
+SearchSpecCard.displayName = "SearchSpecCard";

package/src/molecules/creator-discovery/SearchSpecCard/SearchSpecCard.types.ts

@@ -0,0 +1,18 @@
+import { FormCardProps } from "../../generic/FormCard";
+
+export interface SearchSpecCardProps extends Omit<FormCardProps, "fields"> {
+  /**
+   * Version of the search specification
+   */
+  version?: number;
+  
+  /**
+   * Status of the selection
+   */
+  selectionStatus?: "user" | "agent";
+  
+  /**
+   * Whether the message is the latest
+   */
+  isLatestMessage?: boolean;
+}

package/src/molecules/creator-discovery/SearchSpecCard/index.ts

@@ -0,0 +1,3 @@
+export * from "./SearchSpecCard";
+export * from "./SearchSpecCard.types";
+export * from "./CustomFieldRenderers";

package/src/molecules/creator-discovery/index.ts

@@ -0,0 +1,3 @@
+export * from "./CampaignSeedCard";
+export * from "./SearchSpecCard";
+export * from "./MCQCard";

package/src/molecules/generic/ActionButton/ActionButton.tsx

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from "react";
+import { ActionButtonProps } from "./ActionButton.types";
+import { Button } from "@/components";
+import { cn } from "@/lib/utils";
+import { Pause, Play, ArrowRight, Loader2 } from "lucide-react";
+
+/**
+ * ActionButton
+ *
+ * A powerful button molecule that supports:
+ * - Auto-countdown for agent workflows
+ * - Pause/Resume toggle
+ * - Loading and Disabled states
+ * - Custom themes
+ */
+export const ActionButton = React.memo<ActionButtonProps>(
+  ({
+    label,
+    secondaryLabel,
+    countdown: countdownProp,
+    isPaused = false,
+    onPause,
+    onProceed,
+    variant = "default",
+    size = "default",
+    disabled = false,
+    isLoading = false,
+    className,
+    showCountdown = true,
+  }) => {
+    const [timeLeft, setTimeLeft] = useState(countdownProp || 0);
+
+    // Sync with prop
+    useEffect(() => {
+      if (countdownProp !== undefined) {
+        setTimeLeft(countdownProp);
+      }
+    }, [countdownProp]);
+
+    // Countdown logic
+    useEffect(() => {
+      if (
+        countdownProp === undefined ||
+        countdownProp <= 0 ||
+        isPaused ||
+        isLoading ||
+        disabled
+      ) {
+        return;
+      }
+
+      const timer = setInterval(() => {
+        setTimeLeft((prev) => {
+          if (prev <= 1) {
+            clearInterval(timer);
+            onProceed();
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      return () => clearInterval(timer);
+    }, [countdownProp, isPaused, isLoading, disabled, onProceed]);
+
+    const progress = countdownProp ? (timeLeft / countdownProp) * 100 : 0;
+
+    return (
+      <div className={cn("inline-flex items-center gap-2", className)}>
+        <Button
+          variant={variant}
+          size={size}
+          disabled={disabled || isLoading}
+          onClick={onProceed}
+          className={cn(
+            "relative min-w-[140px] overflow-hidden group transition-all duration-300",
+            "bg-purple500 hover:bg-purple600 text-white font-semibold rounded-full px-6 py-2.5 shadow-md hover:shadow-lg",
+            variant === "outline" &&
+              "bg-transparent border-purple500 text-purple500 hover:bg-purple50",
+            isLoading && "opacity-80",
+          )}
+        >
+          <div className="relative z-10 flex items-center justify-center gap-2">
+            {isLoading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <>
+                <span>{label}</span>
+                {showCountdown &&
+                  countdownProp &&
+                  countdownProp > 0 &&
+                  !isLoading && (
+                    <span className="opacity-70 text-xs bg-white/20 px-1.5 py-0.5 rounded-md tabular-nums min-w-[24px]">
+                      {timeLeft}s
+                    </span>
+                  )}
+                <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
+              </>
+            )}
+          </div>
+
+          {/* Progress Background Overlay (Optional) */}
+          {!isPaused && countdownProp && countdownProp > 0 && (
+            <div
+              className="absolute bottom-0 left-0 h-0.5 bg-white/30 transition-all duration-1000 ease-linear"
+              style={{ width: `${progress}%` }}
+            />
+          )}
+        </Button>
+
+        {countdownProp !== undefined && countdownProp > 0 && onPause && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onPause}
+            className="h-10 w-10 rounded-full hover:bg-gray-100 text-gray-500"
+            title={isPaused ? "Resume auto-proceed" : "Pause auto-proceed"}
+          >
+            {isPaused ? (
+              <Play className="h-4 w-4 fill-current" />
+            ) : (
+              <Pause className="h-4 w-4 fill-current" />
+            )}
+          </Button>
+        )}
+
+        {secondaryLabel && (
+          <span className="text-sm text-gray-500 font-medium italic">
+            {secondaryLabel}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+ActionButton.displayName = "ActionButton";