@instockng/storefront-ui 1.0.112 → 1.0.113

package/src/components/AssistantDrawer.tsx

@@ -17,6 +17,24 @@ import { X, Send, Sparkles, Loader2, MessageCircle } from 'lucide-react';
 import { cn, formatCurrency, WHATSAPP_HELP_LINK } from '../lib/utils';
 import { useHideBodyOverflow } from '../hooks/useHideBodyOverflow';
 
+/** Simple markdown to HTML for bold, italic, and line breaks */
+function renderMarkdown(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/\n/g, '<br />');
+}
+
+/** Strip signal tokens from displayed text */
+function cleanSignals(text: string): string {
+  return text
+    .replace(/\s*PRODUCTS:[\w\-,]*\s*/g, '')
+    .replace(/\s*CONTACT_SUPPORT\s*/gi, '');
+}
+
 type ChatMessage = {
   role: 'user' | 'assistant';
   content: string;
@@ -86,7 +104,7 @@ export function AssistantDrawer({
         const last = updated[updated.length - 1];
         if (last?.role === 'assistant') {
           const raw = last.content + data;
-          const cleaned = raw.replace(/\n?PRODUCTS:.*$/m, '').replace(/\n?CONTACT_SUPPORT\s*/gi, '');
+          const cleaned = cleanSignals(raw);
           updated[updated.length - 1] = { ...last, content: cleaned };
         }
         return updated;
@@ -335,8 +353,8 @@ export function AssistantDrawer({
               ) : (
                 <div className="space-y-3">
                   {/* Text answer */}
-                  <div className="text-sm text-gray-800 leading-relaxed whitespace-pre-wrap">
-                    {msg.content}
+                  <div className="text-sm text-gray-800 leading-relaxed">
+                    <span dangerouslySetInnerHTML={{ __html: renderMarkdown(msg.content) }} />
                     {isStreaming && i === messages.length - 1 && (
                       <span className="inline-block w-1.5 h-4 bg-gray-400 animate-pulse ml-0.5 align-text-bottom" />
                     )}