@redocly/theme
Version:
Shared UI components lib
147 lines (144 loc) • 6.51 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchAiMessage = SearchAiMessage;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Link_1 = require("../../components/Link/Link");
const Tag_1 = require("../../components/Tag/Tag");
const constants_1 = require("../../core/constants");
const hooks_1 = require("../../core/hooks");
const Markdown_1 = require("../../components/Markdown/Markdown");
const DocumentIcon_1 = require("../../icons/DocumentIcon/DocumentIcon");
const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
function SearchAiMessage({ role, content, isThinking, resources, className, }) {
const { useMarkdownText, useTranslate } = (0, hooks_1.useThemeHooks)();
const markDownContent = useMarkdownText(content || '');
const { translate } = useTranslate();
return (react_1.default.createElement(SearchAiMessageWrapper, { "data-component-name": "Search/SearchAiMessage", role: role, className: className, "data-testid": "search-ai-message" },
role === constants_1.AiSearchConversationRole.ASSISTANT && (react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", color: "var(--search-ai-icon-color)", margin: "0 var(--spacing-xs) 0 0" })),
react_1.default.createElement(MessageWrapper, { role: role },
role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
!isThinking && resources && resources.length > 0 && (react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
translate('search.ai.resourcesFound.basedOn', 'Based on'),
" ",
resources.length,
' ',
translate('search.ai.resourcesFound.resources', 'resources')),
react_1.default.createElement(ResourceTagsWrapper, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))))) : (content),
isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
react_1.default.createElement(ThinkingDot, null),
react_1.default.createElement(ThinkingDot, null),
react_1.default.createElement(ThinkingDot, null))))));
}
const SearchAiMessageWrapper = styled_components_1.default.div `
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
justify-content: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
`;
const ResponseText = (0, styled_components_1.default)(Markdown_1.Markdown) `
color: var(--search-ai-text-color);
font-size: var(--search-ai-text-font-size);
line-height: var(--search-ai-text-line-height);
font-family: inherit;
white-space: break-spaces;
article {
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
}
`;
const MessageWrapper = styled_components_1.default.div `
padding: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'var(--spacing-sm)' : 'var(--spacing-xs)'}
var(--spacing-sm);
border-radius: var(--border-radius-lg);
max-width: 80%;
word-wrap: break-word;
white-space: pre-wrap;
background-color: ${({ role }) => role === constants_1.AiSearchConversationRole.USER
? 'var(--search-ai-user-bg-color)'
: 'var(--search-ai-assistant-bg-color)'};
border: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'none' : 'var(--search-ai-assistant-border)'};
color: ${({ role }) => role === constants_1.AiSearchConversationRole.USER
? 'var(--search-ai-user-text-color)'
: 'var(--search-ai-assistant-text-color)'};
`;
const ResourcesWrapper = styled_components_1.default.div `
gap: var(--search-ai-resources-gap);
display: flex;
flex-direction: column;
margin: var(--spacing-xs) 0;
`;
const ResourcesTitle = styled_components_1.default.div `
font-weight: var(--search-ai-resources-title-font-weight);
font-size: var(--search-ai-resources-title-font-size);
line-height: var(--search-ai-resources-title-line-height);
`;
const ResourceTagsWrapper = styled_components_1.default.div `
display: flex;
flex-wrap: wrap;
gap: var(--search-ai-resource-tags-gap);
`;
const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag) `
.tag-default {
--tag-color: var(--search-ai-resource-tag-text-color);
max-width: 100%;
overflow: hidden;
display: inline-block;
}
svg {
min-width: var(--search-ai-resource-tag-icon-size);
min-height: var(--search-ai-resource-tag-icon-size);
flex-shrink: 0;
}
> div {
overflow: hidden;
word-break: break-word;
white-space: normal;
max-width: 100%;
}
`;
const ThinkingDotsWrapper = styled_components_1.default.div `
display: flex;
gap: var(--search-ai-thinking-dots-gap);
padding: var(--search-ai-thinking-dots-padding);
`;
const ThinkingDot = styled_components_1.default.div `
width: var(--search-ai-thinking-dot-size);
height: var(--search-ai-thinking-dot-size);
border-radius: 50%;
background: var(--search-ai-thinking-dot-color);
animation: bounce 1.4s infinite ease-in-out;
&:nth-child(1) {
animation-delay: -0.32s;
}
&:nth-child(2) {
animation-delay: -0.16s;
}
&:nth-child(3) {
animation-delay: 0s;
}
@keyframes bounce {
0%,
80%,
100% {
opacity: 0.2;
transform: scale(0.8);
}
40% {
opacity: 1;
transform: scale(1);
}
}
`;
//# sourceMappingURL=SearchAiMessage.js.map