rio-assist-widget 0.1.10 → 0.1.14

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

@@ -19,13 +19,20 @@ export type ChatMessage = {
   timestamp: number;
 };
 
-type ConversationItem = {
-  id: string;
-  title: string;
-  updatedAt: string;
-};
-
-export class RioAssistWidget extends LitElement {
+type ConversationItem = {
+  id: string;
+  title: string;
+  updatedAt: string;
+};
+
+export type HeaderActionConfig = {
+  id?: string;
+  iconUrl: string;
+  ariaLabel?: string;
+  onClick?: () => void;
+};
+
+export class RioAssistWidget extends LitElement {
   static styles = widgetStyles;
 
   static properties = {
@@ -44,11 +51,15 @@ export class RioAssistWidget extends LitElement {
     showConversations: { type: Boolean, state: true },
     conversationSearch: { type: String, state: true },
     conversationMenuId: { state: true },
-    conversationMenuPlacement: { state: true },
-    isFullscreen: { type: Boolean, state: true },
-    conversationScrollbar: { state: true },
+    conversationMenuPlacement: { state: true },
+    isFullscreen: { type: Boolean, state: true },
+    conversationScrollbar: { state: true },
     showNewConversationShortcut: { type: Boolean, state: true },
     conversations: { state: true },
+    conversationHistoryLoading: { type: Boolean, state: true },
+    activeConversationTitle: { state: true },
+    headerActions: { attribute: false },
+    homeUrl: { type: String, attribute: 'data-home-url' },
   };
 
   open = false;
@@ -83,25 +94,88 @@ export class RioAssistWidget extends LitElement {
 
   conversationMenuPlacement: 'above' | 'below' = 'below';
 
-  isFullscreen = false;
-
-  showNewConversationShortcut = false;
-
-  conversationScrollbar = {
-    height: 0,
-    top: 0,
-    visible: false,
-  };
+  isFullscreen = false;
+
+  showNewConversationShortcut = false;
+
+  conversationScrollbar = {
+    height: 0,
+    top: 0,
+    visible: false,
+  };
+
+  conversationHistoryLoading = false;
+
+  private refreshConversationsAfterResponse = false;
+
+  activeConversationTitle: string | null = null;
+
+  headerActions: HeaderActionConfig[] = [];
+
+  homeUrl = '';
+
+  private generateConversationId() {
+    if (!this.conversationUserId) {
+      this.conversationUserId = this.inferUserIdFromToken();
+    }
+
+    const userSegment = this.conversationUserId ?? 'user';
+    const id = `default-${userSegment}-${this.randomId(8)}`;
+    console.info('[RioAssist][conversation] gerando conversationId', id);
+    return id;
+  }
+
+  private inferUserIdFromToken(): string | null {
+    const token = this.rioToken.trim();
+    if (!token || !token.includes('.')) {
+      return null;
+    }
+
+    const [, payload] = token.split('.');
+    try {
+      const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
+      const candidate =
+        decoded?.userId ??
+        decoded?.user_id ??
+        decoded?.sub ??
+        decoded?.id ??
+        decoded?.email ??
+        decoded?.username;
+
+      if (candidate && typeof candidate === 'string') {
+        return candidate.replace(/[^a-zA-Z0-9_-]/g, '');
+      }
+    } catch {
+      return null;
+    }
+
+    return null;
+  }
+
+  private randomId(length: number) {
+    const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    let result = '';
+    for (let i = 0; i < length; i += 1) {
+      result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+  }
 
   private conversationScrollbarRaf: number | null = null;
 
-  private rioClient: RioWebsocketClient | null = null;
-
-  private rioUnsubscribe: (() => void) | null = null;
-
-  private loadingTimer: number | null = null;
-
-  private conversationScrollbarDraggingId: number | null = null;
+  private rioClient: RioWebsocketClient | null = null;
+
+  private rioUnsubscribe: (() => void) | null = null;
+
+  private loadingTimer: number | null = null;
+
+  private currentConversationId: string | null = null;
+
+  private conversationCounter = 0;
+
+  private conversationUserId: string | null = null;
+
+  private conversationScrollbarDraggingId: number | null = null;
 
   private conversationScrollbarDragState: {
     startY: number;
@@ -224,13 +298,28 @@ export class RioAssistWidget extends LitElement {
     this.requestConversationHistory();
   }
 
-  toggleNewConversationShortcut() {
-    this.showNewConversationShortcut = !this.showNewConversationShortcut;
-  }
-
-  handleConversationSearch(event: InputEvent) {
-    this.conversationSearch = (event.target as HTMLInputElement).value;
-  }
+  toggleNewConversationShortcut() {
+    this.showNewConversationShortcut = !this.showNewConversationShortcut;
+  }
+
+  handleConversationSelect(conversationId: string) {
+    if (!conversationId) {
+      return;
+    }
+
+    this.showConversations = false;
+    this.conversationMenuId = null;
+    this.errorMessage = '';
+    this.currentConversationId = conversationId;
+    this.activeConversationTitle = this.lookupConversationTitle(conversationId);
+
+    console.info('[RioAssist][history] carregando conversa', conversationId);
+    this.requestConversationHistory(conversationId);
+  }
+
+  handleConversationSearch(event: InputEvent) {
+    this.conversationSearch = (event.target as HTMLInputElement).value;
+  }
 
   handleConversationMenuToggle(event: Event, id: string) {
     event.stopPropagation();
@@ -267,24 +356,70 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  handleConversationAction(action: 'rename' | 'delete', id: string) {
-    this.conversationMenuId = null;
-    const conversation = this.conversations.find((item) => item.id === id);
-    if (!conversation) {
-      return;
+  handleConversationAction(action: 'rename' | 'delete', id: string) {
+    this.conversationMenuId = null;
+    const conversation = this.conversations.find((item) => item.id === id);
+    if (!conversation) {
+      return;
     }
 
-    const message = `${
-      action === 'rename' ? 'Renomear' : 'Excluir'
-    } "${conversation.title}"`;
-    console.info(`[Mock] ${message}`);
-  }
-
-  handleCloseAction() {
-    if (this.isFullscreen) {
-      this.exitFullscreen(true);
-      return;
-    }
+    const message = `${
+      action === 'rename' ? 'Renomear' : 'Excluir'
+    } "${conversation.title}"`;
+    console.info(`[Mock] ${message}`);
+  }
+
+  handleHomeNavigation() {
+    const detail = { url: this.homeUrl || null };
+    const allowed = this.dispatchEvent(
+      new CustomEvent('rioassist:home', {
+        detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
+
+    if (!allowed) {
+      return;
+    }
+
+    if (this.homeUrl) {
+      window.location.assign(this.homeUrl);
+    }
+  }
+
+  handleHeaderActionClick(action: HeaderActionConfig, index: number) {
+    const detail = {
+      index,
+      id: action.id ?? null,
+      ariaLabel: action.ariaLabel ?? null,
+      iconUrl: action.iconUrl,
+    };
+
+    const allowed = this.dispatchEvent(
+      new CustomEvent('rioassist:header-action', {
+        detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
+
+    if (!allowed) {
+      return;
+    }
+
+    if (typeof action.onClick === 'function') {
+      action.onClick();
+    }
+  }
+
+  handleCloseAction() {
+    if (this.isFullscreen) {
+      this.exitFullscreen(true);
+      return;
+    }
 
     if (this.showConversations) {
       this.closeConversationsPanel();
@@ -316,23 +451,25 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  handleCreateConversation() {
-    if (!this.hasActiveConversation) {
-      return;
-    }
-
-    this.clearLoadingGuard();
-    this.isLoading = false;
-    this.messages = [];
-    this.message = '';
-    this.errorMessage = '';
-    this.showConversations = false;
-    this.teardownRioClient();
-    this.showNewConversationShortcut = false;
-    this.dispatchEvent(
-      new CustomEvent('rioassist:new-conversation', {
-        bubbles: true,
-        composed: true,
+  handleCreateConversation() {
+    if (!this.hasActiveConversation) {
+      return;
+    }
+
+    this.clearLoadingGuard();
+    this.isLoading = false;
+    this.messages = [];
+    this.message = '';
+    this.errorMessage = '';
+    this.showConversations = false;
+    this.teardownRioClient();
+    this.currentConversationId = this.generateConversationId();
+    this.activeConversationTitle = null;
+    this.showNewConversationShortcut = false;
+    this.dispatchEvent(
+      new CustomEvent('rioassist:new-conversation', {
+        bubbles: true,
+        composed: true,
       }),
     );
   }
@@ -494,13 +631,18 @@ export class RioAssistWidget extends LitElement {
       timestamp: Date.now(),
     };
   }
-
+
   private async processMessage(rawValue: string) {
     const content = rawValue.trim();
     if (!content || this.isLoading) {
       return;
     }
 
+    if (!this.currentConversationId) {
+      this.currentConversationId = this.generateConversationId();
+      this.activeConversationTitle = null;
+    }
+
     const wasEmptyConversation = this.messages.length === 0;
 
     this.dispatchEvent(
@@ -519,20 +661,21 @@ export class RioAssistWidget extends LitElement {
     this.messages = [...this.messages, userMessage];
     if (wasEmptyConversation) {
       this.showNewConversationShortcut = true;
+      this.refreshConversationsAfterResponse = true;
     }
     this.message = '';
     this.errorMessage = '';
     this.isLoading = true;
     this.startLoadingGuard();
 
-    try {
-      const client = this.ensureRioClient();
-      await client.sendMessage(content);
-    } catch (error) {
-      this.clearLoadingGuard();
-      this.isLoading = false;
-      this.errorMessage = error instanceof Error
-        ? error.message
+    try {
+      const client = this.ensureRioClient();
+      await client.sendMessage(content, this.currentConversationId);
+    } catch (error) {
+      this.clearLoadingGuard();
+      this.isLoading = false;
+      this.errorMessage = error instanceof Error
+        ? error.message
         : 'Nao foi possivel enviar a mensagem para o agente.';
     }
   }
@@ -559,14 +702,26 @@ export class RioAssistWidget extends LitElement {
   private handleIncomingMessage(message: RioIncomingMessage) {
     if (this.isHistoryPayload(message)) {
       this.logHistoryPayload(message);
-      this.applyConversationHistory(message.data);
+      this.handleHistoryPayload(message.data);
       return;
     }
 
+    console.info('[RioAssist][ws] resposta de mensagem recebida', {
+      action: message.action ?? 'message',
+      text: message.text,
+      raw: message.raw,
+      data: message.data,
+    });
+
     const assistantMessage = this.createMessage('assistant', message.text);
     this.messages = [...this.messages, assistantMessage];
     this.clearLoadingGuard();
     this.isLoading = false;
+
+    if (this.refreshConversationsAfterResponse) {
+      this.refreshConversationsAfterResponse = false;
+      this.requestConversationHistory();
+    }
   }
 
   private teardownRioClient() {
@@ -591,9 +746,32 @@ export class RioAssistWidget extends LitElement {
         limit,
       });
 
+      this.conversationHistoryLoading = true;
       await client.requestHistory({ conversationId, limit });
     } catch (error) {
       console.error('[RioAssist][history] erro ao solicitar historico', error);
+      this.conversationHistoryLoading = false;
+    }
+  }
+
+  private handleHistoryPayload(payload: unknown) {
+    const entries = this.extractHistoryEntries(payload);
+    const conversationId = this.extractConversationId(payload);
+
+    if (conversationId !== null && conversationId !== undefined) {
+      this.applyMessageHistory(entries, conversationId);
+      return;
+    }
+
+    if (this.isMessageHistoryEntries(entries)) {
+      this.applyMessageHistory(entries);
+      return;
+    }
+
+    this.applyConversationHistoryFromEntries(entries);
+
+    if (this.refreshConversationsAfterResponse) {
+      this.refreshConversationsAfterResponse = false;
     }
   }
 
@@ -630,11 +808,11 @@ export class RioAssistWidget extends LitElement {
     console.info(label, message.raw);
   }
 
-  private applyConversationHistory(payload: unknown) {
-    const entries = this.extractHistoryEntries(payload);
+  private applyConversationHistoryFromEntries(entries: unknown[]) {
     if (entries.length === 0) {
       console.info('[RioAssist][history] payload sem itens para montar lista de conversas');
       this.conversations = [];
+      this.conversationHistoryLoading = false;
       return;
     }
 
@@ -674,9 +852,44 @@ export class RioAssistWidget extends LitElement {
     });
 
     this.conversations = conversations;
+    this.conversationHistoryLoading = false;
+    this.syncActiveConversationTitle();
     console.info('[RioAssist][history] conversas normalizadas', conversations);
   }
 
+  private applyMessageHistory(entries: unknown[], conversationId?: string | null) {
+    if (entries.length === 0) {
+      console.info('[RioAssist][history] lista de mensagens vazia', { conversationId });
+      this.messages = [];
+      this.showConversations = false;
+      this.clearLoadingGuard();
+      this.isLoading = false;
+      this.conversationHistoryLoading = false;
+      return;
+    }
+
+    const normalized = entries.flatMap((entry, index) =>
+      this.normalizeHistoryMessages(entry as Record<string, unknown>, index),
+    );
+
+    if (conversationId) {
+      this.currentConversationId = conversationId;
+    }
+
+    this.messages = normalized;
+    this.showConversations = false;
+    this.clearLoadingGuard();
+    this.isLoading = false;
+    this.showNewConversationShortcut = normalized.length > 0;
+    this.conversationHistoryLoading = false;
+    this.refreshConversationsAfterResponse = false;
+
+    console.info('[RioAssist][history] mensagens carregadas', {
+      conversationId: conversationId ?? null,
+      total: normalized.length,
+    });
+  }
+
   private extractHistoryEntries(payload: unknown): unknown[] {
     if (Array.isArray(payload)) {
       return payload;
@@ -709,6 +922,62 @@ export class RioAssistWidget extends LitElement {
     return [];
   }
 
+  private extractConversationId(payload: unknown): string | null | undefined {
+    if (payload && typeof payload === 'object') {
+      const record = payload as Record<string, unknown>;
+      const candidates = [
+        record.conversationId,
+        record.conversationUUID,
+        record.conversationUuid,
+        record.uuid,
+        record.id,
+      ];
+
+      for (const candidate of candidates) {
+        if (candidate === null) {
+          return null;
+        }
+
+        if (candidate !== undefined) {
+          return String(candidate);
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  private isMessageHistoryEntries(entries: unknown[]) {
+    return entries.some((entry) => this.looksLikeMessageHistoryEntry(entry));
+  }
+
+  private looksLikeMessageHistoryEntry(entry: unknown) {
+    if (!entry || typeof entry !== 'object') {
+      return false;
+    }
+
+    const item = entry as Record<string, unknown>;
+    const role = item.role ?? item.sender ?? item.from ?? item.author ?? item.type;
+    if (typeof role === 'string' && role.trim().length > 0) {
+      return true;
+    }
+
+    if (
+      typeof item.content === 'string' ||
+      typeof item.message === 'string' ||
+      typeof item.text === 'string' ||
+      typeof item.response === 'string'
+    ) {
+      return true;
+    }
+
+    if (Array.isArray(item.parts) && item.parts.length > 0) {
+      return true;
+    }
+
+    return false;
+  }
+
   private normalizeConversationItem(
     value: Record<string, unknown>,
     index: number,
@@ -751,6 +1020,176 @@ export class RioAssistWidget extends LitElement {
     return { id, title, updatedAt };
   }
 
+  private normalizeHistoryMessages(
+    value: Record<string, unknown>,
+    index: number,
+  ): ChatMessage[] {
+    const messages: ChatMessage[] = [];
+
+    const rawUserText = value.message ?? value.question ?? value.query ?? value.text ?? value.content;
+    const userText = typeof rawUserText === 'string' ? rawUserText.trim() : '';
+
+    const rawResponseText =
+      value.response ?? value.answer ?? value.reply ?? value.completion ?? value.body ?? value.preview;
+    const responseText = typeof rawResponseText === 'string' ? rawResponseText.trim() : '';
+
+    const rawId = value.id ?? value.messageId ?? value.uuid ?? value.conversationMessageId;
+    const baseId = rawId !== undefined && rawId !== null
+      ? String(rawId)
+      : `history-${index + 1}`;
+
+    const userTimestampValue =
+      value.timestamp ??
+      value.createdAt ??
+      value.created_at ??
+      value.date ??
+      value.time;
+    const assistantTimestampValue =
+      value.responseTimestamp ??
+      value.responseTime ??
+      value.responseDate ??
+      value.response_at ??
+      value.updatedAt ??
+      value.updated_at;
+
+    const userTimestamp = this.parseTimestamp(userTimestampValue);
+    const assistantTimestamp = this.parseTimestamp(
+      assistantTimestampValue,
+      userTimestamp + 1,
+    );
+
+    if (responseText) {
+      if (userText) {
+        messages.push({
+          id: `${baseId}-user`,
+          role: 'user',
+          text: userText,
+          html: this.renderMarkdown(userText),
+          timestamp: userTimestamp,
+        });
+      }
+
+      messages.push({
+        id: `${baseId}-assistant`,
+        role: 'assistant',
+        text: responseText,
+        html: this.renderMarkdown(responseText),
+        timestamp: assistantTimestamp,
+      });
+    } else if (userText) {
+      // Se n�o tiver resposta, n�o exibimos a mensagem do usuario isolada.
+      return [];
+    }
+
+    if (messages.length > 0) {
+      return messages;
+    }
+
+    const fallback = this.normalizeSingleHistoryMessage(value, index);
+    return fallback ? [fallback] : [];
+  }
+
+  private normalizeSingleHistoryMessage(
+    value: Record<string, unknown>,
+    index: number,
+  ): ChatMessage | null {
+    const rawText =
+      value.text ??
+      value.message ??
+      value.content ??
+      value.response ??
+      value.body ??
+      value.preview;
+
+    const text = typeof rawText === 'string' && rawText.trim().length > 0
+      ? rawText
+      : '';
+
+    if (!text) {
+      return null;
+    }
+
+    const role = this.normalizeRole(
+      value.role ??
+        value.sender ??
+        value.from ??
+        value.author ??
+        value.type ??
+        value.direction,
+    );
+
+    const rawId = value.id ?? value.messageId ?? value.uuid ?? value.conversationMessageId;
+    const id = rawId !== undefined && rawId !== null
+      ? String(rawId)
+      : `history-message-${index + 1}`;
+
+    const timestampValue =
+      value.timestamp ??
+      value.createdAt ??
+      value.created_at ??
+      value.updatedAt ??
+      value.updated_at ??
+      value.date ??
+      value.time;
+
+    const timestamp = this.parseTimestamp(timestampValue);
+
+    return {
+      id,
+      role,
+      text,
+      html: this.renderMarkdown(text),
+      timestamp,
+    };
+  }
+
+  private normalizeRole(value: unknown): ChatRole {
+    if (typeof value === 'string') {
+      const normalized = value.toLowerCase();
+      if (normalized.includes('user') || normalized.includes('client')) {
+        return 'user';
+      }
+      if (normalized.includes('assistant') || normalized.includes('agent') || normalized.includes('bot')) {
+        return 'assistant';
+      }
+    }
+
+    return 'assistant';
+  }
+
+  private parseTimestamp(value: unknown, fallback?: number) {
+    const parsed = Date.parse(this.toIsoString(value));
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+
+    if (Number.isFinite(fallback ?? NaN)) {
+      return fallback as number;
+    }
+
+    return Date.now();
+  }
+
+  private lookupConversationTitle(conversationId: string | null) {
+    if (!conversationId) {
+      return null;
+    }
+
+    const found = this.conversations.find((item) => item.id === conversationId);
+    return found ? found.title : null;
+  }
+
+  private syncActiveConversationTitle() {
+    if (!this.currentConversationId) {
+      return;
+    }
+
+    const title = this.lookupConversationTitle(this.currentConversationId);
+    if (title) {
+      this.activeConversationTitle = title;
+    }
+  }
+
   private toIsoString(value: unknown) {
     if (typeof value === 'string' || typeof value === 'number') {
       const date = new Date(value);