npm - rio-assist-widget - Versions diffs - 0.1.23 → 0.1.26 - Mend

rio-assist-widget 0.1.23 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/rio-assist.js +119 -65
package/package.json +1 -1
package/src/components/conversations-panel/conversations-panel.template.ts +12 -8
package/src/components/mini-panel/mini-panel.styles.ts +78 -58
package/src/components/rio-assist/rio-assist.styles.ts +9 -0
package/src/components/rio-assist/rio-assist.template.ts +36 -0
package/src/components/rio-assist/rio-assist.ts +1710 -1511

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

@@ -1,41 +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';
-type ChatRole = 'user' | 'assistant';
-export type ChatMessage = {
-  id: string;
-  role: ChatRole;
-  text: string;
-  html?: string;
-  timestamp: number;
-};
-type ConversationItem = {
+import { LitElement, type PropertyValues } from 'lit';
+import { widgetStyles } from './rio-assist.styles';
+import { renderRioAssist } from './rio-assist.template';
+import {
+  RioWebsocketClient,
+  type RioIncomingMessage,
+} from '../../services/rioWebsocket';
+import MarkdownIt from 'markdown-it';
+import markdownItTaskLists from 'markdown-it-task-lists';
+import DOMPurify from 'dompurify';
+type ChatRole = 'user' | 'assistant';
+export type ChatMessage = {
+  id: string;
+  role: ChatRole;
+  text: string;
+  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 ConversationRenameTarget = {
-  id: string;
-  title: string;
-  index: number;
-  draft: string;
+type ConversationActionErrorState = ConversationActionAttempt & {
+  message: string;
 };
 export type HeaderActionConfig = {
@@ -43,475 +60,514 @@ export type HeaderActionConfig = {
   iconUrl: string;
   ariaLabel?: string;
   onClick?: () => void;
-};
-export class RioAssistWidget extends LitElement {
-  static styles = widgetStyles;
-  static properties = {
-    open: { type: Boolean, state: true },
-    message: { type: String, state: true },
-    titleText: { type: String, attribute: 'data-title' },
-    buttonLabel: { type: String, attribute: 'data-button-label' },
-    placeholder: { type: String, attribute: 'data-placeholder' },
-    accentColor: { type: String, attribute: 'data-accent-color' },
-    apiBaseUrl: { type: String, attribute: 'data-api-base-url' },
-    rioToken: { type: String, attribute: 'data-rio-token' },
-    suggestionsSource: { type: String, attribute: 'data-suggestions' },
-    messages: { state: true },
-    isLoading: { type: Boolean, state: true },
-    errorMessage: { type: String, state: true },
-    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 },
+};
+export class RioAssistWidget extends LitElement {
+  static styles = widgetStyles;
+  static properties = {
+    open: { type: Boolean, state: true },
+    message: { type: String, state: true },
+    titleText: { type: String, attribute: 'data-title' },
+    buttonLabel: { type: String, attribute: 'data-button-label' },
+    placeholder: { type: String, attribute: 'data-placeholder' },
+    accentColor: { type: String, attribute: 'data-accent-color' },
+    apiBaseUrl: { type: String, attribute: 'data-api-base-url' },
+    rioToken: { type: String, attribute: 'data-rio-token' },
+    suggestionsSource: { type: String, attribute: 'data-suggestions' },
+    messages: { state: true },
+    isLoading: { type: Boolean, state: true },
+    errorMessage: { type: String, state: true },
+    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 },
     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' },
   };
-  open = false;
-  message = '';
-  titleText = 'Rio Insight';
-  buttonLabel = 'Rio Insight';
-  placeholder = 'Pergunte alguma coisa';
-  accentColor = '#008B9A';
-  apiBaseUrl = '';
-  rioToken = '';
-  suggestionsSource = '';
-  private randomizedSuggestions: string[] = [];
-  messages: ChatMessage[] = [];
-  isLoading = false;
-  errorMessage = '';
-  get loadingLabel() {
-    return this.loadingLabelInternal;
-  }
-  showConversations = false;
-  conversationSearch = '';
-  conversationMenuId: string | null = null;
-  conversationMenuPlacement: 'above' | 'below' = 'below';
-  isFullscreen = false;
-  showNewConversationShortcut = false;
-  conversationScrollbar = {
-    height: 0,
-    top: 0,
-    visible: false,
-  };
-  conversationHistoryLoading = false;
-  conversationHistoryError = '';
-  deleteConversationTarget: ConversationDeleteTarget | null = null;
+  open = false;
+  message = '';
+  titleText = 'Rio Insight';
+  buttonLabel = 'Rio Insight';
+  placeholder = 'Pergunte alguma coisa';
+  accentColor = '#008B9A';
+  apiBaseUrl = '';
+  rioToken = '';
+  suggestionsSource = '';
+  private randomizedSuggestions: string[] = [];
+  messages: ChatMessage[] = [];
+  isLoading = false;
+  errorMessage = '';
+  get loadingLabel() {
+    return this.loadingLabelInternal;
+  }
+  showConversations = false;
+  conversationSearch = '';
+  conversationMenuId: string | null = null;
+  conversationMenuPlacement: 'above' | 'below' = 'below';
+  isFullscreen = false;
+  showNewConversationShortcut = false;
+  conversationScrollbar = {
+    height: 0,
+    top: 0,
+    visible: false,
+  };
+  conversationHistoryLoading = false;
+  conversationHistoryError = '';
+  deleteConversationTarget: ConversationDeleteTarget | null = null;
   renameConversationTarget: ConversationRenameTarget | null = null;
-  private loadingLabelInternal = 'Rio Insight está respondendo...';
-  private loadingTimerSlow: number | null = null;
-  private loadingTimerTimeout: number | 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 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);
-  conversations: ConversationItem[] = [];
-  get suggestions(): string[] {
-    return this.randomizedSuggestions;
-  }
-  private parseSuggestions(source: string): string[] {
-    if (!source) {
-      return [];
-    }
-    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();
-    }
-  }
-  protected firstUpdated(): void {
-    this.enqueueConversationScrollbarMeasure();
-  }
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this.conversationScrollbarRaf !== null) {
-      cancelAnimationFrame(this.conversationScrollbarRaf);
-      this.conversationScrollbarRaf = null;
-    }
-    this.teardownRioClient();
-    this.clearLoadingGuard();
-  }
-  get filteredConversations() {
-    const query = this.conversationSearch.trim().toLowerCase();
-    if (!query) {
-      return this.conversations;
-    }
-    return this.conversations.filter((conversation) =>
-      conversation.title.toLowerCase().includes(query),
-    );
-  }
-  get hasActiveConversation() {
-    return this.messages.length > 0;
-  }
-  togglePanel() {
-    if (this.isFullscreen) {
-      this.exitFullscreen(false);
-      return;
-    }
-    this.open = !this.open;
-    this.dispatchEvent(
-      new CustomEvent(this.open ? 'rioassist:open' : 'rioassist:close', {
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-  closePanel() {
-    this.isFullscreen = false;
-    if (this.open) {
-      this.togglePanel();
-    }
-  }
-  openConversationsPanel() {
-    this.showConversations = true;
-    this.requestConversationHistory();
-  }
-  closeConversationsPanel() {
-    this.showConversations = false;
-    this.conversationMenuId = null;
-  }
-  toggleConversationsPanel() {
-    this.showConversations = !this.showConversations;
-    if (!this.showConversations) {
-      this.conversationMenuId = null;
-      return;
-    }
-    this.requestConversationHistory();
-  }
-  toggleNewConversationShortcut() {
-    this.showNewConversationShortcut = !this.showNewConversationShortcut;
-  }
-  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();
-    if (this.conversationMenuId === id) {
-      this.conversationMenuId = null;
-      return;
-    }
-    const button = event.currentTarget as HTMLElement;
-    const container = this.renderRoot.querySelector(
-      '.conversations-panel__surface',
-    ) as HTMLElement | null;
-    if (button && container) {
-      const buttonRect = button.getBoundingClientRect();
-      const containerRect = container.getBoundingClientRect();
-      const spaceBelow = containerRect.bottom - buttonRect.bottom;
-      this.conversationMenuPlacement = spaceBelow < 140 ? 'above' : 'below';
-    } else {
-      this.conversationMenuPlacement = 'below';
-    }
-    this.conversationMenuId = id;
-  }
-  handleConversationsPanelPointer(event: PointerEvent) {
-    const target = event.target as HTMLElement;
-    if (
-      !target.closest('.conversation-menu') &&
-      !target.closest('.conversation-menu-button')
-    ) {
-      this.conversationMenuId = null;
-    }
-  }
-  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;
-    });
+  private pendingConversationAction: ConversationActionAttempt | null = null;
-    if (!changed) {
+  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);
+  conversations: ConversationItem[] = [];
+  get suggestions(): string[] {
+    return this.randomizedSuggestions;
+  }
+  private parseSuggestions(source: string): string[] {
+    if (!source) {
+      return [];
+    }
+    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();
+    }
+  }
+  protected firstUpdated(): void {
+    this.enqueueConversationScrollbarMeasure();
+  }
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.conversationScrollbarRaf !== null) {
+      cancelAnimationFrame(this.conversationScrollbarRaf);
+      this.conversationScrollbarRaf = null;
+    }
+    this.teardownRioClient();
+    this.clearLoadingGuard();
+  }
+  get filteredConversations() {
+    const query = this.conversationSearch.trim().toLowerCase();
+    if (!query) {
+      return this.conversations;
+    }
+    return this.conversations.filter((conversation) =>
+      conversation.title.toLowerCase().includes(query),
+    );
+  }
+  get hasActiveConversation() {
+    return this.messages.length > 0;
+  }
+  togglePanel() {
+    if (this.isFullscreen) {
+      this.exitFullscreen(false);
+      return;
+    }
+    this.open = !this.open;
+    this.dispatchEvent(
+      new CustomEvent(this.open ? 'rioassist:open' : 'rioassist:close', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+  closePanel() {
+    this.isFullscreen = false;
+    if (this.open) {
+      this.togglePanel();
+    }
+  }
+  openConversationsPanel() {
+    this.showConversations = true;
+    this.requestConversationHistory();
+  }
+  closeConversationsPanel() {
+    this.showConversations = false;
+    this.conversationMenuId = null;
+  }
+  toggleConversationsPanel() {
+    this.showConversations = !this.showConversations;
+    if (!this.showConversations) {
+      this.conversationMenuId = null;
+      return;
+    }
+    this.requestConversationHistory();
+  }
+  toggleNewConversationShortcut() {
+    this.showNewConversationShortcut = !this.showNewConversationShortcut;
+  }
+  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();
+    if (this.conversationMenuId === id) {
+      this.conversationMenuId = null;
+      return;
+    }
+    const button = event.currentTarget as HTMLElement;
+    const container = this.renderRoot.querySelector(
+      '.conversations-panel__surface',
+    ) as HTMLElement | null;
+    if (button && container) {
+      const buttonRect = button.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const spaceBelow = containerRect.bottom - buttonRect.bottom;
+      this.conversationMenuPlacement = spaceBelow < 140 ? 'above' : 'below';
+    } else {
+      this.conversationMenuPlacement = 'below';
+    }
+    this.conversationMenuId = id;
+  }
+  handleConversationsPanelPointer(event: PointerEvent) {
+    const target = event.target as HTMLElement;
+    if (
+      !target.closest('.conversation-menu') &&
+      !target.closest('.conversation-menu-button')
+    ) {
+      this.conversationMenuId = null;
+    }
+  }
+  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;
     }
-    if (this.currentConversationId === id) {
-      this.activeConversationTitle = newTitle;
+    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 = [];
     }
   }
