@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
154 lines • 16.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useLayoutEffect, useState } from 'react';
import cx from 'classnames';
import { Transition } from '@headlessui/react';
import { getResourceUrl } from '../../helpers/media';
import UserIcon from '../icons/User';
import AI from '../icons/AI';
import Translation from '../icons/Translation';
import Tooltip from '../ui/Tooltip';
import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
import { useTranslation } from 'react-i18next';
import Button from '../ui/Button';
import QuestionHelp from '../icons/QuestionHelp';
import Copy from '../icons/Copy';
import Code from '../icons/Code';
import Bug from '../icons/Bug';
import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
import { stripHTML, stripOutputTags } from '../../helpers/utils';
import { renderMsg, truncateMessage } from '../../helpers/message';
import Expandable from '../ui/Expandable';
import Modal from '../ui/Modal';
import { installMathJax } from '../../helpers/utils';
const ChatBubble = ({ message, memori, tenant, baseUrl, apiUrl, client, sessionID, showFeedback, showWhyThisAnswer = true, showCopyButton = true, showTranslationOriginal = false, simulateUserPrompt, showAIicon = true, isFirst = false, useMathFormatting = false, user, userAvatar, experts, showFunctionCache = false, showReasoning = false, }) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const { t, i18n } = useTranslation();
const lang = i18n.language || 'en';
const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
const [openFunctionCache, setOpenFunctionCache] = useState(false);
useEffect(() => {
if (typeof window !== 'undefined' && !window.MathJax) {
installMathJax();
}
}, []);
const cleanText = (message.translatedText || message.text).replace(/<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g, '');
const { text: renderedText } = renderMsg(cleanText, useMathFormatting, t('reasoning') || 'Reasoning...', showReasoning);
const plainText = message.fromUser
? truncateMessage(cleanText)
: stripHTML(stripOutputTags(renderedText));
const functionCacheData = (_a = message.media) === null || _a === void 0 ? void 0 : _a.filter(m => { var _a; return ((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionCache) === 'true'; });
useLayoutEffect(() => {
if (typeof window !== 'undefined' && !message.fromUser) {
const timer = setTimeout(() => {
if (window.MathJax && window.MathJax.typesetPromise) {
try {
const elements = document.querySelectorAll('.memori-chat--bubble-content');
if (elements.length > 0) {
const scrollContainer = document.querySelector('.memori-chat--history');
const currentScrollTop = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) || 0;
const currentScrollHeight = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) || 0;
window.MathJax.typesetPromise(['.memori-chat--bubble-content'])
.then(() => {
if (scrollContainer) {
const newScrollHeight = scrollContainer.scrollHeight;
const heightDifference = newScrollHeight - currentScrollHeight;
scrollContainer.scrollTop =
currentScrollTop + heightDifference;
}
})
.catch(err => console.error('MathJax typesetting failed:', err));
}
}
catch (error) {
console.error('Error during MathJax typesetting:', error);
}
}
}, 100);
return () => clearTimeout(timer);
}
}, [cleanText, message.fromUser, renderedText]);
return (_jsxs(_Fragment, { children: [(message.initial || isFirst) && (_jsx("div", { className: "memori-chat--bubble-initial" })), _jsxs(Transition, { show: true, appear: true, as: "div", className: cx('memori-chat--bubble-container', {
'memori-chat--bubble-from-user': !!message.fromUser,
'memori-chat--with-addon': (message.generatedByAI && showAIicon) ||
(showFeedback && simulateUserPrompt),
}), children: [!message.fromUser && (_jsx(Transition.Child, { as: "picture", className: "memori-chat--bubble-avatar", enter: "transition ease-in-out duration-300", enterFrom: `opacity-0 scale-075 ${message.fromUser ? 'translate-x-15' : 'translate-x--15'}`, enterTo: "opacity-1 scale-1 translate-x-0", leave: "transition ease-in-out duration-300", leaveFrom: "opacity-1 scale-1 translate-x-0", leaveTo: `opacity-0 scale-075 ${message.fromUser ? 'translate-x-15' : 'translate-x--15'}`, title: !!((_b = message.emitter) === null || _b === void 0 ? void 0 : _b.length) && !!memori.enableBoardOfExperts
? message.emitter
: memori.name, children: _jsx("img", { className: "memori-chat--bubble-avatar-img", alt: !!((_c = message.emitter) === null || _c === void 0 ? void 0 : _c.length) && !!memori.enableBoardOfExperts
? message.emitter
: memori.name, src: !!((_d = message.emitter) === null || _d === void 0 ? void 0 : _d.length) &&
!!memori.enableBoardOfExperts &&
(experts === null || experts === void 0 ? void 0 : experts.find(e => e.name === message.emitter))
? `${new URL(apiUrl !== null && apiUrl !== void 0 ? apiUrl : '/').origin}/api/v1/memoriai/memori/avatar/${(_e = experts.find(e => e.name === message.emitter)) === null || _e === void 0 ? void 0 : _e.expertMemoriID}`
: memori.avatarURL && memori.avatarURL.length > 0
? getResourceUrl({
type: 'avatar',
tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.name,
resourceURI: memori.avatarURL,
baseURL: baseUrl,
apiURL: apiUrl,
})
: getResourceUrl({
tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.name,
type: 'avatar',
baseURL: baseUrl || 'https://www.aisuru.com',
apiURL: apiUrl,
}), onError: e => {
e.currentTarget.src =
memori.avatarURL && memori.avatarURL.length > 0
? getResourceUrl({
type: 'avatar',
tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.name,
resourceURI: memori.avatarURL,
baseURL: baseUrl,
})
: getResourceUrl({
tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.name,
type: 'avatar',
baseURL: baseUrl,
});
e.currentTarget.onerror = null;
} }) })), _jsxs(Transition.Child, { as: "div", className: cx('memori-chat--bubble', {
'memori-chat--user-bubble': !!message.fromUser,
'memori-chat--with-addon': (!message.fromUser && showCopyButton) ||
(message.generatedByAI && showAIicon) ||
(showFeedback && simulateUserPrompt),
'memori-chat--ai-generated': message.generatedByAI && showAIicon,
'memori-chat--with-feedback': showFeedback,
}), enter: "transition ease-in-out duration-300", enterFrom: `opacity-0 scale-09 translate-x-${message.fromUser ? '30' : '-30'}`, enterTo: "opacity-1 scale-1 translate-x-0", leave: "transition ease-in-out duration-300", leaveFrom: "opacity-1 scale-1 translate-x-0", leaveTo: `opacity-0 scale-09 translate-x-${message.fromUser ? '30' : '-30'}`, children: [message.fromUser ? (_jsx(Expandable, { className: "memori-chat--bubble-content", mode: "characters", children: _jsx("div", { dir: "auto", className: "memori-chat--bubble-content", dangerouslySetInnerHTML: { __html: renderedText } }) })) : (_jsx("div", { dir: "auto", className: "memori-chat--bubble-content", dangerouslySetInnerHTML: { __html: renderedText } })), ((!message.fromUser && showCopyButton) ||
(message.generatedByAI && showAIicon) ||
(message.generatedByAI && showFunctionCache) ||
(showFeedback && simulateUserPrompt)) && (_jsxs("div", { className: "memori-chat--bubble-addon", children: [!message.fromUser && showCopyButton && (_jsx(Button, { ghost: true, shape: "circle", title: t('copy') || 'Copy', className: "memori-chat--bubble-action-icon", icon: _jsx(Copy, { "aria-label": t('copy') || 'Copy' }), onClick: () => navigator.clipboard.writeText(plainText) })), !message.fromUser &&
showCopyButton &&
plainText !== message.text && (_jsx(Button, { ghost: true, shape: "circle", title: t('copyRawCode') || 'Copy raw code', className: "memori-chat--bubble-action-icon", icon: _jsx(Code, { "aria-label": t('copyRawCode') || 'Copy raw code' }), onClick: () => navigator.clipboard.writeText(message.text) })), !message.fromUser &&
showFunctionCache &&
((_f = message.media) === null || _f === void 0 ? void 0 : _f.some(m => {
var _a, _b;
return Boolean((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionCache) ||
((_b = m.properties) === null || _b === void 0 ? void 0 : _b.functionCache) === 'true';
})) && (_jsx(Button, { ghost: true, shape: "circle", title: "Debug", className: "memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug", icon: _jsx(Bug, { "aria-label": "Debug" }), onClick: () => setOpenFunctionCache(true) })), showFeedback && !!simulateUserPrompt && (_jsx(FeedbackButtons, { memori: memori, className: "memori-chat--bubble-feedback", dropdown: true, onNegativeClick: msg => {
if (msg)
simulateUserPrompt(msg);
} })), message.generatedByAI && showAIicon && (_jsx(Tooltip, { align: "left", content: t('generatedByAI') ||
(lang === 'it'
? 'Risposta generata da IA, può talvolta generare informazioni non corrette'
: 'Answer generated by AI, may occasionally generate incorrect informations'), className: "memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai", children: _jsx("span", { children: _jsx(AI, { title: t('generatedByAI') ||
(lang === 'it'
? 'Risposta generata da IA, può talvolta generare informazioni non corrette'
: 'Answer generated by AI, may occasionally generate incorrect informations') }) }) })), showTranslationOriginal &&
message.translatedText &&
message.translatedText !== message.text && (_jsx(Tooltip, { align: "left", content: `${lang === 'it' ? 'Testo originale' : 'Original text'}: ${message.text}`, className: "memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai", children: _jsx("span", { children: _jsx(Translation, { "aria-label": lang === 'it' ? 'Testo originale' : 'Original text' }) }) })), !message.fromUser &&
message.questionAnswered &&
apiUrl &&
showWhyThisAnswer && (_jsx(Button, { ghost: true, shape: "circle", title: t('whyThisAnswer') || undefined, className: "memori-chat--bubble-action-icon", onClick: () => setShowingWhyThisAnswer(true), disabled: showingWhyThisAnswer, icon: _jsx(QuestionHelp, { title: t('whyThisAnswer') || undefined }) }))] }))] }), message.fromUser && (_jsx(_Fragment, { children: (!!userAvatar && typeof userAvatar === 'string') ||
(!userAvatar && !!((_g = user === null || user === void 0 ? void 0 : user.avatarURL) === null || _g === void 0 ? void 0 : _g.length)) ? (_jsx(Transition.Child, { as: "picture", className: "memori-chat--bubble-avatar", enter: "transition ease-in-out duration-300", enterFrom: `opacity-0 scale-075 ${message.fromUser ? 'translate-x-15' : 'translate-x--15'}`, enterTo: "opacity-1 scale-1 translate-x-0", leave: "transition ease-in-out duration-300", leaveFrom: "opacity-1 scale-1 translate-x-0", leaveTo: `opacity-0 scale-075 ${message.fromUser ? 'translate-x-15' : 'translate-x--15'}`, children: _jsx("img", { className: "memori-chat--bubble-avatar-img", alt: (_h = user === null || user === void 0 ? void 0 : user.userName) !== null && _h !== void 0 ? _h : 'User', src: userAvatar !== null && userAvatar !== void 0 ? userAvatar : user === null || user === void 0 ? void 0 : user.avatarURL }) })) : !!userAvatar ? (_jsx(Transition.Child, { as: "div", className: "memori-chat--bubble-avatar", enter: "transition ease-in-out duration-300", enterFrom: `opacity-0 scale-075 ${message.fromUser ? 'translate-x-15' : 'translate-x--15'}`, enterTo: "opacity-1 scale-1 translate-x-0", leave: "transition ease-in-out duration-300", leaveFrom: "opacity-1 scale-1 translate-x-0", leaveTo: `opacity-0 scale-075 ${message.fromUser ? 'translate-x-15' : 'translate-x--15'}`, children: userAvatar })) : (_jsx(Transition.Child, { as: "div", className: "memori-chat--bubble-avatar", enter: "transition ease-in-out duration-300", enterFrom: `opacity-0 scale-075 ${message.fromUser ? 'translate-x-15' : 'translate-x--15'}`, enterTo: "opacity-1 scale-1 translate-x-0", leave: "transition ease-in-out duration-300", leaveFrom: "opacity-1 scale-1 translate-x-0", leaveTo: `opacity-0 scale-075 ${message.fromUser ? 'translate-x-15' : 'translate-x--15'}`, children: _jsx(UserIcon, {}) })) }))] }), showingWhyThisAnswer && client && (_jsx(WhyThisAnswer, { client: client, visible: showingWhyThisAnswer, message: message, closeDrawer: () => setShowingWhyThisAnswer(false), sessionID: sessionID })), _jsx(Modal, { open: openFunctionCache, onClose: () => setOpenFunctionCache(false), className: "memori-chat--function-cache-modal", children: functionCacheData === null || functionCacheData === void 0 ? void 0 : functionCacheData.map((f, i) => (_jsxs("div", { style: i > 0
? {
marginTop: '1.5rem',
paddingTop: '1.5rem',
borderTop: '1px solid #e0e0e0',
}
: {
paddingTop: '1.5rem',
}, children: [_jsx("h3", { style: { marginTop: 0 }, children: f.title }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordWrap: 'break-word' }, children: f.content }, f.mediumID)] }, f.mediumID))) })] }));
};
export default ChatBubble;
//# sourceMappingURL=ChatBubble.js.map