@redocly/theme
Version:
Shared UI components lib
143 lines (140 loc) • 6.1 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AIAssistantButton = AIAssistantButton;
const React = __importStar(require("react"));
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const Button_1 = require("../../components/Button/Button");
const SearchDialog_1 = require("../../components/Search/SearchDialog");
const hooks_1 = require("../../core/hooks");
const ChatIcon_1 = require("../../icons/ChatIcon/ChatIcon");
const AiStarsGradientIcon_1 = require("../../icons/AiStarsGradientIcon/AiStarsGradientIcon");
const RedoclyIcon_1 = require("../../icons/RedoclyIcon/RedoclyIcon");
const contexts_1 = require("../../core/contexts");
const defaultConfig = {
hide: false,
inputType: 'button',
inputIcon: 'sparkles',
};
const getIcon = (iconType, inputType = 'button') => {
const iconSize = inputType === 'icon'
? 'var(--ai-assistant-button-icon-icon-size)'
: 'var(--ai-assistant-button-text-icon-size)';
const redoclyIcon = (React.createElement(RedoclyIcon_1.RedoclyIcon, { size: iconSize, color: "var(--ai-assistant-button-redocly-icon-color)" }));
const sparklesIcon = (React.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { size: iconSize, color: "var(--search-ai-button-icon-color)" }));
const chatIcon = React.createElement(ChatIcon_1.ChatIcon, { size: iconSize });
switch (iconType) {
case 'chat':
return chatIcon;
case 'sparkles':
return sparklesIcon;
case 'redocly':
return redoclyIcon;
default:
return redoclyIcon;
}
};
function AIAssistantButton() {
var _a, _b;
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
const themeConfig = (0, hooks_1.useThemeConfig)();
const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const telemetry = useTelemetry();
const buttonConfig = Object.assign(Object.assign({}, defaultConfig), ((_b = (_a = themeConfig.aiAssistant) === null || _a === void 0 ? void 0 : _a.trigger) !== null && _b !== void 0 ? _b : {}));
const { hide, inputIcon, inputType } = buttonConfig;
if (hide) {
return null;
}
const icon = getIcon(inputIcon, inputType);
const text = translate('aiAssistant.trigger', 'Ask AI');
const handleOpen = () => {
setIsOpen(true);
telemetry.sendSearchAiOpenedMessage([
{
object: 'search',
method: 'ai_trigger_button',
},
]);
};
const handleClose = () => {
setIsOpen(false);
};
return (React.createElement(contexts_1.SearchSessionProvider, null,
React.createElement(StyledAIAssistantButton, { variant: "outlined", size: "medium", "$inputType": inputType, onClick: handleOpen, "aria-label": `AI Assistant button - ${inputIcon}`, "data-component-name": "Buttons/AIAssistantButton" },
icon,
inputType === 'button' && text),
isOpen && React.createElement(SearchDialog_1.SearchDialog, { onClose: handleClose, initialMode: "ai-dialog" })));
}
const StyledAIAssistantButton = (0, styled_components_1.default)(Button_1.Button) `
position: fixed;
bottom: var(--ai-assistant-button-bottom);
right: calc(var(--ai-assistant-button-right) + var(--modal-scrollbar-width, 0px));
${({ $inputType }) => $inputType === 'icon'
? `
border-radius: var(--ai-assistant-button-border-radius-icon);
width: var(--ai-assistant-button-icon-size);
height: var(--ai-assistant-button-icon-size);
`
: `
border-radius: var(--ai-assistant-button-border-radius-text);
padding: var(--ai-assistant-button-text-padding);
height: var(--ai-assistant-button-text-height);
`}
min-width: var(--ai-assistant-button-min-width);
font-size: var(--ai-assistant-button-font-size);
font-weight: var(--ai-assistant-button-font-weight);
box-shadow: var(--bg-raised-shadow);
z-index: var(--ai-assistant-button-z-index);
display: flex;
align-items: center;
justify-content: center;
gap: var(--ai-assistant-button-gap);
background-color: var(--ai-assistant-button-bg-color) !important;
transition: var(--ai-assistant-button-transition);
&:hover {
box-shadow: var(--ai-assistant-button-shadow-hover);
transform: var(--ai-assistant-button-transform-hover);
}
&:active {
transform: var(--bg-raised-shadow);
box-shadow: var(--ai-assistant-button-shadow-active);
}
`;
//# sourceMappingURL=AIAssistantButton.js.map