From c228e3329952c2b32b064a0d45705112ea660293 Mon Sep 17 00:00:00 2001
From: Daniel Kantor <kd@stacklok.com>
Date: Wed, 19 Feb 2025 11:58:19 +0100
Subject: [PATCH] feat: strip markdown in messages table

---
 package-lock.json                             | 29 +++++++++++++++++++
 package.json                                  |  2 ++
 .../components/table-messages.tsx             | 10 +++++--
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2ad375ba..9b3509a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,9 @@
         "react-markdown": "^9.0.1",
         "react-router-dom": "^7.1.1",
         "react-syntax-highlighter": "^15.6.1",
+        "remark": "^15.0.1",
         "remark-gfm": "^4.0.0",
+        "strip-markdown": "^6.0.0",
         "tailwind-merge": "^2.5.5",
         "tailwind-variants": "^0.3.1",
         "tailwindcss-animate": "^1.0.7",
@@ -12282,6 +12284,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remark": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/remark/-/remark-15.0.1.tgz",
+      "integrity": "sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
@@ -13179,6 +13196,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-markdown": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-markdown/-/strip-markdown-6.0.0.tgz",
+      "integrity": "sha512-mSa8FtUoX3ExJYDkjPUTC14xaBAn4Ik5GPQD45G5E2egAmeV3kHgVSTfIoSDggbF6Pk9stahVgqsLCNExv6jHw==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/style-to-object": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
diff --git a/package.json b/package.json
index 609b3e02..7940d580 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,9 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "^7.1.1",
     "react-syntax-highlighter": "^15.6.1",
+    "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
+    "strip-markdown": "^6.0.0",
     "tailwind-merge": "^2.5.5",
     "tailwind-variants": "^0.3.1",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/features/dashboard-messages/components/table-messages.tsx b/src/features/dashboard-messages/components/table-messages.tsx
index b50ab1c3..3dd2ac25 100644
--- a/src/features/dashboard-messages/components/table-messages.tsx
+++ b/src/features/dashboard-messages/components/table-messages.tsx
@@ -11,6 +11,8 @@ import {
   TooltipTrigger,
 } from '@stacklok/ui-kit'
 import { Alert, Conversation, QuestionType } from '@/api/generated'
+import { remark } from 'remark'
+import strip from 'strip-markdown'
 
 import { useClientSidePagination } from '@/hooks/useClientSidePagination'
 import { TableAlertTokenUsage } from './table-alert-token-usage'
@@ -34,9 +36,11 @@ import { formatTime } from '@/lib/format-time'
 import { isAlertPii } from '@/lib/is-alert-pii'
 
 const getPromptText = (conversation: Conversation) => {
-  return (conversation.question_answers[0]?.question?.message ?? 'N/A')
-    .trim()
-    .slice(0, 200) // arbitrary slice to prevent long prompts
+  const markdownSource =
+    conversation.question_answers[0]?.question?.message ?? 'N/A'
+  const fullText = remark().use(strip).processSync(markdownSource)
+
+  return fullText.toString().trim().slice(0, 200) // arbitrary slice to prevent long prompts
 }
 
 function getTypeText(type: QuestionType) {