pxengine 0.1.24 → 0.1.27

package/dist/index.cjs

@@ -34049,11 +34049,10 @@ var EditableField = import_react54.default.memo(
               "h4",
               {
                 className: "px-2 py-1 tracking-widest bg-background bg-purple200 text-purpleText dark:text-purple-400 text-[10px] font-bold rounded uppercase",
-                style: { fontFamily: "Noto Sans, sans-serif" },
                 children: label
               }
             ),
-            !isEditingProp && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "inline-flex items-center gap-1 text-[10px] font-medium text-green-600 dark:text-green-500", children: [
+            !isEditingProp && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "inline-flex items-center gap-1 text-[10px] font-medium text-green-500 dark:text-green-500", children: [
               "Suggested by an Agent",
               /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
                 Pencil,
@@ -34231,7 +34230,7 @@ var FormCard = import_react56.default.memo(
       "div",
       {
         className: cn(
-          "relative w-full rounded-[20px] bg-background dark:bg-gray100 border border-gray400 shadow-lg overflow-hidden mb-6",
+          "relative w-full rounded-[20px] bg-background dark:bg-gray100 border border-gray400 shadow-lg overflow-hidden mb-6 font-noto",
           className
         ),
         onMouseEnter: () => setShowCopyButton(true),
@@ -34251,7 +34250,6 @@ var FormCard = import_react56.default.memo(
               "h3",
               {
                 className: "text-gray900 mb-12",
-                style: { fontFamily: "Noto Sans, sans-serif" },
                 children: title
               }
             ),
@@ -35378,14 +35376,24 @@ var CampaignSeedCard = import_react60.default.memo(
   ({
     selectionStatus,
     isLatestMessage = true,
+    hasUserResponded = false,
     className,
     fields: providedFields,
     data,
+    onAction,
     ...formCardProps
   }) => {
     const fields = (0, import_react60.useMemo)(() => {
       return providedFields || buildCampaignSeedFields(data);
     }, [providedFields, data]);
+    const handleProceed = () => {
+      onAction?.({
+        type: "brief_confirmation",
+        value: "Continue to concepts",
+        data
+      });
+    };
+    const effectiveIsLatest = isLatestMessage && !hasUserResponded;
     return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       FormCard,
       {
@@ -35393,9 +35401,12 @@ var CampaignSeedCard = import_react60.default.memo(
         data,
         title: formCardProps.title || "Campaign Brief",
         fields,
+        proceedLabel: "Continue to concepts",
+        onProceed: handleProceed,
         showTimeline: true,
+        isLatestMessage: effectiveIsLatest,
         className: cn("font-noto", className),
-        footer: !isLatestMessage && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
+        footer: !effectiveIsLatest && (selectionStatus || hasUserResponded) ? /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(CircleCheck, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { children: selectionStatus === "agent" ? "Suggested by Agent" : "Selected by you" })
         ] }) : formCardProps.footer
@@ -35470,16 +35481,26 @@ var SearchSpecCard = import_react61.default.memo(
   ({
     selectionStatus,
     isLatestMessage = true,
+    hasUserResponded = false,
     className,
     fields: providedFields,
     data,
     specData,
+    onAction,
     ...formCardProps
   }) => {
     const resolvedData = data || specData;
     const fields = (0, import_react61.useMemo)(() => {
       return providedFields || buildSearchSpecFields(resolvedData ?? {});
     }, [providedFields, resolvedData]);
+    const handleProceed = () => {
+      onAction?.({
+        type: "search_spec_confirmation",
+        value: "Continue with search",
+        data: resolvedData
+      });
+    };
+    const effectiveIsLatest = isLatestMessage && !hasUserResponded;
     return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
       FormCard,
       {
@@ -35487,8 +35508,11 @@ var SearchSpecCard = import_react61.default.memo(
         data: resolvedData ?? {},
         title: formCardProps.title || "Search Specification",
         fields,
+        proceedLabel: "Continue with search",
+        onProceed: handleProceed,
+        isLatestMessage: effectiveIsLatest,
         className,
-        footer: !isLatestMessage && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1", children: [
+        footer: !effectiveIsLatest && (selectionStatus || hasUserResponded) ? /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(CircleCheck, { className: "h-4 w-4" }),
           /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by User" })
         ] }) : formCardProps.footer
@@ -35512,11 +35536,15 @@ var MCQCard = import_react62.default.memo(
     isLatestMessage = true,
     isLoading = false,
     className,
-    selectionStatus,
+    // selectionStatus,
     onAction,
-    disabled = false
+    disabled = false,
+    disableContinueInDiscovery
+    // optional prop
   }) => {
-    const [selectedOption, setSelectedOption] = import_react62.default.useState(propsSelectedOption);
+    const [selectedOption, setSelectedOption] = import_react62.default.useState(
+      propsSelectedOption
+    );
     const [isProceeded, setIsProceeded] = import_react62.default.useState(false);
     import_react62.default.useEffect(() => {
       if (propsSelectedOption) {
@@ -35524,6 +35552,7 @@ var MCQCard = import_react62.default.memo(
         setIsProceeded(true);
       }
     }, [propsSelectedOption]);
+    const isDiscovery = disableContinueInDiscovery !== void 0 ? disableContinueInDiscovery : typeof window !== "undefined" && window.location.pathname.includes("creator-discovery");
     const handleOptionClick = (key, e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -35542,11 +35571,13 @@ var MCQCard = import_react62.default.memo(
         onAction?.({
           type: "mcq_selection",
           value: result,
-          label: options[result] || result
+          label: options && options[result] || result
         });
       }
     };
-    const isInteractionDisabled = disabled || !isLatestMessage || isProceeded;
+    const isOptionsDisabled = disabled || !isLatestMessage || isProceeded && !disableContinueInDiscovery;
+    const isContinueDisabled = disabled || !isLatestMessage || isProceeded || isDiscovery;
+    const optionsEntries = options ? Object.entries(options) : [];
     return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
       "div",
       {
@@ -35556,7 +35587,7 @@ var MCQCard = import_react62.default.memo(
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("h4", { className: "font-medium text-foreground px-3 py-1 rounded-md inline-block mb-2", children: question }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "space-y-4", children: Object.entries(options).map(([key, label]) => {
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "space-y-4", children: optionsEntries.map(([key, label]) => {
             const isSelected = selectedOption === key;
             const isRecommended = key === recommended;
             return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
@@ -35566,8 +35597,8 @@ var MCQCard = import_react62.default.memo(
                 className: cn(
                   "cursor-pointer rounded-xl p-3 transition-colors relative",
                   "border border-transparent bg-paperBackground",
-                  !selectedOption && !isInteractionDisabled && "hover:border-gray500",
-                  (isLoading || isInteractionDisabled) && "opacity-50 cursor-not-allowed"
+                  !selectedOption && !isOptionsDisabled && "hover:border-gray500",
+                  (isLoading || isOptionsDisabled) && "opacity-50 cursor-not-allowed"
                 ),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "absolute top-1/2 left-4 transform -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
@@ -35577,7 +35608,7 @@ var MCQCard = import_react62.default.memo(
                         "w-5 h-5 rounded-full border flex items-center justify-center transition-colors",
                         isSelected ? "border-purple100 bg-gray300" : cn(
                           "border-gray300 bg-background",
-                          !selectedOption && !isInteractionDisabled && "hover:border-purple100"
+                          !selectedOption && !isOptionsDisabled && "hover:border-purple100"
                         )
                       ),
                       children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-purple100" })
@@ -35609,8 +35640,8 @@ var MCQCard = import_react62.default.memo(
             /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
               "button",
               {
-                onClick: (e) => handleProceed(e),
-                disabled: isInteractionDisabled || isLoading || !selectedOption && !recommended,
+                onClick: handleProceed,
+                disabled: isContinueDisabled || isLoading || !selectedOption && !recommended,
                 className: cn(
                   "flex-3 px-4 py-2 border rounded-full text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
                   "bg-purpleLight dark:bg-purple200 hover:bg-purpleText1 dark:hover:bg-purple100 text-purpleText2 dark:text-purpleText border-purpleText1 dark:border-purple-border dark:hover:text-white"
@@ -35618,10 +35649,7 @@ var MCQCard = import_react62.default.memo(
                 children: isLoading ? "Sending..." : "Continue"
               }
             ),
-            isLatestMessage ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "flex-1" }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "flex-1 text-right text-xs bg-green100 text-green-600 dark:text-green500", children: selectionStatus === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex flex-col gap-1 sm:flex-row sm:justify-end", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "whitespace-nowrap", children: "Suggested by an Agent," }),
-              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "whitespace-nowrap", children: "Approved by You" })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { children: "Selected by you" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "flex-1" })
           ] })
         ]
       }
@@ -36204,10 +36232,12 @@ var CampaignConceptCard = import_react64.default.memo(
     onToggle,
     data,
     fields: providedFields,
-    title,
+    title: propsTitle,
     selectionStatus,
     isLatestMessage = true,
+    hasUserResponded = false,
     className,
+    onAction,
     ...formCardProps
   }) => {
     const [internalIsOpen, setInternalIsOpen] = (0, import_react64.useState)(false);
@@ -36219,38 +36249,102 @@ var CampaignConceptCard = import_react64.default.memo(
         setInternalIsOpen(!internalIsOpen);
       }
     };
+    const cardTitle = propsTitle || data.title || data.name || data.concept_name || data.conceptName || "Campaign Concept";
+    const handleProceed = () => {
+      onAction?.({
+        type: "concept_selection",
+        value: typeof cardTitle === "string" ? cardTitle : JSON.stringify(cardTitle),
+        data
+      });
+    };
+    const effectiveIsLatest = isLatestMessage && !hasUserResponded;
     const fields = (0, import_react64.useMemo)(() => {
       const baseFields = providedFields || generateFieldsFromData(data);
       return baseFields.map((field) => {
-        if (field.key === "budgetAllocation") {
+        if (field.key === "budgetAllocation" || field.key === "budget_allocation") {
           return {
             ...field,
+            label: "Budget Allocation",
             renderDisplay: (val) => {
-              if (!Array.isArray(val)) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { children: val });
-              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "space-y-2", children: val.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex items-center gap-2 text-xs font-medium", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("span", { children: [
-                  idx + 1,
-                  "."
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "bg-background bg-gray400 border border-white/10 px-2 py-0.5 rounded text-gray-300", children: item.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-gray-400", children: "=" }),
-                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "bg-background bg-gray400 border border-white/10 px-2 py-0.5 rounded text-gray-300", children: item.value })
-              ] }, idx)) });
+              if (val && typeof val === "object" && !Array.isArray(val)) {
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: Object.entries(val).map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
+                  "div",
+                  {
+                    className: "flex items-center gap-1.5 bg-background bg-gray400 border border-white/10 px-2 py-1 rounded shadow-sm",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("span", { className: "text-[10px] text-gray-400 font-bold uppercase tracking-tight", children: [
+                        k.replace(/_/g, " "),
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-xs text-white font-medium", children: String(v) })
+                    ]
+                  },
+                  k
+                )) });
+              }
+              if (Array.isArray(val)) {
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: val.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
+                  "div",
+                  {
+                    className: "flex items-center gap-1.5 bg-background bg-gray400 border border-white/10 px-2 py-1 rounded shadow-sm",
+                    children: [
+                      item.label && /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("span", { className: "text-[10px] text-gray-400 font-bold uppercase tracking-tight", children: [
+                        item.label,
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-xs text-white font-medium", children: String(item.value || item) })
+                    ]
+                  },
+                  idx
+                )) });
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-gray-300 text-sm", children: val ? String(val) : "-" });
             }
           };
         }
-        if (field.key === "estimatedCreators") {
+        if (field.key === "estimatedCreators" || field.key === "estimated_creators") {
           return {
             ...field,
+            label: "Estimated Creators",
             renderDisplay: (val) => {
-              if (!Array.isArray(val)) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-white font-medium", children: val });
-              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex gap-2", children: val.map((v, idx) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "bg-background bg-gray400 border border-white/10 px-2 py-0.5 rounded text-white text-xs font-medium", children: v }, idx)) });
+              if (Array.isArray(val)) {
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex gap-2 pt-1", children: val.map((v, idx) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                  "div",
+                  {
+                    className: "bg-background bg-purple200 border border-purple100/20 px-2 py-0.5 rounded text-white text-xs font-medium",
+                    children: String(v)
+                  },
+                  idx
+                )) });
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-white font-medium", children: val ? String(val) : "-" });
+            }
+          };
+        }
+        if (field.key === "platforms") {
+          return {
+            ...field,
+            renderDisplay: (val) => {
+              const platforms = Array.isArray(val) ? val : typeof val === "string" ? val.split(/,\s*/) : [val];
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: platforms.map((p) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                "div",
+                {
+                  className: "px-2 py-0.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-[10px] font-bold uppercase",
+                  children: String(p)
+                },
+                String(p)
+              )) });
             }
           };
         }
         return {
           ...field,
-          renderDisplay: (val) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-gray-300 text-sm", children: val })
+          renderDisplay: (val) => {
+            if (typeof val === "object" && val !== null) {
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "text-gray-300 text-xs font-mono bg-black/20 p-2 rounded border border-white/5 mt-1 overflow-auto max-h-24", children: JSON.stringify(val, null, 2) });
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-gray-300 text-sm", children: String(val) });
+          }
         };
       });
     }, [providedFields, data]);
