feat: support assistant frontend (#2139)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/(commonLayout)/list.module.css

@@ -10,19 +10,20 @@
 .listItem.selectable {
   @apply relative bg-gray-50 outline outline-1 outline-gray-200 -outline-offset-1 shadow-none hover:bg-none hover:shadow-none hover:outline-primary-200 transition-colors;
 }
+
 .listItem.selectable * {
   @apply relative;
 }
+
 .listItem.selectable::before {
   content: "";
   @apply absolute top-0 left-0 block w-full h-full rounded-lg pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out hover:opacity-100;
-  background: linear-gradient(
-      0deg,
+  background: linear-gradient(0deg,
       rgba(235, 245, 255, 0.5),
-      rgba(235, 245, 255, 0.5)
-    ),
+      rgba(235, 245, 255, 0.5)),
     #ffffff;
 }
+
 .listItem.selectable:hover::before {
   @apply opacity-100;
 }
@@ -30,6 +31,7 @@
 .listItem.selected {
   @apply border-primary-600 hover:border-primary-600 border-2;
 }
+
 .listItem.selected::before {
   @apply opacity-100;
 }
@@ -37,9 +39,11 @@
 .appIcon {
   @apply flex items-center justify-center w-8 h-8 bg-pink-100 rounded-lg grow-0 shrink-0;
 }
+
 .appIcon.medium {
   @apply w-9 h-9;
 }
+
 .appIcon.large {
   @apply w-10 h-10;
 }
@@ -47,34 +51,48 @@
 .newItemIcon {
   @apply flex items-center justify-center w-8 h-8 transition-colors duration-200 ease-in-out border border-gray-200 rounded-lg hover:bg-white grow-0 shrink-0;
 }
+
 .listItem:hover .newItemIcon {
   @apply bg-gray-50 border-primary-100;
 }
+
 .newItemCard .newItemIcon {
   @apply bg-gray-100;
 }
+
 .newItemCard:hover .newItemIcon {
   @apply bg-white;
 }
+
 .selectable .newItemIcon {
   @apply bg-gray-50;
 }
+
 .selectable:hover .newItemIcon {
   @apply bg-primary-50;
 }
+
 .newItemIconImage {
   @apply grow-0 shrink-0 block w-4 h-4 bg-center bg-contain transition-colors duration-200 ease-in-out;
   color: #1f2a37;
 }
+
 .listItem:hover .newIconImage {
   @apply text-primary-600;
 }
+
 .newItemIconAdd {
   background-image: url("./apps/assets/add.svg");
 }
+
 .newItemIconChat {
-  background-image: url("./apps/assets/chat.svg");
+  background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot.svg");
 }
+
+.selected .newItemIconChat {
+  background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot-Active.svg");
+}
+
 .newItemIconComplete {
   background-image: url("./apps/assets/completion.svg");
 }
@@ -94,14 +112,17 @@
 .actionIconWrapper {
   @apply hidden h-8 w-8 p-2 rounded-md border-none hover:bg-gray-100 !important;
 }
+
 .listItem:hover .actionIconWrapper {
   @apply !inline-flex;
 }
+
 .deleteDatasetIcon {
   @apply hidden grow-0 shrink-0 basis-8 w-8 h-8 rounded-lg transition-colors duration-200 ease-in-out bg-white border border-gray-200 hover:bg-gray-100 bg-center bg-no-repeat;
   background-size: 16px;
   background-image: url('~@/assets/delete.svg');
 }
+
 .listItem:hover .deleteDatasetIcon {
   @apply block;
 }
@@ -110,9 +131,14 @@
   @apply mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2;
 }
 
+.listItemDescription.noClip {
+  @apply line-clamp-none;
+}
+
 .listItemFooter {
   @apply flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px];
 }
+
 .listItemFooter.datasetCardFooter {
   @apply flex items-center gap-4 text-xs text-gray-500;
 }
@@ -124,18 +150,23 @@
 .listItemFooterIcon {
   @apply block w-3 h-3 bg-center bg-contain;
 }
+
 .solidChatIcon {
   background-image: url("./apps/assets/chat-solid.svg");
 }
+
 .solidCompletionIcon {
   background-image: url("./apps/assets/completion-solid.svg");
 }
+
 .docIcon {
   background-image: url("./datasets/assets/doc.svg");
 }
+
 .textIcon {
   background-image: url("./datasets/assets/text.svg");
 }
+
 .applicationIcon {
   background-image: url("./datasets/assets/application.svg");
 }
@@ -143,6 +174,7 @@
 .newItemCardHeading {
   @apply transition-colors duration-200 ease-in-out;
 }
+
 .listItem:hover .newItemCardHeading {
   @apply text-primary-600;
 }
@@ -150,6 +182,7 @@
 .listItemLink {
   @apply inline-flex items-center gap-1 text-xs text-gray-400 transition-colors duration-200 ease-in-out;
 }
+
 .listItem:hover .listItemLink {
   @apply text-primary-600;
 }
@@ -162,6 +195,7 @@
 .linkIcon.grayLinkIcon {
   background-image: url("./apps/assets/link-gray.svg");
 }
+
 .listItem:hover .grayLinkIcon {
   background-image: url("./apps/assets/link.svg");
 }
@@ -191,6 +225,7 @@
 .newItemCaption {
   @apply inline-flex items-center mb-2 text-sm font-medium;
 }
+
 /* #endregion new app dialog */
 
 .unavailable {
@@ -199,4 +234,4 @@
 
 .listItem:hover .unavailable {
   @apply opacity-100;
-}
+}