feat(web): WhatsApp-style formatting for URL-backed phone messages

tests/integration_test.go

@@ -200,14 +200,14 @@ func TestSendSMS_RateLimit(t *testing.T) {
 	assert.GreaterOrEqual(t, gapMs, int64(5500), "rate limit gap should be >= 5500ms (6s minus timing tolerance), got %dms", gapMs)
 
 	fireEvent(ctx, t, phone.PhoneAPIKey, msgID1, "SENT")
-	pollMessageStatus(ctx, t, msgID1, "sent", 15*time.Second)
+	pollMessageStatus(ctx, t, msgID1, "sent", 30*time.Second)
 	fireEvent(ctx, t, phone.PhoneAPIKey, msgID2, "SENT")
-	pollMessageStatus(ctx, t, msgID2, "sent", 15*time.Second)
+	pollMessageStatus(ctx, t, msgID2, "sent", 30*time.Second)
 	fireEvent(ctx, t, phone.PhoneAPIKey, msgID1, "DELIVERED")
 	fireEvent(ctx, t, phone.PhoneAPIKey, msgID2, "DELIVERED")
 
-	msg1 := pollMessageStatus(ctx, t, msgID1, "delivered", 15*time.Second)
-	msg2 := pollMessageStatus(ctx, t, msgID2, "delivered", 15*time.Second)
+	msg1 := pollMessageStatus(ctx, t, msgID1, "delivered", 30*time.Second)
+	msg2 := pollMessageStatus(ctx, t, msgID2, "delivered", 30*time.Second)
 	assert.Equal(t, "delivered", msg1.Status)
 	assert.Equal(t, "delivered", msg2.Status)
 

web/app/pages/threads/[id]/index.vue

@@ -22,6 +22,10 @@ import type { Channel } from 'pusher-js'
 import { isValidPhoneNumber } from 'libphonenumber-js'
 import { storeToRefs } from 'pinia'
 import type { EntitiesMessage } from '~~/shared/types/api'
+import {
+  isUrlNotificationToken,
+  formatWhatsappText,
+} from '~/utils/whatsapp-format'
 
 definePageMeta({
   middleware: ['auth'],
@@ -88,6 +92,11 @@ function isMissedCall(message: EntitiesMessage): boolean {
   return message.type === 'call/missed'
 }
 
+function isWhatsappFormatted(message: EntitiesMessage): boolean {
+  const phone = phonesStore.phones.find((x) => x.phone_number === message.owner)
+  return isUrlNotificationToken(phone?.fcm_token)
+}
+
 function isPending(message: EntitiesMessage): boolean {
   return ['sending', 'pending', 'scheduled'].includes(message.status)
 }
@@ -487,7 +496,13 @@ onBeforeUnmount(() => {
                     class="text-break"
                     style="white-space: pre-line"
                   >
-                    <span v-if="!isMissedCall(message)">{{
+                    <span
+                      v-if="
+                        !isMissedCall(message) && isWhatsappFormatted(message)
+                      "
+                      v-html="formatWhatsappText(message.content)"
+                    />
+                    <span v-else-if="!isMissedCall(message)">{{
                       message.content
                     }}</span>
                     <span v-else class="text-medium-emphasis"

web/app/utils/whatsapp-format.test.ts

@@ -0,0 +1,160 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+
+import { formatWhatsappText, isUrlNotificationToken } from './whatsapp-format'
+
+test('isUrlNotificationToken', async (t) => {
+  await t.test('returns true for an https:// token', () => {
+    assert.equal(isUrlNotificationToken('https://example.com/notify'), true)
+  })
+
+  await t.test('returns false for an FCM token', () => {
+    assert.equal(isUrlNotificationToken('some-fcm-token'), false)
+  })
+
+  await t.test('returns false for http:// (non-https) tokens', () => {
+    assert.equal(isUrlNotificationToken('http://example.com/notify'), false)
+  })
+
+  await t.test('returns false for null/undefined/empty tokens', () => {
+    assert.equal(isUrlNotificationToken(undefined), false)
+    assert.equal(isUrlNotificationToken(null), false)
+    assert.equal(isUrlNotificationToken(''), false)
+  })
+
+  await t.test('trims whitespace and is case-insensitive', () => {
+    assert.equal(isUrlNotificationToken('  HTTPS://example.com  '), true)
+  })
+})
+
+test('formatWhatsappText - boundaries', async (t) => {
+  await t.test('bolds text surrounded by whitespace', () => {
+    assert.equal(
+      formatWhatsappText('*boldme* test'),
+      '<strong>boldme</strong> test',
+    )
+  })
+
+  await t.test('does not bold a marker with no boundary at the end', () => {
+    assert.equal(
+      formatWhatsappText('*donotboldme*no space or end of string'),
+      '*donotboldme*no space or end of string',
+    )
+  })
+
+  await t.test('bolds text bounded by punctuation', () => {
+    assert.equal(
+      formatWhatsappText('your *IUC/Smartcard number*.'),
+      'your <strong>IUC/Smartcard number</strong>.',
+    )
+  })
+
+  await t.test('does not format a marker embedded mid-word', () => {
+    assert.equal(
+      formatWhatsappText('(parenthesis*bold*test)'),
+      '(parenthesis*bold*test)',
+    )
+  })
+
+  await t.test('formats italic and strikethrough', () => {
+    assert.equal(formatWhatsappText('_it_ and ~s~'), '<em>it</em> and <s>s</s>')
+  })
+})
+
+test('formatWhatsappText - quotes', async (t) => {
+  await t.test('wraps "> " prefixed lines in a quote span', () => {
+    assert.equal(
+      formatWhatsappText('> quoted text'),
+      '<span class="d-block pl-2" style="border-left: 3px solid currentColor; opacity: 0.8;">quoted text</span>',
+    )
+  })
+
+  await t.test('leaves a bare ">" with no following space untouched', () => {
+    assert.equal(formatWhatsappText('>threshold'), '&gt;threshold')
+  })
+})
+
+test('formatWhatsappText - code', async (t) => {
+  await t.test('wraps inline code', () => {
+    assert.equal(formatWhatsappText('`code`'), '<code>code</code>')
+  })
+
+  await t.test('wraps multiline triple-backtick code blocks', () => {
+    assert.equal(
+      formatWhatsappText('```\nline one\nline two\n```'),
+      '<code>\nline one\nline two\n</code>',
+    )
+  })
+
+  await t.test('does not reformat markdown characters inside code', () => {
+    assert.equal(formatWhatsappText('`a *b* c`'), '<code>a *b* c</code>')
+  })
+})
+
+test('formatWhatsappText - links', async (t) => {
+  await t.test('linkifies a raw URL', () => {
+    assert.equal(
+      formatWhatsappText('visit https://example.com today'),
+      'visit <a href="https://example.com" target="_blank" rel="noopener noreferrer">https://example.com</a> today',
+    )
+  })
+
+  await t.test('strips unbalanced trailing punctuation from a URL', () => {
+    assert.equal(
+      formatWhatsappText('Check this out (https://example.com).'),
+      'Check this out (<a href="https://example.com" target="_blank" rel="noopener noreferrer">https://example.com</a>).',
+    )
+  })
+
+  await t.test(
+    'keeps a balanced trailing parenthesis as part of the URL',
+    () => {
+      assert.equal(
+        formatWhatsappText('See https://example.com/page_(v2) for details.'),
+        'See <a href="https://example.com/page_(v2)" target="_blank" rel="noopener noreferrer">https://example.com/page_(v2)</a> for details.',
+      )
+    },
+  )
+
+  await t.test(
+    'preserves a legitimate trailing marker character that is part of the URL',
+    () => {
+      assert.equal(
+        formatWhatsappText('Download https://example.com/file_name_ now'),
+        'Download <a href="https://example.com/file_name_" target="_blank" rel="noopener noreferrer">https://example.com/file_name_</a> now',
+      )
+    },
+  )
+
+  await t.test('bolds a URL wrapped in asterisks', () => {
+    assert.equal(
+      formatWhatsappText('*https://example.com*'),
+      '<strong><a href="https://example.com" target="_blank" rel="noopener noreferrer">https://example.com</a></strong>',
+    )
+  })
+})
+
+test('formatWhatsappText - escaping and placeholders', async (t) => {
+  await t.test('escapes HTML special characters', () => {
+    assert.equal(
+      formatWhatsappText('<script>alert(1)</script>'),
+      '&lt;script&gt;alert(1)&lt;/script&gt;',
+    )
+  })
+
+  await t.test(
+    'does not let literal placeholder-like text leak a link into the output',
+    () => {
+      const input = 'no links here, just text'
+      assert.equal(formatWhatsappText(input), input)
+    },
+  )
+
+  await t.test('two calls do not interfere with each other', () => {
+    const first = formatWhatsappText('visit https://a.example today')
+    const second = formatWhatsappText('visit https://b.example today')
+    assert.match(first, /href="https:\/\/a\.example"/)
+    assert.match(second, /href="https:\/\/b\.example"/)
+    assert.doesNotMatch(first, /https:\/\/b\.example/)
+  })
+})