rio-assist-widget 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rio-assist-widget",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "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 { 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 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;
@@ -43,8 +47,9 @@ export class RioAssistWidget extends LitElement {
     conversationMenuPlacement: { state: true },
     isFullscreen: { type: Boolean, state: true },
     conversationScrollbar: { state: true },
-    showNewConversationShortcut: { type: Boolean, state: true },
-  };
+    showNewConversationShortcut: { type: Boolean, state: true },
+    conversations: { state: true },
+  };
 
   open = false;
 
@@ -98,33 +103,21 @@ export class RioAssistWidget extends LitElement {
 
   private conversationScrollbarDraggingId: number | null = null;
 
-  private conversationScrollbarDragState: {
-    startY: number;
-    startThumbTop: number;
-    trackHeight: number;
-    thumbHeight: number;
-    list: HTMLElement;
-  } | null = null;
-
-  conversations: ConversationItem[] = Array.from({ length: 20 }).map(
-    (_, index) => ({
-      id: `${index + 1}`,
-      title: [
-        'Caminhões com problema na frota de veículos.',
-        'Próximas manutenções periódicas preventivas.',
-        'Quais revisões meu plano inclui?',
-        'Como automatizar preenchimento de odômetro.',
-        'Valor das peças da próxima revisão.',
-        'O que é revisão de assentamento?',
-        'Alertas críticos ativos.',
-        'Veículo superaquecendo, causas e recomendações.',
-        'Calibragem recomendada nos pneus do e-Delivery.',
-        'Quantos mil km trocar o óleo do motor.',
-        'Qual a vida útil da bateria Moura M100HE.',
-      ][index % 11],
-      updatedAt: new Date(Date.now() - index * 3600_000).toISOString(),
-    }),
-  );
+  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[] = [];
 
   get suggestions(): string[] {
     if (!this.suggestionsSource) {
@@ -211,21 +204,25 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  openConversationsPanel() {
-    this.showConversations = true;
-  }
-
-  closeConversationsPanel() {
-    this.showConversations = false;
-    this.conversationMenuId = null;
-  }
-
-  toggleConversationsPanel() {
-    this.showConversations = !this.showConversations;
-    if (!this.showConversations) {
-      this.conversationMenuId = null;
-    }
-  }
+  openConversationsPanel() {
+    this.showConversations = true;
+    this.requestConversationHistory();
+  }
+
+  closeConversationsPanel() {
+    this.showConversations = false;
+    this.conversationMenuId = null;
+  }
+
+  toggleConversationsPanel() {
+    this.showConversations = !this.showConversations;
+    if (!this.showConversations) {
+      this.conversationMenuId = null;
+      return;
+    }
+
+    this.requestConversationHistory();
+  }
 
   toggleNewConversationShortcut() {
     this.showNewConversationShortcut = !this.showNewConversationShortcut;
@@ -479,23 +476,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();
@@ -539,11 +537,11 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  private ensureRioClient() {
-    const token = this.rioToken.trim();
-    if (!token) {
-      throw new Error(
-        'Informe o token RIO em data-rio-token para conectar no websocket do assistente.',
+  private ensureRioClient() {
+    const token = this.rioToken.trim();
+    if (!token) {
+      throw new Error(
+        'Informe o token RIO em data-rio-token para conectar no websocket do assistente.',
       );
     }
 
@@ -554,16 +552,22 @@ export class RioAssistWidget extends LitElement {
         this.handleIncomingMessage(incoming);
       });
     }
-
-    return this.rioClient;
-  }
-
-  private handleIncomingMessage(message: RioIncomingMessage) {
-    const assistantMessage = this.createMessage('assistant', message.text);
-    this.messages = [...this.messages, assistantMessage];
-    this.clearLoadingGuard();
-    this.isLoading = false;
-  }
+
+    return this.rioClient;
+  }
+
+  private handleIncomingMessage(message: RioIncomingMessage) {
+    if (this.isHistoryPayload(message)) {
+      this.logHistoryPayload(message);
+      this.applyConversationHistory(message.data);
+      return;
+    }
+
+    const assistantMessage = this.createMessage('assistant', message.text);
+    this.messages = [...this.messages, assistantMessage];
+    this.clearLoadingGuard();
+    this.isLoading = false;
+  }
 
   private teardownRioClient() {
     if (this.rioUnsubscribe) {
@@ -571,15 +575,196 @@ export class RioAssistWidget extends LitElement {
       this.rioUnsubscribe = null;
     }
 
-    if (this.rioClient) {
-      this.rioClient.close();
-      this.rioClient = null;
-    }
-  }
-
-  private startLoadingGuard() {
-    this.clearLoadingGuard();
-    this.loadingTimer = window.setTimeout(() => {
+    if (this.rioClient) {
+      this.rioClient.close();
+      this.rioClient = null;
+    }
+  }
+
+  async requestConversationHistory(conversationId?: string) {
+    try {
+      const client = this.ensureRioClient();
+      const limit = 50;
+
+      console.info('[RioAssist][history] solicitando historico de conversas', {
+        conversationId: conversationId ?? null,
+        limit,
+      });
+
+      await client.requestHistory({ conversationId, limit });
+    } catch (error) {
+      console.error('[RioAssist][history] erro ao solicitar historico', error);
+    }
+  }
+
+  private isHistoryPayload(message: RioIncomingMessage) {
+    if (
+      typeof message.action === 'string' &&
+      message.action.toLowerCase().includes('history')
+    ) {
+      return true;
+    }
+
+    const data = message.data;
+    if (data && typeof data === 'object') {
+      const action = (data as any).action;
+      if (typeof action === 'string' && action.toLowerCase().includes('history')) {
+        return true;
+      }
+
+      if (Array.isArray((data as any).history) || Array.isArray((data as any).conversations)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private logHistoryPayload(message: RioIncomingMessage) {
+    const label = '[RioAssist][history] payload recebido do websocket';
+    if (message.data !== null && message.data !== undefined) {
+      console.info(label, message.data);
+      return;
+    }
+
+    console.info(label, message.raw);
+  }
+
+  private applyConversationHistory(payload: unknown) {
+    const entries = this.extractHistoryEntries(payload);
+    if (entries.length === 0) {
+      console.info('[RioAssist][history] payload sem itens para montar lista de conversas');
+      this.conversations = [];
+      return;
+    }
+
+    const map = new Map<string, ConversationItem>();
+
+    entries.forEach((entry, index) => {
+      if (!entry || typeof entry !== 'object') {
+        return;
+      }
+
+      const normalized = this.normalizeConversationItem(
+        entry as Record<string, unknown>,
+        index,
+      );
+
+      if (!normalized) {
+        return;
+      }
+
+      const current = map.get(normalized.id);
+      if (!current) {
+        map.set(normalized.id, normalized);
+        return;
+      }
+
+      const currentTime = Date.parse(current.updatedAt);
+      const nextTime = Date.parse(normalized.updatedAt);
+
+      if (Number.isFinite(nextTime) && nextTime > currentTime) {
+        map.set(normalized.id, normalized);
+      }
+    });
+
+    const conversations = Array.from(map.values()).sort((a, b) => {
+      const order = Date.parse(b.updatedAt) - Date.parse(a.updatedAt);
+      return Number.isFinite(order) ? order : 0;
+    });
+
+    this.conversations = conversations;
+    console.info('[RioAssist][history] conversas normalizadas', conversations);
+  }
+
+  private extractHistoryEntries(payload: unknown): unknown[] {
+    if (Array.isArray(payload)) {
+      return payload;
+    }
+
+    if (payload && typeof payload === 'object') {
+      const record = payload as Record<string, unknown>;
+      const candidates = [
+        record.history,
+        record.conversations,
+        record.data,
+        record.items,
+        record.messages,
+      ];
+
+      for (const candidate of candidates) {
+        if (Array.isArray(candidate)) {
+          return candidate;
+        }
+      }
+
+      if (record.data && typeof record.data === 'object' && !Array.isArray(record.data)) {
+        const nested = this.extractHistoryEntries(record.data);
+        if (nested.length > 0) {
+          return nested;
+        }
+      }
+    }
+
+    return [];
+  }
+
+  private normalizeConversationItem(
+    value: Record<string, unknown>,
+    index: number,
+  ): ConversationItem | null {
+    const rawId =
+      value.id ??
+      value.conversationId ??
+      value.conversationUUID ??
+      value.conversationUuid ??
+      value.uuid;
+
+    const id = rawId !== undefined && rawId !== null ? String(rawId) : `history-${index + 1}`;
+
+    const rawTitle =
+      value.title ??
+      value.name ??
+      value.topic ??
+      value.subject ??
+      value.question ??
+      value.query ??
+      value.message;
+
+    const title =
+      typeof rawTitle === 'string' && rawTitle.trim().length > 0
+        ? rawTitle.trim()
+        : `Conversa ${index + 1}`;
+
+    const rawUpdated =
+      value.updatedAt ??
+      value.updated_at ??
+      value.lastMessageAt ??
+      value.last_message_at ??
+      value.createdAt ??
+      value.created_at ??
+      value.timestamp ??
+      value.date;
+
+    const updatedAt = this.toIsoString(rawUpdated);
+
+    return { id, title, updatedAt };
+  }
+
+  private toIsoString(value: unknown) {
+    if (typeof value === 'string' || typeof value === 'number') {
+      const date = new Date(value);
+      if (!Number.isNaN(date.getTime())) {
+        return date.toISOString();
+      }
+    }
+
+    return new Date().toISOString();
+  }
+
+  private startLoadingGuard() {
+    this.clearLoadingGuard();
+    this.loadingTimer = window.setTimeout(() => {
       this.loadingTimer = null;
       this.isLoading = false;
     }, 15000);
@@ -604,6 +789,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);
   }
@@ -614,12 +860,7 @@ declare global {
     'rio-assist-widget': RioAssistWidget;
   }
 }
-
-if (!customElements.get('rio-assist-widget')) {
-  customElements.define('rio-assist-widget', RioAssistWidget);
-}
-
-
-
-
-
+
+if (!customElements.get('rio-assist-widget')) {
+  customElements.define('rio-assist-widget', RioAssistWidget);
+}

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 });
+}