@ -4,6 +4,9 @@ import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
import Alert from './../assets/alert.svg' ;
import { ReactComponent as Like } from './../assets/like.svg' ;
import { ReactComponent as Dislike } from './../assets/dislike.svg' ;
import ReactMarkdown from 'react-markdown' ;
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' ;
import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism' ;
const ConversationBubble = forwardRef <
HTMLDivElement ,
@ -26,7 +29,9 @@ const ConversationBubble = forwardRef<
< div ref = { ref } className = { ` flex flex-row-reverse self-end ${ className } ` } >
< Avatar className = "mt-4 text-2xl" avatar = "🧑💻" > < / Avatar >
< div className = "mr-2 ml-10 flex items-center rounded-3xl bg-blue-1000 p-3.5 text-white" >
< p className = "whitespace-pre-wrap break-words" > { message } < / p >
< ReactMarkdown className = "whitespace-pre-wrap break-words" >
{ message }
< / ReactMarkdown >
< / div >
< / div >
) ;
@ -49,7 +54,31 @@ const ConversationBubble = forwardRef<
{ type === 'ERROR' && (
< img src = { Alert } alt = "alert" className = "mr-2 inline" / >
) }
< p className = "whitespace-pre-wrap break-words" > { message } < / p >
< ReactMarkdown
className = "whitespace-pre-wrap break-words"
components = { {
code ( { node , inline , className , children , . . . props } ) {
const match = /language-(\w+)/ . exec ( className || '' ) ;
return ! inline && match ? (
< SyntaxHighlighter
PreTag = "div"
language = { match [ 1 ] }
{ . . . props }
style = { vs }
>
{ String ( children ) . replace ( /\n$/ , '' ) }
< / SyntaxHighlighter >
) : (
< code className = { className ? className : '' } { ...props } >
{ children }
< / code >
) ;
} ,
} }
>
{ message }
< / ReactMarkdown >
< / div >
< div
className = { ` mr-2 flex items-center justify-center ${