rio-assist-widget 0.1.10 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rio-assist-widget",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Web Component do painel lateral Rio Insight, pronto para ser embutido em qualquer projeto.",
   "type": "module",
   "scripts": {

package/src/components/conversations-panel/conversations-panel.styles.ts

@@ -173,12 +173,14 @@ export const conversationsPanelStyles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 20px 0 6px;
+    padding: 0 40px 0 6px;
     border-radius: 8px;
     color: #1f2f36;
     font-size: 15px;
     position: relative;
     height: 40px;
+    cursor: pointer;
+    transition: color 0.2s ease, background-color 0.2s ease;
   }
 
   .conversations-panel--sidebar .conversation-item {
@@ -199,6 +201,17 @@ export const conversationsPanelStyles = css`
   .conversation-item__text {
     flex: 1;
     padding-right: 16px;
+    transition: color 0.2s ease;
+  }
+
+  .conversation-item:hover .conversation-item__text,
+  .conversation-item:focus-visible .conversation-item__text {
+    color: var(--accent-color, #008b9a);
+  }
+
+  .conversation-item:hover,
+  .conversation-item:focus-visible {
+    background: rgba(0, 139, 154, 0.08);
   }
 
   .conversation-menu-button {
@@ -210,6 +223,8 @@ export const conversationsPanelStyles = css`
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-left: 4px;
+    flex-shrink: 0;
   }
 
   .conversation-menu {
@@ -250,6 +265,12 @@ export const conversationsPanelStyles = css`
     height: 16px;
   }
 
+  .conversation-loading {
+    font-size: 13px;
+    color: #4b5b68;
+    padding: 6px 12px 2px;
+  }
+
   .new-conversation-cta {
     overflow: hidden;
     max-height: 0;

package/src/components/conversations-panel/conversations-panel.template.ts

@@ -47,11 +47,11 @@ const renderConversationSurface = (
   component: RioAssistWidget,
   variant: ConversationsPanelVariant,
 ) => {
-  const isSidebar = variant === 'sidebar';
-
-  const newConversationCta = isSidebar
-    ? html`
-        <div
+  const isSidebar = variant === 'sidebar';
+
+  const newConversationCta = isSidebar
+    ? html`
+        <div
           class=${classMap({
             'new-conversation-cta': true,
             open: component.showNewConversationShortcut,
@@ -81,15 +81,27 @@ const renderConversationSurface = (
     >
       ${component.filteredConversations.map(
         (conversation) => {
-          const menuOpen = component.conversationMenuId === conversation.id;
-
-          return html`
-            <div class="conversation-item">
-              <div class="conversation-item__text">
-                ${conversation.title}
-              </div>
-              <button
-                class="conversation-menu-button"
+          const menuOpen = component.conversationMenuId === conversation.id;
+
+          return html`
+            <div
+              class="conversation-item"
+              role="button"
+              tabindex="0"
+              title=${`Recuperar ${conversation.title}`}
+              @click=${() => component.handleConversationSelect(conversation.id)}
+              @keydown=${(event: KeyboardEvent) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault();
+                  component.handleConversationSelect(conversation.id);
+                }
+              }}
+            >
+              <div class="conversation-item__text">
+                ${conversation.title}
+              </div>
+              <button
+                class="conversation-menu-button"
                 type="button"
                 @click=${(event: Event) =>
                   component.handleConversationMenuToggle(event, conversation.id)}
@@ -145,13 +157,16 @@ const renderConversationSurface = (
       />
     </div>
 
-    <div
-      class=${classMap({
-        'conversation-list-wrapper': true,
-        'conversation-list-wrapper--sidebar': isSidebar,
-      })}
-    >
-      ${list}
+    <div
+      class=${classMap({
+        'conversation-list-wrapper': true,
+        'conversation-list-wrapper--sidebar': isSidebar,
+      })}
+    >
+      ${component.conversationHistoryLoading
+        ? html`<div class="conversation-loading">Carregando conversas...</div>`
+        : null}
+      ${list}
       ${isSidebar
         ? html`
             <div

package/src/components/fullscreen/fullscreen.template.ts

@@ -67,7 +67,9 @@ export const renderFullscreen = (component: RioAssistWidget) => {
           </div>
 
           <div class="fullscreen-header__tabs">
-            <span class="fullscreen-header__tab">CONVERSA</span>
+            ${component.activeConversationTitle
+              ? html`<span class="fullscreen-header__tab">${component.activeConversationTitle}</span>`
+              : null}
           </div>
 
           <div class="fullscreen-header__actions">