@adzen/doohbot 1.0.5 → 1.0.7

package/src/lib/app/chat/components/chat-window/chat-window.component.scss

@@ -5,6 +5,130 @@
   transition: all 0.3s ease-in-out;
 }
 
+.chat-logo {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  flex-shrink: 0;
+  margin-bottom: 20px;
+  filter: drop-shadow(0 4px 6px rgba(var(--black-rgb), 0.1));
+  animation: float 3s ease-in-out infinite;
+}
+
+.auth-loader {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  text-align: center;
+  background: var(--db-bg-color);
+
+  > div {
+    max-width: 320px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  h2 {
+    font-size: 24px;
+    font-weight: 700;
+    font-family: var(--db-font);
+    color: var(--db-text-primary);
+    margin: 0 0 8px 0;
+    letter-spacing: -0.5px;
+  }
+
+  h3 {
+    margin: 0 0 5px 0;
+    color: var(--db-text-primary);
+    font-family: var(--db-font);
+    font-size: 18px;
+  }
+
+  p {
+    margin: 0;
+    color: var(--db-text-secondary);
+    font-size: 14px;
+    font-family: var(--db-font);
+    margin-bottom: 30px;
+  }
+
+  .login-redirect-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 12px;
+    background: var(--db-primary);
+    color: var(--db-bg-color);
+    border: none;
+    border-radius: 100px;
+    font-size: 15px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    box-shadow: 0 4px 12px rgba(var(--db-primary-rgb), 0.2);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(var(--db-primary-rgb), 0.3);
+      background: var(--db-primary);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+
+  app-login-form {
+    width: 100%;
+    animation: fade-in 0.5s ease;
+  }
+
+  .session-initializer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    animation: fade-in 0.4s ease;
+
+    mat-progress-spinner {
+      filter: drop-shadow(0 4px 12px rgba(var(--db-primary-rgb), 0.2));
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.9rem;
+      font-weight: 500;
+      color: var(--db-text-secondary);
+      letter-spacing: 0.02em;
+    }
+  }
+}
+
+// @keyframes float {
+//   0%,
+//   100% {
+//     transform: translateY(0);
+//   }
+//   50% {
+//     transform: translateY(-10px);
+//   }
+// }
+
+// @keyframes fade-in-up {
+//   from {
+//     opacity: 0;
+//     transform: translateY(20px);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translateY(0);
+//   }
+// }
+
 /* BASE CHAT WINDOW STYLES */
 .chat-window {
   /* Default Popup State */
@@ -17,15 +141,14 @@
   width: clamp(400px, 30vw, 450px);
   height: clamp(620px, 70vh, 660px);
 
-  background-color: var(--background-color);
+  background-color: var(--db-bg-color);
   border-radius: 20px;
-  border-color: var(--border-color);
-  box-shadow: var(--border-shadow-color);
+  border: 1px solid var(--db-border-color);
+  // box-shadow: var(--db-border-shadow);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   user-select: none;
-  cursor: move;
   animation: slide-in 0.5s ease;
 
   /* FULLSCREEN STATE */
@@ -62,22 +185,41 @@
       cursor: default;
     }
 
-    /* Fullscreen Layout Overrides */
-    .chat-content-wrapper {
-      flex-direction: row; // Side-by-side layout
-    }
+    /* Fullscreen Layout Overrides for Tablet and Desktop */
+    @media (min-width: 769px) {
+      .chat-content-wrapper {
+        flex-direction: row; // Side-by-side layout
+      }
 
-    app-chat-history-sidebar {
-      width: 260px;
-      flex: 0 0 260px;
-      border-right: 1px solid var(--border-color);
-      display: flex !important;
-    }
+      app-chat-history {
+        width: 260px;
+        flex: 0 0 260px;
+        border-right: 1px solid var(--db-border-color);
+        display: flex !important;
 
-    .messages-view app-chat-input {
-      max-width: 800px;
-      margin: 0 auto;
-      width: 100%;
+        &.sidebar-closed {
+          display: none !important;
+        }
+      }
+
+      .messages-view app-chat-input {
+        max-width: 800px;
+        margin: 0 auto;
+        width: 100%;
+
+        ::ng-deep .chat-input {
+          padding: 12px;
+
+          input {
+            padding: 14px 60px 14px 20px; // Extra right padding to make room for the button
+            font-size: 15px;
+          }
+
+          button {
+            right: 15px;
+          }
+        }
+      }
     }
   }
 }
@@ -121,7 +263,7 @@
   overflow: hidden;
   position: relative;
 