-  applyConversationDeletion(id: string) {
-    if (!id) {
+  private restoreConversationSnapshot(snapshot: ConversationItem | undefined, index: number) {
+    if (!snapshot) {
       return;
     }
-    const wasActive = this.currentConversationId === id;
-    const next = this.conversations.filter((conversation) => conversation.id !== id);
-    if (next.length === this.conversations.length) {
+    const exists = this.conversations.some((conversation) => conversation.id === snapshot.id);
+    if (exists) {
       return;
     }
+    const next = [...this.conversations];
+    const position = index >= 0 && index <= next.length ? index : next.length;
+    next.splice(position, 0, snapshot);
     this.conversations = next;
-    if (wasActive) {
-      this.currentConversationId = null;
-      this.activeConversationTitle = null;
-      this.messages = [];
-    }
   }
   async confirmDeleteConversation() {
     const target = this.deleteConversationTarget;
     if (!target) {
       return;
     }
+    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,
+    };
     const success = await this.dispatchConversationAction(
       'delete',
       { id: target.id, title: target.title },
@@ -519,35 +575,46 @@ export class RioAssistWidget extends LitElement {
     );
     if (success) {
       this.deleteConversationTarget = null;
-    }
-  }
-  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;
     }
+    this.pendingConversationAction = null;
+  }
+  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;
     }
