@rh-support/troubleshoot 2.6.21 → 2.6.23

package/lib/esm/components/wizardLayout/WizardMain.js

@@ -1,3 +1,12 @@
+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());
+    });
+};
 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)
@@ -9,16 +18,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { askRHDirectAIResponse, getRHDirectStatusCheck, } from '@ifd-ui/ask-redhat-core';
 import { useWizardContext, Wizard, WizardNav, WizardNavItem, WizardStep } from '@patternfly/react-core';
 import { LoadingIndicator } from '@rh-support/components';
 import isEqual from 'lodash/isEqual';
 import React, { Suspense, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route } from 'react-router-dom';
+import { useAIResponseDispatch } from '../../context/AIResponseContext';
 import { useCaseSelector } from '../../context/CaseContext';
 import { RecommendationDispatchContext } from '../../context/RecommendationContext';
 import { RouteContext, RouteDispatchContext } from '../../context/RouteContext';
 import { useWizard } from '../../hooks/useWizard';
+import { receivedAIResponse, receivedAIResponseError, requestAIResponse } from '../../reducers/AIResponseReducer';
+import { appSourceId_ARH, excludedCaseTypesforARH } from '../../reducers/CaseConstNTypes';
 import { RecommendationsConstants } from '../../reducers/RecommendationsReducer';
 import { AppRouteSections } from '../../reducers/RouteConstNTypes';
 import { setActiveSectionChanged, updateisNextBtnClickedToShowValidationError } from '../../reducers/RouteReducer';
@@ -27,13 +40,43 @@ import SubmitCase from '../SubmitCase/SubmitCase';
 import MainSection from './MainSection';
 import NewFeatureModal from './NewFeatureModal';
 import WizardNavigation from './WizardNavigation';
