@rh-support/troubleshoot 2.6.49 → 2.6.55

package/lib/esm/components/CaseEditView/Tabs/CasePrivateNotes/CasePrivateNotes.js

@@ -80,7 +80,7 @@ function CasePrivateNotes(props) {
         canUpdatePrivateNotes && (React.createElement("form", null,
             React.createElement(TextAreaResizable, { style: { minHeight: '200px' }, id: "rha-case-notes", disabled: isUpdating, maxLength: 255, name: "notes", value: notesState, onChange: onChange }),
             React.createElement("div", { className: "pf-v6-u-mt-md" },
-                React.createElement(Button, { className: `${isExportingPDF ? 'hide-in-pdf' : ''}`, onClick: updateCase, disabled: isPrivateNotesEmpty || isUpdating || !formIsDirty, variant: "primary" },
+                React.createElement(Button, { className: `${isExportingPDF ? 'hide-in-pdf' : ''}`, onClick: updateCase, isDisabled: isPrivateNotesEmpty || isUpdating || !formIsDirty, variant: "primary" },
                     React.createElement(Trans, null, "Update"),
                     " ",
                     React.createElement(LoadingIndicator, { show: isUpdating, isInline: true })),

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

@@ -1 +1 @@
-{"version":3,"file":"AskRedHat.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/AskRedHat.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAa5D,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAwTtC,CAAC"}
+{"version":3,"file":"AskRedHat.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/AskRedHat.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAe5D,UAAU,MAAM;IACZ,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAsVtC,CAAC"}

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

@@ -9,11 +9,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 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 { Button, Card, CardBody, CardHeader, Content, ContentVariants, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateVariant, Icon, Modal, ModalVariant, Skeleton, Spinner, } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import isEqual from 'lodash/isEqual';
 import React, { useContext, useRef, useState } from 'react';
 import { MODAL_MESSAGES, QUICK_RESPONSES, TOOLTIP_MESSAGES } from '../../constants/askRedHatMessages';
 import { useAIResponseState } from '../../context/AIResponseContext';
+import { useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
+import { useARHResponse } from '../../hooks/useARHResponse';
 import { useParseRuleMarkdown } from '../../hooks/useParseRuleMarkdown';
 import { appSourceId_ARH } from '../../reducers/CaseConstNTypes';
 import { CollapseIcon } from './icons/CollapseIcon';
@@ -31,7 +35,29 @@ export const AskRedHat = ({ onChatWithAIClick }) => {
     const [isSubmittingFeedback, setIsSubmittingFeedback] = useState(false);
     const aiResponseState = useAIResponseState();
     const contentRef = useRef(null);
-    const { routeState: { isCaseCreate }, } = useContext(RouteContext);
+    const { routeState: { isCaseCreate, activeSection }, } = useContext(RouteContext);
+    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 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;
@@ -52,18 +78,12 @@ export const AskRedHat = ({ onChatWithAIClick }) => {
     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* () {
         setIsSubmittingFeedback(true);
         try {
             const payload = {
                 rating: (feedbackType === 'positive' ? 'positive' : 'negative'),
-                freeform: additionalFeedback || undefined,
+                freeform: additionalFeedback || '',
                 predefined_response: selectedResponse || '',
             };
             yield sendRHDirectMessageFeedback(conversationId, messageId, payload, config);
@@ -91,15 +111,32 @@ export const AskRedHat = ({ onChatWithAIClick }) => {
                 navigator.clipboard.writeText(answer);
             } }, TOOLTIP_MESSAGES.copy),
     };
+    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 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)),
+                        ' ',
+                        "Error while loading AI insights"),
+                    React.createElement(EmptyStateBody, null,
+                        React.createElement(Content, { component: ContentVariants.p }, "AI insights is currently unavailable, try reloading.")),
+                    React.createElement(EmptyStateFooter, null,
+                        React.createElement(Button, { variant: "tertiary", size: "sm", onClick: fetchARHResponse }, "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 ? 'Resolve your issue now with AI insights' : 'Troubleshoot 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..."))),
+                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: "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" }, "Chat with AI to get started")))));
     }