+    this.pendingConversationAction = {
+      action: 'rename',
+      conversationId: target.id,
+      originalTitle: target.title,
+      index: target.index,
+      newTitle,
+    };
     const success = await this.dispatchConversationAction(
       'rename',
       { id: target.id, title: newTitle },
@@ -556,111 +623,181 @@ export class RioAssistWidget extends LitElement {
     );
     if (success) {
       this.renameConversationTarget = null;
+      return;
     }
-  }
+    this.pendingConversationAction = null;
+  }
   cancelRenameConversation() {
     this.renameConversationTarget = null;
   }
-  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,
-    };
-    const allowed = this.dispatchEvent(
-      new CustomEvent(eventName, {
-        detail,
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-      }),
-    );
-    if (!allowed) {
-      return false;
-    }
+  cancelConversationActionError() {
+    this.conversationActionError = null;
+    this.pendingConversationAction = null;
+  }
-    if (action === 'delete') {
-      const ok = await this.syncConversationDeleteBackend(conversation.id);
-      return ok;
+  async retryConversationAction() {
+    const errorState = this.conversationActionError;
+    if (!errorState) {
+      return;
     }
-    if (action === 'rename' && newTitle) {
-      const ok = await this.syncConversationRenameBackend(conversation.id, newTitle);
-      return ok;
-    }
+    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(),
+      };
-    return false;
-  }
+    this.pendingConversationAction = {
+      action: errorState.action,
+      conversationId: errorState.conversationId,
+      originalTitle: errorState.originalTitle,
+      index: safeIndex,
+      newTitle: errorState.newTitle,
+      snapshot,
+      messagesSnapshot: errorState.messagesSnapshot,
+      wasActive: errorState.wasActive,
+    };
-  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;
-    }
-  }
+    this.conversationActionError = null;
-  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;
-    }
+    await this.dispatchConversationAction(
+      errorState.action,
+      { id: errorState.conversationId, title: errorState.newTitle ?? errorState.originalTitle },
+      safeIndex,
+      errorState.newTitle,
+    );
   }
