rio-assist-widget 0.1.28 → 0.1.32

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

@@ -31,35 +31,35 @@ type ConversationDeleteTarget = {
   index: number;
 };
 
-type ConversationRenameTarget = {
-  id: string;
-  title: string;
-  index: number;
-  draft: string;
-};
-
-type ConversationActionKind = 'rename' | 'delete';
-
-type ConversationActionAttempt = {
-  action: ConversationActionKind;
-  conversationId: string;
-  originalTitle: string;
-  index: number;
-  newTitle?: string;
-  snapshot?: ConversationItem;
-  messagesSnapshot?: ChatMessage[];
-  wasActive?: boolean;
-};
-
-type ConversationActionErrorState = ConversationActionAttempt & {
-  message: string;
-};
-
-export type HeaderActionConfig = {
-  id?: string;
-  iconUrl: string;
-  ariaLabel?: string;
-  onClick?: () => void;
+type ConversationRenameTarget = {
+  id: string;
+  title: string;
+  index: number;
+  draft: string;
+};
+
+type ConversationActionKind = 'rename' | 'delete';
+
+type ConversationActionAttempt = {
+  action: ConversationActionKind;
+  conversationId: string;
+  originalTitle: string;
+  index: number;
+  newTitle?: string;
+  snapshot?: ConversationItem;
+  messagesSnapshot?: ChatMessage[];
+  wasActive?: boolean;
+};
+
+type ConversationActionErrorState = ConversationActionAttempt & {
+  message: string;
+};
+
+export type HeaderActionConfig = {
+  id?: string;
+  iconUrl: string;
+  ariaLabel?: string;
+  onClick?: () => void;
 };
 
 export class RioAssistWidget extends LitElement {
@@ -92,6 +92,7 @@ export class RioAssistWidget extends LitElement {
     deleteConversationTarget: { attribute: false },
     renameConversationTarget: { attribute: false },
     shortAnswerEnabled: { type: Boolean, state: true },
+    newConversationConfirmOpen: { type: Boolean, state: true },
     conversationActionError: { attribute: false },
     headerActions: { attribute: false },
     homeUrl: { type: String, attribute: 'data-home-url' },
@@ -148,30 +149,32 @@ export class RioAssistWidget extends LitElement {
   conversationHistoryLoading = false;
 
   conversationHistoryError = '';
+
+  deleteConversationTarget: ConversationDeleteTarget | null = null;
+
+  renameConversationTarget: ConversationRenameTarget | null = null;
 
-  deleteConversationTarget: ConversationDeleteTarget | null = null;
-
-  renameConversationTarget: ConversationRenameTarget | null = null;
+  shortAnswerEnabled = true;
 
-  shortAnswerEnabled = false;
+  newConversationConfirmOpen = false;
 
   conversationActionError: ConversationActionErrorState | null = null;
-
-  private loadingLabelInternal = 'Rio Insight está respondendo...';
+
+  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 pendingConversationAction: ConversationActionAttempt | null = null;
-
-  private generateConversationId() {
+
+  headerActions: HeaderActionConfig[] = [];
+
+  homeUrl = '';
+
+  private pendingConversationAction: ConversationActionAttempt | null = null;
+
+  private generateConversationId() {
     if (!this.conversationUserId) {
       this.conversationUserId = this.inferUserIdFromToken();
     }
@@ -384,18 +387,18 @@ export class RioAssistWidget extends LitElement {
     this.requestConversationHistory();
   }
 
-  toggleNewConversationShortcut() {
-    this.showNewConversationShortcut = !this.showNewConversationShortcut;
-  }
-
-  toggleShortAnswers() {
-    this.shortAnswerEnabled = !this.shortAnswerEnabled;
-  }
-
-  handleConversationSelect(conversationId: string) {
-    if (!conversationId) {
-      return;
-    }
+  toggleNewConversationShortcut() {
+    this.showNewConversationShortcut = !this.showNewConversationShortcut;
+  }
+
+  toggleShortAnswers() {
+    this.shortAnswerEnabled = !this.shortAnswerEnabled;
+  }
+
+  handleConversationSelect(conversationId: string) {
+    if (!conversationId) {
+      return;
+    }
 
     this.showConversations = false;
     this.conversationMenuId = null;
@@ -514,11 +517,11 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  applyConversationDeletion(id: string) {
-    if (!id) {
-      return;
-    }
-
+  applyConversationDeletion(id: string) {
+    if (!id) {
+      return;
+    }
+
     const wasActive = this.currentConversationId === id;
     const next = this.conversations.filter((conversation) => conversation.id !== id);
 
@@ -529,64 +532,64 @@ export class RioAssistWidget extends LitElement {
     this.conversations = next;
 
     if (wasActive) {
-      this.currentConversationId = null;
-      this.activeConversationTitle = null;
-      this.messages = [];
-    }
-  }
-
-  private restoreConversationSnapshot(snapshot: ConversationItem | undefined, index: number) {
-    if (!snapshot) {
-      return;
-    }
-
-    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;
-  }
+      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 },
-      target.index,
-    );
-    if (success) {
-      this.deleteConversationTarget = null;
-      return;
-    }
-
-    this.pendingConversationAction = null;
-  }
+  private restoreConversationSnapshot(snapshot: ConversationItem | undefined, index: number) {
+    if (!snapshot) {
+      return;
+    }
+
+    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;
+  }
+
+  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 },
+      target.index,
+    );
+    if (success) {
+      this.deleteConversationTarget = null;
+      return;
+    }
+
+    this.pendingConversationAction = null;
+  }
 
   cancelDeleteConversation() {
     this.deleteConversationTarget = null;
@@ -609,93 +612,93 @@ export class RioAssistWidget extends LitElement {
       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 },
-      target.index,
-      newTitle,
-    );
-    if (success) {
-      this.renameConversationTarget = null;
-      return;
-    }
-
-    this.pendingConversationAction = null;
-  }
+    const newTitle = target.draft.trim();
+    if (!newTitle) {
+      return;
+    }
 
-  cancelRenameConversation() {
-    this.renameConversationTarget = null;
-  }
-
-  cancelConversationActionError() {
-    this.conversationActionError = null;
-    this.pendingConversationAction = null;
-  }
-
-  async retryConversationAction() {
-    const errorState = this.conversationActionError;
-    if (!errorState) {
-      return;
-    }
-
-    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(),
-      };
-
-    this.pendingConversationAction = {
-      action: errorState.action,
-      conversationId: errorState.conversationId,
-      originalTitle: errorState.originalTitle,
-      index: safeIndex,
-      newTitle: errorState.newTitle,
-      snapshot,
-      messagesSnapshot: errorState.messagesSnapshot,
-      wasActive: errorState.wasActive,
-    };
-
-    this.conversationActionError = null;
-
-    await this.dispatchConversationAction(
-      errorState.action,
-      { id: errorState.conversationId, title: errorState.newTitle ?? errorState.originalTitle },
-      safeIndex,
-      errorState.newTitle,
-    );
-  }
-
-  private async dispatchConversationAction(
-    action: 'rename' | 'delete',
-    conversation: Pick<ConversationItem, 'id' | 'title'>,
-    index: number,
-    newTitle?: string,
+    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 },
+      target.index,
+      newTitle,
+    );
+    if (success) {
+      this.renameConversationTarget = null;
+      return;
+    }
+
+    this.pendingConversationAction = null;
+  }
+
+  cancelRenameConversation() {
+    this.renameConversationTarget = null;
+  }
+
+  cancelConversationActionError() {
+    this.conversationActionError = null;
+    this.pendingConversationAction = null;
+  }
+
+  async retryConversationAction() {
+    const errorState = this.conversationActionError;
+    if (!errorState) {
+      return;
+    }
+
+    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(),
+      };
+
+    this.pendingConversationAction = {
+      action: errorState.action,
+      conversationId: errorState.conversationId,
+      originalTitle: errorState.originalTitle,
+      index: safeIndex,
+      newTitle: errorState.newTitle,
+      snapshot,
+      messagesSnapshot: errorState.messagesSnapshot,
+      wasActive: errorState.wasActive,
+    };
+
+    this.conversationActionError = null;
+
+    await this.dispatchConversationAction(
+      errorState.action,
+      { id: errorState.conversationId, title: errorState.newTitle ?? errorState.originalTitle },
+      safeIndex,
+      errorState.newTitle,
+    );
+  }
+
+  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';
@@ -770,97 +773,97 @@ export class RioAssistWidget extends LitElement {
     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 id = this.extractString(data, ['conversationId', 'id']);
+      const newTitle = this.extractString(data, ['newTitle', 'title']);
+      if (id && newTitle) {
+        this.applyConversationRename(id, newTitle);
+        this.conversationHistoryError = '';
+        if (
+          this.pendingConversationAction &&
+          this.pendingConversationAction.conversationId === id &&
+          this.pendingConversationAction.action === 'rename'
+        ) {
+          this.pendingConversationAction = null;
+          this.conversationActionError = null;
+        }
+      }
+      return true;
+    }
+
+    if (action === 'conversationdeleted') {
       const data = message.data as Record<string, unknown>;
-      const id = this.extractString(data, ['conversationId', 'id']);
-      if (id) {
-        this.applyConversationDeletion(id);
-        this.conversationHistoryError = '';
-        if (
-          this.pendingConversationAction &&
-          this.pendingConversationAction.conversationId === id &&
-          this.pendingConversationAction.action === 'delete'
-        ) {
-          this.pendingConversationAction = null;
-          this.conversationActionError = null;
-        }
-      }
-      return true;
-    }
+      const id = this.extractString(data, ['conversationId', 'id']);
+      if (id) {
+        this.applyConversationDeletion(id);
+        this.conversationHistoryError = '';
+        if (
+          this.pendingConversationAction &&
+          this.pendingConversationAction.conversationId === id &&
+          this.pendingConversationAction.action === 'delete'
+        ) {
+          this.pendingConversationAction = null;
+          this.conversationActionError = null;
+        }
+      }
+      return true;
+    }
 
