From 5bafb472ed7c95f948c22da81a1188c7a1cb4883 Mon Sep 17 00:00:00 2001
From: Ihara <mayonnaise.3048.meter@gmail.com>
Date: Tue, 9 Jul 2024 16:07:44 +0900
Subject: [PATCH] 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:
- https://github.com/facebook/react/issues/11538#issuecomment-390386520

Related Issue: #518
---
 packages/web/src/components/ChatMessage.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/ChatMessage.tsx b/packages/web/src/components/ChatMessage.tsx
index 7a181483..e2320ae1 100644
--- a/packages/web/src/components/ChatMessage.tsx
+++ b/packages/web/src/components/ChatMessage.tsx
@@ -121,14 +121,16 @@ const ChatMessage: React.FC<Props> = (props) => {
               </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">