pxengine 0.1.27 → 0.1.28

package/dist/index.cjs

@@ -34202,7 +34202,7 @@ var import_react56 = __toESM(require("react"), 1);
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var FormCard = import_react56.default.memo(
   ({
-    title,
+    // title,
     fields,
     data,
     editingFields = {},
@@ -34218,7 +34218,6 @@ var FormCard = import_react56.default.memo(
     className,
     footer
   }) => {
-    const [showCopyButton, setShowCopyButton] = (0, import_react56.useState)(false);
     const handleCopyAll = () => {
       const text = fields.map((field) => {
         const value = data[field.key];
@@ -34233,10 +34232,8 @@ var FormCard = import_react56.default.memo(
           "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),
-        onMouseLeave: () => setShowCopyButton(false),
         children: [
-          showCopyButton && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "button",
             {
               onClick: handleCopyAll,
@@ -34246,13 +34243,6 @@ var FormCard = import_react56.default.memo(
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "p-6 relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-              "h3",
-              {
-                className: "text-gray900 mb-12",
-                children: title
-              }
-            ),
             showTimeline && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
               "div",
               {
@@ -36241,6 +36231,7 @@ var CampaignConceptCard = import_react64.default.memo(
     ...formCardProps
   }) => {
     const [internalIsOpen, setInternalIsOpen] = (0, import_react64.useState)(false);
+    const [copied, setCopied] = (0, import_react64.useState)(false);
     const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
     const handleToggle = () => {
       if (onToggle) {
@@ -36250,55 +36241,109 @@ var CampaignConceptCard = import_react64.default.memo(
       }
     };
     const cardTitle = propsTitle || data.title || data.name || data.concept_name || data.conceptName || "Campaign Concept";
+    const isSelected = selectionStatus != null;
+    const flattenValue = (val) => {
+      if (val === null || val === void 0) return "-";
+      if (Array.isArray(val)) {
+        return val.map((item) => {
+          if (typeof item === "object" && item !== null) {
+            return item.label || item.value || item.name || JSON.stringify(item);
+          }
+          return String(item);
+        }).join(", ");
+      }
+      if (typeof val === "object") {
+        return Object.entries(val).map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`).join(", ");
+      }
+      return String(val);
+    };
+    const handleCopyAll = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const allFields = providedFields || generateFieldsFromData(data);
+      const lines = [
+        typeof cardTitle === "string" ? cardTitle : JSON.stringify(cardTitle),
+        "",
+        ...allFields.map((f) => `${f.label}: ${flattenValue(data[f.key])}`)
+      ];
+      navigator.clipboard.writeText(lines.join("\n")).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      });
+    };
     const handleProceed = () => {
       onAction?.({
         type: "concept_selection",
-        value: typeof cardTitle === "string" ? cardTitle : JSON.stringify(cardTitle),
+        value: data.title || data.name || data.concept_name || data.conceptName,
         data
       });
     };
     const effectiveIsLatest = isLatestMessage && !hasUserResponded;
     const fields = (0, import_react64.useMemo)(() => {
       const baseFields = providedFields || generateFieldsFromData(data);
-      return baseFields.map((field) => {
+      const FIELD_ORDER = [
+        "description",
+        "creator_strategy",
+        "primary_kpi",
+        "secondary_kpis",
+        "budget_allocation",
+        "budgetAllocation",
+        "estimated_creators",
+        "estimatedCreators",
+        "platforms",
+        "target_platforms",
+        "targetPlatforms"
+      ];
+      const sorted = [...baseFields].sort((a, b) => {
+        const ai = FIELD_ORDER.indexOf(a.key);
+        const bi = FIELD_ORDER.indexOf(b.key);
+        if (ai !== -1 && bi !== -1) return ai - bi;
+        if (ai !== -1) return -1;
+        if (bi !== -1) return 1;
+        return 0;
+      });
+      return sorted.map((field) => {
         if (field.key === "budgetAllocation" || field.key === "budget_allocation") {
+          const formatKey = (k) => k.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase());
+          const formatVal = (v) => {
+            const n = Number(v);
+            if (!isNaN(n) && String(v).trim() !== "") return `${n}%`;
+            return String(v);
+          };
           return {
             ...field,
             label: "Budget Allocation",
             renderDisplay: (val) => {
-              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 (!val) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
               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)("div", { className: "space-y-2", children: val.map((item, idx) => {
+                  const label = item?.label ?? item?.key ?? `Item ${idx + 1}`;
+                  const value = item?.value ?? item;
+                  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("span", { className: "text-muted-foreground font-medium", children: [
+                      idx + 1,
+                      "."
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm font-medium rounded-md border border-[#85888f] dark:border-gray900 font-grotesk", children: String(label) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground", children: "=" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm rounded-md border border-[#85888f] dark:border-gray900 font-grotesk font-medium", children: formatVal(value) })
+                  ] }, idx);
+                }) });
+              }
+              if (typeof val === "object") {
+                const entries = Object.entries(val);
+                if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "space-y-2", children: entries.map(([k, v], idx) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("span", { className: "text-muted-foreground font-medium", children: [
+                    idx + 1,
+                    "."
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm font-medium rounded-md border border-[#85888f] dark:border-gray900 font-grotesk", children: formatKey(k) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground", children: "=" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm rounded-md border border-[#85888f] dark:border-gray900 font-grotesk font-medium", children: formatVal(v) })
+                ] }, k)) });
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-gray-300 text-sm", children: val ? String(val) : "-" });
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: String(val) });
             }
           };
         }
@@ -36307,32 +36352,64 @@ var CampaignConceptCard = import_react64.default.memo(
             ...field,
             label: "Estimated Creators",
             renderDisplay: (val) => {
+              if (!val) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
+              if (typeof val === "object" && !Array.isArray(val)) {
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center px-2 py-1 bg-[#85888f] dark:bg-grayPill text-white dark:text-foreground text-sm font-medium rounded-md border font-grotesk", children: val.min ?? 0 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground", children: "-" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center px-2 py-1 bg-[#85888f] dark:bg-grayPill text-white dark:text-foreground text-sm font-medium rounded-md border font-grotesk", children: val.max ?? 0 })
+                ] });
+              }
+              if (typeof val === "string" && val.includes("-")) {
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex items-center gap-2", children: val.split("-").map((part, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_react64.default.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center px-2 py-1 bg-[#85888f] dark:bg-grayPill text-white dark:text-foreground text-sm font-medium rounded-md border font-grotesk", children: part.trim() }),
+                  idx < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground", children: "-" })
+                ] }, 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",
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex items-center gap-2", children: val.map((v, idx) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                  "span",
                   {
-                    className: "bg-background bg-purple200 border border-purple100/20 px-2 py-0.5 rounded text-white text-xs font-medium",
+                    className: "inline-flex items-center px-2 py-1 bg-[#85888f] dark:bg-grayPill text-white dark:text-foreground text-sm font-medium rounded-md border font-grotesk",
                     children: String(v)
                   },
                   idx
                 )) });
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-white font-medium", children: val ? String(val) : "-" });
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-txtColor font-medium", children: String(val) });
             }
           };
         }
-        if (field.key === "platforms") {
+        if (field.key === "primary_kpi" || field.key === "primaryKpi") {
+          return {
+            ...field,
+            label: field.label || "Primary KPI",
+            renderDisplay: (val) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground text-sm", children: val ? String(val) : "-" })
+          };
+        }
+        if (field.key === "secondary_kpis" || field.key === "secondaryKpis") {
           return {
             ...field,
+            label: field.label || "Secondary KPIs",
             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",
+              const display = Array.isArray(val) ? val.map(String).join(", ") : val ? String(val) : "-";
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground text-sm", children: display });
+            }
+          };
+        }
+        if (field.key === "platforms" || field.key === "target_platforms" || field.key === "targetPlatforms") {
+          return {
+            ...field,
+            renderDisplay: (val) => {
+              const platforms = Array.isArray(val) ? val.map(String) : typeof val === "string" ? val.split(/,\s*/).map((s) => s.trim()).filter(Boolean) : val ? [String(val)] : [];
+              if (platforms.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: platforms.map((p) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                "span",
                 {
-                  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)
+                  className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm font-medium rounded-md border border-[#85888f] dark:border-gray900 font-grotesk",
+                  children: p
                 },
-                String(p)
+                p
               )) });
             }
           };
@@ -36340,10 +36417,24 @@ var CampaignConceptCard = import_react64.default.memo(
         return {
           ...field,
           renderDisplay: (val) => {
+            if (Array.isArray(val)) {
+              if (val.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: val.map((item, idx) => {
+                const label = typeof item === "object" && item !== null ? item.label || item.value || item.name || JSON.stringify(item) : String(item);
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                  "span",
+                  {
+                    className: "inline-block bg-paperBackground border border-gray400 text-txtColor text-xs px-2 py-0.5 rounded-full",
+                    children: label
+                  },
+                  idx
+                );
+              }) });
+            }
             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)("div", { className: "text-muted-foreground text-xs font-mono bg-paperBackground p-2 rounded border border-gray400 mt-1 overflow-auto max-h-24", children: Object.entries(val).map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`).join("\n") });
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-gray-300 text-sm", children: String(val) });
+            return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-txtColor text-sm", children: val !== void 0 && val !== null ? String(val) : "-" });
           }
         };
       });
@@ -36352,34 +36443,55 @@ var CampaignConceptCard = import_react64.default.memo(
       "div",
       {
         className: cn(
-          "w-full rounded-[20px] transition-all duration-300 bg-background dark:bg-gray50",
-          isOpen ? "border border-green-500/50 shadow-[0_0_15px_rgba(34,197,94,0.1)]" : "border border-gray400",
+          "w-full rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
+          isSelected || isRecommended ? "border-2 border-green500" : "border-gray400",
           className
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
             "div",
             {
-              className: "flex items-center justify-between p-6 cursor-pointer select-none",
+              className: "p-6 relative flex items-start justify-between cursor-pointer select-none",
               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: typeof cardTitle === "object" ? JSON.stringify(cardTitle) : String(cardTitle) }),
+                /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("h2", { className: "mb-1 py-1 text-txtColor font-bold", 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" }) })
+                    !effectiveIsLatest && (selectionStatus || 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.jsxs)("div", { className: "flex items-center gap-2 ml-3", onClick: (e) => e.stopPropagation(), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                    "button",
+                    {
+                      onClick: handleCopyAll,
+                      title: "Copy all details",
+                      className: "p-2 bg-background hover:bg-gray200 dark:hover:bg-gray200 text-foreground rounded-lg shadow-lg transition-all active:scale-95",
+                      "aria-label": "Copy all details",
+                      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Check, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Copy, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleToggle();
+                      },
+                      className: "p-2 bg-background hover:bg-gray200 dark:hover:bg-gray200 text-foreground rounded-lg shadow-lg",
+                      "aria-label": isOpen ? "Collapse" : "Expand",
+                      title: isOpen ? "Collapse" : "Expand",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                        ChevronDown,
+                        {
+                          className: `h-4 w-4 transition-transform ${isOpen ? "rotate-0" : "-rotate-90"}`
+                        }
+                      )
+                    }
+                  )
+                ] })
               ]
             }
           ),
@@ -36389,27 +36501,39 @@ var CampaignConceptCard = import_react64.default.memo(
               initial: { height: 0, opacity: 0 },
               animate: { height: "auto", opacity: 1 },
               exit: { height: 0, opacity: 0 },
-              transition: { duration: 0.3, ease: "easeInOut" },
+              transition: { duration: 0.2, ease: "easeIn" },
               className: "overflow-hidden",
-              children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "px-6 pb-6 pt-0 border-t border-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                FormCard,
-                {
-                  ...formCardProps,
-                  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: !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
-                }
-              ) })
-            }
+              children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "p-6 w-full overflow-hidden relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                  "div",
+                  {
+                    className: "absolute left-[60px] top-[100px] bottom-[60px] w-[3px]",
+                    style: {
+                      background: `radial-gradient(circle closest-side, #3C3D3E 98%, transparent) 50%/2px 5px repeat-y, linear-gradient(#3C3D3E 50%, transparent 0) 50%/2px 10px repeat-y`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                  FormCard,
+                  {
+                    ...formCardProps,
+                    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: !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
+                  }
+                )
+              ] })
+            },
+            "expanded-content"
           ) })
         ]
       }