-  private handleConversationSystemAction(message: RioIncomingMessage) {
-    const action = (message.action ?? '').toLowerCase();
-    if (action === 'conversationrenamed') {
-      const data = message.data as Record<string, unknown>;
+  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,
+    };
+    const allowed = this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
+    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 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;
     }
@@ -668,981 +805,1043 @@ export class RioAssistWidget extends LitElement {
     return false;
   }
-  private shouldIgnoreAssistantPayload(action?: string) {
-    if (!action) {
+  private handleConversationActionError(message: RioIncomingMessage) {
+    const action = (message.action ?? '').toLowerCase();
+    if (action !== 'error') {
       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;
+    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);
       }
-    }
-    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) {
-      return;
-    }
-    this.isFullscreen = false;
-    this.conversationMenuId = null;
-    this.showNewConversationShortcut = false;
-    if (restorePanel) {
-      this.open = 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,
-      }),
-    );
-  }
-  handleConversationListScroll(event: Event) {
-    const target = event.currentTarget as HTMLElement | null;
-    if (!target) {
-      return;
-    }
-    this.updateConversationScrollbar(target);
-  }
-  handleConversationScrollbarPointerDown(event: PointerEvent) {
-    const track = event.currentTarget as HTMLElement | null;
-    const list = this.renderRoot.querySelector(
-      '.conversation-list--sidebar',
-    ) as HTMLElement | null;
-    if (!track || !list) {
-      return;
-    }
-    const trackRect = track.getBoundingClientRect();
-    const thumbHeight = trackRect.height * (this.conversationScrollbar.height / 100);
-    const maxThumbTop = Math.max(trackRect.height - thumbHeight, 0);
-    const scrollRange = Math.max(list.scrollHeight - list.clientHeight, 1);
-    const currentThumbTop = (list.scrollTop / scrollRange) * maxThumbTop;
-    const offsetY = event.clientY - trackRect.top;
-    const isOnThumb = offsetY >= currentThumbTop && offsetY <= currentThumbTop + thumbHeight;
-    const nextThumbTop = isOnThumb
-      ? currentThumbTop
-      : Math.min(Math.max(offsetY - thumbHeight / 2, 0), maxThumbTop);
-    if (!isOnThumb) {
-      list.scrollTop = (nextThumbTop / Math.max(maxThumbTop, 1)) * (list.scrollHeight - list.clientHeight);
-      this.updateConversationScrollbar(list);
-    }
-    track.setPointerCapture(event.pointerId);
-    this.conversationScrollbarDraggingId = event.pointerId;
-    this.conversationScrollbarDragState = {
-      startY: event.clientY,
-      startThumbTop: nextThumbTop,
-      trackHeight: trackRect.height,
-      thumbHeight,
-      list,
-    };
-    event.preventDefault();
-  }
-  handleConversationScrollbarPointerMove(event: PointerEvent) {
-    if (
-      this.conversationScrollbarDraggingId === null ||
-      this.conversationScrollbarDraggingId !== event.pointerId ||
-      !this.conversationScrollbarDragState
-    ) {
-      return;
-    }
-    const {
-      startY,
-      startThumbTop,
-      trackHeight,
-      thumbHeight,
-      list,
-    } = this.conversationScrollbarDragState;
-    const maxThumbTop = Math.max(trackHeight - thumbHeight, 0);
-    const deltaY = event.clientY - startY;
-    const thumbTop = Math.min(Math.max(startThumbTop + deltaY, 0), maxThumbTop);
-    const scrollRange = list.scrollHeight - list.clientHeight;
-    if (scrollRange > 0) {
-      list.scrollTop = (thumbTop / Math.max(maxThumbTop, 1)) * scrollRange;
-      this.updateConversationScrollbar(list);
-    }
-    event.preventDefault();
-  }
-  handleConversationScrollbarPointerUp(event: PointerEvent) {
-    if (this.conversationScrollbarDraggingId !== event.pointerId) {
-      return;
-    }
-    const track = event.currentTarget as HTMLElement | null;
-    track?.releasePointerCapture(event.pointerId);
-    this.conversationScrollbarDraggingId = null;
-    this.conversationScrollbarDragState = null;
-  }
-  private enqueueConversationScrollbarMeasure() {
-    if (this.conversationScrollbarRaf !== null) {
-      return;
-    }
-    this.conversationScrollbarRaf = requestAnimationFrame(() => {
-      this.conversationScrollbarRaf = null;
-      this.updateConversationScrollbar();
-    });
-  }
-  private updateConversationScrollbar(target?: HTMLElement | null) {
-    const element =
-      target ??
-      (this.renderRoot.querySelector(
-        '.conversation-list--sidebar',
-      ) as HTMLElement | null);
-    if (!element) {
-      if (this.conversationScrollbar.visible) {
-        this.conversationScrollbar = { height: 0, top: 0, visible: false };
-      }
-      return;
-    }
-    const { scrollHeight, clientHeight, scrollTop } = element;
-    if (scrollHeight <= clientHeight + 1) {
-      if (this.conversationScrollbar.visible) {
-        this.conversationScrollbar = { height: 0, top: 0, visible: false };
+      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;
+        }
       }
-      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);
-  }
-  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.conversationActionError = {
+        ...pending,
+        message: errorText,
+      };
+      this.pendingConversationAction = null;
       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.',
