rio-assist-widget 0.1.14 → 0.1.23

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

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import { widgetStyles } from './rio-assist.styles';
 import { renderRioAssist } from './rio-assist.template';
 import {
@@ -8,9 +8,9 @@ import {
 import MarkdownIt from 'markdown-it';
 import markdownItTaskLists from 'markdown-it-task-lists';
 import DOMPurify from 'dompurify';
-
-type ChatRole = 'user' | 'assistant';
-
+
+type ChatRole = 'user' | 'assistant';
+
 export type ChatMessage = {
   id: string;
   role: ChatRole;
@@ -18,13 +18,26 @@ export type ChatMessage = {
   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;
+  index: number;
+  draft: string;
+};
+
 export type HeaderActionConfig = {
   id?: string;
   iconUrl: string;
@@ -33,24 +46,24 @@ export type HeaderActionConfig = {
 };
 
 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 },
+  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 },
@@ -58,42 +71,51 @@ export class RioAssistWidget extends LitElement {
     conversations: { state: true },
     conversationHistoryLoading: { type: Boolean, state: true },
     activeConversationTitle: { state: true },
+    conversationHistoryError: { type: String, state: true },
+    deleteConversationTarget: { attribute: false },
+    renameConversationTarget: { 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 = '';
-
-  messages: ChatMessage[] = [];
-
-  isLoading = false;
-
-  errorMessage = '';
-
-  showConversations = false;
-
-  conversationSearch = '';
-
-  conversationMenuId: string | null = null;
-
-  conversationMenuPlacement: 'above' | 'below' = 'below';
-
+
+  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;
@@ -106,6 +128,16 @@ export class RioAssistWidget extends LitElement {
 
   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;
 
   activeConversationTitle: string | null = null;
@@ -160,9 +192,9 @@ export class RioAssistWidget extends LitElement {
     }
     return result;
   }
-
-  private conversationScrollbarRaf: number | null = null;
-
+
+  private conversationScrollbarRaf: number | null = null;
+
   private rioClient: RioWebsocketClient | null = null;
 
   private rioUnsubscribe: (() => void) | null = null;
@@ -176,7 +208,7 @@ export class RioAssistWidget extends LitElement {
   private conversationUserId: string | null = null;
 
   private conversationScrollbarDraggingId: number | null = null;
-
+
   private conversationScrollbarDragState: {
     startY: number;
     startThumbTop: number;
@@ -190,24 +222,53 @@ export class RioAssistWidget extends LitElement {
     linkify: true,
     breaks: true,
   }).use(markdownItTaskLists);
-
-  conversations: ConversationItem[] = [];
-
-  get suggestions(): string[] {
-    if (!this.suggestionsSource) {
-      return [];
-    }
-
-    return this.suggestionsSource
-      .split('|')
-      .map((item) => item.trim())
-      .filter(Boolean);
-  }
-
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-    this.style.setProperty('--accent-color', this.accentColor);
-
+
+  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') ||
@@ -225,59 +286,59 @@ export class RioAssistWidget extends LitElement {
       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();
-    }
-  }
-
+
+  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();
@@ -297,7 +358,7 @@ export class RioAssistWidget extends LitElement {
 
     this.requestConversationHistory();
   }
-
+
   toggleNewConversationShortcut() {
     this.showNewConversationShortcut = !this.showNewConversationShortcut;
   }
@@ -320,53 +381,65 @@ export class RioAssistWidget extends LitElement {
   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;
-    }
-  }
-
+
+  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 conversation = this.conversations.find((item) => item.id === id);
-    if (!conversation) {
+    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;
-    }
-
-    const message = `${
-      action === 'rename' ? 'Renomear' : 'Excluir'
-    } "${conversation.title}"`;
-    console.info(`[Mock] ${message}`);
+    }
+
+    this.renameConversationTarget = {
+      id: conversation.id,
+      title: conversation.title,
+      index: conversationIndex,
+      draft: conversation.title,
+    };
   }
 
   handleHomeNavigation() {
@@ -389,6 +462,240 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
+  applyConversationRename(id: string, newTitle: string) {
+    if (!id || !newTitle) {
+      return;
+    }
+
+    let changed = false;
+    this.conversations = this.conversations.map((conversation) => {
+      if (conversation.id === id) {
+        changed = true;
+        return { ...conversation, title: newTitle };
+      }
+      return conversation;
+    });
+
+    if (!changed) {
+      return;
+    }
+
+    if (this.currentConversationId === id) {
+      this.activeConversationTitle = newTitle;
+    }
+  }
+
+  applyConversationDeletion(id: string) {
+    if (!id) {
+      return;
+    }
+
+    const 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 = [];
+    }
+  }
+
+  async confirmDeleteConversation() {
+    const target = this.deleteConversationTarget;
+    if (!target) {
+      return;
+    }
+
+    const success = await this.dispatchConversationAction(
+      'delete',
+      { id: target.id, title: target.title },
+      target.index,
+    );
+    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;
+    }
+
+    const newTitle = target.draft.trim();
+    if (!newTitle) {
+      return;
+    }
+
+    const success = await this.dispatchConversationAction(
+      'rename',
+      { id: target.id, title: newTitle },
+      target.index,
+      newTitle,
+    );
+    if (success) {
+      this.renameConversationTarget = 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;
+    }
+
+    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 = '';
+      }
+      return true;
+    }
+
+    if (action === 'conversationdeleted') {
+      const data = message.data as Record<string, unknown>;
+      const id = this.extractString(data, ['conversationId', 'id']);
+      if (id) {
+        this.applyConversationDeletion(id);
+        this.conversationHistoryError = '';
+      }
+      return true;
+    }
+
+    if (action === 'processing') {
+      return true;
+    }
+
+    return false;
+  }
+
+  private shouldIgnoreAssistantPayload(action?: string) {
+    if (!action) {
+      return false;
+    }
+    const normalized = action.toLowerCase();
+    return (
+      normalized === 'processing' ||
+      normalized === 'conversationrenamed' ||
+      normalized === 'conversationdeleted'
+    );
+  }
+
+  private extractString(
+    data: Record<string, unknown> | undefined,
+    keys: string[],
+  ): string | null {
+    if (!data || typeof data !== 'object') {
+      return null;
+    }
+    for (const key of keys) {
+      const value = data[key];
+      if (typeof value === 'string' && value.trim()) {
+        return value;
+      }
+    }
+    return null;
+  }
+
   handleHeaderActionClick(action: HeaderActionConfig, index: number) {
     const detail = {
       index,
@@ -420,37 +727,38 @@ export class RioAssistWidget extends LitElement {
       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;
-  }
-
-  exitFullscreen(restorePanel: boolean) {
-    if (!this.isFullscreen) {
-      return;
-    }
-
-    this.isFullscreen = false;
-    this.conversationMenuId = null;
-    this.showNewConversationShortcut = false;
-    if (restorePanel) {
-      this.open = true;
-    }
-  }
-
+
+    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;
@@ -470,132 +778,132 @@ export class RioAssistWidget extends LitElement {
       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;
-    }
-
+      }),
+    );
+  }
+
+  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;
@@ -612,7 +920,7 @@ export class RioAssistWidget extends LitElement {
   async onSuggestionClick(suggestion: string) {
     await this.processMessage(suggestion);
   }
-
+
   async handleSubmit(event: SubmitEvent) {
     event.preventDefault();
     await this.processMessage(this.message);
@@ -650,12 +958,12 @@ export class RioAssistWidget extends LitElement {
         detail: {
           message: content,
           apiBaseUrl: this.apiBaseUrl,
-          token: this.rioToken,
-        },
-        bubbles: true,
-        composed: true,
-      }),
-    );
+          token: this.rioToken,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
 
     const userMessage = this.createMessage('user', content);
     this.messages = [...this.messages, userMessage];
