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

Jump to bottom

render chat messages as markdown #263

Merged
merged 2 commits into from
Aug 29, 2023
Merged

render chat messages as markdown #263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a0e10e
render chat messages as markdown
Rainson12 Aug 28, 2023
7d6bcca
remove unnecessary code
Rainson12 Aug 28, 2023
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
4 changes: 3 additions & 1 deletion webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@
"microsoft-cognitiveservices-speech-sdk": "^1.31.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.2"
"react-markdown": "^8.0.7",
"react-redux": "^8.1.2",
"remark-gfm": "^3.0.1"
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
Expand Down
16 changes: 8 additions & 8 deletions webapp/src/components/chat/chat-history/ChatHistoryTextContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

import { makeStyles } from '@fluentui/react-components';
import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { IChatMessage } from '../../../libs/models/ChatMessage';
import { convertToAnchorTags } from '../../utils/TextUtils';
import * as utils from './../../utils/TextUtils';

const useClasses = makeStyles({
Expand All @@ -18,12 +19,11 @@ interface ChatHistoryTextContentProps {

export const ChatHistoryTextContent: React.FC<ChatHistoryTextContentProps> = ({ message }) => {
const classes = useClasses();
const content = utils.formatChatTextContent(message.content);

let content = message.content.trim().replace(/[\u00A0-\u9999<>&]/g, function (i: string) {
return `&#${i.charCodeAt(0)};`;
});
content = utils.formatChatTextContent(content);
content = content.replace(/\n/g, '<br />').replace(/ {2}/g, '&nbsp;&nbsp;');

return <div className={classes.content} dangerouslySetInnerHTML={{ __html: convertToAnchorTags(content) }} />;
return (
<div className={classes.content}>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
</div>
);
};
21 changes: 0 additions & 21 deletions webapp/src/components/utils/TextUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,5 @@
import { Body1, tokens } from '@fluentui/react-components';

/*
* Function to detect and convert URLs within a string into clickable links.
* It wraps each link matched with anchor tags and applies safe href attributes.
*/
export function convertToAnchorTags(htmlString: string) {
// Regular expression to match links, excluding any HTML tags at the end
// Since response from bot is plain text, sometimes line breaks and other html tags are included in the response for readability.
const linkRegex =
/(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-/]))?(?=(<br|<p|<div|<span)\s*\/>|$)/g;

const result = htmlString.replace(linkRegex, function (link) {
// Parse URL first -- URL class handles cybersecurity concerns related to URL parsing and manipulation
const safeHref = new URL(link).toString();

// Replace each link with anchor tags
return `<a href="${safeHref}">${link}</a>`;
});

return result;
}

/*
* Function to check if date is today.
*/
Expand Down
Loading