From 3e071789e0cb2e3ff90b0907028e4e54a703b87f Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Thu, 19 Dec 2024 06:22:48 +0300
Subject: [PATCH] integrate markdown parsing into chat interface

---
 src/people/hiveChat/index.tsx       | 10 ++++--
 src/people/utils/RenderMarkdown.tsx | 47 ++++++++++++++++++++++++-----
 2 files changed, 48 insertions(+), 9 deletions(-)

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(() => {
         <ChatHistory ref={chatHistoryRef}>
           {messages.map((msg: ChatMessage) => (
             <MessageBubble key={msg.id} isUser={msg.role === 'user'}>
-              {msg.message}
+              {renderMarkdown(msg.message, {
+                codeBlockBackground: '#282c34',
+                textColor: '#abb2bf',
+                borderColor: '#444',
+                codeBlockFont: 'Courier New'
+              })}
             </MessageBubble>
           ))}
         </ChatHistory>
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 (
     <ReactMarkdown
       children={markdown}
@@ -13,16 +27,35 @@ export function renderMarkdown(markdown: any) {
       rehypePlugins={[rehypeRaw]}
       components={{
         code({ className, children, ...props }: any) {
-          return (
-            <code className={className} {...props}>
-              {children}
-            </code>
+          const useStyling = !!customStyles;
+
+          return useStyling ? (
+            <pre
+              style={{
+                backgroundColor: codeBlockBackground,
+                color: textColor,
+                fontFamily: codeBlockFont,
+                padding: '12px 16px',
+                borderRadius: '6px',
+                border: `1px solid ${borderColor}`,
+                display: 'block',
+                overflowX: 'auto'
+              }}
+              {...props}
+            >
+              <code className={className}>{children}</code>
+            </pre>
+          ) : (
+            <pre {...props}>
+              <code className={className}>{children}</code>
+            </pre>
           );
         },
         img({ className, ...props }: any) {
+          // Images styling is always applied
           return (
             <img
-              alt={'Markodown'}
+              alt={'Markdown'}
               className={className}
               style={{
                 width: '100%',