@streamoid/chat-components 0.2.6 → 0.2.7

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,14 @@ function DynamicForm(props) {
   const fields = uiProps.fields ?? [];
   const submitText = uiProps.submit_button_text ?? "Submit";
   const cancelText = uiProps.cancel_button_text;
+  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 +437,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 = Array.isArray(field.media_urls) ? field.media_urls.filter(Boolean) : [];
+        values[field.id] = {
+          decision: null,
+          feedback: "",
+          media_urls: mediaUrls,
+          media_type: field.media_type ?? "mixed"
+        };
       } else {
         values[field.id] = "";
       }
@@ -629,6 +645,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) {
@@ -811,6 +852,88 @@ ${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_type: field.media_type ?? "mixed"
+        };
+        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: 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;
@@ -1113,7 +1236,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.7",
   "description": "Shared chat UI components for the Streamoid chat host — DynamicForm and other cross-service components",
   "type": "module",
   "main": "./dist/index.js",