@adzen/doohbot 1.0.6 → 1.0.8

package/src/lib/app/chat/components/{chat-history-sidebar/chat-history-sidebar.component.scss → chat-history/chat-history.component.scss}

@@ -10,7 +10,7 @@
   display: none;
   height: 100%;
   width: 100%;
-  background: var(--background-color);
+  background: var(--db-bg-color);
   flex-direction: column;
   overflow: hidden;
   /* Ensure content stays within borders */
@@ -25,15 +25,15 @@
   justify-content: space-between;
   align-items: center;
   padding: 20px;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--db-border-color);
 }
 
 .sidebar-header h3 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: var(--text-color);
-  font-family: var(--font-family);
+  color: var(--db-text-primary);
+  font-family: var(--db-font);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -72,11 +72,11 @@
 }
 
 .close-btn:hover {
-  background: var(--bot-message-color);
+  background: var(--db-bg-bot-msg);
 }
 
 .close-btn mat-icon {
-  color: var(--text-color);
+  color: var(--db-text-primary);
   font-size: 20px;
   width: 20px;
   height: 20px;
@@ -93,10 +93,12 @@
   border-radius: 50%;
   transition: background 0.2s;
   margin-right: 8px;
+  position: relative;
+  z-index: 10;
 }
 
 .refresh-btn:hover {
-  background: var(--bot-message-color);
+  background: var(--db-bg-bot-msg);
 }
 
 .refresh-btn:last-child {
@@ -104,7 +106,7 @@
 }
 
 .refresh-btn mat-icon {
-  color: var(--text-color);
+  color: var(--db-text-primary);
   font-size: 20px;
   width: 20px;
   height: 20px;
@@ -124,7 +126,7 @@
 }
 
 .clear-all-btn:hover {
-  background: var(--bot-message-color);
+  background: var(--db-bg-bot-msg);
 }
 
 .clear-all-btn mat-icon {
@@ -151,7 +153,7 @@
   font-size: 64px;
   width: 64px;
   height: 64px;
-  color: var(--secondary-text-color);
+  color: var(--db-text-secondary);
   margin-bottom: 16px;
 }
 
@@ -159,14 +161,14 @@
   margin: 0 0 8px 0;
   font-size: 16px;
   font-weight: 500;
