rio-assist-widget 0.1.23 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rio-assist-widget",
-  "version": "0.1.23",
+  "version": "0.1.27",
   "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.template.ts

@@ -119,14 +119,18 @@ const renderConversationSurface = (
                       })}
                       @click=${(event: Event) => event.stopPropagation()}
                     >
-                      <button
-                        type="button"
-                        @click=${() =>
-                          component.handleConversationAction('rename', conversation.id)}
-                      >
-                        <img src=${editIconUrl} alt="" aria-hidden="true" />
-                        Renomear
-                      </button>
+                      ${/* Renomear ocultado enquanto backend nao suporta */ false
+                        ? html`
+                            <button
+                              type="button"
+                              @click=${() =>
+                                component.handleConversationAction('rename', conversation.id)}
+                            >
+                              <img src=${editIconUrl} alt="" aria-hidden="true" />
+                              Renomear
+                            </button>
+                          `
+                        : null}
                       <button
                         type="button"
                         @click=${() =>

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

@@ -192,27 +192,37 @@ export const fullscreenStyles = css`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 36px 32px 18px;
+    padding: 36px clamp(24px, 4vw, 56px) 18px;
     width: 100%;
     flex: 1;
     min-height: 0;
     overflow: hidden;
     max-width: 1400px;
     margin: 0 auto;
+    box-sizing: border-box;
   }
 
   .fullscreen-chat .panel-body {
     max-width: 920px;
     width: 100%;
-    padding: 12px 32px 12px;
+    padding: 12px clamp(20px, 3vw, 44px) 12px;
     margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  .fullscreen-chat .panel-footer {
+    max-width: 640px;
+    width: 100%;
+    padding: 0 clamp(16px, 3vw, 32px);
+    box-sizing: border-box;
+  }
+
+  .fullscreen-chat form {
+    max-width: none;
+  }
+
+  .fullscreen-chat .panel-content {
+    padding-right: clamp(12px, 2vw, 24px);
+    box-sizing: border-box;
   }
-
-  .fullscreen-chat .panel-footer {
-    max-width: 640px;
-  }
-
-  .fullscreen-chat form {
-    max-width: none;
-  }
 `;

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

@@ -105,11 +105,11 @@ export const miniPanelStyles = css`
     height: 28px;
   }
 
-  .panel-body {
-    flex: 1;
-    padding: 48px 32px 12px;
-    display: flex;
-    flex-direction: column;
+  .panel-body {
+    flex: 1;
+    padding: 48px 32px 12px;
+    display: flex;
+    flex-direction: column;
     align-items: center;
     gap: 16px;
     max-width: 520px;
@@ -232,69 +232,146 @@ export const miniPanelStyles = css`
     text-align: right;
   }
 
-  .typing {
-    font-style: italic;
-    opacity: 0.75;
+  .typing {
+    font-style: italic;
+    opacity: 0.75;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .typing::before {
+    content: '';
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--accent-color, #008B9A);
+    border-radius: 50%;
+    border-top-color: transparent;
+    animation: typing-spin 0.8s linear infinite;
+  }
+
+  @keyframes typing-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .typing__dots {
+    display: inline-flex;
+    gap: 2px;
+    margin-left: 4px;
+  }
+
+  .typing__dots span {
+    display: inline-block;
+    animation: typing-bounce 1.2s infinite;
+  }
+
+  .typing__dots span:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .typing__dots span:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes typing-bounce {
+    0%,
+    80%,
+    100% {
+      transform: translateY(0);
+      opacity: 0.25;
+    }
+    40% {
+      transform: translateY(-4px);
+      opacity: 1;
+    }
+  }
+
+  .message--user time {
+    margin-top: 3px;
+  }
+
+  .panel-footer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding-top: 8px;
+    margin-top: auto;
+  }
+
+  .suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    justify-content: center;
+  }
+
+  .suggestions-wrapper {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 6px;
   }
 
