fix: agent own message table

illacloud · Feb 29, 2024 · 1886311 · 1886311
1 parent 5356cb6
commit 1886311
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 17 deletions.
diff --git a/apps/builder/src/page/AI/AIAgent/style.ts b/apps/builder/src/page/AI/AIAgent/style.ts
@@ -74,8 +74,10 @@ export const leftPanelTitleTextStyle = css`
 
 export const rightPanelContainerStyle = css`
   height: 100%;
+  width: 100%;
   display: flex;
   flex-grow: 1;
+  overflow-x: hidden;
   flex-direction: column;
 `
 

diff --git a/apps/builder/src/page/AI/components/MarkdownMessage/index.tsx b/apps/builder/src/page/AI/components/MarkdownMessage/index.tsx
@@ -72,7 +72,7 @@ export const MarkdownMessage: FC<MarkdownMessageProps> = (props) => {
               code: (props) => <Code {...props} />,
             }}
           >
-            {convertMarkdownTables(children ?? "")}
+            {convertMarkdownTables(children ?? "", isOwnMessage)}
           </ReactMarkdown>
         </Typography>
       </div>

diff --git a/apps/builder/src/page/AI/components/MarkdownMessage/utils.ts b/apps/builder/src/page/AI/components/MarkdownMessage/utils.ts
@@ -12,22 +12,38 @@ const markCodeBlocks = (markdownText: string) => {
   return { textWithoutCodeBlocks: tempText, placeholders }
 }
 
-const convertTablesWithoutCodeBlocks = (tempText: string) => {
+const convertTablesWithoutCodeBlocks = (
+  tempText: string,
+  isOwnMessage?: boolean,
+) => {
   let res = tempText
-  let startRex = /(^\n?\|)|((\n\n)(.*)\|)/
-  let endRex = /(\|\n?$)|(\|\n\n)/
 
-  if (startRex.test(tempText) && endRex.test(tempText)) {
-    res = tempText.replace(startRex, (match) => {
-      return `\n\`\`\`markdown\n${match.trim()}`
-    })
-    res = res.replace(endRex, (match) => {
-      return `${match.trim()}\n\`\`\`\n`
-    })
-  } else if (startRex.test(tempText)) {
-    res = tempText.replace(startRex, (match) => {
-      return `\n\`\`\`markdown\n${match.trim()}`
-    })
+  if (isOwnMessage) {
+    const startRex = /(^\n?\|)|((\n\n)(.*)\|)/g
+    const endRex = /(\|\n?$)|(\|\n\n)/g
+    if (startRex.test(tempText) && endRex.test(tempText)) {
+      res = tempText.replace(startRex, (match) => {
+        return `\n\`\`\`markdown\n${match.trim()}`
+      })
+      res = res.replace(endRex, (match) => {
+        return `${match.trim()}\n\`\`\`\n`
+      })
+    }
+  } else {
+    const startRex = /(^\n?\|)|((\n\n)(.*)\|)/
+    const endRex = /(\|\n?$)|(\|\n\n)/
+    if (startRex.test(tempText) && endRex.test(tempText)) {
+      res = tempText.replace(startRex, (match) => {
+        return `\n\`\`\`markdown\n${match.trim()}`
+      })
+      res = res.replace(endRex, (match) => {
+        return `${match.trim()}\n\`\`\`\n`
+      })
+    } else if (startRex.test(tempText)) {
+      res = tempText.replace(startRex, (match) => {
+        return `\n\`\`\`markdown\n${match.trim()}`
+      })
+    }
   }
   return res
 }
@@ -47,9 +63,15 @@ const restoreCodeBlocks = (
   return textWithPlaceholders
 }
 
-export const convertMarkdownTables = (markdownText: string) => {
+export const convertMarkdownTables = (
+  markdownText: string,
+  isOwnMessage?: boolean,
+) => {
   const { textWithoutCodeBlocks, placeholders } = markCodeBlocks(markdownText)
-  let convertedText = convertTablesWithoutCodeBlocks(textWithoutCodeBlocks)
+  let convertedText = convertTablesWithoutCodeBlocks(
+    textWithoutCodeBlocks,
+    isOwnMessage,
+  )
   convertedText = restoreCodeBlocks(convertedText, placeholders)
   return convertedText
 }
diff --git a/apps/builder/src/page/AI/components/PreviewChat/style.ts b/apps/builder/src/page/AI/components/PreviewChat/style.ts
@@ -68,6 +68,7 @@ export const chatContainerStyle = css`
   overflow-y: auto;
   height: 100%;
   padding-bottom: 110px;
+  width: 100%;
 `
 
 export const mobileInputElementStyle = css`