rio-assist-widget 0.1.10 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rio-assist-widget",
-  "version": "0.1.10",
+  "version": "0.1.14",
   "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

@@ -61,6 +61,27 @@ export const conversationsPanelStyles = css`
     overflow: hidden;
   }
 
+  .recent-conversations-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 6px 12px 6px 16px;
+    border: none;
+    background: transparent;
+    color: #1f2f36;
+    font-family: 'Source Sans Pro', 'Inter', sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    text-align: left;
+    width: calc(100% - 24px);
+    cursor: pointer;
+  }
+
+  .recent-conversations-button img {
+    width: 24px;
+    height: 24px;
+  }
+
   .conversation-search {
     display: flex;
     align-items: center;
@@ -173,12 +194,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 +222,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 +244,8 @@ export const conversationsPanelStyles = css`
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-left: 4px;
+    flex-shrink: 0;
   }
 
   .conversation-menu {
@@ -250,6 +286,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

@@ -9,6 +9,7 @@ const trashIconUrl = new URL('../../assets/icons/trash.png', import.meta.url).hr
 const searchIconUrl = new URL('../../assets/icons/searchIcon.png', import.meta.url).href;
 const plusFileSelectionUrl = new URL('../../assets/icons/plusFileSelection.png', import.meta.url)
   .href;
+const hamburgerBlack = new URL('../../assets/icons/hamburgerBlack.png', import.meta.url).href;
 
 type ConversationsPanelVariant = 'drawer' | 'sidebar';
 
@@ -84,7 +85,19 @@ const renderConversationSurface = (
           const menuOpen = component.conversationMenuId === conversation.id;
 
           return html`
-            <div class="conversation-item">
+            <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>
@@ -135,6 +148,15 @@ const renderConversationSurface = (
   return html`
     ${newConversationCta}
 
+    ${isSidebar
+      ? html`
+          <button class="recent-conversations-button" type="button" aria-label="Conversas recentes">
+            <img src=${hamburgerBlack} alt="" aria-hidden="true" />
+            <span>Conversas recentes</span>
+          </button>
+        `
+      : null}
+
     <div class="conversation-search">
       <img class="search-icon" src=${searchIconUrl} alt="" aria-hidden="true" />
       <input
@@ -151,6 +173,9 @@ const renderConversationSurface = (
         'conversation-list-wrapper--sidebar': isSidebar,
       })}
     >
+      ${component.conversationHistoryLoading
+        ? html`<div class="conversation-loading">Carregando conversas...</div>`
+        : null}
       ${list}
       ${isSidebar
         ? html`

package/src/components/fullscreen/fullscreen.styles.ts

@@ -22,12 +22,13 @@ export const fullscreenStyles = css`
     padding: 6px 0 12px;
   }
 
