Merge branch 'master' of https://git.zyuas.com/LLM/chat

* 'master' of https://git.zyuas.com/LLM/chat:
  no message
  no message

# Conflicts:
#	app/components/chat.module.scss

app/components/chat.module.scss

@@ -17,18 +17,18 @@
   background-size: cover;
   background-position: center;
   background-color: var(--white);
-
+  
   .attach-image-mask {
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: all ease 0.2s;
   }
-
+  
   .attach-image-mask:hover {
     opacity: 1;
   }
-
+  
   .delete-image {
     width: 24px;
     height: 24px;
@@ -45,7 +45,7 @@
 .chat-input-actions {
   display: flex;
   flex-wrap: wrap;
-
+  
   .chat-input-action {
     display: inline-flex;
     border-radius: 20px;
@@ -61,11 +61,11 @@
     height: 16px;
     width: var(--icon-width);
     overflow: hidden;
-
+    
     &:not(:last-child) {
       margin-right: 5px;
     }
-
+    
     .text {
       white-space: nowrap;
       padding-left: 5px;
@@ -74,19 +74,19 @@
       transition: all ease 0.3s;
       pointer-events: none;
     }
-
+    
     &:hover {
       --delay: 0.5s;
       width: var(--full-width);
       transition-delay: var(--delay);
-
+      
       .text {
         transition-delay: var(--delay);
         opacity: 1;
         transform: translate(0);
       }
     }
-
+    
     .text,
     .icon {
       display: flex;
@@ -103,7 +103,7 @@
   display: flex;
   justify-content: center;
   width: calc(100% - 40px);
-
+  
   .prompt-toast-inner {
     display: flex;
     justify-content: center;
@@ -111,14 +111,14 @@
     font-size: 12px;
     background-color: var(--white);
     color: var(--black);
-
+    
     border: var(--border-in-light);
     box-shadow: var(--card-shadow);
     padding: 10px 20px;
     border-radius: 100px;
-
+    
     animation: slide-in-from-top ease 0.3s;
-
+    
     .prompt-toast-content {
       margin-left: 10px;
     }
@@ -132,7 +132,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-
+  
   .section-title-action {
     display: flex;
     align-items: center;
@@ -151,46 +151,46 @@
     border-radius: 4px;
     margin-top: 4px;
     margin-bottom: 4px;
-
+    
     &:hover {
       opacity: 1;
       background-color: rgba(0, 0, 0, 0.05);
     }
   }
-
+  
   .context-prompt-row {
     display: flex;
     justify-content: center;
     width: 100%;
-
+    
     &:hover {
       .context-drag {
         opacity: 1;
       }
     }
-
+    
     .context-drag {
       display: flex;
       align-items: center;
       opacity: 0.5;
       transition: all ease 0.3s;
     }
-
+    
     .context-role {
       margin-right: 10px;
     }
-
+    
     .context-content {
       flex: 1;
       max-width: 100%;
       text-align: left;
     }
-
+    
     .context-delete-button {
       margin-left: 10px;
     }
   }
-
+  
   .context-prompt-button {
     flex: 1;
   }
@@ -198,7 +198,7 @@
 
 .memory-prompt {
   margin: 20px 0;
-
+  
   .memory-prompt-content {
     background-color: var(--white);
     color: var(--black);
@@ -213,62 +213,62 @@
 .clear-context {
   margin: 20px 0 0 0;
   padding: 4px 0;
-
+  
   border-top: var(--border-in-light);
   border-bottom: var(--border-in-light);
   box-shadow: var(--card-shadow) inset;
-
+  
   display: flex;
   justify-content: center;
   align-items: center;
-
+  
   color: var(--black);
   transition: all ease 0.3s;
   cursor: pointer;
   overflow: hidden;
   position: relative;
   font-size: 12px;
-
+  
   animation: slide-in ease 0.3s;
-
+  
   $linear: linear-gradient(to right,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 1),
-      rgba(0, 0, 0, 0));
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1),
+          rgba(0, 0, 0, 0));
   mask-image: $linear;
-
+  
   @mixin show {
     transform: translateY(0);
     position: relative;
     transition: all ease 0.3s;
     opacity: 1;
   }
-
+  
   @mixin hide {
     transform: translateY(-50%);
     position: absolute;
     transition: all ease 0.1s;
     opacity: 0;
   }
-
+  
   &-tips {
     @include show;
     opacity: 0.5;
   }
-
+  
   &-revert-btn {
     color: var(--primary);
     @include hide;
   }
-
+  
   &:hover {
     opacity: 1;
     border-color: var(--primary);
-
+    
     .clear-context-tips {
       @include hide;
     }
-
+    
     .clear-context-revert-btn {
       @include show;
     }
@@ -282,6 +282,18 @@
   height: 100%;
 }
 
+/* 透明遮罩
+.chat-body::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+*/
+
 .chat-body {
   flex: 1;
   overflow: auto;
@@ -298,7 +310,7 @@
 
 .chat-body-main-title {
   cursor: pointer;
-
+  
   &:hover {
     text-decoration: none;
   }
@@ -313,7 +325,7 @@
 .chat-message {
   display: flex;
   flex-direction: row;
-
+  
   &:last-child {
     animation: slide-in ease 0.3s;
   }
@@ -322,7 +334,7 @@
 .chat-message-user {
   display: flex;
   flex-direction: row-reverse;
-
+  
   .chat-message-header {
     flex-direction: row-reverse;
   }
@@ -332,7 +344,7 @@
   margin-top: 20px;
   display: flex;
   align-items: center;
-
+  
   .chat-message-actions {
     display: flex;
     box-sizing: border-box;
@@ -344,7 +356,7 @@
     margin: 0 10px;
     opacity: 0;
     pointer-events: none;
-
+    
     .chat-input-actions {
       display: flex;
       flex-wrap: nowrap;
@@ -357,12 +369,12 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-
+  
   &:hover {
     .chat-message-edit {
       opacity: 0.9;
     }
-
+    
     .chat-message-actions {
       opacity: 1;
       pointer-events: all;
@@ -371,13 +383,13 @@
   }
 }
 
-.chat-message-user>.chat-message-container {
+.chat-message-user > .chat-message-container {
   align-items: flex-end;
 }
 
 .chat-message-avatar {
   position: relative;
-
+  
   .chat-message-edit {
     position: absolute;
     height: 100%;
@@ -388,12 +400,12 @@
     justify-content: center;
     opacity: 0;
     transition: all ease 0.3s;
-
+    
     button {
       padding: 7px;
     }
   }
-
+  
   /* Specific styles for iOS devices */
   @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
     @supports (-webkit-touch-callout: none) {
@@ -457,12 +469,12 @@
 
 @media only screen and (max-width: 600px) {
   $calc-image-width: calc(100vw / 3 * 2 / var(--image-count));
-
+  
   .chat-message-item-image-multi {
     width: $calc-image-width;
     height: $calc-image-width;
   }
-
+  
   .chat-message-item-image {
     max-width: calc(100vw / 3 * 2);
   }
@@ -471,14 +483,14 @@
 @media screen and (min-width: 600px) {
   $max-image-width: calc(calc(1200px - var(--sidebar-width)) / 3 * 2 / var(--image-count));
   $image-width: calc(calc(var(--window-width) - var(--sidebar-width)) / 3 * 2 / var(--image-count));
-
+  
   .chat-message-item-image-multi {
     width: $image-width;
     height: $image-width;
     max-width: $max-image-width;
     max-height: $max-image-width;
   }
-
+  
   .chat-message-item-image {
     max-width: calc(calc(1200px - var(--sidebar-width)) / 3 * 2);
   }
@@ -498,9 +510,9 @@
   z-index: 1;
 }
 
-.chat-message-user>.chat-message-container>.chat-message-item {
+.chat-message-user > .chat-message-container > .chat-message-item {
   background-color: var(--second);
-
+  
   &:hover {
     min-width: 0;
   }
@@ -515,7 +527,7 @@
   flex-direction: column;
   border-top: var(--border-in-light);
   box-shadow: var(--card-shadow);
-
+  
   .chat-input-actions {
     .chat-input-action {
       margin-bottom: 10px;
@@ -536,13 +548,13 @@
   overflow: auto;
   display: flex;
   flex-direction: column-reverse;
-
+  
   background-color: var(--white);
   border: var(--border-in-light);
   border-radius: 10px;
   margin-bottom: 10px;
   box-shadow: var(--shadow);
-
+  
   .prompt-hint {
     color: var(--black);
     padding: 6px 10px;
@@ -552,24 +564,24 @@
     border: transparent 1px solid;
     margin: 4px;
     border-radius: 8px;
-
+    
     &:not(:last-child) {
       margin-top: 0;
     }
-
+    
     .hint-title {
       font-size: 12px;
       font-weight: bolder;
-
+      
       @include single-line();
     }
-
+    
     .hint-content {
       font-size: 12px;
-
+      
       @include single-line();
     }
-
+    
     &-selected,
     &:hover {
       border-color: var(--primary);
@@ -612,7 +624,7 @@
 .chat-input-send {
   background-color: var(--primary);
   color: white;
-
+  
   position: absolute;
   right: 30px;
   bottom: 32px;
@@ -622,7 +634,7 @@
   .chat-input {
     font-size: 16px;
   }
-
+  
   .chat-input-send {
     bottom: 30px;
   }