From de81464082c9309648a525b6ac4396f1fe45c248 Mon Sep 17 00:00:00 2001 From: Red Adaya Date: Tue, 30 Apr 2024 23:25:53 +0800 Subject: [PATCH] save work --- package.json | 2 +- src/app/sidebar/aichat.tsx | 203 ++++++++++++++++++++++++------------- yarn.lock | 2 +- 3 files changed, 137 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index 3f9c9466..05b14bc9 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "monaco-editor": "0.48.0", "mustache": "^4.2.0", "node-fetch": "^3.2.10", - "overlayscrollbars": "^2.6.1", + "overlayscrollbars": "^2.7.3", "overlayscrollbars-react": "^0.5.5", "papaparse": "^5.4.1", "react": "^18.1.0", diff --git a/src/app/sidebar/aichat.tsx b/src/app/sidebar/aichat.tsx index a0987938..8a8a5b10 100644 --- a/src/app/sidebar/aichat.tsx +++ b/src/app/sidebar/aichat.tsx @@ -8,8 +8,7 @@ import { GlobalModel } from "@/models"; import { boundMethod } from "autobind-decorator"; import { If, For } from "tsx-control-statements/components"; import { Markdown } from "@/elements"; -import * as appconst from "@/app/appconst"; -import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react"; +import { OverlayScrollbars } from "overlayscrollbars"; import "./aichat.less"; @@ -53,22 +52,141 @@ class AIChatKeybindings extends React.Component<{ AIChatObject: AIChat }, {}> { } @mobxReact.observer -class AIChat extends React.Component<{}, {}> { +class ChatContent extends React.Component<{}, {}> { chatListKeyCount: number = 0; - chatWindowScrollRef: React.RefObject; - textAreaRef: React.RefObject; + containerRef: React.RefObject = React.createRef(); + chatWindowRef: React.RefObject = React.createRef(); + osInstance: OverlayScrollbars = null; + + componentDidMount() { + if (this.containerRef.current) { + this.osInstance = OverlayScrollbars( + this.containerRef.current, + { + scrollbars: { autoHide: "leave" }, + }, + { + initialized: (instance) => { + const { viewport } = instance.elements(); + viewport.scrollTo({ + behavior: "auto", + top: this.chatWindowRef.current.scrollHeight, + }); + }, + } + ); + } + } + + componentDidUpdate() { + if (this.containerRef?.current && this.osInstance) { + const { overflowAmount } = this.osInstance.state(); + const { viewport } = this.osInstance.elements(); + viewport.scrollTo({ + behavior: "auto", + top: overflowAmount.y, + }); + } + } + + componentWillUnmount() { + if (this.osInstance) { + this.osInstance.destroy(); + this.osInstance = null; + } + } + + submitChatMessage(messageStr: string) { + const curLine = GlobalModel.inputModel.getCurLine(); + const prtn = GlobalModel.submitChatInfoCommand(messageStr, curLine, false); + prtn.then((rtn) => { + if (!rtn.success) { + console.log("submit chat command error: " + rtn.error); + } + }).catch((_) => {}); + } + + getLinePos(elem: any): { numLines: number; linePos: number } { + const numLines = elem.value.split("\n").length; + const linePos = elem.value.substr(0, elem.selectionStart).split("\n").length; + return { numLines, linePos }; + } + + onTextAreaFocused(e: any) { + console.log("focused====="); + mobx.action(() => { + GlobalModel.inputModel.setAuxViewFocus(true); + })(); + } + + onTextAreaBlur(e: any) { + mobx.action(() => { + GlobalModel.inputModel.setAuxViewFocus(false); + })(); + } + + renderError(err: string): any { + return
{err}
; + } + + renderChatMessage(chatItem: OpenAICmdInfoChatMessageType): any { + const curKey = "chatmsg-" + this.chatListKeyCount; + this.chatListKeyCount++; + const senderClassName = chatItem.isassistantresponse ? "chat-msg-assistant" : "chat-msg-user"; + const msgClassName = "chat-msg " + senderClassName; + let innerHTML: React.JSX.Element = ( + <> +
+ +
+
{chatItem.userquery}
+ + ); + if (chatItem.isassistantresponse) { + if (chatItem.assistantresponse.error != null && chatItem.assistantresponse.error != "") { + innerHTML = this.renderError(chatItem.assistantresponse.error); + } else { + innerHTML = ( + <> +
+ +
+ + + ); + } + } + + return ( +
+ {innerHTML} +
+ ); + } + + render() { + const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice(); + const chitem: OpenAICmdInfoChatMessageType = null; + return ( +
+
+
+ + {this.renderChatMessage(chitem)} + +
+
+ ); + } +} + +@mobxReact.observer +class AIChat extends React.Component<{}, {}> { + textAreaRef: React.RefObject = React.createRef(); termFontSize: number = 14; - constructor(props: any) { - super(props); - this.chatWindowScrollRef = React.createRef(); - this.textAreaRef = React.createRef(); - } componentDidMount() { const inputModel = GlobalModel.inputModel; - if (this.chatWindowScrollRef?.current != null) { - this.chatWindowScrollRef.current.scrollTop = this.chatWindowScrollRef.current.scrollHeight; - } if (this.textAreaRef.current != null) { this.textAreaRef.current.focus(); // inputModel.setCmdInfoChatRefs(this.textAreaRef, this.chatWindowScrollRef); @@ -77,13 +195,6 @@ class AIChat extends React.Component<{}, {}> { this.onTextAreaChange(null); } - componentDidUpdate() { - if (this.chatWindowScrollRef?.current != null) { - console.log("scrolling to bottom", this.chatWindowScrollRef.current.osInstance().scrollHeight); - this.chatWindowScrollRef.current.scrollTop = this.chatWindowScrollRef.current.scrollHeight; - } - } - requestChatUpdate() { this.submitChatMessage(""); } @@ -195,62 +306,18 @@ class AIChat extends React.Component<{}, {}> { return
{err}
; } - renderChatMessage(chatItem: OpenAICmdInfoChatMessageType): any { - const curKey = "chatmsg-" + this.chatListKeyCount; - this.chatListKeyCount++; - const senderClassName = chatItem.isassistantresponse ? "chat-msg-assistant" : "chat-msg-user"; - const msgClassName = "chat-msg " + senderClassName; - let innerHTML: React.JSX.Element = ( - <> -
- -
-
{chatItem.userquery}
- - ); - if (chatItem.isassistantresponse) { - if (chatItem.assistantresponse.error != null && chatItem.assistantresponse.error != "") { - innerHTML = this.renderError(chatItem.assistantresponse.error); - } else { - innerHTML = ( - <> -
- -
- - - ); - } - } - - return ( -
- {innerHTML} -
- ); - } - render() { const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice(); - const chitem: OpenAICmdInfoChatMessageType = null; + console.log("chatMessageItems", chatMessageItems); return (
Wave AI
- -
-
- - {this.renderChatMessage(chitem)} - -
- + 0}> + +