@rh-support/troubleshoot 2.6.46 → 2.6.48

package/lib/esm/components/Recommendations/InsightsRuleInfo.js

@@ -2,7 +2,6 @@ import { pcm } from '@cee-eng/hydrajs';
 import { Accordion, AccordionContent, AccordionItem, AccordionToggle, Label, LabelGroup } from '@patternfly/react-core';
 import BullseyeIcon from '@patternfly/react-icons/dist/js/icons/bullseye-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { haltEvent } from '@rh-support/utils';
 import DOMPurify from 'dompurify';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useRef, useState } from 'react';
@@ -70,10 +69,7 @@ export function InsightsRuleInfo({ doc, showNewTag, duplicateKeys, rank }) {
         React.createElement(AccordionContent, null,
             React.createElement(Accordion, { asDefinitionList: false, className: "push-bottom-narrow" },
                 React.createElement(AccordionItem, { isExpanded: isIssueExpanded },
-                    React.createElement(AccordionToggle, { onClick: (e) => {
-                            haltEvent(e);
-                            setIsIssueExpanded(!isIssueExpanded);
-                        }, id: `${doc.id}-detected-issue` },
+                    React.createElement(AccordionToggle, { onClick: () => setIsIssueExpanded(!isIssueExpanded), id: `${doc.id}-detected-issue` },
                         React.createElement(BullseyeIcon, { className: "pf-v6-u-mr-sm" }),
                         React.createElement(Trans, null, "Detected issues")),
                     React.createElement(AccordionContent, null,
@@ -82,10 +78,7 @@ export function InsightsRuleInfo({ doc, showNewTag, duplicateKeys, rank }) {
                                     'N/A'),
                             } }))),
                 ((_f = ruleData === null || ruleData === void 0 ? void 0 : ruleData.more_info) !== null && _f !== void 0 ? _f : false) && (React.createElement(AccordionItem, { isExpanded: isAdditionalExpanded },
-                    React.createElement(AccordionToggle, { onClick: (e) => {
-                            haltEvent(e);
-                            setIsAdditionalExpanded(!isAdditionalExpanded);
-                        }, id: `${doc.id}-additional-info` },
+                    React.createElement(AccordionToggle, { onClick: () => setIsAdditionalExpanded(!isAdditionalExpanded), id: `${doc.id}-additional-info` },
                         React.createElement(InfoCircleIcon, { className: "pf-v6-u-mr-sm" }),
                         React.createElement(Trans, null, "Additional info")),
                     React.createElement(AccordionContent, null,

package/lib/esm/components/Recommendations/RecommendationFeedbackModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecommendationFeedbackModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/RecommendationFeedbackModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;CACxB;AACD,wBAAgB,2BAA2B,CAAC,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,EAAE,MAAM,qBA4BnG"}
+{"version":3,"file":"RecommendationFeedbackModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/RecommendationFeedbackModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;CACxB;AACD,wBAAgB,2BAA2B,CAAC,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,EAAE,MAAM,qBA+BnG"}

package/lib/esm/components/Recommendations/RecommendationFeedbackModal.js

@@ -1,12 +1,12 @@
-import { Button, Modal, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core';
+import { Button, Modal, ModalFooter, ModalVariant } from '@patternfly/react-core';
 import React from 'react';
 import { Trans } from 'react-i18next';
+import { Link } from 'react-router-dom';
 export function RecommendationFeedbackModal({ isModalOpen, handleModalToggle, modalContent }) {
     return (React.createElement(Modal, { variant: ModalVariant.small, id: "resolved-feedback-modal", "aria-describedby": "rec-feedback-modal", "aria-label": "Feedback modal", isOpen: isModalOpen, onClose: handleModalToggle },
-        React.createElement(ModalHeader, null,
-            React.createElement("h2", { id: "rec-feedback-modal" }, modalContent)),
+        React.createElement("h1", { id: "rec-feedback-modal" }, modalContent),
         React.createElement(ModalFooter, null,
-            React.createElement(Button, { "data-tracking-id": "resolved-feedback-cases", key: "view", component: "a", href: "#/case/list" },
+            React.createElement(Link, { "data-tracking-id": "resolved-feedback-cases", key: "view", className: "pf-v6-c-button pf-m-primary", to: "/case/list" },
                 React.createElement(Trans, null, "View your cases")),
             React.createElement(Button, { "data-tracking-id": "resolved-feedback-continue", key: "continue", variant: "link", onClick: handleModalToggle },
                 React.createElement(Trans, null, "Continue troubleshooting")))));

package/lib/esm/components/Recommendations/Recommendations.js

@@ -184,7 +184,7 @@ export default function Recommendations(props) {
             isATestvariation
                 ? (recommendationState.visibleDocs.length !== 0 ||
                     recommendationState.isLoadingRecommendations) && (React.createElement("div", { className: `${recommendationState.isLoadingRecommendations ? 'gradient' : ''} label-container-icon` },
-                    React.createElement(Label, { id: "DeepPurpleColorAILabel", color: "purple" },
+                    React.createElement("div", { id: "DeepPurpleColorAILabel", className: "pf-v6-u-mb-md", color: "purple" },
                         recommendationState.isLoadingRecommendations ? (React.createElement(React.Fragment, null,
                             React.createElement("span", { className: "loading-text" },
                                 React.createElement(Spinner, { size: "sm", className: "pf-v6-u-mr-xs" }),
@@ -200,7 +200,7 @@ export default function Recommendations(props) {
                                 React.createElement(WatsonxAiIcon, { fillColor: "#FFFFFF", className: "pf-v6-u-mr-xs" }),
                                 ' ',
                                 React.createElement("span", { className: "ai-label-text1" },
-                                    React.createElement(Trans, null, "Articles recommended by OpenShift AI"),
+                                    React.createElement(Trans, null, "Recommended search results"),
                                     " ",
                                     infoPopover)))),
                         ' ')))

package/lib/esm/components/Recommendations/RulesModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RulesModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/RulesModal.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAI7D,UAAU,MAAM;IACZ,cAAc,EAAE,wBAAwB,EAAE,CAAC;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,aAAa,EAAE,MAAM,GAAG,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,qBAqM/C"}
+{"version":3,"file":"RulesModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/RulesModal.tsx"],"names":[],"mappings":"AAcA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAI7D,UAAU,MAAM;IACZ,cAAc,EAAE,wBAAwB,EAAE,CAAC;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,aAAa,EAAE,MAAM,GAAG,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,qBAiM/C"}

package/lib/esm/components/Recommendations/RulesModal.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { pcm } from '@cee-eng/hydrajs';
-import { Accordion, Button, Card, CardBody, CardExpandableContent, CardHeader, CardTitle, Modal, ModalBody, ModalFooter, ModalHeader, } from '@patternfly/react-core';
+import { Accordion, Button, Card, CardBody, CardExpandableContent, CardHeader, CardTitle, Modal, ModalFooter, } from '@patternfly/react-core';
 import { useFetch } from '@rh-support/components';
 import { getResTypeFromUrl } from '@rh-support/utils';
 import React, { useContext, useEffect, useState } from 'react';
@@ -107,12 +107,9 @@ export function InsightResultModal(props) {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(RecommendationFeedbackModal, { isModalOpen: isModalVisible, handleModalToggle: onModalToggle, modalContent: t(`Great, we're glad that resolved your issue`) }),
-        React.createElement(Modal, { className: "critical-solutions-modal", "data-tracking-id": "critical-solutions-modal-body", onClose: props.onModalToggle, isOpen: props.isOpen },
-            React.createElement(ModalHeader, null,
-                React.createElement("h2", null, t('Critical solutions for your system'))),
-            React.createElement(ModalBody, null,
-                React.createElement("p", null, t('Solutions have been triggered for you based on file upload or common issues that currently have high visibility.')),
-                React.createElement(Accordion, { className: "push-top-narrow rules-modal-items", headingLevel: "h2", asDefinitionList: false, isBordered: true }, props.insightResults.map((doc, index) => (React.createElement(InsightsRuleInfo, { duplicateKeys: duplicateKeys, showNewTag: canShowNewTag, key: doc.id + doc.attachmentId, doc: doc, rank: index + 1 }))))),
+        React.createElement(Modal, { className: "critical-solutions-modal", title: t('Critical solutions for your system'), "data-tracking-id": "critical-solutions-modal-body", onClose: props.onModalToggle, isOpen: props.isOpen },
+            React.createElement("p", null, t('Solutions have been triggered for you based on file upload or common issues that currently have high visibility.')),
+            React.createElement(Accordion, { className: "push-top-narrow rules-modal-items", headingLevel: "h2", asDefinitionList: false, isBordered: true }, props.insightResults.map((doc, index) => (React.createElement(InsightsRuleInfo, { duplicateKeys: duplicateKeys, showNewTag: canShowNewTag, key: doc.id + doc.attachmentId, doc: doc, rank: index + 1 })))),
             React.createElement(ModalFooter, null,
                 React.createElement(Button, { isDisabled: isFetching, isLoading: isFetching, onClick: handleSolvedIssue, key: "solved-my-issue", variant: "primary", "data-tracking-id": "solved-my-issue-critical-solutions-modal" }, t('I solved my issue')),
                 React.createElement(Button, { onClick: props.onModalToggle, key: "confirm", variant: "secondary", "data-tracking-id": "cancel-critical-solutions-modal" }, t('Cancel'))))));

package/lib/esm/components/Recommendations/WatsonxAiIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export const WatsonxAiIcon = (props) => {
     return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", viewBox: "0 0 16 17", fill: "none" },
-        React.createElement("g", { clipPath: "url(#clip0_2742_18241)" },
+        React.createElement("g", { "clip-path": "url(#clip0_2742_18241)" },
             React.createElement("path", { d: "M13 12.5007C12.4477 12.5007 12 12.9484 12 13.5007C12 13.5389 12.0071 13.5751 12.0112 13.6122C10.8708 14.5103 9.47165 15.0007 8 15.0007C5.86915 15.0007 4 13.0146 4 10.7507C4 8.40722 5.9065 6.50072 8.25 6.50072H8.5V5.50072H8.25C5.3552 5.50072 3 7.85592 3 10.7507C3 11.6927 3.2652 12.5955 3.71855 13.379C2.3619 12.1868 1.5 10.4445 1.5 8.50072C1.5 7.44312 1.74585 6.43432 2.23095 5.50292L1.34375 5.04102C0.79175 6.10157 0.5 7.29787 0.5 8.50072C0.5 12.6362 3.8645 16.0007 8 16.0007C9.6872 16.0007 11.2909 15.4411 12.6024 14.4176C12.7244 14.4706 12.8586 14.5007 13 14.5007C13.5523 14.5007 14 14.053 14 13.5007C14 12.9484 13.5523 12.5007 13 12.5007Z", fill: "#1F0066" }),
             React.createElement("path", { d: "M6.5 11.5V10.5H5.5V11.5H6.5Z", fill: "#1F0066" }),
             React.createElement("path", { d: "M10.5 6.5V5.5H9.5V6.5H10.5Z", fill: "#1F0066" }),

package/lib/esm/components/SessionRestore/RestoreLastSessionModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RestoreLastSessionModal.d.ts","sourceRoot":"","sources":["../../../../src/components/SessionRestore/RestoreLastSessionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAGnF,OAAc,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAQ9C,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,YAAY,EAAE,YAAY,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,MAAM,CAuE9C,CAAC"}
+{"version":3,"file":"RestoreLastSessionModal.d.ts","sourceRoot":"","sources":["../../../../src/components/SessionRestore/RestoreLastSessionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAGnF,OAAc,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAQ9C,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,YAAY,EAAE,YAAY,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,MAAM,CAmE9C,CAAC"}

package/lib/esm/components/SessionRestore/RestoreLastSessionModal.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core';
+import { Button, Modal, ModalFooter, ModalVariant } from '@patternfly/react-core';
 import isEqual from 'lodash/isEqual';
 import React, { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -38,10 +38,8 @@ export const RestoreLastSessionModal = ({ onRestore, errorSession }) => {
         updateCaseCreationErrorStatus(caseDispatch, false);
         updateSession(sessionDispatch, errorSession.session.id, errorSession.sessionDetails, Object.assign(Object.assign({}, errorSession.session), { caseCreationError: false }));
     };
-    return (React.createElement(Modal, { "data-tracking-id": "restore-session-modal", variant: ModalVariant.small, isOpen: !caseCreationError && caseCreation500ErrorStatus, onClose: onOpenNewCase, "aria-labelledby": "restore-session-modal-title", "aria-describedby": "restore-session-modal-body" },
-        React.createElement(ModalHeader, { title: t('Restore last session?'), labelId: "restore-session-modal-title" }),
-        React.createElement(ModalBody, { id: "restore-session-modal-body" },
-            React.createElement(Trans, null, "It looks like an error prevented your last case from being submitted. Would you like to restore the last session or open a new case?")),
+    return (React.createElement(Modal, { "data-tracking-id": "restore-session-modal", variant: ModalVariant.small, title: t('Restore last session?'), isOpen: !caseCreationError && caseCreation500ErrorStatus, onClose: onOpenNewCase },
+        React.createElement(Trans, null, "It looks like an error prevented your last case from being submitted. Would you like to restore the last session or open a new case?"),
         React.createElement(ModalFooter, null,
             React.createElement(Button, { key: "restore", variant: "primary", onClick: onRestoreClick, "data-tracking-id": "restore-session-button" },
                 React.createElement(Trans, null, " Restore")),

package/lib/esm/components/SessionRestore/SessionRestore.js

@@ -305,7 +305,7 @@ export function SessionRestore(props) {
     ], 1000);
     if (!sessionRestoreCardSections.includes(activeSection))
         return React.createElement(React.Fragment, null);
-    return (React.createElement("div", { className: "pf-v6-u-mb-lg pf-v6-u-mt-0" },
+    return (React.createElement("div", { className: "pf-v6-u-mb-md pf-v6-u-mt-0" },
         ' ',
         React.createElement(SessionRestoreCard, { onRestore: restoreSession, previousSessions: previousSessions, onCardDismiss: onSessionRestoreCardDismiss }),
         React.createElement(RestoreLastSessionModal, { onRestore: restoreSession, errorSession: sessionRestore.sessionOfCaseCreationError })));

package/lib/esm/components/Suggestions/Suggestions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.d.ts","sourceRoot":"","sources":["../../../../src/components/Suggestions/Suggestions.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAU5D,UAAU,MAAM;IACZ,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,qBAgIhD"}
+{"version":3,"file":"Suggestions.d.ts","sourceRoot":"","sources":["../../../../src/components/Suggestions/Suggestions.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAU5D,UAAU,MAAM;IACZ,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,qBAqHhD"}

package/lib/esm/components/Suggestions/Suggestions.js

@@ -1,5 +1,5 @@
 import { pcm } from '@cee-eng/hydrajs';
-import { Accordion, Tooltip } from '@patternfly/react-core';
+import { Tooltip } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import { TopContentSearch } from '@rh-support/components';
 import { FeatureFlagKey, useIsFeatureAvailable } from '@rh-support/react-context';
@@ -17,7 +17,6 @@ export default function Suggestions(props) {
     const { topContentState: { topContent }, } = useContext(TCStateContext);
     const { sessionRestore: { activeSessionId, sessionResourceTracking }, } = useContext(SessionRestoreStateContext);
     const accordionRef = useRef(null);
-    const toggleButtonRefs = useRef([]);
     const { version, product } = useCaseSelector((state) => ({
         version: state.caseDetails.version,
         product: state.caseDetails.product,
@@ -36,32 +35,28 @@ export default function Suggestions(props) {
         setMaxTC(topContent.data.length);
     };
     const onSearchChange = (searchTerm, filteredData) => {
+        var _a, _b;
         setFilteredTC(filteredData);
-        setTimeout(() => {
-            const shouldBeExpanded = Boolean(searchTerm);
-            for (const id of toggleButtonRefs.current) {
-                const button = document.getElementById(`${id}`);
-                const isExpanded = (button === null || button === void 0 ? void 0 : button.getAttribute('aria-expanded')) === 'true';
-                if (button && isExpanded !== shouldBeExpanded) {
-                    button.click();
-                }
-            }
-        });
+        if (searchTerm) {
+            (_a = accordionRef.current) === null || _a === void 0 ? void 0 : _a.expandAll();
+        }
+        else {
+            (_b = accordionRef.current) === null || _b === void 0 ? void 0 : _b.collapseAll();
+        }
     };
     return (React.createElement("div", { className: "top-content-suggestion-accordion" },
         showTitleDescription && (React.createElement("div", { className: "card card-support top-content-card-wrapper" },
-            isTCSearchEnabled && (React.createElement("h3", { className: "card-heading popular-solutions green-card-heading" },
+            !isTCSearchEnabled && (React.createElement("h3", { className: "card-heading popular-solutions green-card-heading" },
                 props.title
                     ? props.title
                     : t('i18nKeyPopularSolutions', 'Red Hat hand picked support articles'),
                 React.createElement(Tooltip, { content: React.createElement("div", null,
                         React.createElement(Trans, null, "Support articles are matched to the product and version details you selected, not the problem details you entered.")) },
                     React.createElement(InfoCircleIcon, { className: "pf-v6-u-ml-sm", "aria-label": t('More info about how support articles are matched') })))),
-            !isTCSearchEnabled && (React.createElement("div", { className: "card-body" },
-                React.createElement(TopContentSearch, { className: "pf-v6-u-text-color-regular", topContentData: topContent.data, topContentResultsWrapperRef: accordionRef, onSearch: onSearchChange, dataTrackingId: "top-content-filter-troubleshoot", enableEventTracking: true }))))),
-        React.createElement(Accordion, { className: "pf-v6-u-ml-sm pf-v6-u-mr-sm" }, map(filteredTC.slice(0, maxTC), (sug, index) => {
+            isTCSearchEnabled && (React.createElement("div", { className: "card-body" },
+                React.createElement(TopContentSearch, { topContentData: topContent.data, topContentResultsWrapperRef: accordionRef, onSearch: onSearchChange, dataTrackingId: "top-content-filter-troubleshoot", enableEventTracking: true }))))),
+        React.createElement("pfe-accordion", { ref: accordionRef }, map(filteredTC.slice(0, maxTC), (sug, index) => {
             var _a, _b;
-            toggleButtonRefs.current.push(index);
             return (React.createElement(TopContent, { seSessionId: activeSessionId, seResourceOriginID: (_b = (_a = sessionResourceTracking[SessionResourceSource.TOP_CONTENT]) === null || _a === void 0 ? void 0 : _a.resourceOriginId) !== null && _b !== void 0 ? _b : '', topContentIndex: index, onResourceClick: onResourceClick, name: sug.categoryName, key: sug.categoryName, items: sug.content, helperText: (sug === null || sug === void 0 ? void 0 : sug.helperText) || '' }));
         })),
         showMax && filteredTC.length > maxTC && (React.createElement("div", { className: "text-right" },

package/lib/esm/components/Suggestions/TopContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Suggestions/TopContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2DAA2D,CAAC;AAKxF,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,UAAU,MAAM;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM,qBAmI/C"}
+{"version":3,"file":"TopContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Suggestions/TopContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2DAA2D,CAAC;AAIxF,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,UAAU,MAAM;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM,qBAsI/C"}

package/lib/esm/components/Suggestions/TopContent.js

@@ -1,6 +1,5 @@
 import { pcm } from '@cee-eng/hydrajs';
-import { AccordionContent, AccordionItem, AccordionToggle, Tooltip } from '@patternfly/react-core';
-import { haltEvent } from '@rh-support/utils';
+import { Accordion, AccordionContent, AccordionItem, AccordionToggle, Tooltip } from '@patternfly/react-core';
 import isEqual from 'lodash/isEqual';
 import map from 'lodash/map';
 import React, { useState } from 'react';
@@ -45,22 +44,23 @@ export default function TopContent(props) {
         }));
     };
     return (React.createElement(React.Fragment, null, props.helperText ? (React.createElement(Tooltip, { content: React.createElement("div", null, props.helperText) },
+        React.createElement(Accordion, { className: "top-content-accordion" },
+            React.createElement(AccordionItem, { isExpanded: expanded === `${props.topContentIndex}` },
+                React.createElement(AccordionToggle, { onClick: () => {
+                        onToggle(`${props.topContentIndex}`);
+                    }, "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}`, id: `${props.topContentIndex}` },
+                    React.createElement("h3", null, props.name)),
+                React.createElement(AccordionContent, { id: `${props.topContentIndex}` },
+                    React.createElement("ul", { className: "list-flushleft", style: { listStyleType: 'disc' } }, map(props.items, (item, i) => (React.createElement("li", { key: i + item.contentTitle },
+                        React.createElement("p", null,
+                            React.createElement("a", { className: "se-recommended ts-top-problems", "data-tracking-id": "se-recommended-top-content", onClick: onLinkClick(item), href: `${item.contentUrl}?${RouteUtils.getSEResourceQueryParams(props.seSessionId, props.seResourceOriginID, SessionResourceSource.TOP_CONTENT)}`, target: "_blank", rel: "noopener noreferrer" }, item.contentTitle))))))))))) : (React.createElement(Accordion, null,
         React.createElement(AccordionItem, { isExpanded: expanded === `${props.topContentIndex}` },
-            React.createElement(AccordionToggle, { onClick: (e) => {
-                    haltEvent(e);
+            React.createElement(AccordionToggle, { onClick: () => {
                     onToggle(`${props.topContentIndex}`);
                 }, "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}`, id: `${props.topContentIndex}` },
                 React.createElement("h3", null, props.name)),
             React.createElement(AccordionContent, { id: `${props.topContentIndex}` },
                 React.createElement("ul", { className: "list-flushleft", style: { listStyleType: 'disc' } }, map(props.items, (item, i) => (React.createElement("li", { key: i + item.contentTitle },
                     React.createElement("p", null,
-                        React.createElement("a", { className: "se-recommended ts-top-problems", "data-tracking-id": "se-recommended-top-content", onClick: onLinkClick(item), href: `${item.contentUrl}?${RouteUtils.getSEResourceQueryParams(props.seSessionId, props.seResourceOriginID, SessionResourceSource.TOP_CONTENT)}`, target: "_blank", rel: "noopener noreferrer" }, item.contentTitle)))))))))) : (React.createElement(AccordionItem, { isExpanded: expanded === `${props.topContentIndex}` },
-        React.createElement(AccordionToggle, { onClick: () => {
-                onToggle(`${props.topContentIndex}`);
-            }, "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}`, id: `${props.topContentIndex}` },
-            React.createElement("h3", null, props.name)),
-        React.createElement(AccordionContent, { id: `${props.topContentIndex}` },
-            React.createElement("ul", { className: "list-flushleft", style: { listStyleType: 'disc' } }, map(props.items, (item, i) => (React.createElement("li", { key: i + item.contentTitle },
-                React.createElement("p", null,
-                    React.createElement("a", { className: "se-recommended ts-top-problems", "data-tracking-id": "se-recommended-top-content", onClick: onLinkClick(item), href: `${item.contentUrl}?${RouteUtils.getSEResourceQueryParams(props.seSessionId, props.seResourceOriginID, SessionResourceSource.TOP_CONTENT)}`, target: "_blank", rel: "noopener noreferrer" }, item.contentTitle)))))))))));
+                        React.createElement("a", { className: "se-recommended ts-top-problems", "data-tracking-id": "se-recommended-top-content", onClick: onLinkClick(item), href: `${item.contentUrl}?${RouteUtils.getSEResourceQueryParams(props.seSessionId, props.seResourceOriginID, SessionResourceSource.TOP_CONTENT)}`, target: "_blank", rel: "noopener noreferrer" }, item.contentTitle))))))))))));
 }

package/lib/esm/components/TroubleshootSection/AskRedHat.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IProps {
+    onChatWithAIClick?: () => void;
+}
+export declare const AskRedHat: React.FC<IProps>;
+export {};
+//# sourceMappingURL=AskRedHat.d.ts.map

package/lib/esm/components/TroubleshootSection/AskRedHat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AskRedHat.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/AskRedHat.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAYhD,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA+StC,CAAC"}

package/lib/esm/components/TroubleshootSection/AskRedHat.js

@@ -0,0 +1,176 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Env } from '@cee-eng/hydrajs';
+import { sendRHDirectMessageFeedback } from '@ifd-ui/ask-redhat-core';
+import { Button, Card, CardBody, CardHeader, Modal, ModalVariant, Spinner } from '@patternfly/react-core';
+import React, { useRef, useState } from 'react';
+import { MODAL_MESSAGES, QUICK_RESPONSES, TOOLTIP_MESSAGES } from '../../constants/askRedHatMessages';
+import { useAIResponseState } from '../../context/AIResponseContext';
+import { useParseRuleMarkdown } from '../../hooks/useParseRuleMarkdown';
+import { appSourceId_ARH } from '../../reducers/CaseConstNTypes';
+import { CollapseIcon } from './icons/CollapseIcon';
+import { StarIcon } from './icons/StarIcon';
+import ResponseActions from './ResponseActions';
+import UserFeedback from './UserFeedback';
+import UserFeedbackComplete from './UserFeedbackComplete';
+export const AskRedHat = ({ onChatWithAIClick }) => {
+    var _a, _b, _c;
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [showFeedbackCard, setShowFeedbackCard] = useState(false);
+    const [showFeedbackComplete, setShowFeedbackComplete] = useState(false);
+    const [feedbackType, setFeedbackType] = useState('');
+    const [submittedFeedbackTypes, setSubmittedFeedbackTypes] = useState([]);
+    const aiResponseState = useAIResponseState();
+    const contentRef = useRef(null);
+    const onToggle = () => {
+        if (isExpanded && contentRef.current) {
+            contentRef.current.scrollTop = 0;
+        }
+        setIsExpanded((prev) => !prev);
+    };
+    const handleChatWithAIClick = () => onChatWithAIClick === null || onChatWithAIClick === void 0 ? void 0 : onChatWithAIClick();
+    const aiResponse = aiResponseState.aiResponse;
+    const messageId = aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.messageId;
+    const conversationId = aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.conversationId;
+    // Use accumulated response if streaming, otherwise use the final response
+    const answer = aiResponseState.isStreaming && aiResponseState.accumulatedResponse
+        ? aiResponseState.accumulatedResponse
+        : (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.answer) || (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.content) || 'No AI response available yet.';
+    const sources = (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.sources) || (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.references) || [];
+    const sourcesCount = sources.length || 0;
+    // Show loading only when streaming has started but no content received yet
+    const isLoading = aiResponseState.isStreaming && aiResponseState.accumulatedResponse === '';
+    const isStreaming = aiResponseState.isStreaming;
+    const { parseMarkdown } = useParseRuleMarkdown();
+    const config = {
+        appSourceId: appSourceId_ARH,
+        packageVersion: (_a = window === null || window === void 0 ? void 0 : window.supportVersionInfo) === null || _a === void 0 ? void 0 : _a.packageVersion,
+        authToken: (_c = (_b = window === null || window === void 0 ? void 0 : window.sessionjs) === null || _b === void 0 ? void 0 : _b.getEncodedToken()) !== null && _c !== void 0 ? _c : '',
+        appEnv: Env.getEnvName(),
+    };
+    const handleFeedbackSubmit = (selectedResponse, additionalFeedback) => __awaiter(void 0, void 0, void 0, function* () {
+        setShowFeedbackCard(false);
+        try {
+            const payload = {
+                rating: (feedbackType === 'positive' ? 'positive' : 'negative'),
+                freeform: additionalFeedback || undefined,
+                predefined_response: selectedResponse,
+            };
+            yield sendRHDirectMessageFeedback(conversationId, messageId, payload, config);
+            setShowFeedbackComplete(true);
+            setSubmittedFeedbackTypes((prev) => [...prev, feedbackType]);
+        }
+        catch (error) {
+            setShowFeedbackCard(false);
+        }
+    });
+    const responseActions = {
+        positive: Object.assign({ onClick: () => {
+                setFeedbackType('positive');
+                setShowFeedbackCard(true);
+            } }, TOOLTIP_MESSAGES.positive),
+        negative: Object.assign({ onClick: () => {
+                setFeedbackType('negative');
+                setShowFeedbackCard(true);
+            } }, TOOLTIP_MESSAGES.negative),
+        copy: Object.assign({ onClick: () => {
+                navigator.clipboard.writeText(answer);
+            } }, TOOLTIP_MESSAGES.copy),
+    };
+    if (isLoading) {
+        return (React.createElement("div", { className: "ask-redhat" },
+            React.createElement("p", { className: "ask-redhat-title" },
+                React.createElement(StarIcon, { width: 20, height: 20 }),
+                "Resolve your issue now with AI insights"),
+            React.createElement("div", { className: "ask-redhat-content-wrapper" },
+                React.createElement("div", { className: "ask-redhat-content", style: { textAlign: 'center', padding: '2rem' } },
+                    React.createElement(Spinner, { size: "lg" }),
+                    React.createElement("p", { style: { marginTop: '1rem' } }, "Getting AI insights..."))),
+            !aiResponseState.isStreaming && (React.createElement("div", { className: "ask-redhat-toggle-button" },
+                React.createElement(Button, { variant: "link", onClick: handleChatWithAIClick, className: "ask-redhat-chat-button" }, "Chat with AI to get started")))));
+    }
+    // Show streaming content
+    if (isStreaming && aiResponseState.accumulatedResponse && aiResponseState.accumulatedResponse !== '') {
+        return (React.createElement("div", { className: "ask-redhat" },
+            React.createElement("p", { className: "ask-redhat-title" },
+                React.createElement(StarIcon, { width: 20, height: 20 }),
+                "Resolve your issue now with AI insights"),
+            React.createElement("div", { className: "ask-redhat-content-wrapper" },
+                React.createElement("div", { ref: contentRef, className: `ask-redhat-content ${isExpanded ? 'ask-redhat-content--expanded' : ''}` },
+                    React.createElement("div", { className: `ask-redhat-content-scrollable ${isExpanded ? 'ask-redhat-content--expanded-scrollable' : ''}` },
+                        React.createElement("div", null,
+                            React.createElement("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(answer) } }),
+                            React.createElement("div", { style: { display: 'inline-block' } },
+                                React.createElement(Spinner, { size: "sm" })))),
+                    !isExpanded && React.createElement("div", { className: "ask-redhat-fade-overlay" }))),
+            React.createElement("div", { className: "ask-redhat-toggle-button-wrapper" },
+                React.createElement("div", { className: "ask-redhat-border-line" }),
+                React.createElement(Button, { onClick: onToggle, className: isExpanded ? 'ask-redhat-toggle-button-collapsed' : 'ask-redhat-toggle-button' },
+                    isExpanded ? React.createElement(CollapseIcon, null) : React.createElement(StarIcon, { width: 20, height: 20 }),
+                    isExpanded ? '' : 'Read more'))));
+    }
+    if (aiResponseState.error) {
+        return (React.createElement("div", { className: "ask-redhat" },
+            React.createElement("p", { className: "ask-redhat-title" },
+                React.createElement(StarIcon, { width: 20, height: 20 }),
+                "Resolve your issue now with AI insights"),
+            React.createElement("div", { className: "ask-redhat-content-wrapper" },
+                React.createElement("div", { className: "ask-redhat-content", style: { textAlign: 'center', padding: '2rem' } },
+                    React.createElement("p", { style: { color: '#d73502', marginBottom: '1rem' } }, "Unable to get AI insights. Please try again later."),
+                    React.createElement(Button, { variant: "link", onClick: handleChatWithAIClick, className: "ask-redhat-chat-button", icon: React.createElement(StarIcon, null) }, "Try again with AI Chat")))));
+    }
+    return (React.createElement("div", { className: "ask-redhat" },
+        React.createElement("p", { className: "ask-redhat-title" },
+            React.createElement(StarIcon, { width: 20, height: 20 }),
+            "Resolve your issue now with AI insights"),
+        React.createElement("div", { className: "ask-redhat-content-wrapper" },
+            React.createElement("div", { ref: contentRef, className: `ask-redhat-content ${isExpanded ? 'ask-redhat-content--expanded' : ''}` },
+                React.createElement("div", { className: `ask-redhat-content-scrollable ${isExpanded ? 'ask-redhat-content--expanded-scrollable' : ''}` },
+                    React.createElement("div", null,
+                        React.createElement("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(answer) } }),
+                        sourcesCount > 0 && (React.createElement(React.Fragment, null,
+                            React.createElement("p", null, "2 sources"),
+                            React.createElement("div", { className: "ask-redhat-cards" }, sources.map((source, index) => (React.createElement(Card, { className: "ask-redhat-card", key: index },
+                                React.createElement(CardHeader, null,
+                                    React.createElement("h3", { className: "ask-redhat-card-title" },
+                                        React.createElement("a", { href: source.link, target: "_blank", rel: "noopener noreferrer" }, source.title))),
+                                React.createElement(CardBody, null,
+                                    React.createElement("p", null, source.snippet)))))))),
+                        React.createElement("div", { className: "response-actions-wrapper" },
+                            React.createElement(ResponseActions, { actions: responseActions, submittedFeedbackTypes: submittedFeedbackTypes })))),
+                React.createElement("div", { className: "ask-redhat-footer-wrapper" },
+                    React.createElement("div", { className: "ask-redhat-footer" },
+                        React.createElement("p", { className: "ask-redhat-footer-text" }, "Want to continue the conversation? Dive deeper with our AI assistant"),
+                        React.createElement(Button, { onClick: handleChatWithAIClick, className: 'ask-redhat-chat-button', icon: React.createElement(StarIcon, null) }, "Chat with AI"))),
+                !isExpanded && React.createElement("div", { className: "ask-redhat-fade-overlay" }))),
+        React.createElement("div", { className: "ask-redhat-toggle-button-wrapper" },
+            React.createElement("div", { className: "ask-redhat-border-line" }),
+            React.createElement(Button, { onClick: onToggle, className: isExpanded ? 'ask-redhat-toggle-button-collapsed' : 'ask-redhat-toggle-button' },
+                isExpanded ? React.createElement(CollapseIcon, null) : React.createElement(StarIcon, { width: 20, height: 20 }),
+                isExpanded ? '' : 'Read more')),
+        React.createElement(Modal, { variant: ModalVariant.small, isOpen: showFeedbackCard, onClose: () => {
+                setShowFeedbackCard(false);
+                setFeedbackType('');
+            } },
+            React.createElement(UserFeedback, { title: feedbackType === 'positive'
+                    ? MODAL_MESSAGES.feedback.positive
+                    : MODAL_MESSAGES.feedback.negative, hasTextArea: true, quickResponses: feedbackType === 'positive' ? QUICK_RESPONSES.positive : QUICK_RESPONSES.negative, onSubmit: handleFeedbackSubmit, onClose: () => {
+                    setShowFeedbackCard(false);
+                    setFeedbackType('');
+                } })),
+        React.createElement(Modal, { variant: ModalVariant.small, isOpen: showFeedbackComplete, onClose: () => {
+                setShowFeedbackComplete(false);
+                setFeedbackType('');
+            } },
+            React.createElement(UserFeedbackComplete, { title: MODAL_MESSAGES.complete.title, body: MODAL_MESSAGES.complete.body, onClose: () => {
+                    setShowFeedbackComplete(false);
+                    setFeedbackType('');
+                } }))));
+};

package/lib/esm/components/TroubleshootSection/CloseButton.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from '@patternfly/react-core';
+import { type FunctionComponent } from 'react';
+export interface CloseButtonProps extends ButtonProps {
+    onClose?: () => void;
+    ariaLabel?: string;
+}
+declare const CloseButton: FunctionComponent<CloseButtonProps>;
+export default CloseButton;
+//# sourceMappingURL=CloseButton.d.ts.map

package/lib/esm/components/TroubleshootSection/CloseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/CloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAEpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/esm/components/TroubleshootSection/CloseButton.js

@@ -0,0 +1,5 @@
+import { Button } from '@patternfly/react-core';
+import CloseIcon from '@patternfly/react-icons/dist/esm/icons/close-icon';
+import React from 'react';
+const CloseButton = ({ onClose, ariaLabel }) => (React.createElement(Button, { variant: "plain", onClick: onClose, icon: React.createElement(CloseIcon, null), "aria-label": ariaLabel }));
+export default CloseButton;

package/lib/esm/components/TroubleshootSection/QuickResponse.d.ts

@@ -0,0 +1,15 @@
+import { LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import { type FunctionComponent } from 'react';
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+    content: string;
+    id: string;
+}
+export interface QuickResponseProps {
+    quickResponses: QuickResponse[];
+    quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+    onSelect?: (id: string) => void;
+    isCompact?: boolean;
+}
+export declare const QuickResponse: FunctionComponent<QuickResponseProps>;
+export default QuickResponse;
+//# sourceMappingURL=QuickResponse.d.ts.map

package/lib/esm/components/TroubleshootSection/QuickResponse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickResponse.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/QuickResponse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,eAAe,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAExF,OAAc,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAC/D,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB;IAC/B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,2BAA2B,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAqC/D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/esm/components/TroubleshootSection/QuickResponse.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Label, LabelGroup } from '@patternfly/react-core';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import React, { useState } from 'react';
+export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect, isCompact, }) => {
+    const [selectedQuickResponse, setSelectedQuickResponse] = useState();
+    const handleQuickResponseClick = (id) => {
+        setSelectedQuickResponse(id);
+        onSelect && onSelect(id);
+    };
+    return (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps), quickResponses.map((_a) => {
+        var { id, content, className } = _a, props = __rest(_a, ["id", "content", "className"]);
+        return (React.createElement(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? React.createElement(CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`, isCompact: isCompact }, props), content));
+    })));
+};
+export default QuickResponse;

package/lib/esm/components/TroubleshootSection/ResponseActionButton.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps } from '@patternfly/react-core';
+import React, { type FunctionComponent, type MouseEvent } from 'react';
+export interface ResponseActionButtonProps extends ButtonProps {
+    ariaLabel?: string;
+    clickedAriaLabel?: string;
+    icon: React.ReactNode;
+    onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
+    tooltipContent?: string;
+    clickedTooltipContent?: string;
+    /** Props to control if the button should be disabled */
+    isDisabled?: boolean;
+    isClicked?: boolean;
+    innerRef?: React.Ref<HTMLButtonElement>;
+}
+export declare const ResponseActionButtonBase: FunctionComponent<ResponseActionButtonProps>;
+declare const ResponseActionButton: React.ForwardRefExoticComponent<ResponseActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ResponseActionButton;
+//# sourceMappingURL=ResponseActionButton.d.ts.map

package/lib/esm/components/TroubleshootSection/ResponseActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponseActionButton.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/ResponseActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAiB,MAAM,wBAAwB,CAAC;AAC5E,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAwB,MAAM,OAAO,CAAC;AAE7F,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5G,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,wBAAwB,EAAE,iBAAiB,CAAC,yBAAyB,CAmDjF,CAAC;AAEF,QAAA,MAAM,oBAAoB,qGAExB,CAAC;AAEH,eAAe,oBAAoB,CAAC"}

package/lib/esm/components/TroubleshootSection/ResponseActionButton.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Button, Icon, Tooltip } from '@patternfly/react-core';
+import React, { forwardRef } from 'react';
+export const ResponseActionButtonBase = (_a) => {
+    var { ariaLabel, clickedAriaLabel = ariaLabel, icon, onClick, tooltipContent, clickedTooltipContent = tooltipContent, isDisabled, isClicked = false, innerRef } = _a, props = __rest(_a, ["ariaLabel", "clickedAriaLabel", "icon", "onClick", "tooltipContent", "clickedTooltipContent", "isDisabled", "isClicked", "innerRef"]);
+    const generateAriaLabel = () => {
+        if (ariaLabel) {
+            return isClicked ? clickedAriaLabel : ariaLabel;
+        }
+        return isClicked ? clickedTooltipContent : tooltipContent;
+    };
+    return (React.createElement(Tooltip, { id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: isClicked ? clickedTooltipContent : tooltipContent, "aria-live": "polite", position: "bottom", entryDelay: 0, exitDelay: 0, distance: 8, animationDuration: 0, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" },
+        React.createElement(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--response-action ${isClicked ? 'pf-chatbot__button--response-action-clicked' : ''}`, "aria-label": generateAriaLabel(), icon: React.createElement(Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm", ref: innerRef }, props))));
+};
+const ResponseActionButton = forwardRef((props, ref) => (React.createElement(ResponseActionButtonBase, Object.assign({ innerRef: ref }, props))));
+export default ResponseActionButton;