rio-assist-widget 0.1.6 → 0.1.7

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

@@ -39,12 +39,12 @@ export class RioAssistWidget extends LitElement {
     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 },
-  };
+    conversationMenuId: { state: true },
+    conversationMenuPlacement: { state: true },
+    isFullscreen: { type: Boolean, state: true },
+    conversationScrollbar: { state: true },
+    showNewConversationShortcut: { type: Boolean, state: true },
+  };
 
   open = false;
 
@@ -74,37 +74,37 @@ export class RioAssistWidget extends LitElement {
 
   conversationSearch = '';
 
-  conversationMenuId: string | null = null;
-
-  conversationMenuPlacement: 'above' | 'below' = 'below';
-
-  isFullscreen = false;
-
-  showNewConversationShortcut = false;
-
-  conversationScrollbar = {
-    height: 0,
-    top: 0,
-    visible: false,
-  };
-
-  private conversationScrollbarRaf: number | null = null;
-
-  private rioClient: RioWebsocketClient | null = null;
-
-  private rioUnsubscribe: (() => void) | null = null;
-
-  private loadingTimer: number | null = null;
-
-  private conversationScrollbarDraggingId: number | null = null;
-
-  private conversationScrollbarDragState: {
-    startY: number;
-    startThumbTop: number;
-    trackHeight: number;
-    thumbHeight: number;
-    list: HTMLElement;
-  } | null = null;
+  conversationMenuId: string | null = null;
+
+  conversationMenuPlacement: 'above' | 'below' = 'below';
+
+  isFullscreen = false;
+
+  showNewConversationShortcut = false;
+
+  conversationScrollbar = {
+    height: 0,
+    top: 0,
+    visible: false,
+  };
+
+  private conversationScrollbarRaf: number | null = null;
+
+  private rioClient: RioWebsocketClient | null = null;
+
+  private rioUnsubscribe: (() => void) | null = null;
+
+  private loadingTimer: number | null = null;
+
+  private conversationScrollbarDraggingId: number | null = null;
+
+  private conversationScrollbarDragState: {
+    startY: number;
+    startThumbTop: number;
+    trackHeight: number;
+    thumbHeight: number;
+    list: HTMLElement;
+  } | null = null;
 
   conversations: ConversationItem[] = Array.from({ length: 20 }).map(
     (_, index) => ({
@@ -141,14 +141,23 @@ export class RioAssistWidget extends LitElement {
     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('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();
@@ -165,21 +174,21 @@ export class RioAssistWidget extends LitElement {
     this.clearLoadingGuard();
   }
 
-  get filteredConversations() {
-    const query = this.conversationSearch.trim().toLowerCase();
-    if (!query) {
-      return this.conversations;
-    }
+  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;
+  }
 
-    return this.conversations.filter((conversation) =>
-      conversation.title.toLowerCase().includes(query),
-    );
-  }
-
-  get hasActiveConversation() {
-    return this.messages.length > 0;
-  }
-
   togglePanel() {
     if (this.isFullscreen) {
       this.exitFullscreen(false);
@@ -211,20 +220,20 @@ export class RioAssistWidget extends LitElement {
     this.conversationMenuId = null;
   }
 
-  toggleConversationsPanel() {
-    this.showConversations = !this.showConversations;
-    if (!this.showConversations) {
-      this.conversationMenuId = null;
-    }
-  }
-
-  toggleNewConversationShortcut() {
-    this.showNewConversationShortcut = !this.showNewConversationShortcut;
-  }
-
-  handleConversationSearch(event: InputEvent) {
-    this.conversationSearch = (event.target as HTMLInputElement).value;
-  }
+  toggleConversationsPanel() {
+    this.showConversations = !this.showConversations;
+    if (!this.showConversations) {
+      this.conversationMenuId = null;
+    }
+  }
+
+  toggleNewConversationShortcut() {
+    this.showNewConversationShortcut = !this.showNewConversationShortcut;
+  }
+
+  handleConversationSearch(event: InputEvent) {
+    this.conversationSearch = (event.target as HTMLInputElement).value;
+  }
 
   handleConversationMenuToggle(event: Event, id: string) {
     event.stopPropagation();
@@ -297,134 +306,134 @@ export class RioAssistWidget extends LitElement {
     this.showConversations = false;
   }
 
-  exitFullscreen(restorePanel: boolean) {
-    if (!this.isFullscreen) {
-      return;
-    }
-
-    this.isFullscreen = false;
-    this.conversationMenuId = null;
-    this.showNewConversationShortcut = false;
-    if (restorePanel) {
-      this.open = true;
-    }
-  }
+  exitFullscreen(restorePanel: boolean) {
+    if (!this.isFullscreen) {
+      return;
+    }
 
-  handleCreateConversation() {
-    if (!this.hasActiveConversation) {
-      return;
-    }
-
-    this.clearLoadingGuard();
-    this.isLoading = false;
-    this.messages = [];
-    this.message = '';
-    this.errorMessage = '';
-    this.showConversations = false;
-    this.teardownRioClient();
-    this.showNewConversationShortcut = false;
-    this.dispatchEvent(
-      new CustomEvent('rioassist:new-conversation', {
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
+    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.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;
+    }
 
-  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();
@@ -453,22 +462,22 @@ export class RioAssistWidget extends LitElement {
       return;
     }
 
-    const ratio = clientHeight / scrollHeight;
-    const height = Math.max(ratio * 100, 8);
-    const maxTop = 100 - height;
-    const top =
-      scrollTop / (scrollHeight - clientHeight) * (maxTop > 0 ? maxTop : 0);
-
-    this.conversationScrollbar = {
-      height,
-      top,
-      visible: true,
-    };
-  }
-
-  async onSuggestionClick(suggestion: string) {
-    await this.processMessage(suggestion);
-  }
+    const ratio = clientHeight / scrollHeight;
+    const height = Math.max(ratio * 100, 8);
+    const maxTop = 100 - height;
+    const top =
+      scrollTop / (scrollHeight - clientHeight) * (maxTop > 0 ? maxTop : 0);
+
+    this.conversationScrollbar = {
+      height,
+      top,
+      visible: true,
+    };
+  }
+
+  async onSuggestionClick(suggestion: string) {
+    await this.processMessage(suggestion);
+  }
 
   async handleSubmit(event: SubmitEvent) {
     event.preventDefault();
@@ -488,30 +497,35 @@ export class RioAssistWidget extends LitElement {
     };
   }
 
-  private async processMessage(rawValue: string) {
-    const content = rawValue.trim();
-    if (!content || this.isLoading) {
-      return;
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('rioassist:send', {
-        detail: {
-          message: content,
-          apiBaseUrl: this.apiBaseUrl,
+  private async processMessage(rawValue: string) {
+    const content = rawValue.trim();
+    if (!content || this.isLoading) {
+      return;
+    }
+
+    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];
-    this.message = '';
-    this.errorMessage = '';
-    this.isLoading = true;
-    this.startLoadingGuard();
+
+    const userMessage = this.createMessage('user', content);
+    this.messages = [...this.messages, userMessage];
+    if (wasEmptyConversation) {
+      this.showNewConversationShortcut = true;
+    }
+    this.message = '';
+    this.errorMessage = '';
+    this.isLoading = true;
+    this.startLoadingGuard();
 
     try {
       const client = this.ensureRioClient();
@@ -525,11 +539,11 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  private ensureRioClient() {
-    const token = this.rioToken.trim();
-    if (!token) {
-      throw new Error(
-        'Informe o token RIO em data-rio-token para conectar no websocket do assistente.',
+  private ensureRioClient() {
+    const token = this.rioToken.trim();
+    if (!token) {
+      throw new Error(
+        'Informe o token RIO em data-rio-token para conectar no websocket do assistente.',
       );
     }
 
@@ -566,23 +580,35 @@ export class RioAssistWidget extends LitElement {
   private startLoadingGuard() {
     this.clearLoadingGuard();
     this.loadingTimer = window.setTimeout(() => {
-      this.loadingTimer = null;
-      this.isLoading = false;
-    }, 15000);
-  }
-
-  private clearLoadingGuard() {
-    if (this.loadingTimer !== null) {
-      window.clearTimeout(this.loadingTimer);
-      this.loadingTimer = null;
-    }
-  }
-
-  render() {
-    return renderRioAssist(this);
-  }
-
-}
+      this.loadingTimer = null;
+      this.isLoading = false;
+    }, 15000);
+  }
+
+  private clearLoadingGuard() {
+    if (this.loadingTimer !== null) {
+      window.clearTimeout(this.loadingTimer);
+      this.loadingTimer = null;
+    }
+  }
+
+  private scrollConversationToBottom() {
+    const containers = Array.from(
+      this.renderRoot.querySelectorAll('.panel-content'),
+    ) as HTMLElement[];
+
+    containers.forEach((container) => {
+      requestAnimationFrame(() => {
+        container.scrollTop = container.scrollHeight;
+      });
+    });
+  }
+
+  render() {
+    return renderRioAssist(this);
+  }
+
+}
 declare global {
   interface HTMLElementTagNameMap {
     'rio-assist-widget': RioAssistWidget;