@rh-support/troubleshoot 2.7.1 → 2.7.11

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

@@ -1,5 +1,6 @@
 import { pcm } from '@cee-eng/hydrajs';
-import { Accordion, AccordionContent, AccordionItem, AccordionToggle, Tooltip } from '@patternfly/react-core';
+import { AccordionContent, AccordionItem, AccordionToggle, Tooltip } from '@patternfly/react-core';
+import { haltEvent } from '@rh-support/utils';
 import isEqual from 'lodash/isEqual';
 import map from 'lodash/map';
 import React, { useState } from 'react';
@@ -12,7 +13,7 @@ const { SessionResourceVisibility, SessionResourceSource } = pcm.preCase.session
 export default function TopContent(props) {
     const sessionRestoreDispatch = React.useContext(SessionRestoreDispatchContext);
     const { sessionRestore: { activeSessionId, sessionResourceTracking }, } = React.useContext(SessionRestoreStateContext);
-    const [expanded, setExpanded] = useState('');
+    const [expanded, setExpanded] = useState('0');
     const { product, version, summary, issue, environment, periodicityOfIssue, timeFramesAndUrgency } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
         version: state.caseDetails.version,
@@ -44,23 +45,22 @@ 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, { isBordered: true },
-            React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { onClick: () => {
-                        onToggle(`${props.topContentIndex}`);
-                    }, isExpanded: expanded === `${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}`, isHidden: expanded !== `${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, { isBordered: true },
-        React.createElement(AccordionItem, null,
-            React.createElement(AccordionToggle, { onClick: () => {
+        React.createElement(AccordionItem, { isExpanded: expanded === `${props.topContentIndex}` },
+            React.createElement(AccordionToggle, { onClick: (e) => {
+                    haltEvent(e);
                     onToggle(`${props.topContentIndex}`);
-                }, isExpanded: expanded === `${props.topContentIndex}`, "data-tracking-id": `top-content-accordion-header-${props.topContentIndex}`, id: `${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}`, isHidden: expanded !== `${props.topContentIndex}` },
+            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)))))))))) : (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)))))))))));
 }

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IProps {
+    onChatWithAIClick?: () => void;
+    isExpanded?: boolean;
+    onToggleExpanded?: (value: boolean | ((prev: boolean) => boolean)) => void;
+}
+export declare const AskRedHat: ({ onChatWithAIClick, isExpanded: isExpandedProp, onToggleExpanded }: IProps) => React.JSX.Element;
+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":"AAyBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAmChF,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,CAAC;CAC9E;AAED,eAAO,MAAM,SAAS,GAAI,qEAAqE,MAAM,sBA2iBpG,CAAC"}

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

@@ -0,0 +1,367 @@
+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, pcm } from '@cee-eng/hydrajs';
+import { sendRHDirectMessageFeedback } from '@ifd-ui/ask-redhat-core';
+import { Button, Card, CardBody, CardHeader, Content, ContentVariants, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant, Icon, Label, Modal, ModalVariant, Skeleton, Spinner, } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { useFetch } from '@rh-support/components';
+import { dtmTrackEventAskRedhat, isFunctionalCookieAccepted } from '@rh-support/utils';
+import isEqual from 'lodash/isEqual';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { MODAL_MESSAGES, QUICK_RESPONSES, TOOLTIP_MESSAGES } from '../../constants/askRedHatMessages';
+import { useAIResponseDispatch, useAIResponseState } from '../../context/AIResponseContext';
+import { useCaseSelector } from '../../context/CaseContext';
+import { RouteContext } from '../../context/RouteContext';
+import { SessionRestoreDispatchContext, SessionRestoreStateContext } from '../../context/SessionRestoreContext';
+import { useARHResponse } from '../../hooks/useARHResponse';
+import { useParseRuleMarkdown } from '../../hooks/useParseRuleMarkdown';
+import { addSubmittedFeedbackType, clearSubmittedFeedbackTypes } from '../../reducers/AIResponseReducer';
+import { appSourceId_ARH } from '../../reducers/CaseConstNTypes';
+import { createOrUpdateSessionResources } from '../../reducers/SessionRestoreReducer';
+import { calculateEngagementWindow, DEFAULT_ENGAGEMENT_WINDOW } from '../../utils/engagementUtils';
+import { CollapseIcon } from './icons/CollapseIcon';
+import { StarIcon } from './icons/StarIcon';
+import ResponseActions from './ResponseActions';
+import UserFeedback from './UserFeedback';
+import UserFeedbackComplete from './UserFeedbackComplete';
+const { SessionResourceSource, SessionResourceVisibility } = pcm.preCase.session;
+const getSessResFromARHSource = (source, visibilityStatus, rank = 1) => ({
+    visibilityStatus,
+    resourceEntityId: source.link || source.url,
+    url: source.link || source.url,
+    rank,
+});
+const getSessResFromAISources = (sources, visibilityStatus) => {
+    if (!sources || sources.length === 0)
+        return;
+    return sources.map((source, index) => getSessResFromARHSource(source, visibilityStatus, index + 1));
+};
+export const AskRedHat = ({ onChatWithAIClick, isExpanded: isExpandedProp, onToggleExpanded }) => {
+    var _a, _b, _c, _d;
+    const { t } = useTranslation();
+    const [isExpandedLocal, setIsExpandedLocal] = useState(false);
+    const isExpanded = onToggleExpanded ? isExpandedProp !== null && isExpandedProp !== void 0 ? isExpandedProp : false : isExpandedLocal;
+    const setIsExpanded = onToggleExpanded !== null && onToggleExpanded !== void 0 ? onToggleExpanded : setIsExpandedLocal;
+    const [showFeedbackCard, setShowFeedbackCard] = useState(false);
+    const [showFeedbackComplete, setShowFeedbackComplete] = useState(false);
+    const [feedbackType, setFeedbackType] = useState('');
+    const [isSubmittingFeedback, setIsSubmittingFeedback] = useState(false);
+    const aiResponseState = useAIResponseState();
+    const contentRef = useRef(null);
+    const storedMessageIdRef = useRef(undefined);
+    const aiResponseDispatch = useAIResponseDispatch();
+    const engagementTimerRef = useRef(null);
+    const engagementWindowRef = useRef(DEFAULT_ENGAGEMENT_WINDOW);
+    const hasEngagementTimerStartedRef = useRef(false);
+    const { routeState: { isCaseCreate, activeSection }, } = useContext(RouteContext);
+    const { sessionRestore: { activeSessionId, sessionResourceTracking, previousSessions }, } = useContext(SessionRestoreStateContext);
+    const sessionRestoreDispatch = useContext(SessionRestoreDispatchContext);
+    const { product, version, summary, issue, caseType } = useCaseSelector((state) => ({
+        product: state.caseDetails.product,
+        version: state.caseDetails.version,
+        summary: state.caseDetails.summary,
+        issue: state.caseDetails.issue,
+        caseType: state.caseDetails.caseType,
+    }), isEqual);
+    const { request: updateSessionOrigin } = useFetch(pcm.preCase.session.updateSessionOrigin);
+    const config = {
+        appSourceId: appSourceId_ARH,
+        authToken: (_b = (_a = window === null || window === void 0 ? void 0 : window.sessionjs) === null || _a === void 0 ? void 0 : _a.getEncodedToken()) !== null && _b !== void 0 ? _b : '',
+        packageVersion: (_c = window === null || window === void 0 ? void 0 : window.supportVersionInfo) === null || _c === void 0 ? void 0 : _c.packageVersion,
+        appEnv: Env.getEnvName(),
+    };
+    const { fetchARHResponse } = useARHResponse({
+        activeSection,
+        product,
+        version,
+        summary,
+        issue,
+        caseType,
+        config,
+    });
+    const onToggle = () => {
+        if (isExpanded && contentRef.current) {
+            contentRef.current.scrollTop = 0;
+        }
+        setIsExpanded((prev) => !prev);
+    };
+    const clearEngagementTimer = () => {
+        if (engagementTimerRef.current) {
+            clearTimeout(engagementTimerRef.current);
+            engagementTimerRef.current = null;
+        }
+    };
+    const callResourceAPI = (sources, visibilityStatus) => {
+        const payload = JSON.stringify({
+            product,
+            version,
+            summary,
+            issue,
+        });
+        const sessionResources = getSessResFromAISources(sources, visibilityStatus);
+        createOrUpdateSessionResources(sessionRestoreDispatch, activeSessionId, sessionResourceTracking, SessionResourceSource.ASK_RED_HAT, sessionResources, payload);
+    };
+    const handleChatWithAIClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        clearEngagementTimer();
+        onChatWithAIClick === null || onChatWithAIClick === void 0 ? void 0 : onChatWithAIClick();
+        if (!!conversationId) {
+            dtmTrackEventAskRedhat(conversationId, appSourceId_ARH);
+        }
+        if (updateSessionOrigin) {
+            yield updateSessionOrigin(activeSessionId, {
+                id: (_a = sessionResourceTracking[SessionResourceSource.ASK_RED_HAT]) === null || _a === void 0 ? void 0 : _a.resourceOriginId,
+                aiChatStarted: true,
+            });
+        }
+    });
+    const handleSourceClick = (source, index) => () => {
+        if (!source || !activeSessionId)
+            return;
+        clearEngagementTimer();
+        const payload = JSON.stringify({
+            product,
+            version,
+            summary,
+            issue,
+        });
+        const sessionResource = getSessResFromARHSource(source, SessionResourceVisibility.VISITED, index + 1);
+        const updatedSessionResourceTracking = sessionResourceTracking;
+        createOrUpdateSessionResources(sessionRestoreDispatch, activeSessionId, updatedSessionResourceTracking, SessionResourceSource.ASK_RED_HAT, [sessionResource], payload);
+    };
+    const aiResponse = aiResponseState.aiResponse;
+    const messageId = aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.messageId;
+    // Calculate engagement window and start timer when streaming is complete
+    useEffect(() => {
+        if (!aiResponseState.isStreaming && (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.answer)) {
+            engagementWindowRef.current = calculateEngagementWindow(aiResponse.answer, true);
+            hasEngagementTimerStartedRef.current = true;
+            clearEngagementTimer();
+            engagementTimerRef.current = setTimeout(() => {
+                callResourceAPI(sources, SessionResourceVisibility.PRESENTED);
+                engagementTimerRef.current = null;
+            }, engagementWindowRef.current);
+        }
+        return () => {
+            clearEngagementTimer();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [aiResponseState.isStreaming, aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.answer]);
+    const currentSessionItem = previousSessions.data[activeSessionId];
+    const conversationId = (_d = currentSessionItem === null || currentSessionItem === void 0 ? void 0 : currentSessionItem.session) === null || _d === void 0 ? void 0 : _d.conversationId;
+    useEffect(() => {
+        const previousStoredValue = storedMessageIdRef.current;
+        if (messageId !== storedMessageIdRef.current && messageId !== undefined) {
+            storedMessageIdRef.current = messageId;
+        }
+        if (previousStoredValue !== undefined) {
+            aiResponseDispatch(clearSubmittedFeedbackTypes());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [messageId]);
+    // Use accumulated response if streaming, otherwise use the final responses
+    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);
+    const sources = React.useMemo(() => (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.sources) || (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.references) || [], [aiResponse]);
+    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 handleFeedbackSubmit = (selectedResponse, additionalFeedback) => __awaiter(void 0, void 0, void 0, function* () {
+        setIsSubmittingFeedback(true);
+        try {
+            const payload = {
+                rating: (feedbackType === 'positive' ? 'positive' : 'negative'),
+                freeform: additionalFeedback || '',
+                predefined_response: selectedResponse || '',
+            };
+            yield sendRHDirectMessageFeedback(conversationId, messageId, payload, config);
+            setShowFeedbackCard(false);
+            setShowFeedbackComplete(true);
+            aiResponseDispatch(addSubmittedFeedbackType(feedbackType));
+        }
+        catch (error) {
+            setShowFeedbackCard(false);
+        }
+        finally {
+            setIsSubmittingFeedback(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),
+    };
+    const isFunctionalCookieEnabled = useMemo(() => isFunctionalCookieAccepted(), []);
+    const handleManagePreferences = () => {
+        var _a, _b;
+        if (typeof ((_b = (_a = window.truste) === null || _a === void 0 ? void 0 : _a.eu) === null || _b === void 0 ? void 0 : _b.clickListener) === 'function') {
+            window.truste.eu.clickListener();
+        }
+    };
+    if (!isFunctionalCookieEnabled) {
+        return (React.createElement("div", { className: "ask-redhat" },
+            React.createElement("p", { className: "ask-redhat-title" },
+                React.createElement(StarIcon, { width: 20, height: 20 }),
+                isCaseCreate ? t('Resolve your issue now with AI insights') : t('Troubleshoot with AI insights'),
+                React.createElement(Label, { variant: "outline" },
+                    React.createElement(Trans, null, "PREVIEW"))),
+            React.createElement("div", { className: "ask-redhat-cookie-error" },
+                React.createElement("div", { className: "ask-redhat-cookie-error__heading" },
+                    React.createElement(Icon, { iconSize: "md", status: "danger" },
+                        React.createElement(ExclamationCircleIcon, null)),
+                    React.createElement("h4", null,
+                        React.createElement(Trans, null, "Functional cookies not enabled"))),
+                React.createElement("p", { className: "ask-redhat-cookie-error__body" },
+                    React.createElement(Trans, null, "To access this feature, functional cookies must be turned on. After updating your preferences, you may need to refresh the page.")),
+                React.createElement(Button, { variant: "primary", onClick: handleManagePreferences },
+                    React.createElement(Trans, null, "Manage preferences")))));
+    }
+    if (aiResponseState.isRateLimited) {
+        return (React.createElement("div", { className: "ask-redhat" },
+            React.createElement("p", { className: "ask-redhat-title" },
+                React.createElement(StarIcon, { width: 20, height: 20 }),
+                isCaseCreate ? t('Resolve your issue now with AI insights') : t('Troubleshoot with AI insights'),
+                React.createElement(Label, { variant: "outline" },
+                    React.createElement(Trans, null, "PREVIEW"))),
+            React.createElement("div", { className: "ask-redhat-content-wrapper ask-redhat-rate-limit-error" },
+                React.createElement(EmptyState, { titleText: "", headingLevel: "h4" },
+                    React.createElement("h4", null,
+                        React.createElement(Icon, { iconSize: "lg", status: "danger", className: "pf-v6-u-mr-sm" },
+                            React.createElement(ExclamationCircleIcon, null)),
+                        ' ',
+                        React.createElement(Trans, null, "Chat limit reached")),
+                    React.createElement(EmptyStateBody, null,
+                        React.createElement(Content, { component: ContentVariants.p },
+                            React.createElement(Trans, { i18nKey: "You've reached the maximum number of chats. You can start up to {{quotaLimit}} chats within a <br/>24-hour period. Please try again after your limit resets.", values: { quotaLimit: aiResponseState.quotaLimit }, components: { br: React.createElement("br", null) } })))))));
+    }
+    if (aiResponseState.error) {
+        return (React.createElement("div", { className: "ask-redhat" },
+            React.createElement("p", { className: "ask-redhat-title" },
+                React.createElement(StarIcon, { width: 20, height: 20 }),
+                isCaseCreate ? t('Resolve your issue now with AI insights') : t('Troubleshoot with AI insights'),
+                React.createElement(Label, { variant: "outline" },
+                    React.createElement(Trans, null, "PREVIEW"))),
+            React.createElement("div", { className: "ask-redhat-content-wrapper ask-redhat-error" },
+                React.createElement(EmptyState, { variant: EmptyStateVariant.xs, titleText: "", headingLevel: "h4" },
+                    React.createElement("h4", null,
+                        React.createElement(Icon, { iconSize: "lg", status: "danger", className: "pf-v6-u-mr-sm" },
+                            React.createElement(ExclamationCircleIcon, null)),
+                        ' ',
+                        React.createElement(Trans, null, "Error while loading AI insights")),
+                    React.createElement(EmptyStateBody, null,
+                        React.createElement(Content, { component: ContentVariants.p },
+                            React.createElement(Trans, null, "AI insights is currently unavailable, try reloading."))),
+                    React.createElement(EmptyStateFooter, null,
+                        React.createElement(Button, { variant: "tertiary", size: "sm", onClick: fetchARHResponse },
+                            React.createElement(Trans, null, "Reload")))))));
+    }
+    if (isLoading) {
+        return (React.createElement("div", { className: "ask-redhat" },
+            React.createElement("p", { className: "ask-redhat-title" },
+                React.createElement(StarIcon, { width: 20, height: 20 }),
+                isCaseCreate ? t('Resolve your issue now with AI insights') : t('Troubleshoot with AI insights'),
+                React.createElement(Label, { variant: "outline" },
+                    React.createElement(Trans, null, "PREVIEW"))),
+            React.createElement("div", { className: "ask-redhat-content-wrapper" },
+                React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-flex-direction-column pf-v6-u-justify-content-space-between" }, [...Array(3)].map((_, i) => (React.createElement("div", { className: "pf-v6-u-mb-sm", key: `AI-insights-loading-${i}` },
+                    React.createElement(Skeleton, { width: "100%", screenreaderText: t('Getting AI insights...') }),
+                    React.createElement("br", null)))))),
+            !aiResponseState.isStreaming && (React.createElement("div", { className: "ask-redhat-toggle-button" },
+                React.createElement(Button, { variant: "link", onClick: handleChatWithAIClick, className: "ask-redhat-chat-button" },
+                    React.createElement(Trans, null, "Chat with AI to get started"))))));
+    }
+    // Show streaming contents
+    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 }),
+                isCaseCreate ? t('Resolve your issue now with AI insights') : t('Troubleshoot with AI insights'),
+                React.createElement(Label, { variant: "outline" },
+                    React.createElement(Trans, null, "PREVIEW"))),
+            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', "data-tracking-id": "ask-redhat-read-more-button" },
+                    isExpanded ? React.createElement(CollapseIcon, null) : React.createElement(StarIcon, { width: 20, height: 20 }),
+                    isExpanded ? '' : t('Read more')))));
+    }
+    return (React.createElement("div", { className: "ask-redhat" },
+        React.createElement("p", { className: "ask-redhat-title" },
+            React.createElement(StarIcon, { width: 20, height: 20 }),
+            isCaseCreate ? t('Resolve your issue now with AI insights') : t('Troubleshoot with AI insights'),
+            React.createElement(Label, { variant: "outline" },
+                React.createElement(Trans, null, "PREVIEW"))),
+        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,
+                                React.createElement(Trans, { i18nKey: "{{count}} sources", values: { count: sourcesCount } })),
+                            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", onClick: handleSourceClick(source, index) }, source.title))),
+                                React.createElement(CardBody, null,
+                                    React.createElement("p", null, (source.snippet || '').slice(0, 100) + '...')))))))))),
+                React.createElement("div", { className: "ask-redhat-footer-wrapper" },
+                    React.createElement("div", { className: "response-actions-wrapper" },
+                        React.createElement(ResponseActions, { actions: responseActions, submittedFeedbackTypes: aiResponseState.submittedFeedbackTypes })),
+                    React.createElement("div", { className: "ask-redhat-footer" },
+                        React.createElement("p", { className: "ask-redhat-footer-text" },
+                            React.createElement(Trans, null, "Want to continue the conversation? Dive deeper with our AI assistant")),
+                        React.createElement(Button, { onClick: handleChatWithAIClick, className: 'ask-redhat-chat-button', "data-tracking-id": "ask-redhat-chat-button", icon: React.createElement(StarIcon, null) },
+                            React.createElement(Trans, 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 ? '' : t('Read more'))),
+        React.createElement(Modal, { variant: ModalVariant.small, isOpen: showFeedbackCard, onClose: () => {
+                setShowFeedbackCard(false);
+                setFeedbackType('');
+                setIsSubmittingFeedback(false);
+            } },
+            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('');
+                }, isSubmitting: isSubmittingFeedback })),
+        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;

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

@@ -0,0 +1,20 @@
+import { ButtonProps } from '@patternfly/react-core';
+import React, { type FunctionComponent, type MouseEvent } from 'react';
+export interface ActionProps extends Omit<ButtonProps, 'ref'> {
+    ariaLabel?: string;
+    clickedAriaLabel?: string;
+    onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
+    tooltipContent?: string;
+    clickedTooltipContent?: string;
+}
+export interface ResponseActionProps {
+    actions: {
+        positive?: ActionProps;
+        negative?: ActionProps;
+        copy?: ActionProps;
+    };
+    submittedFeedbackTypes?: string[];
+}
+export declare const ResponseActions: FunctionComponent<ResponseActionProps>;
+export default ResponseActions;
+//# sourceMappingURL=ResponseActions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponseActions.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/ResponseActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAA+B,MAAM,OAAO,CAAC;AAKpG,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,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;CAClC;AAED,MAAM,WAAW,mBAAmB;IAChC,OAAO,EAAE;QACL,QAAQ,CAAC,EAAE,WAAW,CAAC;QACvB,QAAQ,CAAC,EAAE,WAAW,CAAC;QACvB,IAAI,CAAC,EAAE,WAAW,CAAC;KACtB,CAAC;IACF,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;CACrC;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,mBAAmB,CA0FlE,CAAC;AAEF,eAAe,eAAe,CAAC"}