@@ -667,7 +975,7 @@ export class RioAssistWidget extends LitElement {
     this.errorMessage = '';
     this.isLoading = true;
     this.startLoadingGuard();
-
+
     try {
       const client = this.ensureRioClient();
       await client.sendMessage(content, this.currentConversationId);
@@ -676,25 +984,25 @@ export class RioAssistWidget extends LitElement {
       this.isLoading = false;
       this.errorMessage = error instanceof Error
         ? error.message
-        : 'Nao foi possivel enviar a mensagem para o agente.';
-    }
-  }
-
+        : '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);
-      });
-    }
+      );
+    }
+
+    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;
   }
@@ -706,6 +1014,14 @@ export class RioAssistWidget extends LitElement {
       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,
@@ -723,13 +1039,13 @@ export class RioAssistWidget extends LitElement {
       this.requestConversationHistory();
     }
   }
-
-  private teardownRioClient() {
-    if (this.rioUnsubscribe) {
-      this.rioUnsubscribe();
-      this.rioUnsubscribe = null;
-    }
-
+
+  private teardownRioClient() {
+    if (this.rioUnsubscribe) {
+      this.rioUnsubscribe();
+      this.rioUnsubscribe = null;
+    }
+
     if (this.rioClient) {
       this.rioClient.close();
       this.rioClient = null;
@@ -746,10 +1062,15 @@ export class RioAssistWidget extends LitElement {
         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;
     }
   }
@@ -813,6 +1134,7 @@ export class RioAssistWidget extends LitElement {
       console.info('[RioAssist][history] payload sem itens para montar lista de conversas');
       this.conversations = [];
       this.conversationHistoryLoading = false;
+      this.conversationHistoryError = '';
       return;
     }
 
@@ -853,6 +1175,7 @@ export class RioAssistWidget extends LitElement {
 
     this.conversations = conversations;
     this.conversationHistoryLoading = false;
+    this.conversationHistoryError = '';
     this.syncActiveConversationTitle();
     console.info('[RioAssist][history] conversas normalizadas', conversations);
   }
@@ -1203,10 +1526,20 @@ export class RioAssistWidget extends LitElement {
 
   private startLoadingGuard() {
     this.clearLoadingGuard();
-    this.loadingTimer = window.setTimeout(() => {
-      this.loadingTimer = null;
-      this.isLoading = false;
-    }, 15000);
+    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() {
@@ -1214,6 +1547,16 @@ export class RioAssistWidget extends LitElement {
       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() {
@@ -1294,11 +1637,11 @@ export class RioAssistWidget extends LitElement {
   }
 
 }
-declare global {
-  interface HTMLElementTagNameMap {
-    'rio-assist-widget': RioAssistWidget;
-  }
-}
+declare global {
+  interface HTMLElementTagNameMap {
+    'rio-assist-widget': RioAssistWidget;
+  }
+}
 
 if (!customElements.get('rio-assist-widget')) {
   customElements.define('rio-assist-widget', RioAssistWidget);