Merge branch 'fix/agent-message' into develop

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;
 `
 

apps/builder/src/page/AI/components/MarkdownMessage/index.tsx

@@ -19,7 +19,7 @@ import {
   markdownMessageStyle,
 } from "@/page/AI/components/MarkdownMessage/style"
 import Code from "./Code"
-import { formatTable } from "./utils"
+import { convertMarkdownTables } from "./utils"
 
 export const MarkdownMessage: FC<MarkdownMessageProps> = (props) => {
   const { children, isOwnMessage } = props
@@ -72,7 +72,7 @@ export const MarkdownMessage: FC<MarkdownMessageProps> = (props) => {
               code: (props) => <Code {...props} />,
             }}
           >
-            {formatTable.convertMarkdownTables(children ?? "")}
+            {convertMarkdownTables(children ?? "", isOwnMessage)}
           </ReactMarkdown>
         </Typography>
       </div>

apps/builder/src/page/AI/components/MarkdownMessage/utils.ts

@@ -1,68 +1,77 @@
-class FormatTable {
-  private hasStartTable: boolean = false
-  private markCodeBlocks(markdownText: string) {
-    const codeBlockRegex = /```[\s\S]*?```/g
-    const placeholders: string[] = []
-    const placeholderPrefix = "__CODEBLOCK__"
-    // handler ---
-    let tempText = markdownText.replaceAll(/(^---\r?\n?)/gm, "\n---\n")
-    tempText = tempText.replace(codeBlockRegex, (match) => {
-      const placeholder = `${placeholderPrefix}${placeholders.length}`
-      placeholders.push(match)
-      return placeholder
-    })
-    return { textWithoutCodeBlocks: tempText, placeholders }
-  }
+const markCodeBlocks = (markdownText: string) => {
+  const codeBlockRegex = /```[\s\S]*?```/g
+  const placeholders: string[] = []
+  const placeholderPrefix = "__CODEBLOCK__"
+  // handler "---"
+  let tempText = markdownText.replaceAll(/(^---\r?\n?)/gm, "\n---\n")
+  tempText = tempText.replace(codeBlockRegex, (match) => {
+    const placeholder = `${placeholderPrefix}${placeholders.length}`
+    placeholders.push(match)
+    return placeholder
+  })
+  return { textWithoutCodeBlocks: tempText, placeholders }
+}
 
-  private convertTablesWithoutCodeBlocks(tempText: string) {
-    let res = tempText
-    let startRex = /(^\n?\|)|((\n\n)(.*)\|)/
-    let endRex = /(\|\n?$)|(\|\n\n)/
+const convertTablesWithoutCodeBlocks = (
+  tempText: string,
+  isOwnMessage?: boolean,
+) => {
+  let res = tempText
 
-    if (startRex.test(tempText)) {
-      this.hasStartTable = true
+  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`
+      })
     }
-
-    if (this.hasStartTable && endRex.test(tempText)) {
+  } 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`
       })
-      this.hasStartTable = false
-    } else if (this.hasStartTable) {
+    } else if (startRex.test(tempText)) {
       res = tempText.replace(startRex, (match) => {
         return `\n\`\`\`markdown\n${match.trim()}`
       })
     }
-    return res
-  }
-
-  private restoreCodeBlocks(
-    textWithPlaceholders: string,
-    placeholders: string[],
-  ) {
-    placeholders.forEach((placeholderContent, index) => {
-      const placeholder = `__CODEBLOCK__${index}`
-      textWithPlaceholders = textWithPlaceholders.replace(
-        placeholder,
-        () => placeholderContent,
-      )
-    })
-
-    return textWithPlaceholders
   }
+  return res
+}
 
-  convertMarkdownTables(markdownText: string) {
-    const { textWithoutCodeBlocks, placeholders } =
-      this.markCodeBlocks(markdownText)
-    let convertedText = this.convertTablesWithoutCodeBlocks(
-      textWithoutCodeBlocks,
+const restoreCodeBlocks = (
+  textWithPlaceholders: string,
+  placeholders: string[],
+) => {
+  placeholders.forEach((placeholderContent, index) => {
+    const placeholder = `__CODEBLOCK__${index}`
+    textWithPlaceholders = textWithPlaceholders.replace(
+      placeholder,
+      () => placeholderContent,
     )
-    convertedText = this.restoreCodeBlocks(convertedText, placeholders)
-    return convertedText
-  }
+  })
+
+  return textWithPlaceholders
 }
 
-export const formatTable = new FormatTable()
+export const convertMarkdownTables = (
+  markdownText: string,
+  isOwnMessage?: boolean,
+) => {
+  const { textWithoutCodeBlocks, placeholders } = markCodeBlocks(markdownText)
+  let convertedText = convertTablesWithoutCodeBlocks(
+    textWithoutCodeBlocks,
+    isOwnMessage,
+  )
+  convertedText = restoreCodeBlocks(convertedText, placeholders)
+  return convertedText
+}

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`