-    if (action === 'processing') {
-      return true;
-    }
-
-    return false;
-  }
-
-  private handleConversationActionError(message: RioIncomingMessage) {
-    const action = (message.action ?? '').toLowerCase();
-    if (action !== 'error') {
-      return false;
-    }
-
-    const data = message.data as Record<string, unknown>;
-    const errorText =
-      this.extractString(data, ['error', 'message', 'detail', 'description']) ||
-      (typeof message.text === 'string' && message.text.trim()
-        ? message.text
-        : 'O agente retornou um erro ao processar a conversa.');
-
-    const pending = this.pendingConversationAction;
-    if (pending) {
-      if (pending.action === 'rename') {
-        this.applyConversationRename(pending.conversationId, pending.originalTitle);
-      }
-
-      if (pending.action === 'delete') {
-        this.restoreConversationSnapshot(pending.snapshot, pending.index);
-        if (pending.wasActive) {
-          this.currentConversationId = pending.conversationId;
-          this.activeConversationTitle = pending.originalTitle;
-          this.messages = pending.messagesSnapshot ?? this.messages;
-        }
-      }
-
-      this.conversationActionError = {
-        ...pending,
-        message: errorText,
-      };
-      this.pendingConversationAction = null;
-      this.clearLoadingGuard();
-      this.isLoading = false;
-      return true;
-    }
-
-    this.errorMessage = errorText;
-    this.clearLoadingGuard();
-    this.isLoading = false;
-    return true;
-  }
-
-  private shouldIgnoreAssistantPayload(action?: string) {
-    if (!action) {
-      return false;
-    }
-    const normalized = action.toLowerCase();
+    if (action === 'processing') {
+      return true;
+    }
+
+    return false;
+  }
+
+  private handleConversationActionError(message: RioIncomingMessage) {
+    const action = (message.action ?? '').toLowerCase();
+    if (action !== 'error') {
+      return false;
+    }
+
+    const data = message.data as Record<string, unknown>;
+    const errorText =
+      this.extractString(data, ['error', 'message', 'detail', 'description']) ||
+      (typeof message.text === 'string' && message.text.trim()
+        ? message.text
+        : 'O agente retornou um erro ao processar a conversa.');
+
+    const pending = this.pendingConversationAction;
+    if (pending) {
+      if (pending.action === 'rename') {
+        this.applyConversationRename(pending.conversationId, pending.originalTitle);
+      }
+
+      if (pending.action === 'delete') {
+        this.restoreConversationSnapshot(pending.snapshot, pending.index);
+        if (pending.wasActive) {
+          this.currentConversationId = pending.conversationId;
+          this.activeConversationTitle = pending.originalTitle;
+          this.messages = pending.messagesSnapshot ?? this.messages;
+        }
+      }
+
+      this.conversationActionError = {
+        ...pending,
+        message: errorText,
+      };
+      this.pendingConversationAction = null;
+      this.clearLoadingGuard();
+      this.isLoading = false;
+      return true;
+    }
+
+    this.errorMessage = errorText;
+    this.clearLoadingGuard();
+    this.isLoading = false;
+    return true;
+  }
+
+  private shouldIgnoreAssistantPayload(action?: string) {
+    if (!action) {
+      return false;
+    }
+    const normalized = action.toLowerCase();
     return (
       normalized === 'processing' ||
       normalized === 'conversationrenamed' ||
@@ -947,16 +950,39 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  handleCreateConversation() {
-    if (!this.hasActiveConversation) {
-      return;
-    }
-
-    this.clearLoadingGuard();
-    this.isLoading = false;
-    this.messages = [];
-    this.message = '';
-    this.errorMessage = '';
+  handleCreateConversation() {
+    if (!this.hasActiveConversation) {
+      return;
+    }
+
+    this.newConversationConfirmOpen = true;
+  }
+
+  confirmCreateConversation() {
+    if (!this.hasActiveConversation) {
+      this.newConversationConfirmOpen = false;
+      return;
+    }
+
+    this.newConversationConfirmOpen = false;
+
+    this.startNewConversation();
+  }
+
+  cancelCreateConversation() {
+    this.newConversationConfirmOpen = false;
+  }
+
+  private startNewConversation() {
+    if (!this.hasActiveConversation) {
+      return;
+    }
+
+    this.clearLoadingGuard();
+    this.isLoading = false;
+    this.messages = [];
+    this.message = '';
+    this.errorMessage = '';
     this.showConversations = false;
     this.teardownRioClient();
     this.currentConversationId = this.generateConversationId();
@@ -1138,45 +1164,45 @@ export class RioAssistWidget extends LitElement {
       ? `Quero uma resposta curta sobre: ${content}`
       : content;
     const contentToDisplay = content;
-
-    if (!this.currentConversationId) {
-      this.currentConversationId = this.generateConversationId();
-      this.activeConversationTitle = null;
-    }
+
+    if (!this.currentConversationId) {
+      this.currentConversationId = this.generateConversationId();
+      this.activeConversationTitle = null;
+    }
 
     const wasEmptyConversation = this.messages.length === 0;
 
-    this.dispatchEvent(
-      new CustomEvent('rioassist:send', {
-        detail: {
-          message: content,
-          apiBaseUrl: this.apiBaseUrl,
+    this.dispatchEvent(
+      new CustomEvent('rioassist:send', {
+        detail: {
+          message: content,
+          apiBaseUrl: this.apiBaseUrl,
           token: this.rioToken,
-        },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
     const userMessage = this.createMessage('user', contentToDisplay);
-    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(contentToSend, this.currentConversationId);
-    } catch (error) {
-      this.clearLoadingGuard();
-      this.isLoading = false;
-      this.errorMessage = error instanceof Error
-        ? error.message
+    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(contentToSend, 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.';
     }
   }
@@ -1207,17 +1233,17 @@ export class RioAssistWidget extends LitElement {
       return;
     }
 
-    if (this.handleConversationSystemAction(message)) {
-      return;
-    }
-
-    if (this.handleConversationActionError(message)) {
-      return;
-    }
-
-    if (this.shouldIgnoreAssistantPayload(message.action)) {
-      return;
-    }
+    if (this.handleConversationSystemAction(message)) {
+      return;
+    }
+
+    if (this.handleConversationActionError(message)) {
+      return;
+    }
+
+    if (this.shouldIgnoreAssistantPayload(message.action)) {
+      return;
+    }
 
     console.info('[RioAssist][ws] resposta de mensagem recebida', {
       action: message.action ?? 'message',