feat: strip markdown in messages table (#336)

Author: kantord

package-lock.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",

package.json

@@ -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) {