diff --git a/src/people/hiveChat/index.tsx b/src/people/hiveChat/index.tsx index 9e81810c..38fd8b8a 100644 --- a/src/people/hiveChat/index.tsx +++ b/src/people/hiveChat/index.tsx @@ -8,6 +8,7 @@ import { SOCKET_MSG } from 'config/socket'; import styled from 'styled-components'; import { EuiLoadingSpinner } from '@elastic/eui'; import MaterialIcon from '@material/react-material-icon'; +import { renderMarkdown } from '../utils/RenderMarkdown.tsx'; interface RouteParams { uuid: string; @@ -92,7 +93,7 @@ const MessageBubble = styled.div<{ isUser: boolean }>` margin: 12px 0; padding: 12px 16px; border-radius: 12px; - background-color: ${(props: MessageBubbleProps) => (props.isUser ? '#34A853' : '#4285f4')}; + background-color: ${(props: MessageBubbleProps) => (props.isUser ? '#808080' : '#F2F3F5')}; color: ${(props: MessageBubbleProps) => (props.isUser ? 'white' : '#202124')}; align-self: ${(props: MessageBubbleProps) => (props.isUser ? 'flex-end' : 'flex-start')}; word-wrap: break-word; @@ -372,7 +373,12 @@ export const HiveChatView: React.FC = observer(() => { {messages.map((msg: ChatMessage) => ( - {msg.message} + {renderMarkdown(msg.message, { + codeBlockBackground: '#282c34', + textColor: '#abb2bf', + borderColor: '#444', + codeBlockFont: 'Courier New' + })} ))} diff --git a/src/people/utils/RenderMarkdown.tsx b/src/people/utils/RenderMarkdown.tsx index 0a5492c3..da77779f 100644 --- a/src/people/utils/RenderMarkdown.tsx +++ b/src/people/utils/RenderMarkdown.tsx @@ -2,10 +2,24 @@ import React from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import rehypeRaw from 'rehype-raw'; -import { colors } from '../../config/colors'; +import { colors } from '../../config'; -export function renderMarkdown(markdown: any) { +interface CustomStyles { + codeBlockBackground?: string; + codeBlockFont?: string; + textColor?: string; + borderColor?: string; +} + +export function renderMarkdown(markdown: any, customStyles?: CustomStyles) { const color = colors['light']; + const { + codeBlockBackground = '#050038', + codeBlockFont = 'monospace', + textColor = '#ffffff', + borderColor = '#444' + } = customStyles || {}; + return ( - {children} - + const useStyling = !!customStyles; + + return useStyling ? ( +
+              {children}
+            
+ ) : ( +
+              {children}
+            
); }, img({ className, ...props }: any) { + // Images styling is always applied return (