-  app-chat-history-sidebar {
+  app-chat-history {
     height: 100%;
     width: 100%;
     display: flex;
@@ -190,8 +332,127 @@
     width: 90%;
     height: calc(100% - 40px);
   }
+}
+
+/* --- PROFILE MENU STYLES --- */
+::ng-deep .profile-menu.mat-mdc-menu-panel {
+  min-width: 180px !important;
+  max-width: 200px !important;
+  border-radius: 16px !important;
+  overflow: hidden;
+  margin-top: 8px;
+  box-shadow: 0 10px 25px rgba(var(--black-rgb), 0.1) !important;
+  background-color: var(--db-bg-color) !important;
+
+  .mat-mdc-menu-content {
+    padding: 0 !important;
+  }
+}
+
+.menu-profile-header {
+  padding: 12px 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: var(--db-bg-color);
+
+  .avatar-container {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: rgba(var(--db-primary-rgb), 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .menu-avatar {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .menu-avatar-icon {
+      font-size: 40px;
+      width: 40px;
+      height: 40px;
+      color: var(--db-text-secondary);
+    }
+  }
+
+  .user-info {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .name-badge {
+      display: flex;
+      align-items: center;
+      // gap: 8px;
+      // margin-bottom: 4px;
+
+      .user-name {
+        font-weight: 600;
+        font-size: 0.9rem;
+        color: var(--db-text-primary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .pro-badge {
+        background-color: #e6f7ef;
+        color: #10b981;
+        font-size: 0.65rem;
+        font-weight: 700;
+        padding: 2px 8px;
+        border-radius: 4px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+    }
+
+    .user-email {
+      color: var(--db-text-secondary);
+      font-weight: 300;
+      font-size: 0.75rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+::ng-deep .profile-menu {
+  .mat-mdc-menu-item {
+    height: 40px !important;
+    padding: 0 16px !important;
+
+    .mdc-list-item__label {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 0.9rem;
+      color: var(--db-text-primary);
+    }
+
+    mat-icon {
+      margin: 0 !important;
+      color: var(--db-text-secondary);
+      font-size: 22px;
+      width: 22px;
+      height: 22px;
+    }
+
+    &:hover {
+      background-color: rgba(var(--db-primary-rgb), 0.04) !important;
+    }
+  }
 
-  .chat-window.fullscreen app-chat-history-sidebar {
-    display: none !important; // hide sidebar on tiny screens
+  mat-divider {
+    border-top-color: var(--db-border-color) !important;
+    opacity: 0.6;
+    margin: 0 !important;
   }
 }

package/src/lib/app/login/login-form.component.scss

@@ -22,8 +22,8 @@
       text-align: center;
       margin: 0 0 10px 0;
       font-size: 1.5em;
-      color: var(--text-color);
-      font-family: var(--font-family);
+      color: var(--db-text-primary);
+      font-family: var(--db-font);
       font-weight: 600;
     }
 
@@ -36,17 +36,17 @@
       .login-input {
         padding: 10px 12px;
         border-radius: 12px !important;
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--db-border-color);
         font-size: 0.9em;
-        background: var(--background-color);
-        color: var(--text-color);
+        background: var(--db-bg-color);
+        color: var(--db-text-primary);
         width: 100%; // Full width
         box-sizing: border-box; // Ensure padding doesn’t increase total width
 
         &:focus {
           outline: none;
-          background-color: var(--background-color);
-          border-color: var(--primary-color);
+          background-color: var(--db-bg-color);
+          border-color: var(--db-primary);
         }
       }
 
@@ -71,7 +71,7 @@
           align-items: center;
           justify-content: center;
           padding: 4px;
-          color: var(--text-color);
+          color: var(--db-text-primary);
           opacity: 0.6;
           transition: opacity 0.2s;
 
@@ -108,8 +108,8 @@
           height: 14px;
           cursor: pointer;
           margin: 0;
-          background-color: var(--background-color);
-          border: 1px solid var(--secondary-text-color);
+          background-color: var(--db-bg-color);
+          border: 1px solid var(--db-text-secondary);
           border-radius: 4px;
           display: flex;
           align-items: center;
@@ -117,26 +117,26 @@
           transition: all 0.2s;
 
           &:checked {
-            background-color: var(--primary-color);
-            border-color: var(--primary-color);
+            background-color: var(--db-primary);
+            border-color: var(--db-primary);
 
             &::after {
               content: '✓';
               font-size: 12px;
-              color: var(--white);
+              color: var(--db-bg-color);
               font-weight: bold;
             }
           }
 
           &:hover {
-            border-color: var(--primary-color);
+            border-color: var(--db-primary);
           }
         }
 
         .remember-me-text {
           font-size: 0.8em;
-          color: var(--text-color);
-          font-family: var(--font-family);
+          color: var(--db-text-primary);
+          font-family: var(--db-font);
           font-weight: 300;
         }
       }
@@ -159,8 +159,8 @@
 
     .input-label {
       font-size: 0.85em;
-      color: var(--text-color);
-      font-family: var(--font-family);
+      color: var(--db-text-primary);
+      font-family: var(--db-font);
       font-weight: 500;
       margin-left: 2px;
     }
@@ -170,7 +170,7 @@
       color: var(--red);
       margin-top: 2px;
       margin-left: 2px;
-      font-family: var(--font-family);
+      font-family: var(--db-font);
     }
   }
 
@@ -183,9 +183,9 @@
     transition: all 0.2s ease;
 
     &.primary {
-      background: var(--primary-color);
-      color: var(--white);
-      border: 1px solid var(--primary-color);
+      background: var(--db-primary);
+      color: var(--db-bg-color);
+      border: 1px solid var(--db-primary);
 
       &:hover {
         opacity: 0.9;
@@ -199,8 +199,8 @@
 
     &.secondary {
       background: transparent;
-      color: var(--text-color);
-      border: 1px solid var(--primary-color);
+      color: var(--db-text-primary);
+      border: 1px solid var(--db-primary);
 
       &:hover {
         opacity: 0.9;

package/src/lib/app/personalization/personalization-dialog.component.scss

@@ -7,11 +7,12 @@
   height: 90vh;
   min-height: 500px;
   max-width: none;
-  background: var(--background-color);
-  color: var(--text-color);
+  background: var(--db-bg-color);
+  color: var(--db-text-primary);
+  font-family: var(--db-font, 'Roboto', 'Helvetica Neue', sans-serif);
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: var(--border-shadow-color);
+  box-shadow: var(--db-border-shadow);
 
   .header {
     flex: 0 0 auto;
@@ -19,8 +20,8 @@
     justify-content: space-between;
     align-items: center;
     padding: 12px 20px;
-    border-bottom: 1px solid var(--border-color);
-    background: var(--background-color);
+    border-bottom: 1px solid var(--db-border-color);
+    background: var(--db-bg-color);
 
     .title-section {
       display: flex;
@@ -28,7 +29,7 @@
       gap: 10px;
 
       .header-icon {
-        color: var(--secondary-text-color);
+        color: var(--db-text-secondary);
         font-size: 20px;
         width: 20px;
         height: 20px;
@@ -38,7 +39,7 @@
         margin: 0;
         font-size: 0.95rem;
         font-weight: 500;
-        color: var(--secondary-text-color);
+        color: var(--db-text-secondary);
       }
     }
   }
@@ -54,7 +55,7 @@
   .sidebar {
     width: 240px;
     background: rgba(var(--black-rgb), 0.02);
-    border-right: 1px solid var(--border-color);
+    border-right: 1px solid var(--db-border-color);
     padding: 16px 8px;
     display: flex;
     flex-direction: column;
@@ -84,7 +85,7 @@
       font-size: 0.75rem;
       font-weight: 600;
       text-transform: uppercase;
-      color: var(--secondary-text-color);
+      color: var(--db-text-secondary);
       letter-spacing: 0.5px;
     }
 
@@ -96,13 +97,13 @@
       border-radius: 6px;
       cursor: pointer;
       transition: all 0.2s ease;
-      color: var(--text-color);
+      color: var(--db-text-primary);
 
       mat-icon {
         font-size: 18px;
         width: 18px;
         height: 18px;
-        color: var(--secondary-text-color);
+        color: var(--db-text-secondary);
       }
 
       span {
@@ -115,12 +116,12 @@
       }
 
       &.active {
-        background: rgba(var(--primary-color-rgb), 0.1);
+        background: rgba(var(--db-primary-rgb), 0.1);
         font-weight: 500;
-        color: var(--primary-color);
+        color: var(--db-primary);
 
         mat-icon {
-          color: var(--primary-color);
+          color: var(--db-primary);
         }
       }
     }
@@ -150,7 +151,6 @@
       }
     }
   }
-
 }
 
 .full-width {
@@ -172,6 +172,6 @@
 // Dark mode overrides
 :host-context(.dark-theme) {
   .personalization-container .sidebar {
-    background: var(--background-color);
+    background: var(--db-bg-color);
   }
-}
+}