From 50662c21520ef104718ca84e466af47c947bb758 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Mon, 29 Apr 2024 15:08:11 -0700
Subject: [PATCH] Fixes a regression that would unfocus from the history input
 (#615)

* Fixes a regression that would unfocus from the history input

* remove debug statements

* Update historyinfo.tsx

* fix scrolling the right way
---
 src/app/workspace/cmdinput/aichat.tsx       | 8 ++------
 src/app/workspace/cmdinput/auxview.tsx      | 5 ++++-
 src/app/workspace/cmdinput/cmdinput.tsx     | 8 +-------
 src/app/workspace/cmdinput/historyinfo.less | 4 ++--
 src/app/workspace/cmdinput/historyinfo.tsx  | 9 +++++++--
 src/models/input.ts                         | 3 +--
 6 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/app/workspace/cmdinput/aichat.tsx b/src/app/workspace/cmdinput/aichat.tsx
index 544210b0..8b5e7692 100644
--- a/src/app/workspace/cmdinput/aichat.tsx
+++ b/src/app/workspace/cmdinput/aichat.tsx
@@ -104,15 +104,11 @@ class AIChat extends React.Component<{}, {}> {
     }
 
     onTextAreaFocused(e: any) {
-        mobx.action(() => {
-            GlobalModel.inputModel.setAuxViewFocus(true);
-        })();
+        GlobalModel.inputModel.setAuxViewFocus(true);
     }
 
     onTextAreaBlur(e: any) {
-        mobx.action(() => {
-            GlobalModel.inputModel.setAuxViewFocus(false);
-        })();
+        GlobalModel.inputModel.setAuxViewFocus(false);
     }
 
     // Adjust the height of the textarea to fit the text
diff --git a/src/app/workspace/cmdinput/auxview.tsx b/src/app/workspace/cmdinput/auxview.tsx
index eb3e272a..829d1c65 100644
--- a/src/app/workspace/cmdinput/auxview.tsx
+++ b/src/app/workspace/cmdinput/auxview.tsx
@@ -16,11 +16,12 @@ interface AuxiliaryCmdViewProps {
     titleBarContents?: React.ReactElement[];
     children?: React.ReactNode;
     onClose?: React.MouseEventHandler<HTMLDivElement>;
+    onScrollbarInitialized?: () => void;
     scrollable?: boolean;
 }
 
 export const AuxiliaryCmdView: React.FC<AuxiliaryCmdViewProps> = observer((props) => {
-    const { title, className, iconClass, titleBarContents, children, onClose } = props;
+    const { title, className, iconClass, titleBarContents, children, onClose, onScrollbarInitialized } = props;
 
     return (
         <div className={cn("auxview", className)}>
@@ -50,6 +51,8 @@ export const AuxiliaryCmdView: React.FC<AuxiliaryCmdViewProps> = observer((props
                         <OverlayScrollbarsComponent
                             className="auxview-content"
                             options={{ scrollbars: { autoHide: "leave" } }}
+                            defer={true}
+                            events={{ initialized: onScrollbarInitialized }}
                         >
                             {children}
                         </OverlayScrollbarsComponent>
diff --git a/src/app/workspace/cmdinput/cmdinput.tsx b/src/app/workspace/cmdinput/cmdinput.tsx
index f25bcf7a..cfa2326d 100644
--- a/src/app/workspace/cmdinput/cmdinput.tsx
+++ b/src/app/workspace/cmdinput/cmdinput.tsx
@@ -73,7 +73,6 @@ class CmdInput extends React.Component<{}, {}> {
             return;
         }
         GlobalModel.inputModel.setAuxViewFocus(false);
-        GlobalModel.inputModel.giveFocus();
     }
 
     @boundMethod
@@ -232,12 +231,7 @@ class CmdInput extends React.Component<{}, {}> {
                         </Button>
                     </div>
                 </If>
-                <div
-                    key="base-cmdinput"
-                    className="base-cmdinput"
-                    onClick={this.baseCmdInputClick}
-                    onSelect={this.baseCmdInputClick}
-                >
+                <div key="base-cmdinput" className="base-cmdinput" onClick={this.baseCmdInputClick}>
                     <div className="cmdinput-actions">
                         <If condition={numRunningLines > 0}>
                             <div
diff --git a/src/app/workspace/cmdinput/historyinfo.less b/src/app/workspace/cmdinput/historyinfo.less
index d194cc01..333a7b36 100644
--- a/src/app/workspace/cmdinput/historyinfo.less
+++ b/src/app/workspace/cmdinput/historyinfo.less
@@ -20,8 +20,8 @@
 
     .history-items {
         color: var(--app-text-color);
-        height: 100%;
-        width: 100%;
+        display: flex;
+        flex-direction: column-reverse;
 
         .history-item {
             cursor: pointer;
diff --git a/src/app/workspace/cmdinput/historyinfo.tsx b/src/app/workspace/cmdinput/historyinfo.tsx
index cf371d9b..a30cd215 100644
--- a/src/app/workspace/cmdinput/historyinfo.tsx
+++ b/src/app/workspace/cmdinput/historyinfo.tsx
@@ -154,7 +154,11 @@ class HistoryInfo extends React.Component<{}, {}> {
     lastClickTs: number = 0;
     containingText: mobx.IObservableValue<string> = mobx.observable.box("");
 
-    componentDidMount() {
+    /**
+     * Handles the OverlayScrollbars initialization event to set the scroll position without it being overridden.
+     */
+    @boundMethod
+    handleScrollbarInitialized() {
         const inputModel = GlobalModel.inputModel;
         let hitem = inputModel.getHistorySelectedItem();
         if (hitem == null) {
@@ -225,7 +229,7 @@ class HistoryInfo extends React.Component<{}, {}> {
     render() {
         const inputModel = GlobalModel.inputModel;
         const selItem = inputModel.getHistorySelectedItem();
-        const hitems = inputModel.getFilteredHistoryItems().slice().reverse();
+        const hitems = inputModel.getFilteredHistoryItems();
         const opts = inputModel.historyQueryOpts.get();
         let hitem: HistoryItem = null;
         let snames: Record<string, string> = {};
@@ -244,6 +248,7 @@ class HistoryInfo extends React.Component<{}, {}> {
                 titleBarContents={this.getTitleBarContents()}
                 iconClass="fa-sharp fa-solid fa-clock-rotate-left"
                 scrollable={true}
+                onScrollbarInitialized={this.handleScrollbarInitialized}
             >
                 <div
                     className={cn(
diff --git a/src/models/input.ts b/src/models/input.ts
index c10b5c94..9f1978da 100644
--- a/src/models/input.ts
+++ b/src/models/input.ts
@@ -151,7 +151,7 @@ class InputModel {
                     }
                     break;
                 }
-                case "aichat":
+                case appconst.InputAuxView_AIChat:
                     this.setAIChatFocus();
                     break;
                 case null: {
@@ -549,7 +549,6 @@ class InputModel {
 
         if (info != null && timeoutMs) {
             this.infoTimeoutId = setTimeout(() => {
-                console.log("clearing info msg");
                 if (this.activeAuxView.get() != appconst.InputAuxView_Info) {
                     return;
                 }