@@ -123,16 +160,6 @@ export const AskRedHat = ({ onChatWithAIClick }) => {
                     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 }),

package/lib/esm/components/shared/fileUpload/WidgetFileUploader.js

@@ -146,7 +146,7 @@ function WidgetFileUploader(props) {
             }
         }
     });
-    return (React.createElement(Card, { id: "file-uploader-card", className: "file-diag", onPaste: handlePaste },
+    return (React.createElement(Card, { id: "file-uploader-card", className: "file-diag pf-v6-u-mb-lg", onPaste: handlePaste },
         React.createElement(CardHeader, { "aria-label": t('File uploader') },
             React.createElement("h3", { id: "file-uploader-title" }, props.isIdea || props.isSecureSupport ? (React.createElement(Trans, null, "File uploader")) : (React.createElement(Trans, null, "Upload a file for Red Hat to analyze")))),
         React.createElement(CardBody, { "aria-label": t('File upload area'), className: "file-upload-body" },

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

@@ -1,6 +1,9 @@
 import React, { Dispatch, SetStateAction } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
+export declare const getCaseTypeAIText: (caseType: string) => string;
+export declare const generateCaseTypePrefix: (activeSection: string, caseType: string, lang: string) => string;
+export declare const generateAIQuestion: (activeSection: string, product: string | undefined, version: string | undefined, summary: string | undefined, issue: string | undefined, caseType: string, lang: string) => string;
 interface IProps {
     routeProps: RouteComponentProps<IRouteUrlParams>;
     submitCaseAndNavigate: (isReSubmitting: boolean) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"WizardMain.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardMain.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAqD,MAAM,OAAO,CAAC;AAE3G,OAAO,EAAS,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAe9D,OAAO,EAAoB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AA0FpF,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,qBAAqB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBA2XhC;AACD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"WizardMain.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardMain.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAqD,MAAM,OAAO,CAAC;AAE3G,OAAO,EAAS,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAS9D,OAAO,EAAoB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAapF,eAAO,MAAM,iBAAiB,aAAc,MAAM,KAAG,MAEpD,CAAC;AAEF,eAAO,MAAM,sBAAsB,kBAAmB,MAAM,YAAY,MAAM,QAAQ,MAAM,KAAG,MAqB9F,CAAC;AAGF,eAAO,MAAM,kBAAkB,kBACZ,MAAM,WACZ,MAAM,GAAG,SAAS,WAClB,MAAM,GAAG,SAAS,WAClB,MAAM,GAAG,SAAS,SACpB,MAAM,GAAG,SAAS,YACf,MAAM,QACV,MAAM,KACb,MAwCF,CAAC;AACF,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,qBAAqB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBAyVhC;AACD,eAAe,UAAU,CAAC"}

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

@@ -19,20 +19,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Env } from '@cee-eng/hydrajs';
-import { askRHDirectAIResponse, getRHDirectStatusCheck, } from '@ifd-ui/ask-redhat-core';
+import { getRHDirectStatusCheck } from '@ifd-ui/ask-redhat-core';
 import { Wizard, WizardNav, WizardNavItem, WizardStep, } from '@patternfly/react-core';
 import { LoadingIndicator } from '@rh-support/components';
-import i18n from 'i18next';
 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, useAIResponseState } from '../../context/AIResponseContext';
 import { useCaseSelector } from '../../context/CaseContext';
 import { RecommendationDispatchContext } from '../../context/RecommendationContext';
 import { RouteContext, RouteDispatchContext } from '../../context/RouteContext';
+import { useARHResponse } from '../../hooks/useARHResponse';
 import { useWizard } from '../../hooks/useWizard';
-import { streamingChunkReceived, streamingCompleted, streamingError, streamingStarted, } from '../../reducers/AIResponseReducer';
 import { appSourceId_ARH, excludedCaseTypesforARH } from '../../reducers/CaseConstNTypes';
 import { RecommendationsConstants } from '../../reducers/RecommendationsReducer';
 import { AppRouteSections } from '../../reducers/RouteConstNTypes';
@@ -46,10 +44,10 @@ import WizardNavigation from './WizardNavigation';
 const CASE_TYPE_AI_TEXT_MAP = {
     Other: 'Something',
 };
-const getCaseTypeAIText = (caseType) => {
+export const getCaseTypeAIText = (caseType) => {
     return CASE_TYPE_AI_TEXT_MAP[caseType] || caseType;
 };
-const generateCaseTypePrefix = (activeSection, caseType, lang) => {
+export const generateCaseTypePrefix = (activeSection, caseType, lang) => {
     if (activeSection === AppRouteSections.TROUBLESHOOT) {
         return '';
     }
@@ -69,7 +67,7 @@ const generateCaseTypePrefix = (activeSection, caseType, lang) => {
     return helpWithMap[lang] || helpWithMap.en;
 };
 // Generate AI question based on case details
-const generateAIQuestion = (activeSection, product, version, summary, issue, caseType, lang) => {
+export const generateAIQuestion = (activeSection, product, version, summary, issue, caseType, lang) => {
     const baseMessageMap = {
         en: `My issue is primarily related to ${product !== null && product !== void 0 ? product : ''} ${version !== null && version !== void 0 ? version : ''}. I would title my problem: ${summary !== null && summary !== void 0 ? summary : ''}. More details are as follows: ${issue !== null && issue !== void 0 ? issue : ''}.`,
         de: `Mein Problem hängt hauptsächlich mit ${product !== null && product !== void 0 ? product : ''} ${version !== null && version !== void 0 ? version : ''} zusammen. Ich würde mein Problem so betiteln: ${summary !== null && summary !== void 0 ? summary : ''}. Weitere Details sind wie folgt: ${issue !== null && issue !== void 0 ? issue : ''}.`,
@@ -99,7 +97,21 @@ function WizardMain(props) {
         caseType: state.caseDetails.caseType,
     }), isEqual);
     const { routeState: { isCaseCreate, activeSection }, } = useContext(RouteContext);
-    const aiResponseDispatch = useAIResponseDispatch();
+    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 isTroubleshootSection = activeSection === AppRouteSections.TROUBLESHOOT;
     const isResourcesSection = activeSection === AppRouteSections.RESOURCES;
     const isSummarizeSection = activeSection === AppRouteSections.SUMMARIZE;
@@ -147,7 +159,7 @@ function WizardMain(props) {
         // Check if user is not a secure support or confirmed stateside support user
         const isNotSecureOrStatesideUser = !props.isSecureSupport && !props.hasConfirmedStatesideSupport;
         // Check if the ARH fields have changed
-        const isARHFieldsChanged = haveARHFieldsChanged();
+        const isARHFieldsChanged = haveARHFieldsChanged;
         // Check if user is external and has invalid entitlements
         const isNotUnentitledExternalUser = !(props.isUserExternal && props.hasInvalidEntitlements);
         return (isRelevantSection &&
@@ -157,7 +169,7 @@ function WizardMain(props) {
             isNotUnentitledExternalUser);
     };
     // Check if any of the ARH-relevant fields have changed
-    const haveARHFieldsChanged = () => {
+    const haveARHFieldsChanged = React.useMemo(() => {
         const hasChanged = previousARHFieldsRef.current.product !== product ||
             previousARHFieldsRef.current.version !== version ||
             previousARHFieldsRef.current.summary !== summary ||
@@ -171,7 +183,7 @@ function WizardMain(props) {
             };
         }
         return hasChanged;
-    };
+    }, [product, version, summary, issue]);
     useEffect(() => {
         if (!activeSection) {
             return;
@@ -262,40 +274,6 @@ function WizardMain(props) {
     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 aiResponseState = useAIResponseState();
-    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 = () => __awaiter(this, void 0, void 0, function* () {
-        var _a;
-        const detailedQuestion = generateAIQuestion(activeSection || '', product, version, summary, issue, caseType || '', i18n.language || 'en');
-        //streaming callbacks
-        const streamingCallbacks = {
-            onChunk: (chunk, accumulatedResponse) => {
-                aiResponseDispatch(streamingChunkReceived(chunk, accumulatedResponse));
-            },
-            onComplete: (finalResponse) => {
-                aiResponseDispatch(streamingCompleted(finalResponse));
-            },
-            onError: (error) => {
-                aiResponseDispatch(streamingError(error));
-            },
-        };
-        aiResponseDispatch(streamingStarted());
-        try {
-            // Get existing conversation ID from state if available (need to map it with session data)
-            const existingConversationId = (_a = aiResponseState === null || aiResponseState === void 0 ? void 0 : aiResponseState.aiResponse) === null || _a === void 0 ? void 0 : _a.conversationId;
-            yield askRHDirectAIResponse(detailedQuestion, config, true, // response to be streamed or not
-            existingConversationId, streamingCallbacks);
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : 'Failed to get AI response';
-            aiResponseDispatch(streamingError(errorMessage));
-        }
-    });
     const CustomFooter = (activeStep, goToNextStep, goToPrevStep) => {
         useEffect(() => {
             if (steps.length > 2 && (activeStep === null || activeStep === void 0 ? void 0 : activeStep.index) === 2 && isNextButtonClicked) {

package/lib/esm/css/AskRedHat.css

@@ -23,7 +23,7 @@
 }
 
 .ask-redhat-content {
-    max-height: 120px;
+    max-height: 242px;
     color: #000;
     font-family: 'Red Hat Text';
     font-size: 16px;
@@ -79,6 +79,12 @@
     margin: 0;
 }
 
+.ask-redhat-error {
+    border: 1px solid #c7c7c7;
+    border-radius: 6px;
+    padding: 12px 24px;
+}
+
 :root {
     --color-red: var(--Core-color-palette-Red-red-40, #f56e6e);
     --color-purple: var(--Secondary-color-palette-Purple-purple-50, #5e40be);
@@ -124,7 +130,6 @@
     height: 100%;
 }
 
-
 .ask-redhat-chat-button .pf-v6-c-button__icon {
     display: flex;
     align-items: center;
@@ -390,3 +395,7 @@ body:has(.pf-chatbot--embedded) .pf-v6-c-wizard__main-body:last-child {
     border-radius: var(--global-border-radius-small, 6px) !important;
     background: #fff !important;
 }
+
+.ask-redhat-core .pf-chatbot__message-bar {
+    background: #fff !important;
+}

package/lib/esm/css/case.css

@@ -47,11 +47,15 @@ button,
     padding-left: 1.8rem;
     margin-right: -1.8rem;
     padding-right: 1.8rem;
-    margin-bottom: -2rem;
+    margin-bottom: -1rem;
     padding-bottom: 8rem;
     min-height: 300px;
 }
 
+.case-details-tabs-content {
+    border-radius: 0 0 0 16px !important;
+}
+
 .support-comment {
     display: block;
     margin-bottom: 1rem;

package/lib/esm/hooks/useARHResponse.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Custom hook to prompt from the Ask Red Hat
+ */
+export declare const useARHResponse: ({ activeSection, product, version, summary, issue, caseType, config, }: {
+    activeSection: string;
+    product: string;
+    version: string;
+    summary: string;
+    issue: string;
+    caseType: string;
+    config: any;
+}) => {
+    fetchARHResponse: () => Promise<void>;
+};
+//# sourceMappingURL=useARHResponse.d.ts.map

package/lib/esm/hooks/useARHResponse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useARHResponse.d.ts","sourceRoot":"","sources":["../../../src/hooks/useARHResponse.ts"],"names":[],"mappings":"AAaA;;GAEG;AACH,eAAO,MAAM,cAAc,2EAQxB;IACC,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;CACf;;CAgDA,CAAC"}

package/lib/esm/hooks/useARHResponse.js

@@ -0,0 +1,50 @@
+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 { askRHDirectAIResponse } from '@ifd-ui/ask-redhat-core';
+import i18n from 'i18next';
+import { useCallback } from 'react';
+import { generateAIQuestion } from '../components/wizardLayout/WizardMain';
+import { useAIResponseDispatch, useAIResponseState } from '../context/AIResponseContext';
+import { streamingChunkReceived, streamingCompleted, streamingError, streamingStarted, } from '../reducers/AIResponseReducer';
+/**
+ * Custom hook to prompt from the Ask Red Hat
+ */
+export const useARHResponse = ({ activeSection, product, version, summary, issue, caseType, config, }) => {
+    const aiResponseDispatch = useAIResponseDispatch();
+    const aiResponseState = useAIResponseState();
+    const fetchARHResponse = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const detailedQuestion = generateAIQuestion(activeSection || '', product, version, summary, issue, caseType || '', i18n.language || 'en');
+        // Streaming callbacks
+        const streamingCallbacks = {
+            onChunk: (chunk, accumulatedResponse) => {
+                aiResponseDispatch(streamingChunkReceived(chunk, accumulatedResponse));
+            },
+            onComplete: (finalResponse) => {
+                aiResponseDispatch(streamingCompleted(finalResponse));
+            },
+            onError: (error) => {
+                aiResponseDispatch(streamingError(error));
+            },
+        };
+        aiResponseDispatch(streamingStarted());
+        try {
+            // Get existing conversation ID from state if available (need to map it with session data)
+            const existingConversationId = (_a = aiResponseState === null || aiResponseState === void 0 ? void 0 : aiResponseState.aiResponse) === null || _a === void 0 ? void 0 : _a.conversationId;
+            yield askRHDirectAIResponse(detailedQuestion, config, true, // response to be streamed or not
+            existingConversationId, streamingCallbacks);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to get AI response';
+            aiResponseDispatch(streamingError(errorMessage));
+        }
+    }), [activeSection, product, version, summary, issue, caseType, config, aiResponseDispatch, aiResponseState]);
+    return { fetchARHResponse };
+};

package/lib/esm/scss/_main.scss

@@ -179,10 +179,12 @@ div.support-grid-case-details.support-case {
             min-height: 75vh;
             width: 100%;
             background-color: #f0f0f0;
+            border-radius: 0 0 0 16px;
 
             .grid-main-section {
                 padding: 1rem;
                 background-color: #fff;
+                border-radius: 0 0 0 16px;
 
                 .case-overview-header {
                     padding: 0.5rem;
@@ -419,7 +421,7 @@ div.support-grid-case-details.support-case {
                     display: flex;
                     align-items: center;
                     width: 100%;
-                    padding: 1.8rem 1.5rem;
+                    padding: 24px;
                     font-weight: 500;
 
                     span {
@@ -439,11 +441,7 @@ div.support-grid-case-details.support-case {
 
             &.sidebar-collapsed {
                 button:first-of-type {
-                    margin-bottom: 0.4rem;
-                    padding: 1.8rem 1.5rem;
-                    background-color: #dedede;
-                    border-top: 1px solid #ccc;
-                    border-bottom: 1px solid #ccc;
+                    padding: 24px;
                 }
 
                 button.sidebar-section-toggle-btn {

package/lib/esm/scss/_pf-overrides.scss

@@ -460,6 +460,14 @@ pfe-accordion {
     z-index: 1 !important;
 }
 
+nav.pf-v6-c-wizard__nav.pf-m-expanded {
+    position: absolute;
+    left: 0;
+    z-index: 2 !important;
+    background: #fff;
+    width: 100%;
+}
+
 .pf-v6-c-options-menu__menu {
     z-index: 9 !important;
 }
@@ -831,3 +839,11 @@ div.case-details-tabs pre {
 .pf-v6-c-alert {
     margin-top: 0;
 }
+
+.pf-v6-c-wizard__nav {
+    border-radius: 0 0 0 16px !important;
+}
+
+.pf-v6-c-wizard__outer-wrap {
+    border-radius: 16px !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "2.6.49",
+    "version": "2.6.55",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -60,7 +60,7 @@
         "@progress/kendo-react-pdf": "^5.16.0",
         "@redux-devtools/extension": "^3.3.0",
         "@rh-support/components": "2.5.45",
-        "@rh-support/react-context": "2.5.45",
+        "@rh-support/react-context": "2.5.60",
         "@rh-support/types": "2.0.5",
         "@rh-support/user-permissions": "2.5.20",
         "@rh-support/utils": "2.5.19",
@@ -135,5 +135,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "f2a50ab076135e82a7947f2e3edc0f51e63365ef"
+    "gitHead": "496bf698365697ff751a8edf712284454440d6ea"
 }