@rh-support/troubleshoot 2.6.18 → 2.6.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.d.ts +1 -0
- package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.d.ts.map +1 -1
- package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.js +31 -5
- package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.d.ts.map +1 -1
- package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.js +33 -34
- package/lib/esm/components/CaseEditView/CaseDetailsAside.d.ts.map +1 -1
- package/lib/esm/components/CaseEditView/CaseDetailsAside.js +2 -1
- package/lib/esm/components/CaseEditView/CaseDetailsTabs.d.ts.map +1 -1
- package/lib/esm/components/CaseEditView/CaseDetailsTabs.js +1 -0
- package/lib/esm/components/CaseEditView/ConfirmationModals/ReopenCaseModal.d.ts.map +1 -1
- package/lib/esm/components/CaseEditView/ConfirmationModals/ReopenCaseModal.js +16 -22
- package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.d.ts.map +1 -1
- package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.js +15 -19
- package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseHostname.js +1 -1
- package/lib/esm/components/CaseEditView/Tabs/CaseHistory/Timeline.css +0 -8
- package/lib/esm/components/CaseManagement/RHAssociatesSelector.d.ts.map +1 -1
- package/lib/esm/components/CaseManagement/RHAssociatesSelector.js +5 -8
- package/lib/esm/components/CaseManagement/SendNotifications/CaseContactSelector.d.ts.map +1 -1
- package/lib/esm/components/CaseManagement/SendNotifications/CaseContactSelector.js +7 -7
- package/lib/esm/components/CaseManagement/SendNotifications/NonOrgCaseNotifyeesSelector.d.ts.map +1 -1
- package/lib/esm/components/CaseManagement/SendNotifications/NonOrgCaseNotifyeesSelector.js +1 -1
- package/lib/esm/components/TroubleshootSection/AskRedHat.d.ts +7 -0
- package/lib/esm/components/TroubleshootSection/AskRedHat.d.ts.map +1 -0
- package/lib/esm/components/TroubleshootSection/AskRedHat.js +73 -0
- package/lib/esm/components/TroubleshootSection/TroubleshootSection.d.ts +5 -0
- package/lib/esm/components/TroubleshootSection/TroubleshootSection.d.ts.map +1 -1
- package/lib/esm/components/TroubleshootSection/TroubleshootSection.js +82 -12
- package/lib/esm/components/TroubleshootSection/icons/CollapseIcon.d.ts +9 -0
- package/lib/esm/components/TroubleshootSection/icons/CollapseIcon.d.ts.map +1 -0
- package/lib/esm/components/TroubleshootSection/icons/CollapseIcon.js +9 -0
- package/lib/esm/components/TroubleshootSection/icons/StarIcon.d.ts +9 -0
- package/lib/esm/components/TroubleshootSection/icons/StarIcon.d.ts.map +1 -0
- package/lib/esm/components/TroubleshootSection/icons/StarIcon.js +17 -0
- package/lib/esm/components/shared/input/ContactSelectorInternal.d.ts +0 -1
- package/lib/esm/components/shared/input/ContactSelectorInternal.d.ts.map +1 -1
- package/lib/esm/components/shared/input/ContactSelectorInternal.js +1 -6
- package/lib/esm/components/wizardLayout/WizardLayout.d.ts.map +1 -1
- package/lib/esm/components/wizardLayout/WizardLayout.js +5 -4
- package/lib/esm/components/wizardLayout/WizardMain.d.ts +3 -1
- package/lib/esm/components/wizardLayout/WizardMain.d.ts.map +1 -1
- package/lib/esm/components/wizardLayout/WizardMain.js +115 -9
- package/lib/esm/components/wizardLayout/WizardNavigation.d.ts +2 -0
- package/lib/esm/components/wizardLayout/WizardNavigation.d.ts.map +1 -1
- package/lib/esm/components/wizardLayout/WizardNavigation.js +11 -3
- package/lib/esm/components/wizardLayout/index.d.ts +1 -0
- package/lib/esm/components/wizardLayout/index.d.ts.map +1 -1
- package/lib/esm/components/wizardLayout/index.js +1 -0
- package/lib/esm/context/AIResponseContext.d.ts +10 -0
- package/lib/esm/context/AIResponseContext.d.ts.map +1 -0
- package/lib/esm/context/AIResponseContext.js +26 -0
- package/lib/esm/context/RootTroubleshootProvider.d.ts.map +1 -1
- package/lib/esm/context/RootTroubleshootProvider.js +8 -6
- package/lib/esm/css/AskRedHat.css +283 -0
- package/lib/esm/css/case.css +0 -12
- package/lib/esm/hooks/useWizard.d.ts +4 -0
- package/lib/esm/hooks/useWizard.d.ts.map +1 -1
- package/lib/esm/hooks/useWizard.js +1 -1
- package/lib/esm/reducers/AIResponseConstNTypes.d.ts +48 -0
- package/lib/esm/reducers/AIResponseConstNTypes.d.ts.map +1 -0
- package/lib/esm/reducers/AIResponseConstNTypes.js +16 -0
- package/lib/esm/reducers/AIResponseReducer.d.ts +9 -0
- package/lib/esm/reducers/AIResponseReducer.d.ts.map +1 -0
- package/lib/esm/reducers/AIResponseReducer.js +43 -0
- package/lib/esm/reducers/CaseConstNTypes.d.ts +2 -0
- package/lib/esm/reducers/CaseConstNTypes.d.ts.map +1 -1
- package/lib/esm/reducers/CaseConstNTypes.js +2 -0
- package/lib/esm/scss/_main.scss +0 -13
- package/lib/esm/scss/_pf-overrides.scss +0 -5
- package/package.json +7 -6
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { Button, Card, CardBody, CardHeader, Spinner } from '@patternfly/react-core';
|
|
2
|
+
import React, { useRef, useState } from 'react';
|
|
3
|
+
import { useAIResponseState } from '../../context/AIResponseContext';
|
|
4
|
+
import { useParseRuleMarkdown } from '../../hooks/useParseRuleMarkdown';
|
|
5
|
+
import { CollapseIcon } from './icons/CollapseIcon';
|
|
6
|
+
import { StarIcon } from './icons/StarIcon';
|
|
7
|
+
export const AskRedHat = ({ onChatWithAIClick }) => {
|
|
8
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
9
|
+
const aiResponseState = useAIResponseState();
|
|
10
|
+
const contentRef = useRef(null);
|
|
11
|
+
const onToggle = () => {
|
|
12
|
+
if (isExpanded && contentRef.current) {
|
|
13
|
+
contentRef.current.scrollTop = 0;
|
|
14
|
+
}
|
|
15
|
+
setIsExpanded((prev) => !prev);
|
|
16
|
+
};
|
|
17
|
+
const handleChatWithAIClick = () => onChatWithAIClick === null || onChatWithAIClick === void 0 ? void 0 : onChatWithAIClick();
|
|
18
|
+
const aiResponse = aiResponseState.aiResponse;
|
|
19
|
+
const answer = (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.answer) || (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.content) || 'No AI response available yet.';
|
|
20
|
+
const sources = (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.sources) || (aiResponse === null || aiResponse === void 0 ? void 0 : aiResponse.references) || [];
|
|
21
|
+
const sourcesCount = sources.length || 0;
|
|
22
|
+
const isLoading = aiResponseState.isLoading || !aiResponse;
|
|
23
|
+
const { parseMarkdown } = useParseRuleMarkdown();
|
|
24
|
+
if (isLoading) {
|
|
25
|
+
return (React.createElement("div", { className: "ask-redhat" },
|
|
26
|
+
React.createElement("p", { className: "ask-redhat-title" },
|
|
27
|
+
React.createElement(StarIcon, { width: 20, height: 20 }),
|
|
28
|
+
"AI Insights"),
|
|
29
|
+
React.createElement("div", { className: "ask-redhat-content-wrapper" },
|
|
30
|
+
React.createElement("div", { className: "ask-redhat-content", style: { textAlign: 'center', padding: '2rem' } },
|
|
31
|
+
React.createElement(Spinner, { size: "lg" }),
|
|
32
|
+
React.createElement("p", { style: { marginTop: '1rem' } }, "Getting AI insights..."))),
|
|
33
|
+
!aiResponseState.isLoading && (React.createElement("div", { className: "ask-redhat-toggle-button" },
|
|
34
|
+
React.createElement(Button, { variant: "link", onClick: handleChatWithAIClick, className: "ask-redhat-chat-button" }, "Chat with AI to get started")))));
|
|
35
|
+
}
|
|
36
|
+
if (aiResponseState.error) {
|
|
37
|
+
return (React.createElement("div", { className: "ask-redhat" },
|
|
38
|
+
React.createElement("p", { className: "ask-redhat-title" },
|
|
39
|
+
React.createElement(StarIcon, { width: 20, height: 20 }),
|
|
40
|
+
"AI Insights"),
|
|
41
|
+
React.createElement("div", { className: "ask-redhat-content-wrapper" },
|
|
42
|
+
React.createElement("div", { className: "ask-redhat-content", style: { textAlign: 'center', padding: '2rem' } },
|
|
43
|
+
React.createElement("p", { style: { color: '#d73502', marginBottom: '1rem' } }, "Unable to get AI insights. Please try again later."),
|
|
44
|
+
React.createElement(Button, { variant: "link", onClick: handleChatWithAIClick, className: "ask-redhat-chat-button", icon: React.createElement(StarIcon, null) }, "Try again with AI Chat")))));
|
|
45
|
+
}
|
|
46
|
+
return (React.createElement("div", { className: "ask-redhat" },
|
|
47
|
+
React.createElement("p", { className: "ask-redhat-title" },
|
|
48
|
+
React.createElement(StarIcon, { width: 20, height: 20 }),
|
|
49
|
+
"AI Insights"),
|
|
50
|
+
React.createElement("div", { className: "ask-redhat-content-wrapper" },
|
|
51
|
+
React.createElement("div", { ref: contentRef, className: `ask-redhat-content ${isExpanded ? 'ask-redhat-content--expanded' : ''}` },
|
|
52
|
+
React.createElement("div", { className: `ask-redhat-content-scrollable ${isExpanded ? 'ask-redhat-content--expanded-scrollable' : ''}` },
|
|
53
|
+
React.createElement("div", null,
|
|
54
|
+
React.createElement("div", { dangerouslySetInnerHTML: { __html: parseMarkdown(answer) } }),
|
|
55
|
+
sourcesCount > 0 && (React.createElement(React.Fragment, null,
|
|
56
|
+
React.createElement("p", null, "2 sources"),
|
|
57
|
+
React.createElement("div", { className: "ask-redhat-cards" }, sources.map((source, index) => (React.createElement(Card, { className: "ask-redhat-card", key: index },
|
|
58
|
+
React.createElement(CardHeader, null,
|
|
59
|
+
React.createElement("h3", { className: "ask-redhat-card-title" },
|
|
60
|
+
React.createElement("a", { href: source.link, target: "_blank", rel: "noopener noreferrer" }, source.title))),
|
|
61
|
+
React.createElement(CardBody, null,
|
|
62
|
+
React.createElement("p", null, source.snippet)))))))))),
|
|
63
|
+
React.createElement("div", { className: "ask-redhat-footer-wrapper" },
|
|
64
|
+
React.createElement("div", { className: "ask-redhat-footer" },
|
|
65
|
+
React.createElement("p", { className: "ask-redhat-footer-text" }, "Want to continue the conversation? Dive deeper with our AI assistant"),
|
|
66
|
+
React.createElement(Button, { onClick: handleChatWithAIClick, className: 'ask-redhat-chat-button', icon: React.createElement(StarIcon, null) }, "Chat with AI"))),
|
|
67
|
+
!isExpanded && React.createElement("div", { className: "ask-redhat-fade-overlay" }))),
|
|
68
|
+
React.createElement("div", { className: "ask-redhat-toggle-button-wrapper" },
|
|
69
|
+
React.createElement("div", { className: "ask-redhat-border-line" }),
|
|
70
|
+
React.createElement(Button, { onClick: onToggle, className: isExpanded ? 'ask-redhat-toggle-button-collapsed' : 'ask-redhat-toggle-button' },
|
|
71
|
+
isExpanded ? React.createElement(CollapseIcon, null) : React.createElement(StarIcon, { width: 20, height: 20 }),
|
|
72
|
+
isExpanded ? '' : 'Read more'))));
|
|
73
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import '@ifd-ui/ask-redhat-core/ask-redhat-core.css';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
interface IProps {
|
|
3
4
|
inlineEditable: boolean;
|
|
@@ -6,6 +7,10 @@ interface IProps {
|
|
|
6
7
|
collapseOnBlur?: boolean;
|
|
7
8
|
autoFocus?: boolean;
|
|
8
9
|
hideSaveCancel?: boolean;
|
|
10
|
+
isAIChatMode: boolean;
|
|
11
|
+
setIsAIChatMode: (value: boolean) => void;
|
|
12
|
+
onChatWithAIClick?: () => void;
|
|
13
|
+
aiServicesAvailable: boolean;
|
|
9
14
|
}
|
|
10
15
|
declare function TroubleshootSection(props: IProps): React.JSX.Element;
|
|
11
16
|
declare namespace TroubleshootSection {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TroubleshootSection.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/TroubleshootSection.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TroubleshootSection.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/TroubleshootSection.tsx"],"names":[],"mappings":"AAAA,OAAO,6CAA6C,CAAC;AASrD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAY1C,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,mBAAmB,EAAE,OAAO,CAAC;CAChC;AAUD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAsJzC;kBAtJQ,mBAAmB;;;AAyJ5B,eAAe,mBAAmB,CAAC"}
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import '@ifd-ui/ask-redhat-core/ask-redhat-core.css';
|
|
11
|
+
import { AskRedHatChat, setAuthToken } from '@ifd-ui/ask-redhat-core';
|
|
1
12
|
import { Card, CardBody, CardHeader, Tooltip } from '@patternfly/react-core';
|
|
2
13
|
import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
|
|
3
14
|
import { ErrorBoundary, LoadingDots } from '@rh-support/components';
|
|
@@ -6,23 +17,31 @@ import isEmpty from 'lodash/isEmpty';
|
|
|
6
17
|
import isEqual from 'lodash/isEqual';
|
|
7
18
|
import React, { useContext } from 'react';
|
|
8
19
|
import { Trans, useTranslation } from 'react-i18next';
|
|
20
|
+
import { useAIResponseState } from '../../context/AIResponseContext';
|
|
9
21
|
import { useCaseSelector } from '../../context/CaseContext';
|
|
10
22
|
import { TCStateContext } from '../../context/TopContentContext';
|
|
23
|
+
import { appSourceId_ARH, excludedCaseTypesforARH } from '../../reducers/CaseConstNTypes';
|
|
11
24
|
import { OpenShiftClusterId } from '../CaseManagement/OpenShiftClusterId';
|
|
12
25
|
import ClusterRecommendations from '../Recommendations/ClusterRecommendations';
|
|
13
26
|
import InsightsResults from '../Recommendations/InsightsResults';
|
|
14
27
|
import Suggestions from '../Suggestions/Suggestions';
|
|
28
|
+
import { AskRedHat } from './AskRedHat';
|
|
15
29
|
const defaultProps = {
|
|
16
30
|
initialIsEditing: false,
|
|
17
31
|
required: false,
|
|
18
32
|
collapseOnBlur: false,
|
|
19
33
|
autoFocus: false,
|
|
20
34
|
hideSaveCancel: false,
|
|
35
|
+
aiServicesAvailable: false,
|
|
21
36
|
};
|
|
22
37
|
function TroubleshootSection(props) {
|
|
23
|
-
var _a;
|
|
38
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
24
39
|
const { t } = useTranslation();
|
|
40
|
+
const { aiServicesAvailable, isAIChatMode, setIsAIChatMode, onChatWithAIClick } = props;
|
|
25
41
|
const { topContentState: { topContent }, } = useContext(TCStateContext);
|
|
42
|
+
const aiResponseState = useAIResponseState();
|
|
43
|
+
const session = window === null || window === void 0 ? void 0 : window.sessionjs;
|
|
44
|
+
const keycloakSession = (_b = (_a = session === null || session === void 0 ? void 0 : session._state) === null || _a === void 0 ? void 0 : _a.keycloak) !== null && _b !== void 0 ? _b : null;
|
|
26
45
|
const { product, version, isCreatingCase, caseType } = useCaseSelector((state) => ({
|
|
27
46
|
product: state.caseDetails.product,
|
|
28
47
|
version: state.caseDetails.version,
|
|
@@ -32,18 +51,69 @@ function TroubleshootSection(props) {
|
|
|
32
51
|
issue: state.caseDetails.issue,
|
|
33
52
|
}), isEqual);
|
|
34
53
|
const canShowTopProducts = isEmpty(product);
|
|
35
|
-
const canShowTopContent = !canShowTopProducts && ((
|
|
54
|
+
const canShowTopContent = !canShowTopProducts && ((_c = topContent === null || topContent === void 0 ? void 0 : topContent.data) === null || _c === void 0 ? void 0 : _c.length) > 0;
|
|
36
55
|
const isNotAnIdea = caseType !== PreviousCaseTypes.FEATURE_ENHANCEMENT;
|
|
37
|
-
|
|
56
|
+
const isExcludedCaseType = excludedCaseTypesforARH.includes(caseType !== null && caseType !== void 0 ? caseType : '');
|
|
57
|
+
const handleInitialized = (success, error) => {
|
|
58
|
+
if (success) {
|
|
59
|
+
console.log('Chat initialized successfully');
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
console.error('Chat initialization failed:', error);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
const preprocessRequest = () => __awaiter(this, void 0, void 0, function* () {
|
|
66
|
+
var _a;
|
|
67
|
+
if (!keycloakSession) {
|
|
68
|
+
throw new Error('No Keycloak session available');
|
|
69
|
+
}
|
|
70
|
+
try {
|
|
71
|
+
yield ((_a = session === null || session === void 0 ? void 0 : session.updateToken) === null || _a === void 0 ? void 0 : _a.call(session, 500));
|
|
72
|
+
const token = session === null || session === void 0 ? void 0 : session.getEncodedToken();
|
|
73
|
+
if (token) {
|
|
74
|
+
setAuthToken(token);
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
throw new Error('No token available');
|
|
78
|
+
}
|
|
79
|
+
return Promise.resolve();
|
|
80
|
+
}
|
|
81
|
+
catch (error) {
|
|
82
|
+
console.error('Failed to refresh token:', error);
|
|
83
|
+
throw error;
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
const initConfig = {
|
|
87
|
+
packageVersion: (_d = window === null || window === void 0 ? void 0 : window.supportVersionInfo) === null || _d === void 0 ? void 0 : _d.packageVersion,
|
|
88
|
+
appSourceId: appSourceId_ARH,
|
|
89
|
+
enableDebugLogging: false,
|
|
90
|
+
headerTitle: 'AI insights',
|
|
91
|
+
showWelcomeMessage: false,
|
|
92
|
+
conversationId: ((_e = aiResponseState.aiResponse) === null || _e === void 0 ? void 0 : _e.conversationId) || undefined,
|
|
93
|
+
enableHeaderMenu: false,
|
|
94
|
+
enableTheme: false,
|
|
95
|
+
tokenAuth: {
|
|
96
|
+
auth: {
|
|
97
|
+
userInfo: (_h = (_g = (_f = window === null || window === void 0 ? void 0 : window.sessionjs) === null || _f === void 0 ? void 0 : _f.getToken) === null || _g === void 0 ? void 0 : _g.call(_f)) !== null && _h !== void 0 ? _h : {},
|
|
98
|
+
authToken: (_k = (_j = window === null || window === void 0 ? void 0 : window.sessionjs) === null || _j === void 0 ? void 0 : _j.getEncodedToken()) !== null && _k !== void 0 ? _k : '',
|
|
99
|
+
},
|
|
100
|
+
events: {
|
|
101
|
+
preprocessRequest,
|
|
102
|
+
isAuthenticated: () => {
|
|
103
|
+
var _a, _b, _c;
|
|
104
|
+
return (_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.sessionjs) === null || _a === void 0 ? void 0 : _a.isAuthenticated) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
onInitialized: handleInitialized,
|
|
109
|
+
};
|
|
110
|
+
const handleChatWithAIClick = () => {
|
|
111
|
+
setIsAIChatMode(true);
|
|
112
|
+
onChatWithAIClick === null || onChatWithAIClick === void 0 ? void 0 : onChatWithAIClick();
|
|
113
|
+
};
|
|
114
|
+
return (React.createElement(React.Fragment, null, isAIChatMode ? (React.createElement(AskRedHatChat, { initConfig: initConfig })) : (React.createElement(React.Fragment, null,
|
|
38
115
|
React.createElement("section", null,
|
|
39
|
-
React.createElement(
|
|
40
|
-
React.createElement("p", { className: "pf-v6-u-pt-md" },
|
|
41
|
-
React.createElement("span", { className: "pf-v6-u-font-family-heading pf-v6-u-pr-xs" }, t('Product')),
|
|
42
|
-
" ",
|
|
43
|
-
product),
|
|
44
|
-
React.createElement("p", null,
|
|
45
|
-
React.createElement("span", { className: "pf-v6-u-font-family-heading pf-v6-u-pr-xs" }, t('Version')),
|
|
46
|
-
version)),
|
|
116
|
+
!isExcludedCaseType && aiServicesAvailable && (React.createElement(AskRedHat, { onChatWithAIClick: handleChatWithAIClick })),
|
|
47
117
|
!isCreatingCase && (React.createElement(OpenShiftClusterId, { className: "push-bottom", "data-tracking-id": "troubleshoot-section-openshift-cluster-id" })),
|
|
48
118
|
React.createElement(LoadingDots, { show: topContent.isFetching }),
|
|
49
119
|
topContent.data.length === 0 && (React.createElement(Card, { id: "card", className: "pf-v6-u-mb-md" },
|
|
@@ -56,7 +126,7 @@ function TroubleshootSection(props) {
|
|
|
56
126
|
React.createElement(Trans, null, "No recommendations for this product")))),
|
|
57
127
|
React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading suggestions') } }, canShowTopContent && !isEmpty(version) && React.createElement(Suggestions, null)),
|
|
58
128
|
!isCreatingCase && React.createElement(ClusterRecommendations, { className: "pf-v6-u-mt-lg" })),
|
|
59
|
-
React.createElement("section", { className: "pf-v6-u-mt-lg" }, isNotAnIdea && (React.createElement(InsightsResults, { isDisplayOnMain: true, "data-tracking-id": "troubleshoot-section-file-recs" })))));
|
|
129
|
+
React.createElement("section", { className: "pf-v6-u-mt-lg" }, isNotAnIdea && (React.createElement(InsightsResults, { isDisplayOnMain: true, "data-tracking-id": "troubleshoot-section-file-recs" })))))));
|
|
60
130
|
}
|
|
61
131
|
TroubleshootSection.defaultProps = defaultProps;
|
|
62
132
|
export default TroubleshootSection;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapseIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/TroubleshootSection/icons/CollapseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,UAAW,SAAS,sBAiB5C,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const CollapseIcon = (props) => {
|
|
3
|
+
const { width = 18.118, height = 12 } = props;
|
|
4
|
+
return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 19 11", fill: "none", style: {
|
|
5
|
+
flexShrink: 0,
|
|
6
|
+
} },
|
|
7
|
+
React.createElement("path", { d: "M9.05895 0L16.9042 7.07143H1.21367L9.05895 0Z", fill: "#9F549C" }),
|
|
8
|
+
React.createElement("path", { d: "M9.05895 1.57129L16.9042 8.64272H1.21367L9.05895 1.57129Z", fill: "white" })));
|
|
9
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/TroubleshootSection/icons/StarIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,sBAgDxC,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export const StarIcon = (props) => {
|
|
3
|
+
const { width = 16, height = 15.273 } = props;
|
|
4
|
+
return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 16 15.273", fill: "none", style: {
|
|
5
|
+
flexShrink: 0,
|
|
6
|
+
aspectRatio: '16.00/15.27',
|
|
7
|
+
} },
|
|
8
|
+
React.createElement("path", { d: "M16.197 9.21581L11.3573 8.18825L10.3297 3.34854C10.2937 3.16868 10.1345 3.04541 9.95463 3.04541C9.77478 3.04541 9.61558 3.17385 9.57958 3.34854L8.55202 8.18825L3.71231 9.21581C3.53245 9.25181 3.40918 9.41101 3.40918 9.59087C3.40918 9.77072 3.53762 9.92992 3.71231 9.96592L8.55202 10.9935L9.57958 15.8332C9.61558 16.013 9.77478 16.1363 9.95463 16.1363C10.1345 16.1363 10.2937 16.0079 10.3297 15.8332L11.3573 10.9935L16.197 9.96592C16.3768 9.92992 16.5001 9.77072 16.5001 9.59087C16.5001 9.41101 16.3717 9.25181 16.197 9.21581Z", fill: "url(#paint0_linear_5146_16767)" }),
|
|
9
|
+
React.createElement("path", { d: "M3.40909 6.68195C3.58647 6.68195 3.74356 6.55526 3.77905 6.38297L4.16931 4.53308L6.0192 4.14282C6.19658 4.10733 6.31818 3.95024 6.31818 3.77286C6.31818 3.59548 6.19149 3.43839 6.0192 3.4029L4.16931 3.01264L3.77905 1.16275C3.74356 0.98537 3.58647 0.86377 3.40909 0.86377C3.23171 0.86377 3.07462 0.990461 3.03913 1.16275L2.64887 3.01264L0.798982 3.4029C0.6216 3.43839 0.5 3.59548 0.5 3.77286C0.5 3.95024 0.626691 4.10733 0.798982 4.14282L2.64887 4.53308L3.03913 6.38297C3.07462 6.56035 3.23171 6.68195 3.40909 6.68195Z", fill: "url(#paint1_linear_5146_16767)" }),
|
|
10
|
+
React.createElement("defs", null,
|
|
11
|
+
React.createElement("linearGradient", { id: "paint0_linear_5146_16767", x1: "9.95463", y1: "3.04541", x2: "9.95463", y2: "16.1363", gradientUnits: "userSpaceOnUse" },
|
|
12
|
+
React.createElement("stop", { stopColor: "#F56E6E" }),
|
|
13
|
+
React.createElement("stop", { offset: "1", stopColor: "#5E40BE" })),
|
|
14
|
+
React.createElement("linearGradient", { id: "paint1_linear_5146_16767", x1: "3.40909", y1: "0.86377", x2: "3.40909", y2: "6.68195", gradientUnits: "userSpaceOnUse" },
|
|
15
|
+
React.createElement("stop", { stopColor: "#F56E6E" }),
|
|
16
|
+
React.createElement("stop", { offset: "1", stopColor: "#5E40BE" })))));
|
|
17
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/input/ContactSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;
|
|
1
|
+
{"version":3,"file":"ContactSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/input/ContactSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAqBrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,MAAM;IACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,KAAK,KAAA,EAAE,GAAG,KAAA,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CAClE;AAED,MAAM,WAAW,MAAM;IACnB,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC;AAED,qBAAa,uBAAwB,SAAQ,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IACxE,UAAU,EAAE,eAAe,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAQ;IAC5C,QAAQ,oCAAuC;IAE/C,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,CAalC;gBAEU,KAAK,EAAE,MAAM;IAYzB,gBAAgB,YAAa,QAAQ,KAAG,MAAM,CAS5C;IAEF,mBAAmB,aAAc,QAAQ,EAAE,KAAG,QAAQ,EAAE,CAGtD;IAEF,sBAAsB,MAAO,QAAQ,KAAG,OAAO,CAE7C;IAEF,kBAAkB,CAAC,SAAS,EAAE,MAAM;IAmBpC,QAAQ,aAAoB,QAAQ,EAAE,mBAKpC;IAEF,YAAY,UAAiB,MAAM,mBA0CjC;IAEF,iBAAiB,UAAW,MAAM,UAiBhC;IAEF,YAAY,UAAW,GAAG,aAAa,GAAG,UAkBxC;IAEF,mBAAmB,oBAAqB,QAAQ,UAI9C;IAEF,aAAa,UAAW,KAAK,CAAC,aAAa,UAkCzC;IAEF,WAAW,aAIT;IAEF,UAAU,aAKR;IAEF,WAAW,aAGT;IAEF,QAAQ,aAEN;IAEF,MAAM;CAqGT"}
|
|
@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
10
10
|
import { contacts } from '@cee-eng/hydrajs';
|
|
11
11
|
import { Button, Label, LabelGroup, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
|
|
12
12
|
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
|
|
13
|
-
import { haltEvent } from '@rh-support/utils';
|
|
14
13
|
import assign from 'lodash/assign';
|
|
15
14
|
import differenceBy from 'lodash/differenceBy';
|
|
16
15
|
import filter from 'lodash/filter';
|
|
@@ -213,11 +212,7 @@ export class ContactSelectorInternal extends React.Component {
|
|
|
213
212
|
: searchValue;
|
|
214
213
|
const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: this.onToggle, isExpanded: isOpen, isDisabled: this.props.disabled || this.props.isUpdating, isFullWidth: true },
|
|
215
214
|
React.createElement(TextInputGroup, { isPlain: true },
|
|
216
|
-
React.createElement(TextInputGroupMain, { value: displayValue, onChange: (_, value) => this.handleInputChange(value), onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, placeholder: this.props.placeholder || 'Search contact by name or username', ref: this.inputRef, autoComplete: "off", isExpanded: isOpen, role: "combobox" }, this.props.multiple && selectedContacts.length > 0 && (React.createElement(LabelGroup, { "aria-label": "Selected contacts" }, selectedContacts.map((contact, index) => {
|
|
217
|
-
var _a, _b;
|
|
218
|
-
const isDisabled = !!((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.disableContactRemoval) === null || _b === void 0 ? void 0 : _b.find((v) => v.ssoUsername === contact.ssoUsername));
|
|
219
|
-
return (React.createElement(Label, { key: contact.ssoUsername, variant: "outline", color: "blue", onClick: haltEvent, onClose: () => this.handleRemoveContact(contact), isDisabled: isDisabled }, this.getSelectedLabel(contact)));
|
|
220
|
-
})))),
|
|
215
|
+
React.createElement(TextInputGroupMain, { value: displayValue, onChange: (_, value) => this.handleInputChange(value), onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, placeholder: this.props.placeholder || 'Search contact by name or username', ref: this.inputRef, autoComplete: "off", isExpanded: isOpen, role: "combobox" }, this.props.multiple && selectedContacts.length > 0 && (React.createElement(LabelGroup, { "aria-label": "Selected contacts" }, selectedContacts.map((contact, index) => (React.createElement(Label, { key: contact.ssoUsername, variant: "outline", color: "blue", onClose: () => this.handleRemoveContact(contact) }, this.getSelectedLabel(contact))))))),
|
|
221
216
|
React.createElement(TextInputGroupUtilities, null,
|
|
222
217
|
isLoading && React.createElement(Spinner, { size: "sm" }),
|
|
223
218
|
this.props.clearButton && (searchValue || selectedContacts.length > 0) && (React.createElement(Button, { variant: "plain", icon: React.createElement(TimesCircleIcon, null), onClick: this.handleClear, "aria-label": "Clear input" }))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardLayout.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAuC,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAcvG,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"WizardLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardLayout.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAuC,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAcvG,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,qBAyNzC"}
|
|
@@ -35,6 +35,7 @@ import WizardMain from './WizardMain';
|
|
|
35
35
|
export function WizardLayout(props) {
|
|
36
36
|
const { routeState: { activeSection, isCaseCreate }, } = useContext(RouteContext);
|
|
37
37
|
const { getMetadata } = useMetadata();
|
|
38
|
+
const [isAIChatMode, setIsAIChatMode] = useState(false);
|
|
38
39
|
const { caseCreationError, contactSSOName, caseType, product, caseState, ABTestVariation } = useCaseSelector((state) => ({
|
|
39
40
|
caseState: state,
|
|
40
41
|
caseCreationError: state.caseCreationError,
|
|
@@ -152,9 +153,9 @@ export function WizardLayout(props) {
|
|
|
152
153
|
React.createElement(GlobalTroubleshootEffects, { routeProps: props.routeProps }),
|
|
153
154
|
activeSection !== AppRouteSections.DESCRIBE_IDEA && (React.createElement(PreCaseConfirmationModals, { onModalClose: onModalClose, confirmationModalType: confirmationModalType, onConfirm: () => submitCaseAndNavigate(caseCreationError) })),
|
|
154
155
|
React.createElement(Grid, { style: { height: '100%' } },
|
|
155
|
-
React.createElement(GridItem, { sm: 12, md: 12, lg: 8, xl2: 8 },
|
|
156
|
-
React.createElement(WizardMain, { routeProps: props.routeProps, submitCaseAndNavigate: submitCaseAndNavigate, confirmSupportModal: confirmSupportModal })),
|
|
157
|
-
React.createElement(GridItem, { span: 4, className: "grid-wizard-aside-content" },
|
|
158
|
-
React.createElement(WizardAside, { isAttachmentUploadModalOpen: confirmationModalType === PreCaseConfirmationModalsEnum.NO_ATTACHMENT_MODAL, routeProps: props.routeProps }))),
|
|
156
|
+
React.createElement(GridItem, { sm: 12, md: 12, lg: isAIChatMode ? 12 : 8, xl2: isAIChatMode ? 12 : 8 },
|
|
157
|
+
React.createElement(WizardMain, { routeProps: props.routeProps, submitCaseAndNavigate: submitCaseAndNavigate, confirmSupportModal: confirmSupportModal, isAIChatMode: isAIChatMode, setIsAIChatMode: setIsAIChatMode })),
|
|
158
|
+
!isAIChatMode && (React.createElement(GridItem, { span: 4, className: "grid-wizard-aside-content" },
|
|
159
|
+
React.createElement(WizardAside, { isAttachmentUploadModalOpen: confirmationModalType === PreCaseConfirmationModalsEnum.NO_ATTACHMENT_MODAL, routeProps: props.routeProps })))),
|
|
159
160
|
React.createElement(AlertToastWrapper, { submitCaseAndNavigate: submitCaseAndNavigate, routeProps: props.routeProps })));
|
|
160
161
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { Dispatch, SetStateAction } from 'react';
|
|
2
2
|
import { RouteComponentProps } from 'react-router-dom';
|
|
3
3
|
import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
|
|
4
4
|
interface IProps {
|
|
5
5
|
routeProps: RouteComponentProps<IRouteUrlParams>;
|
|
6
6
|
submitCaseAndNavigate: (isReSubmitting: boolean) => void;
|
|
7
7
|
confirmSupportModal: (hasPreferredSecureSupportAccount: boolean) => void;
|
|
8
|
+
isAIChatMode: boolean;
|
|
9
|
+
setIsAIChatMode: Dispatch<SetStateAction<boolean>>;
|
|
8
10
|
}
|
|
9
11
|
declare function WizardMain(props: IProps): React.JSX.Element;
|
|
10
12
|
export default WizardMain;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WizardMain.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardMain.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"WizardMain.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardMain.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAqD,MAAM,OAAO,CAAC;AAE3G,OAAO,EAAS,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAU9D,OAAO,EAAoB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAyCpF,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;CACtD;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBAwShC;AACD,eAAe,UAAU,CAAC"}
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
1
10
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
11
|
var t = {};
|
|
3
12
|
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) {
|
|
|
9
18
|
}
|
|
10
19
|
return t;
|
|
11
20
|
};
|
|
21
|
+
import { askRHDirectAIResponse, getRHDirectStatusCheck, } from '@ifd-ui/ask-redhat-core';
|
|
12
22
|
import { useWizardContext, Wizard, WizardNav, WizardNavItem, WizardStep } from '@patternfly/react-core';
|
|
13
23
|
import { LoadingIndicator } from '@rh-support/components';
|
|
14
24
|
import isEqual from 'lodash/isEqual';
|
|
15
25
|
import React, { Suspense, useContext, useEffect, useRef, useState } from 'react';
|
|
16
26
|
import { useTranslation } from 'react-i18next';
|
|
17
27
|
import { Route } from 'react-router-dom';
|
|
28
|
+
import { useAIResponseDispatch } from '../../context/AIResponseContext';
|
|
18
29
|
import { useCaseSelector } from '../../context/CaseContext';
|
|
19
30
|
import { RecommendationDispatchContext } from '../../context/RecommendationContext';
|
|
20
31
|
import { RouteContext, RouteDispatchContext } from '../../context/RouteContext';
|
|
21
32
|
import { useWizard } from '../../hooks/useWizard';
|
|
33
|
+
import { receivedAIResponse, receivedAIResponseError, requestAIResponse } from '../../reducers/AIResponseReducer';
|
|
34
|
+
import { appSourceId_ARH, excludedCaseTypesforARH } from '../../reducers/CaseConstNTypes';
|
|
22
35
|
import { RecommendationsConstants } from '../../reducers/RecommendationsReducer';
|
|
23
36
|
import { AppRouteSections } from '../../reducers/RouteConstNTypes';
|
|
24
37
|
import { setActiveSectionChanged, updateisNextBtnClickedToShowValidationError } from '../../reducers/RouteReducer';
|
|
@@ -27,13 +40,42 @@ import SubmitCase from '../SubmitCase/SubmitCase';
|
|
|
27
40
|
import MainSection from './MainSection';
|
|
28
41
|
import NewFeatureModal from './NewFeatureModal';
|
|
29
42
|
import WizardNavigation from './WizardNavigation';
|
|
43
|
+
// Mapping for case type display text in AI questions
|
|
44
|
+
const CASE_TYPE_AI_TEXT_MAP = {
|
|
45
|
+
Other: 'Something',
|
|
46
|
+
};
|
|
47
|
+
const getCaseTypeAIText = (caseType) => {
|
|
48
|
+
return CASE_TYPE_AI_TEXT_MAP[caseType] || caseType;
|
|
49
|
+
};
|
|
50
|
+
const generateCaseTypePrefix = (activeSection, caseType) => {
|
|
51
|
+
if (activeSection === AppRouteSections.TROUBLESHOOT) {
|
|
52
|
+
return '';
|
|
53
|
+
}
|
|
54
|
+
const helpWith = getCaseTypeAIText(caseType);
|
|
55
|
+
return `I want help with ${helpWith}. `;
|
|
56
|
+
};
|
|
57
|
+
//generate AI question based on case details
|
|
58
|
+
const generateAIQuestion = (activeSection, product, version, summary, issue, caseType) => {
|
|
59
|
+
const baseMessage = `My issue is primarily related to ${product} ${version}. I would title my problem: ${summary}. More details are as follows: ${issue}.`;
|
|
60
|
+
const prefix = generateCaseTypePrefix(activeSection, caseType);
|
|
61
|
+
return `${prefix}${baseMessage}`;
|
|
62
|
+
};
|
|
30
63
|
function WizardMain(props) {
|
|
31
64
|
const [showRestFlag, setShowRestFlag] = useState(false);
|
|
65
|
+
const [aiServicesAvailable, setAIServicesAvailable] = useState(false); // default to false until services are confirmed available
|
|
32
66
|
const recommendationDispatch = useContext(RecommendationDispatchContext);
|
|
33
|
-
const { isCreatingCase } = useCaseSelector((state) => ({
|
|
67
|
+
const { isCreatingCase, product, version, summary, issue, caseType } = useCaseSelector((state) => ({
|
|
34
68
|
isCreatingCase: state.isCreatingCase,
|
|
69
|
+
product: state.caseDetails.product,
|
|
70
|
+
version: state.caseDetails.version,
|
|
71
|
+
summary: state.caseDetails.summary,
|
|
72
|
+
issue: state.caseDetails.issue,
|
|
73
|
+
caseType: state.caseDetails.caseType,
|
|
35
74
|
}), isEqual);
|
|
36
|
-
const { routeState: { isCaseCreate }, } = useContext(RouteContext);
|
|
75
|
+
const { routeState: { isCaseCreate, activeSection }, } = useContext(RouteContext);
|
|
76
|
+
const aiResponseDispatch = useAIResponseDispatch();
|
|
77
|
+
const isTroubleshootSection = activeSection === AppRouteSections.TROUBLESHOOT;
|
|
78
|
+
const isSummarizeSection = activeSection === AppRouteSections.SUMMARIZE;
|
|
37
79
|
const [userSeenRecommendations, setUserSeenRecommendations] = useState(false);
|
|
38
80
|
const [userClickedNextonRecommendations, setUserClickedNextonRecommendations] = useState(false);
|
|
39
81
|
const [userScrolledLabel, setUserScrolledLabel] = useState(false);
|
|
@@ -42,6 +84,9 @@ function WizardMain(props) {
|
|
|
42
84
|
const isNextButtonClickedRef = useRef(false);
|
|
43
85
|
const isBackButtonClickedRef = useRef(false);
|
|
44
86
|
const resultsRowRef = useRef(null);
|
|
87
|
+
const handleChatWithAIClick = () => {
|
|
88
|
+
props.setIsAIChatMode(true);
|
|
89
|
+
};
|
|
45
90
|
const { getStepsSequece } = useWizard(props.routeProps, {
|
|
46
91
|
userSeenRecommendationsfn: setUserSeenRecommendations,
|
|
47
92
|
userSeenRecommendationsValue: userSeenRecommendations,
|
|
@@ -49,12 +94,48 @@ function WizardMain(props) {
|
|
|
49
94
|
userClickedNextonRecommendationsValue: userClickedNextonRecommendations,
|
|
50
95
|
resultsRowRef: resultsRowRef,
|
|
51
96
|
userScrolledLabel: userScrolledLabel,
|
|
97
|
+
isAIChatMode: props.isAIChatMode,
|
|
98
|
+
setIsAIChatMode: props.setIsAIChatMode,
|
|
99
|
+
onChatWithAIClick: handleChatWithAIClick,
|
|
100
|
+
aiServicesAvailable: aiServicesAvailable,
|
|
52
101
|
});
|
|
53
102
|
const dispatchToRouteReducer = useContext(RouteDispatchContext);
|
|
54
103
|
const { t } = useTranslation();
|
|
55
104
|
useEffect(() => {
|
|
56
105
|
setActiveSectionChanged(dispatchToRouteReducer, isCaseCreate ? AppRouteSections.GET_SUPPORT : AppRouteSections.TROUBLESHOOT, '');
|
|
57
106
|
}, [isCaseCreate, dispatchToRouteReducer]);
|
|
107
|
+
useEffect(() => {
|
|
108
|
+
if (!activeSection) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
const isRelevantSection = isTroubleshootSection || isSummarizeSection;
|
|
112
|
+
const isAllowedCaseType = !excludedCaseTypesforARH.includes(caseType || '');
|
|
113
|
+
if (!isRelevantSection || !isAllowedCaseType) {
|
|
114
|
+
if (aiServicesAvailable) {
|
|
115
|
+
setAIServicesAvailable(false);
|
|
116
|
+
}
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
// check if ARH services are available
|
|
120
|
+
if (!aiServicesAvailable) {
|
|
121
|
+
const checkAIServices = () => __awaiter(this, void 0, void 0, function* () {
|
|
122
|
+
var _a, _b;
|
|
123
|
+
const config = {
|
|
124
|
+
appSourceId: appSourceId_ARH,
|
|
125
|
+
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 : '',
|
|
126
|
+
};
|
|
127
|
+
try {
|
|
128
|
+
yield getRHDirectStatusCheck(config);
|
|
129
|
+
setAIServicesAvailable(true);
|
|
130
|
+
}
|
|
131
|
+
catch (error) {
|
|
132
|
+
setAIServicesAvailable(false);
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
checkAIServices();
|
|
136
|
+
}
|
|
137
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
138
|
+
}, [activeSection, caseType, isCaseCreate, aiServicesAvailable]);
|
|
58
139
|
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" },
|
|
59
140
|
React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
|
|
60
141
|
React.createElement(SubmitCase, { routeProps: props.routeProps }))));
|
|
@@ -99,26 +180,51 @@ function WizardMain(props) {
|
|
|
99
180
|
isBackButtonClickedRef.current = false;
|
|
100
181
|
setIsNextButtonClicked(false);
|
|
101
182
|
};
|
|
183
|
+
const handleReturnToCaseCreation = () => {
|
|
184
|
+
props.setIsAIChatMode(false);
|
|
185
|
+
};
|
|
102
186
|
const customNav = (isExpanded, steps, activeStep, goToStepByIndex) => (React.createElement(WizardNav, { isExpanded: isExpanded }, steps.map((step) => {
|
|
103
187
|
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) }));
|
|
104
188
|
})));
|
|
105
189
|
const CustomFooter = () => {
|
|
190
|
+
var _a, _b;
|
|
106
191
|
const { activeStep, goToNextStep, goToPrevStep, steps, goToStepByIndex } = useWizardContext(); // Correctly using the context
|
|
192
|
+
const config = {
|
|
193
|
+
appSourceId: appSourceId_ARH,
|
|
194
|
+
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 : '',
|
|
195
|
+
};
|
|
107
196
|
useEffect(() => {
|
|
108
197
|
if (steps.length > 2 && activeStep.index === 2 && isNextButtonClicked) {
|
|
109
198
|
goToStepByIndex(3);
|
|
110
199
|
}
|
|
111
200
|
}, [activeStep, steps.length, goToStepByIndex]);
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
201
|
+
const handleContinueClick = () => __awaiter(this, void 0, void 0, function* () {
|
|
202
|
+
const shouldCallAPI = (isTroubleshootSection || isSummarizeSection) && !excludedCaseTypesforARH.includes(caseType || '');
|
|
203
|
+
// Navigate to next step first
|
|
204
|
+
isNextButtonClickedRef.current = true;
|
|
205
|
+
setIsNextButtonClicked(true);
|
|
206
|
+
goToNextStep();
|
|
207
|
+
focusWizardMainPanel();
|
|
208
|
+
if (shouldCallAPI) {
|
|
209
|
+
const detailedQuestion = generateAIQuestion(activeSection, product, version, summary, issue, caseType || '');
|
|
210
|
+
const useAIServices = aiServicesAvailable;
|
|
211
|
+
if (useAIServices) {
|
|
212
|
+
aiResponseDispatch(requestAIResponse(detailedQuestion));
|
|
213
|
+
try {
|
|
214
|
+
const response = yield askRHDirectAIResponse(detailedQuestion, config);
|
|
215
|
+
aiResponseDispatch(receivedAIResponse(response));
|
|
216
|
+
}
|
|
217
|
+
catch (error) {
|
|
218
|
+
aiResponseDispatch(receivedAIResponseError((error === null || error === void 0 ? void 0 : error.message) || 'Failed to get AI response'));
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
});
|
|
223
|
+
return (React.createElement(WizardNavigation, { routeProps: props.routeProps, onNext: handleContinueClick, onBack: () => {
|
|
118
224
|
isBackButtonClickedRef.current = true;
|
|
119
225
|
goToPrevStep();
|
|
120
226
|
focusWizardMainPanel();
|
|
121
|
-
}, 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 }));
|
|
227
|
+
}, 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 }));
|
|
122
228
|
};
|
|
123
229
|
const steps = getStepsSequece(showRestFlag);
|
|
124
230
|
const wizardSteps = steps.map((step) => {
|
|
@@ -16,6 +16,8 @@ interface IProps {
|
|
|
16
16
|
setUserCanNavigateToTroubleshoot: (value: React.SetStateAction<boolean>) => void;
|
|
17
17
|
resultsRowRef?: any;
|
|
18
18
|
setUserScrolledLabel: (value: React.SetStateAction<boolean>) => void;
|
|
19
|
+
isAIChatMode?: boolean;
|
|
20
|
+
onReturnToCaseCreation?: () => void;
|
|
19
21
|
}
|
|
20
22
|
declare function WizardNavigation(props: IProps): React.JSX.Element;
|
|
21
23
|
declare namespace WizardNavigation {
|
|
@@ -1 +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;
|
|
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;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AAGD,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBA4VtC;kBA5VQ,gBAAgB;;;AA8VzB,eAAe,gBAAgB,CAAC"}
|