@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
129 lines • 12.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, memo } from 'react';
import cx from 'classnames';
import { hasTouchscreen } from '../../helpers/utils';
import { getResourceUrl } from '../../helpers/media';
import ChatBubble from '../ChatBubble/ChatBubble';
import MediaWidget from '../MediaWidget/MediaWidget';
import ChatInputs from '../ChatInputs/ChatInputs';
import Typing from '../Typing/Typing';
import { boardOfExpertsLoadingSentences } from '../../helpers/constants';
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, 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, resetTranscript, customMediaRenderer, user, userAvatar, showUpload = false, experts, useMathFormatting = false, isHistoryView = false, showFunctionCache = false, }) => {
var _a, _b, _c, _d, _e, _f, _g;
const scrollToBottom = () => {
if (isHistoryView)
return;
setTimeout(() => {
var _a, _b;
let userMsgs = document.querySelectorAll('.memori-chat--bubble-container.memori-chat--bubble-from-user');
(_b = (_a = userMsgs[userMsgs.length - 1]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
}, 200);
};
useEffect(() => {
!preview && !isHistoryView && scrollToBottom();
}, [history, preview, isHistoryView]);
const onTextareaFocus = () => {
var _a, _b, _c, _d;
stopListening();
const hasTouch = hasTouchscreen();
if (hasTouch)
setEnableFocusChatInput(true);
if (hasTouch && window.innerWidth <= 768) {
(_b = (_a = document.getElementById('chat-wrapper')) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('chat-focused');
(_d = (_c = document
.querySelector('.memori.memori-widget')) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.add('chat-focused');
setTimeout(() => {
scrollToBottom();
}, 300);
}
};
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();
}
};
return (_jsxs("div", { className: cx('memori-chat--wrapper', {
'memori-chat-wrapper--translate': translateTo,
}), id: "chat-wrapper", lang: translateTo === null || translateTo === void 0 ? void 0 : translateTo.toUpperCase(), "data-memori-lang": (_d = (_c = (_b = (_a = memori.culture) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.toUpperCase()) !== null && _d !== void 0 ? _d : 'EN', children: [_jsx("div", { className: cx('memori-chat--history', {
'memori-chat--history-touch': hasTouchscreen(),
}), children: _jsxs("div", { className: cx('memori-chat--content', {
'memori-chat--content-touch': hasTouchscreen(),
}), children: [_jsx("div", { className: cx('memori-chat--cover'), style: {
backgroundImage: `url("${getResourceUrl({
type: 'cover',
tenantID: tenant === null || tenant === void 0 ? void 0 : tenant.name,
resourceURI: memori.coverURL,
baseURL: baseUrl,
apiURL: apiUrl,
})}"), url("${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;
return (_jsxs(React.Fragment, { children: [_jsx(ChatBubble, { 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 }, `chatbubble-${index}-${((_a = message.text) === null || _a === void 0 ? void 0 : _a.includes('<document_attachment'))
? 'has-attachments'
: 'no-attachments'}-${message.timestamp}`), showDates && !!message.timestamp && (_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((_b = message.contextVars) !== null && _b !== void 0 ? _b : {}).length && (_jsx("div", { className: "memori-chat--context-vars", children: Object.keys((_c = message.contextVars) !== null && _c !== void 0 ? _c : {}).map(key => {
var _a, _b, _c;
return ((_a = message.contextVars) === null || _a === void 0 ? void 0 : _a[key]) === '-' ? (_jsx("div", { className: `memori-chat--context-tag memori-chat--context-tag-canceled`, children: _jsx("span", { className: "memori-chat--context-tag-text", children: key }) }, key)) : ((_b = message.contextVars) === null || _b === void 0 ? void 0 : _b[key]) === '✔️' ? (_jsx("div", { className: "memori-chat--context-tag", children: _jsx("span", { className: "memori-chat--context-tag-text", children: key }) }, key)) : (_jsx("div", { className: "memori-chat--context-tag", children: _jsxs("span", { className: "memori-chat--context-tag-text", children: [key, ": ", (_c = message.contextVars) === null || _c === void 0 ? void 0 : _c[key]] }) }, key));
}) })), _jsx(MediaWidget, { simulateUserPrompt: simulateUserPrompt, media: [
...(((_d = message === null || message === void 0 ? void 0 : message.media) === null || _d === void 0 ? void 0 : _d.filter(m => m.mimeType !== 'text/html' && m.mimeType !== 'text/plain')) || []),
...(() => {
const text = message.translatedText || message.text;
const documentAttachmentRegex = /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
const attachments = [];
let match;
while ((match = documentAttachmentRegex.exec(text)) !== null) {
const [, filename, type, content] = match;
attachments.push({
mediumID: `doc_${Date.now()}_${Math.random()
.toString(36)
.substr(2, 9)}`,
url: '',
mimeType: type,
title: filename,
content: content.trim(),
properties: { isDocumentAttachment: true },
type: 'document',
});
}
return attachments;
})(),
], links: (_e = message === null || message === void 0 ? void 0 : message.media) === null || _e === void 0 ? void 0 : _e.filter(m => m.mimeType === 'text/html'), sessionID: sessionID, baseUrl: baseUrl, apiUrl: apiUrl, translateTo: translateTo, customMediaRenderer: customMediaRenderer, fromUser: message.fromUser })] }, `${index}-${((_f = message.text) === null || _f === void 0 ? void 0 : _f.includes('<document_attachment'))
? 'has-attachments'
: 'no-attachments'}-${message.timestamp}`));
}), (dialogState === null || dialogState === void 0 ? void 0 : dialogState.hints) &&
dialogState.hints.length > 0 &&
!memoriTyping && (_jsx(MediaWidget, { simulateUserPrompt: simulateUserPrompt, hints: dialogState.translatedHints
? dialogState.translatedHints
: dialogState.hints.map(h => ({
text: h,
originalText: h,
})) })), !!memoriTyping && (_jsx(Typing, { useDefaultSentences: showTypingText, lang: translateTo
? translateTo.toLowerCase() === 'it'
? 'it'
: 'en'
: ((_g = (_f = (_e = memori.culture) === null || _e === void 0 ? void 0 : _e.split('-')) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.toLowerCase()) === 'it'
? 'it'
: 'en', sentence: typingText, sentences: memori.enableBoardOfExperts
? boardOfExpertsLoadingSentences
: undefined }, typingText)), _jsx("div", { id: "end-messages-ref" })] }) }), showInputs && (_jsx(ChatInputs, { resetTranscript: resetTranscript, userMessage: userMessage, onChangeUserMessage: onChangeUserMessage, dialogState: dialogState, instruct: instruct, authToken: authToken, sendMessage: sendMessage, microphoneMode: microphoneMode, sendOnEnter: sendOnEnter, setSendOnEnter: setSendOnEnter, client: client, sessionID: sessionID, showUpload: showUpload, attachmentsMenuOpen: attachmentsMenuOpen, setAttachmentsMenuOpen: setAttachmentsMenuOpen, onTextareaFocus: onTextareaFocus, onTextareaBlur: onTextareaBlur, startListening: startListening, stopListening: stopListening, stopAudio: stopAudio, listening: listening, isPlayingAudio: isPlayingAudio, showMicrophone: showMicrophone, memoriID: memori === null || memori === void 0 ? void 0 : memori.memoriID }))] }));
};
export default memo(Chat);
//# sourceMappingURL=Chat.js.map