rio-assist-widget 0.1.18 → 0.1.26

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

@@ -1,34 +1,58 @@
 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';
+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;
-  html?: string;
-  timestamp: number;
-};
-
-type ConversationItem = {
+export type ChatMessage = {
+  id: string;
+  role: ChatRole;
+  text: string;
+  html?: string;
+  timestamp: number;
+};
+
+type ConversationItem = {
+  id: string;
+  title: string;
+  updatedAt: string;
+};
+
+type ConversationDeleteTarget = {
+  id: string;
+  title: string;
+  index: number;
+};
+
+type ConversationRenameTarget = {
   id: string;
   title: string;
-  updatedAt: string;
+  index: number;
+  draft: string;
 };
 
-type ConversationDeleteTarget = {
-  id: string;
-  title: string;
+type ConversationActionKind = 'rename' | 'delete';
+
+type ConversationActionAttempt = {
+  action: ConversationActionKind;
+  conversationId: string;
+  originalTitle: string;
   index: number;
+  newTitle?: string;
+  snapshot?: ConversationItem;
+  messagesSnapshot?: ChatMessage[];
+  wasActive?: boolean;
+};
+
+type ConversationActionErrorState = ConversationActionAttempt & {
+  message: string;
 };
 
 export type HeaderActionConfig = {
@@ -36,9 +60,9 @@ export type HeaderActionConfig = {
   iconUrl: string;
   ariaLabel?: string;
   onClick?: () => void;
-};
-
-export class RioAssistWidget extends LitElement {
+};
+
+export class RioAssistWidget extends LitElement {
   static styles = widgetStyles;
 
   static properties = {
@@ -57,15 +81,17 @@ 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 },
-    showNewConversationShortcut: { type: Boolean, 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 },
     conversationHistoryError: { type: String, state: true },
     deleteConversationTarget: { attribute: false },
+    renameConversationTarget: { attribute: false },
+    conversationActionError: { attribute: false },
     headerActions: { attribute: false },
     homeUrl: { type: String, attribute: 'data-home-url' },
   };
@@ -88,12 +114,18 @@ export class RioAssistWidget extends LitElement {
 
   suggestionsSource = '';
 
+  private randomizedSuggestions: string[] = [];
+
   messages: ChatMessage[] = [];
 
   isLoading = false;
 
   errorMessage = '';
 
+  get loadingLabel() {
+    return this.loadingLabelInternal;
+  }
+
   showConversations = false;
 
   conversationSearch = '';
@@ -102,141 +134,180 @@ export class RioAssistWidget extends LitElement {
 
   conversationMenuPlacement: 'above' | 'below' = 'below';
 
-  isFullscreen = false;
-
-  showNewConversationShortcut = false;
-
-  conversationScrollbar = {
-    height: 0,
-    top: 0,
-    visible: false,
-  };
-
-  conversationHistoryLoading = false;
-
-  conversationHistoryError = '';
-
-  deleteConversationTarget: ConversationDeleteTarget | null = null;
+  isFullscreen = false;
+
+  showNewConversationShortcut = false;
+
+  conversationScrollbar = {
+    height: 0,
+    top: 0,
+    visible: false,
+  };
+
+  conversationHistoryLoading = false;
+
+  conversationHistoryError = '';
+
+  deleteConversationTarget: ConversationDeleteTarget | null = null;
+
+  renameConversationTarget: ConversationRenameTarget | null = null;
 
-  private refreshConversationsAfterResponse = false;
+  conversationActionError: ConversationActionErrorState | null = null;
 
-  activeConversationTitle: string | null = null;
+  private loadingLabelInternal = 'Rio Insight está respondendo...';
+  private loadingTimerSlow: number | null = null;
+  private loadingTimerTimeout: number | null = null;
+
+  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 pendingConversationAction: ConversationActionAttempt | null = 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 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 currentConversationId: string | null = null;
-
-  private conversationCounter = 0;
-
-  private conversationUserId: string | null = null;
-
-  private conversationScrollbarDraggingId: number | 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);
+  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;
+    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) {
+    return this.randomizedSuggestions;
+  }
+
+  private parseSuggestions(source: string): string[] {
+    if (!source) {
       return [];
     }
 
-    return this.suggestionsSource
+    return source
       .split('|')
       .map((item) => item.trim())
       .filter(Boolean);
   }
 
+  private pickRandomSuggestions(options: string[], count: number): string[] {
+    if (options.length <= count) {
+      return [...options];
+    }
+
+    const pool = [...options];
+    for (let index = pool.length - 1; index > 0; index -= 1) {
+      const swapIndex = Math.floor(Math.random() * (index + 1));
+      [pool[index], pool[swapIndex]] = [pool[swapIndex], pool[index]];
+    }
+
+    return pool.slice(0, count);
+  }
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('suggestionsSource')) {
+      this.randomizedSuggestions = this.pickRandomSuggestions(
+        this.parseSuggestions(this.suggestionsSource),
+        3,
+      );
+    }
+  }
+
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     this.style.setProperty('--accent-color', this.accentColor);
 
-    if (
-      changedProperties.has('isFullscreen') ||
-      changedProperties.has('showConversations') ||
-      changedProperties.has('conversations')
-    ) {
-      this.enqueueConversationScrollbarMeasure();
-    }
-
-    if (
-      changedProperties.has('messages') ||
-      (changedProperties.has('isLoading') && this.isLoading) ||
-      (changedProperties.has('open') && this.open) ||
-      (changedProperties.has('isFullscreen') && this.isFullscreen)
-    ) {
-      this.scrollConversationToBottom();
-    }
-  }
+    if (
+      changedProperties.has('isFullscreen') ||
+      changedProperties.has('showConversations') ||
+      changedProperties.has('conversations')
+    ) {
+      this.enqueueConversationScrollbarMeasure();
+    }
+
+    if (
+      changedProperties.has('messages') ||
+      (changedProperties.has('isLoading') && this.isLoading) ||
+      (changedProperties.has('open') && this.open) ||
+      (changedProperties.has('isFullscreen') && this.isFullscreen)
+    ) {
+      this.scrollConversationToBottom();
+    }
+  }
 
   protected firstUpdated(): void {
     this.enqueueConversationScrollbarMeasure();
@@ -290,48 +361,48 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  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();
-  }
+  openConversationsPanel() {
+    this.showConversations = true;
+    this.requestConversationHistory();
+  }
 
