fix: Resolve errors caused by Chrome's translation feature

- Fix JavaScript errors occurring when Chrome's translation feature is enabled
- Resolve conflicts between elements inserted by the translation feature and application's DOM manipulation

References:
- facebook/react#11538 (comment)

Related Issue: aws-samples#518

packages/web/src/components/ChatMessage.tsx

@@ -116,19 +116,21 @@ const ChatMessage: React.FC<Props> = (props) => {
                   </div>
                 )}
                 {typingTextOutput.split('\n').map((c, idx) => (
-                  <div key={idx}>{c}</div>
+                    <div key={idx}>{c}</div>
                 ))}
               </div>
             )}
             {chatContent?.role === 'assistant' && (
-              <Markdown prefix={`${props.idx}`}>
-                {typingTextOutput +
-                  `${
-                    props.loading && (chatContent?.content ?? '') !== ''
-                      ? '▍'
-                      : ''
-                  }`}
-              </Markdown>
+                <span>
+                  <Markdown prefix={`${props.idx}`}>
+                    {typingTextOutput +
+                        `${
+                            props.loading && (chatContent?.content ?? '') !== ''
+                                ? '▍'
+                                : ''
+                        }`}
+                  </Markdown>
+                </span>
             )}
             {chatContent?.role === 'system' && (
               <div className="break-all">