@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
253 lines • 26.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const utils_1 = require("../../helpers/utils");
const media_1 = require("../../helpers/media");
const ChatBubble_1 = tslib_1.__importDefault(require("../ChatBubble/ChatBubble"));
const MediaWidget_1 = tslib_1.__importDefault(require("../MediaWidget/MediaWidget"));
const ChatInputs_1 = tslib_1.__importDefault(require("../ChatInputs/ChatInputs"));
const Typing_1 = tslib_1.__importDefault(require("../Typing/Typing"));
const constants_1 = require("../../helpers/constants");
const ArtifactHandler_1 = tslib_1.__importDefault(require("../MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler"));
const Document_1 = require("../icons/Document");
const react_i18next_1 = require("react-i18next");
const constants_2 = require("../../helpers/constants");
const Modal_1 = tslib_1.__importDefault(require("../ui/Modal"));
const Tooltip_1 = tslib_1.__importDefault(require("../ui/Tooltip"));
const llmUsage_1 = require("../../helpers/llmUsage");
const Chat = ({ memori, tenant, sessionID, baseUrl, apiUrl, client, translateTo, memoriTyping, typingText, showTypingText = false, history = [], authToken, dialogState, simulateUserPrompt, showDates = false, showContextPerLine = false, showAIicon = true, showWhyThisAnswer = true, showCopyButton = true, showTranslationOriginal = false, showReasoning = false, showMessageConsumption = false, preview = false, instruct = false, showInputs = true, showMicrophone = false, microphoneMode = 'HOLD_TO_TALK', sendOnEnter, setSendOnEnter, attachmentsMenuOpen, setAttachmentsMenuOpen, userMessage = '', onChangeUserMessage, sendMessage, listening, setEnableFocusChatInput, isPlayingAudio, stopAudio, startListening, stopListening, customMediaRenderer, user, userAvatar, showUpload = false, experts, useMathFormatting = false, isHistoryView = false, isChatlogPanel = false, showFunctionCache = false, maxTotalMessagePayload, maxTextareaCharacters, }) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
const [isTextareaExpanded, setIsTextareaExpanded] = (0, react_1.useState)(false);
const [isDragging, setIsDragging] = (0, react_1.useState)(false);
const [activeUsageBadge, setActiveUsageBadge] = (0, react_1.useState)(null);
const chatWrapperRef = (0, react_1.useRef)(null);
const { t } = (0, react_i18next_1.useTranslation)();
const locale = (translateTo || memori.culture || 'it-IT').replace('_', '-');
const llmUsageLabels = (0, react_1.useMemo)(() => ({
llm: t('chatLogs.llm', { defaultValue: 'LLM' }),
model: t('chatLogs.model', { defaultValue: 'Model' }),
provider: t('chatLogs.provider', { defaultValue: 'Provider' }),
tokens: t('chatLogs.tokens', { defaultValue: 'Tokens' }),
input: t('chatLogs.input', { defaultValue: 'Input' }),
output: t('chatLogs.output', { defaultValue: 'Output' }),
cacheRead: t('chatLogs.cacheRead', { defaultValue: 'Cache read' }),
cacheWrite: t('chatLogs.cacheWrite', { defaultValue: 'Cache write' }),
duration: t('chatLogs.duration', { defaultValue: 'Duration' }),
energy: t('chatLogs.energy', { defaultValue: 'Energy' }),
co2: t('chatLogs.co2', { defaultValue: 'CO2' }),
water: t('chatLogs.water', { defaultValue: 'Water' }),
usageBadgesHint: t('chatLogs.usageBadgesHint', {
defaultValue: 'Click one of these buttons to show more information',
}),
}), [t]);
const usageHtmlByIndex = (0, react_1.useMemo)(() => history.map((message, index) => {
const messageWithUsage = message;
return showMessageConsumption &&
!message.fromUser &&
messageWithUsage.llmUsage
? (0, llmUsage_1.buildLlmUsageHtml)(messageWithUsage.llmUsage, llmUsageLabels, index, locale)
: '';
}), [history, llmUsageLabels, locale, showMessageConsumption]);
const scrollToBottom = (0, react_1.useCallback)(() => {
if (isHistoryView)
return;
setTimeout(() => {
var _a, _b;
let userMsgs = document.querySelectorAll('.memori-chat-scroll-item');
(_b = (_a = userMsgs[userMsgs.length - 1]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
}, 200);
}, [isHistoryView]);
const lastAutoscrollSignatureRef = (0, react_1.useRef)(null);
const lastMessage = history === null || history === void 0 ? void 0 : history[history.length - 1];
const lastMessageSignature = `${(_a = history === null || history === void 0 ? void 0 : history.length) !== null && _a !== void 0 ? _a : 0}|${(_b = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.timestamp) !== null && _b !== void 0 ? _b : ''}|${(lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.fromUser) ? 'u' : 'm'}|${(_d = (_c = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.text) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0}|${(_f = (_e = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.translatedText) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0}`;
(0, react_1.useEffect)(() => {
if (preview || isHistoryView)
return;
if (lastAutoscrollSignatureRef.current === lastMessageSignature)
return;
lastAutoscrollSignatureRef.current = lastMessageSignature;
scrollToBottom();
}, [preview, isHistoryView, lastMessageSignature, scrollToBottom]);
const onTextareaFocus = () => {
stopListening();
const hasTouch = (0, utils_1.hasTouchscreen)();
if (hasTouch)
setEnableFocusChatInput(true);
};
const onTextareaBlur = () => {
var _a, _b, _c, _d, _e;
if ((_b = (_a = document
.getElementById('chat-wrapper')) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('chat-focused')) {
(_c = document.getElementById('chat-wrapper')) === null || _c === void 0 ? void 0 : _c.classList.remove('chat-focused');
(_e = (_d = document
.querySelector('.memori.memori-widget')) === null || _d === void 0 ? void 0 : _d.classList) === null || _e === void 0 ? void 0 : _e.remove('chat-focused');
scrollToBottom();
}
};
const onTextareaExpanded = (expanded) => {
setIsTextareaExpanded(expanded);
};
(0, react_1.useEffect)(() => {
if (!showUpload)
return;
let dragCounter = 0;
const chatWrapper = document.getElementById('chat-wrapper');
const handleDragEnter = (e) => {
var _a;
if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types.includes('Files')) {
dragCounter++;
if (dragCounter === 1) {
setIsDragging(true);
}
}
};
const handleDragLeave = (e) => {
var _a;
if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types.includes('Files')) {
dragCounter--;
if (dragCounter === 0) {
setIsDragging(false);
}
}
};
const handleDragOver = (e) => {
var _a;
if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types.includes('Files')) {
e.preventDefault();
}
};
const handleDrop = (e) => {
var _a;
if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types.includes('Files')) {
dragCounter = 0;
setIsDragging(false);
}
};
if (chatWrapper) {
chatWrapper.addEventListener('dragenter', handleDragEnter);
chatWrapper.addEventListener('dragleave', handleDragLeave);
chatWrapper.addEventListener('dragover', handleDragOver);
chatWrapper.addEventListener('drop', handleDrop);
}
return () => {
if (chatWrapper) {
chatWrapper.removeEventListener('dragenter', handleDragEnter);
chatWrapper.removeEventListener('dragleave', handleDragLeave);
chatWrapper.removeEventListener('dragover', handleDragOver);
chatWrapper.removeEventListener('drop', handleDrop);
}
};
}, [showUpload]);
(0, react_1.useEffect)(() => {
const wrapper = chatWrapperRef.current;
if (!wrapper || !showMessageConsumption)
return;
const handleUsageBadgeClick = (event) => {
var _a;
const target = event.target;
const button = target === null || target === void 0 ? void 0 : target.closest('[data-llm-badge-type][data-line-index]');
if (!button)
return;
const lineIndex = Number(button.dataset.lineIndex);
const badgeType = button.dataset.llmBadgeType;
if (!Number.isInteger(lineIndex) || !badgeType)
return;
const line = (_a = history === null || history === void 0 ? void 0 : history[lineIndex]) !== null && _a !== void 0 ? _a : null;
if (!(line === null || line === void 0 ? void 0 : line.llmUsage))
return;
event.preventDefault();
setActiveUsageBadge({
type: badgeType,
usage: line.llmUsage,
});
};
wrapper.addEventListener('click', handleUsageBadgeClick);
return () => {
wrapper.removeEventListener('click', handleUsageBadgeClick);
};
}, [history, showMessageConsumption]);
return ((0, jsx_runtime_1.jsxs)("div", { ref: chatWrapperRef, className: (0, classnames_1.default)('memori-chat--wrapper', {
'memori-chat-wrapper--translate': translateTo,
'memori-chat-wrapper--expanded': isTextareaExpanded,
'memori-chat-wrapper--dragging': isDragging,
}), id: "chat-wrapper", lang: translateTo === null || translateTo === void 0 ? void 0 : translateTo.toUpperCase(), "data-memori-lang": (_k = (_j = (_h = (_g = memori.culture) === null || _g === void 0 ? void 0 : _g.split('-')) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.toUpperCase()) !== null && _k !== void 0 ? _k : 'EN', children: [isDragging && ((0, jsx_runtime_1.jsxs)("div", { className: "memori-chat--drag-overlay", children: [(0, jsx_runtime_1.jsx)(Document_1.DocumentIcon, { className: "memori-chat--drag-overlay-icon" }), (0, jsx_runtime_1.jsx)("span", { className: "memori-chat--drag-overlay-text", children: (_l = t('upload.dragAndDropFiles')) !== null && _l !== void 0 ? _l : 'Drag and drop files here to add them to the chat' })] })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('memori-chat--history', {
'memori-chat--history-touch': (0, utils_1.hasTouchscreen)(),
}), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('memori-chat--content', {
'memori-chat--content-touch': (0, utils_1.hasTouchscreen)(),
}), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('memori-chat--cover'), style: {
backgroundImage: `url("${(0, media_1.getResourceUrl)({
type: 'cover',
tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.name,
resourceURI: memori.coverURL,
baseURL: baseUrl,
apiURL: apiUrl,
})}"), url("${(0, media_1.getResourceUrl)({
type: 'cover',
tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.name,
baseURL: baseUrl || 'https://www.aisuru.com',
apiURL: apiUrl,
})}")`,
} }), history.map((message, index) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MediaWidget_1.default, { simulateUserPrompt: simulateUserPrompt, links: (((_b = (_a = message === null || message === void 0 ? void 0 : message.media) === null || _a === void 0 ? void 0 : _a.filter(m => { var _a; return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionSignature); })) === null || _b === void 0 ? void 0 : _b.filter(m => m.mimeType === 'text/html' && !!m.url)) ||
[]), media: [
...(((_d = (_c = message === null || message === void 0 ? void 0 : message.media) === null || _c === void 0 ? void 0 : _c.filter(m => { var _a; return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionSignature); })) === null || _d === void 0 ? void 0 : _d.filter(m => !(m.mimeType === 'text/html' && !!m.url))) ||
[]),
...(0, utils_1.parseDocumentAttachmentsFromMessage)(message.text || '').map((attachment, attachmentIndex) => ({
mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
.toString(36)
.substr(2, 9)}`,
url: attachment.url,
mimeType: attachment.type,
title: attachment.filename,
content: attachment.content,
properties: { isDocumentAttachment: true },
type: 'document',
})),
], sessionID: sessionID, baseUrl: baseUrl, apiUrl: apiUrl, translateTo: translateTo, customMediaRenderer: customMediaRenderer, fromUser: message.fromUser }), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, { isFirst: index === 0, message: message, memori: memori, tenant: tenant, client: client, baseUrl: baseUrl, apiUrl: apiUrl, sessionID: sessionID, simulateUserPrompt: simulateUserPrompt, showAIicon: showAIicon, showWhyThisAnswer: showWhyThisAnswer, showTranslationOriginal: showTranslationOriginal, showFeedback: index === history.length - 1 &&
!message.fromUser &&
(dialogState === null || dialogState === void 0 ? void 0 : dialogState.acceptsFeedback), user: user, userAvatar: userAvatar, experts: experts, showCopyButton: showCopyButton, useMathFormatting: useMathFormatting, showFunctionCache: showFunctionCache, showReasoning: showReasoning, usageHtml: usageHtmlByIndex[index] }, `chatbubble-${index}-${((_e = message.text) === null || _e === void 0 ? void 0 : _e.includes('<document_attachment'))
? 'has-attachments'
: 'no-attachments'}-${message.timestamp}`), showDates && !!message.timestamp && ((0, jsx_runtime_1.jsx)("small", { className: `memori-chat--timestamp ${message.fromUser ? 'text-right' : 'text-left'}`, children: new Intl.DateTimeFormat('it', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
}).format(new Date(message.timestamp.endsWith('Z')
? message.timestamp
: `${message.timestamp}Z`)) })), showContextPerLine &&
!!Object.keys((_f = message.contextVars) !== null && _f !== void 0 ? _f : {}).length && ((0, jsx_runtime_1.jsx)("div", { className: "memori-chat--context-vars", children: Object.keys((_g = message.contextVars) !== null && _g !== void 0 ? _g : {}).map(key => {
var _a, _b, _c;
return ((_a = message.contextVars) === null || _a === void 0 ? void 0 : _a[key]) === '-' ? ((0, jsx_runtime_1.jsx)("div", { className: `memori-chat--context-tag memori-chat--context-tag-canceled`, children: (0, jsx_runtime_1.jsx)("span", { className: "memori-chat--context-tag-text", children: key }) }, key)) : ((_b = message.contextVars) === null || _b === void 0 ? void 0 : _b[key]) === '✔️' ? ((0, jsx_runtime_1.jsx)("div", { className: "memori-chat--context-tag", children: (0, jsx_runtime_1.jsx)("span", { className: "memori-chat--context-tag-text", children: key }) }, key)) : ((0, jsx_runtime_1.jsx)("div", { className: "memori-chat--context-tag", children: (0, jsx_runtime_1.jsxs)("span", { className: "memori-chat--context-tag-text", children: [key, ": ", (_c = message.contextVars) === null || _c === void 0 ? void 0 : _c[key]] }) }, key));
}) })), !isHistoryView && !message.fromUser && ((0, jsx_runtime_1.jsx)(ArtifactHandler_1.default, { isChatlogPanel: isChatlogPanel, message: message }))] }, `${index}-${((_h = message.text) === null || _h === void 0 ? void 0 : _h.includes('<document_attachment'))
? 'has-attachments'
: 'no-attachments'}-${message.timestamp}`));
}), (dialogState === null || dialogState === void 0 ? void 0 : dialogState.hints) &&
dialogState.hints.length > 0 &&
!memoriTyping && ((0, jsx_runtime_1.jsx)(MediaWidget_1.default, { simulateUserPrompt: simulateUserPrompt, hints: dialogState.translatedHints
? dialogState.translatedHints
: dialogState.hints.map(h => ({
text: h,
originalText: h,
})) })), !!memoriTyping && ((0, jsx_runtime_1.jsx)(Typing_1.default, { useDefaultSentences: showTypingText, lang: translateTo
? translateTo.toLowerCase() === 'it'
? 'it'
: 'en'
: ((_p = (_o = (_m = memori.culture) === null || _m === void 0 ? void 0 : _m.split('-')) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.toLowerCase()) === 'it'
? 'it'
: 'en', sentence: typingText, sentences: memori.enableBoardOfExperts
? constants_1.boardOfExpertsLoadingSentences
: undefined }, typingText)), (0, jsx_runtime_1.jsx)("div", { id: "end-messages-ref" })] }) }), showInputs && ((0, jsx_runtime_1.jsx)(ChatInputs_1.default, { userMessage: userMessage, onChangeUserMessage: onChangeUserMessage, dialogState: dialogState, instruct: instruct, authToken: authToken, sendMessage: sendMessage, isTyping: memoriTyping, microphoneMode: microphoneMode, sendOnEnter: sendOnEnter, setSendOnEnter: setSendOnEnter, client: client, sessionID: sessionID, showUpload: showUpload, attachmentsMenuOpen: attachmentsMenuOpen, setAttachmentsMenuOpen: setAttachmentsMenuOpen, onTextareaFocus: onTextareaFocus, onTextareaBlur: onTextareaBlur, onTextareaExpanded: onTextareaExpanded, startListening: startListening, stopListening: stopListening, stopAudio: stopAudio, listening: listening, isPlayingAudio: isPlayingAudio, showMicrophone: showMicrophone, memoriID: memori === null || memori === void 0 ? void 0 : memori.memoriID, maxTotalMessagePayload: maxTotalMessagePayload, maxTextareaCharacters: maxTextareaCharacters, maxDocumentsPerMessage: constants_2.maxDocumentsPerMessage, maxDocumentContentLength: constants_2.maxDocumentContentLength, pasteAsCardLineThreshold: constants_2.pasteAsCardLineThreshold, pasteAsCardCharThreshold: constants_2.pasteAsCardCharThreshold })), (0, jsx_runtime_1.jsxs)(Modal_1.default, { open: !!activeUsageBadge, onClose: () => setActiveUsageBadge(null), title: (activeUsageBadge === null || activeUsageBadge === void 0 ? void 0 : activeUsageBadge.type)
? `${llmUsage_1.BADGE_EMOJI[activeUsageBadge.type]} ${llmUsageLabels[activeUsageBadge.type]}`
: undefined, className: "memori-chat--usage-modal", children: [(activeUsageBadge === null || activeUsageBadge === void 0 ? void 0 : activeUsageBadge.type) === 'llm' && ((0, jsx_runtime_1.jsxs)("dl", { className: "memori-chat--usage-details", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("dt", { children: llmUsageLabels.provider }), (0, jsx_runtime_1.jsx)("dd", { children: (_q = activeUsageBadge.usage.provider) !== null && _q !== void 0 ? _q : '—' })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("dt", { children: llmUsageLabels.model }), (0, jsx_runtime_1.jsx)("dd", { children: (_r = activeUsageBadge.usage.model) !== null && _r !== void 0 ? _r : '—' })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("dt", { children: [llmUsageLabels.tokens, " ", llmUsageLabels.input] }), (0, jsx_runtime_1.jsx)("dd", { children: (0, llmUsage_1.formatIntegerValue)((_s = activeUsageBadge.usage.totalInputTokens) !== null && _s !== void 0 ? _s : 0, locale) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("dt", { children: [llmUsageLabels.tokens, " ", llmUsageLabels.output] }), (0, jsx_runtime_1.jsx)("dd", { children: (0, llmUsage_1.formatIntegerValue)((_t = activeUsageBadge.usage.outputTokens) !== null && _t !== void 0 ? _t : 0, locale) })] })] })), (activeUsageBadge === null || activeUsageBadge === void 0 ? void 0 : activeUsageBadge.type) === 'energy' && ((0, jsx_runtime_1.jsxs)("div", { className: "memori-chat--usage-educational-content", children: [(0, jsx_runtime_1.jsx)("strong", { className: "memori-chat--usage-metric-value", children: (0, llmUsage_1.formatImpactWithApiUnit)((_v = (0, llmUsage_1.getMetricValue)((_u = activeUsageBadge.usage.energyImpact) === null || _u === void 0 ? void 0 : _u.energy)) !== null && _v !== void 0 ? _v : 0, (_w = activeUsageBadge.usage.energyImpact) === null || _w === void 0 ? void 0 : _w.energyUnit, 'kWh', 'energy', locale) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { content: t('chatLogs.approximateValuesTooltip', {
defaultValue: 'These values are approximate.',
}), children: (0, jsx_runtime_1.jsx)("p", { className: "memori-chat--usage-comparable", children: (0, llmUsage_1.getImpactComparison)((_y = (0, llmUsage_1.getMetricValue)((_x = activeUsageBadge.usage.energyImpact) === null || _x === void 0 ? void 0 : _x.energy)) !== null && _y !== void 0 ? _y : 0, 'energy', locale, t) }) }), (0, jsx_runtime_1.jsx)("p", { children: t('chatLogs.energyImpactDescription') })] })), (activeUsageBadge === null || activeUsageBadge === void 0 ? void 0 : activeUsageBadge.type) === 'co2' && ((0, jsx_runtime_1.jsxs)("div", { className: "memori-chat--usage-educational-content", children: [(0, jsx_runtime_1.jsx)("strong", { className: "memori-chat--usage-metric-value", children: (0, llmUsage_1.formatImpactWithApiUnit)((_0 = (0, llmUsage_1.getMetricValue)((_z = activeUsageBadge.usage.energyImpact) === null || _z === void 0 ? void 0 : _z.gwp)) !== null && _0 !== void 0 ? _0 : 0, (_1 = activeUsageBadge.usage.energyImpact) === null || _1 === void 0 ? void 0 : _1.gwpUnit, 'kgCO2eq', 'co2', locale) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { content: t('chatLogs.approximateValuesTooltip', {
defaultValue: 'These values are approximate.',
}), children: (0, jsx_runtime_1.jsx)("p", { className: "memori-chat--usage-comparable", children: (0, llmUsage_1.getImpactComparison)((_3 = (0, llmUsage_1.getMetricValue)((_2 = activeUsageBadge.usage.energyImpact) === null || _2 === void 0 ? void 0 : _2.gwp)) !== null && _3 !== void 0 ? _3 : 0, 'co2', locale, t) }) }), (0, jsx_runtime_1.jsx)("p", { children: t('chatLogs.co2ImpactDescription') })] })), (activeUsageBadge === null || activeUsageBadge === void 0 ? void 0 : activeUsageBadge.type) === 'water' && ((0, jsx_runtime_1.jsxs)("div", { className: "memori-chat--usage-educational-content", children: [(0, jsx_runtime_1.jsx)("strong", { className: "memori-chat--usage-metric-value", children: (0, llmUsage_1.formatImpactWithApiUnit)((_5 = (0, llmUsage_1.getMetricValue)((_4 = activeUsageBadge.usage.energyImpact) === null || _4 === void 0 ? void 0 : _4.wcf)) !== null && _5 !== void 0 ? _5 : 0, (_6 = activeUsageBadge.usage.energyImpact) === null || _6 === void 0 ? void 0 : _6.wcfUnit, 'L', 'water', locale) }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { content: t('chatLogs.approximateValuesTooltip', {
defaultValue: 'These values are approximate.',
}), children: (0, jsx_runtime_1.jsx)("p", { className: "memori-chat--usage-comparable", children: (0, llmUsage_1.getImpactComparison)((_8 = (0, llmUsage_1.getMetricValue)((_7 = activeUsageBadge.usage.energyImpact) === null || _7 === void 0 ? void 0 : _7.wcf)) !== null && _8 !== void 0 ? _8 : 0, 'water', locale, t) }) }), (0, jsx_runtime_1.jsx)("p", { children: t('chatLogs.waterImpactDescription') })] }))] })] }));
};
exports.default = (0, react_1.memo)(Chat);
//# sourceMappingURL=Chat.js.map