rio-assist-widget 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rio-assist-widget",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Web Component do painel lateral Rio Insight, pronto para ser embutido em qualquer projeto.",
   "type": "module",
   "scripts": {

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

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import { widgetStyles } from './rio-assist.styles';
 import { renderRioAssist } from './rio-assist.template';
 import {
@@ -47,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;
 
@@ -116,25 +117,7 @@ export class RioAssistWidget extends LitElement {
     breaks: true,
   }).use(markdownItTaskLists);
 
-  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(),
-    }),
-  );
+  conversations: ConversationItem[] = [];
 
   get suggestions(): string[] {
     if (!this.suggestionsSource) {
@@ -221,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;
@@ -550,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.',
       );
     }
 
@@ -565,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) {
@@ -582,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);
@@ -686,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/services/rioWebsocket.ts

@@ -1,52 +1,69 @@
-const WEBSOCKET_URL = 'wss://ws.volkswagen.latam-sandbox.rio.cloud';
-const DEFAULT_AGENT_MODEL = 'eu.amazon.nova-pro-v1:0';
+const WEBSOCKET_URL = 'wss://ws.volkswagen.latam-sandbox.rio.cloud';
+const HEARTBEAT_INTERVAL_MS = 5 * 60_000; // keep-alive before the 10min idle timeout
 
-export type RioIncomingMessage = {
-  text: string;
-  raw: string;
-  data: unknown;
-};
+export type RioIncomingMessage = {
+  text: string;
+  raw: string;
+  data: unknown;
+  action?: string;
+};
 
 export class RioWebsocketClient {
   readonly token: string;
 
   private socket: WebSocket | null = null;
 
-  private connectPromise: Promise<void> | null = null;
-
-  private readonly listeners = new Set<(message: RioIncomingMessage) => void>();
-
-  constructor(token: string) {
-    this.token = token;
-  }
+  private connectPromise: Promise<void> | null = null;
+
+  private readonly listeners = new Set<(message: RioIncomingMessage) => void>();
+
+  private heartbeatId: number | null = null;
+
+  constructor(token: string) {
+    this.token = token;
+  }
 
   matchesToken(value: string) {
     return this.token === value;
   }
 
-  async sendMessage(message: string) {
-    const socket = await this.ensureConnection();
-
-    const payload = {
-      action: 'sendMessage',
-      message,
-      agentModel: DEFAULT_AGENT_MODEL,
-    };
-
-    socket.send(JSON.stringify(payload));
-  }
-
-  onMessage(listener: (message: RioIncomingMessage) => void) {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-
-  close() {
-    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
-      this.socket.close();
-    }
-
-    this.connectPromise = null;
+  async sendMessage(message: string) {
+    const socket = await this.ensureConnection();
+
+    const payload = {
+      action: 'sendMessage',
+      message,
+    };
+
+    socket.send(JSON.stringify(payload));
+  }
+
+  async requestHistory(options: { conversationId?: string; limit?: number } = {}) {
+    const socket = await this.ensureConnection();
+    const payload: Record<string, unknown> = {
+      action: 'getHistory',
+      limit: options.limit ?? 50,
+    };
+
+    if (options.conversationId) {
+      payload.conversationId = options.conversationId;
+    }
+
+    socket.send(JSON.stringify(payload));
+  }
+
+  onMessage(listener: (message: RioIncomingMessage) => void) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  close() {
+    this.stopHeartbeat();
+    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+      this.socket.close();
+    }
+
+    this.connectPromise = null;
     this.socket = null;
     this.listeners.clear();
   }
@@ -65,27 +82,32 @@ export class RioWebsocketClient {
       `${WEBSOCKET_URL}?token=${encodeURIComponent(this.token)}`,
     );
 
-    this.socket.addEventListener('message', (event) => this.handleMessage(event));
-    this.socket.addEventListener('close', () => {
-      this.connectPromise = null;
-      this.socket = null;
-    });
+    this.socket.addEventListener('message', (event) => this.handleMessage(event));
+    this.socket.addEventListener('close', () => {
+      this.connectPromise = null;
+      this.socket = null;
+      this.stopHeartbeat();
+    });
 
     this.connectPromise = new Promise((resolve, reject) => {
       if (!this.socket) {
         reject(new Error('Falha ao criar conexão WebSocket.'));
         return;
       }
-
-      const handleOpen = () => {
-        cleanup();
-        resolve();
-      };
-
-      const handleError = () => {
-        cleanup();
-        this.socket?.close();
-        this.socket = null;
+
+      const handleOpen = () => {
+        cleanup();
+        if (this.socket) {
+          this.startHeartbeat(this.socket);
+        }
+        resolve();
+      };
+
+      const handleError = () => {
+        cleanup();
+        this.stopHeartbeat();
+        this.socket?.close();
+        this.socket = null;
         this.connectPromise = null;
         reject(
           new Error(
@@ -109,33 +131,57 @@ export class RioWebsocketClient {
       throw new Error('Conexão WebSocket do Rio Insight não está pronta.');
     }
 
-    return this.socket;
-  }
-
-  private async handleMessage(event: MessageEvent) {
-    const raw = await this.readMessage(event.data);
-    let parsed: unknown = null;
-    let text = raw;
-
-    try {
-      parsed = JSON.parse(raw);
-      if (typeof parsed === 'object' && parsed !== null) {
-        const maybeText =
-          (parsed as any).message ??
-          (parsed as any).response ??
-          (parsed as any).text ??
-          (parsed as any).content;
+    return this.socket;
+  }
+
+  private startHeartbeat(socket: WebSocket) {
+    this.stopHeartbeat();
+    this.heartbeatId = window.setInterval(() => {
+      if (socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({ action: 'ping' }));
+      }
+    }, HEARTBEAT_INTERVAL_MS);
+  }
+
+  private stopHeartbeat() {
+    if (this.heartbeatId !== null) {
+      window.clearInterval(this.heartbeatId);
+      this.heartbeatId = null;
+    }
+  }
+
+  private async handleMessage(event: MessageEvent) {
+    const raw = await this.readMessage(event.data);
+    let parsed: unknown = null;
+    let text = raw;
+    let action: string | undefined;
+
+    try {
+      parsed = JSON.parse(raw);
+      if (typeof parsed === 'object' && parsed !== null) {
+        const maybeAction =
+          (parsed as any).action ?? (parsed as any).type ?? (parsed as any).event;
+
+        if (typeof maybeAction === 'string') {
+          action = maybeAction;
+        }
+
+        const maybeText =
+          (parsed as any).message ??
+          (parsed as any).response ??
+          (parsed as any).text ??
+          (parsed as any).content;
 
         if (typeof maybeText === 'string') {
           text = maybeText;
         }
       }
-    } catch {
-      parsed = null;
-    }
-
-    this.listeners.forEach((listener) => listener({ text, raw, data: parsed }));
-  }
+    } catch {
+      parsed = null;
+    }
+
+    this.listeners.forEach((listener) => listener({ text, raw, data: parsed, action }));
+  }
 
   private async readMessage(
     data: MessageEvent['data'],