rio-assist-widget 0.1.18 → 0.1.23

package/index.html

@@ -28,7 +28,7 @@
       data-title="Rio Insight"
       data-button-label="Rio Insight"
       data-placeholder="Pergunte alguma coisa"
-      data-suggestions="Veículos com problemas|Valor das peças|Planos de manutenção"
+      data-suggestions="Resumo da Frota|Frota Disponível|Chamados Abertos|Parados + Causas|Aguardando Peças|Principais Gargalos|Tempo por Concessionária|Tempo de Ciclo|Preventiva x Corretiva"
       data-accent-color="#c02267"
     ></rio-assist-widget>
 
@@ -36,4 +36,3 @@
     <script type="module" src="/src/playground.ts"></script>
   </body>
 </html>
-  </body>

package/package.json

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

@@ -232,14 +232,46 @@ export const miniPanelStyles = css`
     text-align: right;
   }
 
-  .typing {
-    font-style: italic;
-    opacity: 0.75;
-  }
-
-  .message--user time {
-    margin-top: 3px;
-  }
+  .typing {
+    font-style: italic;
+    opacity: 0.75;
+  }
+
+  .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%;
@@ -251,11 +283,12 @@ export const miniPanelStyles = css`
     margin-top: auto;
   }
 
-  .suggestions {
-    display: inline-flex;
-    gap: 12px;
-    justify-content: center;
-  }
+  .suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    justify-content: center;
+  }
 
   .suggestions-wrapper {
     width: 100%;

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

@@ -47,7 +47,10 @@ export const renderChatSurface = (component: RioAssistWidget) => {
       ${component.isLoading
         ? html`
             <div class="message message--assistant typing">
-              <span>Rio Insight está respondendo...</span>
+              <span>${component.loadingLabel}</span>
+              <span class="typing__dots" aria-hidden="true">
+                <span>.</span><span>.</span><span>.</span>
+              </span>
             </div>
           `
         : null}

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

@@ -50,6 +50,21 @@ const baseStyles = css`
     color: #1f2f36;
   }
 
+  .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;
@@ -73,7 +88,12 @@ const baseStyles = css`
   }
 
   .dialog__button--danger {
-    background: #008b9a;
+    background: #d9534f;
+    color: #fff;
+  }
+
+  .dialog__button--primary {
+    background: var(--accent-color, #008b9a);
     color: #fff;
   }
 `;

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

@@ -16,6 +16,35 @@ export const renderRioAssist = (component: RioAssistWidget) => {
       ${renderFloatingButton(component)}
       ${renderMiniPanel(component)}
       ${component.isFullscreen ? renderFullscreen(component) : null}
+      ${component.renameConversationTarget
+        ? html`
+            <div class="dialog-overlay" role="dialog" aria-modal="true">
+              <div class="dialog">
+                <p class="dialog__message">Digite o novo título para a conversa:</p>
+                <input
+                  class="dialog__input"
+                  type="text"
+                  .value=${component.renameConversationTarget.draft}
+                  @input=${(event: InputEvent) => component.handleRenameDraft(event)}
+                  aria-label="Novo titulo da conversa"
+                />
+                <div class="dialog__actions">
+                  <button type="button" class="dialog__button dialog__button--ghost" @click=${() =>
+                    component.cancelRenameConversation()}>
+                    Cancelar
+                  </button>
+                  <button
+                    type="button"
+                    class="dialog__button dialog__button--primary"
+                    @click=${() => component.confirmRenameConversation()}
+                  >
+                    Renomear
+                  </button>
+                </div>
+              </div>
+            </div>
+          `
+        : null}
       ${component.deleteConversationTarget
         ? html`
             <div class="dialog-overlay" role="dialog" aria-modal="true">