rio-assist-widget 0.1.23 → 0.1.26

package/package.json

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

@@ -232,46 +232,66 @@ export const miniPanelStyles = css`
     text-align: right;
   }
 
-  .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;
-  }
+  .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%;
@@ -283,12 +303,12 @@ export const miniPanelStyles = css`
     margin-top: auto;
   }
 
-  .suggestions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    justify-content: center;
-  }
+  .suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    justify-content: center;
+  }
 
   .suggestions-wrapper {
     width: 100%;
@@ -320,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/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>
   `;
 };