@@ -36270,13 +36364,22 @@ var CampaignConceptCard = import_react64.default.memo(
               onClick: handleToggle,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex flex-col gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("h3", { className: "text-lg font-semibold text-white tracking-wide", children: title || data.title }),
-                  isRecommended && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest text-[#22C55E]", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "bg-[#22C55E]/10 px-2 py-0.5 rounded border border-[#22C55E]/20", children: "Recommended" }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("h3", { className: "text-lg font-semibold text-white tracking-wide", children: typeof cardTitle === "object" ? JSON.stringify(cardTitle) : String(cardTitle) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+                    isRecommended && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest text-[#22C55E]", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "bg-[#22C55E]/10 px-2 py-0.5 rounded border border-[#22C55E]/20", children: "Recommended" }) }),
+                    hasUserResponded && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest text-[#3B82F6]", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "bg-[#3B82F6]/10 px-2 py-0.5 rounded border border-[#3B82F6]/20", children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by You" }) })
+                  ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: cn(
-                  "p-2 rounded-lg bg-white/5 border border-white/10 text-gray-400 transition-transform duration-300",
-                  isOpen && "rotate-180"
-                ), children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ChevronDown, { className: "h-4 w-4" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "p-2 rounded-lg bg-white/5 border border-white/10 text-gray-400 transition-transform duration-300",
+                      isOpen && "rotate-180"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ChevronDown, { className: "h-4 w-4" })
+                  }
+                )
               ]
             }
           ),
@@ -36292,12 +36395,15 @@ var CampaignConceptCard = import_react64.default.memo(
                 FormCard,
                 {
                   ...formCardProps,
-                  title: title || data.title || "Campaign Concept",
+                  title: typeof cardTitle === "object" ? JSON.stringify(cardTitle) : String(cardTitle),
                   data,
                   fields,
                   showTimeline: true,
+                  proceedLabel: "Continue with this concept",
+                  onProceed: handleProceed,
+                  isLatestMessage: effectiveIsLatest,
                   className: "bg-transparent border-none shadow-none mb-0 p-0",
-                  footer: !isLatestMessage && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
+                  footer: !effectiveIsLatest && (selectionStatus || hasUserResponded) ? /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(CircleCheck, { className: "h-3.5 w-3.5" }),
                     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by You" })
                   ] }) : formCardProps.footer