@streamoid/chat-components 0.2.10 → 0.2.12

package/dist/index.js

@@ -401,7 +401,9 @@ import {
   X,
   Plus,
   Pencil,
-  Trash2
+  Trash2,
+  ChevronLeft,
+  ChevronRight
 } from "lucide-react";
 import { Fragment, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 function DynamicForm(props) {
@@ -495,6 +497,7 @@ function DynamicForm(props) {
   const [newTodoInputs, setNewTodoInputs] = useState({});
   const [fileUploadState, setFileUploadState] = useState({});
   const [mediaPreview, setMediaPreview] = useState(null);
+  const [carouselIndices, setCarouselIndices] = useState({});
   const scrollRef = useRef(null);
   const [canScrollUp, setCanScrollUp] = useState(false);
   const [canScrollDown, setCanScrollDown] = useState(false);
@@ -722,31 +725,7 @@ function DynamicForm(props) {
       form_title: title,
       values
     };
-    const valueSummaryParts = [];
-    for (const [fieldId, val] of Object.entries(values)) {
-      const field = fields.find((f) => f.id === fieldId);
-      const fieldLabel = field?.label || fieldId;
-      let displayVal;
-      if (field?.type === "media_approval" && val && typeof val === "object") {
-        const mediaVal = val;
-        const decisionText = mediaVal.decision ?? "pending";
-        const feedbackText = mediaVal.feedback?.trim() || "none";
-        const mediaCount = Array.isArray(mediaVal.media_urls) ? mediaVal.media_urls.length : 0;
-        displayVal = `decision=${decisionText}, feedback=${feedbackText}, media_count=${mediaCount}`;
-      } else if (field?.options && typeof val === "string") {
-        const opt = field.options.find((o) => o.id === val);
-        displayVal = opt?.label || val;
-      } else if (field?.options && Array.isArray(val)) {
-        displayVal = val.map((v) => field.options.find((o) => o.id === v)?.label || v).join(", ");
-      } else {
-        displayVal = String(val ?? "");
-      }
-      valueSummaryParts.push(`${fieldLabel}: ${displayVal}`);
-    }
-    const valueSummary = valueSummaryParts.length > 0 ? `
-Submitted values:
-${valueSummaryParts.join("\n")}` : "";
-    const messageText = `User clicked "${userAction}" on form "${title}"${valueSummary}`;
+    const messageText = `User clicked "${userAction}" on form "${title}"`;
     try {
       await onSubmit(resumePayload, messageText);
       setSubmittedData({ user_action: userAction, values });
@@ -868,7 +847,7 @@ ${valueSummaryParts.join("\n")}` : "";
               variant: "destructive",
               size: "sm",
               onClick: () => handleApproval(field.id, false),
-              className: "bg-destructive/10 text-destructive hover:bg-destructive/20 border-transparent shadow-none h-8 text-xs",
+              className: "bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-red-500/15 dark:text-red-400 dark:hover:bg-red-500/25 border-transparent shadow-none h-8 text-xs",
               disabled: isLoading,
               children: [
                 /* @__PURE__ */ jsx10(AlertCircle, { className: "w-3 h-3 mr-1.5" }),
@@ -903,42 +882,83 @@ ${valueSummaryParts.join("\n")}` : "";
         const feedbackPlaceholder = field.feedback_placeholder ?? "Describe what needs to be modified.";
         const approveLabel = field.approve_label ?? "Approve";
         const rejectLabel = field.reject_label ?? "Needs Modification";
+        const carouselIdx = carouselIndices[field.id] ?? 0;
+        const hasMultipleMedia = mediaUrls.length > 1;
         return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-          mediaUrls.length > 0 && /* @__PURE__ */ jsx10("div", { className: "grid gap-2 sm:grid-cols-2", children: mediaUrls.map((url, idx) => {
-            const mediaType = field.media_type && field.media_type !== "mixed" ? field.media_type : inferMediaTypeFromUrl(url);
-            return /* @__PURE__ */ jsx10(
-              "div",
-              {
-                className: "rounded-md border border-border overflow-hidden bg-muted/20",
-                children: /* @__PURE__ */ jsx10(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setMediaPreview({ url, type: mediaType }),
-                    className: "w-full text-left cursor-zoom-in",
-                    title: "Click to view full media",
-                    children: mediaType === "video" ? /* @__PURE__ */ jsx10(
-                      "video",
-                      {
-                        src: url,
-                        controls: true,
-                        className: "w-full h-44 object-contain bg-black"
-                      }
-                    ) : /* @__PURE__ */ jsx10(
-                      "img",
-                      {
-                        src: url,
-                        alt: `Generated media ${idx + 1}`,
-                        className: "w-full h-44 object-contain bg-black",
-                        loading: "lazy"
-                      }
-                    )
-                  }
-                )
-              },
-              `${field.id}-${idx}`
-            );
-          }) }),
+          mediaUrls.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "relative rounded-md border border-border overflow-hidden bg-muted/20", children: [
+            (() => {
+              const url = mediaUrls[carouselIdx] ?? mediaUrls[0];
+              const mediaType = field.media_type && field.media_type !== "mixed" ? field.media_type : inferMediaTypeFromUrl(url);
+              return /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMediaPreview({ url, type: mediaType }),
+                  className: "w-full text-left cursor-zoom-in",
+                  title: "Click to view full media",
+                  children: mediaType === "video" ? /* @__PURE__ */ jsx10(
+                    "video",
+                    {
+                      src: url,
+                      controls: true,
+                      className: "w-full h-52 object-contain bg-black"
+                    }
+                  ) : /* @__PURE__ */ jsx10(
+                    "img",
+                    {
+                      src: url,
+                      alt: `Generated media ${carouselIdx + 1}`,
+                      className: "w-full h-52 object-contain bg-black",
+                      loading: "lazy"
+                    }
+                  )
+                }
+              );
+            })(),
+            hasMultipleMedia && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setCarouselIndices((prev) => ({
+                    ...prev,
+                    [field.id]: (carouselIdx - 1 + mediaUrls.length) % mediaUrls.length
+                  })),
+                  className: "absolute left-1.5 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/50 hover:bg-black/70 text-white flex items-center justify-center transition-colors backdrop-blur-sm",
+                  title: "Previous",
+                  children: /* @__PURE__ */ jsx10(ChevronLeft, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setCarouselIndices((prev) => ({
+                    ...prev,
+                    [field.id]: (carouselIdx + 1) % mediaUrls.length
+                  })),
+                  className: "absolute right-1.5 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-black/50 hover:bg-black/70 text-white flex items-center justify-center transition-colors backdrop-blur-sm",
+                  title: "Next",
+                  children: /* @__PURE__ */ jsx10(ChevronRight, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx10("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-2 py-1 rounded-full bg-black/50 backdrop-blur-sm", children: mediaUrls.map((_, idx) => /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setCarouselIndices((prev) => ({ ...prev, [field.id]: idx })),
+                  className: `w-1.5 h-1.5 rounded-full transition-all ${idx === carouselIdx ? "bg-white w-3" : "bg-white/50 hover:bg-white/75"}`,
+                  title: `Go to media ${idx + 1}`
+                },
+                idx
+              )) }),
+              /* @__PURE__ */ jsxs2("div", { className: "absolute top-2 right-2 px-2 py-0.5 rounded-full bg-black/50 backdrop-blur-sm text-white text-[10px] font-medium", children: [
+                carouselIdx + 1,
+                " / ",
+                mediaUrls.length
+              ] })
+            ] })
+          ] }),
           /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsx10(Label2, { className: "text-xs font-medium", children: feedbackLabel }),
             /* @__PURE__ */ jsx10(
@@ -964,7 +984,7 @@ ${valueSummaryParts.join("\n")}` : "";
                 variant: "destructive",
                 size: "sm",
                 onClick: () => handleMediaApprovalDecision(field, "needs_modification"),
-                className: "bg-destructive/10 text-destructive hover:bg-destructive/20 border-transparent shadow-none h-8 text-xs",
+                className: "bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-red-500/15 dark:text-red-400 dark:hover:bg-red-500/25 border-transparent shadow-none h-8 text-xs",
                 disabled: isLoading,
                 children: [
                   /* @__PURE__ */ jsx10(AlertCircle, { className: "w-3 h-3 mr-1.5" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/chat-components",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Shared chat UI components for the Streamoid chat host — DynamicForm and other cross-service components",
   "type": "module",
   "main": "./dist/index.js",