rio-assist-widget 0.1.14 → 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.14",
+  "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/conversations-panel/conversations-panel.styles.ts

@@ -286,11 +286,17 @@ export const conversationsPanelStyles = css`
     height: 16px;
   }
 
-  .conversation-loading {
-    font-size: 13px;
-    color: #4b5b68;
-    padding: 6px 12px 2px;
-  }
+  .conversation-loading {
+    font-size: 13px;
+    color: #4b5b68;
+    padding: 6px 12px 2px;
+  }
+
+  .conversation-error {
+    font-size: 13px;
+    color: #a33c3c;
+    padding: 6px 12px 2px;
+  }
 
   .new-conversation-cta {
     overflow: hidden;

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

@@ -168,18 +168,21 @@ const renderConversationSurface = (
     </div>
 
     <div
-      class=${classMap({
-        'conversation-list-wrapper': true,
-        'conversation-list-wrapper--sidebar': isSidebar,
-      })}
-    >
-      ${component.conversationHistoryLoading
-        ? html`<div class="conversation-loading">Carregando conversas...</div>`
-        : null}
-      ${list}
-      ${isSidebar
-        ? html`
-            <div
+      class=${classMap({
+        'conversation-list-wrapper': true,
+        'conversation-list-wrapper--sidebar': isSidebar,
+      })}
+    >
+      ${component.conversationHistoryLoading
+        ? html`<div class="conversation-loading">Carregando conversas...</div>`
+        : null}
+      ${component.conversationHistoryError
+        ? html`<div class="conversation-error">${component.conversationHistoryError}</div>`
+        : null}
+      ${list}
+      ${isSidebar
+        ? html`
+            <div
               class=${classMap({
                 'conversation-scrollbar': true,
                 'conversation-scrollbar--visible':

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

@@ -22,6 +22,80 @@ const baseStyles = css`
     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;
+  }
+
+  .dialog__message {
+    margin: 0;
+    font-size: 16px;
+    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;
+    gap: 10px;
+  }
+
+  .dialog__button {
+    min-width: 96px;
+    height: 36px;
+    padding: 0 14px;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    font-weight: 600;
+    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--primary {
+    background: var(--accent-color, #008b9a);
+    color: #fff;
+  }
 `;
 
 export const widgetStyles = [

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

@@ -16,6 +16,54 @@ 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">
+              <div class="dialog">
+                <p class="dialog__message">Deseja realmente excluir essa conversa?</p>
+                <div class="dialog__actions">
+                  <button type="button" class="dialog__button dialog__button--ghost" @click=${() =>
+                    component.cancelDeleteConversation()}>
+                    Cancelar
+                  </button>
+                  <button type="button" class="dialog__button dialog__button--danger" @click=${() =>
+                    component.confirmDeleteConversation()}>
+                    Excluir
+                  </button>
+                </div>
+              </div>
+            </div>
+          `
+        : null}
     </div>
   `;
 };