+// Mapping for case type display text in AI questions
+const CASE_TYPE_AI_TEXT_MAP = {
+    Other: 'Something',
+};
+const getCaseTypeAIText = (caseType) => {
+    return CASE_TYPE_AI_TEXT_MAP[caseType] || caseType;
+};
+const generateCaseTypePrefix = (activeSection, caseType) => {
+    if (activeSection === AppRouteSections.TROUBLESHOOT) {
+        return '';
+    }
+    const helpWith = getCaseTypeAIText(caseType);
+    return `I want help with ${helpWith}. `;
+};
+//generate AI question based on case details
+const generateAIQuestion = (activeSection, product, version, summary, issue, caseType) => {
+    const baseMessage = `My issue is primarily related to ${product} ${version}. I would title my problem: ${summary}. More details are as follows: ${issue}.`;
+    const prefix = generateCaseTypePrefix(activeSection, caseType);
+    return `${prefix}${baseMessage}`;
+};
 function WizardMain(props) {
     const [showRestFlag, setShowRestFlag] = useState(false);
+    const [aiServicesAvailable, setAIServicesAvailable] = useState(false); // default to false until services are confirmed available
     const recommendationDispatch = useContext(RecommendationDispatchContext);
-    const { isCreatingCase } = useCaseSelector((state) => ({
+    const { isCreatingCase, product, version, summary, issue, caseType } = useCaseSelector((state) => ({
         isCreatingCase: state.isCreatingCase,
+        product: state.caseDetails.product,
+        version: state.caseDetails.version,
+        summary: state.caseDetails.summary,
+        issue: state.caseDetails.issue,
+        caseType: state.caseDetails.caseType,
     }), isEqual);
-    const { routeState: { isCaseCreate }, } = useContext(RouteContext);
+    const { routeState: { isCaseCreate, activeSection }, } = useContext(RouteContext);
+    const aiResponseDispatch = useAIResponseDispatch();
+    const isTroubleshootSection = activeSection === AppRouteSections.TROUBLESHOOT;
+    const isResourcesSection = activeSection === AppRouteSections.RESOURCES;
+    const isSummarizeSection = activeSection === AppRouteSections.SUMMARIZE;
     const [userSeenRecommendations, setUserSeenRecommendations] = useState(false);
     const [userClickedNextonRecommendations, setUserClickedNextonRecommendations] = useState(false);
     const [userScrolledLabel, setUserScrolledLabel] = useState(false);
@@ -42,6 +85,9 @@ function WizardMain(props) {
     const isNextButtonClickedRef = useRef(false);
     const isBackButtonClickedRef = useRef(false);
     const resultsRowRef = useRef(null);
+    const handleChatWithAIClick = () => {
+        props.setIsAIChatMode(true);
+    };
     const { getStepsSequece } = useWizard(props.routeProps, {
         userSeenRecommendationsfn: setUserSeenRecommendations,
         userSeenRecommendationsValue: userSeenRecommendations,
@@ -49,12 +95,48 @@ function WizardMain(props) {
         userClickedNextonRecommendationsValue: userClickedNextonRecommendations,
         resultsRowRef: resultsRowRef,
         userScrolledLabel: userScrolledLabel,
+        isAIChatMode: props.isAIChatMode,
+        setIsAIChatMode: props.setIsAIChatMode,
+        onChatWithAIClick: handleChatWithAIClick,
+        aiServicesAvailable: aiServicesAvailable,
     });
     const dispatchToRouteReducer = useContext(RouteDispatchContext);
     const { t } = useTranslation();
     useEffect(() => {
         setActiveSectionChanged(dispatchToRouteReducer, isCaseCreate ? AppRouteSections.GET_SUPPORT : AppRouteSections.TROUBLESHOOT, '');
     }, [isCaseCreate, dispatchToRouteReducer]);
+    useEffect(() => {
+        if (!activeSection) {
+            return;
+        }
+        const isRelevantSection = isTroubleshootSection || isSummarizeSection || isResourcesSection;
+        const isAllowedCaseType = !excludedCaseTypesforARH.includes(caseType || '');
+        if (!isRelevantSection || !isAllowedCaseType) {
+            if (aiServicesAvailable) {
+                setAIServicesAvailable(false);
+            }
+            return;
+        }
+        // check if ARH services are available
+        if (!aiServicesAvailable) {
+            const checkAIServices = () => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
+                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 : '',
+                };
+                try {
+                    yield getRHDirectStatusCheck(config);
+                    setAIServicesAvailable(true);
+                }
+                catch (error) {
+                    setAIServicesAvailable(false);
+                }
+            });
+            checkAIServices();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeSection, caseType, isCaseCreate, aiServicesAvailable]);
     const renderSubmitCasePage = () => (React.createElement(MainSection, { section: AppRouteSections.SUBMIT_CASE, title: t('Case has been submitted'), isLoading: isCreatingCase, description: t("We'll be in contact with you shortly. Look for updates on this case."), className: "case-submit-page" },
         React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
             React.createElement(SubmitCase, { routeProps: props.routeProps }))));
@@ -99,26 +181,51 @@ function WizardMain(props) {
         isBackButtonClickedRef.current = false;
         setIsNextButtonClicked(false);
     };
+    const handleReturnToCaseCreation = () => {
+        props.setIsAIChatMode(false);
+    };
     const customNav = (isExpanded, steps, activeStep, goToStepByIndex) => (React.createElement(WizardNav, { isExpanded: isExpanded }, steps.map((step) => {
         return (React.createElement(WizardNavItem, { key: step.id, id: step.id, content: step.name, isCurrent: activeStep.id === step.id, isDisabled: !step.canJumpTo, stepIndex: step.index, onClick: () => goToStepByIndex(step.index) }));
     })));
     const CustomFooter = () => {
+        var _a, _b;
         const { activeStep, goToNextStep, goToPrevStep, steps, goToStepByIndex } = useWizardContext(); // Correctly using the context
+        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 : '',
+        };
         useEffect(() => {
             if (steps.length > 2 && activeStep.index === 2 && isNextButtonClicked) {
                 goToStepByIndex(3);
             }
         }, [activeStep, steps.length, goToStepByIndex]);
-        return (React.createElement(WizardNavigation, { routeProps: props.routeProps, onNext: () => {
-                isNextButtonClickedRef.current = true;
-                setIsNextButtonClicked(true);
-                goToNextStep();
-                focusWizardMainPanel();
-            }, onBack: () => {
+        const handleContinueClick = () => __awaiter(this, void 0, void 0, function* () {
+            const shouldCallAPI = (isTroubleshootSection || isSummarizeSection) && !excludedCaseTypesforARH.includes(caseType || '');
+            // Navigate to next step first
+            isNextButtonClickedRef.current = true;
+            setIsNextButtonClicked(true);
+            goToNextStep();
+            focusWizardMainPanel();
+            if (shouldCallAPI) {
+                const detailedQuestion = generateAIQuestion(activeSection, product, version, summary, issue, caseType || '');
+                const useAIServices = aiServicesAvailable;
+                if (useAIServices) {
+                    aiResponseDispatch(requestAIResponse(detailedQuestion));
+                    try {
+                        const response = yield askRHDirectAIResponse(detailedQuestion, config);
+                        aiResponseDispatch(receivedAIResponse(response));
+                    }
+                    catch (error) {
+                        aiResponseDispatch(receivedAIResponseError((error === null || error === void 0 ? void 0 : error.message) || 'Failed to get AI response'));
+                    }
+                }
+            }
+        });
+        return (React.createElement(WizardNavigation, { routeProps: props.routeProps, onNext: handleContinueClick, onBack: () => {
                 isBackButtonClickedRef.current = true;
                 goToPrevStep();
                 focusWizardMainPanel();
-            }, activeStep: activeStep, onSubmit: onSubmit, confirmSupportModal: props.confirmSupportModal, onShowRestUpdate: (flag) => setShowRestFlag(flag), userSeenRecommendations: userSeenRecommendations, setUserSeenRecommendations: setUserSeenRecommendations, userClickedNextonRecommendationsFn: setUserClickedNextonRecommendations, userClickedNextonRecommendationsValue: userClickedNextonRecommendations, setUserCanNavigateToTroubleshoot: setUserCanNavigateToTroubleshoot, resultsRowRef: resultsRowRef, setUserScrolledLabel: setUserScrolledLabel }));
+            }, activeStep: activeStep, onSubmit: onSubmit, confirmSupportModal: props.confirmSupportModal, onShowRestUpdate: (flag) => setShowRestFlag(flag), userSeenRecommendations: userSeenRecommendations, setUserSeenRecommendations: setUserSeenRecommendations, userClickedNextonRecommendationsFn: setUserClickedNextonRecommendations, userClickedNextonRecommendationsValue: userClickedNextonRecommendations, setUserCanNavigateToTroubleshoot: setUserCanNavigateToTroubleshoot, resultsRowRef: resultsRowRef, setUserScrolledLabel: setUserScrolledLabel, isAIChatMode: props.isAIChatMode, onReturnToCaseCreation: handleReturnToCaseCreation }));
     };
     const steps = getStepsSequece(showRestFlag);
     const wizardSteps = steps.map((step) => {

package/lib/esm/components/wizardLayout/WizardNavigation.d.ts

@@ -16,6 +16,8 @@ interface IProps {
     setUserCanNavigateToTroubleshoot: (value: React.SetStateAction<boolean>) => void;
     resultsRowRef?: any;
     setUserScrolledLabel: (value: React.SetStateAction<boolean>) => void;
+    isAIChatMode?: boolean;
+    onReturnToCaseCreation?: () => void;
 }
 declare function WizardNavigation(props: IProps): React.JSX.Element;
 declare namespace WizardNavigation {

package/lib/esm/components/wizardLayout/WizardNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WizardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardNavigation.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAoB,eAAe,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM3G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC5E,kCAAkC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACpF,qCAAqC,CAAC,EAAE,OAAO,CAAC;IAChD,gCAAgC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACxE;AAGD,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAyUtC;kBAzUQ,gBAAgB;;;AA2UzB,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"WizardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardNavigation.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAoB,eAAe,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM3G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC5E,kCAAkC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACpF,qCAAqC,CAAC,EAAE,OAAO,CAAC;IAChD,gCAAgC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AAGD,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAiVtC;kBAjVQ,gBAAgB;;;AAmVzB,eAAe,gBAAgB,CAAC"}

package/lib/esm/components/wizardLayout/WizardNavigation.js

@@ -249,9 +249,10 @@ function WizardNavigation(props) {
     // To handle entitled products
     return (React.createElement(React.Fragment, null,
         React.createElement(WizardFooterWrapper, null,
-            props.activeStep.order !== 0 && (React.createElement("button", { onClick: () => onBack(), className: "btn btn-app btn-open-white main-nav-button", "data-tracking-id": `prev-of-${activeSection}`, type: "button", disabled: isDisabledGoBack() }, t('Go back'))),
-            React.createElement("button", { disabled: nextButtonDisabledLogic(), onClick: onNext, className: "btn btn-app btn-primary main-nav-button", "data-tracking-id": `next-of-${activeSection}`, type: "button" }, t(props.activeStep.nextButtonLabel)),
-            activeSection === AppRouteSections.RESOURCES && isFileRecommendationsTriggered && (React.createElement(Button, { onClick: handleFileRecsSelfSolved, variant: ButtonVariant.secondary, className: "issue-solved-button solved-issue-button", "data-tracking-id": "troubleshoot-self-solved-issue" }, t('I solved my issue'))),
+            props.isAIChatMode ? (React.createElement(Button, { onClick: props.onReturnToCaseCreation, variant: "link", className: "return-to-case-btn" }, t('Return to case creation'))) : (React.createElement(React.Fragment, null,
+                props.activeStep.order !== 0 && (React.createElement("button", { onClick: () => onBack(), className: "btn btn-app btn-open-white main-nav-button", "data-tracking-id": `prev-of-${activeSection}`, type: "button", disabled: isDisabledGoBack() }, t('Go back'))),
+                React.createElement("button", { disabled: nextButtonDisabledLogic(), onClick: onNext, className: "btn btn-app btn-primary main-nav-button", "data-tracking-id": `next-of-${activeSection}`, type: "button" }, t(props.activeStep.nextButtonLabel)),
+                activeSection === AppRouteSections.RESOURCES && isFileRecommendationsTriggered && (React.createElement(Button, { onClick: handleFileRecsSelfSolved, variant: ButtonVariant.secondary, className: "issue-solved-button solved-issue-button", "data-tracking-id": "troubleshoot-self-solved-issue" }, t('I solved my issue'))))),
             React.createElement(RecommendationFeedbackModal, { isModalOpen: isRecsModalVisible, handleModalToggle: onRecsFeedbackModalToggle, modalContent: t(`Great, we're glad that resolved your issue`) }),
             activeSectionError ? (React.createElement("small", { className: "pf-v6-u-align-self-center pf-v6-u-ml-md text-red" }, activeSectionError)) : null)));
 }

package/lib/esm/components/wizardLayout/index.d.ts

@@ -2,6 +2,7 @@ import 'react-bootstrap-typeahead/css/Typeahead.css';
 import '../../css/app.css';
 import '../../css/pagination.css';
 import '../../css/productSelector.css';
+import '../../css/AskRedHat.css';
 import '../../css/results.css';
 import '../shared/fileUpload/css/fileSelector.css';
 import React from 'react';

package/lib/esm/components/wizardLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,6CAA6C,CAAC;AACrD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2CAA2C,CAAC;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,aAAa,EAAE;YACX,cAAc,EAAE,MAAM,CAAC;YACvB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC;KACL;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AAED,eAAO,MAAM,YAAY,UAAW,MAAM,sBAYzC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,6CAA6C,CAAC;AACrD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2CAA2C,CAAC;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAGlE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,aAAa,EAAE;YACX,cAAc,EAAE,MAAM,CAAC;YACvB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC;KACL;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AAED,eAAO,MAAM,YAAY,UAAW,MAAM,sBAYzC,CAAC"}

package/lib/esm/components/wizardLayout/index.js

@@ -2,6 +2,7 @@ import 'react-bootstrap-typeahead/css/Typeahead.css';
 import '../../css/app.css';
 import '../../css/pagination.css';
 import '../../css/productSelector.css';
+import '../../css/AskRedHat.css';
 import '../../css/results.css';
 import '../shared/fileUpload/css/fileSelector.css';
 import { useDocumentTitle } from '@rh-support/components';

package/lib/esm/context/AIResponseContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IAIResponseActionType, IAIResponseState } from '../reducers/AIResponseConstNTypes';
+export declare const AIResponseStateContext: React.Context<IAIResponseState>;
+export declare const AIResponseDispatchContext: React.Context<React.Dispatch<IAIResponseActionType>>;
+export declare function AIResponseContextProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare const useAIResponseState: () => IAIResponseState;
+export declare const useAIResponseDispatch: () => React.Dispatch<IAIResponseActionType>;
+//# sourceMappingURL=AIResponseContext.d.ts.map

package/lib/esm/context/AIResponseContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIResponseContext.d.ts","sourceRoot":"","sources":["../../../src/context/AIResponseContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAA0B,MAAM,mCAAmC,CAAC;AAKpH,eAAO,MAAM,sBAAsB,iCAAgE,CAAC;AACpG,eAAO,MAAM,yBAAyB,sDACgD,CAAC;AAEvF,wBAAgB,yBAAyB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAUpF;AAGD,eAAO,MAAM,kBAAkB,wBAM9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,6CAMjC,CAAC"}

package/lib/esm/context/AIResponseContext.js

@@ -0,0 +1,26 @@
+import React, { useReducer } from 'react';
+import { initialAIResponseState } from '../reducers/AIResponseConstNTypes';
+import { aiResponseReducer } from '../reducers/AIResponseReducer';
+const initialDispatchContext = () => { };
+export const AIResponseStateContext = React.createContext(initialAIResponseState);
+export const AIResponseDispatchContext = React.createContext(initialDispatchContext);
+export function AIResponseContextProvider({ children }) {
+    const [aiResponseState, aiResponseDispatch] = useReducer(aiResponseReducer, initialAIResponseState);
+    return (React.createElement(AIResponseStateContext.Provider, { value: aiResponseState },
+        React.createElement(AIResponseDispatchContext.Provider, { value: aiResponseDispatch }, children)));
+}
+// Custom hooks for easy access
+export const useAIResponseState = () => {
+    const context = React.useContext(AIResponseStateContext);
+    if (context === undefined) {
+        throw new Error('useAIResponseState must be used within a AIResponseContextProvider');
+    }
+    return context;
+};
+export const useAIResponseDispatch = () => {
+    const context = React.useContext(AIResponseDispatchContext);
+    if (context === undefined) {
+        throw new Error('useAIResponseDispatch must be used within a AIResponseContextProvider');
+    }
+    return context;
+};

package/lib/esm/context/RootTroubleshootProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RootTroubleshootProvider.d.ts","sourceRoot":"","sources":["../../../src/context/RootTroubleshootProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACzC;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,qBAkBrD"}
+{"version":3,"file":"RootTroubleshootProvider.d.ts","sourceRoot":"","sources":["../../../src/context/RootTroubleshootProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACzC;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,qBAoBrD"}

package/lib/esm/context/RootTroubleshootProvider.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AttachmentContextProvider } from '../components/shared/fileUpload/reducer/AttachmentReducerContext';
+import { AIResponseContextProvider } from './AIResponseContext';
 import { CaseContextProvider } from './CaseContext';
 import { ClusterRecommendationsContextProvider } from './ClusterRecommendationsContext';
 import { RecommendationContextProvider } from './RecommendationContext';
@@ -10,10 +11,11 @@ import { TCContextProvider } from './TopContentContext';
 export function RootTroubleshootProvider(props) {
     return (React.createElement(RouteContextProvider, null,
         React.createElement(CaseContextProvider, null,
-            React.createElement(RecommendationContextProvider, null,
-                React.createElement(AttachmentContextProvider, null,
-                    React.createElement(RulesContextProvider, null,
-                        React.createElement(ClusterRecommendationsContextProvider, null,
-                            React.createElement(TCContextProvider, null,
-                                React.createElement(SessionRestoreContextProvider, null, props.children)))))))));
+            React.createElement(AIResponseContextProvider, null,
+                React.createElement(RecommendationContextProvider, null,
+                    React.createElement(AttachmentContextProvider, null,
+                        React.createElement(RulesContextProvider, null,
+                            React.createElement(ClusterRecommendationsContextProvider, null,
+                                React.createElement(TCContextProvider, null,
+                                    React.createElement(SessionRestoreContextProvider, null, props.children))))))))));
 }

