Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate Markdown Parsing into Chat Interface #793

Merged
merged 1 commit into from
Dec 19, 2024
Merged

Integrate Markdown Parsing into Chat Interface #793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/people/hiveChat/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
47 changes: 40 additions & 7 deletions src/people/utils/RenderMarkdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand Down
Loading