rio-assist-widget 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rio-assist-widget",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Web Component do painel lateral Rio Insight, pronto para ser embutido em qualquer projeto.",
   "type": "module",
   "scripts": {
@@ -26,9 +26,13 @@
     "README.md"
   ],
   "dependencies": {
-    "lit": "^3.1.2"
+    "dompurify": "^3.3.0",
+    "lit": "^3.1.2",
+    "markdown-it": "^14.1.0",
+    "markdown-it-task-lists": "^2.1.1"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "playwright-chromium": "^1.56.1",
     "typescript": "^5.4.5",
     "vite": "^5.2.0"

package/src/components/mini-panel/mini-panel.styles.ts

@@ -169,25 +169,58 @@ export const miniPanelStyles = css`
     gap: 12px;
   }
 
-  .message {
-    border-radius: 16px;
-    border: 1px solid #e4eaee;
-    padding: 10px 16px;
-    max-width: 90%;
+  .message {
+    border-radius: 16px;
+    border: 1px solid #e4eaee;
+    padding: 10px 16px;
+    max-width: 90%;
     background: #fff;
     color: #1f2f36;
-    font-size: 15px;
-  }
-
-  .message p {
-    margin: 0;
-    line-height: 1.35;
-  }
-
-  .message--user {
-    align-self: flex-end;
-    background: #e5ebf0;
-    border-color: #cfd6dc;
+    font-size: 15px;
+  }
+
+  .message__content {
+    line-height: 1.35;
+  }
+
+  .message__content p,
+  .message__content ul,
+  .message__content ol {
+    margin: 4px 0;
+  }
+
+  .message__content pre {
+    background: #0d161b;
+    color: #f3f7fb;
+    border-radius: 8px;
+    padding: 10px;
+    overflow-x: auto;
+    margin: 6px 0;
+    font-size: 14px;
+  }
+
+  .message__content code {
+    background: #f1f4f7;
+    padding: 2px 6px;
+    border-radius: 6px;
+  }
+
+  .message__content blockquote {
+    border-left: 3px solid #cfd6dc;
+    margin: 6px 0;
+    padding-left: 10px;
+    color: #4b5a65;
+  }
+
+  .message__content ul,
+  .message__content ol {
+    padding-left: 20px;
+  }
+
+  .message--user {
+    align-self: flex-end;
+    background: #e5ebf0;
+    border-color: #cfd6dc;
     color: #1f2f36;
     padding: 8px 10px;
   }

package/src/components/mini-panel/mini-panel.template.ts

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 import type { RioAssistWidget } from '../rio-assist/rio-assist';
 import { renderConversationsPanel } from '../conversations-panel/conversations-panel.template';
@@ -30,7 +31,9 @@ export const renderChatSurface = (component: RioAssistWidget) => {
               'message--assistant': message.role === 'assistant',
             })}
           >
-            <p>${message.text}</p>
+            <div class="message__content">
+              ${unsafeHTML(message.html ?? message.text)}
+            </div>
             <time>
               ${new Date(message.timestamp).toLocaleTimeString('pt-BR', {
                 hour: '2-digit',

package/src/components/rio-assist/rio-assist.ts

@@ -1,19 +1,23 @@
 import { LitElement, type PropertyValues } from 'lit';
-import { widgetStyles } from './rio-assist.styles';
-import { renderRioAssist } from './rio-assist.template';
-import {
-  RioWebsocketClient,
-  type RioIncomingMessage,
-} from '../../services/rioWebsocket';
+import { widgetStyles } from './rio-assist.styles';
+import { renderRioAssist } from './rio-assist.template';
+import {
+  RioWebsocketClient,
+  type RioIncomingMessage,
+} from '../../services/rioWebsocket';
+import MarkdownIt from 'markdown-it';
+import markdownItTaskLists from 'markdown-it-task-lists';
+import DOMPurify from 'dompurify';
 
 type ChatRole = 'user' | 'assistant';
 
-export type ChatMessage = {
-  id: string;
-  role: ChatRole;
-  text: string;
-  timestamp: number;
-};
+export type ChatMessage = {
+  id: string;
+  role: ChatRole;
+  text: string;
+  html?: string;
+  timestamp: number;
+};
 
 type ConversationItem = {
   id: string;
@@ -98,13 +102,19 @@ export class RioAssistWidget extends LitElement {
 
   private conversationScrollbarDraggingId: number | null = null;
 
-  private conversationScrollbarDragState: {
-    startY: number;
-    startThumbTop: number;
-    trackHeight: number;
-    thumbHeight: number;
-    list: HTMLElement;
-  } | null = null;
+  private conversationScrollbarDragState: {
+    startY: number;
+    startThumbTop: number;
+    trackHeight: number;
+    thumbHeight: number;
+    list: HTMLElement;
+  } | null = null;
+
+  private markdownRenderer = new MarkdownIt({
+    html: false,
+    linkify: true,
+    breaks: true,
+  }).use(markdownItTaskLists);
 
   conversations: ConversationItem[] = Array.from({ length: 20 }).map(
     (_, index) => ({
@@ -479,23 +489,24 @@ export class RioAssistWidget extends LitElement {
     await this.processMessage(suggestion);
   }
 
-  async handleSubmit(event: SubmitEvent) {
-    event.preventDefault();
-    await this.processMessage(this.message);
-  }
-
-  private createMessage(role: ChatRole, text: string): ChatMessage {
-    const id = typeof crypto !== 'undefined' && 'randomUUID' in crypto
-      ? crypto.randomUUID()
-      : `${Date.now()}-${Math.random()}`;
-
-    return {
-      id,
-      role,
-      text,
-      timestamp: Date.now(),
-    };
-  }
+  async handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    await this.processMessage(this.message);
+  }
+
+  private createMessage(role: ChatRole, text: string): ChatMessage {
+    const id = typeof crypto !== 'undefined' && 'randomUUID' in crypto
+      ? crypto.randomUUID()
+      : `${Date.now()}-${Math.random()}`;
+
+    return {
+      id,
+      role,
+      text,
+      html: this.renderMarkdown(text),
+      timestamp: Date.now(),
+    };
+  }
 
   private async processMessage(rawValue: string) {
     const content = rawValue.trim();
@@ -604,6 +615,67 @@ export class RioAssistWidget extends LitElement {
     });
   }
 
+  private renderMarkdown(content: string) {
+    const rendered = this.markdownRenderer.render(content);
+    const clean = DOMPurify.sanitize(rendered, {
+      ALLOWED_TAGS: [
+        'a',
+        'p',
+        'ul',
+        'ol',
+        'li',
+        'code',
+        'pre',
+        'strong',
+        'em',
+        'blockquote',
+        'table',
+        'thead',
+        'tbody',
+        'tr',
+        'th',
+        'td',
+        'del',
+        'hr',
+        'br',
+        'img',
+        'span',
+        'input',
+      ],
+      ALLOWED_ATTR: [
+        'href',
+        'title',
+        'target',
+        'rel',
+        'src',
+        'alt',
+        'class',
+        'type',
+        'checked',
+        'disabled',
+        'aria-label',
+      ],
+      ALLOW_DATA_ATTR: false,
+      FORBID_TAGS: ['style', 'script'],
+      USE_PROFILES: { html: true },
+    });
+
+    const container = document.createElement('div');
+    container.innerHTML = clean;
+
+    container.querySelectorAll('a').forEach((anchor) => {
+      anchor.setAttribute('target', '_blank');
+      anchor.setAttribute('rel', 'noopener noreferrer');
+    });
+
+    container.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
+      checkbox.setAttribute('disabled', '');
+      checkbox.setAttribute('tabindex', '-1');
+    });
+
+    return container.innerHTML;
+  }
+
   render() {
     return renderRioAssist(this);
   }

package/src/playground.ts

@@ -1,24 +1,25 @@
-import './main';
-
-const boot = () => {
-  window.RioAssist?.init({
-    title: 'Rio Insight',
-    buttonLabel: 'Rio Insight',
-    accentColor: '#c02267',
-    rioToken: 'SEU_TOKEN_RIO_AQUI',
-    suggestions: [
-      'Veículos com problemas',
-      'Valor das peças',
-      'Planos de manutenção',
-    ],
-  });
-};
-
-if (window.RioAssist) {
-  boot();
-} else {
-  window.addEventListener('rio-assist-ready', boot, { once: true });
-}
-
-
-
+import './main';
+
+const rioToken = import.meta.env.VITE_RIO_TOKEN || 'SEU_TOKEN_RIO_AQUI';
+const apiBaseUrl = import.meta.env.VITE_RIO_API_BASE_URL || '';
+
+const boot = () => {
+  window.RioAssist?.init({
+    title: 'Rio Insight',
+    buttonLabel: 'Rio Insight',
+    accentColor: '#c02267',
+    rioToken,
+    apiBaseUrl,
+    suggestions: [
+      'Veículos com problemas',
+      'Valor das peças',
+      'Planos de manutenção',
+    ],
+  });
+};
+
+if (window.RioAssist) {
+  boot();
+} else {
+  window.addEventListener('rio-assist-ready', boot, { once: true });
+}

package/src/types/markdown-it-task-lists.d.ts

@@ -0,0 +1 @@
+declare module 'markdown-it-task-lists';