-  color: var(--text-color);
-  font-family: var(--font-family);
+  color: var(--db-text-primary);
+  font-family: var(--db-font);
 }
 
 .empty-state span {
   font-size: 14px;
-  color: var(--secondary-text-color);
-  font-family: var(--font-family);
+  color: var(--db-text-secondary);
+  font-family: var(--db-font);
 }
 
 .session-group {
@@ -179,8 +181,8 @@
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: var(--secondary-text-color);
-  font-family: var(--font-family);
+  color: var(--db-text-secondary);
+  font-family: var(--db-font);
 }
 
 .session-list {
@@ -199,7 +201,17 @@
 }
 
 .session-item:hover {
-  background: var(--bot-message-color);
+  background: var(--db-bg-bot-msg);
+}
+
+.session-item.active {
+  background: rgba(var(--db-primary-rgb), 0.1);
+  border-left: 3px solid var(--db-primary);
+
+  .session-title {
+    color: var(--db-primary);
+    font-weight: 600;
+  }
 }
 
 .session-content {
@@ -210,8 +222,8 @@
 .session-title {
   font-size: 14px;
   font-weight: 500;
-  color: var(--text-color);
-  font-family: var(--font-family);
+  color: var(--db-text-primary);
+  font-family: var(--db-font);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -220,8 +232,8 @@
 
 .session-time {
   font-size: 12px;
-  color: var(--secondary-text-color);
-  font-family: var(--font-family);
+  color: var(--db-text-secondary);
+  font-family: var(--db-font);
 }
 
 .session-actions {
@@ -249,7 +261,7 @@
 }
 
 .edit-btn:hover {
-  background: var(--bot-message-color);
+  background: var(--db-bg-bot-msg);
 }
 
 .delete-btn:hover {
@@ -258,14 +270,14 @@
 
 .edit-btn mat-icon,
 .delete-btn mat-icon {
-  color: var(--secondary-text-color);
+  color: var(--db-text-secondary);
   font-size: 18px;
   width: 18px;
   height: 18px;
 }
 
 .edit-btn:hover mat-icon {
-  color: var(--primary-color);
+  color: var(--db-primary);
 }
 
 .delete-btn:hover mat-icon {
@@ -296,7 +308,7 @@
 /* Firefox */
 // .sidebar-content {
 //   scrollbar-width: thin;
-//   scrollbar-color: var(--primary-color) var(--background-color);
+//   scrollbar-color: var(--db-primary) var(--db-bg-color);
 // }
 
 .loader-container {
@@ -305,7 +317,7 @@
   align-items: center;
   justify-content: center;
   padding: 40px 20px;
-  color: var(--secondary-text-color);
+  color: var(--db-text-secondary);
 
   p {
     margin-top: 15px;
@@ -317,9 +329,9 @@
 .loader {
   width: 32px;
   height: 32px;
-  border: 3px solid rgba(var(--border-color-rgb), 0.1);
+  border: 3px solid rgba(var(--db-border-color-rgb), 0.1);
   border-radius: 50%;
-  border-top-color: var(--primary-color);
+  border-top-color: var(--db-primary);
   animation: spin 1s ease-in-out infinite;
 }
 
@@ -335,7 +347,7 @@
   align-items: center;
   justify-content: center;
   padding: 20px;
-  color: var(--secondary-text-color);
+  color: var(--db-text-secondary);
 
   p {
     margin-top: 10px;
@@ -347,18 +359,18 @@
 .loader-small {
   width: 24px;
   height: 24px;
-  border: 3px solid rgba(var(--border-color-rgb), 0.1);
+  border: 3px solid rgba(var(--db-border-color-rgb), 0.1);
   border-radius: 50%;
-  border-top-color: var(--primary-color);
+  border-top-color: var(--db-primary);
   animation: spin 1s ease-in-out infinite;
 }
 
 .loader-tiny {
   width: 14px;
   height: 14px;
-  border: 2px solid rgba(var(--border-color-rgb), 0.1);
+  border: 2px solid rgba(var(--db-border-color-rgb), 0.1);
   border-radius: 50%;
-  border-top-color: var(--primary-color);
+  border-top-color: var(--db-primary);
   animation: spin 1s ease-in-out infinite;
 }
 
@@ -366,4 +378,4 @@
 .delete-btn:disabled {
   cursor: not-allowed;
   opacity: 0.6;
-}
+}

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

@@ -7,53 +7,76 @@
 .chat-input {
   display: flex;
   padding: 10px;
-  border-top: 1px solid var(--border-top-color);
-  background-color: var(--background-color);
+  background-color: var(--db-bg-color);
 }
 
 .chat-input .input-wrapper {
   position: relative;
   flex-grow: 1;
+  display: flex;
+  align-items: center;
+  background-color: var(--db-bg-color);
+  border: 1px solid var(--db-border-color); // Light gray border from image
+  border-radius: 16px; // Pill shape
+  padding: 4px 4px 4px 16px;
 }
 
 .chat-input input {
-  width: 100%;
-  background-color: var(--background-color);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  padding: 10px 50px 10px 15px;
-  /* Extra right padding to make room for the button */
+  flex-grow: 1;
+  background-color: transparent;
+  border: none;
   font-size: 14px;
-  color: var(--text-color);
-  caret-color: var(--hint-text-color);
-  font-family: var(--font-family);
+  color: var(--db-text-primary);
+  caret-color: var(--db-text-hint);
+  font-family: var(--db-font);
   box-sizing: border-box;
+  padding: 8px 0;
 
   &::placeholder {
-    color: var(--hint-text-color);
+    color: var(--db-text-hint); // Subdued placeholder color
   }
 
   &:focus {
-    border-color: var(--primary-color);
     outline: none;
   }
 }
 
 .chat-input button {
-  position: absolute;
-  right: 5px;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: transparent;
-  color: var(--primary-color);
+  width: 28px;
+  height: 28px;
+  background-color: var(--db-primary);
+  color: var(--db-bg-color);
   border: none;
+  border-radius: 50%;
   cursor: pointer;
+  margin-right: 6px;
   display: flex;
   justify-content: center;
   align-items: center;
-  // z-index: 2;
+
+  transition:
+    transform 0.2s ease,
+    background-color 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--db-primary);
+    transform: rotate(15deg);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    display: block;
+    line-height: 1; // prevents vertical misalignment
+  }
 
   .stop-icon {
     color: var(--red);
   }
-}
+}