diff --git a/package.json b/package.json index 05b14bc9..665f7d0f 100644 --- a/package.json +++ b/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", diff --git a/src/app/sidebar/aichat.less b/src/app/sidebar/aichat.less index 87b346a9..c5c6c374 100644 --- a/src/app/sidebar/aichat.less +++ b/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 { diff --git a/src/app/sidebar/aichat.tsx b/src/app/sidebar/aichat.tsx index de4ab1be..c565feba 100644 --- a/src/app/sidebar/aichat.tsx +++ b/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 = ( <>
@@ -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 ( -
+
{innerHTML}
); @@ -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) { diff --git a/yarn.lock b/yarn.lock index f8d44ab6..dc12835e 100644 --- a/yarn.lock +++ b/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"