-  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;
-  }
+  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;
+  }
+
+  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();
@@ -367,186 +438,494 @@ export class RioAssistWidget extends LitElement {
       this.conversationMenuId = null;
     }
   }
-
-  handleConversationAction(action: 'rename' | 'delete', id: string) {
-    this.conversationMenuId = null;
-    const conversationIndex = this.conversations.findIndex((item) => item.id === id);
-    if (conversationIndex === -1) {
+
+  handleConversationAction(action: 'rename' | 'delete', id: string) {
+    this.conversationMenuId = null;
+    const conversationIndex = this.conversations.findIndex((item) => item.id === id);
+    if (conversationIndex === -1) {
+      return;
+    }
+
+    const conversation = this.conversations[conversationIndex];
+    if (action === 'delete') {
+      this.deleteConversationTarget = {
+        id: conversation.id,
+        title: conversation.title,
+        index: conversationIndex,
+      };
+      return;
+    }
+
+    this.renameConversationTarget = {
+      id: conversation.id,
+      title: conversation.title,
+      index: conversationIndex,
+      draft: conversation.title,
+    };
+  }
+
+  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);
+    }
+  }
+
+  applyConversationRename(id: string, newTitle: string) {
+    if (!id || !newTitle) {
+      return;
+    }
+
+    let changed = false;
+    this.conversations = this.conversations.map((conversation) => {
+      if (conversation.id === id) {
+        changed = true;
+        return { ...conversation, title: newTitle };
+      }
+      return conversation;
+    });
+
+    if (!changed) {
+      return;
+    }
+
+    if (this.currentConversationId === id) {
+      this.activeConversationTitle = newTitle;
+    }
+  }
+
+  applyConversationDeletion(id: string) {
+    if (!id) {
       return;
     }
 
-    const conversation = this.conversations[conversationIndex];
-    if (action === 'delete') {
-      this.deleteConversationTarget = {
-        id: conversation.id,
-        title: conversation.title,
-        index: conversationIndex,
-      };
-      return;
+    const wasActive = this.currentConversationId === id;
+    const next = this.conversations.filter((conversation) => conversation.id !== id);
+
+    if (next.length === this.conversations.length) {
+      return;
+    }
+
+    this.conversations = next;
+
+    if (wasActive) {
+      this.currentConversationId = null;
+      this.activeConversationTitle = null;
+      this.messages = [];
     }
-
-    this.dispatchConversationAction('rename', conversation, conversationIndex);
   }
 
-  handleHomeNavigation() {
-    const detail = { url: this.homeUrl || null };
-    const allowed = this.dispatchEvent(
-      new CustomEvent('rioassist:home', {
-        detail,
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-      }),
-    );
-
-    if (!allowed) {
+  private restoreConversationSnapshot(snapshot: ConversationItem | undefined, index: number) {
+    if (!snapshot) {
       return;
     }
 
-    if (this.homeUrl) {
-      window.location.assign(this.homeUrl);
+    const exists = this.conversations.some((conversation) => conversation.id === snapshot.id);
+    if (exists) {
+      return;
     }
-  }
 
-  applyConversationRename(id: string, newTitle: string) {
-    if (!id || !newTitle) {
+    const next = [...this.conversations];
+    const position = index >= 0 && index <= next.length ? index : next.length;
+    next.splice(position, 0, snapshot);
+    this.conversations = next;
+  }
+
+  async confirmDeleteConversation() {
+    const target = this.deleteConversationTarget;
+    if (!target) {
       return;
     }
 
-    let changed = false;
-    this.conversations = this.conversations.map((conversation) => {
-      if (conversation.id === id) {
-        changed = true;
-        return { ...conversation, title: newTitle };
-      }
-      return conversation;
-    });
+    const snapshot =
+      this.conversations[target.index] ??
+      this.conversations.find((item) => item.id === target.id) ?? {
+        id: target.id,
+        title: target.title,
+        updatedAt: new Date().toISOString(),
+      };
+    const isActive = this.currentConversationId === target.id;
+    this.pendingConversationAction = {
+      action: 'delete',
+      conversationId: target.id,
+      originalTitle: target.title,
+      index: target.index,
+      snapshot,
+      messagesSnapshot: isActive ? [...this.messages] : undefined,
+      wasActive: isActive,
+    };
 
-    if (!changed) {
+    const success = await this.dispatchConversationAction(
+      'delete',
+      { id: target.id, title: target.title },
+      target.index,
+    );
+    if (success) {
+      this.deleteConversationTarget = null;
       return;
     }
 
-    if (this.currentConversationId === id) {
-      this.activeConversationTitle = newTitle;
-    }
+    this.pendingConversationAction = null;
   }
-
-  applyConversationDeletion(id: string) {
-    if (!id) {
+
+  cancelDeleteConversation() {
+    this.deleteConversationTarget = null;
+  }
+
+  handleRenameDraft(event: InputEvent) {
+    if (!this.renameConversationTarget) {
+      return;
+    }
+
+    this.renameConversationTarget = {
+      ...this.renameConversationTarget,
+      draft: (event.target as HTMLInputElement).value,
+    };
+  }
+
+  async confirmRenameConversation() {
+    const target = this.renameConversationTarget;
+    if (!target) {
+      return;
+    }
+
+    const newTitle = target.draft.trim();
+    if (!newTitle) {
       return;
     }
 
-    const wasActive = this.currentConversationId === id;
-    const next = this.conversations.filter((conversation) => conversation.id !== id);
+    this.pendingConversationAction = {
+      action: 'rename',
+      conversationId: target.id,
+      originalTitle: target.title,
+      index: target.index,
+      newTitle,
+    };
 
-    if (next.length === this.conversations.length) {
+    const success = await this.dispatchConversationAction(
+      'rename',
+      { id: target.id, title: newTitle },
+      target.index,
+      newTitle,
+    );
+    if (success) {
+      this.renameConversationTarget = null;
       return;
     }
 
-    this.conversations = next;
-
-    if (wasActive) {
-      this.currentConversationId = null;
-      this.activeConversationTitle = null;
-      this.messages = [];
-    }
+    this.pendingConversationAction = null;
   }
-
-  confirmDeleteConversation() {
-    const target = this.deleteConversationTarget;
-    if (!target) {
-      return;
-    }
-
-    this.dispatchConversationAction('delete', { id: target.id, title: target.title }, target.index);
-    this.deleteConversationTarget = null;
+
+  cancelRenameConversation() {
+    this.renameConversationTarget = null;
   }
 
-  cancelDeleteConversation() {
-    this.deleteConversationTarget = null;
+  cancelConversationActionError() {
+    this.conversationActionError = null;
+    this.pendingConversationAction = null;
   }
 
-  private dispatchConversationAction(
-    action: 'rename' | 'delete',
-    conversation: Pick<ConversationItem, 'id' | 'title'>,
-    index: number,
-  ) {
-    const eventName =
-      action === 'rename' ? 'rioassist:conversation-rename' : 'rioassist:conversation-delete';
-    const detail = {
-      id: conversation.id,
-      title: conversation.title,
-      index,
-      action,
-    };
-
-    const allowed = this.dispatchEvent(
-      new CustomEvent(eventName, {
-        detail,
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-      }),
-    );
-
-    if (!allowed) {
+  async retryConversationAction() {
+    const errorState = this.conversationActionError;
+    if (!errorState) {
       return;
     }
 
-    if (action === 'delete') {
-      this.applyConversationDeletion(conversation.id);
-    }
-  }
+    const indexFromState =
+      typeof errorState.index === 'number' ? errorState.index : this.conversations.findIndex(
+        (item) => item.id === errorState.conversationId,
+      );
+    const safeIndex =
+      indexFromState >= 0
+        ? indexFromState
+        : this.conversations.length > 0
+          ? this.conversations.length - 1
+          : 0;
+
+    const snapshot =
+      errorState.snapshot ??
+      this.conversations.find((item) => item.id === errorState.conversationId) ?? {
+        id: errorState.conversationId,
+        title: errorState.originalTitle,
+        updatedAt: new Date().toISOString(),
+      };
 
-  handleHeaderActionClick(action: HeaderActionConfig, index: number) {
-    const detail = {
-      index,
-      id: action.id ?? null,
-      ariaLabel: action.ariaLabel ?? null,
-      iconUrl: action.iconUrl,
+    this.pendingConversationAction = {
+      action: errorState.action,
+      conversationId: errorState.conversationId,
+      originalTitle: errorState.originalTitle,
+      index: safeIndex,
+      newTitle: errorState.newTitle,
+      snapshot,
+      messagesSnapshot: errorState.messagesSnapshot,
+      wasActive: errorState.wasActive,
     };
 
-    const allowed = this.dispatchEvent(
-      new CustomEvent('rioassist:header-action', {
-        detail,
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-      }),
-    );
-
-    if (!allowed) {
-      return;
-    }
+    this.conversationActionError = null;
 
-    if (typeof action.onClick === 'function') {
-      action.onClick();
-    }
+    await this.dispatchConversationAction(
+      errorState.action,
+      { id: errorState.conversationId, title: errorState.newTitle ?? errorState.originalTitle },
+      safeIndex,
+      errorState.newTitle,
+    );
   }
 
-  handleCloseAction() {
-    if (this.isFullscreen) {
-      this.exitFullscreen(true);
-      return;
-    }
+  private async dispatchConversationAction(
+    action: 'rename' | 'delete',
+    conversation: Pick<ConversationItem, 'id' | 'title'>,
+    index: number,
+    newTitle?: string,
+  ) {
+    const eventName =
+      action === 'rename' ? 'rioassist:conversation-rename' : 'rioassist:conversation-delete';
+    const detail = {
+      id: conversation.id,
+      title: conversation.title,
+      index,
+      action,
+    };
 
-    if (this.showConversations) {
-      this.closeConversationsPanel();
-    } else {
-      this.closePanel();
-    }
-  }
+    const allowed = this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
 
-  enterFullscreen() {
-    if (this.isFullscreen) {
-      return;
+    if (!allowed) {
+      return false;
+    }
+
+    if (action === 'delete') {
+      const ok = await this.syncConversationDeleteBackend(conversation.id);
+      return ok;
+    }
+
+    if (action === 'rename' && newTitle) {
+      const ok = await this.syncConversationRenameBackend(conversation.id, newTitle);
+      return ok;
+    }
+
+    return false;
+  }
+
+  private async syncConversationRenameBackend(conversationId: string, newTitle: string) {
+    try {
+      const client = this.ensureRioClient();
+      await client.renameConversation(conversationId, newTitle);
+      this.applyConversationRename(conversationId, newTitle);
+      this.conversationHistoryError = '';
+      return true;
+    } catch (error) {
+      console.error('[RioAssist][history] erro ao renomear conversa', error);
+      this.conversationHistoryError =
+        error instanceof Error && error.message
+          ? error.message
+          : 'Nao foi possivel renomear a conversa.';
+      return false;
+    }
+  }
+
+  private async syncConversationDeleteBackend(conversationId: string) {
+    try {
+      const client = this.ensureRioClient();
+      await client.deleteConversation(conversationId);
+      this.applyConversationDeletion(conversationId);
+      this.conversationHistoryError = '';
+      return true;
+    } catch (error) {
+      console.error('[RioAssist][history] erro ao excluir conversa', error);
+      this.conversationHistoryError =
+        error instanceof Error && error.message
+          ? error.message
+          : 'Nao foi possivel excluir a conversa.';
+      return false;
+    }
+  }
+
+  private handleConversationSystemAction(message: RioIncomingMessage) {
+    const action = (message.action ?? '').toLowerCase();
+    if (action === 'conversationrenamed') {
+      const data = message.data as Record<string, unknown>;
+      const id = this.extractString(data, ['conversationId', 'id']);
+      const newTitle = this.extractString(data, ['newTitle', 'title']);
+      if (id && newTitle) {
+        this.applyConversationRename(id, newTitle);
+        this.conversationHistoryError = '';
+        if (
+          this.pendingConversationAction &&
+          this.pendingConversationAction.conversationId === id &&
+          this.pendingConversationAction.action === 'rename'
+        ) {
+          this.pendingConversationAction = null;
+          this.conversationActionError = null;
+        }
+      }
+      return true;
+    }
+
+    if (action === 'conversationdeleted') {
+      const data = message.data as Record<string, unknown>;
+      const id = this.extractString(data, ['conversationId', 'id']);
+      if (id) {
+        this.applyConversationDeletion(id);
+        this.conversationHistoryError = '';
+        if (
+          this.pendingConversationAction &&
+          this.pendingConversationAction.conversationId === id &&
+          this.pendingConversationAction.action === 'delete'
+        ) {
+          this.pendingConversationAction = null;
+          this.conversationActionError = null;
+        }
+      }
+      return true;
+    }
+
+    if (action === 'processing') {
+      return true;
+    }
+
+    return false;
+  }
+
+  private handleConversationActionError(message: RioIncomingMessage) {
+    const action = (message.action ?? '').toLowerCase();
+    if (action !== 'error') {
+      return false;
+    }
+
+    const data = message.data as Record<string, unknown>;
+    const errorText =
+      this.extractString(data, ['error', 'message', 'detail', 'description']) ||
+      (typeof message.text === 'string' && message.text.trim()
+        ? message.text
+        : 'O agente retornou um erro ao processar a conversa.');
+
+    const pending = this.pendingConversationAction;
+    if (pending) {
+      if (pending.action === 'rename') {
+        this.applyConversationRename(pending.conversationId, pending.originalTitle);
+      }
+
+      if (pending.action === 'delete') {
+        this.restoreConversationSnapshot(pending.snapshot, pending.index);
+        if (pending.wasActive) {
+          this.currentConversationId = pending.conversationId;
+          this.activeConversationTitle = pending.originalTitle;
+          this.messages = pending.messagesSnapshot ?? this.messages;
+        }
+      }
+
+      this.conversationActionError = {
+        ...pending,
+        message: errorText,
+      };
+      this.pendingConversationAction = null;
+      this.clearLoadingGuard();
+      this.isLoading = false;
+      return true;
     }
 
-    this.isFullscreen = true;
-    this.open = false;
-    this.showConversations = false;
-    this.requestConversationHistory();
+    this.errorMessage = errorText;
+    this.clearLoadingGuard();
+    this.isLoading = false;
+    return true;
   }
+
+  private shouldIgnoreAssistantPayload(action?: string) {
+    if (!action) {
+      return false;
+    }
+    const normalized = action.toLowerCase();
+    return (
+      normalized === 'processing' ||
+      normalized === 'conversationrenamed' ||
+      normalized === 'conversationdeleted'
+    );
+  }
+
+  private extractString(
+    data: Record<string, unknown> | undefined,
+    keys: string[],
+  ): string | null {
+    if (!data || typeof data !== 'object') {
+      return null;
+    }
+    for (const key of keys) {
+      const value = data[key];
+      if (typeof value === 'string' && value.trim()) {
+        return value;
+      }
+    }
+    return null;
+  }
+
+  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();
+    } else {
+      this.closePanel();
+    }
+  }
+
+  enterFullscreen() {
+    if (this.isFullscreen) {
+      return;
+    }
+
+    this.isFullscreen = true;
+    this.open = false;
+    this.showConversations = false;
+    this.requestConversationHistory();
+  }
 
   exitFullscreen(restorePanel: boolean) {
     if (!this.isFullscreen) {
@@ -561,25 +940,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.currentConversationId = this.generateConversationId();
-    this.activeConversationTitle = null;
-    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,
       }),
     );
   }
@@ -706,95 +1085,95 @@ export class RioAssistWidget extends LitElement {
       return;
     }
 
-    const ratio = clientHeight / scrollHeight;
-    const height = Math.max(ratio * 100, 8);
-    const maxTop = 100 - height;
-    const top =
-      scrollTop / (scrollHeight - clientHeight) * (maxTop > 0 ? maxTop : 0);
-
-    this.conversationScrollbar = {
-      height,
-      top,
-      visible: true,
-    };
-  }
-
-  async onSuggestionClick(suggestion: string) {
-    await this.processMessage(suggestion);
-  }
+    const ratio = clientHeight / scrollHeight;
+    const height = Math.max(ratio * 100, 8);
+    const maxTop = 100 - height;
+    const top =
+      scrollTop / (scrollHeight - clientHeight) * (maxTop > 0 ? maxTop : 0);
 
-  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();
-    if (!content || this.isLoading) {
-      return;
-    }
-
-    if (!this.currentConversationId) {
-      this.currentConversationId = this.generateConversationId();
-      this.activeConversationTitle = null;
-    }
-
-    const wasEmptyConversation = this.messages.length === 0;
-
-    this.dispatchEvent(
-      new CustomEvent('rioassist:send', {
-        detail: {
-          message: content,
-          apiBaseUrl: this.apiBaseUrl,
+    this.conversationScrollbar = {
+      height,
+      top,
+      visible: true,
+    };
+  }
+
+  async onSuggestionClick(suggestion: string) {
+    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,
+      html: this.renderMarkdown(text),
+      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(
+      new CustomEvent('rioassist:send', {
+        detail: {
+          message: content,
+          apiBaseUrl: this.apiBaseUrl,
           token: this.rioToken,
         },
         bubbles: true,
         composed: true,
       }),
     );
-
-    const userMessage = this.createMessage('user', content);
-    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, this.currentConversationId);
-    } catch (error) {
-      this.clearLoadingGuard();
-      this.isLoading = false;
-      this.errorMessage = error instanceof Error
-        ? error.message
+
+    const userMessage = this.createMessage('user', content);
+    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, 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.';
     }
   }
 
-  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.',
       );
     }
 
@@ -805,34 +1184,53 @@ export class RioAssistWidget extends LitElement {
         this.handleIncomingMessage(incoming);
       });
     }
-
-    return this.rioClient;
-  }
-
-  private handleIncomingMessage(message: RioIncomingMessage) {
-    if (this.isHistoryPayload(message)) {
-      this.logHistoryPayload(message);
-      this.handleHistoryPayload(message.data);
+
+    return this.rioClient;
+  }
+
+  private handleIncomingMessage(message: RioIncomingMessage) {
+    if (this.isHistoryPayload(message)) {
+      this.logHistoryPayload(message);
+      this.handleHistoryPayload(message.data);
+      return;
+    }
+
+    if (this.handleConversationSystemAction(message)) {
       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.handleConversationActionError(message)) {
+      return;
+    }
 
-    if (this.refreshConversationsAfterResponse) {
-      this.refreshConversationsAfterResponse = false;
-      this.requestConversationHistory();
+    if (this.shouldIgnoreAssistantPayload(message.action)) {
+      return;
     }
-  }
+
+    console.info('[RioAssist][ws] resposta de mensagem recebida', {
+      action: message.action ?? 'message',
+      text: message.text,
+      raw: message.raw,
+      data: message.data,
+    });
+
+    // Handle "processing" type messages - just keep loading state, don't create message
+    if (message.action === 'processing') {
+      console.info('[RioAssist][ws] processando mensagem - aguardando resposta final');
+      // Keep isLoading = true, don't create a message balloon
+      return;
+    }
+
+    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() {
     if (this.rioUnsubscribe) {
@@ -840,583 +1238,610 @@ export class RioAssistWidget extends LitElement {
       this.rioUnsubscribe = null;
     }
 
-    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,
-      });
-
-      this.conversationHistoryError = '';
-      this.conversationHistoryLoading = true;
-      await client.requestHistory({ conversationId, limit });
-    } catch (error) {
-      console.error('[RioAssist][history] erro ao solicitar historico', error);
-      this.conversationHistoryError =
-        error instanceof Error && error.message
-          ? error.message
-          : 'Nao foi possivel carregar as conversas.';
-      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;
-    }
-  }
-
-  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 applyConversationHistoryFromEntries(entries: unknown[]) {
-    if (entries.length === 0) {
-      console.info('[RioAssist][history] payload sem itens para montar lista de conversas');
-      this.conversations = [];
-      this.conversationHistoryLoading = false;
-      this.conversationHistoryError = '';
-      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;
-    this.conversationHistoryLoading = false;
-    this.conversationHistoryError = '';
-    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;
-    }
-
-    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 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,
-  ): 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 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);
-      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);
-  }
-
-  private clearLoadingGuard() {
-    if (this.loadingTimer !== null) {
-      window.clearTimeout(this.loadingTimer);
-      this.loadingTimer = null;
-    }
-  }
-
-  private scrollConversationToBottom() {
-    const containers = Array.from(
-      this.renderRoot.querySelectorAll('.panel-content'),
-    ) as HTMLElement[];
-
-    containers.forEach((container) => {
-      requestAnimationFrame(() => {
-        container.scrollTop = container.scrollHeight;
-      });
-    });
-  }
-
-  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);
-  }
-
-}
+    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,
+      });
+
+      this.conversationHistoryError = '';
+      this.conversationHistoryLoading = true;
+      await client.requestHistory({ conversationId, limit });
+    } catch (error) {
+      console.error('[RioAssist][history] erro ao solicitar historico', error);
+      this.conversationHistoryError =
+        error instanceof Error && error.message
+          ? error.message
+          : 'Nao foi possivel carregar as conversas.';
+      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;
+    }
+  }
+
+  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 applyConversationHistoryFromEntries(entries: unknown[]) {
+    if (entries.length === 0) {
+      console.info('[RioAssist][history] payload sem itens para montar lista de conversas');
+      this.conversations = [];
+      this.conversationHistoryLoading = false;
+      this.conversationHistoryError = '';
+      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;
+    this.conversationHistoryLoading = false;
+    this.conversationHistoryError = '';
+    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;
+    }
+
+    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 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,
+  ): 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 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);
+      if (!Number.isNaN(date.getTime())) {
+        return date.toISOString();
+      }
+    }
+
+    return new Date().toISOString();
+  }
+
+  private startLoadingGuard() {
+    this.clearLoadingGuard();
+    this.loadingLabelInternal = 'RIO Insight está respondendo';
+
+    // Após 20s, mensagem de processamento prolongado.
+    this.loadingTimerSlow = window.setTimeout(() => {
+      this.loadingLabelInternal = 'RIO Insight continua respondendo';
+      this.requestUpdate();
+    }, 20000);
+
+    // Após 60s, aviso de demora maior.
+    this.loadingTimerTimeout = window.setTimeout(() => {
+      this.loadingLabelInternal =
+        'RIO Insight ainda está processando sua resposta. Peço que aguarde um pouco mais';
+      this.requestUpdate();
+    }, 60000);
+
+    // Após 120s, novo aviso de demora maior.
+    this.loadingTimerTimeout = window.setTimeout(() => {
+      this.loadingLabelInternal =
+        'Essa solicitação está demorando um pouco mais que o esperado. Pode favor, aguarde mais um pouco';
+      this.requestUpdate();
+    }, 120000);
+  }
+
+  private clearLoadingGuard() {
+    if (this.loadingTimer !== null) {
+      window.clearTimeout(this.loadingTimer);
+      this.loadingTimer = null;
+    }
+
+    if (this.loadingTimerSlow !== null) {
+      window.clearTimeout(this.loadingTimerSlow);
+      this.loadingTimerSlow = null;
+    }
+
+    if (this.loadingTimerTimeout !== null) {
+      window.clearTimeout(this.loadingTimerTimeout);
+      this.loadingTimerTimeout = null;
+    }
+  }
+
+  private scrollConversationToBottom() {
+    const containers = Array.from(
+      this.renderRoot.querySelectorAll('.panel-content'),
+    ) as HTMLElement[];
+
+    containers.forEach((container) => {
+      requestAnimationFrame(() => {
+        container.scrollTop = container.scrollHeight;
+      });
+    });
+  }
+
+  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);
+  }
+
+}
 declare global {
   interface HTMLElementTagNameMap {
     '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);
+}