rio-assist-widget 0.1.27 → 0.1.32

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

@@ -1,198 +1,176 @@
-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';
-
-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;
-
-export const renderChatSurface = (component: RioAssistWidget) => {
-  const hasMessages = component.messages.length > 0;
-
+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';
+
+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;
+
+export const renderChatSurface = (component: RioAssistWidget) => {
+  const hasMessages = component.messages.length > 0;
+
   const heroCard = html`
     <div class="hero-card">
       <img src=${iaCentralIconUrl} alt="IA assistente" class="hero-card__icon" />
       <h3>Como posso te ajudar hoje?</h3>
-      <button
-        type="button"
-        class="short-answer-toggle short-answer-toggle--hero"
-        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">Ativar respostas curtas</span>
-      </button>
-    </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">
-                <span>.</span><span>.</span><span>.</span>
-              </span>
-            </div>
-          `
-        : null}
     </div>
   `;
-
-  return html`
-    <div class="panel-body">
-      <div
-        class=${classMap({
-          'panel-content': true,
-          'panel-content--empty': !hasMessages,
-        })}
-      >
-        ${hasMessages ? conversation : heroCard}
-      </div>
-
-      ${component.errorMessage
-        ? html`<p class="error-banner">${component.errorMessage}</p>`
-        : null}
-
+
+  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">
+                <span>.</span><span>.</span><span>.</span>
+              </span>
+            </div>
+          `
+        : null}
+    </div>
+  `;
+
+  return html`
+    <div class="panel-body">
+      <div
+        class=${classMap({
+          'panel-content': true,
+          'panel-content--empty': !hasMessages,
+        })}
+      >
+        ${hasMessages ? conversation : heroCard}
+      </div>
+
+      ${component.errorMessage
+        ? html`<p class="error-banner">${component.errorMessage}</p>`
+        : null}
+
       <div class="panel-footer">
-        ${hasMessages
-          ? html`
-              <button
-                type="button"
-                class="short-answer-toggle"
-                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">Ativar respostas curtas</span>
-              </button>
-            `
-          : null}
-
-        ${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
-                        class="suggestion"
-                        type="button"
-                        @click=${() => component.onSuggestionClick(suggestion)}
-                      >
-                        ${suggestion}
-                      </button>
-                    `,
-                  )}
-                </div>
-              </div>
-            `
-          : null}
-
-        <form
-          @submit=${(event: SubmitEvent) => component.handleSubmit(event)}
-          aria-busy=${component.isLoading}
-        >
-          <input
-            type="text"
-            placeholder=${component.placeholder}
-            .value=${component.message}
-            @input=${(event: InputEvent) => {
-              component.message = (event.target as HTMLInputElement).value;
-            }}
-            ?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">
-          IA pode cometer erros. Por isso lembre-se de conferir informacoes importantes.
-        </p>
-      </div>
-    </div>
-  `;
-};
-
-export const renderMiniPanel = (component: RioAssistWidget) => {
-  const chatSurface = renderChatSurface(component);
-
-  return html`
-    <aside class=${classMap({ panel: true, open: component.open })} role="dialog">
-      <header class="panel-header">
-        <div class="panel-header__top">
-          <span class="panel-title">${component.titleText}</span>
-          <button
-            class="close-button"
-            @click=${() => component.handleCloseAction()}
-            aria-label="Fechar Rio Insight"
-          >
-            <img src=${closeIconUrl} alt="" aria-hidden="true" />
-          </button>
-        </div>
+        ${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
+                        class="suggestion"
+                        type="button"
+                        @click=${() => component.onSuggestionClick(suggestion)}
+                      >
+                        ${suggestion}
+                      </button>
+                    `,
+                  )}
+                </div>
+              </div>
+            `
+          : null}
+
+        <form
+          @submit=${(event: SubmitEvent) => component.handleSubmit(event)}
+          aria-busy=${component.isLoading}
+        >
+          <input
+            type="text"
+            placeholder=${component.placeholder}
+            .value=${component.message}
+            @input=${(event: InputEvent) => {
+              component.message = (event.target as HTMLInputElement).value;
+            }}
+            ?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">
+          IA pode cometer erros. Por isso lembre-se de conferir informacoes importantes.
+        </p>
+      </div>
+    </div>
+  `;
+};
+
+export const renderMiniPanel = (component: RioAssistWidget) => {
+  const chatSurface = renderChatSurface(component);
+
+  return html`
+    <aside class=${classMap({ panel: true, open: component.open })} role="dialog">
+      <header class="panel-header">
+        <div class="panel-header__top">
+          <span class="panel-title">${component.titleText}</span>
+          <button
+            class="close-button"
+            @click=${() => component.handleCloseAction()}
+            aria-label="Fechar Rio Insight"
+          >
+            <img src=${closeIconUrl} alt="" aria-hidden="true" />
+          </button>
+        </div>
         <div class="panel-header__actions">
           <button
             class="conversations-button"
             type="button"
             @click=${() => component.toggleConversationsPanel()}
-          >
-            <img src=${hamburgerIconUrl} alt="" aria-hidden="true" />
-            Minhas Conversas
-          </button>
+          >
+            <img src=${hamburgerIconUrl} alt="" aria-hidden="true" />
+            Minhas Conversas
+          </button>
           <div class="panel-header__icons">
-            ${component.showConversations
+            <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"
@@ -215,10 +193,10 @@ export const renderMiniPanel = (component: RioAssistWidget) => {
           </div>
         </div>
       </header>
-
-      ${chatSurface}
-
-      ${renderConversationsPanel(component, { variant: 'drawer' })}
-    </aside>
-  `;
-};
+
+      ${chatSurface}
+
+      ${renderConversationsPanel(component, { variant: 'drawer' })}
+    </aside>
+  `;
+};

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

@@ -1,116 +1,125 @@
-import { css } from 'lit';
-import { floatingButtonStyles } from '../floating-button/floating-button.styles';
-import { miniPanelStyles } from '../mini-panel/mini-panel.styles';
-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');
-
-  :host {
-    position: fixed;
-    inset: 0;
-    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-    color: #1c2a33;
-    z-index: 2147483000;
-  }
-
-  button {
-    font: inherit;
-    border: none;
-    cursor: pointer;
-    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;
-  }
-
+import { css } from 'lit';
+import { floatingButtonStyles } from '../floating-button/floating-button.styles';
+import { miniPanelStyles } from '../mini-panel/mini-panel.styles';
+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');
+
+  :host {
+    position: fixed;
+    inset: 0;
+    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+    color: #1c2a33;
+    z-index: 2147483000;
+  }
+
+  button {
+    font: inherit;
+    border: none;
+    cursor: pointer;
+    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: auto;
+    min-width: 360px;
+    max-width: calc(100% - 32px);
+    box-sizing: border-box;
+    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;
+    text-align: center;
   }
-
-  .dialog__message--title {
-    font-weight: 700;
-  }
-
-  .dialog__message--error {
-    color: #d9534f;
-    white-space: pre-wrap;
-  }
-
-  .dialog__input {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px 12px;
-    border-radius: 8px;
-    border: 1px solid #c7d0d9;
-    font: inherit;
-    outline: none;
-  }
-
-  .dialog__input:focus {
-    border-color: var(--accent-color, #008b9a);
-    box-shadow: 0 0 0 2px rgba(0, 139, 154, 0.2);
-  }
-
+
+  .dialog__message--title {
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .dialog__message--error {
+    color: #d9534f;
+    white-space: pre-wrap;
+  }
+
+  .dialog__input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px 12px;
+    border-radius: 8px;
+    border: 1px solid #c7d0d9;
+    font: inherit;
+    outline: none;
+  }
+
+  .dialog__input:focus {
+    border-color: var(--accent-color, #008b9a);
+    box-shadow: 0 0 0 2px rgba(0, 139, 154, 0.2);
+  }
+
   .dialog__actions {
     display: flex;
-    justify-content: flex-end;
+    justify-content: center;
     gap: 10px;
+    flex-wrap: nowrap;
+    align-items: center;
   }
-
+
   .dialog__button {
-    min-width: 96px;
+    min-width: max-content;
     height: 36px;
-    padding: 0 14px;
+    padding: 0 16px;
     border-radius: 8px;
     border: 1px solid transparent;
     font-weight: 600;
+    text-transform: uppercase;
+    white-space: nowrap;
     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: #d9534f;
-    color: #fff;
-  }
-
+
+  .dialog__button--danger {
+    background: #d9534f;
+    color: #fff;
+  }
+
   .dialog__button--primary {
-    background: var(--accent-color, #008b9a);
+    background: #008b9a;
     color: #fff;
   }
-`;
-
-export const widgetStyles = [
-  baseStyles,
-  floatingButtonStyles,
-  miniPanelStyles,
-  fullscreenStyles,
-  conversationsPanelStyles,
-];
+`;
+
+export const widgetStyles = [
+  baseStyles,
+  floatingButtonStyles,
+  miniPanelStyles,
+  fullscreenStyles,
+  conversationsPanelStyles,
+];