rio-assist-widget 0.1.11 → 0.1.14

package/package.json

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

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,16 +167,16 @@ const renderConversationSurface = (
       />
     </div>
 
-    <div
-      class=${classMap({
-        'conversation-list-wrapper': true,
-        'conversation-list-wrapper--sidebar': isSidebar,
-      })}
-    >
-      ${component.conversationHistoryLoading
-        ? html`<div class="conversation-loading">Carregando conversas...</div>`
-        : null}
-      ${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.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.ts

@@ -19,13 +19,20 @@ 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;
+};
+
+export type HeaderActionConfig = {
+  id?: string;
+  iconUrl: string;
+  ariaLabel?: string;
+  onClick?: () => void;
+};
+
+export class RioAssistWidget extends LitElement {
   static styles = widgetStyles;
 
   static properties = {
@@ -51,6 +58,8 @@ export class RioAssistWidget extends LitElement {
     conversations: { state: true },
     conversationHistoryLoading: { type: Boolean, state: true },
     activeConversationTitle: { state: true },
+    headerActions: { attribute: false },
+    homeUrl: { type: String, attribute: 'data-home-url' },
   };
 
   open = false;
@@ -101,6 +110,10 @@ export class RioAssistWidget extends LitElement {
 
   activeConversationTitle: string | null = null;
 
+  headerActions: HeaderActionConfig[] = [];
+
+  homeUrl = '';
+
   private generateConversationId() {
     if (!this.conversationUserId) {
       this.conversationUserId = this.inferUserIdFromToken();
@@ -343,24 +356,70 @@ export class RioAssistWidget extends LitElement {
     }
   }
 
-  handleConversationAction(action: 'rename' | 'delete', id: string) {
-    this.conversationMenuId = null;
-    const conversation = this.conversations.find((item) => item.id === id);
-    if (!conversation) {
-      return;
+  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;
-    }
+    const message = `${
+      action === 'rename' ? 'Renomear' : 'Excluir'
+    } "${conversation.title}"`;
+    console.info(`[Mock] ${message}`);
+  }
+
+  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);
+    }
+  }
+
+  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();