@streamoid/chat-components 0.2.6 → 0.2.8

package/dist/index.d.ts

@@ -10,9 +10,10 @@ interface TodoItem {
     content: string;
     status: "pending" | "completed";
 }
+type MediaType = "image" | "video" | "mixed";
 interface DynamicFormField {
     id: string;
-    type: "text" | "textarea" | "number" | "select" | "multiselect" | "checkbox" | "radio" | "approval" | "todo_list" | "file";
+    type: "text" | "textarea" | "number" | "select" | "multiselect" | "checkbox" | "radio" | "approval" | "media_approval" | "todo_list" | "file";
     label?: string;
     description?: string;
     placeholder?: string;
@@ -22,6 +23,12 @@ interface DynamicFormField {
     items?: TodoItem[];
     accept?: string;
     multiple?: boolean;
+    media_urls?: string[];
+    media_type?: MediaType;
+    approve_label?: string;
+    reject_label?: string;
+    feedback_label?: string;
+    feedback_placeholder?: string;
 }
 interface DynamicFormProps {
     workspaceId: string;
@@ -55,7 +62,7 @@ declare const dynamicFormManifest: {
     readonly name: "common:dynamic-form";
     readonly aliases: readonly ["dynamic_form"];
     readonly service: "common";
-    readonly description: "Server-driven dynamic form supporting text, textarea, number, select, multiselect, checkbox, radio, approval, todo_list, and file upload fields";
+    readonly description: "Server-driven dynamic form supporting text, textarea, number, select, multiselect, checkbox, radio, approval, media_approval, todo_list, and file upload fields";
     readonly containerStyle: {
         readonly display: "flex";
         readonly position: "relative";

package/dist/index.js

@@ -417,6 +417,46 @@ 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"];
+    const imageExts = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp", ".svg", ".heic"];
+    if (videoExts.some((ext) => cleanUrl.endsWith(ext))) return "video";
+    if (imageExts.some((ext) => cleanUrl.endsWith(ext))) return "image";
+    return "image";
+  };
   const getInitialValues = () => {
     if (submittedValues) return { ...submittedValues };
     const values = {};
@@ -429,6 +469,14 @@ function DynamicForm(props) {
         values[field.id] = field.items.map((item) => ({ ...item }));
       } else if (field.type === "approval") {
         values[field.id] = null;
+      } else if (field.type === "media_approval") {
+        const mediaUrls = normalizeMediaUrls(field.media_urls);
+        values[field.id] = {
+          decision: null,
+          feedback: "",
+          media_urls: mediaUrls,
+          media_type: field.media_type ?? "mixed"
+        };
       } else {
         values[field.id] = "";
       }
@@ -629,6 +677,31 @@ function DynamicForm(props) {
     handleFieldChange(fieldId, action);
     await submitForm(approved ? "Approve" : "Reject", { ...formValues, [fieldId]: action });
   };
+  const handleMediaApprovalDecision = async (field, decision) => {
+    const current = formValues[field.id] ?? {
+      decision: null,
+      feedback: "",
+      media_urls: Array.isArray(field.media_urls) ? field.media_urls : [],
+      media_type: field.media_type ?? "mixed"
+    };
+    const feedback = current.feedback?.trim() ?? "";
+    if (decision === "needs_modification" && !feedback) {
+      setError("Feedback is required when requesting modifications.");
+      return;
+    }
+    const nextValue = {
+      ...current,
+      decision,
+      feedback,
+      media_urls: current.media_urls ?? (Array.isArray(field.media_urls) ? field.media_urls : []),
+      media_type: current.media_type ?? field.media_type ?? "mixed"
+    };
+    handleFieldChange(field.id, nextValue);
+    await submitForm(
+      decision === "approved" ? "Approve" : "Needs Modification",
+      { ...formValues, [field.id]: nextValue }
+    );
+  };
   const validateForm = () => {
     for (const field of fields) {
       if (field.required) {
@@ -653,7 +726,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)) {
@@ -811,6 +890,88 @@ ${valueSummaryParts.join("\n")}` : "";
             }
           )
         ] });
+      case "media_approval": {
+        const mediaValue = formValues[field.id] ?? {
+          decision: null,
+          feedback: "",
+          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";
+        const rejectLabel = field.reject_label ?? "Needs Modification";
+        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: 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"
+                  }
+                )
+              },
+              `${field.id}-${idx}`
+            );
+          }) }),
+          /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx10(Label2, { className: "text-xs font-medium", children: feedbackLabel }),
+            /* @__PURE__ */ jsx10(
+              Textarea,
+              {
+                value: mediaValue.feedback || "",
+                onChange: (e) => handleFieldChange(field.id, {
+                  ...mediaValue,
+                  feedback: e.target.value,
+                  media_urls: normalizeMediaUrls(mediaValue.media_urls ?? mediaUrls),
+                  media_type: mediaValue.media_type ?? field.media_type ?? "mixed"
+                }),
+                placeholder: feedbackPlaceholder,
+                className: "bg-background min-h-[72px] w-full text-xs"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex gap-2 justify-end", children: [
+            /* @__PURE__ */ jsxs2(
+              Button,
+              {
+                type: "button",
+                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",
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsx10(AlertCircle, { className: "w-3 h-3 mr-1.5" }),
+                  rejectLabel
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs2(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                onClick: () => handleMediaApprovalDecision(field, "approved"),
+                className: "bg-emerald-600 hover:bg-emerald-700 text-white shadow-none border-transparent h-8 text-xs",
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsx10(CheckCircle, { className: "w-3 h-3 mr-1.5" }),
+                  approveLabel
+                ]
+              }
+            )
+          ] })
+        ] });
+      }
       case "todo_list": {
         const todoItems = formValues[field.id] || [];
         const completedCount = todoItems.filter((i) => i.status === "completed").length;
@@ -1058,12 +1219,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" }),
@@ -1079,7 +1242,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,
           {
@@ -1113,7 +1276,7 @@ var dynamicFormManifest = {
   name: "common:dynamic-form",
   aliases: ["dynamic_form"],
   service: "common",
-  description: "Server-driven dynamic form supporting text, textarea, number, select, multiselect, checkbox, radio, approval, todo_list, and file upload fields",
+  description: "Server-driven dynamic form supporting text, textarea, number, select, multiselect, checkbox, radio, approval, media_approval, todo_list, and file upload fields",
   containerStyle: {
     display: "flex",
     position: "relative",

package/package.json

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