UNPKG

@acrsolutions/chat-components

Version:

Un set di componenti per la creazione di un'applicazione di messaggistica

29 lines (28 loc) 3.54 kB
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; /** * Questo componente copre la maggior parte delle possibilità di messaggio: * template, media, testo semplice, ecc. */ import { WMessageShell } from './dummy/WMessageShell'; import { MessageTemplatePreview } from './MessageTemplatePreview'; import { useMemo } from 'react'; import { Box, Composition } from 'atomic-layout'; import { MessageTextRender } from './MessageTextRender'; import { ImageElement } from './dummy/ImageElement'; import OndemandVideoIcon from '@mui/icons-material/OndemandVideo'; import { StyledLink } from '../ui/StyledLink'; import ReactAudioPlayer from 'react-audio-player'; import { Button, Typography } from '@mui/material'; export function SmartWMessage({ isReceived, templateName, searchString, onSearchRefs, focusedRefIndex, focusedKey, templateVariables, getTemplateData, messageText, imgUrl, caption, videoUrl, audioUrl, documentUrl, fileName, buttonPayload, sentDate, readDate, deliveredDate, reaction, }) { const { bodyText, headerText, footerText, templateImgUrl } = useMemo(() => { if (!templateName || !getTemplateData) return { bodyText: '', headerText: '', footerText: '', templateImgUrl: undefined, }; return getTemplateData(templateName); }, [templateName, getTemplateData]); return (_jsxs(WMessageShell, { isReceived: isReceived, sentDate: sentDate ?? null, readDate: readDate ?? null, deliveredDate: deliveredDate ?? null, reaction: reaction ?? null, children: [templateName && bodyText && (_jsx(MessageTemplatePreview, { templateName: templateName, templateVariables: templateVariables ?? undefined, isReceived: isReceived, onSearchRefs: onSearchRefs, focusedRefIndex: focusedRefIndex, searchString: searchString, focusedKey: focusedKey, headerText: headerText, footerText: footerText, imgUrl: templateImgUrl, bodyText: bodyText })), _jsxs(Box, { padding: '0.5rem', children: [messageText && (_jsx(Typography, { children: _jsx(MessageTextRender, { text: messageText ?? '', searchString: searchString, onSearchRefs: onSearchRefs, focusedRefIndex: focusedRefIndex, focusedKey: focusedKey }) })), imgUrl && (_jsx(ImageElement, { imgUrl: imgUrl, imgCaption: caption ?? null, searchString: searchString, focusedRefIndex: focusedRefIndex, onSearchRefs: onSearchRefs })), videoUrl && (_jsxs(Composition, { justifyContent: "center", alignItems: "center", children: [_jsx(Typography, { textAlign: 'center', children: _jsx(OndemandVideoIcon, { fontSize: "large" }) }), _jsx(StyledLink, { href: videoUrl, children: 'Link video' }), _jsx(Typography, { children: _jsx(MessageTextRender, { text: caption ?? '', searchString: searchString, onSearchRefs: onSearchRefs, focusedRefIndex: focusedRefIndex, focusedKey: focusedKey }) })] })), audioUrl && (_jsxs(Composition, { gap: '0.5rem', justifyContent: "center", children: [_jsx(ReactAudioPlayer, { src: audioUrl, controls: true }), _jsx(StyledLink, { href: audioUrl, children: "Vai al link" })] })), documentUrl && (_jsxs(Box, { paddingTop: '0.5rem', children: [_jsx(Typography, { variant: "caption", children: "E' stato inviato un documento scaricabile al link:" }), _jsx(StyledLink, { href: documentUrl, children: fileName ?? 'File' })] })), buttonPayload && (_jsx(Composition, { justifyContent: "center", alignItems: "center", children: _jsx(Button, { variant: "contained", color: "success", disabled: true, children: buttonPayload ?? 'Bottone sconosciuto' }) }))] })] })); }