-  .typing__dots {
+  .short-answer-toggle {
     display: inline-flex;
-    gap: 2px;
-    margin-left: 4px;
+    align-items: center;
+    gap: 12px;
+    border: 1px solid #d6dde3;
+    background: #f7fafc;
+    color: #1f2f36;
+    border-radius: 999px;
+    padding: 8px 12px 8px 10px;
+    font-weight: 600;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   }
 
-  .typing__dots span {
-    display: inline-block;
-    animation: typing-bounce 1.2s infinite;
+  .short-answer-toggle:focus-visible {
+    outline: 2px solid var(--accent-color, #008b9a);
+    outline-offset: 2px;
   }
 
-  .typing__dots span:nth-child(2) {
-    animation-delay: 0.2s;
+  .short-answer-toggle__track {
+    width: 44px;
+    height: 24px;
+    border-radius: 999px;
+    background: #c7d0d9;
+    position: relative;
+    transition: background-color 0.2s ease;
   }
 
-  .typing__dots span:nth-child(3) {
-    animation-delay: 0.4s;
+  .short-answer-toggle__track--on {
+    background: #008b9a;
   }
 
-  @keyframes typing-bounce {
-    0%,
-    80%,
-    100% {
-      transform: translateY(0);
-      opacity: 0.25;
-    }
-    40% {
-      transform: translateY(-4px);
-      opacity: 1;
-    }
+  .short-answer-toggle__thumb {
+    position: absolute;
+    top: 3px;
+    left: 4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+    transition: transform 0.2s ease;
   }
 
-  .message--user time {
-    margin-top: 3px;
+  .short-answer-toggle__track--on .short-answer-toggle__thumb {
+    transform: translateX(18px);
   }
-
-  .panel-footer {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    padding-top: 8px;
-    margin-top: auto;
-  }
-
-  .suggestions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    justify-content: center;
+
+  .short-answer-toggle__label {
+    font-size: 14px;
+    white-space: nowrap;
+  }
+
+  .short-answer-toggle--hero {
+    margin-top: 8px;
   }
-
-  .suggestions-wrapper {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 6px;
-  }
 
   .suggestions-label {
     text-align: center;
@@ -320,18 +397,18 @@ export const miniPanelStyles = css`
     white-space: nowrap;
   }
 
-  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;
+  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;
   }
 

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

@@ -18,6 +18,24 @@ export const renderChatSurface = (component: RioAssistWidget) => {
     <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>
   `;
 
@@ -73,6 +91,29 @@ export const renderChatSurface = (component: RioAssistWidget) => {
         : 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">

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

@@ -50,6 +50,15 @@ const baseStyles = css`
     color: #1f2f36;
   }
 
+  .dialog__message--title {
+    font-weight: 700;
+  }
+
+  .dialog__message--error {
+    color: #d9534f;
+    white-space: pre-wrap;
+  }
+
   .dialog__input {
     width: 100%;
     box-sizing: border-box;

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

@@ -64,6 +64,42 @@ export const renderRioAssist = (component: RioAssistWidget) => {
             </div>
           `
         : null}
+      ${component.conversationActionError
+        ? html`
+            <div class="dialog-overlay" role="dialog" aria-modal="true">
+              <div class="dialog">
+                <p class="dialog__message dialog__message--title">
+                  Erro ao
+                  ${component.conversationActionError.action === 'delete'
+                    ? 'excluir'
+                    : 'renomear'}
+                  conversa:
+                </p>
+                <p class="dialog__message">
+                  O agente retornou o seguinte erro ao tentar
+                  ${component.conversationActionError.action === 'delete' ? 'excluir' : 'renomear'}
+                  a conversa:
+                </p>
+                <p class="dialog__message dialog__message--error">
+                  ${component.conversationActionError.message}
+                </p>
+                <div class="dialog__actions">
+                  <button type="button" class="dialog__button dialog__button--ghost" @click=${() =>
+                    component.cancelConversationActionError()}>
+                    Cancelar ação
+                  </button>
+                  <button
+                    type="button"
+                    class="dialog__button dialog__button--primary"
+                    @click=${() => component.retryConversationAction()}
+                  >
+                    Tentar novamente
+                  </button>
+                </div>
+              </div>
+            </div>
+          `
+        : null}
     </div>
   `;
 };