rio-assist-widget 0.1.18 → 0.1.26

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.26",
   "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/mini-panel/mini-panel.styles.ts

@@ -235,6 +235,58 @@ export const miniPanelStyles = css`
   .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 {
@@ -252,7 +304,8 @@ export const miniPanelStyles = css`
   }
 
   .suggestions {
-    display: inline-flex;
+    display: flex;
+    flex-wrap: wrap;
     gap: 12px;
     justify-content: center;
   }
@@ -287,18 +340,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

@@ -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,30 @@ 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;
+    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 +97,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">
@@ -35,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>
   `;
 };