-  .fullscreen-shell__content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
+  .fullscreen-shell__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
 
   .rail-button {
     width: 38px;
@@ -153,16 +154,36 @@ export const fullscreenStyles = css`
     padding: 0;
   }
 
-  .fullscreen-header__icon img {
-    width: 24px;
-    height: 24px;
-  }
-
-  .fullscreen-grid {
-    flex: 1;
-    display: grid;
-    grid-template-columns: 300px minmax(0, 1fr);
-    min-height: 0;
+  .fullscreen-header__icon img {
+    width: 24px;
+    height: 24px;
+  }
+
+  .fullscreen-exit-inline {
+    position: absolute;
+    top: 56px;
+    right: 14px;
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    padding: 0;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  .fullscreen-exit-inline img {
+    width: 28px;
+    height: 28px;
+  }
+
+  .fullscreen-grid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 300px minmax(0, 1fr);
+    min-height: 0;
     background: linear-gradient(180deg, #eef3f6 0%, #fff 100%);
   }
 

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

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import type { RioAssistWidget } from '../rio-assist/rio-assist';
+import type { HeaderActionConfig, RioAssistWidget } from '../rio-assist/rio-assist';
 import { renderConversationsPanel } from '../conversations-panel/conversations-panel.template';
 import { renderChatSurface } from '../mini-panel/mini-panel.template';
 
@@ -8,14 +8,29 @@ const homeIconUrl = new URL('../../assets/icons/homeIcon.png', import.meta.url).
 const checkFrameIconUrl = new URL('../../assets/icons/checkFrame.png', import.meta.url).href;
 const infoFrameIconUrl = new URL('../../assets/icons/infoFrame.png', import.meta.url).href;
 const profileFrameIconUrl = new URL('../../assets/icons/profileFrame.png', import.meta.url).href;
+const resizeScreenIconUrl = new URL('../../assets/icons/resizeScreen.png', import.meta.url).href;
+
+const defaultHeaderActions: HeaderActionConfig[] = [
+  { id: 'status', iconUrl: checkFrameIconUrl, ariaLabel: 'Status' },
+  { id: 'info', iconUrl: infoFrameIconUrl, ariaLabel: 'Informacoes' },
+  { id: 'profile', iconUrl: profileFrameIconUrl, ariaLabel: 'Perfil de usuario' },
+];
 
 export const renderFullscreen = (component: RioAssistWidget) => {
   const chatSurface = renderChatSurface(component);
+  const headerActions = (component.headerActions?.length
+    ? component.headerActions
+    : defaultHeaderActions) as HeaderActionConfig[];
 
   return html`
     <section class="fullscreen-shell" role="dialog" aria-modal="true">
       <div class="fullscreen-shell__rail">
-        <button type="button" class="rail-button" aria-label="Ir para home">
+        <button
+          type="button"
+          class="rail-button"
+          aria-label="Ir para home"
+          @click=${() => component.handleHomeNavigation()}
+        >
           <img src=${homeIconUrl} alt="" aria-hidden="true" />
         </button>
         <button
@@ -67,22 +82,36 @@ 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">
-            <button type="button" class="fullscreen-header__icon" aria-label="Status">
-              <img src=${checkFrameIconUrl} alt="" aria-hidden="true" />
-            </button>
-            <button type="button" class="fullscreen-header__icon" aria-label="Informacoes">
-              <img src=${infoFrameIconUrl} alt="" aria-hidden="true" />
-            </button>
-            <button type="button" class="fullscreen-header__icon" aria-label="Perfil de usuario">
-              <img src=${profileFrameIconUrl} alt="" aria-hidden="true" />
-            </button>
+            ${headerActions.map(
+              (action, index) => html`
+                <button
+                  type="button"
+                  class="fullscreen-header__icon"
+                  aria-label=${action.ariaLabel ?? 'Acao do cabecalho'}
+                  @click=${() => component.handleHeaderActionClick(action, index)}
+                >
+                  <img src=${action.iconUrl} alt="" aria-hidden="true" />
+                </button>
+              `,
+            )}
           </div>
         </header>
 
+        <button
+          type="button"
+          class="fullscreen-exit-inline"
+          aria-label="Retornar para painel compacto"
+          @click=${() => component.exitFullscreen(true)}
+        >
+          <img src=${resizeScreenIconUrl} alt="" aria-hidden="true" />
+        </button>
+
         <div class="fullscreen-grid">
           ${renderConversationsPanel(component, { variant: 'sidebar' })}
           <div class="fullscreen-chat">

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

@@ -169,58 +169,58 @@ export const miniPanelStyles = css`
     gap: 12px;
   }
 
-  .message {
-    border-radius: 16px;
-    border: 1px solid #e4eaee;
-    padding: 10px 16px;
-    max-width: 90%;
+  .message {
+    border-radius: 16px;
+    border: 1px solid #e4eaee;
+    padding: 10px 16px;
+    max-width: 90%;
     background: #fff;
     color: #1f2f36;
-    font-size: 15px;
-  }
-
-  .message__content {
-    line-height: 1.35;
-  }
-
-  .message__content p,
-  .message__content ul,
-  .message__content ol {
-    margin: 4px 0;
-  }
-
-  .message__content pre {
-    background: #0d161b;
-    color: #f3f7fb;
-    border-radius: 8px;
-    padding: 10px;
-    overflow-x: auto;
-    margin: 6px 0;
-    font-size: 14px;
-  }
-
-  .message__content code {
-    background: #f1f4f7;
-    padding: 2px 6px;
-    border-radius: 6px;
-  }
-
-  .message__content blockquote {
-    border-left: 3px solid #cfd6dc;
-    margin: 6px 0;
-    padding-left: 10px;
-    color: #4b5a65;
-  }
-
-  .message__content ul,
-  .message__content ol {
-    padding-left: 20px;
-  }
-
-  .message--user {
-    align-self: flex-end;
-    background: #e5ebf0;
-    border-color: #cfd6dc;
+    font-size: 15px;
+  }
+
+  .message__content {
+    line-height: 1.35;
+  }
+
+  .message__content p,
+  .message__content ul,
+  .message__content ol {
+    margin: 4px 0;
+  }
+
+  .message__content pre {
+    background: #0d161b;
+    color: #f3f7fb;
+    border-radius: 8px;
+    padding: 10px;
+    overflow-x: auto;
+    margin: 6px 0;
+    font-size: 14px;
+  }
+
+  .message__content code {
+    background: #f1f4f7;
+    padding: 2px 6px;
+    border-radius: 6px;
+  }
+
+  .message__content blockquote {
+    border-left: 3px solid #cfd6dc;
+    margin: 6px 0;
+    padding-left: 10px;
+    color: #4b5a65;
+  }
+
+  .message__content ul,
+  .message__content ol {
+    padding-left: 20px;
+  }
+
+  .message--user {
+    align-self: flex-end;
+    background: #e5ebf0;
+    border-color: #cfd6dc;
     color: #1f2f36;
     padding: 8px 10px;
   }
@@ -287,18 +287,19 @@ export const miniPanelStyles = css`
     white-space: nowrap;
   }
 
