@@ -8,6 +8,7 @@ import { useAppSelector } from '@/src/main/store/store' import { TooltipCustom } from '@/src/shared' import { Message } from '@/src/shared/lib/types/model' import { BotMessage } from '@/src/widgets/messages' +import { Markdown } from '../../markdown/markdown' interface IMessagesList { // messageResponse: Message[] | null @@ -60,6 +61,18 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList) } } + const flexStyle = { + display: 'flex', + alignItems: 'center', + justifyContent: 'start', + gap: '12px', + color: '#7f7df3 !important', + fontWeight: '600 !important', + lineHeight: '140%', + letterSpacing: '0.2px', + cursor: 'pointer', + } + const theme = useAppSelector((state) => state.theme.theme) return ( @@ -104,270 +117,592 @@ export const UserMessage = React.memo(function UserMessage(props: IMessagesList) {props.message.file ? ( - - - { - setModal(true) - }} - onLoadingComplete={() => - setLoaded(true) - } - style={{ - objectFit: 'contain', - height: '100%', - width: '100%', - borderRadius: '13px', - cursor: 'pointer', - opacity: loaded ? '100%' : '0%', - minWidth: '100px', - minHeight: '100px', - }} - width={500} - height={500} - src={props.message.file.toString()} - alt={ - 'К сожалению, изображение не загрузилось' - } - /> - {!loaded && ( - + + { + if (!props.message.file) + return + setModal(true) }} - variant='rectangular' - /> - )} - - - - + setLoaded(true) } - aria-haspopup='true' - aria-expanded={ - open ? 'true' : undefined + style={{ + objectFit: 'contain', + height: '100%', + width: '100%', + borderRadius: '13px', + cursor: 'pointer', + opacity: loaded + ? '100%' + : '0%', + minWidth: '100px', + minHeight: '100px', + }} + width={500} + height={500} + src={props.message.file.toString()} + alt={ + 'К сожалению, изображение не загрузилось' } - > - - - - - - - - - - + {!loaded && ( + - { - copy( - props.message - .content - ) + position: 'absolute', + top: '0', + left: '0', + zIndex: '1', + borderRadius: 5, + width: '100%', + height: '100%', }} + variant='rectangular' + /> + )} + + + + - - + - - - - Копировать - - + + + + + { - if (props.deleteMessage) - props.deleteMessage( + > + { + copy( props.message - .uid + .content ) + }} + > + + + + + + + Копировать + + { + if ( + props.deleteMessage + ) + props.deleteMessage( + props + .message + .uid + ) + }} + > + + + + Удалить + + + + + {!props.message.is_sent && ( + 1 + )} + + 30 + ? 'pre-wrap' + : 'pre', + }} + > + {/**/} + {props.message.content} + + + + ) : ( + + + { + if (props.message.file) { + window.open( + props.message + .file as string, + '_blank' + ) + } + }} + className='smallScroll' + sx={{ + overflowY: 'scroll', + position: 'relative', + padding: '15px 23px', + + border: `1px solid ${ + theme === 'dark' + ? '#303035' + : '#EFF0F2' + }`, + + boxShadow: 'none', + fontSize: '15px', + marginTop: 0.5, + textAlign: 'left', + fontFamily: + 'Raleway,sans-serif', + borderRadius: '13px', + '& p': { + color: 'inherit', + fontStyle: 'inherit', + }, + ...flexStyle, + }} + > + - Удалить - - + + + + - - {!props.message.is_sent && ( - + + + + + + + + + + + + - )} - - - 30 - ? 'pre-wrap' - : 'pre', - }} - > - {/**/} - {props.message.content} - + > + { + copy( + props.message + .content + ) + }} + > + + + + + + + Копировать + + { + if ( + props.deleteMessage + ) + props.deleteMessage( + props + .message + .uid + ) + }} + > + + + + Удалить + + + + + {!props.message.is_sent && ( + 1 + )} + + 30 + ? 'pre-wrap' + : 'pre', + }} + > + {/**/} + {props.message.content} + + - + ) ) : ( @@ -7,6 +7,8 @@ import { useAppSelector } from '@/src/main/store/store' import { TooltipCustom } from '@/src/shared' import { Message } from '@/src/shared/lib/types/model' import { BotMessage } from '@/src/widgets/messages/ui/bot-message' +import { Markdown } from '../../markdown/markdown' +import { useThemeAndDevice } from '@/src/shared/lib/hooks' interface IMessagesList { // messageResponse: Message[] | null @@ -66,6 +68,21 @@ export const UserMessage = React.memo(function UserMessage({ const theme = useAppSelector((state) => state.theme.theme) + const flexStyle = + props.message.file && props.modelType !== 'chatgpt' + ? { + display: 'flex', + alignItems: 'center', + justifyContent: 'start', + gap: '12px', + color: '#7f7df3 !important', + fontWeight: '600 !important', + lineHeight: '140%', + letterSpacing: '0.2px', + cursor: 'pointer', + } + : {} + return ( <> @@ -98,63 +115,342 @@ export const UserMessage = React.memo(function UserMessage({ {props.message.file ? ( - - - + + { + if (!props.message.file) return + setCurrentSrc( + props.message.file.toString() + ) + setModal(true) + }} + onLoadingComplete={() => + setLoaded(true) + } + style={{ + objectFit: 'contain', + height: '100%', + width: '100%', + borderRadius: '13px', + cursor: 'pointer', + opacity: loaded ? '100%' : '0%', + minWidth: '100px', + minHeight: '100px', + }} + width={500} + height={500} + src={props.message.file.toString()} + alt={ + 'К сожалению, изображение не загрузилось' + } + /> + {!loaded && ( + + )} + + + + + + + + + + + + + + + { + copy( + props.message + .content + ) + }} + > + + + + + + + Копировать + + { + if (props.deleteMessage) + props.deleteMessage( + props.message + .uid + ) + }} + > + + + + Удалить + + + + + {!props.message.is_sent && ( + 1 + )} + + + 30 + ? 'pre-wrap' + : 'pre', + }} + > + {/**/} + {props.message.content} + + + + ) : ( + + { - if (!props.message.file) return - setCurrentSrc( - props.message.file.toString() - ) - setModal(true) + if (props.message.file) { + window.open( + props.message.file as string, + '_blank' + ) + } }} - onLoadingComplete={() => setLoaded(true)} - style={{ - objectFit: 'contain', - height: '100%', - width: '100%', + className='smallScroll' + sx={{ + overflowY: 'scroll', + position: 'relative', + padding: '15px 23px', + display: 'flex', + alignItems: 'center', + gap: '15px', + border: `1px solid ${ + theme === 'dark' + ? '#303035' + : '#EFF0F2' + }`, + color: + theme === 'light' + ? '#5E5E5E' + : '#A6A5A5', + boxShadow: 'none', + lineHeight: '22.5px', + fontSize: '15px', + marginTop: 0.5, + textAlign: 'left', + fontFamily: 'Raleway,sans-serif', borderRadius: '13px', - cursor: 'pointer', - opacity: loaded ? '100%' : '0%', - minWidth: '100px', - minHeight: '100px', + '& p': { + color: 'inherit', + fontStyle: 'inherit', + }, + ...flexStyle, }} - width={500} - height={500} - src={props.message.file.toString()} - alt={ - 'К сожалению, изображение не загрузилось' - } - /> - {!loaded && ( - + + + + + + + - )} - - - + + { - copy(props.message.content) + copy( + props.message.content + ? props.message + .content + : (props.message + .file as string)! + .split( + '/' + )[4] + .split( + '?' + )[0] + ) }} > - - {!props.message.is_sent && ( - 1 - )} - - 30 - ? 'pre-wrap' - : 'pre', - }} - > - {/**/} - {props.message.content} - - + ) ) : (