package/lib/esm/css/AskRedHat.css

@@ -0,0 +1,333 @@
+.ask-redhat {
+    padding: 1rem 1rem 2rem;
+}
+
+.ask-redhat-title {
+    display: flex;
+    flex-direction: row;
+    width: 387.666px;
+    height: 24px;
+    flex-shrink: 0;
+    color: #000;
+    font-family: 'Red Hat Display';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.ask-redhat-content-wrapper {
+    position: relative;
+}
+
+.ask-redhat-content {
+    max-height: 120px;
+    color: #000;
+    font-family: 'Red Hat Text';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    overflow: hidden;
+    position: relative;
+    transition: max-height 0.8s ease;
+}
+
+.ask-redhat-content--expanded {
+    max-height: calc(100vh - 390px);
+    transition: max-height 0.8s ease !important;
+}
+
+.ask-redhat-content--expanded-scrollable {
+    max-height: calc(100vh - 500px);
+    overflow-y: auto;
+}
+
+.ask-redhat-list {
+    margin-left: 1.5rem;
+}
+
+.ask-redhat-cards {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.ask-redhat-card {
+    flex: 1;
+}
+
+.ask-redhat-card-title {
+    margin: 0;
+}
+
+.ask-redhat-footer-wrapper {
+    position: relative;
+    margin-top: 1rem;
+    padding-bottom: 3rem;
+}
+
+.ask-redhat-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1.5rem 0 2rem;
+}
+
+.ask-redhat-footer-text {
+    margin: 0;
+}
+
+:root {
+    --color-red: var(--Core-color-palette-Red-red-40, #f56e6e);
+    --color-purple: var(--Secondary-color-palette-Purple-purple-50, #5e40be);
+    --gradient-red-purple: linear-gradient(90deg, var(--color-red), var(--color-purple));
+    --gorgey: #f56e6e;
+}
+
+.ask-redhat-chat-button {
+    width: 129px;
+    height: 30px;
+    justify-content: center;
+    align-items: center !important;
+    gap: 8px;
+    flex-shrink: 0;
+    border-radius: 40px;
+    background: var(--gradient-red-purple) !important;
+    color: #000;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    padding: 1px;
+}
+
+.ask-redhat-chat-button svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+}
+
+.ask-redhat-chat-button .pf-v6-c-button__text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    color: #000;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+.ask-redhat-chat-button .pf-v6-c-button__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+.ask-redhat-chat-button::before {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+    background: #fff;
+    border-radius: 39px;
+    z-index: 1;
+}
+
+.ask-redhat-chat-button > * {
+    position: relative;
+    z-index: 2;
+}
+
+.ask-redhat-chat-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(94, 64, 190, 0.2);
+}
+
+.ask-redhat-fade-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 1002px;
+    height: 147px;
+    flex-shrink: 0;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 80%, #fff 100%);
+    pointer-events: none;
+    z-index: 1;
+}
+
+.ask-redhat-toggle-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    left: 50%;
+    width: 211.839px;
+    height: 40px;
+    transform: translateX(-50%);
+    background-color: #fff;
+    z-index: 3;
+    background: var(--gradient-red-purple) !important;
+    padding: 2px;
+    color: #000;
+    border-radius: 40px;
+}
+
+.ask-redhat-toggle-button .pf-v6-c-button__text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+    gap: 8px;
+    color: #000;
+}
+
+.ask-redhat-toggle-button svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+}
+
+.ask-redhat-toggle-button::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    background: #fff;
+    border-radius: 38px;
+    z-index: 1;
+}
+
+.ask-redhat-toggle-button > * {
+    position: relative;
+    z-index: 2;
+}
+
+.ask-redhat-toggle-button-collapsed {
+    display: flex;
+    width: 50px;
+    height: 24px;
+    padding: 6px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    border-radius: 40px;
+    background: var(--gradient-red-purple) !important;
+    color: #000;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 3;
+}
+
+.ask-redhat-toggle-button-collapsed::before {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+    background: #fff;
+    border-radius: 39px;
+    z-index: 1;
+}
+
+.ask-redhat-toggle-button-collapsed > * {
+    position: relative;
+    z-index: 2;
+}
+
+.ask-redhat-toggle-button-collapsed svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+    line-height: 1;
+}
+
+.ask-redhat-toggle-button-wrapper {
+    position: relative;
+}
+
+.ask-redhat-border-line {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: #d2d2d2;
+    z-index: 1;
+}
+
+.return-to-case-btn {
+    border: none;
+    background-color: transparent;
+    color: #0066cc;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+.pf-chatbot--fullscreen {
+    position: absolute !important;
+}
+
+.pf-chatbot--embedded {
+    height: calc(100vh - 276px) !important;
+}
+
+.pf-chatbot--fullscreen .pf-chatbot-container {
+    height: calc(100vh - 255px) !important;
+}
+
+.fullscreen-chat-footer {
+    position: absolute !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    height: 42px !important;
+    background: #f6f6f6 !important;
+    border-top: 1px solid #d1d1d1 !important;
+    align-items: center !important;
+    z-index: 10001 !important;
+    padding-left: 25px;
+}
+
+body:has(.pf-chatbot--fullscreen) .pf-v6-c-wizard__footer {
+    z-index: 0 !important;
+}
+
+body:has(.pf-chatbot--fullscreen) .fullscreen-chat-footer {
+    display: flex !important;
+}
+
+body:has(.pf-chatbot--fullscreen) .main-section {
+    min-height: calc(100vh - 212px) !important;
+}
+
+body:has(.pf-chatbot--embedded) .pf-v6-c-wizard__main-body:last-child {
+    padding: 0 !important;
+}