prevent markdown table from breaking on formatted nodes

extensions/vscode/e2e/selectors/GUI.selectors.ts

@@ -148,6 +148,14 @@ export class GUISelectors {
   }
 
   public static getThreadMessageByText(view: WebView, text: string) {
+    void view.findElement(By.xpath(`//*[@class="thread-message"]`)).then(e=>{
+      console.log('debug1 thread element: ', e);
+    });
+
+    void view.findElement(By.xpath(`//*[@class="thread-message"]`)).getText().then(e=>{
+      console.log('debug1 thread message: ', e);
+    });
+
     return view.findWebElement(
       By.xpath(`//*[@class="thread-message"]//*[contains(text(), "${text}")]`),
     );

extensions/vscode/e2e/tests/GUI.test.ts

@@ -382,7 +382,8 @@ describe("GUI Test", () => {
   });
 
   describe("Repeat back the system message", () => {
-    it("should repeat back the system message", async () => {
+    it("should repeat back the system message", async function () {
+      this.timeout(DEFAULT_TIMEOUT.XL);
       await GUIActions.selectModelFromDropdown(view, "SYSTEM MESSAGE MOCK LLM");
       const [messageInput] = await GUISelectors.getMessageInputFields(view);
       await messageInput.sendKeys("Hello");

gui/src/components/StyledMarkdownPreview/markdown.css

@@ -1037,3 +1037,10 @@ body[data-color-mode*="light"] {
 .token.entity {
   cursor: help;
 }
+/* 
+.markdown-table th {
+  background-color: var(--color-fg-muted);
+}
+.markdown-table td {
+  background-color: var(--color-fg-subtle);
+} */

gui/src/components/StyledMarkdownPreview/utils/remarkTables.tsx

@@ -22,8 +22,11 @@ import { visit } from "unist-util-visit";
 */
 export function remarkTables() {
   return (tree: any) => {
-    visit(tree, "text", (node, index, parent) => {
-      const { value } = node;
+    visit(tree, "paragraph", (paragraphNode, index, parentOfParagraphNode) => {
+      let buffer = "";
+      visit(paragraphNode, "text", (textNode) => {
+        buffer += textNode.value;
+      });
 
       const tableRegex =
         /((?:\| *[^|\r\n]+ *)+\|)(?:\r?\n)((?:\|[ :]?-+[ :]?)+\|)((?:(?:\r?\n)(?:\| *[^|\r\n]+ *)+\|)+)/g;
@@ -33,7 +36,8 @@ export function remarkTables() {
       let lastIndex = 0;
       const newNodes = [];
       let failed = false;
-      while ((match = tableRegex.exec(value)) !== null) {
+
+      while ((match = tableRegex.exec(buffer)) !== null) {
         const fullTableString = match[0];
         const headerGroup = match[1];
         const separatorGroup = match[2];
@@ -62,6 +66,11 @@ export function remarkTables() {
           const tableNode = {
             type: "table",
             align: alignments,
+            data: {
+              hProperties: {
+                class: "markdown-table",
+              },
+            },
             children: [
               {
                 type: "tableRow",
@@ -77,7 +86,6 @@ export function remarkTables() {
                   type: "tableRow",
                   data: {
                     hProperties: {
-                      class: "markdown-table",
                       key: i,
                     },
                   },
@@ -95,7 +103,7 @@ export function remarkTables() {
           if (match.index > lastIndex) {
             newNodes.push({
               type: "text",
-              value: value.slice(lastIndex, match.index),
+              value: buffer.slice(lastIndex, match.index),
             });
           }
 
@@ -117,16 +125,16 @@ export function remarkTables() {
       }
 
       // Add any remaining text after the last table
-      if (lastIndex < value.length) {
+      if (lastIndex < buffer.length) {
         newNodes.push({
           type: "text",
-          value: value.slice(lastIndex),
+          value: buffer.slice(lastIndex),
         });
       }
 
-      // Replace the original text node with the new nodes
+      // Replace the original paragraph node with the new nodes
       if (newNodes.length > 0) {
-        parent.children.splice(index, 1, ...newNodes);
+        parentOfParagraphNode.children.splice(index, 1, ...newNodes);
       }
     });
   };