rio-assist-widget 0.1.11 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rio-assist-widget",
-  "version": "0.1.11",
+  "version": "0.1.18",
   "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;
@@ -265,11 +286,17 @@ export const conversationsPanelStyles = css`
     height: 16px;
   }
 
-  .conversation-loading {
-    font-size: 13px;
-    color: #4b5b68;
-    padding: 6px 12px 2px;
-  }
+  .conversation-loading {
+    font-size: 13px;
+    color: #4b5b68;
+    padding: 6px 12px 2px;
+  }
+
+  .conversation-error {
+    font-size: 13px;
+    color: #a33c3c;
+    padding: 6px 12px 2px;
+  }
 
   .new-conversation-cta {
     overflow: hidden;

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';
 
@@ -47,11 +48,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,27 +82,27 @@ const renderConversationSurface = (
     >
       ${component.filteredConversations.map(
         (conversation) => {
-          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"
+          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)}
@@ -147,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
@@ -157,7 +167,7 @@ const renderConversationSurface = (
       />
     </div>
 
-    <div
+    <div
       class=${classMap({
         'conversation-list-wrapper': true,
         'conversation-list-wrapper--sidebar': isSidebar,
@@ -166,10 +176,13 @@ const renderConversationSurface = (
       ${component.conversationHistoryLoading
         ? html`<div class="conversation-loading">Carregando conversas...</div>`
         : null}
+      ${component.conversationHistoryError
+        ? html`<div class="conversation-error">${component.conversationHistoryError}</div>`
+        : null}
       ${list}
-      ${isSidebar
-        ? html`
-            <div
+      ${isSidebar
+        ? html`
+            <div
               class=${classMap({
                 'conversation-scrollbar': true,
                 'conversation-scrollbar--visible':

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
@@ -73,18 +88,30 @@ export const renderFullscreen = (component: RioAssistWidget) => {
           </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">

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

@@ -22,6 +22,60 @@ const baseStyles = css`
     border-radius: 999px;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
+
+  .dialog-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    display: grid;
+    place-items: center;
+    z-index: 2147484000;
+    pointer-events: auto;
+  }
+
+  .dialog {
+    width: min(360px, calc(100% - 32px));
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .dialog__message {
+    margin: 0;
+    font-size: 16px;
+    color: #1f2f36;
+  }
+
+  .dialog__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+
+  .dialog__button {
+    min-width: 96px;
+    height: 36px;
+    padding: 0 14px;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    font-weight: 600;
+    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  }
+
+  .dialog__button--ghost {
+    background: #fff;
+    border-color: #c7d0d9;
+    color: #1f2f36;
+  }
+
+  .dialog__button--danger {
+    background: #008b9a;
+    color: #fff;
+  }
 `;
 
 export const widgetStyles = [

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

@@ -16,6 +16,25 @@ export const renderRioAssist = (component: RioAssistWidget) => {
       ${renderFloatingButton(component)}
       ${renderMiniPanel(component)}
       ${component.isFullscreen ? renderFullscreen(component) : null}
+      ${component.deleteConversationTarget
+        ? html`
+            <div class="dialog-overlay" role="dialog" aria-modal="true">
+              <div class="dialog">
+                <p class="dialog__message">Deseja realmente excluir essa conversa?</p>
+                <div class="dialog__actions">
+                  <button type="button" class="dialog__button dialog__button--ghost" @click=${() =>
+                    component.cancelDeleteConversation()}>
+                    Cancelar
+                  </button>
+                  <button type="button" class="dialog__button dialog__button--danger" @click=${() =>
+                    component.confirmDeleteConversation()}>
+                    Excluir
+                  </button>
+                </div>
+              </div>
+            </div>
+          `
+        : null}
     </div>
   `;
 };