auxview focus + keybindings (#575)

* first draft of figuring out auxviews and focus

* added more focus logic

* fixed aichat focus issue

* fixed artifacts

* removed command

* addressed review comments

src/app/workspace/cmdinput/aichat.tsx

@@ -9,6 +9,7 @@ import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import { Markdown } from "@/elements";
 import { AuxiliaryCmdView } from "./auxview";
+import * as appconst from "@/app/appconst";
 
 import "./aichat.less";
 
@@ -56,18 +57,13 @@ class AIChat extends React.Component<{}, {}> {
     chatListKeyCount: number = 0;
     chatWindowScrollRef: React.RefObject<HTMLDivElement>;
     textAreaRef: React.RefObject<HTMLTextAreaElement>;
-    isFocused: OV<boolean>;
     termFontSize: number = 14;
 
     constructor(props: any) {
         super(props);
         this.chatWindowScrollRef = React.createRef();
         this.textAreaRef = React.createRef();
-        this.isFocused = mobx.observable.box(false, {
-            name: "aichat-isfocused",
-        });
     }
-
     componentDidMount() {
         const inputModel = GlobalModel.inputModel;
         if (this.chatWindowScrollRef?.current != null) {
@@ -109,13 +105,13 @@ class AIChat extends React.Component<{}, {}> {
 
     onTextAreaFocused(e: any) {
         mobx.action(() => {
-            this.isFocused.set(true);
+            GlobalModel.inputModel.setAuxViewFocus(true);
         })();
     }
 
     onTextAreaBlur(e: any) {
         mobx.action(() => {
-            this.isFocused.set(false);
+            GlobalModel.inputModel.setAuxViewFocus(false);
         })();
     }
 
@@ -237,17 +233,7 @@ class AIChat extends React.Component<{}, {}> {
     render() {
         const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice();
         const chitem: OpenAICmdInfoChatMessageType = null;
-        const renderKeybindings = mobx
+        const renderKeybindings = GlobalModel.inputModel.shouldRenderAuxViewKeybindings(appconst.InputAuxView_AIChat);
-            .computed(() => {
-                return (
-                    this.isFocused.get() ||
-                    GlobalModel.inputModel.hasFocus() ||
-                    (GlobalModel.getActiveScreen().getFocusType() == "input" &&
-                        GlobalModel.activeMainView.get() == "session")
-                );
-            })
-            .get();
-
         return (
             <AuxiliaryCmdView
                 title="Wave AI"

src/app/workspace/cmdinput/historyinfo.tsx

@@ -174,7 +174,7 @@ class HistoryInfo extends React.Component<{}, {}> {
     handleItemClick(hitem: HistoryItem) {
         const inputModel = GlobalModel.inputModel;
         const selItem = inputModel.getHistorySelectedItem();
-        inputModel.setAuxViewFocus(false);
+        inputModel.setAuxViewFocus(!inputModel.getAuxViewFocus());
         if (this.lastClickHNum == hitem.historynum && selItem != null && selItem.historynum == hitem.historynum) {
             inputModel.grabSelectedHistoryItem();
             return;

src/app/workspace/cmdinput/textareainput.tsx

@@ -602,18 +602,21 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
                 }
             }
         }
-        const isHistoryFocused = auxViewFocused && inputModel.getActiveAuxView() == appconst.InputAuxView_History;
+
+        const renderCmdInputKeybindings = inputModel.shouldRenderAuxViewKeybindings(null);
+        const renderHistoryKeybindings = inputModel.shouldRenderAuxViewKeybindings(appconst.InputAuxView_History);
+
         return (
             <div
                 className="textareainput-div control is-expanded"
                 ref={this.controlRef}
                 style={{ height: computedOuterHeight }}
             >
-                <If condition={!auxViewFocused}>
+                <If condition={renderCmdInputKeybindings}>
-                    <CmdInputKeybindings inputObject={this} />
+                    <CmdInputKeybindings inputObject={this}></CmdInputKeybindings>
                 </If>
-                <If condition={isHistoryFocused}>
+                <If condition={renderHistoryKeybindings}>
-                    <HistoryKeybindings />
+                    <HistoryKeybindings inputObject={this}></HistoryKeybindings>
                 </If>
 
                 <If condition={!util.isBlank(shellType)}>

src/models/input.ts

@@ -7,7 +7,7 @@ import { boundMethod } from "autobind-decorator";
 import { isBlank } from "@/util/util";
 import * as appconst from "@/app/appconst";
 import type { Model } from "./model";
-import { GlobalCommandRunner } from "./global";
+import { GlobalCommandRunner, GlobalModel } from "./global";
 import { app } from "electron";
 
 function getDefaultHistoryQueryOpts(): HistoryQueryOpts {
@@ -500,6 +500,29 @@ class InputModel {
         this.giveFocus();
     }
 
+    shouldRenderAuxViewKeybindings(view: InputAuxViewType): boolean {
+        return mobx
+            .computed(() => {
+                if (view != null && this.getActiveAuxView() != view) {
+                    return false;
+                }
+                if (view == null && this.hasFocus() && !this.getAuxViewFocus()) {
+                    return true;
+                }
+                if (view != null && this.getAuxViewFocus()) {
+                    return true;
+                }
+                if (
+                    GlobalModel.getActiveScreen().getFocusType() == "input" &&
+                    GlobalModel.activeMainView.get() == "session"
+                ) {
+                    return true;
+                }
+                return false;
+            })
+            .get();
+    }
+
     setHistoryIndex(hidx: number, force?: boolean): void {
         if (hidx < 0) {
             return;

src/models/model.ts

@@ -759,11 +759,11 @@ class Model {
                 this.activeMainView.set("session");
                 setTimeout(() => {
                     // allows for the session view to load
-                    this.inputModel.giveFocus();
+                    this.inputModel.setAuxViewFocus(false);
                 }, 100);
             })();
         } else {
-            this.inputModel.giveFocus();
+            this.inputModel.setAuxViewFocus(false);
         }
     }