@streamoid/chat-components 0.2.7 → 0.2.9

package/dist/index.js

@@ -417,6 +417,38 @@ function DynamicForm(props) {
   const fields = uiProps.fields ?? [];
   const submitText = uiProps.submit_button_text ?? "Submit";
   const cancelText = uiProps.cancel_button_text;
+  const getTextValue = (value, fallback = "") => {
+    if (typeof value === "string") return value;
+    if (typeof value === "number" || typeof value === "boolean") return String(value);
+    if (value && typeof value === "object") {
+      const obj = value;
+      if (typeof obj.label === "string") return obj.label;
+      if (typeof obj.text === "string") return obj.text;
+      if (typeof obj.value === "string") return obj.value;
+    }
+    return fallback;
+  };
+  const normalizeMediaUrls = (raw) => {
+    if (Array.isArray(raw)) {
+      return raw.filter((item) => typeof item === "string" && item.trim().length > 0);
+    }
+    if (typeof raw === "string" && raw.trim().length > 0) {
+      const maybeJson = raw.trim();
+      if (maybeJson.startsWith("[") && maybeJson.endsWith("]")) {
+        try {
+          const parsed = JSON.parse(maybeJson);
+          if (Array.isArray(parsed)) {
+            return parsed.filter(
+              (item) => typeof item === "string" && item.trim().length > 0
+            );
+          }
+        } catch {
+        }
+      }
+      return maybeJson.split(/[\n,]/).map((part) => part.trim()).filter(Boolean);
+    }
+    return [];
+  };
   const inferMediaTypeFromUrl = (url) => {
     const cleanUrl = (url || "").split("?")[0].toLowerCase();
     const videoExts = [".mp4", ".mov", ".webm", ".m4v", ".avi", ".mkv"];
@@ -438,7 +470,7 @@ function DynamicForm(props) {
       } else if (field.type === "approval") {
         values[field.id] = null;
       } else if (field.type === "media_approval") {
-        const mediaUrls = Array.isArray(field.media_urls) ? field.media_urls.filter(Boolean) : [];
+        const mediaUrls = normalizeMediaUrls(field.media_urls);
         values[field.id] = {
           decision: null,
           feedback: "",
@@ -462,6 +494,7 @@ function DynamicForm(props) {
   const [editingTodoContent, setEditingTodoContent] = useState("");
   const [newTodoInputs, setNewTodoInputs] = useState({});
   const [fileUploadState, setFileUploadState] = useState({});
+  const [mediaPreview, setMediaPreview] = useState(null);
   const scrollRef = useRef(null);
   const [canScrollUp, setCanScrollUp] = useState(false);
   const [canScrollDown, setCanScrollDown] = useState(false);
@@ -694,7 +727,13 @@ function DynamicForm(props) {
       const field = fields.find((f) => f.id === fieldId);
       const fieldLabel = field?.label || fieldId;
       let displayVal;
-      if (field?.options && typeof val === "string") {
+      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)) {
@@ -853,13 +892,13 @@ ${valueSummaryParts.join("\n")}` : "";
           )
         ] });
       case "media_approval": {
-        const mediaUrls = Array.isArray(field.media_urls) ? field.media_urls.filter(Boolean) : [];
         const mediaValue = formValues[field.id] ?? {
           decision: null,
           feedback: "",
-          media_urls: mediaUrls,
+          media_urls: normalizeMediaUrls(field.media_urls),
           media_type: field.media_type ?? "mixed"
         };
+        const mediaUrls = normalizeMediaUrls(field.media_urls ?? mediaValue.media_urls);
         const feedbackLabel = field.feedback_label ?? "What should be changed?";
         const feedbackPlaceholder = field.feedback_placeholder ?? "Describe what needs to be modified.";
         const approveLabel = field.approve_label ?? "Approve";
@@ -871,13 +910,29 @@ ${valueSummaryParts.join("\n")}` : "";
               "div",
               {
                 className: "rounded-md border border-border overflow-hidden bg-muted/20",
-                children: mediaType === "video" ? /* @__PURE__ */ jsx10("video", { src: url, controls: true, className: "w-full h-44 object-cover bg-black" }) : /* @__PURE__ */ jsx10(
-                  "img",
+                children: /* @__PURE__ */ jsx10(
+                  "button",
                   {
-                    src: url,
-                    alt: `Generated media ${idx + 1}`,
-                    className: "w-full h-44 object-cover",
-                    loading: "lazy"
+                    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-cover bg-black"
+                      }
+                    ) : /* @__PURE__ */ jsx10(
+                      "img",
+                      {
+                        src: url,
+                        alt: `Generated media ${idx + 1}`,
+                        className: "w-full h-44 object-cover",
+                        loading: "lazy"
+                      }
+                    )
                   }
                 )
               },
@@ -893,7 +948,7 @@ ${valueSummaryParts.join("\n")}` : "";
                 onChange: (e) => handleFieldChange(field.id, {
                   ...mediaValue,
                   feedback: e.target.value,
-                  media_urls: mediaValue.media_urls ?? mediaUrls,
+                  media_urls: normalizeMediaUrls(mediaValue.media_urls ?? mediaUrls),
                   media_type: mediaValue.media_type ?? field.media_type ?? "mixed"
                 }),
                 placeholder: feedbackPlaceholder,
@@ -1181,12 +1236,14 @@ ${valueSummaryParts.join("\n")}` : "";
           children: /* @__PURE__ */ jsxs2("div", { className: "space-y-3 pb-2", children: [
             fields.map((field) => {
               const statusText = getFieldStatusText(field);
+              const labelText = getTextValue(field.label, field.id);
+              const descriptionText = getTextValue(field.description, "");
               return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
                 /* @__PURE__ */ jsxs2(Label2, { className: "text-xs font-medium flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsx10("span", { children: field.label }),
+                  /* @__PURE__ */ jsx10("span", { children: labelText }),
                   field.required && /* @__PURE__ */ jsx10("span", { className: "text-destructive text-[10px]", children: "*" })
                 ] }),
-                field.description && /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-muted-foreground leading-snug", children: field.description }),
+                descriptionText && /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-muted-foreground leading-snug", children: descriptionText }),
                 renderField(field),
                 statusText && field.type !== "file" && field.type !== "todo_list" && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 text-emerald-600 mt-0.5", children: [
                   /* @__PURE__ */ jsx10(CheckCircle, { className: "w-2.5 h-2.5" }),
@@ -1202,7 +1259,7 @@ ${valueSummaryParts.join("\n")}` : "";
         }
       ),
       /* @__PURE__ */ jsx10("div", { className: `scroll-fade-bottom ${!canScrollDown ? "fade-hidden" : ""}` }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2 px-5 py-2 flex-shrink-0", children: [
+      !(fields.length === 1 && fields[0]?.type === "media_approval") && /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2 px-5 py-2 flex-shrink-0", children: [
         cancelText && /* @__PURE__ */ jsx10(
           Button,
           {
@@ -1227,7 +1284,50 @@ ${valueSummaryParts.join("\n")}` : "";
           }
         )
       ] })
-    ] })
+    ] }),
+    mediaPreview && /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4",
+        onClick: () => setMediaPreview(null),
+        children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "relative w-full max-w-5xl max-h-[90vh] bg-background rounded-lg border border-border overflow-hidden",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx10(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => setMediaPreview(null),
+                  className: "absolute right-2 top-2 z-10 bg-background/80 hover:bg-background",
+                  children: /* @__PURE__ */ jsx10(X, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx10("div", { className: "w-full h-full p-2 flex items-center justify-center", children: mediaPreview.type === "video" ? /* @__PURE__ */ jsx10(
+                "video",
+                {
+                  src: mediaPreview.url,
+                  controls: true,
+                  autoPlay: true,
+                  className: "max-w-full max-h-[84vh] object-contain bg-black rounded"
+                }
+              ) : /* @__PURE__ */ jsx10(
+                "img",
+                {
+                  src: mediaPreview.url,
+                  alt: "Full preview",
+                  className: "max-w-full max-h-[84vh] object-contain rounded"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 

package/package.json

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