@capillarytech/blaze-ui 5.23.3-beta.1 → 5.23.3-beta.10

package/CapAskAira/CapAiMediaGeneration/index.js

@@ -1,64 +1,57 @@
-function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
-function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-import React, { useState, useEffect, useRef } from 'react';
-import { injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import CapDivider from "../../CapDivider";
-import CapHeading from "../../CapHeading";
-import CapIcon from "../../CapIcon";
-import CapRow from "../../CapRow";
-import CapSpin from "../../CapSpin";
-import { rootClsPrefix } from "../constants";
-import rootStyles from "../rootStyles";
-import AiraContainer from "../UtilComponents/AiraContainer";
-import { AiraChatBot, AiraChatTitleBar } from "../UtilComponents/Icons";
-import MultiLineInputBox from "../UtilComponents/MultiLineInpuxBox";
-import { NotificationMethods } from "../UtilComponents/Notification";
-import { Tooltip } from "../UtilComponents/Tooltip";
-import * as action from "./actions";
-import { mediaGenerationApi } from "./api";
-import { clsPrefix, IMAGE, VIDEO, tips } from "./constants";
-import messages from "./messages";
-import { makeSelectImageDetail } from "./selectors";
-import './styles.scss';
-const styles = {"cap-media-generation-bot-content":"cap-media-generation-bot-content_MCZkD","cap-media-generation-bot-tab-container":"cap-media-generation-bot-tab-container_Tr9cv","cap-media-generation-bot-tab":"cap-media-generation-bot-tab_nwTOu","cap-media-generation-bot-text-media-footer":"cap-media-generation-bot-text-media-footer_v9eDa","imageTextBot":"imageTextBot_Dvyt9","doc-bot":"doc-bot_mituE","three-star-icon":"three-star-icon_xS1k7","cap-media-generation-bot-tips-box":"cap-media-generation-bot-tips-box_dmcFD","tips-box-head":"tips-box-head_QP79h","cap-media-generation-bot-image-container":"cap-media-generation-bot-image-container_P4AmQ","cap-media-generation-bot-image-answer-container":"cap-media-generation-bot-image-answer-container_aJRfG","chat-loader-icon":"chat-loader-icon_iruBB","cap-media-generation-bot-generate-more":"cap-media-generation-bot-generate-more_icjQ0","cap-media-generation-bot-loading":"cap-media-generation-bot-loading_qyA2j","rate-icon":"rate-icon_yvIC6","image-container":"image-container_EX1pG","image-container-img":"image-container-img_IfpVW","image-container-overlay-content":"image-container-overlay-content_-flyv","image-container-download-icon":"image-container-download-icon_pifgj","image-container-copy-icon":"image-container-copy-icon_uBIr6","image-footer":"image-footer_9StRz","image-footer-icon":"image-footer-icon_PI8vO","image-footer-heading":"image-footer-heading_S6aTl","cap-media-generation-bot-tooltip-copied-size":"cap-media-generation-bot-tooltip-copied-size_ht3jT","cap-media-generation-bot-tooltip-size":"cap-media-generation-bot-tooltip-size_4J2kV"};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export var CapAiMediaGeneration = _ref => {
-  var {
-    request,
-    getAPICallObject,
-    imageDetails,
-    actions,
-    iconPlacement,
-    intl: {
-      formatMessage
-    }
-  } = _ref;
-  var textImageBot = formatMessage(messages.textImageBot);
-  var textImageBotDesc = formatMessage(messages.textImageBotDesc);
-  var textImageBotPlaceholder = formatMessage(messages.textImageBotPlaceholder);
-  var textImageFooter = formatMessage(messages.textImageFooter);
-  var textTipsGenerate = formatMessage(messages.textTipsGenerate);
-  var textCopy = formatMessage(messages.textCopy);
-  var textCopied = formatMessage(messages.textCopied);
-  var textDownload = formatMessage(messages.textDownload);
-  var textComingSoon = formatMessage(messages.textComingSoon);
-  var textGenerateMore = formatMessage(messages.textGenerateMore);
-  var textImageDownload = formatMessage(messages.textImageDownload);
-  var [query, setQuery] = useState('');
-  var [loading, setLoading] = useState(false);
-  var [currentTab, setCurrentTab] = useState(0);
-  var [imageUrls, setImageUrls] = useState([]);
-  var [showImageBox, setShowImageBox] = useState(false);
-  var notificationContainerRef = useRef(null);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { injectIntl } from "react-intl";
+import { connect } from "react-redux";
+import { compose, bindActionCreators } from "redux";
+import { createStructuredSelector } from "reselect";
+import CapDivider from "../../CapDivider/index.js";
+import CapHeadingWithStatic from "../../CapHeading/index.js";
+import CapIcon from "../../CapIcon/index.js";
+import CapRow from "../../CapRow/index.js";
+import CapSpin from "../../CapSpin/index.js";
+import { rootClsPrefix } from "../constants.js";
+import styles$1 from "../styles.module.scss.js";
+import AiraContainer from "../UtilComponents/AiraContainer.js";
+import { AiraChatTitleBar, AiraChatBot } from "../UtilComponents/Icons.js";
+import MultiLineInputBox from "../UtilComponents/MultiLineInpuxBox.js";
+import { NotificationMethods } from "../UtilComponents/Notification.js";
+import { Tooltip } from "../UtilComponents/Tooltip.js";
+import * as CapAskAira_CapAiMediaGeneration_actions from "./actions.js";
+import { mediaGenerationApi } from "./api.js";
+import { IMAGE, clsPrefix, VIDEO, tips } from "./constants.js";
+import messages from "./messages.js";
+import { makeSelectImageDetail } from "./selectors.js";
+import styles from "./styles.module.scss.js";
+const CapAiMediaGeneration = ({
+  request,
+  getAPICallObject,
+  imageDetails,
+  actions,
+  iconPlacement,
+  intl: { formatMessage }
+}) => {
+  const textImageBot = formatMessage(messages.textImageBot);
+  const textImageBotDesc = formatMessage(messages.textImageBotDesc);
+  const textImageBotPlaceholder = formatMessage(messages.textImageBotPlaceholder);
+  const textImageFooter = formatMessage(messages.textImageFooter);
+  const textTipsGenerate = formatMessage(messages.textTipsGenerate);
+  const textCopy = formatMessage(messages.textCopy);
+  const textCopied = formatMessage(messages.textCopied);
+  const textDownload = formatMessage(messages.textDownload);
+  const textComingSoon = formatMessage(messages.textComingSoon);
+  const textGenerateMore = formatMessage(messages.textGenerateMore);
+  const textImageDownload = formatMessage(messages.textImageDownload);
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [currentTab, setCurrentTab] = useState(0);
+  const [imageUrls, setImageUrls] = useState([]);
+  const [showImageBox, setShowImageBox] = useState(false);
+  const notificationContainerRef = useRef(null);
   useEffect(() => {
-    var mediaGen = imageDetails == null ? void 0 : imageDetails.mediaGen;
+    const mediaGen = imageDetails == null ? void 0 : imageDetails.mediaGen;
     if (Array.isArray(mediaGen) && mediaGen.length > 0) {
-      setImageUrls(prevUrls => {
-        var updatedUrls = [...prevUrls];
+      setImageUrls((prevUrls) => {
+        const updatedUrls = [...prevUrls];
         updatedUrls.splice(-4, 4, ...mediaGen);
         return updatedUrls;
       });
@@ -69,285 +62,235 @@ export var CapAiMediaGeneration = _ref => {
       });
     }
   }, [imageDetails]);
-  var onHide = () => {
-    setQuery('');
+  const onHide = () => {
+    setQuery("");
     setImageUrls([]);
     setShowImageBox(false);
     setLoading(false);
   };
-  var onSubmitHandler = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* (isGenerate) {
-      if (isGenerate === void 0) {
-        isGenerate = false;
+  const onSubmitHandler = async (isGenerate = false) => {
+    if (query.trim()) {
+      setLoading(true);
+      if (!showImageBox) setShowImageBox(true);
+      if (isGenerate) {
+        setImageUrls((prevUrls) => [...prevUrls, ...Array(4).fill(null)]);
+      } else {
+        setImageUrls([...Array(4).fill(null)]);
       }
-      if (query.trim()) {
-        setLoading(true);
-        if (!showImageBox) setShowImageBox(true);
-        if (isGenerate) {
-          setImageUrls(prevUrls => [...prevUrls, ...Array(4).fill(null)]);
-        } else {
-          setImageUrls([...Array(4).fill(null)]);
-        }
-        actions.mediaGenerationQuery({
+      actions.mediaGenerationQuery(
+        {
           prompt: query,
           numberOfImages: 4
-        }, mediaGenerationApi(request, getAPICallObject));
-      }
-    });
-    return function onSubmitHandler(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  return /*#__PURE__*/_jsx(AiraContainer, {
-    titlePadding: "0.95rem",
-    popupWidth: "32rem",
-    Icon: AiraChatBot,
-    iconSize: "4.2857rem",
-    iconProps: {
-      svgProps: {
-        style: {
-          padding: '1.1607rem'
-        }
-      }
-    },
-    title: "aiRA",
-    onHide: onHide,
-    titleBarIcon: AiraChatTitleBar,
-    popupHeight: "100vh",
-    popupPlacement: {
-      type: 'float-br',
-      padding: '0rem'
-    },
-    iconPlacement: iconPlacement,
-    children: /*#__PURE__*/_jsxs("div", {
-      ref: notificationContainerRef,
-      className: styles[clsPrefix + "-content"],
-      children: [/*#__PURE__*/_jsxs(CapRow, {
-        className: styles[clsPrefix + "-tab-container"],
-        children: [/*#__PURE__*/_jsx(CapHeading, {
-          "data-active": currentTab === 0,
-          onClick: () => setCurrentTab(0),
-          className: styles[clsPrefix + "-tab"],
-          children: IMAGE
-        }), /*#__PURE__*/_jsx("div", {
-          className: styles[clsPrefix + "-tab"],
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: textComingSoon,
-            children: /*#__PURE__*/_jsx(CapHeading, {
-              "data-active": currentTab === 1,
-              children: VIDEO
-            })
-          })
-        })]
-      }), /*#__PURE__*/_jsx(MultiLineInputBox, {
-        value: query,
-        setValue: setQuery,
-        placeholder: textImageBotPlaceholder,
-        onSubmit: () => onSubmitHandler(false),
-        loading: loading
-      }), imageUrls.length < 1 && !loading && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(CapRow, {
-          className: "doc-bot_mituE",
-          children: [/*#__PURE__*/_jsx(CapIcon, {
-            type: "three-star-dark",
-            size: "l",
-            className: "three-star-icon_xS1k7"
-          }), /*#__PURE__*/_jsx(CapHeading, {
-            type: "h4",
-            className: "imageTextBot_Dvyt9",
-            children: textImageBot
-          }), /*#__PURE__*/_jsx(CapHeading, {
-            type: "label4",
-            className: styles['doc-bot-desc'],
-            children: textImageBotDesc
-          })]
-        }), /*#__PURE__*/_jsxs(CapRow, {
-          className: styles[clsPrefix + "-tips-box"],
-          children: [/*#__PURE__*/_jsxs(CapRow, {
-            className: "tips-box-head_QP79h",
-            children: [/*#__PURE__*/_jsx(CapIcon, {
-              type: "info",
-              size: "s"
-            }), /*#__PURE__*/_jsx(CapHeading, {
-              type: "h10",
-              children: textTipsGenerate
-            })]
-          }), /*#__PURE__*/_jsx("ul", {
-            children: tips.map((tip, index) => /*#__PURE__*/_jsx("li", {
-              children: /*#__PURE__*/_jsx(CapHeading, {
-                type: "label2",
-                children: tip
-              })
-            }, index))
-          })]
-        })]
-      }), showImageBox && /*#__PURE__*/_jsxs("div", {
-        className: styles[clsPrefix + "-image-container"] + " " + rootStyles[rootClsPrefix + "-no-scrollbar"],
-        children: [/*#__PURE__*/_jsx(CapHeading, {
-          style: {
-            marginRight: '0.6rem'
-          },
-          children: /*#__PURE__*/_jsx(CapIcon, {
-            size: "s",
-            type: "three-star-dark",
-            className: "chat-loader-icon_iruBB"
-          })
-        }), /*#__PURE__*/_jsxs("div", {
-          className: styles[clsPrefix + "-image-answer-container"],
-          children: [[...Array(Math.max(4, imageUrls.length)).keys()].map(i => /*#__PURE__*/_jsx(ImageContainer, {
-            url: imageUrls[i],
-            loading: loading,
-            textCopied: textCopied,
-            textCopy: textCopy,
-            textDownload: textDownload,
-            clsPrefix: clsPrefix,
-            styles: styles
-          }, i)), /*#__PURE__*/_jsxs(CapRow, {
-            className: styles[clsPrefix + "-generate-more"] + " " + (loading ? styles[clsPrefix + "-loading"] : ''),
-            onClick: () => !loading && onSubmitHandler(true),
-            "data-testid": "generate-more",
-            children: [/*#__PURE__*/_jsx(CapIcon, {
-              size: "s",
-              type: "gallery-icon"
-            }), /*#__PURE__*/_jsx(CapHeading, {
-              type: "h10",
-              children: textGenerateMore
-            })]
-          }), /*#__PURE__*/_jsxs(CapRow, {
-            className: "rate-icon_yvIC6",
-            children: [/*#__PURE__*/_jsx(CapIcon, {
-              size: "s",
-              type: "like",
-              "data-testid": "like-button"
-            }), /*#__PURE__*/_jsx(CapIcon, {
-              size: "s",
-              type: "disLike",
-              "data-testid": "dislike-button"
-            })]
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(CapRow, {
-        className: styles[clsPrefix + "-text-media-footer"],
-        children: [/*#__PURE__*/_jsx(CapDivider, {
+        },
+        mediaGenerationApi(
+          request,
+          getAPICallObject
+        )
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    AiraContainer,
+    {
+      titlePadding: "0.95rem",
+      popupWidth: "32rem",
+      Icon: AiraChatBot,
+      iconSize: "4.2857rem",
+      iconProps: {
+        svgProps: {
           style: {
-            margin: 0
+            padding: "1.1607rem"
           }
-        }), /*#__PURE__*/_jsxs(CapRow, {
-          className: "image-footer_9StRz",
-          children: [/*#__PURE__*/_jsx(CapIcon, {
-            type: "info",
-            size: "s",
-            className: "image-footer-icon_PI8vO"
-          }), /*#__PURE__*/_jsx(CapHeading, {
-            type: "label4",
-            className: "image-footer-heading_S6aTl",
-            children: textImageFooter
-          })]
-        })]
-      })]
-    })
-  });
+        }
+      },
+      title: "aiRA",
+      onHide,
+      titleBarIcon: AiraChatTitleBar,
+      popupHeight: "100vh",
+      popupPlacement: { type: "float-br", padding: "0rem" },
+      iconPlacement,
+      children: /* @__PURE__ */ jsxs("div", { ref: notificationContainerRef, className: styles[`${clsPrefix}-content`], children: [
+        /* @__PURE__ */ jsxs(CapRow, { className: styles[`${clsPrefix}-tab-container`], children: [
+          /* @__PURE__ */ jsx(
+            CapHeadingWithStatic,
+            {
+              "data-active": currentTab === 0,
+              onClick: () => setCurrentTab(0),
+              className: styles[`${clsPrefix}-tab`],
+              children: IMAGE
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-tab`], children: /* @__PURE__ */ jsx(Tooltip, { title: textComingSoon, children: /* @__PURE__ */ jsx(CapHeadingWithStatic, { "data-active": currentTab === 1, children: VIDEO }) }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          MultiLineInputBox,
+          {
+            value: query,
+            setValue: setQuery,
+            placeholder: textImageBotPlaceholder,
+            onSubmit: () => onSubmitHandler(false),
+            loading
+          }
+        ),
+        imageUrls.length < 1 && !loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(CapRow, { className: styles["doc-bot"], children: [
+            /* @__PURE__ */ jsx(CapIcon, { type: "three-star-dark", size: "l", className: styles["three-star-icon"] }),
+            /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h4", className: styles["imageTextBot"], children: textImageBot }),
+            /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "label4", className: styles["doc-bot-desc"], children: textImageBotDesc })
+          ] }),
+          /* @__PURE__ */ jsxs(CapRow, { className: styles[`${clsPrefix}-tips-box`], children: [
+            /* @__PURE__ */ jsxs(CapRow, { className: styles["tips-box-head"], children: [
+              /* @__PURE__ */ jsx(CapIcon, { type: "info", size: "s" }),
+              /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h10", children: textTipsGenerate })
+            ] }),
+            /* @__PURE__ */ jsx("ul", { children: tips.map((tip, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "label2", children: tip }) }, index)) })
+          ] })
+        ] }),
+        showImageBox && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${styles[`${clsPrefix}-image-container`]} ${styles$1[`${rootClsPrefix}-no-scrollbar`]}`,
+            children: [
+              /* @__PURE__ */ jsx(CapHeadingWithStatic, { style: { marginRight: "0.6rem" }, children: /* @__PURE__ */ jsx(CapIcon, { size: "s", type: "three-star-dark", className: styles["chat-loader-icon"] }) }),
+              /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-image-answer-container`], children: [
+                [...Array(Math.max(4, imageUrls.length)).keys()].map((i) => /* @__PURE__ */ jsx(
+                  ImageContainer,
+                  {
+                    url: imageUrls[i],
+                    loading,
+                    textCopied,
+                    textCopy,
+                    textDownload,
+                    clsPrefix,
+                    styles
+                  },
+                  i
+                )),
+                /* @__PURE__ */ jsxs(
+                  CapRow,
+                  {
+                    className: `${styles[`${clsPrefix}-generate-more`]} ${loading ? styles[`${clsPrefix}-loading`] : ""}`,
+                    onClick: () => !loading && onSubmitHandler(true),
+                    "data-testid": "generate-more",
+                    children: [
+                      /* @__PURE__ */ jsx(CapIcon, { size: "s", type: "gallery-icon" }),
+                      /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h10", children: textGenerateMore })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(CapRow, { className: styles["rate-icon"], children: [
+                  /* @__PURE__ */ jsx(CapIcon, { size: "s", type: "like", "data-testid": "like-button" }),
+                  /* @__PURE__ */ jsx(CapIcon, { size: "s", type: "disLike", "data-testid": "dislike-button" })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(CapRow, { className: styles[`${clsPrefix}-text-media-footer`], children: [
+          /* @__PURE__ */ jsx(CapDivider, { style: { margin: 0 } }),
+          /* @__PURE__ */ jsxs(CapRow, { className: styles["image-footer"], children: [
+            /* @__PURE__ */ jsx(CapIcon, { type: "info", size: "s", className: styles["image-footer-icon"] }),
+            /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "label4", className: styles["image-footer-heading"], children: textImageFooter })
+          ] })
+        ] })
+      ] })
+    }
+  );
 };
-var ImageContainer = _ref3 => {
-  var {
-    url,
-    loading,
-    textCopy,
-    textCopied,
-    textDownload,
-    clsPrefix,
-    styles: imgStyles
-  } = _ref3;
-  var [overlay, setOverlay] = useState(false);
-  var [showCopied, setShowCopied] = useState(false);
-  var handleDragStart = e => {
+const ImageContainer = ({
+  url,
+  loading,
+  textCopy,
+  textCopied,
+  textDownload,
+  clsPrefix: clsPrefix2,
+  styles: imgStyles
+}) => {
+  const [overlay, setOverlay] = useState(false);
+  const [showCopied, setShowCopied] = useState(false);
+  const handleDragStart = (e) => {
     if (url) {
-      e.dataTransfer.setData('text/plain', "<img src=" + url + " alt='Capillary Image' />");
+      e.dataTransfer.setData("text/plain", `<img src=${url} alt='Capillary Image' />`);
     }
   };
-  var handleCopy = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(function* () {
-      try {
-        if (url) {
-          yield navigator.clipboard.writeText(url);
-          setShowCopied(true);
-        }
-      } catch (err) {
-        console.error(err);
+  const handleCopy = async () => {
+    try {
+      if (url) {
+        await navigator.clipboard.writeText(url);
+        setShowCopied(true);
       }
-    });
-    return function handleCopy() {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  return /*#__PURE__*/_jsx("div", {
-    onMouseEnter: () => url && setOverlay(true),
-    onMouseLeave: () => setOverlay(false),
-    draggable: !!url,
-    onDragStart: handleDragStart,
-    className: imgStyles['image-container'],
-    children: loading && !url ? /*#__PURE__*/_jsx(CapSpin, {
-      spinning: true,
-      "data-testid": "loading-spinner"
-    }) : url && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("img", {
-        src: url,
-        className: imgStyles['image-container-img'],
-        alt: "Generated"
-      }), overlay && /*#__PURE__*/_jsxs("div", {
-        className: imgStyles['image-container-overlay-content'],
-        children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: showCopied ? /*#__PURE__*/_jsxs("div", {
-            className: imgStyles[clsPrefix + "-tooltip-copied-size"],
-            children: [/*#__PURE__*/_jsx(CapIcon, {
-              type: "check-filled",
-              size: "s",
-              style: {
-                marginRight: '0.2857rem'
-              },
-              "data-testid": "copied"
-            }), /*#__PURE__*/_jsx("span", {
-              children: textCopied
-            })]
-          }) : /*#__PURE__*/_jsx("div", {
-            className: imgStyles[clsPrefix + "-tooltip-size"],
-            children: textCopy
-          }),
-          children: /*#__PURE__*/_jsx(CapIcon, {
-            type: "copy",
-            size: "s",
-            className: imgStyles['image-container-copy-icon'],
-            onClick: handleCopy,
-            "data-testid": "copy-button"
-          })
-        }), /*#__PURE__*/_jsx("a", {
-          href: url,
-          download: true,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: /*#__PURE__*/_jsx("div", {
-              className: imgStyles[clsPrefix + "-tooltip-size"],
-              children: textDownload
-            }),
-            children: /*#__PURE__*/_jsx(CapIcon, {
-              type: "download",
-              size: "s",
-              className: imgStyles['image-container-download-icon']
-            })
-          })
-        })]
-      })]
-    })
-  });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseEnter: () => url && setOverlay(true),
+      onMouseLeave: () => setOverlay(false),
+      draggable: !!url,
+      onDragStart: handleDragStart,
+      className: imgStyles["image-container"],
+      children: loading && !url ? /* @__PURE__ */ jsx(CapSpin, { spinning: true, "data-testid": "loading-spinner" }) : url && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("img", { src: url, className: imgStyles["image-container-img"], alt: "Generated" }),
+        overlay && /* @__PURE__ */ jsxs("div", { className: imgStyles["image-container-overlay-content"], children: [
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: showCopied ? /* @__PURE__ */ jsxs("div", { className: imgStyles[`${clsPrefix2}-tooltip-copied-size`], children: [
+                /* @__PURE__ */ jsx(
+                  CapIcon,
+                  {
+                    type: "check-filled",
+                    size: "s",
+                    style: { marginRight: "0.2857rem" },
+                    "data-testid": "copied"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: textCopied })
+              ] }) : /* @__PURE__ */ jsx("div", { className: imgStyles[`${clsPrefix2}-tooltip-size`], children: textCopy }),
+              children: /* @__PURE__ */ jsx(
+                CapIcon,
+                {
+                  type: "copy",
+                  size: "s",
+                  className: imgStyles["image-container-copy-icon"],
+                  onClick: handleCopy,
+                  "data-testid": "copy-button"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("a", { href: url, download: true, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: /* @__PURE__ */ jsx("div", { className: imgStyles[`${clsPrefix2}-tooltip-size`], children: textDownload }),
+              children: /* @__PURE__ */ jsx(
+                CapIcon,
+                {
+                  type: "download",
+                  size: "s",
+                  className: imgStyles["image-container-download-icon"]
+                }
+              )
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
 };
-var mapStateToProps = createStructuredSelector({
+const mapStateToProps = createStructuredSelector({
   imageDetails: makeSelectImageDetail()
 });
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators(action, dispatch)
+    actions: bindActionCreators(CapAskAira_CapAiMediaGeneration_actions, dispatch)
   };
 }
-var withConnect = connect(mapStateToProps, mapDispatchToProps);
-export default compose(withConnect)(injectIntl(CapAiMediaGeneration));
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const CapAiMediaGeneration$1 = compose(withConnect)(injectIntl(CapAiMediaGeneration));
+export {
+  CapAiMediaGeneration,
+  CapAiMediaGeneration$1 as default
+};