Merge pull request #606 from aws-samples/markdown-memo

長いチャットで入力が遅くなる問題

browser-extension/src/app/features/chat/ChatMessage.tsx

@@ -19,7 +19,7 @@ const ChatMessage: React.FC<Props> = (props) => {
       className={twMerge(
         'border-t last:border-b p-2',
         isUser ? 'bg-aws-squid-ink brightness-150' : '',
-        props.className
+        props.className,
       )}
     >
       {message.title && (
@@ -39,7 +39,7 @@ const ChatMessage: React.FC<Props> = (props) => {
         className={twMerge(
           'transition-all ',
           message.role === 'system' && isOpen && 'max-h-[300px] overflow-y-auto',
-          message.role === 'system' && !isOpen && 'max-h-0 overflow-hidden'
+          message.role === 'system' && !isOpen && 'max-h-0 overflow-hidden',
         )}
       >
         {message.content.split('\n').map((c, idx) => (

browser-extension/src/app/features/chat/InputContent.tsx

@@ -103,7 +103,7 @@ ${formValues[idx]}
             <div key={idx}>
               <div className="text-xs">{def.label}</div>
               <TextareaChatContent
-                value={def.autoCopy ? content : formValues[idx] ?? ''}
+                value={def.autoCopy ? content : (formValues[idx] ?? '')}
                 onChange={(value) => {
                   setFormValues(
                     produce(formValues, (draft) => {

browser-extension/src/app/features/chat/chatSlice.ts

@@ -36,7 +36,7 @@ export const chatSlice = createSlice({
     },
     updateMessageContent: (
       state,
-      action: PayloadAction<TabId & { index: number; content: string }>
+      action: PayloadAction<TabId & { index: number; content: string }>,
     ) => {
       setInitialStateIfNeeded(state, action.payload.tabId);
       state[action.payload.tabId].messages[action.payload.index].content = action.payload.content;
@@ -63,7 +63,7 @@ export const replaceMessages =
       setMessages({
         tabId,
         messages,
-      })
+      }),
     );
   };
 
@@ -78,7 +78,7 @@ export const pushMessages =
         messages: produce(currentMessages, (draft) => {
           draft.push(...messages);
         }),
-      })
+      }),
     );
   };
 
@@ -95,7 +95,7 @@ export const overwriteLatestMessage =
         tabId,
         index: currentMessages.length - 1,
         content: content.replace(/<([^>]+)>([\s\S]*?)<\/\1>/, '$2'),
-      })
+      }),
     );
   };
 

browser-extension/src/app/features/chat/useChat.ts

@@ -84,7 +84,7 @@ const useChat = () => {
                   role: 'assistant',
                   content: '▍',
                 },
-              ])
+              ]),
         );
 
         // Assistant の発言を更新

packages/web/src/components/Markdown.tsx

@@ -66,7 +66,7 @@ const ImageRenderer = (props: any) => {
   return <img id={props.id} src={src} />;
 };
 
-const Markdown: React.FC<Props> = ({ className, prefix, children }) => {
+const Markdown = React.memo(({ className, prefix, children }: Props) => {
   return (
     <ReactMarkdown
       className={`${
@@ -114,6 +114,6 @@ const Markdown: React.FC<Props> = ({ className, prefix, children }) => {
       }}
     />
   );
-};
+});
 
 export default Markdown;