@mongodb-js/compass-components 1.14.0 → 1.16.0
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/components/combobox/Combobox.d.ts +0 -1
- package/lib/components/combobox/Combobox.d.ts.map +1 -1
- package/lib/components/combobox/ComboboxGroup.d.ts +0 -1
- package/lib/components/combobox/ComboboxGroup.d.ts.map +1 -1
- package/lib/components/combobox/utils/wrapJSX.d.ts +0 -1
- package/lib/components/combobox/utils/wrapJSX.d.ts.map +1 -1
- package/lib/components/combobox-with-custom-option.d.ts +0 -1
- package/lib/components/combobox-with-custom-option.d.ts.map +1 -1
- package/lib/components/feedback-popover.d.ts.map +1 -1
- package/lib/components/feedback-popover.js +2 -0
- package/lib/components/feedback-popover.js.map +1 -1
- package/lib/components/index-icon.d.ts +0 -1
- package/lib/components/index-icon.d.ts.map +1 -1
- package/lib/components/inline-info-link.d.ts +0 -1
- package/lib/components/inline-info-link.d.ts.map +1 -1
- package/lib/components/leafygreen.d.ts +2 -1
- package/lib/components/leafygreen.d.ts.map +1 -1
- package/lib/components/leafygreen.js +3 -1
- package/lib/components/leafygreen.js.map +1 -1
- package/lib/components/modals/modal-footer-button.d.ts +0 -1
- package/lib/components/modals/modal-footer-button.d.ts.map +1 -1
- package/lib/components/modals/modal.d.ts.map +1 -1
- package/lib/components/modals/modal.js +1 -0
- package/lib/components/modals/modal.js.map +1 -1
- package/lib/components/resizeable-sidebar.d.ts +0 -1
- package/lib/components/resizeable-sidebar.d.ts.map +1 -1
- package/lib/components/signals.d.ts +13 -2
- package/lib/components/signals.d.ts.map +1 -1
- package/lib/components/signals.js +15 -1
- package/lib/components/signals.js.map +1 -1
- package/lib/components/tab-nav-bar.d.ts +3 -3
- package/lib/components/tab-nav-bar.d.ts.map +1 -1
- package/lib/components/workspace-tabs/tab.d.ts +0 -1
- package/lib/components/workspace-tabs/tab.d.ts.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +8 -10
- package/lib/index.js.map +1 -1
- package/package.json +5 -4
- package/lib/components/generative-ai/ai-entry-svg.d.ts +0 -12
- package/lib/components/generative-ai/ai-entry-svg.d.ts.map +0 -1
- package/lib/components/generative-ai/ai-entry-svg.js +0 -57
- package/lib/components/generative-ai/ai-entry-svg.js.map +0 -1
- package/lib/components/generative-ai/ai-experience-entry.d.ts +0 -13
- package/lib/components/generative-ai/ai-experience-entry.d.ts.map +0 -1
- package/lib/components/generative-ai/ai-experience-entry.js +0 -85
- package/lib/components/generative-ai/ai-experience-entry.js.map +0 -1
- package/lib/components/generative-ai/ai-feedback.d.ts +0 -7
- package/lib/components/generative-ai/ai-feedback.d.ts.map +0 -1
- package/lib/components/generative-ai/ai-feedback.js +0 -124
- package/lib/components/generative-ai/ai-feedback.js.map +0 -1
- package/lib/components/generative-ai/ai-guide-cue.d.ts +0 -12
- package/lib/components/generative-ai/ai-guide-cue.d.ts.map +0 -1
- package/lib/components/generative-ai/ai-guide-cue.js +0 -58
- package/lib/components/generative-ai/ai-guide-cue.js.map +0 -1
- package/lib/components/generative-ai/generative-ai-input.d.ts +0 -19
- package/lib/components/generative-ai/generative-ai-input.d.ts.map +0 -1
- package/lib/components/generative-ai/generative-ai-input.js +0 -203
- package/lib/components/generative-ai/generative-ai-input.js.map +0 -1
- package/lib/components/generative-ai/index.d.ts +0 -3
- package/lib/components/generative-ai/index.d.ts.map +0 -1
- package/lib/components/generative-ai/index.js +0 -9
- package/lib/components/generative-ai/index.js.map +0 -1
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.AIEntrySVG = exports.getAIEntrySVGString = exports.DEFAULT_AI_ENTRY_SIZE = exports.aiEntrySVGLightModeStyles = exports.aiEntrySVGDarkModeStyles = exports.aiEntrySVGStyles = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const emotion_1 = require("@leafygreen-ui/emotion");
|
|
9
|
-
const palette_1 = require("@leafygreen-ui/palette");
|
|
10
|
-
const tokens_1 = require("@leafygreen-ui/tokens");
|
|
11
|
-
exports.aiEntrySVGStyles = (0, emotion_1.css)({
|
|
12
|
-
alignSelf: 'center',
|
|
13
|
-
marginLeft: tokens_1.spacing[1],
|
|
14
|
-
path: {
|
|
15
|
-
transition: 'fill 0.16s ease-in',
|
|
16
|
-
},
|
|
17
|
-
});
|
|
18
|
-
exports.aiEntrySVGDarkModeStyles = (0, emotion_1.css)({
|
|
19
|
-
path: {
|
|
20
|
-
fill: palette_1.palette.green.dark1,
|
|
21
|
-
},
|
|
22
|
-
'&:hover': {
|
|
23
|
-
path: {
|
|
24
|
-
fill: palette_1.palette.green.base,
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
});
|
|
28
|
-
exports.aiEntrySVGLightModeStyles = (0, emotion_1.css)({
|
|
29
|
-
path: {
|
|
30
|
-
fill: palette_1.palette.green.dark2,
|
|
31
|
-
},
|
|
32
|
-
'&:hover': {
|
|
33
|
-
path: {
|
|
34
|
-
fill: palette_1.palette.green.dark1,
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
});
|
|
38
|
-
exports.DEFAULT_AI_ENTRY_SIZE = 16;
|
|
39
|
-
const AIEntrySVG = ({ darkMode, size = exports.DEFAULT_AI_ENTRY_SIZE, }) => (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: (0, emotion_1.cx)(exports.aiEntrySVGStyles, darkMode ? exports.aiEntrySVGDarkModeStyles : exports.aiEntrySVGLightModeStyles), xmlns: "http://www.w3.org/2000/svg" },
|
|
40
|
-
react_1.default.createElement("path", { d: "M6.27339 2.89343L5.27506 5.88842C5.17495 6.18877 4.93927 6.42445 4.63892 6.52456L1.64393 7.52289C1.18542 7.67573 1.18542 8.32427 1.64393 8.47711L4.63892 9.47544C4.93927 9.57555 5.17495 9.81123 5.27506 10.1116L6.27339 13.1066C6.42623 13.5651 7.07477 13.5651 7.22761 13.1066L8.22594 10.1116C8.32605 9.81123 8.56173 9.57555 8.86208 9.47544L11.8571 8.47711C12.3156 8.32427 12.3156 7.67573 11.8571 7.52289L8.86208 6.52456C8.56173 6.42445 8.32605 6.18877 8.22594 5.88842L7.22761 2.89343C7.07477 2.43492 6.42623 2.43492 6.27339 2.89343Z", fill: "#00684A" }),
|
|
41
|
-
react_1.default.createElement("path", { d: "M12.5469 1.17194L12.3159 1.8651C12.2158 2.16545 11.9801 2.40113 11.6797 2.50125L10.9866 2.7323C10.7573 2.80872 10.7573 3.13299 10.9866 3.20941L11.6797 3.44046C11.9801 3.54058 12.2158 3.77626 12.3159 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.2551 4.0766C13.3552 3.77626 13.5909 3.54058 13.8912 3.44046L14.5844 3.20941C14.8136 3.13299 14.8136 2.80872 14.5844 2.7323L13.8912 2.50125C13.5909 2.40113 13.3552 2.16545 13.2551 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z", fill: "#00684A" }),
|
|
42
|
-
react_1.default.createElement("path", { d: "M12.5469 11.2302L12.3159 11.9234C12.2158 12.2237 11.9801 12.4594 11.6797 12.5595L10.9866 12.7906C10.7573 12.867 10.7573 13.1913 10.9866 13.2677L11.6797 13.4988C11.9801 13.5989 12.2158 13.8346 12.3159 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.2551 14.1349C13.3552 13.8346 13.5909 13.5989 13.8912 13.4988L14.5844 13.2677C14.8136 13.1913 14.8136 12.867 14.5844 12.7906L13.8912 12.5595C13.5909 12.4594 13.3552 12.2237 13.2551 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z", fill: "#00684A" })));
|
|
43
|
-
exports.AIEntrySVG = AIEntrySVG;
|
|
44
|
-
const getAIEntrySVGString = () => `<svg
|
|
45
|
-
width="16"
|
|
46
|
-
height="16"
|
|
47
|
-
viewBox="0 0 16 16"
|
|
48
|
-
fill="none"
|
|
49
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
50
|
-
>
|
|
51
|
-
<path d="M6.27339 2.89343L5.27506 5.88842C5.17495 6.18877 4.93927 6.42445 4.63892 6.52456L1.64393 7.52289C1.18542 7.67573 1.18542 8.32427 1.64393 8.47711L4.63892 9.47544C4.93927 9.57555 5.17495 9.81123 5.27506 10.1116L6.27339 13.1066C6.42623 13.5651 7.07477 13.5651 7.22761 13.1066L8.22594 10.1116C8.32605 9.81123 8.56173 9.57555 8.86208 9.47544L11.8571 8.47711C12.3156 8.32427 12.3156 7.67573 11.8571 7.52289L8.86208 6.52456C8.56173 6.42445 8.32605 6.18877 8.22594 5.88842L7.22761 2.89343C7.07477 2.43492 6.42623 2.43492 6.27339 2.89343Z" fill="#00684A"/>
|
|
52
|
-
<path d="M12.5469 1.17194L12.3159 1.8651C12.2158 2.16545 11.9801 2.40113 11.6797 2.50125L10.9866 2.7323C10.7573 2.80872 10.7573 3.13299 10.9866 3.20941L11.6797 3.44046C11.9801 3.54058 12.2158 3.77626 12.3159 4.0766L12.5469 4.76977C12.6233 4.99902 12.9476 4.99902 13.024 4.76977L13.2551 4.0766C13.3552 3.77626 13.5909 3.54058 13.8912 3.44046L14.5844 3.20941C14.8136 3.13299 14.8136 2.80872 14.5844 2.7323L13.8912 2.50125C13.5909 2.40113 13.3552 2.16545 13.2551 1.8651L13.024 1.17194C12.9476 0.942687 12.6233 0.942687 12.5469 1.17194Z" fill="#00684A"/>
|
|
53
|
-
<path d="M12.5469 11.2302L12.3159 11.9234C12.2158 12.2237 11.9801 12.4594 11.6797 12.5595L10.9866 12.7906C10.7573 12.867 10.7573 13.1913 10.9866 13.2677L11.6797 13.4988C11.9801 13.5989 12.2158 13.8346 12.3159 14.1349L12.5469 14.8281C12.6233 15.0573 12.9476 15.0573 13.024 14.8281L13.2551 14.1349C13.3552 13.8346 13.5909 13.5989 13.8912 13.4988L14.5844 13.2677C14.8136 13.1913 14.8136 12.867 14.5844 12.7906L13.8912 12.5595C13.5909 12.4594 13.3552 12.2237 13.2551 11.9234L13.024 11.2302C12.9476 11.001 12.6233 11.001 12.5469 11.2302Z" fill="#00684A"/>
|
|
54
|
-
</svg>
|
|
55
|
-
`;
|
|
56
|
-
exports.getAIEntrySVGString = getAIEntrySVGString;
|
|
57
|
-
//# sourceMappingURL=ai-entry-svg.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ai-entry-svg.js","sourceRoot":"","sources":["../../../src/components/generative-ai/ai-entry-svg.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,oDAAiD;AACjD,oDAAiD;AACjD,kDAAgD;AAEnC,QAAA,gBAAgB,GAAG,IAAA,aAAG,EAAC;IAClC,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,gBAAO,CAAC,CAAC,CAAC;IACtB,IAAI,EAAE;QACJ,UAAU,EAAE,oBAAoB;KACjC;CACF,CAAC,CAAC;AAEU,QAAA,wBAAwB,GAAG,IAAA,aAAG,EAAC;IAC1C,IAAI,EAAE;QACJ,IAAI,EAAE,iBAAO,CAAC,KAAK,CAAC,KAAK;KAC1B;IAED,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,IAAI,EAAE,iBAAO,CAAC,KAAK,CAAC,IAAI;SACzB;KACF;CACF,CAAC,CAAC;AAEU,QAAA,yBAAyB,GAAG,IAAA,aAAG,EAAC;IAC3C,IAAI,EAAE;QACJ,IAAI,EAAE,iBAAO,CAAC,KAAK,CAAC,KAAK;KAC1B;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,IAAI,EAAE,iBAAO,CAAC,KAAK,CAAC,KAAK;SAC1B;KACF;CACF,CAAC,CAAC;AAEU,QAAA,qBAAqB,GAAG,EAAE,CAAC;AAGxC,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,IAAI,GAAG,6BAAqB,GAI7B,EAAE,EAAE,CAAC,CACJ,uCACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,IAAA,YAAE,EACX,wBAAgB,EAChB,QAAQ,CAAC,CAAC,CAAC,gCAAwB,CAAC,CAAC,CAAC,iCAAyB,CAChE,EACD,KAAK,EAAC,4BAA4B;IAElC,wCACE,CAAC,EAAC,mhBAAmhB,EACrhB,IAAI,EAAC,SAAS,GACd;IACF,wCACE,CAAC,EAAC,6gBAA6gB,EAC/gB,IAAI,EAAC,SAAS,GACd;IACF,wCACE,CAAC,EAAC,6gBAA6gB,EAC/gB,IAAI,EAAC,SAAS,GACd,CACE,CACP,CAAC;AAgB4B,gCAAU;AAbxC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC;;;;;;;;;;;CAWjC,CAAC;AAEO,kDAAmB"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare function AIExperienceEntry({ 'data-testid': dataTestId, type, onClick, }: {
|
|
3
|
-
['data-testid']?: string;
|
|
4
|
-
type: 'aggregation' | 'query';
|
|
5
|
-
onClick: () => void;
|
|
6
|
-
}): JSX.Element;
|
|
7
|
-
declare function createAIPlaceholderHTMLPlaceholder({ onClickAI, darkMode, placeholderText, }: {
|
|
8
|
-
onClickAI: () => void;
|
|
9
|
-
darkMode?: boolean;
|
|
10
|
-
placeholderText: string;
|
|
11
|
-
}): HTMLElement;
|
|
12
|
-
export { AIExperienceEntry, createAIPlaceholderHTMLPlaceholder };
|
|
13
|
-
//# sourceMappingURL=ai-experience-entry.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ai-experience-entry.d.ts","sourceRoot":"","sources":["../../../src/components/generative-ai/ai-experience-entry.tsx"],"names":[],"mappings":";AA4EA,iBAAS,iBAAiB,CAAC,EACzB,aAAa,EAAE,UAAU,EACzB,IAAI,EACJ,OAAO,GACR,EAAE;IACD,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,aAAa,GAAG,OAAO,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,eAgBA;AAID,iBAAS,kCAAkC,CAAC,EAC1C,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE;IACD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB,GAAG,WAAW,CAmCd;AAED,OAAO,EAAE,iBAAiB,EAAE,kCAAkC,EAAE,CAAC"}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.createAIPlaceholderHTMLPlaceholder = exports.AIExperienceEntry = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const palette_1 = require("@leafygreen-ui/palette");
|
|
9
|
-
const emotion_1 = require("@leafygreen-ui/emotion");
|
|
10
|
-
const tokens_1 = require("@leafygreen-ui/tokens");
|
|
11
|
-
const ai_entry_svg_1 = require("./ai-entry-svg");
|
|
12
|
-
const use_focus_ring_1 = require("../../hooks/use-focus-ring");
|
|
13
|
-
const use_theme_1 = require("../../hooks/use-theme");
|
|
14
|
-
const aiEntryStyles = (0, emotion_1.css)({
|
|
15
|
-
border: 'none',
|
|
16
|
-
outline: 'none',
|
|
17
|
-
boxShadow: 'none',
|
|
18
|
-
padding: `${tokens_1.spacing[1]}px ${tokens_1.spacing[2]}px`,
|
|
19
|
-
margin: `${-tokens_1.spacing[1]}px ${-tokens_1.spacing[2]}px`,
|
|
20
|
-
background: 'none',
|
|
21
|
-
whiteSpace: 'normal',
|
|
22
|
-
position: 'relative',
|
|
23
|
-
textDecoration: 'underline',
|
|
24
|
-
fontWeight: 'bold',
|
|
25
|
-
display: 'inline-flex',
|
|
26
|
-
gap: `${tokens_1.spacing[1]}px`,
|
|
27
|
-
transition: 'color 0.16s ease-in',
|
|
28
|
-
path: {
|
|
29
|
-
transition: 'fill 0.16s ease-in',
|
|
30
|
-
},
|
|
31
|
-
'&:hover': {
|
|
32
|
-
cursor: 'pointer',
|
|
33
|
-
},
|
|
34
|
-
}, use_focus_ring_1.focusRing, ai_entry_svg_1.aiEntrySVGStyles);
|
|
35
|
-
const aiEntryDarkModeStyles = (0, emotion_1.css)({
|
|
36
|
-
color: palette_1.palette.green.dark1,
|
|
37
|
-
'&:hover': {
|
|
38
|
-
path: {
|
|
39
|
-
fill: palette_1.palette.green.base,
|
|
40
|
-
},
|
|
41
|
-
color: palette_1.palette.green.base,
|
|
42
|
-
},
|
|
43
|
-
}, ai_entry_svg_1.aiEntrySVGDarkModeStyles);
|
|
44
|
-
const aiEntryLightModeStyles = (0, emotion_1.css)({
|
|
45
|
-
color: palette_1.palette.green.dark2,
|
|
46
|
-
'&:hover': {
|
|
47
|
-
path: {
|
|
48
|
-
fill: palette_1.palette.green.dark1,
|
|
49
|
-
},
|
|
50
|
-
color: palette_1.palette.green.dark1,
|
|
51
|
-
},
|
|
52
|
-
}, ai_entry_svg_1.aiEntrySVGLightModeStyles);
|
|
53
|
-
function AIExperienceEntry({ 'data-testid': dataTestId, type, onClick, }) {
|
|
54
|
-
const darkMode = (0, use_theme_1.useDarkMode)();
|
|
55
|
-
return (react_1.default.createElement("button", { className: (0, emotion_1.cx)(aiEntryStyles, darkMode ? aiEntryDarkModeStyles : aiEntryLightModeStyles), onClick: onClick, "data-testid": dataTestId },
|
|
56
|
-
"Generate ",
|
|
57
|
-
type,
|
|
58
|
-
react_1.default.createElement(ai_entry_svg_1.AIEntrySVG, { darkMode: darkMode })));
|
|
59
|
-
}
|
|
60
|
-
exports.AIExperienceEntry = AIExperienceEntry;
|
|
61
|
-
function createAIPlaceholderHTMLPlaceholder({ onClickAI, darkMode, placeholderText, }) {
|
|
62
|
-
const containerEl = document.createElement('div');
|
|
63
|
-
const placeholderTextEl = document.createTextNode(`${placeholderText} or `);
|
|
64
|
-
containerEl.appendChild(placeholderTextEl);
|
|
65
|
-
const aiButtonEl = document.createElement('button');
|
|
66
|
-
aiButtonEl.setAttribute('data-testid', 'open-ai-query-entry-button');
|
|
67
|
-
aiButtonEl.style.pointerEvents = 'auto';
|
|
68
|
-
aiButtonEl.addEventListener('mousedown', (e) => {
|
|
69
|
-
e.preventDefault();
|
|
70
|
-
e.stopPropagation();
|
|
71
|
-
});
|
|
72
|
-
aiButtonEl.addEventListener('click', (e) => {
|
|
73
|
-
e.preventDefault();
|
|
74
|
-
e.stopPropagation();
|
|
75
|
-
onClickAI();
|
|
76
|
-
});
|
|
77
|
-
aiButtonEl.className = (0, emotion_1.cx)(aiEntryStyles, darkMode ? aiEntryDarkModeStyles : aiEntryLightModeStyles);
|
|
78
|
-
const aiButtonContent = `<span>Generate query</span>
|
|
79
|
-
${(0, ai_entry_svg_1.getAIEntrySVGString)()}`;
|
|
80
|
-
aiButtonEl.innerHTML = aiButtonContent;
|
|
81
|
-
containerEl.appendChild(aiButtonEl);
|
|
82
|
-
return containerEl;
|
|
83
|
-
}
|
|
84
|
-
exports.createAIPlaceholderHTMLPlaceholder = createAIPlaceholderHTMLPlaceholder;
|
|
85
|
-
//# sourceMappingURL=ai-experience-entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ai-experience-entry.js","sourceRoot":"","sources":["../../../src/components/generative-ai/ai-experience-entry.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
type AIFeedbackProps = {
|
|
3
|
-
onSubmitFeedback: (feedback: 'positive' | 'negative', text: string) => void;
|
|
4
|
-
};
|
|
5
|
-
declare function AIFeedback({ onSubmitFeedback }: AIFeedbackProps): JSX.Element | null;
|
|
6
|
-
export { AIFeedback };
|
|
7
|
-
//# sourceMappingURL=ai-feedback.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ai-feedback.d.ts","sourceRoot":"","sources":["../../../src/components/generative-ai/ai-feedback.tsx"],"names":[],"mappings":";AAsEA,KAAK,eAAe,GAAG;IACrB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,UAAU,GAAG,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAE,gBAAgB,EAAE,EAAE,eAAe,sBA0GxD;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.AIFeedback = void 0;
|
|
27
|
-
const react_1 = __importStar(require("react"));
|
|
28
|
-
const emotion_1 = require("@leafygreen-ui/emotion");
|
|
29
|
-
const palette_1 = require("@leafygreen-ui/palette");
|
|
30
|
-
const tokens_1 = require("@leafygreen-ui/tokens");
|
|
31
|
-
const leafygreen_1 = require("../leafygreen");
|
|
32
|
-
const feedback_popover_1 = require("../feedback-popover");
|
|
33
|
-
const use_theme_1 = require("../../hooks/use-theme");
|
|
34
|
-
const suggestionActionButtonStyles = (0, emotion_1.css)({
|
|
35
|
-
flexShrink: 0,
|
|
36
|
-
display: 'flex',
|
|
37
|
-
gap: tokens_1.spacing[2],
|
|
38
|
-
});
|
|
39
|
-
const fadeOutAnimationTimeMS = 2000;
|
|
40
|
-
const fadeOutWidthAnimation = (0, emotion_1.keyframes)({
|
|
41
|
-
'0%': {
|
|
42
|
-
width: tokens_1.spacing[7],
|
|
43
|
-
},
|
|
44
|
-
'90%': {
|
|
45
|
-
width: tokens_1.spacing[7],
|
|
46
|
-
},
|
|
47
|
-
'100%': {
|
|
48
|
-
width: 0,
|
|
49
|
-
},
|
|
50
|
-
});
|
|
51
|
-
const feedbackSubmittedStyles = (0, emotion_1.css)({
|
|
52
|
-
overflow: 'hidden',
|
|
53
|
-
animation: `${fadeOutWidthAnimation} ${fadeOutAnimationTimeMS}ms ease-in`,
|
|
54
|
-
width: 0,
|
|
55
|
-
display: 'flex',
|
|
56
|
-
alignItems: 'center',
|
|
57
|
-
justifyContent: 'space-around',
|
|
58
|
-
});
|
|
59
|
-
const submittedDarkStyles = (0, emotion_1.css)({
|
|
60
|
-
color: palette_1.palette.green.light1,
|
|
61
|
-
});
|
|
62
|
-
const submittedLightStyles = (0, emotion_1.css)({
|
|
63
|
-
color: palette_1.palette.green.dark1,
|
|
64
|
-
});
|
|
65
|
-
const feedbackButtonLightStyles = (0, emotion_1.css)({
|
|
66
|
-
fill: palette_1.palette.gray.dark1,
|
|
67
|
-
});
|
|
68
|
-
const feedbackButtonDarkStyles = (0, emotion_1.css)({
|
|
69
|
-
fill: palette_1.palette.gray.light1,
|
|
70
|
-
});
|
|
71
|
-
const buttonActivePositiveStyles = (0, emotion_1.css)({
|
|
72
|
-
backgroundColor: palette_1.palette.green.light3,
|
|
73
|
-
borderColor: palette_1.palette.green.dark1,
|
|
74
|
-
fill: palette_1.palette.green.dark1,
|
|
75
|
-
});
|
|
76
|
-
const buttonActiveNegativeStyles = (0, emotion_1.css)({
|
|
77
|
-
backgroundColor: palette_1.palette.red.light3,
|
|
78
|
-
borderColor: palette_1.palette.red.dark2,
|
|
79
|
-
fill: palette_1.palette.red.dark2,
|
|
80
|
-
});
|
|
81
|
-
function AIFeedback({ onSubmitFeedback }) {
|
|
82
|
-
const darkMode = (0, use_theme_1.useDarkMode)();
|
|
83
|
-
const feedbackPositiveButtonRef = (0, react_1.useRef)(null);
|
|
84
|
-
const feedbackNegativeButtonRef = (0, react_1.useRef)(null);
|
|
85
|
-
const [chosenFeedbackOption, setChosenFeedbackOption] = (0, react_1.useState)('none');
|
|
86
|
-
const [didSubmit, setDidSubmit] = (0, react_1.useState)(false);
|
|
87
|
-
const [enableShowFeedbackSuccess, setEnableShowFeedbackSuccess] = (0, react_1.useState)(true);
|
|
88
|
-
const _onSubmitFeedback = (0, react_1.useCallback)((text) => {
|
|
89
|
-
if (chosenFeedbackOption === 'none') {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
onSubmitFeedback(chosenFeedbackOption, text);
|
|
93
|
-
setDidSubmit(true);
|
|
94
|
-
}, [chosenFeedbackOption, onSubmitFeedback, setDidSubmit]);
|
|
95
|
-
(0, react_1.useEffect)(() => {
|
|
96
|
-
if (didSubmit) {
|
|
97
|
-
const timeoutId = setTimeout(() => {
|
|
98
|
-
setEnableShowFeedbackSuccess(false);
|
|
99
|
-
}, fadeOutAnimationTimeMS);
|
|
100
|
-
return () => {
|
|
101
|
-
clearTimeout(timeoutId);
|
|
102
|
-
};
|
|
103
|
-
}
|
|
104
|
-
}, [didSubmit]);
|
|
105
|
-
if (didSubmit) {
|
|
106
|
-
if (!enableShowFeedbackSuccess) {
|
|
107
|
-
return null;
|
|
108
|
-
}
|
|
109
|
-
return (react_1.default.createElement("div", { className: feedbackSubmittedStyles },
|
|
110
|
-
react_1.default.createElement(leafygreen_1.Disclaimer, { className: darkMode ? submittedDarkStyles : submittedLightStyles }, "Success!")));
|
|
111
|
-
}
|
|
112
|
-
return (react_1.default.createElement("div", { className: suggestionActionButtonStyles },
|
|
113
|
-
react_1.default.createElement(leafygreen_1.Button, { className: (0, emotion_1.cx)(darkMode ? feedbackButtonDarkStyles : feedbackButtonLightStyles, chosenFeedbackOption === 'positive' && buttonActivePositiveStyles), onClick: () => setChosenFeedbackOption('positive'), size: "small", "data-testid": "ai-feedback-thumbs-up", ref: feedbackPositiveButtonRef, "aria-label": "Submit positive feedback" },
|
|
114
|
-
react_1.default.createElement(leafygreen_1.Icon, { glyph: "ThumbsUp" })),
|
|
115
|
-
react_1.default.createElement(leafygreen_1.Button, { className: (0, emotion_1.cx)(darkMode ? feedbackButtonDarkStyles : feedbackButtonLightStyles, chosenFeedbackOption === 'negative' && buttonActiveNegativeStyles), onClick: () => setChosenFeedbackOption('negative'), size: "small", ref: feedbackNegativeButtonRef, "aria-label": "Submit negative feedback" },
|
|
116
|
-
react_1.default.createElement(leafygreen_1.Icon, { glyph: "ThumbsDown" })),
|
|
117
|
-
chosenFeedbackOption !== 'none' && (react_1.default.createElement(feedback_popover_1.FeedbackPopover, { refEl: chosenFeedbackOption === 'positive'
|
|
118
|
-
? feedbackPositiveButtonRef
|
|
119
|
-
: feedbackNegativeButtonRef, open: true, setOpen: () => setChosenFeedbackOption('none'), onSubmitFeedback: _onSubmitFeedback, label: "Provide Feedback", placeholder: chosenFeedbackOption === 'positive'
|
|
120
|
-
? 'What do you like about the generated query?'
|
|
121
|
-
: 'What could be better about the generated query?' }))));
|
|
122
|
-
}
|
|
123
|
-
exports.AIFeedback = AIFeedback;
|
|
124
|
-
//# sourceMappingURL=ai-feedback.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ai-feedback.js","sourceRoot":"","sources":["../../../src/components/generative-ai/ai-feedback.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { GuideCue as LGGuideCue } from '@leafygreen-ui/guide-cue';
|
|
3
|
-
type LGGuideCueProps = React.ComponentProps<typeof LGGuideCue>;
|
|
4
|
-
export type AIGuideCueProps = Omit<LGGuideCueProps, 'currentStep' | 'numberOfSteps' | 'children' | 'title' | 'open' | 'setOpen'> & {
|
|
5
|
-
title?: string;
|
|
6
|
-
description?: string;
|
|
7
|
-
showGuideCue: boolean;
|
|
8
|
-
onCloseGuideCue(): void;
|
|
9
|
-
};
|
|
10
|
-
export declare const AIGuideCue: ({ title, description, refEl, showGuideCue, onCloseGuideCue, }: AIGuideCueProps) => JSX.Element;
|
|
11
|
-
export {};
|
|
12
|
-
//# sourceMappingURL=ai-guide-cue.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ai-guide-cue.d.ts","sourceRoot":"","sources":["../../../src/components/generative-ai/ai-guide-cue.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAIlE,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAG/D,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,eAAe,EACf,aAAa,GAAG,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAC5E,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,IAAI,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU,kEAMpB,eAAe,gBAoDjB,CAAC"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.AIGuideCue = void 0;
|
|
27
|
-
const react_1 = __importStar(require("react"));
|
|
28
|
-
const guide_cue_1 = require("@leafygreen-ui/guide-cue");
|
|
29
|
-
const tokens_1 = require("@leafygreen-ui/tokens");
|
|
30
|
-
const utils_1 = require("@react-aria/utils");
|
|
31
|
-
const AIGuideCue = ({ title = '', description, refEl, showGuideCue, onCloseGuideCue, }) => {
|
|
32
|
-
const aiGuideCuePopoverId = (0, utils_1.useId)();
|
|
33
|
-
(0, react_1.useEffect)(() => {
|
|
34
|
-
if (!showGuideCue) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
const listener = (event) => {
|
|
38
|
-
const popover = document.querySelector(`[data-popoverid="ai-guide-cue-description-popover-${aiGuideCuePopoverId}"]`);
|
|
39
|
-
if (!popover) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
if (event.composedPath().includes(popover) ||
|
|
43
|
-
event.composedPath().includes(refEl.current)) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
onCloseGuideCue();
|
|
47
|
-
};
|
|
48
|
-
document.addEventListener('mousedown', listener);
|
|
49
|
-
return () => {
|
|
50
|
-
document.removeEventListener('mousedown', listener);
|
|
51
|
-
};
|
|
52
|
-
}, [aiGuideCuePopoverId, onCloseGuideCue, refEl, showGuideCue]);
|
|
53
|
-
return (react_1.default.createElement(guide_cue_1.GuideCue, { spacing: tokens_1.spacing[3], open: showGuideCue, setOpen: () => {
|
|
54
|
-
}, refEl: refEl, numberOfSteps: 1, currentStep: 1, onPrimaryButtonClick: onCloseGuideCue, onDismiss: onCloseGuideCue, title: title, "data-popoverid": `ai-guide-cue-description-popover-${aiGuideCuePopoverId}`, buttonText: "Got it" },
|
|
55
|
-
react_1.default.createElement("span", { "data-testid": "ai-guide-cue-description-span" }, description)));
|
|
56
|
-
};
|
|
57
|
-
exports.AIGuideCue = AIGuideCue;
|
|
58
|
-
//# sourceMappingURL=ai-guide-cue.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ai-guide-cue.js","sourceRoot":"","sources":["../../../src/components/generative-ai/ai-guide-cue.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyC;AACzC,wDAAkE;AAClE,kDAAgD;AAChD,6CAA0C;AAenC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,GAAG,EAAE,EACV,WAAW,EACX,KAAK,EACL,YAAY,EACZ,eAAe,GACC,EAAE,EAAE;IACpB,MAAM,mBAAmB,GAAG,IAAA,aAAK,GAAE,CAAC;IAEpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CACpC,qDAAqD,mBAAmB,IAAI,CAC7E,CAAC;YACF,IAAI,CAAC,OAAO,EAAE;gBACZ,OAAO;aACR;YAGD,IACE,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;gBACtC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAQ,CAAC,EAC7C;gBACA,OAAO;aACR;YAED,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACtD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,EAAE,eAAe,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhE,OAAO,CACL,8BAAC,oBAAU,IACT,OAAO,EAAE,gBAAO,CAAC,CAAC,CAAC,EACnB,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,GAAG,EAAE;QAEd,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,CAAC,EAChB,WAAW,EAAE,CAAC,EACd,oBAAoB,EAAE,eAAe,EACrC,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,oBACI,oCAAoC,mBAAmB,EAAE,EACzE,UAAU,EAAC,QAAQ;QAEnB,uDAAkB,+BAA+B,IAAE,WAAW,CAAQ,CAC3D,CACd,CAAC;AACJ,CAAC,CAAC;AA1DW,QAAA,UAAU,cA0DrB"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
type GenerativeAIInputProps = {
|
|
3
|
-
aiPromptText: string;
|
|
4
|
-
didSucceed: boolean;
|
|
5
|
-
errorMessage?: string;
|
|
6
|
-
isFetching?: boolean;
|
|
7
|
-
placeholder?: string;
|
|
8
|
-
show: boolean;
|
|
9
|
-
isAggregationGeneratedFromQuery?: boolean;
|
|
10
|
-
onResetIsAggregationGeneratedFromQuery?: () => void;
|
|
11
|
-
onCancelRequest: () => void;
|
|
12
|
-
onChangeAIPromptText: (text: string) => void;
|
|
13
|
-
onClose: () => void;
|
|
14
|
-
onSubmitText: (text: string) => void;
|
|
15
|
-
onSubmitFeedback?: (feedback: 'positive' | 'negative', feedbackText: string) => void;
|
|
16
|
-
};
|
|
17
|
-
declare function GenerativeAIInput({ aiPromptText, didSucceed, errorMessage, isFetching, placeholder, show, onCancelRequest, onClose, onChangeAIPromptText, onSubmitFeedback, onSubmitText, isAggregationGeneratedFromQuery, onResetIsAggregationGeneratedFromQuery, }: GenerativeAIInputProps): JSX.Element | null;
|
|
18
|
-
export { GenerativeAIInput };
|
|
19
|
-
//# sourceMappingURL=generative-ai-input.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"generative-ai-input.d.ts","sourceRoot":"","sources":["../../../src/components/generative-ai/generative-ai-input.tsx"],"names":[],"mappings":";AAyJA,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C,sCAAsC,CAAC,EAAE,MAAM,IAAI,CAAC;IACpD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,oBAAoB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,CAAC,EAAE,CACjB,QAAQ,EAAE,UAAU,GAAG,UAAU,EACjC,YAAY,EAAE,MAAM,KACjB,IAAI,CAAC;CACX,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,UAAU,EACV,WAA6F,EAC7F,IAAI,EACJ,eAAe,EACf,OAAO,EACP,oBAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,+BAAuC,EACvC,sCAAsC,GACvC,EAAE,sBAAsB,sBAqKxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.GenerativeAIInput = void 0;
|
|
27
|
-
const react_1 = __importStar(require("react"));
|
|
28
|
-
const emotion_1 = require("@leafygreen-ui/emotion");
|
|
29
|
-
const palette_1 = require("@leafygreen-ui/palette");
|
|
30
|
-
const tokens_1 = require("@leafygreen-ui/tokens");
|
|
31
|
-
const leafygreen_1 = require("../leafygreen");
|
|
32
|
-
const use_theme_1 = require("../../hooks/use-theme");
|
|
33
|
-
const error_warning_summary_1 = require("../error-warning-summary");
|
|
34
|
-
const loader_1 = require("../loader");
|
|
35
|
-
const ai_entry_svg_1 = require("./ai-entry-svg");
|
|
36
|
-
const ai_feedback_1 = require("./ai-feedback");
|
|
37
|
-
const ai_guide_cue_1 = require("./ai-guide-cue");
|
|
38
|
-
const use_focus_ring_1 = require("../../hooks/use-focus-ring");
|
|
39
|
-
const containerStyles = (0, emotion_1.css)({
|
|
40
|
-
display: 'flex',
|
|
41
|
-
flexDirection: 'column',
|
|
42
|
-
gap: tokens_1.spacing[1],
|
|
43
|
-
});
|
|
44
|
-
const inputBarContainerStyles = (0, emotion_1.css)({
|
|
45
|
-
paddingTop: tokens_1.spacing[2],
|
|
46
|
-
gap: tokens_1.spacing[2],
|
|
47
|
-
flexGrow: 1,
|
|
48
|
-
display: 'flex',
|
|
49
|
-
});
|
|
50
|
-
const inputContainerStyles = (0, emotion_1.css)({
|
|
51
|
-
display: 'flex',
|
|
52
|
-
flexGrow: 1,
|
|
53
|
-
position: 'relative',
|
|
54
|
-
});
|
|
55
|
-
const textInputStyles = (0, emotion_1.css)({
|
|
56
|
-
flexGrow: 1,
|
|
57
|
-
input: {
|
|
58
|
-
paddingLeft: tokens_1.spacing[5],
|
|
59
|
-
paddingRight: tokens_1.spacing[6] * 2 + tokens_1.spacing[2],
|
|
60
|
-
},
|
|
61
|
-
});
|
|
62
|
-
const errorSummaryContainer = (0, emotion_1.css)({
|
|
63
|
-
marginTop: tokens_1.spacing[1],
|
|
64
|
-
});
|
|
65
|
-
const floatingButtonsContainerStyles = (0, emotion_1.css)({
|
|
66
|
-
position: 'absolute',
|
|
67
|
-
right: tokens_1.spacing[1],
|
|
68
|
-
display: 'flex',
|
|
69
|
-
gap: tokens_1.spacing[2],
|
|
70
|
-
alignItems: 'center',
|
|
71
|
-
height: tokens_1.spacing[4] + tokens_1.spacing[1],
|
|
72
|
-
});
|
|
73
|
-
const successIndicatorDarkModeStyles = (0, emotion_1.css)({
|
|
74
|
-
color: palette_1.palette.gray.dark3,
|
|
75
|
-
backgroundColor: palette_1.palette.green.base,
|
|
76
|
-
borderRadius: '50%',
|
|
77
|
-
});
|
|
78
|
-
const successIndicatorLightModeStyles = (0, emotion_1.css)({
|
|
79
|
-
color: palette_1.palette.white,
|
|
80
|
-
backgroundColor: palette_1.palette.green.dark1,
|
|
81
|
-
borderRadius: '50%',
|
|
82
|
-
});
|
|
83
|
-
const generateButtonStyles = (0, emotion_1.css)({
|
|
84
|
-
border: 'none',
|
|
85
|
-
height: tokens_1.spacing[4] - tokens_1.spacing[1],
|
|
86
|
-
display: 'flex',
|
|
87
|
-
fontSize: '12px',
|
|
88
|
-
borderRadius: tokens_1.spacing[1],
|
|
89
|
-
});
|
|
90
|
-
const generateButtonLightModeStyles = (0, emotion_1.css)({
|
|
91
|
-
backgroundColor: palette_1.palette.gray.light2,
|
|
92
|
-
});
|
|
93
|
-
const highlightSize = 14;
|
|
94
|
-
const buttonHighlightStyles = (0, emotion_1.css)({
|
|
95
|
-
height: `${highlightSize}px`,
|
|
96
|
-
lineHeight: `${highlightSize}px`,
|
|
97
|
-
padding: `0px ${tokens_1.spacing[1]}px`,
|
|
98
|
-
borderRadius: '2px',
|
|
99
|
-
});
|
|
100
|
-
const buttonHighlightDarkModeStyles = (0, emotion_1.css)({
|
|
101
|
-
backgroundColor: palette_1.palette.gray.dark1,
|
|
102
|
-
color: palette_1.palette.gray.light1,
|
|
103
|
-
});
|
|
104
|
-
const buttonHighlightLightModeStyles = (0, emotion_1.css)({
|
|
105
|
-
backgroundColor: palette_1.palette.gray.light1,
|
|
106
|
-
color: palette_1.palette.gray.dark1,
|
|
107
|
-
});
|
|
108
|
-
const loaderContainerStyles = (0, emotion_1.css)({
|
|
109
|
-
padding: tokens_1.spacing[1],
|
|
110
|
-
display: 'inline-flex',
|
|
111
|
-
width: ai_entry_svg_1.DEFAULT_AI_ENTRY_SIZE + tokens_1.spacing[2],
|
|
112
|
-
justifyContent: 'space-around',
|
|
113
|
-
});
|
|
114
|
-
const buttonResetStyles = (0, emotion_1.css)({
|
|
115
|
-
margin: 0,
|
|
116
|
-
padding: 0,
|
|
117
|
-
border: 'none',
|
|
118
|
-
background: 'none',
|
|
119
|
-
cursor: 'pointer',
|
|
120
|
-
});
|
|
121
|
-
const closeAIButtonStyles = (0, emotion_1.css)(buttonResetStyles, use_focus_ring_1.focusRing, {
|
|
122
|
-
height: tokens_1.spacing[4] + tokens_1.spacing[1],
|
|
123
|
-
display: 'flex',
|
|
124
|
-
alignItems: 'center',
|
|
125
|
-
padding: tokens_1.spacing[1],
|
|
126
|
-
position: 'absolute',
|
|
127
|
-
});
|
|
128
|
-
const aiEntryContainerStyles = (0, emotion_1.css)({
|
|
129
|
-
display: 'flex',
|
|
130
|
-
});
|
|
131
|
-
const closeText = 'Close AI Helper';
|
|
132
|
-
const SubmitArrowSVG = ({ darkMode }) => (react_1.default.createElement("svg", { width: highlightSize, height: highlightSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
133
|
-
react_1.default.createElement("rect", { width: "14", height: "14", rx: "2", fill: darkMode ? palette_1.palette.gray.dark1 : palette_1.palette.gray.light1 }),
|
|
134
|
-
react_1.default.createElement("path", { d: "M5.24984 6.41668L2.9165 8.75001M2.9165 8.75001L5.24984 11.0833M2.9165 8.75001H9.33317C9.95201 8.75001 10.5455 8.50418 10.9831 8.06659C11.4207 7.62901 11.6665 7.03552 11.6665 6.41668C11.6665 5.79784 11.4207 5.20435 10.9831 4.76676C10.5455 4.32918 9.95201 4.08334 9.33317 4.08334H8.74984", stroke: darkMode ? palette_1.palette.gray.light1 : palette_1.palette.gray.dark1, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
|
|
135
|
-
function GenerativeAIInput({ aiPromptText, didSucceed, errorMessage, isFetching, placeholder = 'Tell Compass what documents to find (e.g. which movies were released in 2000)', show, onCancelRequest, onClose, onChangeAIPromptText, onSubmitFeedback, onSubmitText, isAggregationGeneratedFromQuery = false, onResetIsAggregationGeneratedFromQuery, }) {
|
|
136
|
-
const promptTextInputRef = (0, react_1.useRef)(null);
|
|
137
|
-
const [showSuccess, setShowSuccess] = (0, react_1.useState)(false);
|
|
138
|
-
const darkMode = (0, use_theme_1.useDarkMode)();
|
|
139
|
-
const guideCueRef = (0, react_1.useRef)(null);
|
|
140
|
-
const onTextInputKeyDown = (0, react_1.useCallback)((evt) => {
|
|
141
|
-
if (evt.key === 'Enter') {
|
|
142
|
-
evt.preventDefault();
|
|
143
|
-
if (!aiPromptText) {
|
|
144
|
-
return;
|
|
145
|
-
}
|
|
146
|
-
onSubmitText(aiPromptText);
|
|
147
|
-
}
|
|
148
|
-
else if (evt.key === 'Escape') {
|
|
149
|
-
isFetching ? onCancelRequest() : onClose();
|
|
150
|
-
}
|
|
151
|
-
}, [aiPromptText, onClose, onSubmitText, isFetching, onCancelRequest]);
|
|
152
|
-
(0, react_1.useEffect)(() => {
|
|
153
|
-
if (didSucceed) {
|
|
154
|
-
setShowSuccess(true);
|
|
155
|
-
const timeoutId = setTimeout(() => {
|
|
156
|
-
setShowSuccess(false);
|
|
157
|
-
}, 1500);
|
|
158
|
-
return () => clearTimeout(timeoutId);
|
|
159
|
-
}
|
|
160
|
-
}, [didSucceed]);
|
|
161
|
-
(0, react_1.useEffect)(() => {
|
|
162
|
-
if (show) {
|
|
163
|
-
promptTextInputRef.current?.focus();
|
|
164
|
-
}
|
|
165
|
-
}, [show]);
|
|
166
|
-
const onCancelRequestRef = (0, react_1.useRef)(onCancelRequest);
|
|
167
|
-
onCancelRequestRef.current = onCancelRequest;
|
|
168
|
-
(0, react_1.useEffect)(() => {
|
|
169
|
-
return () => onCancelRequestRef.current?.();
|
|
170
|
-
}, []);
|
|
171
|
-
if (!show) {
|
|
172
|
-
return null;
|
|
173
|
-
}
|
|
174
|
-
return (react_1.default.createElement("div", { className: containerStyles },
|
|
175
|
-
react_1.default.createElement("div", { className: inputBarContainerStyles },
|
|
176
|
-
react_1.default.createElement("div", { className: inputContainerStyles },
|
|
177
|
-
react_1.default.createElement(leafygreen_1.TextInput, { className: textInputStyles, ref: promptTextInputRef, sizeVariant: "small", "data-testid": "ai-user-text-input", "aria-label": "Enter a plain text query that the AI will translate into MongoDB query language.", placeholder: placeholder, value: aiPromptText, onChange: (evt) => onChangeAIPromptText(evt.currentTarget.value), onKeyDown: onTextInputKeyDown }),
|
|
178
|
-
react_1.default.createElement("div", { className: floatingButtonsContainerStyles },
|
|
179
|
-
isFetching ? (react_1.default.createElement("div", { className: loaderContainerStyles },
|
|
180
|
-
react_1.default.createElement(loader_1.SpinLoader, null))) : showSuccess ? (react_1.default.createElement("div", { className: loaderContainerStyles },
|
|
181
|
-
react_1.default.createElement(leafygreen_1.Icon, { className: darkMode
|
|
182
|
-
? successIndicatorDarkModeStyles
|
|
183
|
-
: successIndicatorLightModeStyles, glyph: "CheckmarkWithCircle" }))) : (react_1.default.createElement(react_1.default.Fragment, null, aiPromptText && (react_1.default.createElement(leafygreen_1.IconButton, { "aria-label": "Clear prompt", onClick: () => onChangeAIPromptText(''), "data-testid": "ai-text-clear-prompt" },
|
|
184
|
-
react_1.default.createElement(leafygreen_1.Icon, { glyph: "X" }))))),
|
|
185
|
-
react_1.default.createElement(leafygreen_1.Button, { size: "small", className: (0, emotion_1.cx)(generateButtonStyles, !darkMode && generateButtonLightModeStyles), disabled: !aiPromptText, "data-testid": "ai-generate-button", onClick: () => isFetching ? onCancelRequest() : onSubmitText(aiPromptText) }, isFetching ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
186
|
-
react_1.default.createElement("div", null, "Cancel"),
|
|
187
|
-
react_1.default.createElement("span", { className: (0, emotion_1.cx)(buttonHighlightStyles, darkMode
|
|
188
|
-
? buttonHighlightDarkModeStyles
|
|
189
|
-
: buttonHighlightLightModeStyles) }, "esc"))) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
190
|
-
react_1.default.createElement("div", null, "Generate"),
|
|
191
|
-
react_1.default.createElement(SubmitArrowSVG, { darkMode: darkMode }))))),
|
|
192
|
-
react_1.default.createElement("button", { className: closeAIButtonStyles, "data-testid": "close-ai-button", "aria-label": closeText, title: closeText, onClick: () => onClose() },
|
|
193
|
-
react_1.default.createElement(ai_guide_cue_1.AIGuideCue, { showGuideCue: isAggregationGeneratedFromQuery, onCloseGuideCue: () => {
|
|
194
|
-
onResetIsAggregationGeneratedFromQuery?.();
|
|
195
|
-
}, refEl: guideCueRef, title: "Aggregation generated", description: "Your query requires stages from MongoDB's aggregation framework. Continue to work on it in our Aggregation Pipeline Builder" }),
|
|
196
|
-
react_1.default.createElement("span", { className: aiEntryContainerStyles, ref: guideCueRef },
|
|
197
|
-
react_1.default.createElement(ai_entry_svg_1.AIEntrySVG, { darkMode: darkMode })))),
|
|
198
|
-
didSucceed && onSubmitFeedback && (react_1.default.createElement(ai_feedback_1.AIFeedback, { onSubmitFeedback: onSubmitFeedback }))),
|
|
199
|
-
errorMessage && (react_1.default.createElement("div", { className: errorSummaryContainer },
|
|
200
|
-
react_1.default.createElement(error_warning_summary_1.ErrorSummary, { "data-testid": "ai-error-msg", errors: errorMessage }, errorMessage)))));
|
|
201
|
-
}
|
|
202
|
-
exports.GenerativeAIInput = GenerativeAIInput;
|
|
203
|
-
//# sourceMappingURL=generative-ai-input.js.map
|