set different bg for AI message. fix unnecessary re-rendering

package.json

@@ -48,6 +48,7 @@
         "remark-gfm": "^4.0.0",
         "sprintf-js": "^1.1.2",
         "throttle-debounce": "^5.0.0",
+        "tinycolor2": "^1.6.0",
         "tsx-control-statements": "^5.1.1",
         "uuid": "^9.0.0",
         "winston": "^3.8.2",

src/app/sidebar/aichat.less

@@ -27,7 +27,6 @@
     > .content {
         flex-flow: column nowrap;
         flex: 1;
-        padding: 0 15px;
         margin-bottom: 0;
         overflow-y: auto;
 
@@ -44,8 +43,7 @@
         }
 
         .chat-msg {
-            padding-top: calc(var(--termpad) * 2);
-            padding-bottom: calc(var(--termpad) * 2);
+            padding: calc(var(--termpad) * 2);
             display: flex;
 
             .chat-msg-header {

src/app/sidebar/aichat.tsx

@@ -10,6 +10,7 @@ import { If, For } from "tsx-control-statements/components";
 import { Markdown } from "@/elements";
 import type { OverlayScrollbars } from "overlayscrollbars";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
+import tinycolor from "tinycolor2";
 
 import "./aichat.less";
 
@@ -60,7 +61,7 @@ class ChatContent extends React.Component<{}, {}> {
     osInstance: OverlayScrollbars = null;
 
     componentDidUpdate() {
-        console.log("triggered");
+        this.chatListKeyCount = 0;
         if (this.containerRef?.current && this.osInstance) {
             const { viewport } = this.osInstance.elements();
             viewport.scrollTo({
@@ -95,7 +96,8 @@ class ChatContent extends React.Component<{}, {}> {
         const curKey = "chatmsg-" + this.chatListKeyCount;
         this.chatListKeyCount++;
         const senderClassName = chatItem.isassistantresponse ? "chat-msg-assistant" : "chat-msg-user";
-        const msgClassName = "chat-msg " + senderClassName;
+        const msgClassName = `chat-msg ${senderClassName}`;
+
         let innerHTML: React.JSX.Element = (
             <>
                 <div className="chat-msg-header">
@@ -105,7 +107,7 @@ class ChatContent extends React.Component<{}, {}> {
             </>
         );
         if (chatItem.isassistantresponse) {
-            if (chatItem.assistantresponse.error != null && chatItem.assistantresponse.error != "") {
+            if (chatItem.assistantresponse.error != null && chatItem.assistantresponse.error !== "") {
                 innerHTML = this.renderError(chatItem.assistantresponse.error);
             } else {
                 innerHTML = (
@@ -119,8 +121,14 @@ class ChatContent extends React.Component<{}, {}> {
             }
         }
 
+        const cssVar = GlobalModel.isDev ? "--app-panel-bg-color-dev" : "--app-panel-bg-color";
+        const panelBgColor = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
+        const color = tinycolor(panelBgColor);
+        const newColor = color.isValid() ? tinycolor(panelBgColor).darken(6).toString() : "none";
+        const backgroundColor = this.chatListKeyCount % 2 === 0 ? "none" : newColor;
+
         return (
-            <div className={msgClassName} key={curKey}>
+            <div className={msgClassName} key={curKey} style={{ backgroundColor }}>
                 {innerHTML}
             </div>
         );
@@ -163,7 +171,10 @@ class AIChat extends React.Component<{}, {}> {
     }
 
     requestChatUpdate() {
-        this.submitChatMessage("");
+        const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice();
+        if (chatMessageItems == null || chatMessageItems.length == 0) {
+            this.submitChatMessage("");
+        }
     }
 
     submitChatMessage(messageStr: string) {

yarn.lock

@@ -8244,6 +8244,11 @@ tiny-typed-emitter@^2.1.0:
   resolved "https://registry.yarnpkg.com/tiny-typed-emitter/-/tiny-typed-emitter-2.1.0.tgz#b3b027fdd389ff81a152c8e847ee2f5be9fad7b5"
   integrity sha512-qVtvMxeXbVej0cQWKqVSSAHmKZEHAvxdF8HEUBFWts8h+xEo5m/lEiPakuyZ3BnCBjOD8i24kzNOiOLLgsSxhA==
 
+tinycolor2@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 tmp-promise@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/tmp-promise/-/tmp-promise-3.0.3.tgz#60a1a1cc98c988674fcbfd23b6e3367bdeac4ce7"