Merge pull request stakwork#793 from MahtabBukhari/Integrate-Markdown…

…-Parsing-into-Chat-Interface Integrate Markdown Parsing into Chat Interface
aliraza556 · Dec 19, 2024 · 8c08f3b · 8c08f3b
2 parents 8aacc81 + 3e07178
commit 8c08f3b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git 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
@@ -2,27 +2,60 @@ 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}
       remarkPlugins={[remarkGfm]}
       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%',