add style on conversation list

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

my-workspace/projects/sae-lib/src/styles/_layout_demo.scss

@@ -52,6 +52,10 @@
   #newChatBar {
     margin-top: 24px;
     margin-bottom: 16px;
+
+    .is-expanded-left & .column-conversation {
+      width: variables.$large-column-panel;
+    }
   }
 
   .new-chat-title {
@@ -70,6 +74,15 @@
   .new-button {
     background: linear-gradient(70deg, #07397C -37.98%, #1767AD 17.98%, #255B8E 53.85%);
     @extend .nav-button !optional;
+
+    .label {
+      display: none;
+
+      .is-expanded-left & {
+        display: block;
+        width: 100% !important;
+      }
+    }
   }
 
   .admin-actions {
@@ -79,6 +92,12 @@
 
   .column-conversation {
     padding: 0 12px;
+    width: 90px;
+
+    .is-expanded-left & {
+      width: variables.$large-column-panel;
+
+    }
 
     .conversation-container {
       padding-top: 12px;
@@ -94,26 +113,109 @@
     }
 
     .conversation-item {
-      padding: 8px;
+      padding: 11px 32px;
       cursor: pointer;
+      border-radius: 8px;
+      color: #6D717C;
 
       &:hover {
-        background: #E5E5E5;
+        background: #3B87CC1A;
       }
 
       &.is-active {
-        background: #E5E5E5;
+        background: rgba(#3B87CC1A, 10%);
         font-weight: 600;
+
+        .active-peak {
+          position: relative;
+          right: calc(-100% - 32px);
+          top: -35px;
+          visibility: visible;
         }
       }
 
+      .active-peak {
+        visibility: hidden;
+      }
+
+      .name {
+        color: #1E1F22;
+        font-size: 14px;
+        font-weight: 600;
+        margin-bottom: 4px;
+        display: block;
+      }
+
+      .description {
+        color: #6D717C;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        margin-right: 4px;
+      }
+
+      .date {
+        color: rgba(#5F5F5F99, 60%);
+        float: right;
+      }
+
+    }
+
+  }
+
+
+  .chatbot-container-box {
+    margin-right: 100px;
+  }
+
+  .conversation-title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    padding: 16px;
+    text-align: left;
   }
 
   .chat {
+
     background: variables.$bg-color-chat;
     text-align: center;
     padding: variables.$spacing-1;
 
+    border-radius: 10px;
+
+
+    &.column {
+      border-radius: 10px;
+    }
+
+
+    .panel-more {
+      background: variables.$bg-color-chat;
+      padding: variables.$spacing-1;
+
+      width: 0;
+      display: none;
+
+      .is-expanded-right & {
+        width: variables.$large-column-panel !important;
+        margin-left: 10px;
+
+      }
+
+    }
+
+
+    .conversation-messages-container {
+      min-height: 600px;
+      width: 800px;
+      margin: 0 auto;
+      padding-top: 10px;
+    }
+
+    .main-conversation-container {
+      margin-right: 16px;
+      padding-top: 88px;
+    }
 
     .app-theme-light & {
 
@@ -199,18 +301,6 @@
     }
   }
 
-  .panel-more {
-    background: variables.$bg-color-chat;
-    padding: variables.$spacing-1;
-
-    width: 0;
-    display: none;
-
-    &.expanded {
-      width: 300px !important;
-      display: block;
-    }
-  }
 }
 
 

my-workspace/projects/sae-lib/src/styles/_variables.scss

@@ -63,7 +63,10 @@ $csc-textarea-color: #1B1D27;
 $csc-filters-box-color: #E3EAF1;
 
 $bot-bubble: $csc-light-yellow-color;
+// sizes
 
+$large-column-panel: 300px;
+$small-column-panel: 50px;
 // spacing --------------------------
 
 $spacing-0: 2px;