diff --git a/src/components/Chat/ChatContent/Message/MessageContent.tsx b/src/components/Chat/ChatContent/Message/MessageContent.tsx
index b6f0eba..87e9b71 100644
--- a/src/components/Chat/ChatContent/Message/MessageContent.tsx
+++ b/src/components/Chat/ChatContent/Message/MessageContent.tsx
@@ -1,13 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, {
+ DetailedHTMLProps,
+ HTMLAttributes,
+ useEffect,
+ useState,
+} from 'react';
import ReactMarkdown from 'react-markdown';
+import { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react';
import rehypeKatex from 'rehype-katex';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeHighlight from 'rehype-highlight';
import remarkMath from 'remark-math';
import remarkGfm from 'remark-gfm';
-import hljs from 'highlight.js';
-import DOMPurify from 'dompurify';
import useStore from '@store/store';
-import CopyIcon from '@icon/CopyIcon';
import EditIcon2 from '@icon/EditIcon2';
import DeleteIcon from '@icon/DeleteIcon';
import TickIcon from '@icon/TickIcon';
@@ -20,6 +25,8 @@ import useSubmit from '@hooks/useSubmit';
import { ChatInterface } from '@type/chat';
import PopupModal from '@components/PopupModal';
+import CodeBlock from './CodeBlock';
+import { codeLanguageSubset } from '@constants/chat';
const MessageContent = ({
role,
@@ -100,6 +107,14 @@ const ContentView = React.memo(
setChats(updatedChats);
};
+ const handleMoveUp = () => {
+ handleMove('up');
+ };
+
+ const handleMoveDown = () => {
+ handleMove('down');
+ };
+
const handleRefresh = () => {
const updatedChats: ChatInterface[] = JSON.parse(
JSON.stringify(useStore.getState().chats)
@@ -114,70 +129,26 @@ const ContentView = React.memo(
<>
{children};
- const [copied, setCopied] = useState(false);
-
- let highlight;
- const match = /language-(\w+)/.exec(className || '');
- const lang = match && match[1];
- const isMatch = lang && hljs.getLanguage(lang);
- if (isMatch)
- highlight = hljs.highlight(children.toString(), {
- language: lang,
- });
- else highlight = hljs.highlightAuto(children.toString());
-
- return (
-
-
- {highlight.language}
-
-
-
-
{children}
;
- },
+ code,
+ p,
}}
>
{content}
@@ -189,11 +160,9 @@ const ContentView = React.memo(
{role === 'assistant' && messageIndex === lastMessageIndex && (
)}
- {messageIndex !== 0 && (
- handleMove('up')} />
- )}
+ {messageIndex !== 0 && }
{messageIndex !== lastMessageIndex && (
- handleMove('down')} />
+
)}
@@ -219,6 +188,33 @@ const ContentView = React.memo(
}
);
+const code = React.memo((props: CodeProps) => {
+ const { inline, className, children } = props;
+ const match = /language-(\w+)/.exec(className || '');
+ const lang = match && match[1];
+
+ if (inline) {
+ return {children};
+ } else {
+ return ;
+ }
+});
+
+const p = React.memo(
+ (
+ props?: Omit<
+ DetailedHTMLProps<
+ HTMLAttributes,
+ HTMLParagraphElement
+ >,
+ 'ref'
+ > &
+ ReactMarkdownProps
+ ) => {
+ return {props?.children}
;
+ }
+);
+
const MessageButton = ({
onClick,
icon,
@@ -238,23 +234,29 @@ const MessageButton = ({
);
};
-const EditButton = ({
- setIsEdit,
-}: {
- setIsEdit: React.Dispatch>;
-}) => {
- return } onClick={() => setIsEdit(true)} />;
-};
+const EditButton = React.memo(
+ ({
+ setIsEdit,
+ }: {
+ setIsEdit: React.Dispatch>;
+ }) => {
+ return (
+ } onClick={() => setIsEdit(true)} />
+ );
+ }
+);
-const DeleteButton = ({
- setIsDelete,
-}: {
- setIsDelete: React.Dispatch>;
-}) => {
- return (
- } onClick={() => setIsDelete(true)} />
- );
-};
+const DeleteButton = React.memo(
+ ({
+ setIsDelete,
+ }: {
+ setIsDelete: React.Dispatch>;
+ }) => {
+ return (
+ } onClick={() => setIsDelete(true)} />
+ );
+ }
+);
const DownButton = ({
onClick,
@@ -263,7 +265,6 @@ const DownButton = ({
}) => {
return } onClick={onClick} />;
};
-
const UpButton = ({
onClick,
}: {
@@ -276,7 +277,6 @@ const UpButton = ({
/>
);
};
-
const RefreshButton = ({
onClick,
}: {
@@ -284,7 +284,6 @@ const RefreshButton = ({
}) => {
return } onClick={onClick} />;
};
-
const EditView = ({
content,
setIsEdit,
@@ -394,6 +393,40 @@ const EditView = ({
rows={1}
>
+
+ {isModalOpen && (
+
+ )}
+
+ );
+};
+
+const EditViewButtons = React.memo(
+ ({
+ sticky = false,
+ handleSaveAndSubmit,
+ handleSave,
+ setIsModalOpen,
+ setIsEdit,
+ }: {
+ sticky?: boolean;
+ handleSaveAndSubmit: () => void;
+ handleSave: () => void;
+ setIsModalOpen: React.Dispatch
>;
+ setIsEdit: React.Dispatch>;
+ }) => {
+ return (
{sticky && (
- {isModalOpen && (
-
- )}
-
- );
-};
+ );
+ }
+);
export default MessageContent;
diff --git a/src/components/Chat/ChatContent/Message/RoleSelector.tsx b/src/components/Chat/ChatContent/Message/RoleSelector.tsx
index 3806b03..b127e45 100644
--- a/src/components/Chat/ChatContent/Message/RoleSelector.tsx
+++ b/src/components/Chat/ChatContent/Message/RoleSelector.tsx
@@ -4,65 +4,67 @@ import useStore from '@store/store';
import DownChevronArrow from '@icon/DownChevronArrow';
import { ChatInterface, Role, roles } from '@type/chat';
-const RoleSelector = ({
- role,
- messageIndex,
- sticky,
-}: {
- role: Role;
- messageIndex: number;
- sticky?: boolean;
-}) => {
- const setInputRole = useStore((state) => state.setInputRole);
- const setChats = useStore((state) => state.setChats);
- const currentChatIndex = useStore((state) => state.currentChatIndex);
+const RoleSelector = React.memo(
+ ({
+ role,
+ messageIndex,
+ sticky,
+ }: {
+ role: Role;
+ messageIndex: number;
+ sticky?: boolean;
+ }) => {
+ const setInputRole = useStore((state) => state.setInputRole);
+ const setChats = useStore((state) => state.setChats);
+ const currentChatIndex = useStore((state) => state.currentChatIndex);
- const [dropDown, setDropDown] = useState(false);
+ const [dropDown, setDropDown] = useState(false);
- return (
-
-
-
-
+
+ {role.charAt(0).toUpperCase() + role.slice(1)}
+
+
+
+
+ {roles.map((r) => (
+ - {
+ if (!sticky) {
+ const updatedChats: ChatInterface[] = JSON.parse(
+ JSON.stringify(useStore.getState().chats)
+ );
+ updatedChats[currentChatIndex].messages[messageIndex].role =
+ r;
+ setChats(updatedChats);
+ } else {
+ setInputRole(r);
+ }
+ setDropDown(false);
+ }}
+ key={r}
+ >
+ {r.charAt(0).toUpperCase() + r.slice(1)}
+
+ ))}
+
+
-