@capillarytech/blaze-ui 5.23.3-beta.3 → 5.23.3-beta.4

package/CapAskAira/AudienceFilterBot/index.js

@@ -1,454 +1,498 @@
-import React, { useState, useEffect } from 'react';
-import { injectIntl } from 'react-intl';
-import CapButton from "../../CapButton";
-import CapDivider from "../../CapDivider";
-import CapIcon from "../../CapIcon";
-import CapModal from "../../CapModal";
-import CapNotification from "../../CapNotification";
-import CapRow from "../../CapRow";
-import { CAP_ASK_AIRA_COLORS } from "../constants";
-import AiraContainer from "../UtilComponents/AiraContainer";
-import ErrorBar from "../UtilComponents/ErrorBar";
-import { AiraChatBot } from "../UtilComponents/Icons";
-import MultiLineInputBox from "../UtilComponents/MultiLineInpuxBox";
-import { clsPrefix } from "./constants";
-import messages from "./messages";
-import './styles.scss';
-const styles = {"cap-aira-audiencefilter-multiline-box-outer":"cap-aira-audiencefilter-multiline-box-outer_eaaDc","collapsed":"collapsed_tXNAv","expanded":"expanded_r3Cxe","analysis-height":"analysis-height_eYVmH","cap-aira-audiencefilter-custom-title":"cap-aira-audiencefilter-custom-title_-ayiQ","cap-aira-audiencefilter-info-container":"cap-aira-audiencefilter-info-container_JB585","cap-aira-audiencefilter-info-text":"cap-aira-audiencefilter-info-text_vrSnF","cap-aira-audiencefilter-icon-margin":"cap-aira-audiencefilter-icon-margin_PWUTu","cap-aira-audiencefilter-ask-aira-wrapper":"cap-aira-audiencefilter-ask-aira-wrapper_DH0m9","cap-aira-audiencefilter-ask-aira-link":"cap-aira-audiencefilter-ask-aira-link_LDqak","query-display":"query-display_-iRyq","normal-color":"normal-color_utMxR","cap-aira-audiencefilter-query-label":"cap-aira-audiencefilter-query-label_m-Pg8","cap-aira-audiencefilter-close-icon":"cap-aira-audiencefilter-close-icon_cRj-w","cap-aira-audiencefilter-input-wrapper":"cap-aira-audiencefilter-input-wrapper_PRHAE","cap-aira-audiencefilter-hidden":"cap-aira-audiencefilter-hidden_Ar2Kc","cap-aira-audiencefilter-error-container":"cap-aira-audiencefilter-error-container_Hye-l","cap-aira-error-bar":"cap-aira-error-bar_OzX6z","cap-aira-audiencefilter-loading-text":"cap-aira-audiencefilter-loading-text_9I-Qa","cap-aira-audiencefilter-header-container":"cap-aira-audiencefilter-header-container_D95oo","cap-aira-audiencefilter-submitted-elements-container":"cap-aira-audiencefilter-submitted-elements-container_Gc4pv","cap-aira-audiencefilter-submitted-left-section":"cap-aira-audiencefilter-submitted-left-section_vtI1h","cap-aira-audiencefilter-placeholder-container":"cap-aira-audiencefilter-placeholder-container_nePAz","cap-aira-audiencefilter-header-left-container":"cap-aira-audiencefilter-header-left-container_zsKTd","cap-aira-audiencefilter-header-icon":"cap-aira-audiencefilter-header-icon_iEqzl","cap-aira-audiencefilter-header-label":"cap-aira-audiencefilter-header-label_EHpPQ","cap-aira-audiencefilter-close-button":"cap-aira-audiencefilter-close-button_MSDty","cap-aira-audiencefilter-divider":"cap-aira-audiencefilter-divider_nMF9M","cap-aira-audiencefilter-success-container":"cap-aira-audiencefilter-success-container_7DtWr","cap-aira-audiencefilter-edit-icon-container":"cap-aira-audiencefilter-edit-icon-container_1QuYU","cap-aira-audiencefilter-edit-icon":"cap-aira-audiencefilter-edit-icon_Ey51l","cap-aira-audiencefilter-loading-container":"cap-aira-audiencefilter-loading-container_VREjs","cap-aira-audiencefilter-thought-process-heading":"cap-aira-audiencefilter-thought-process-heading_pvX2b","cap-aira-audiencefilter-thought-process-text":"cap-aira-audiencefilter-thought-process-text_oE55B","cap-aira-audiencefilter-approach-item":"cap-aira-audiencefilter-approach-item_TqCW7","cap-aira-audiencefilter-approach-content":"cap-aira-audiencefilter-approach-content_H-Nab","cap-aira-audiencefilter-approach-content-visible":"cap-aira-audiencefilter-approach-content-visible_ruGP8","cap-aira-audiencefilter-bullet":"cap-aira-audiencefilter-bullet_dGlde","cap-aira-audiencefilter-approach-text":"cap-aira-audiencefilter-approach-text_1Fkvn","cap-aira-audiencefilter-approach-container":"cap-aira-audiencefilter-approach-container_yaVwl","cap-aira-audiencefilter-error-item":"cap-aira-audiencefilter-error-item_fZq8e","cap-aira-audiencefilter-error-icon":"cap-aira-audiencefilter-error-icon_CvqPn","dAqpdr":"dAqpdr_zerwA","cap-aira-audiencefilter-error-text":"cap-aira-audiencefilter-error-text_ULjq7","cap-aira-audiencefilter-filters-added-container":"cap-aira-audiencefilter-filters-added-container_D1ChA","cap-aira-audiencefilter-filters-added-content":"cap-aira-audiencefilter-filters-added-content_Ufil3","cap-aira-audiencefilter-filters-added-text":"cap-aira-audiencefilter-filters-added-text_EdMH8","cap-aira-audiencefilter-full-width-row":"cap-aira-audiencefilter-full-width-row_-LXtY","cap-aira-audiencefilter-error-bar-no-padding":"cap-aira-audiencefilter-error-bar-no-padding_ZCttJ","cap-aira-audiencefilter-chevron-icon":"cap-aira-audiencefilter-chevron-icon_6RqQf","cap-aira-audiencefilter-feedback-buttons":"cap-aira-audiencefilter-feedback-buttons_oEZVK","cap-aira-audiencefilter-feedback-icon":"cap-aira-audiencefilter-feedback-icon_lp2Si","cap-aira-audiencefilter-feedback-textarea":"cap-aira-audiencefilter-feedback-textarea_j96E0","cap-aira-audiencefilter-feedback-disabled":"cap-aira-audiencefilter-feedback-disabled_SamHh","cap-aira-audiencefilter-feedback-submitted":"cap-aira-audiencefilter-feedback-submitted_66e1X","cap-aira-audiencefilter-modal-footer":"cap-aira-audiencefilter-modal-footer_pOz8h","cap-aira-audiencefilter-modal-flat-button":"cap-aira-audiencefilter-modal-flat-button_FHkVU","cap-aira-audiencefilter-modal-title":"cap-aira-audiencefilter-modal-title_UXop4","cap-aira-audiencefilter-modal-title-optional":"cap-aira-audiencefilter-modal-title-optional_nzthQ","cap-aira-audiencefilter-feedback-message":"cap-aira-audiencefilter-feedback-message_lW6mk","cap-aira-audiencefilter-textarea-container":"cap-aira-audiencefilter-textarea-container_TXntd","cap-aira-audiencefilter-character-count":"cap-aira-audiencefilter-character-count_IIfH7","cap-aira-audiencefilter-warning-item":"cap-aira-audiencefilter-warning-item_LVGlp","cap-aira-audiencefilter-warning-icon":"cap-aira-audiencefilter-warning-icon_nwYmP","cap-aira-audiencefilter-warning-text":"cap-aira-audiencefilter-warning-text_Yq9F2"};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-var AudienceFilterBot = _ref => {
-  var _audienceData$approac, _audienceData$status, _ref2;
-  var {
-    textAiraTitle: textAiraTitleProp,
-    setFilterDataFromApi = () => {},
-    clearFilterData = () => {},
-    updateSetQueryData = () => {},
-    likeAudienceQuery = () => {},
-    dislikeAudienceQuery = () => {},
-    responseData = {
-      getAudienceDataStatus: '',
-      getAudienceDataError: null,
-      audienceData: {
-        status: {
-          code: null
-        },
-        response: null,
-        error: [],
-        approach: [],
-        warning: [],
-        partial_error: false
-      }
-    },
-    intl: {
-      formatMessage
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { injectIntl } from "react-intl";
+import CapButton from "../../CapButton/index.js";
+import CapDivider from "../../CapDivider/index.js";
+import CapIcon from "../../CapIcon/index.js";
+import CapModalWithHoc from "../../CapModal/index.js";
+import CapNotification from "../../CapNotification/index.js";
+import CapRow from "../../CapRow/index.js";
+import { CAP_ASK_AIRA_COLORS } from "../constants.js";
+import AiraContainer from "../UtilComponents/AiraContainer.js";
+import ErrorBar from "../UtilComponents/ErrorBar.js";
+import { AiraChatBot } from "../UtilComponents/Icons.js";
+import MultiLineInputBox from "../UtilComponents/MultiLineInpuxBox.js";
+import { clsPrefix } from "./constants.js";
+import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
+const AudienceFilterBot = ({
+  textAiraTitle: textAiraTitleProp,
+  setFilterDataFromApi = () => {
+  },
+  clearFilterData = () => {
+  },
+  updateSetQueryData = () => {
+  },
+  likeAudienceQuery = () => {
+  },
+  dislikeAudienceQuery = () => {
+  },
+  responseData = {
+    getAudienceDataStatus: "",
+    getAudienceDataError: null,
+    audienceData: {
+      status: { code: null },
+      response: null,
+      error: [],
+      approach: [],
+      warning: [],
+      partial_error: false
     }
-  } = _ref;
-  var textAiraTitle = textAiraTitleProp != null ? textAiraTitleProp : formatMessage(messages.textAiraTitle);
-  var textNeedHelp = formatMessage(messages.textNeedHelp);
-  var textAskAiraLink = formatMessage(messages.textAskAiraLink);
-  var textDescribeAudience = formatMessage(messages.textDescribeAudience);
-  var textPlaceholder = formatMessage(messages.textPlaceholder);
-  var textError = formatMessage(messages.textError);
-  var textThoughtProcess = formatMessage(messages.textThoughtProcess);
-  var textFiltersAdded = formatMessage(messages.textFiltersAdded);
-  var textAnalyzing = formatMessage(messages.textAnalyzing);
-  var textPartialFiltersAdded = formatMessage(messages.textPartialFiltersAdded);
-  var textFeedbackTitle = formatMessage(messages.textFeedbackTitle);
-  var textFeedbackOptional = formatMessage(messages.textFeedbackOptional);
-  var textFeedbackMessage = formatMessage(messages.textFeedbackMessage);
-  var textFeedbackPlaceholder = formatMessage(messages.textFeedbackPlaceholder);
-  var textFeedbackSubmit = formatMessage(messages.textFeedbackSubmit);
-  var textFeedbackCancel = formatMessage(messages.textFeedbackCancel);
-  var textThankYouFeedback = formatMessage(messages.textThankYouFeedback);
-  var textThankYouDetailedFeedback = formatMessage(messages.textThankYouDetailedFeedback);
-  var [query, setQuery] = useState('');
-  var [isVisible, setIsVisible] = useState(false);
-  var [isQuerySubmitted, setIsQuerySubmitted] = useState(false);
-  var [showApproaches, setShowApproaches] = useState(false);
-  var [feedbackState, setFeedbackState] = useState(null);
-  var [isModalVisible, setIsModalVisible] = useState(false);
-  var [comment, setComment] = useState('');
-  var [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
-  var {
-    getAudienceDataStatus,
-    getAudienceDataError,
-    audienceData
-  } = responseData || {};
-  var hasError = isQuerySubmitted && getAudienceDataStatus === 'COMPLETE' && getAudienceDataError;
-  var hasResults = isQuerySubmitted && getAudienceDataStatus === 'COMPLETE' && !getAudienceDataError;
+  },
+  intl: { formatMessage }
+}) => {
+  var _a, _b;
+  const textAiraTitle = textAiraTitleProp ?? formatMessage(messages.textAiraTitle);
+  const textNeedHelp = formatMessage(messages.textNeedHelp);
+  const textAskAiraLink = formatMessage(messages.textAskAiraLink);
+  const textDescribeAudience = formatMessage(messages.textDescribeAudience);
+  const textPlaceholder = formatMessage(messages.textPlaceholder);
+  const textError = formatMessage(messages.textError);
+  const textThoughtProcess = formatMessage(messages.textThoughtProcess);
+  const textFiltersAdded = formatMessage(messages.textFiltersAdded);
+  const textAnalyzing = formatMessage(messages.textAnalyzing);
+  const textPartialFiltersAdded = formatMessage(messages.textPartialFiltersAdded);
+  const textFeedbackTitle = formatMessage(messages.textFeedbackTitle);
+  const textFeedbackOptional = formatMessage(messages.textFeedbackOptional);
+  const textFeedbackMessage = formatMessage(messages.textFeedbackMessage);
+  const textFeedbackPlaceholder = formatMessage(messages.textFeedbackPlaceholder);
+  const textFeedbackSubmit = formatMessage(messages.textFeedbackSubmit);
+  const textFeedbackCancel = formatMessage(messages.textFeedbackCancel);
+  const textThankYouFeedback = formatMessage(messages.textThankYouFeedback);
+  const textThankYouDetailedFeedback = formatMessage(messages.textThankYouDetailedFeedback);
+  const [query, setQuery] = useState("");
+  const [isVisible, setIsVisible] = useState(false);
+  const [isQuerySubmitted, setIsQuerySubmitted] = useState(false);
+  const [showApproaches, setShowApproaches] = useState(false);
+  const [feedbackState, setFeedbackState] = useState(null);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [comment, setComment] = useState("");
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
+  const { getAudienceDataStatus, getAudienceDataError, audienceData } = responseData || {};
+  const hasError = isQuerySubmitted && getAudienceDataStatus === "COMPLETE" && getAudienceDataError;
+  const hasResults = isQuerySubmitted && getAudienceDataStatus === "COMPLETE" && !getAudienceDataError;
   useEffect(() => {
     if (audienceData) {
       setFilterDataFromApi(audienceData);
     }
   }, [getAudienceDataStatus]);
-  var toggleVisibility = () => {
+  const toggleVisibility = () => {
     setIsVisible(true);
   };
-  var onSubmit = () => {
+  const onSubmit = () => {
     if (!query.trim()) return;
-    updateSetQueryData({
-      query,
-      flag: true
-    });
+    updateSetQueryData({ query, flag: true });
     setIsQuerySubmitted(true);
     setShowApproaches(false);
     setFeedbackState(null);
     setFeedbackSubmitted(false);
   };
-  var onHide = () => {
-    setQuery('');
+  const onHide = () => {
+    setQuery("");
     setIsQuerySubmitted(false);
     clearFilterData();
     setFeedbackState(null);
     setFeedbackSubmitted(false);
   };
-  var handleLikeClick = () => {
+  const handleLikeClick = () => {
     if (feedbackSubmitted) return;
-    setFeedbackState('like');
+    setFeedbackState("like");
     setFeedbackSubmitted(true);
     likeAudienceQuery();
     CapNotification.success({
-      message: textThankYouFeedback != null ? textThankYouFeedback : ''
+      message: textThankYouFeedback ?? ""
     });
   };
-  var handleDislikeClick = () => {
+  const handleDislikeClick = () => {
     if (feedbackSubmitted) return;
     setIsModalVisible(true);
   };
-  var handleModalOk = () => {
-    setFeedbackState('dislike');
+  const handleModalOk = () => {
+    setFeedbackState("dislike");
     setFeedbackSubmitted(true);
     dislikeAudienceQuery(comment);
     setIsModalVisible(false);
-    setComment('');
+    setComment("");
     CapNotification.success({
-      message: comment.trim() ? textThankYouDetailedFeedback != null ? textThankYouDetailedFeedback : '' : textThankYouFeedback != null ? textThankYouFeedback : ''
+      message: comment.trim() ? textThankYouDetailedFeedback ?? "" : textThankYouFeedback ?? ""
     });
   };
-  var handleModalCancel = () => {
+  const handleModalCancel = () => {
     setIsModalVisible(false);
-    setComment('');
+    setComment("");
   };
-  var handleCommentChange = e => {
-    var value = e.target.value;
+  const handleCommentChange = (e) => {
+    const value = e.target.value;
     if (value.length <= 200) {
       setComment(value);
     }
   };
-  var getOuterBoxClass = () => {
-    if (!isVisible) return styles[clsPrefix + "-collapsed"];
-    if (isQuerySubmitted) return styles[clsPrefix + "-analysis-height"];
-    return styles[clsPrefix + "-expanded"];
+  const getOuterBoxClass = () => {
+    if (!isVisible) return styles[`${clsPrefix}-collapsed`];
+    if (isQuerySubmitted) return styles[`${clsPrefix}-analysis-height`];
+    return styles[`${clsPrefix}-expanded`];
   };
-  var renderLoadingIndicator = () => {
-    if (getAudienceDataStatus === 'COMPLETE') return null;
-    return /*#__PURE__*/_jsx("div", {
-      className: styles[clsPrefix + "-loading-container"],
-      children: /*#__PURE__*/_jsx("span", {
-        className: styles[clsPrefix + "-loading-text"],
-        children: textAnalyzing
-      })
-    });
+  const renderLoadingIndicator = () => {
+    if (getAudienceDataStatus === "COMPLETE") return null;
+    return /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-loading-container`], children: /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-loading-text`], children: textAnalyzing }) });
   };
-  return /*#__PURE__*/_jsxs(AiraContainer, {
-    titlePadding: "0.5rem",
-    Icon: AiraChatBot,
-    iconSize: "1.5rem",
-    popupPlacement: {
-      type: 'anchor-br'
-    },
-    title: /*#__PURE__*/_jsx("span", {
-      className: styles[clsPrefix + "-custom-title"],
-      children: textAiraTitle
-    }),
-    onHide: onHide,
-    mode: "audience-filter",
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: styles[clsPrefix + "-multiline-box-outer"] + " " + getOuterBoxClass(),
-      children: [!isVisible && /*#__PURE__*/_jsx("div", {
-        className: styles[clsPrefix + "-info-container"],
-        children: /*#__PURE__*/_jsxs("span", {
-          className: styles[clsPrefix + "-info-text"],
-          children: [/*#__PURE__*/_jsx(CapIcon, {
-            type: "three-star-dark",
-            size: "m",
-            className: styles[clsPrefix + "-icon-margin"]
-          }), textNeedHelp, /*#__PURE__*/_jsx("div", {
-            className: styles[clsPrefix + "-ask-aira-wrapper"],
-            onClick: toggleVisibility,
-            children: /*#__PURE__*/_jsx("span", {
-              className: styles[clsPrefix + "-ask-aira-link"],
-              children: textAskAiraLink
-            })
-          })]
-        })
-      }), isVisible && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("div", {
-          className: styles[clsPrefix + "-header-container"],
-          children: isQuerySubmitted ? /*#__PURE__*/_jsxs("div", {
-            className: styles[clsPrefix + "-submitted-elements-container"],
-            children: [/*#__PURE__*/_jsxs("div", {
-              className: styles[clsPrefix + "-submitted-left-section"],
-              children: [/*#__PURE__*/_jsx(CapIcon, {
+  return /* @__PURE__ */ jsxs(
+    AiraContainer,
+    {
+      titlePadding: "0.5rem",
+      Icon: AiraChatBot,
+      iconSize: "1.5rem",
+      popupPlacement: { type: "anchor-br" },
+      title: /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-custom-title`], children: textAiraTitle }),
+      onHide,
+      mode: "audience-filter",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: `${styles[`${clsPrefix}-multiline-box-outer`]} ${getOuterBoxClass()}`, children: [
+          !isVisible && /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-info-container`], children: /* @__PURE__ */ jsxs("span", { className: styles[`${clsPrefix}-info-text`], children: [
+            /* @__PURE__ */ jsx(
+              CapIcon,
+              {
                 type: "three-star-dark",
                 size: "m",
-                className: styles[clsPrefix + "-header-icon"]
-              }), /*#__PURE__*/_jsx("span", {
-                className: styles[clsPrefix + "-query-label"] + " " + styles[clsPrefix + "-header-label"],
-                children: /*#__PURE__*/_jsxs("span", {
-                  className: styles[clsPrefix + "-ask-aira-link"] + " " + styles[clsPrefix + "-query-display"] + " " + (getAudienceDataStatus !== 'REQUEST' ? styles[clsPrefix + "-normal-color"] : ''),
-                  children: [query, getAudienceDataStatus !== 'REQUEST' && /*#__PURE__*/_jsx("span", {
-                    className: styles[clsPrefix + "-edit-icon-container"],
-                    children: /*#__PURE__*/_jsx(CapIcon, {
-                      type: "edit",
-                      size: "s",
-                      className: styles[clsPrefix + "-edit-icon"],
-                      onClick: () => {
-                        setIsQuerySubmitted(false);
-                        setFeedbackState(null);
-                        setFeedbackSubmitted(false);
-                      }
-                    })
-                  })]
-                })
-              })]
-            }), /*#__PURE__*/_jsx(CapIcon, {
-              type: "close",
-              size: "s",
-              className: styles[clsPrefix + "-close-icon"] + " " + styles[clsPrefix + "-close-button"],
-              onClick: () => {
-                setIsVisible(false);
-                setIsQuerySubmitted(false);
-                setQuery('');
-                clearFilterData();
-                setFeedbackState(null);
-                setFeedbackSubmitted(false);
+                className: styles[`${clsPrefix}-icon-margin`]
               }
-            })]
-          }) : /*#__PURE__*/_jsxs("div", {
-            className: styles[clsPrefix + "-placeholder-container"],
-            children: [/*#__PURE__*/_jsxs("div", {
-              className: styles[clsPrefix + "-header-left-container"],
-              children: [/*#__PURE__*/_jsx(CapIcon, {
-                type: "three-star-dark",
-                size: "m",
-                className: styles[clsPrefix + "-header-icon"]
-              }), /*#__PURE__*/_jsx("span", {
-                className: styles[clsPrefix + "-query-label"] + " " + styles[clsPrefix + "-header-label"],
-                children: textDescribeAudience
-              })]
-            }), /*#__PURE__*/_jsx(CapIcon, {
-              type: "close",
-              size: "s",
-              className: styles[clsPrefix + "-close-icon"] + " " + styles[clsPrefix + "-close-button"],
-              onClick: () => {
-                setIsVisible(false);
-                setIsQuerySubmitted(false);
-                setQuery('');
-                clearFilterData();
-                setFeedbackState(null);
-                setFeedbackSubmitted(false);
+            ),
+            textNeedHelp,
+            /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-ask-aira-wrapper`], onClick: toggleVisibility, children: /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-ask-aira-link`], children: textAskAiraLink }) })
+          ] }) }),
+          isVisible && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-header-container`], children: isQuerySubmitted ? /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-submitted-elements-container`], children: [
+              /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-submitted-left-section`], children: [
+                /* @__PURE__ */ jsx(
+                  CapIcon,
+                  {
+                    type: "three-star-dark",
+                    size: "m",
+                    className: styles[`${clsPrefix}-header-icon`]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${styles[`${clsPrefix}-query-label`]} ${styles[`${clsPrefix}-header-label`]}`,
+                    children: /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: `${styles[`${clsPrefix}-ask-aira-link`]} ${styles[`${clsPrefix}-query-display`]} ${getAudienceDataStatus !== "REQUEST" ? styles[`${clsPrefix}-normal-color`] : ""}`,
+                        children: [
+                          query,
+                          getAudienceDataStatus !== "REQUEST" && /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-edit-icon-container`], children: /* @__PURE__ */ jsx(
+                            CapIcon,
+                            {
+                              type: "edit",
+                              size: "s",
+                              className: styles[`${clsPrefix}-edit-icon`],
+                              onClick: () => {
+                                setIsQuerySubmitted(false);
+                                setFeedbackState(null);
+                                setFeedbackSubmitted(false);
+                              }
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                CapIcon,
+                {
+                  type: "close",
+                  size: "s",
+                  className: `${styles[`${clsPrefix}-close-icon`]} ${styles[`${clsPrefix}-close-button`]}`,
+                  onClick: () => {
+                    setIsVisible(false);
+                    setIsQuerySubmitted(false);
+                    setQuery("");
+                    clearFilterData();
+                    setFeedbackState(null);
+                    setFeedbackSubmitted(false);
+                  }
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-placeholder-container`], children: [
+              /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-header-left-container`], children: [
+                /* @__PURE__ */ jsx(
+                  CapIcon,
+                  {
+                    type: "three-star-dark",
+                    size: "m",
+                    className: styles[`${clsPrefix}-header-icon`]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${styles[`${clsPrefix}-query-label`]} ${styles[`${clsPrefix}-header-label`]}`,
+                    children: textDescribeAudience
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                CapIcon,
+                {
+                  type: "close",
+                  size: "s",
+                  className: `${styles[`${clsPrefix}-close-icon`]} ${styles[`${clsPrefix}-close-button`]}`,
+                  onClick: () => {
+                    setIsVisible(false);
+                    setIsQuerySubmitted(false);
+                    setQuery("");
+                    clearFilterData();
+                    setFeedbackState(null);
+                    setFeedbackSubmitted(false);
+                  }
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${styles[`${clsPrefix}-input-wrapper`]} ${isQuerySubmitted ? styles[`${clsPrefix}-hidden`] : ""}`,
+                children: /* @__PURE__ */ jsx(
+                  MultiLineInputBox,
+                  {
+                    value: query,
+                    setValue: setQuery,
+                    showSend: false,
+                    placeholder: textPlaceholder,
+                    onSubmit,
+                    mode: "audience-filter"
+                  }
+                )
               }
-            })]
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          className: styles[clsPrefix + "-input-wrapper"] + " " + (isQuerySubmitted ? styles[clsPrefix + "-hidden"] : ''),
-          children: /*#__PURE__*/_jsx(MultiLineInputBox, {
-            value: query,
-            setValue: setQuery,
-            showSend: false,
-            placeholder: textPlaceholder,
-            onSubmit: onSubmit,
-            mode: "audience-filter"
-          })
-        }), isQuerySubmitted && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(CapDivider, {
-            className: styles[clsPrefix + "-divider"]
-          }), renderLoadingIndicator(), hasError && /*#__PURE__*/_jsx(_Fragment, {
-            children: /*#__PURE__*/_jsx("div", {
-              className: styles[clsPrefix + "-error-container"],
-              children: /*#__PURE__*/_jsx(CapRow, {
-                type: "flex",
-                justify: "start",
-                align: "top",
-                className: styles[clsPrefix + "-full-width-row"],
-                children: /*#__PURE__*/_jsx("div", {
-                  className: styles[clsPrefix + "-header-left-container"],
-                  children: /*#__PURE__*/_jsx(ErrorBar, {
-                    textError: textError != null ? textError : '',
-                    className: styles[clsPrefix + "-error-bar-no-padding"]
-                  })
-                })
-              })
-            })
-          })]
-        }), hasResults && /*#__PURE__*/_jsx(_Fragment, {
-          children: /*#__PURE__*/_jsx("div", {
-            className: styles[clsPrefix + "-success-container"],
-            children: /*#__PURE__*/_jsxs(CapRow, {
-              type: "flex",
-              justify: "space-between",
-              align: "middle",
-              className: styles[clsPrefix + "-full-width-row"],
-              children: [(audienceData == null || (_audienceData$approac = audienceData.approach) == null ? void 0 : _audienceData$approac.length) > 0 && /*#__PURE__*/_jsxs("div", {
-                className: styles[clsPrefix + "-approach-container"],
-                children: [/*#__PURE__*/_jsxs("div", {
-                  className: styles[clsPrefix + "-thought-process-heading"],
-                  children: [/*#__PURE__*/_jsx("span", {
-                    className: styles[clsPrefix + "-thought-process-text"],
-                    onClick: () => setShowApproaches(!showApproaches),
-                    children: textThoughtProcess
-                  }), /*#__PURE__*/_jsx(CapIcon, {
-                    type: showApproaches ? 'chevron-up' : 'chevron-down',
-                    size: "s",
-                    className: styles[clsPrefix + "-chevron-icon"],
-                    onClick: () => setShowApproaches(!showApproaches)
-                  })]
-                }), /*#__PURE__*/_jsx("div", {
-                  className: showApproaches ? styles[clsPrefix + "-approach-content-visible"] : styles[clsPrefix + "-approach-content"],
-                  children: audienceData == null ? void 0 : audienceData.approach.map((approaches, index) => /*#__PURE__*/_jsxs(CapRow, {
-                    className: styles[clsPrefix + "-approach-item"],
-                    type: "flex",
-                    align: "top",
-                    justify: "start",
-                    children: [/*#__PURE__*/_jsx("span", {
-                      className: styles[clsPrefix + "-bullet"],
-                      children: "\u2022"
-                    }), /*#__PURE__*/_jsx("span", {
-                      className: styles[clsPrefix + "-approach-text"],
-                      children: String(approaches)
-                    })]
-                  }, "approach-" + index))
-                })]
-              }), (audienceData == null ? void 0 : audienceData.error) && /*#__PURE__*/_jsx("div", {
-                className: styles[clsPrefix + "-error-container"],
-                children: audienceData == null ? void 0 : audienceData.error.map((error, index) => /*#__PURE__*/_jsxs(CapRow, {
-                  className: styles[clsPrefix + "-error-item"],
-                  type: "flex",
-                  align: "top",
-                  justify: "start",
-                  children: [/*#__PURE__*/_jsx(CapIcon, {
-                    className: styles[clsPrefix + "-error-icon"],
-                    type: 'error',
-                    size: "s",
-                    "data-testid": "cap-icon"
-                  }), /*#__PURE__*/_jsx("span", {
-                    className: styles[clsPrefix + "-error-text"],
-                    children: error
-                  })]
-                }, "error-" + index))
-              }), (audienceData == null ? void 0 : audienceData.warning) && /*#__PURE__*/_jsx("div", {
-                children: audienceData == null ? void 0 : audienceData.warning.map((warn, index) => /*#__PURE__*/_jsxs(CapRow, {
-                  className: styles[clsPrefix + "-warning-item"],
+            ),
+            isQuerySubmitted && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(CapDivider, { className: styles[`${clsPrefix}-divider`] }),
+              renderLoadingIndicator(),
+              hasError && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-error-container`], children: /* @__PURE__ */ jsx(
+                CapRow,
+                {
                   type: "flex",
-                  align: "middle",
                   justify: "start",
-                  children: [/*#__PURE__*/_jsx(CapIcon, {
-                    className: styles[clsPrefix + "-warning-icon"],
-                    type: 'alert-warning',
-                    "data-testid": "cap-icon"
-                  }), /*#__PURE__*/_jsx("span", {
-                    className: styles[clsPrefix + "-warning-text"],
-                    children: warn
-                  })]
-                }, "warning-" + index))
-              }), Boolean((audienceData == null ? void 0 : audienceData.response) && (audienceData == null || (_audienceData$status = audienceData.status) == null ? void 0 : _audienceData$status.code) == 200) && /*#__PURE__*/_jsxs("div", {
-                className: styles[clsPrefix + "-filters-added-container"],
-                children: [/*#__PURE__*/_jsxs("div", {
-                  className: styles[clsPrefix + "-filters-added-content"],
-                  children: [/*#__PURE__*/_jsx(CapIcon, {
-                    type: "check-filled",
-                    size: "m",
-                    className: styles[clsPrefix + "-success-icon"]
-                  }), /*#__PURE__*/_jsx("span", {
-                    className: styles[clsPrefix + "-filters-added-text"],
-                    children: (_ref2 = audienceData != null && audienceData.partial_error ? textPartialFiltersAdded : textFiltersAdded) != null ? _ref2 : ''
-                  })]
-                }), /*#__PURE__*/_jsxs("div", {
-                  className: styles[clsPrefix + "-feedback-buttons"],
-                  children: [feedbackState === 'like' ? /*#__PURE__*/_jsx(CapIcon, {
-                    type: "filled-like",
-                    size: "m",
-                    className: styles[clsPrefix + "-feedback-icon"] + " " + styles[clsPrefix + "-feedback-selected"] + " " + (feedbackSubmitted ? styles[clsPrefix + "-feedback-submitted"] : ''),
-                    onClick: handleLikeClick
-                  }) : /*#__PURE__*/_jsx(CapIcon, {
-                    type: "like",
-                    size: "m",
-                    className: styles[clsPrefix + "-feedback-icon"] + " " + (feedbackSubmitted && feedbackState === 'dislike' ? styles[clsPrefix + "-feedback-disabled"] : ''),
-                    onClick: handleLikeClick
-                  }), feedbackState === 'dislike' ? /*#__PURE__*/_jsx(CapIcon, {
-                    type: "filled-disLike",
-                    size: "m",
-                    className: styles[clsPrefix + "-feedback-icon"] + " " + styles[clsPrefix + "-feedback-selected"] + " " + (feedbackSubmitted ? styles[clsPrefix + "-feedback-submitted"] : ''),
-                    onClick: handleDislikeClick
-                  }) : /*#__PURE__*/_jsx(CapIcon, {
-                    type: "disLike",
-                    size: "m",
-                    className: styles[clsPrefix + "-feedback-icon"] + " " + (feedbackSubmitted && feedbackState === 'like' ? styles[clsPrefix + "-feedback-disabled"] : ''),
-                    onClick: handleDislikeClick
-                  })]
-                })]
-              })]
-            })
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(CapModal, {
-      title: /*#__PURE__*/_jsxs("div", {
-        children: [/*#__PURE__*/_jsx("span", {
-          className: styles[clsPrefix + "-modal-title"],
-          children: textFeedbackTitle
-        }), /*#__PURE__*/_jsx("span", {
-          className: styles[clsPrefix + "-modal-title-optional"],
-          children: textFeedbackOptional
-        })]
-      }),
-      open: isModalVisible,
-      onOk: handleModalOk,
-      onCancel: handleModalCancel,
-      okText: textFeedbackSubmit,
-      closeText: textFeedbackCancel,
-      styles: {
-        body: {
-          height: '13.4286rem'
-        },
-        mask: {
-          backgroundColor: CAP_ASK_AIRA_COLORS.MASK_BG
-        }
-      },
-      transitionName: "",
-      maskTransitionName: "",
-      footer: /*#__PURE__*/_jsxs("div", {
-        className: styles[clsPrefix + "-modal-footer"],
-        children: [/*#__PURE__*/_jsx(CapButton, {
-          onClick: handleModalOk,
-          type: "primary",
-          children: textFeedbackSubmit
-        }), /*#__PURE__*/_jsx(CapButton, {
-          onClick: handleModalCancel,
-          type: "flat",
-          className: styles[clsPrefix + "-modal-flat-button"],
-          children: textFeedbackCancel
-        })]
-      }),
-      children: [/*#__PURE__*/_jsx("div", {
-        className: styles[clsPrefix + "-feedback-message"],
-        children: textFeedbackMessage
-      }), /*#__PURE__*/_jsxs("div", {
-        className: styles[clsPrefix + "-textarea-container"],
-        children: [/*#__PURE__*/_jsx("textarea", {
-          className: styles[clsPrefix + "-feedback-textarea"],
-          rows: 4,
-          value: comment,
-          onChange: handleCommentChange,
-          placeholder: textFeedbackPlaceholder,
-          maxLength: 200
-        }), /*#__PURE__*/_jsxs("div", {
-          className: styles[clsPrefix + "-character-count"],
-          children: [comment.length, "/200"]
-        })]
-      })]
-    })]
-  });
+                  align: "top",
+                  className: styles[`${clsPrefix}-full-width-row`],
+                  children: /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-header-left-container`], children: /* @__PURE__ */ jsx(
+                    ErrorBar,
+                    {
+                      textError: textError ?? "",
+                      className: styles[`${clsPrefix}-error-bar-no-padding`]
+                    }
+                  ) })
+                }
+              ) }) })
+            ] }),
+            hasResults && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-success-container`], children: /* @__PURE__ */ jsxs(
+              CapRow,
+              {
+                type: "flex",
+                justify: "space-between",
+                align: "middle",
+                className: styles[`${clsPrefix}-full-width-row`],
+                children: [
+                  ((_a = audienceData == null ? void 0 : audienceData.approach) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-approach-container`], children: [
+                    /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-thought-process-heading`], children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: styles[`${clsPrefix}-thought-process-text`],
+                          onClick: () => setShowApproaches(!showApproaches),
+                          children: textThoughtProcess
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        CapIcon,
+                        {
+                          type: showApproaches ? "chevron-up" : "chevron-down",
+                          size: "s",
+                          className: styles[`${clsPrefix}-chevron-icon`],
+                          onClick: () => setShowApproaches(!showApproaches)
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: showApproaches ? styles[`${clsPrefix}-approach-content-visible`] : styles[`${clsPrefix}-approach-content`],
+                        children: audienceData == null ? void 0 : audienceData.approach.map(
+                          (approaches, index) => /* @__PURE__ */ jsxs(
+                            CapRow,
+                            {
+                              className: styles[`${clsPrefix}-approach-item`],
+                              type: "flex",
+                              align: "top",
+                              justify: "start",
+                              children: [
+                                /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-bullet`], children: "•" }),
+                                /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-approach-text`], children: String(approaches) })
+                              ]
+                            },
+                            `approach-${index}`
+                          )
+                        )
+                      }
+                    )
+                  ] }),
+                  (audienceData == null ? void 0 : audienceData.error) && /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-error-container`], children: audienceData == null ? void 0 : audienceData.error.map((error, index) => /* @__PURE__ */ jsxs(
+                    CapRow,
+                    {
+                      className: styles[`${clsPrefix}-error-item`],
+                      type: "flex",
+                      align: "top",
+                      justify: "start",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CapIcon,
+                          {
+                            className: styles[`${clsPrefix}-error-icon`],
+                            type: "error",
+                            size: "s",
+                            "data-testid": "cap-icon"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-error-text`], children: error })
+                      ]
+                    },
+                    `error-${index}`
+                  )) }),
+                  (audienceData == null ? void 0 : audienceData.warning) && /* @__PURE__ */ jsx("div", { children: audienceData == null ? void 0 : audienceData.warning.map((warn, index) => /* @__PURE__ */ jsxs(
+                    CapRow,
+                    {
+                      className: styles[`${clsPrefix}-warning-item`],
+                      type: "flex",
+                      align: "middle",
+                      justify: "start",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CapIcon,
+                          {
+                            className: styles[`${clsPrefix}-warning-icon`],
+                            type: "alert-warning",
+                            "data-testid": "cap-icon"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-warning-text`], children: warn })
+                      ]
+                    },
+                    `warning-${index}`
+                  )) }),
+                  Boolean((audienceData == null ? void 0 : audienceData.response) && ((_b = audienceData == null ? void 0 : audienceData.status) == null ? void 0 : _b.code) == 200) && /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-filters-added-container`], children: [
+                    /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-filters-added-content`], children: [
+                      /* @__PURE__ */ jsx(
+                        CapIcon,
+                        {
+                          type: "check-filled",
+                          size: "m",
+                          className: styles[`${clsPrefix}-success-icon`]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-filters-added-text`], children: ((audienceData == null ? void 0 : audienceData.partial_error) ? textPartialFiltersAdded : textFiltersAdded) ?? "" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-feedback-buttons`], children: [
+                      feedbackState === "like" ? /* @__PURE__ */ jsx(
+                        CapIcon,
+                        {
+                          type: "filled-like",
+                          size: "m",
+                          className: `${styles[`${clsPrefix}-feedback-icon`]} ${styles[`${clsPrefix}-feedback-selected`]} ${feedbackSubmitted ? styles[`${clsPrefix}-feedback-submitted`] : ""}`,
+                          onClick: handleLikeClick
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        CapIcon,
+                        {
+                          type: "like",
+                          size: "m",
+                          className: `${styles[`${clsPrefix}-feedback-icon`]} ${feedbackSubmitted && feedbackState === "dislike" ? styles[`${clsPrefix}-feedback-disabled`] : ""}`,
+                          onClick: handleLikeClick
+                        }
+                      ),
+                      feedbackState === "dislike" ? /* @__PURE__ */ jsx(
+                        CapIcon,
+                        {
+                          type: "filled-disLike",
+                          size: "m",
+                          className: `${styles[`${clsPrefix}-feedback-icon`]} ${styles[`${clsPrefix}-feedback-selected`]} ${feedbackSubmitted ? styles[`${clsPrefix}-feedback-submitted`] : ""}`,
+                          onClick: handleDislikeClick
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        CapIcon,
+                        {
+                          type: "disLike",
+                          size: "m",
+                          className: `${styles[`${clsPrefix}-feedback-icon`]} ${feedbackSubmitted && feedbackState === "like" ? styles[`${clsPrefix}-feedback-disabled`] : ""}`,
+                          onClick: handleDislikeClick
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              }
+            ) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          CapModalWithHoc,
+          {
+            title: /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-modal-title`], children: textFeedbackTitle }),
+              /* @__PURE__ */ jsx("span", { className: styles[`${clsPrefix}-modal-title-optional`], children: textFeedbackOptional })
+            ] }),
+            open: isModalVisible,
+            onOk: handleModalOk,
+            onCancel: handleModalCancel,
+            okText: textFeedbackSubmit,
+            closeText: textFeedbackCancel,
+            styles: {
+              body: { height: "13.4286rem" },
+              mask: { backgroundColor: CAP_ASK_AIRA_COLORS.MASK_BG }
+            },
+            transitionName: "",
+            maskTransitionName: "",
+            footer: /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-modal-footer`], children: [
+              /* @__PURE__ */ jsx(CapButton, { onClick: handleModalOk, type: "primary", children: textFeedbackSubmit }),
+              /* @__PURE__ */ jsx(
+                CapButton,
+                {
+                  onClick: handleModalCancel,
+                  type: "flat",
+                  className: styles[`${clsPrefix}-modal-flat-button`],
+                  children: textFeedbackCancel
+                }
+              )
+            ] }),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-feedback-message`], children: textFeedbackMessage }),
+              /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-textarea-container`], children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    className: styles[`${clsPrefix}-feedback-textarea`],
+                    rows: 4,
+                    value: comment,
+                    onChange: handleCommentChange,
+                    placeholder: textFeedbackPlaceholder,
+                    maxLength: 200
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: styles[`${clsPrefix}-character-count`], children: [
+                  comment.length,
+                  "/200"
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const AudienceFilterBot$1 = injectIntl(AudienceFilterBot);
+export {
+  AudienceFilterBot$1 as default
 };
-export default injectIntl(AudienceFilterBot);