@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
55 lines (54 loc) • 2.03 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from 'react';
import { buildTemplateTextWithInsertedValues } from '../functions';
import { HighlightResearch } from './HighlightResearch';
import { MessageTextRender } from './MessageTextRender';
import { StyledTemplateText } from '../ui/messageStyle/StyledTemplateText';
import { CardMedia } from '@mui/material';
import { Box } from 'atomic-layout';
export function MessageTemplateSectionPreview({
/**
* Il testo del template
*/
templateText,
/**
* il tipo della sezione del template, ad esempio BUTTONS, TEXT, ecc.
* E' la chiave con cui vengono salvati e filtrati i valori delle variabili.
*/
templateType,
/**
* Le variabili inserite dall'utente, in forma di array di oggetti con le chiavi key e value.
* Ci si trova in una conversazione e in un messaggio di tipo template
*/
mexComponent,
/**
* La stringa di ricerca per evidenziare le parole
*/
searchString,
/**
* La funzione che riceve i riferimenti per l'evidenziazione
*/
onSearchRefs,
/**
* L'indice del riferimento attualmente focalizzato
*/
focusedRefIndex,
/**
* La chiave del riferimento attualmente focalizzato
*/
focusedKey,
/**
* Se il messaggio contiene un url immagine
*/
urlImg, }) {
const entireText = useMemo(() => {
return buildTemplateTextWithInsertedValues({
templateText,
variablesFromMessage: mexComponent,
templateSectionKey: templateType,
});
}, [templateText, templateType, mexComponent]);
return (_jsx(_Fragment, { children: urlImg ? (_jsx(Box, { paddingBottom: '0.5rem', children: _jsx(CardMedia, { component: "img", height: "194", image: urlImg, sx: {
objectFit: 'contain',
} }) })) : (_jsx(StyledTemplateText, { "$elementType": templateType, children: _jsx(MessageTextRender, { onSearchRefs: onSearchRefs, focusedRefIndex: focusedRefIndex, searchString: searchString, text: entireText, focusedKey: focusedKey }) })) }));
}