Bugfixes for ai chat code select (#537)

* added uuid to code select to fix some render related bugs

* added input popup type, and fixed aichat computed condition

* fixed stash artifacts

src/app/common/elements/markdown.tsx

@@ -7,8 +7,10 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import cn from "classnames";
 import { GlobalModel } from "@/models";
+import { v4 as uuidv4 } from "uuid";
 
 import "./markdown.less";
+import { boundMethod } from "autobind-decorator";
 
 function LinkRenderer(props: any): any {
     let newUrl = "https://extern?" + encodeURIComponent(props.href);
@@ -28,14 +30,17 @@ function CodeRenderer(props: any): any {
 }
 
 @mobxReact.observer
-class CodeBlockMarkdown extends React.Component<{ children: React.ReactNode; codeSelectSelectedIndex?: number }, {}> {
+class CodeBlockMarkdown extends React.Component<
+    { children: React.ReactNode; codeSelectSelectedIndex?: number; uuid: string },
+    {}
+> {
     blockIndex: number;
     blockRef: React.RefObject<HTMLPreElement>;
 
     constructor(props) {
         super(props);
         this.blockRef = React.createRef();
-        this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef);
+        this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef, this.props.uuid);
     }
 
     render() {
@@ -62,9 +67,21 @@ class Markdown extends React.Component<
     { text: string; style?: any; extraClassName?: string; codeSelect?: boolean },
     {}
 > {
-    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number): any {
+    curUuid: string;
+
+    constructor(props) {
+        super(props);
+        this.curUuid = uuidv4();
+    }
+
+    @boundMethod
+    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number, curUuid: string): any {
         if (codeSelect) {
-            return <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex}>{props.children}</CodeBlockMarkdown>;
+            return (
+                <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex} uuid={curUuid}>
+                    {props.children}
+                </CodeBlockMarkdown>
+            );
         } else {
             const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
                 let blockText = (e.target as HTMLElement).innerText;
@@ -90,7 +107,7 @@ class Markdown extends React.Component<
             h5: (props) => HeaderRenderer(props, 5),
             h6: (props) => HeaderRenderer(props, 6),
             code: (props) => CodeRenderer(props),
-            pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex),
+            pre: (props) => this.CodeBlockRenderer(props, codeSelect, curCodeSelectIndex, this.curUuid),
         };
         return (
             <div className={cn("markdown content", this.props.extraClassName)} style={this.props.style}>

src/app/workspace/cmdinput/aichat.tsx

@@ -250,11 +250,19 @@ class AIChat extends React.Component<{}, {}> {
         const textAreaPadding = 2 * 0.5 * termFontSize;
         let textAreaMaxHeight = textAreaLineHeight * textAreaMaxLines + textAreaPadding;
         let textAreaInnerHeight = this.textAreaNumLines.get() * textAreaLineHeight + textAreaPadding;
-        let isFocused = this.isFocused.get();
+        let renderKeybindings = mobx
-
+            .computed(() => {
+                return (
+                    this.isFocused.get() ||
+                    GlobalModel.inputModel.hasFocus() ||
+                    (GlobalModel.getActiveScreen().getFocusType() == "input" &&
+                        GlobalModel.activeMainView.get() == "session")
+                );
+            })
+            .get();
         return (
             <div className="cmd-aichat">
-                <If condition={isFocused}>
+                <If condition={renderKeybindings}>
                     <AIChatKeybindings AIChatObject={this}></AIChatKeybindings>
                 </If>
                 <div className="cmdinput-titlebar">

src/models/input.ts

@@ -32,6 +32,8 @@ class InputModel {
     aiChatWindowRef: React.RefObject<HTMLDivElement>;
     codeSelectBlockRefArray: Array<React.RefObject<HTMLElement>>;
     codeSelectSelectedIndex: OV<number> = mobx.observable.box(-1);
+    codeSelectUuid: string;
+    inputPopUpType: OV<string> = mobx.observable.box("none");
 
     AICmdInfoChatItems: mobx.IObservableArray<OpenAICmdInfoChatMessageType> = mobx.observable.array([], {
         name: "aicmdinfo-chat",
@@ -80,6 +82,7 @@ class InputModel {
             this.codeSelectSelectedIndex.set(-1);
             this.codeSelectBlockRefArray = [];
         })();
+        this.codeSelectUuid = "";
     }
 
     setInputMode(inputMode: null | "comment" | "global"): void {
@@ -180,6 +183,10 @@ class InputModel {
         if (document.activeElement == historyInputElem) {
             return true;
         }
+        let aiChatInputElem = document.querySelector(".cmd-input chat-cmd-input");
+        if (document.activeElement == aiChatInputElem) {
+            return true;
+        }
         return false;
     }
 
@@ -224,6 +231,12 @@ class InputModel {
         })();
     }
 
+    setInputPopUpType(type: string) {
+        this.inputPopUpType = type;
+        this.aIChatShow.set(type == "aichat");
+        this.historyShow.set(type == "history");
+    }
+
     setOpenAICmdInfoChat(chat: OpenAICmdInfoChatMessageType[]): void {
         this.AICmdInfoChatItems.replace(chat);
         this.codeSelectBlockRefArray = [];
@@ -234,6 +247,11 @@ class InputModel {
             return;
         }
         mobx.action(() => {
+            if (show) {
+                this.setInputPopUpType("history");
+            } else {
+                this.setInputPopUpType("none");
+            }
             this.historyShow.set(show);
             if (this.hasFocus()) {
                 this.giveFocus();
@@ -522,6 +540,7 @@ class InputModel {
     }
 
     setAIChatFocus() {
+        console.log("setting ai chat focus");
         if (this.aiChatTextAreaRef?.current != null) {
             this.aiChatTextAreaRef.current.focus();
         }
@@ -540,8 +559,12 @@ class InputModel {
         }
     }
 
-    addCodeBlockToCodeSelect(blockRef: React.RefObject<HTMLElement>): number {
+    addCodeBlockToCodeSelect(blockRef: React.RefObject<HTMLElement>, uuid: string): number {
         let rtn = -1;
+        if (uuid != this.codeSelectUuid) {
+            this.codeSelectUuid = uuid;
+            this.codeSelectBlockRefArray = [];
+        }
         rtn = this.codeSelectBlockRefArray.length;
         this.codeSelectBlockRefArray.push(blockRef);
         return rtn;
@@ -641,6 +664,7 @@ class InputModel {
 
     openAIAssistantChat(): void {
         mobx.action(() => {
+            this.setInputPopUpType("aichat");
             this.aIChatShow.set(true);
             this.setAIChatFocus();
         })();
@@ -653,6 +677,7 @@ class InputModel {
             return;
         }
         mobx.action(() => {
+            this.setInputPopUpType("none");
             this.aIChatShow.set(false);
             if (giveFocus) {
                 this.giveFocus();

src/models/model.ts

@@ -823,7 +823,6 @@ class Model {
     }
 
     onMetaArrowDown(): void {
-        console.log("meta arrow down?");
         GlobalCommandRunner.screenSelectLine("+1");
     }
 
@@ -836,7 +835,6 @@ class Model {
     }
 
     onSwitchSessionCmd(digit: number) {
-        console.log("switching to ", digit);
         GlobalCommandRunner.switchSession(String(digit));
     }