fix: stip markdown in tickets (#3115)

* fix: stip markdown in tickets

* changeset

* fixes

* fix with read

* fix

Author: veryayskiy

.changeset/ninety-experts-own.md

@@ -0,0 +1,5 @@
+---
+'posthog-js': minor
+---
+
+Strip markdown in tickets list

packages/browser/src/__tests__/extensions/conversations/utils.test.ts

@@ -0,0 +1,295 @@
+import {
+    stripMarkdown,
+    truncateText,
+    formatRelativeTime,
+} from '../../../extensions/conversations/external/components/utils'
+
+describe('conversations utils', () => {
+    describe('stripMarkdown', () => {
+        it('should return empty string for undefined input', () => {
+            expect(stripMarkdown(undefined)).toBe('')
+        })
+
+        it('should return empty string for empty string input', () => {
+            expect(stripMarkdown('')).toBe('')
+        })
+
+        it('should return plain text unchanged', () => {
+            expect(stripMarkdown('Hello world')).toBe('Hello world')
+        })
+
+        describe('headers', () => {
+            it('should strip h1 headers', () => {
+                expect(stripMarkdown('# Header 1')).toBe('Header 1')
+            })
+
+            it('should strip h2 headers', () => {
+                expect(stripMarkdown('## Header 2')).toBe('Header 2')
+            })
+
+            it('should strip h6 headers', () => {
+                expect(stripMarkdown('###### Header 6')).toBe('Header 6')
+            })
+
+            it('should strip headers with text after', () => {
+                expect(stripMarkdown('# Title\nSome content')).toBe('Title\nSome content')
+            })
+        })
+
+        describe('bold and italic', () => {
+            it('should strip bold with asterisks', () => {
+                expect(stripMarkdown('This is **bold** text')).toBe('This is bold text')
+            })
+
+            it('should strip bold with underscores', () => {
+                expect(stripMarkdown('This is __bold__ text')).toBe('This is bold text')
+            })
+
+            it('should strip italic with asterisks', () => {
+                expect(stripMarkdown('This is *italic* text')).toBe('This is italic text')
+            })
+
+            it('should strip italic with underscores', () => {
+                expect(stripMarkdown('This is _italic_ text')).toBe('This is italic text')
+            })
+
+            it('should strip nested bold and italic', () => {
+                expect(stripMarkdown('This is ***bold and italic*** text')).toBe('This is bold and italic text')
+            })
+        })
+
+        describe('strikethrough', () => {
+            it('should strip strikethrough', () => {
+                expect(stripMarkdown('This is ~~deleted~~ text')).toBe('This is deleted text')
+            })
+        })
+
+        describe('links', () => {
+            it('should convert links to just text', () => {
+                expect(stripMarkdown('Check [this link](https://example.com)')).toBe('Check this link')
+            })
+
+            it('should handle links with complex URLs', () => {
+                expect(stripMarkdown('[Click here](https://example.com/path?query=1&foo=bar)')).toBe('Click here')
+            })
+
+            it('should handle multiple links', () => {
+                expect(stripMarkdown('[Link 1](url1) and [Link 2](url2)')).toBe('Link 1 and Link 2')
+            })
+        })
+
+        describe('images', () => {
+            it('should remove images completely', () => {
+                expect(stripMarkdown('Text ![alt text](image.png) more text')).toBe('Text  more text')
+            })
+
+            it('should remove images with empty alt text', () => {
+                expect(stripMarkdown('![](image.png)')).toBe('')
+            })
+        })
+
+        describe('code', () => {
+            it('should strip inline code backticks', () => {
+                expect(stripMarkdown('Use `console.log()` to debug')).toBe('Use console.log() to debug')
+            })
+
+            it('should remove code blocks', () => {
+                expect(stripMarkdown('```javascript\nconst x = 1;\n```')).toBe('')
+            })
+
+            it('should remove code blocks with content around', () => {
+                expect(stripMarkdown('Before\n```\ncode\n```\nAfter')).toBe('Before\nAfter')
+            })
+        })
+
+        describe('blockquotes', () => {
+            it('should strip blockquote markers', () => {
+                expect(stripMarkdown('> This is a quote')).toBe('This is a quote')
+            })
+
+            it('should handle nested blockquotes', () => {
+                // Each > at start of line is stripped, so "> >" becomes " " (space remains from second >)
+                expect(stripMarkdown('> First level\n> > Nested')).toBe('First level\n Nested')
+            })
+        })
+
+        describe('horizontal rules', () => {
+            it('should remove horizontal rules with dashes', () => {
+                expect(stripMarkdown('Above\n---\nBelow')).toBe('Above\nBelow')
+            })
+
+            it('should remove horizontal rules with asterisks', () => {
+                expect(stripMarkdown('Above\n***\nBelow')).toBe('Above\nBelow')
+            })
+
+            it('should remove horizontal rules with underscores', () => {
+                expect(stripMarkdown('Above\n___\nBelow')).toBe('Above\nBelow')
+            })
+        })
+
+        describe('lists', () => {
+            it('should strip unordered list markers with dash', () => {
+                expect(stripMarkdown('- Item 1\n- Item 2')).toBe('Item 1\nItem 2')
+            })
+
+            it('should strip unordered list markers with asterisk', () => {
+                expect(stripMarkdown('* Item 1\n* Item 2')).toBe('Item 1\nItem 2')
+            })
+
+            it('should strip unordered list markers with plus', () => {
+                expect(stripMarkdown('+ Item 1\n+ Item 2')).toBe('Item 1\nItem 2')
+            })
+
+            it('should strip ordered list markers', () => {
+                expect(stripMarkdown('1. First\n2. Second\n3. Third')).toBe('First\nSecond\nThird')
+            })
+
+            it('should handle indented list items', () => {
+                expect(stripMarkdown('  - Nested item')).toBe('Nested item')
+            })
+        })
+
+        describe('HTML tags', () => {
+            it('should remove HTML tags', () => {
+                expect(stripMarkdown('Text with <strong>HTML</strong> tags')).toBe('Text with HTML tags')
+            })
+
+            it('should remove self-closing tags', () => {
+                expect(stripMarkdown('Line<br/>break')).toBe('Linebreak')
+            })
+
+            it('should remove tags with attributes', () => {
+                expect(stripMarkdown('<a href="url">Link</a>')).toBe('Link')
+            })
+
+            it('should remove incomplete/partial tags for security', () => {
+                expect(stripMarkdown('<script')).toBe('script')
+                expect(stripMarkdown('text<script>alert(1)')).toBe('textalert(1)')
+            })
+
+            it('should remove lone angle brackets', () => {
+                // '< b >' is treated as a tag and removed entirely
+                expect(stripMarkdown('a < b > c')).toBe('a  c')
+                // Lone < without matching > is stripped
+                expect(stripMarkdown('a < b')).toBe('a  b')
+                // Lone > without matching < is stripped
+                expect(stripMarkdown('a > b')).toBe('a  b')
+            })
+        })
+
+        describe('whitespace handling', () => {
+            it('should collapse multiple newlines', () => {
+                expect(stripMarkdown('Line 1\n\n\n\nLine 2')).toBe('Line 1\nLine 2')
+            })
+
+            it('should trim leading and trailing whitespace', () => {
+                expect(stripMarkdown('  text with spaces  ')).toBe('text with spaces')
+            })
+        })
+
+        describe('combined markdown', () => {
+            it('should handle complex markdown', () => {
+                const markdown = `# Welcome
+
+This is **bold** and *italic* text with a [link](https://example.com).
+
+- Item 1
+- Item 2
+
+\`\`\`
+code block
+\`\`\`
+
+> A quote
+
+Done!`
+
+                const expected = `Welcome
+This is bold and italic text with a link.
+Item 1
+Item 2
+A quote
+Done!`
+
+                expect(stripMarkdown(markdown)).toBe(expected)
+            })
+
+            it('should handle message-like content', () => {
+                const markdown = 'Hey! Check out this **new feature** at [our docs](https://docs.example.com) 🎉'
+                expect(stripMarkdown(markdown)).toBe('Hey! Check out this new feature at our docs 🎉')
+            })
+        })
+    })
+
+    describe('truncateText', () => {
+        it('should return "No messages yet" for undefined input', () => {
+            expect(truncateText(undefined, 60)).toBe('No messages yet')
+        })
+
+        it('should return "No messages yet" for empty string', () => {
+            expect(truncateText('', 60)).toBe('No messages yet')
+        })
+
+        it('should return text unchanged if shorter than max length', () => {
+            expect(truncateText('Short text', 60)).toBe('Short text')
+        })
+
+        it('should return text unchanged if equal to max length', () => {
+            const text = 'a'.repeat(60)
+            expect(truncateText(text, 60)).toBe(text)
+        })
+
+        it('should truncate text longer than max length with ellipsis', () => {
+            const text = 'a'.repeat(70)
+            const result = truncateText(text, 60)
+            expect(result.length).toBe(60)
+            expect(result.endsWith('...')).toBe(true)
+        })
+    })
+
+    describe('formatRelativeTime', () => {
+        beforeEach(() => {
+            jest.useFakeTimers()
+            jest.setSystemTime(new Date('2024-01-15T12:00:00Z'))
+        })
+
+        afterEach(() => {
+            jest.useRealTimers()
+        })
+
+        it('should return empty string for undefined input', () => {
+            expect(formatRelativeTime(undefined)).toBe('')
+        })
+
+        it('should return "Just now" for times less than a minute ago', () => {
+            const now = new Date('2024-01-15T11:59:30Z').toISOString()
+            expect(formatRelativeTime(now)).toBe('Just now')
+        })
+
+        it('should return minutes ago for times less than an hour ago', () => {
+            const thirtyMinsAgo = new Date('2024-01-15T11:30:00Z').toISOString()
+            expect(formatRelativeTime(thirtyMinsAgo)).toBe('30m ago')
+        })
+
+        it('should return hours ago for times less than a day ago', () => {
+            const fiveHoursAgo = new Date('2024-01-15T07:00:00Z').toISOString()
+            expect(formatRelativeTime(fiveHoursAgo)).toBe('5h ago')
+        })
+
+        it('should return "Yesterday" for times one day ago', () => {
+            const yesterday = new Date('2024-01-14T12:00:00Z').toISOString()
+            expect(formatRelativeTime(yesterday)).toBe('Yesterday')
+        })
+
+        it('should return days ago for times less than a week ago', () => {
+            const threeDaysAgo = new Date('2024-01-12T12:00:00Z').toISOString()
+            expect(formatRelativeTime(threeDaysAgo)).toBe('3d ago')
+        })
+
+        it('should return formatted date for times a week or more ago', () => {
+            const twoWeeksAgo = new Date('2024-01-01T12:00:00Z').toISOString()
+            const result = formatRelativeTime(twoWeeksAgo)
+            expect(result).toMatch(/\d{1,2}\/\d{1,2}\/\d{4}/)
+        })
+    })
+})

packages/browser/src/extensions/conversations/external/components/TicketListItem.tsx

@@ -2,7 +2,7 @@
 import { h, FunctionComponent } from 'preact'
 import { Ticket, TicketStatus } from '../../../../posthog-conversations-types'
 import { getStyles } from './styles'
-import { formatRelativeTime, truncateText } from './utils'
+import { formatRelativeTime, truncateText, stripMarkdown } from './utils'
 
 interface TicketListItemProps {
     ticket: Ticket
@@ -54,7 +54,7 @@ export const TicketListItem: FunctionComponent<TicketListItemProps> = ({ ticket,
             <div style={styles.ticketItemContent}>
                 <div style={styles.ticketItemHeader}>
                     <span style={hasUnread ? styles.ticketPreviewUnread : styles.ticketPreview}>
-                        {truncateText(ticket.last_message, 60)}
+                        {truncateText(stripMarkdown(ticket.last_message), 60)}
                     </span>
                     {hasUnread && <span style={styles.ticketUnreadBadge}>{ticket.unread_count}</span>}
                 </div>

packages/browser/src/extensions/conversations/external/components/TicketListView.tsx

@@ -84,7 +84,12 @@ export const TicketListView: FunctionComponent<TicketListViewProps> = ({
                         return dateB - dateA // Descending order (newest first)
                     })
                     .map((ticket) => (
-                        <TicketListItem key={ticket.id} ticket={ticket} styles={styles} onClick={onSelectTicket} />
+                        <TicketListItem
+                            key={`${ticket.id}-${ticket.last_message_at || ticket.created_at}-${ticket.unread_count}`}
+                            ticket={ticket}
+                            styles={styles}
+                            onClick={onSelectTicket}
+                        />
                     ))}
             </div>
 

packages/browser/src/extensions/conversations/external/components/utils.ts

@@ -40,3 +40,48 @@ export function truncateText(text: string | undefined, maxLength: number): strin
     }
     return text.substring(0, maxLength - 3) + '...'
 }
+
+/**
+ * Strip markdown formatting from text for plain text display
+ * Lightweight regex-based approach without external dependencies
+ */
+export function stripMarkdown(text: string | undefined): string {
+    if (!text) {
+        return ''
+    }
+
+    return (
+        text
+            // Remove code blocks first (before other processing)
+            .replace(/```[\s\S]*?```/g, '')
+            // Remove inline code
+            .replace(/`([^`]+)`/g, '$1')
+            // Remove images
+            .replace(/!\[([^\]]*)\]\([^)]+\)/g, '')
+            // Convert links to just text
+            .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+            // Remove headers
+            .replace(/^#{1,6}\s+/gm, '')
+            // Remove blockquotes
+            .replace(/^>\s*/gm, '')
+            // Remove horizontal rules (must be before list markers to avoid conflicts)
+            .replace(/^[-*_]{3,}\s*$/gm, '')
+            // Remove list markers (must be before bold/italic to avoid conflicts with *)
+            .replace(/^[\s]*[-*+]\s+/gm, '')
+            .replace(/^[\s]*\d+\.\s+/gm, '')
+            // Remove bold/italic (order matters: ** before *)
+            .replace(/\*\*([^*]+)\*\*/g, '$1')
+            .replace(/\*([^*]+)\*/g, '$1')
+            .replace(/__([^_]+)__/g, '$1')
+            .replace(/_([^_]+)_/g, '$1')
+            // Remove strikethrough
+            .replace(/~~([^~]+)~~/g, '$1')
+            // Remove HTML tags entirely, then strip any remaining angle brackets for security
+            .replace(/<[^>]*>/g, '')
+            .replace(/[<>]/g, '')
+            // Collapse multiple newlines
+            .replace(/\n{2,}/g, '\n')
+            // Trim whitespace
+            .trim()
+    )
+}