rio-assist-widget 0.1.34 → 0.1.36

package/index.html

@@ -34,5 +34,25 @@
 
     <script type="module" src="/src/main.ts"></script>
     <script type="module" src="/src/playground.ts"></script>
+    <script>
+      // Posiciona o botao flutuante proximo ao topo da viewport calculando bottom a partir da altura disponivel.
+      (function () {
+        const widget = document.querySelector('rio-assist-widget');
+        if (!widget) return;
+
+        const TOP_MARGIN = 96; // distancia desejada a partir do topo em px
+        const BUTTON_HEIGHT = 64;
+        const MIN_BOTTOM = 12;
+
+        const updateFloatingOffset = () => {
+          const viewport = window.innerHeight || document.documentElement.clientHeight || 0;
+          const bottom = Math.max(MIN_BOTTOM, viewport - TOP_MARGIN - BUTTON_HEIGHT);
+          widget.setAttribute('data-floating-offset', String(bottom));
+        };
+
+        updateFloatingOffset();
+        window.addEventListener('resize', updateFloatingOffset);
+      })();
+    </script>
   </body>
 </html>

package/package.json

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

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

@@ -125,11 +125,15 @@ export const miniPanelStyles = css`
     overflow-y: auto;
   }
 
-  .panel-content--empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+  .panel-content--empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .panel-content--consultant {
+    display: block;
+  }
 
   .hero-card {
     flex: 1;
@@ -152,21 +156,101 @@ export const miniPanelStyles = css`
     margin-bottom: 8px;
   }
 
