diff --git a/libs/remix-ui/remix-ai-assistant/src/components/chat.tsx b/libs/remix-ui/remix-ai-assistant/src/components/chat.tsx index 92360d078fe..4889f9605e0 100644 --- a/libs/remix-ui/remix-ai-assistant/src/components/chat.tsx +++ b/libs/remix-ui/remix-ai-assistant/src/components/chat.tsx @@ -1,13 +1,15 @@ -import ReactMarkdown from "react-markdown" -import remarkGfm from "remark-gfm" -import copy from "copy-to-clipboard" -import { ChatMessage, assistantAvatar } from "../lib/types" +import ReactMarkdown from 'react-markdown' +import remarkGfm from 'remark-gfm' +import rehypeRaw from 'rehype-raw' +import rehypeSanitize from 'rehype-sanitize' +import copy from 'copy-to-clipboard' +import { ChatMessage, assistantAvatar } from '../lib/types' import React, { useState, useEffect } from 'react' -import { CustomTooltip } from "@remix-ui/helper" +import { CustomTooltip } from '@remix-ui/helper' import { sampleConversationStarters, type ConversationStarter -} from "../lib/conversationStarters" +} from '../lib/conversationStarters' // ChatHistory component export interface ChatHistoryComponentProps { @@ -16,12 +18,20 @@ export interface ChatHistoryComponentProps { sendPrompt: (prompt: string) => void recordFeedback: (msgId: string, next: 'like' | 'dislike' | 'none') => void historyRef: React.RefObject + theme: string } interface AiChatIntroProps { sendPrompt: (prompt: string) => void } +export function normalizeMarkdown(input: string): string { + return input + .trim() + .replace(/\n{2,}/g, "\n\n") + .replace(/[ \t]+$/gm, ""); +} + const AiChatIntro: React.FC = ({ sendPrompt }) => { const [conversationStarters, setConversationStarters] = useState([]) @@ -61,12 +71,15 @@ const AiChatIntro: React.FC = ({ sendPrompt }) => { ) } +const content = [] + export const ChatHistoryComponent: React.FC = ({ messages, isStreaming, sendPrompt, recordFeedback, - historyRef + historyRef, + theme }) => { return (
= ({ )} - {msg.role === 'assistant' ? ( - + {msg.role === 'assistant' ? ( + + {text} + + ) + } return ( - - {text} - +
+ {language && ( +
+ {language} + +
+ )} + {!language && ( + + )} + 
+                                  {text}
+
+
) - } - - return ( -
- - 
-                                {text}
-
+ }, + // Paragraphs + p: ({ node, ...props }) => ( +

+ ), + // Headings + h1: ({ node, ...props }) => ( +

+ ), + h2: ({ node, ...props }) => ( +

+ ), + h3: ({ node, ...props }) => ( +

+ ), + h4: ({ node, ...props }) => ( +

+ ), + h5: ({ node, ...props }) => ( +

+ ), + h6: ({ node, ...props }) => ( +
+ ), + // Lists + ul: ({ node, ...props }) => ( +