@stack-spot/ai-chat-widget 1.5.2 → 1.7.0-beta.0

package/src/views/MessageInput/styled.ts

@@ -88,12 +88,12 @@ export const MessageInputBox = styled.div`
     display: flex;
     position: relative;
     flex-direction: row;
-    gap: 4px;
+    gap: 8px;
     align-items: end;
     border-radius: 4px;
     border: 1px solid ${theme.color.light[500]};
     background-color: ${theme.color.light[300]};
-    padding: 8px 10px;
+    padding: 10px 8px;
     transition: border-color 0.3s, background-color 0.3s;
 
     &.focused {
@@ -150,12 +150,16 @@ export const MessageInputBox = styled.div`
         svg {
           transform: rotate(180deg);
         }
-      }
-
-      &.agent img {
-        width: 80%;
-        height: 80%;
-        border-radius: 50%;
+      } 
+
+      &.agent {
+        border-radius: 50%; 
+        opacity: 1;
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
       }
     }
 
@@ -191,6 +195,45 @@ export const MessageInputBox = styled.div`
       width: 24px;
       height: 24px;
     }
+
+    .group-agent {
+      display: flex;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;     
+      
+        button  {
+          margin-right: -0.5rem;
+          margin-left: -0.5rem;
+          border-radius: 50%;
+          background-color: ${theme.color.light[300]};
+          border: 1px solid ${theme.color.light[600]};
+          display: flex;
+
+          &.agent-selected:hover:before  {
+            content: '';
+            width: 22px;
+            height: 22px;
+            position: absolute;
+            background-color: ${theme.color.light[300]};
+            border-radius: 100%;
+            opacity: 0.4;
+          }
+
+          .icon-remove {
+            display: none;
+            fill: ${theme.color.light.contrastText};
+            position: absolute;          
+          }   
+
+          &:hover .icon-remove {
+            display: flex;            
+          }
+
+          .image {
+            margin: 1px;        
+          }
+      }
+    }
   }
 
   textarea {
@@ -206,140 +249,4 @@ export const MessageInputBox = styled.div`
       box-shadow: none;
     }
   }
-
-  .quick-command-selector {
-    position: absolute;
-    border-radius: 4px;
-    border: 1px solid ${theme.color.light[600]};
-    background-color: ${theme.color.light[500]};
-    box-shadow: 0px 2px 16px 0px #0000005C;
-    display: flex;
-    flex-direction: column;
-    width: 480px;
-    bottom: 55px;
-
-    .loading, .error {
-      padding-bottom: 26px;
-      p {
-        width: 200px;
-        text-align: center;
-        line-height: 20px;
-      }
-    }
-
-    .empty {
-      padding-bottom: 26px;
-      width: 200px;
-      text-align: center;
-      line-height: 20px;
-      margin: auto;
-    }
-
-    header {
-      display: flex;
-      flex-direction: row;
-      gap: 8px;
-      align-items: center;
-      padding: 8px;
-      font-family: 'San Francisco';
-      font-weight: 500;
-      font-size: 11px;
-    }
-
-    .body {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-
-    ul.tabs {
-      display: flex;
-      flex-direction: column;
-
-      li {
-        display: flex;
-        flex-direction: column;
-      }
-
-      button {
-        box-sizing: border-box;
-        color: ${theme.color.light[700]};
-        text-align: left;
-        padding: 10px;
-        font-weight: 600;
-        font-size: 12px;
-        transition: background-color 0.3s;
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
-        background-color: transparent;
-        border: none;
-        cursor: pointer;
-        outline: none;
-
-        &:hover, &.active, &:focus {
-          background-color: ${theme.color.light[600]};
-        }
-
-        &.active {
-          border-left: 1px solid ${theme.color.light.contrastText};
-          color: ${theme.color.light.contrastText};
-        }
-      }
-    }
-
-    ul.command-list {
-      align-self: stretch;
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      overflow-y: auto;
-      flex: 1;
-      max-height: 170px;
-
-      li {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-        padding: 8px;
-        border-radius: 4px;
-
-        &:hover, &.focus {
-          background-color: ${theme.color.light[600]};
-        }
-
-        button.qc {
-          flex: 1;
-          border: none;
-          text-align: left;
-          background-color: transparent;
-          text-align: left;
-          outline: none;
-          overflow: hidden;
-          cursor: pointer;
-          
-          .qc-title {
-            font-size: 11px;
-            margin: 0 0 4px 0;
-            color: ${theme.color.light.contrastText};
-            text-transform: uppercase;
-            text-overflow: ellipsis;
-            overflow: hidden;
-          }
-
-          .qc-description {
-            color: ${theme.color.light[700]};
-            font-size: 12px;
-            margin: 0;
-          }
-        }
-      }
-    }
-  }
 `