-  .hero-card h3 {
-    font-family: 'Source Sans Pro', 'Inter', sans-serif;
-    font-weight: 400;
-    font-size: 32px;
-    line-height: 1;
+  .hero-card h3 {
+    font-family: 'Source Sans Pro', 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 1;
     white-space: nowrap;
-    color: #2a3740;
-    margin: 0;
-  }
-
-  .conversation {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
+    color: #2a3740;
+    margin: 0;
+  }
+
+  .consultant-agent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+  }
+
+  .consultant-agent__button,
+  .consultant-agent__option {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    padding: 8px 16px;
+    min-height: 34px;
+    border: 1px solid #30b4c0;
+    border-radius: 4px;
+    background: transparent;
+    color: #30b4c0;
+    font-family: 'Source Sans Pro', 'Inter', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 18px;
+    white-space: normal;
+    text-align: left;
+    word-break: break-word;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .consultant-agent__button:focus-visible,
+  .consultant-agent__option:focus-visible {
+    outline: 2px solid #30b4c0;
+    outline-offset: 2px;
+  }
+
+  .consultant-agent__intro {
+    font-family: 'Source Sans Pro', 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 24px;
+    color: #2a3740;
+    text-align: center;
+    margin-top: 4px;
+  }
+
+  .consultant-agent__options {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    align-items: flex-start;
+  }
+
+  .consultant-prompt {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+    align-items: flex-start;
+  }
+
+  .consultant-prompt__text {
+    font-family: 'Source Sans Pro', 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 24px;
+    color: #2a3740;
+    text-align: left;
+  }
+
+  .consultant-prompt__options {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    align-items: flex-start;
+  }
+
+  .conversation {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
   }
 
   .message {
@@ -179,15 +263,37 @@ export const miniPanelStyles = css`
     font-size: 15px;
   }
 
-  .message__content {
-    line-height: 1.35;
-  }
-
-  .message__content p,
-  .message__content ul,
-  .message__content ol {
-    margin: 4px 0;
-  }
+  .message__content {
+    line-height: 1.35;
+  }
+
+  .consultant-follow-up {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .consultant-follow-up__text {
+    margin: 0;
+    font-family: 'Source Sans Pro', 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: 15px;
+    color: #1f2f36;
+  }
+
+  .consultant-follow-up__options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .message__content p,
+  .message__content ul,
+  .message__content ol {
+    margin: 4px 0;
+  }
 
   .message__content pre {
     background: #0d161b;
@@ -316,33 +422,33 @@ export const miniPanelStyles = css`
     margin-bottom: 6px;
   }
 
-  .short-answer-toggle {
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-    border: none;
-    background: transparent;
-    color: #1f2f36;
-    border-radius: 999px;
-    padding: 8px 12px 8px 10px;
-    font-weight: 600;
-    box-shadow: none;
-    transition: color 0.2s ease;
-  }
+  .short-answer-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    border: none;
+    background: transparent;
+    color: #1f2f36;
+    border-radius: 999px;
+    padding: 8px 12px 8px 10px;
+    font-weight: 600;
+    box-shadow: none;
+    transition: color 0.2s ease;
+  }
 
   .short-answer-toggle:focus-visible {
     outline: 2px solid var(--accent-color, #008b9a);
     outline-offset: 2px;
   }
 
-  .short-answer-toggle__track {
-    width: 44px;
-    height: 24px;
-    border-radius: 999px;
-    background: #c7d0d9;
-    position: relative;
-    transition: background-color 0.2s ease;
-  }
+  .short-answer-toggle__track {
+    width: 44px;
+    height: 24px;
+    border-radius: 999px;
+    background: #c7d0d9;
+    position: relative;
+    transition: background-color 0.2s ease;
+  }
 
   .short-answer-toggle__track--on {
     background: #008b9a;

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

@@ -1,54 +1,122 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { classMap } from 'lit/directives/class-map.js';
-import type { RioAssistWidget } from '../rio-assist/rio-assist';
-import { renderConversationsPanel } from '../conversations-panel/conversations-panel.template';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import type { RioAssistWidget } from '../rio-assist/rio-assist';
+import { renderConversationsPanel } from '../conversations-panel/conversations-panel.template';
+import { renderConsultantAgentHero } from '../../consultant-agent/consultant-agent.template';
 
-const hamburgerIconUrl = new URL('../../assets/icons/hamburgerMenuIcon.png', import.meta.url).href;
-const expandIconUrl = new URL('../../assets/icons/expandScreen.png', import.meta.url).href;
-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;
+const hamburgerIconUrl = new URL('../../assets/icons/hamburgerMenuIcon.png', import.meta.url).href;
+const expandIconUrl = new URL('../../assets/icons/expandScreen.png', import.meta.url).href;
+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;
+
+const renderConsultantFollowUp = (
+  component: RioAssistWidget,
+  payload: {
+    id: string;
+    topicLabel: string;
+    questions: string[];
+  },
+) => {
+  const buttonsVisible = component.activeConsultantFollowUpId === payload.id;
+
+  return html`
+    <div class="consultant-follow-up">
+      <p class="consultant-follow-up__text">
+        Certo! Reuni abaixo as principais dúvidas sobre ${payload.topicLabel}. Escolha uma delas ou
+        faça sua pergunta.
+      </p>
+      ${buttonsVisible
+        ? html`
+            <div class="consultant-follow-up__options">
+              ${payload.questions.map(
+                (question) => html`
+                  <button
+                    class="consultant-agent__option"
+                    type="button"
+                    @click=${() => component.handleConsultantFollowUpQuestion(question)}
+                  >
+                    ${question}
+                  </button>
+                `,
+              )}
+            </div>
+          `
+        : null}
+    </div>
+  `;
+};
 
 export const renderChatSurface = (component: RioAssistWidget) => {
-  const hasMessages = component.messages.length > 0;
-
+  const hasMessages = component.messages.length > 0;
+  const showConsultantPrompt =
+    component.consultantAgentVisible &&
+    component.consultantAgentOptions.length > 0 &&
+    !hasMessages;
+
   const heroCard = html`
     <div class="hero-card">
       <img src=${iaCentralIconUrl} alt="IA assistente" class="hero-card__icon" />
       <h3>Como posso te ajudar hoje?</h3>
+      ${renderConsultantAgentHero(component)}
     </div>
   `;
-
-  const conversation = html`
-    <div class="conversation">
-      ${component.messages.map(
-        (message) => html`
-          <div
-            class=${classMap({
-              message: true,
-              'message--user': message.role === 'user',
-              'message--assistant': message.role === 'assistant',
-            })}
-          >
-            <div class="message__content">
-              ${unsafeHTML(message.html ?? message.text)}
-            </div>
-            <time>
-              ${new Date(message.timestamp).toLocaleTimeString('pt-BR', {
-                hour: '2-digit',
-                minute: '2-digit',
-              })}
-            </time>
-          </div>
-        `,
-      )}
-      ${component.isLoading
-        ? html`
-            <div class="message message--assistant typing">
-              <span>${component.loadingLabel}</span>
-              <span class="typing__dots" aria-hidden="true">
+
+  const consultantPrompt = html`
+    <div class="consultant-prompt">
+      <div class="consultant-prompt__text">
+        ${component.consultantAgentIntro}
+      </div>
+      <div class="consultant-prompt__options">
+        ${component.consultantAgentOptions.map(
+          (option) => html`
+            <button
+              class="consultant-agent__option"
+              type="button"
+              @click=${() => component.handleConsultantAgentOption(option)}
+            >
+              ${option.label}
+            </button>
+          `,
+        )}
+      </div>
+    </div>
+  `;
+
+  const conversation = html`
+    <div class="conversation">
+      ${component.messages.map((message) => {
+        const hasFollowUp = Boolean((message as any).consultantFollowUp);
+
+        return html`
+          <div
+            class=${classMap({
+              message: true,
+              'message--user': message.role === 'user',
+              'message--assistant': message.role === 'assistant',
+            })}
+          >
+            <div class="message__content">
+              ${hasFollowUp
+                ? renderConsultantFollowUp(component, (message as any).consultantFollowUp)
+                : unsafeHTML(message.html ?? message.text)}
+            </div>
+            <time>
+              ${new Date(message.timestamp).toLocaleTimeString('pt-BR', {
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
+            </time>
+          </div>
+        `;
+      })}
+      ${component.isLoading
+        ? html`
+            <div class="message message--assistant typing">
+              <span>${component.loadingLabel}</span>
+              <span class="typing__dots" aria-hidden="true">
                 <span>.</span><span>.</span><span>.</span>
               </span>
             </div>
@@ -60,24 +128,25 @@ export const renderChatSurface = (component: RioAssistWidget) => {
   return html`
     <div class="panel-body">
       <div
-        class=${classMap({
-          'panel-content': true,
-          'panel-content--empty': !hasMessages,
-        })}
-      >
-        ${hasMessages ? conversation : heroCard}
-      </div>
+      class=${classMap({
+        'panel-content': true,
+        'panel-content--empty': !hasMessages && !showConsultantPrompt,
+        'panel-content--consultant': showConsultantPrompt,
+      })}
+      >
+        ${hasMessages ? conversation : showConsultantPrompt ? consultantPrompt : heroCard}
+      </div>
 
       ${component.errorMessage
         ? html`<p class="error-banner">${component.errorMessage}</p>`
         : null}
 
-      <div class="panel-footer">
-        ${component.suggestions.length > 0
-          ? html`
-              <div class="suggestions-wrapper">
-                <p class="suggestions-label">Sugestões de Perguntas</p>
-                <div class="suggestions">
+      <div class="panel-footer">
+        ${component.showSuggestions && component.suggestions.length > 0
+          ? html`
+              <div class="suggestions-wrapper">
+                <p class="suggestions-label">Sugestões de Perguntas</p>
+                <div class="suggestions">
                   ${component.suggestions.map(
                     (suggestion) => html`
                       <button
@@ -141,58 +210,58 @@ export const renderMiniPanel = (component: RioAssistWidget) => {
             <img src=${closeIconUrl} alt="" aria-hidden="true" />
           </button>
         </div>
-        <div class="panel-header__actions">
-          <button
-            class="conversations-button"
-            type="button"
-            @click=${() => component.toggleConversationsPanel()}
+        <div class="panel-header__actions">
+          <button
+            class="conversations-button"
+            type="button"
+            @click=${() => component.toggleConversationsPanel()}
           >
             <img src=${hamburgerIconUrl} alt="" aria-hidden="true" />
             Minhas Conversas
           </button>
-          <div class="panel-header__icons">
-            <button
-              type="button"
-              class="short-answer-toggle short-answer-toggle--header"
-              role="switch"
-              aria-checked=${component.shortAnswerEnabled}
-              @click=${() => component.toggleShortAnswers()}
-            >
-              <span
-                class=${classMap({
-                  'short-answer-toggle__track': true,
-                  'short-answer-toggle__track--on': component.shortAnswerEnabled,
-                })}
-                aria-hidden="true"
-              >
-                <span class="short-answer-toggle__thumb"></span>
-              </span>
-              <span class="short-answer-toggle__label">Respostas rápidas</span>
-            </button>
-
-            ${component.hasActiveConversation
-              ? html`
-                  <button
-                    class="panel-header__icon-button conversations-plus-button"
-                    type="button"
-                    aria-label="Nova conversa"
-                    @click=${() => component.handleCreateConversation()}
-                  >
-                    <img src=${plusFileSelectionUrl} alt="" aria-hidden="true" />
-                  </button>
-                `
-              : null}
-            <button
-              class="panel-header__icon-button"
-              type="button"
-              aria-label="Expandir painel"
-              @click=${() => component.enterFullscreen()}
-            >
-              <img src=${expandIconUrl} alt="" aria-hidden="true" />
-            </button>
-          </div>
-        </div>
-      </header>
+          <div class="panel-header__icons">
+            <button
+              type="button"
+              class="short-answer-toggle short-answer-toggle--header"
+              role="switch"
+              aria-checked=${component.shortAnswerEnabled}
+              @click=${() => component.toggleShortAnswers()}
+            >
+              <span
+                class=${classMap({
+                  'short-answer-toggle__track': true,
+                  'short-answer-toggle__track--on': component.shortAnswerEnabled,
+                })}
+                aria-hidden="true"
+              >
+                <span class="short-answer-toggle__thumb"></span>
+              </span>
+              <span class="short-answer-toggle__label">Respostas rápidas</span>
+            </button>
+
+            ${component.hasActiveConversation
+              ? html`
+                  <button
+                    class="panel-header__icon-button conversations-plus-button"
+                    type="button"
+                    aria-label="Nova conversa"
+                    @click=${() => component.handleCreateConversation()}
+                  >
+                    <img src=${plusFileSelectionUrl} alt="" aria-hidden="true" />
+                  </button>
+                `
+              : null}
+            <button
+              class="panel-header__icon-button"
+              type="button"
+              aria-label="Expandir painel"
+              @click=${() => component.enterFullscreen()}
+            >
+              <img src=${expandIconUrl} alt="" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </header>
 
       ${chatSurface}
 

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

@@ -5,7 +5,7 @@ import { fullscreenStyles } from '../fullscreen/fullscreen.styles';
 import { conversationsPanelStyles } from '../conversations-panel/conversations-panel.styles';
 
 const baseStyles = css`
-  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
 
   :host {
     position: fixed;