-      );
-    }
-    if (!this.rioClient || !this.rioClient.matchesToken(token)) {
-      this.teardownRioClient();
-      this.rioClient = new RioWebsocketClient(token);
-      this.rioUnsubscribe = this.rioClient.onMessage((incoming) => {
-        this.handleIncomingMessage(incoming);
-      });
-    }
-    return this.rioClient;
-  }
-  private handleIncomingMessage(message: RioIncomingMessage) {
-    if (this.isHistoryPayload(message)) {
-      this.logHistoryPayload(message);
-      this.handleHistoryPayload(message.data);
-      return;
-    }
-    if (this.handleConversationSystemAction(message)) {
-      return;
-    }
-    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,
-    });
-    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) {
-      this.rioUnsubscribe();
-      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.errorMessage = errorText;
     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,
-    });
+    return true;
   }
-  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') {
+  private shouldIgnoreAssistantPayload(action?: string) {
+    if (!action) {
       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) {
+    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) {
+      return;
+    }
+    this.isFullscreen = false;
+    this.conversationMenuId = null;
+    this.showNewConversationShortcut = false;
+    if (restorePanel) {
+      this.open = 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,
+      }),
+    );
+  }
+  handleConversationListScroll(event: Event) {
+    const target = event.currentTarget as HTMLElement | null;
+    if (!target) {
+      return;
+    }
+    this.updateConversationScrollbar(target);
+  }
+  handleConversationScrollbarPointerDown(event: PointerEvent) {
+    const track = event.currentTarget as HTMLElement | null;
+    const list = this.renderRoot.querySelector(
+      '.conversation-list--sidebar',
+    ) as HTMLElement | null;
+    if (!track || !list) {
+      return;
+    }
+    const trackRect = track.getBoundingClientRect();
+    const thumbHeight = trackRect.height * (this.conversationScrollbar.height / 100);
+    const maxThumbTop = Math.max(trackRect.height - thumbHeight, 0);
+    const scrollRange = Math.max(list.scrollHeight - list.clientHeight, 1);
+    const currentThumbTop = (list.scrollTop / scrollRange) * maxThumbTop;
+    const offsetY = event.clientY - trackRect.top;
+    const isOnThumb = offsetY >= currentThumbTop && offsetY <= currentThumbTop + thumbHeight;
+    const nextThumbTop = isOnThumb
+      ? currentThumbTop
+      : Math.min(Math.max(offsetY - thumbHeight / 2, 0), maxThumbTop);
+    if (!isOnThumb) {
+      list.scrollTop = (nextThumbTop / Math.max(maxThumbTop, 1)) * (list.scrollHeight - list.clientHeight);
+      this.updateConversationScrollbar(list);
+    }
+    track.setPointerCapture(event.pointerId);
+    this.conversationScrollbarDraggingId = event.pointerId;
+    this.conversationScrollbarDragState = {
+      startY: event.clientY,
+      startThumbTop: nextThumbTop,
+      trackHeight: trackRect.height,
+      thumbHeight,
+      list,
+    };
+    event.preventDefault();
+  }
+  handleConversationScrollbarPointerMove(event: PointerEvent) {
+    if (
+      this.conversationScrollbarDraggingId === null ||
+      this.conversationScrollbarDraggingId !== event.pointerId ||
+      !this.conversationScrollbarDragState
+    ) {
+      return;
+    }
+    const {
+      startY,
+      startThumbTop,
+      trackHeight,
+      thumbHeight,
+      list,
+    } = this.conversationScrollbarDragState;
+    const maxThumbTop = Math.max(trackHeight - thumbHeight, 0);
+    const deltaY = event.clientY - startY;
+    const thumbTop = Math.min(Math.max(startThumbTop + deltaY, 0), maxThumbTop);
+    const scrollRange = list.scrollHeight - list.clientHeight;
+    if (scrollRange > 0) {
+      list.scrollTop = (thumbTop / Math.max(maxThumbTop, 1)) * scrollRange;
+      this.updateConversationScrollbar(list);
+    }
+    event.preventDefault();
+  }
+  handleConversationScrollbarPointerUp(event: PointerEvent) {
+    if (this.conversationScrollbarDraggingId !== event.pointerId) {
+      return;
+    }
+    const track = event.currentTarget as HTMLElement | null;
+    track?.releasePointerCapture(event.pointerId);
+    this.conversationScrollbarDraggingId = null;
+    this.conversationScrollbarDragState = null;
+  }
+  private enqueueConversationScrollbarMeasure() {
+    if (this.conversationScrollbarRaf !== null) {
+      return;
+    }
+    this.conversationScrollbarRaf = requestAnimationFrame(() => {
+      this.conversationScrollbarRaf = null;
+      this.updateConversationScrollbar();
+    });
+  }
+  private updateConversationScrollbar(target?: HTMLElement | null) {
+    const element =
+      target ??
+      (this.renderRoot.querySelector(
+        '.conversation-list--sidebar',
+      ) as HTMLElement | null);
+    if (!element) {
+      if (this.conversationScrollbar.visible) {
+        this.conversationScrollbar = { height: 0, top: 0, visible: false };
+      }
+      return;
+    }
+    const { scrollHeight, clientHeight, scrollTop } = element;
+    if (scrollHeight <= clientHeight + 1) {
+      if (this.conversationScrollbar.visible) {
+        this.conversationScrollbar = { height: 0, top: 0, visible: false };
+      }
+      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);
+  }
+  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
+        : '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.',
+      );
+    }
+    if (!this.rioClient || !this.rioClient.matchesToken(token)) {
+      this.teardownRioClient();
+      this.rioClient = new RioWebsocketClient(token);
+      this.rioUnsubscribe = this.rioClient.onMessage((incoming) => {
+        this.handleIncomingMessage(incoming);
+      });
+    }
+    return this.rioClient;
+  }
+  private handleIncomingMessage(message: RioIncomingMessage) {
+    if (this.isHistoryPayload(message)) {
+      this.logHistoryPayload(message);
+      this.handleHistoryPayload(message.data);
+      return;
+    }
+    if (this.handleConversationSystemAction(message)) {
       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 =
-        'Essa solicitação está demorando um pouco mais que o esperado. Pode favor, aguarde mais um pouco';
-      this.requestUpdate();
-    }, 60000);
-  }
-  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.handleConversationActionError(message)) {
+      return;
     }
-    if (this.loadingTimerTimeout !== null) {
-      window.clearTimeout(this.loadingTimerTimeout);
-      this.loadingTimerTimeout = null;
+    if (this.shouldIgnoreAssistantPayload(message.action)) {
+      return;
     }
-  }
-  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);
-}
+    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) {
+      this.rioUnsubscribe();
+      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.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);
+}