AI聊天背景色更换

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;
     }
@@ -297,7 +297,7 @@
 
 .chat-body-main-title {
   cursor: pointer;
-  
+
   &:hover {
     text-decoration: none;
   }
@@ -312,7 +312,7 @@
 .chat-message {
   display: flex;
   flex-direction: row;
-  
+
   &:last-child {
     animation: slide-in ease 0.3s;
   }
@@ -321,7 +321,7 @@
 .chat-message-user {
   display: flex;
   flex-direction: row-reverse;
-  
+
   .chat-message-header {
     flex-direction: row-reverse;
   }
@@ -331,7 +331,7 @@
   margin-top: 20px;
   display: flex;
   align-items: center;
-  
+
   .chat-message-actions {
     display: flex;
     box-sizing: border-box;
@@ -343,7 +343,7 @@
     margin: 0 10px;
     opacity: 0;
     pointer-events: none;
-    
+
     .chat-input-actions {
       display: flex;
       flex-wrap: nowrap;
@@ -356,12 +356,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;
@@ -370,13 +370,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%;
@@ -387,12 +387,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) {
@@ -415,7 +415,7 @@
   max-width: 100%;
   margin-top: 10px;
   border-radius: 10px;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: #FFFFFF;
   padding: 10px;
   font-size: 14px;
   user-select: text;
@@ -456,12 +456,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);
   }
@@ -470,14 +470,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);
   }
@@ -497,9 +497,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;
   }
@@ -514,7 +514,7 @@
   flex-direction: column;
   border-top: var(--border-in-light);
   box-shadow: var(--card-shadow);
-  
+
   .chat-input-actions {
     .chat-input-action {
       margin-bottom: 10px;
@@ -535,13 +535,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;
@@ -551,24 +551,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);
@@ -611,7 +611,7 @@
 .chat-input-send {
   background-color: var(--primary);
   color: white;
-  
+
   position: absolute;
   right: 30px;
   bottom: 32px;
@@ -621,7 +621,7 @@
   .chat-input {
     font-size: 16px;
   }
-  
+
   .chat-input-send {
     bottom: 30px;
   }