-  form {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    border: 1px solid #a4afbb;
-    border-radius: 80px;
-    padding: 10px 20px;
-    background: #fff;
-    width: 100%;
-    max-width: 520px;
-    margin-bottom: 0;
-    max-height: 56px;
+  form {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 1px solid #a4afbb;
+    border-radius: 80px;
+    padding: 8px 12px 8px 16px;
+    background: #fff;
+    width: 100%;
+    max-width: 520px;
+    margin-bottom: 0;
+    height: 56px;
+    box-sizing: border-box;
   }
 
   form input {
@@ -319,19 +320,20 @@ export const miniPanelStyles = css`
   }
 
   .input-button {
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     border: none;
     background: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 0;
   }
 
   .input-button img {
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
   }
 
   .input-button:disabled {

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

@@ -9,6 +9,7 @@ const expandIconUrl = new URL('../../assets/icons/expandScreen.png', import.meta
 const iaCentralIconUrl = new URL('../../assets/icons/iaCentralIcon.png', import.meta.url).href;
 const plusFileSelectionUrl = new URL('../../assets/icons/plusFileSelection.png', import.meta.url).href;
 const closeIconUrl = new URL('../../assets/icons/closeIcon.png', import.meta.url).href;
+const arrowButtonUrl = new URL('../../assets/icons/arrowButton.png', import.meta.url).href;
 
 export const renderChatSurface = (component: RioAssistWidget) => {
   const hasMessages = component.messages.length > 0;
@@ -103,6 +104,14 @@ export const renderChatSurface = (component: RioAssistWidget) => {
             }}
             ?disabled=${component.isLoading}
           />
+          <button
+            class="input-button submit-button"
+            type="submit"
+            aria-label="Enviar mensagem"
+            ?disabled=${component.isLoading}
+          >
+            <img src=${arrowButtonUrl} alt="" aria-hidden="true" />
+          </button>
         </form>
 
         <p class="footnote">