rio-assist-widget 0.1.11 → 0.1.18

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

@@ -19,13 +19,26 @@ export type ChatMessage = {
   timestamp: number;
 };
 
-type ConversationItem = {
-  id: string;
-  title: string;
-  updatedAt: string;
-};
-
-export class RioAssistWidget extends LitElement {
+type ConversationItem = {
+  id: string;
+  title: string;
+  updatedAt: string;
+};
+
+type ConversationDeleteTarget = {
+  id: string;
+  title: string;
+  index: number;
+};
+
+export type HeaderActionConfig = {
+  id?: string;
+  iconUrl: string;
+  ariaLabel?: string;
+  onClick?: () => void;
+};
+
+export class RioAssistWidget extends LitElement {
   static styles = widgetStyles;
 
   static properties = {
@@ -51,6 +64,10 @@ export class RioAssistWidget extends LitElement {
     conversations: { state: true },
     conversationHistoryLoading: { type: Boolean, state: true },
     activeConversationTitle: { state: true },
+    conversationHistoryError: { type: String, state: true },
+    deleteConversationTarget: { attribute: false },
+    headerActions: { attribute: false },
+    homeUrl: { type: String, attribute: 'data-home-url' },
   };
 
   open = false;
@@ -97,10 +114,18 @@ export class RioAssistWidget extends LitElement {
 
   conversationHistoryLoading = false;
 
+  conversationHistoryError = '';
+
+  deleteConversationTarget: ConversationDeleteTarget | null = null;
+
   private refreshConversationsAfterResponse = false;
 
   activeConversationTitle: string | null = null;
 
+  headerActions: HeaderActionConfig[] = [];
+
+  homeUrl = '';
+
   private generateConversationId() {
     if (!this.conversationUserId) {
       this.conversationUserId = this.inferUserIdFromToken();
@@ -342,25 +367,168 @@ export class RioAssistWidget extends LitElement {
       this.conversationMenuId = null;
     }
   }
-
-  handleConversationAction(action: 'rename' | 'delete', id: string) {
-    this.conversationMenuId = null;
-    const conversation = this.conversations.find((item) => item.id === id);
-    if (!conversation) {
-      return;
-    }
-
-    const message = `${
-      action === 'rename' ? 'Renomear' : 'Excluir'
-    } "${conversation.title}"`;
-    console.info(`[Mock] ${message}`);
-  }
-
-  handleCloseAction() {
-    if (this.isFullscreen) {
-      this.exitFullscreen(true);
-      return;
-    }
+
+  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.dispatchConversationAction('rename', conversation, conversationIndex);
+  }
+
+  handleHomeNavigation() {
+    const detail = { url: this.homeUrl || null };
+    const allowed = this.dispatchEvent(
+      new CustomEvent('rioassist:home', {
+        detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
+
+    if (!allowed) {
+      return;
+    }
+
+    if (this.homeUrl) {
+      window.location.assign(this.homeUrl);
+    }
+  }
+
+  applyConversationRename(id: string, newTitle: string) {
+    if (!id || !newTitle) {
+      return;
+    }
+
+    let changed = false;
+    this.conversations = this.conversations.map((conversation) => {
+      if (conversation.id === id) {
+        changed = true;
+        return { ...conversation, title: newTitle };
+      }
+      return conversation;
+    });
+
+    if (!changed) {
+      return;
+    }
+
+    if (this.currentConversationId === id) {
+      this.activeConversationTitle = newTitle;
+    }
+  }
+
+  applyConversationDeletion(id: string) {
+    if (!id) {
+      return;
+    }
+
+    const 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 = [];
+    }
+  }
+
+  confirmDeleteConversation() {
+    const target = this.deleteConversationTarget;
+    if (!target) {
+      return;
+    }
+
+    this.dispatchConversationAction('delete', { id: target.id, title: target.title }, target.index);
+    this.deleteConversationTarget = null;
+  }
+
+  cancelDeleteConversation() {
+    this.deleteConversationTarget = null;
+  }
+
+  private dispatchConversationAction(
+    action: 'rename' | 'delete',
+    conversation: Pick<ConversationItem, 'id' | 'title'>,
+    index: number,
+  ) {
+    const eventName =
+      action === 'rename' ? 'rioassist:conversation-rename' : 'rioassist:conversation-delete';
+    const detail = {
+      id: conversation.id,
+      title: conversation.title,
+      index,
+      action,
+    };
+
+    const allowed = this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
+
+    if (!allowed) {
+      return;
+    }
+
+    if (action === 'delete') {
+      this.applyConversationDeletion(conversation.id);
+    }
+  }
+
+  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();
@@ -369,15 +537,16 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  enterFullscreen() {
-    if (this.isFullscreen) {
-      return;
-    }
-
-    this.isFullscreen = true;
-    this.open = false;
-    this.showConversations = false;
-  }
+  enterFullscreen() {
+    if (this.isFullscreen) {
+      return;
+    }
+
+    this.isFullscreen = true;
+    this.open = false;
+    this.showConversations = false;
+    this.requestConversationHistory();
+  }
 
   exitFullscreen(restorePanel: boolean) {
     if (!this.isFullscreen) {
@@ -687,10 +856,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;
     }
   }
@@ -754,6 +928,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;
     }
 
@@ -794,6 +969,7 @@ export class RioAssistWidget extends LitElement {
 
     this.conversations = conversations;
     this.conversationHistoryLoading = false;
+    this.conversationHistoryError = '';
     this.syncActiveConversationTitle();
     console.info('[RioAssist][history] conversas normalizadas', conversations);
   }