@streamoid/chat-components 0.2.8 → 0.2.9

package/dist/index.js

@@ -494,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);
@@ -909,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"
+                      }
+                    )
                   }
                 )
               },
@@ -1267,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.8",
+  "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",