fix/simplify arrow/up down logic

src/app/common/elements/markdown.tsx

@@ -43,22 +43,17 @@ class CodeBlockMarkdown extends React.Component<
         this.blockIndex = GlobalModel.inputModel.addCodeBlockToCodeSelect(this.blockRef, this.props.uuid);
     }
 
+    @boundMethod
+    handleClick(e: React.MouseEvent<HTMLPreElement>) {
+        // console.log("this.blockIndex", this.blockIndex);
+        GlobalModel.inputModel.setCodeSelectSelectedCodeBlock(this.blockIndex);
+    }
+
     render() {
-        let clickHandler: (e: React.MouseEvent<HTMLElement>, blockIndex: number) => void;
-        let inputModel = GlobalModel.inputModel;
-        clickHandler = (e: React.MouseEvent<HTMLElement>, blockIndex: number) => {
-            const sel = window.getSelection();
-            if (sel?.toString().length == 0) {
-                inputModel.setCodeSelectSelectedCodeBlock(blockIndex);
-            }
-        };
+        // console.log("this.blockIndex", this.blockIndex);
         let selected = this.blockIndex == this.props.codeSelectSelectedIndex;
         return (
-            <pre
-                ref={this.blockRef}
-                className={clsx({ selected: selected })}
-                onClick={(event) => clickHandler(event, this.blockIndex)}
-            >
+            <pre ref={this.blockRef} className={clsx({ selected: selected })} onClick={this.handleClick}>
                 {this.props.children}
             </pre>
         );
@@ -78,7 +73,7 @@ class Markdown extends React.Component<
     }
 
     @boundMethod
-    CodeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number, curUuid: string): any {
+    codeBlockRenderer(props: any, codeSelect: boolean, codeSelectIndex: number, curUuid: string): any {
         if (codeSelect) {
             return (
                 <CodeBlockMarkdown codeSelectSelectedIndex={codeSelectIndex} uuid={curUuid}>
@@ -98,7 +93,7 @@ class Markdown extends React.Component<
     }
 
     render() {
-        let text = this.props.text;
+        let { text } = this.props;
         let codeSelect = this.props.codeSelect;
         let curCodeSelectIndex = GlobalModel.inputModel.getCodeSelectSelectedIndex();
         let markdownComponents = {
@@ -110,7 +105,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, this.curUuid),
+            pre: (props) => this.codeBlockRenderer(props, codeSelect, curCodeSelectIndex, this.curUuid),
         };
         return (
             <div className={clsx("markdown content", this.props.extraClassName)} style={this.props.style}>

src/app/sidebar/aichat.tsx

@@ -11,6 +11,7 @@ import { Markdown } from "@/elements";
 import type { OverlayScrollbars } from "overlayscrollbars";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
 import tinycolor from "tinycolor2";
+import * as appconst from "@/app/appconst";
 
 import "./aichat.less";
 
@@ -54,20 +55,19 @@ class AIChatKeybindings extends React.Component<{ AIChatObject: AIChat }, {}> {
 }
 
 @mobxReact.observer
-class ChatContent extends React.Component<{}, {}> {
+class ChatContent extends React.Component<{ chatWindowRef }, {}> {
     chatListKeyCount: number = 0;
     containerRef: React.RefObject<OverlayScrollbarsComponentRef> = React.createRef();
-    chatWindowRef: React.RefObject<HTMLDivElement> = React.createRef();
     osInstance: OverlayScrollbars = null;
 
     componentDidUpdate() {
         this.chatListKeyCount = 0;
         if (this.containerRef?.current && this.osInstance) {
             const { viewport } = this.osInstance.elements();
-            viewport.scrollTo({
-                behavior: "auto",
-                top: this.chatWindowRef.current.scrollHeight,
-            });
+            // viewport.scrollTo({
+            //     behavior: "auto",
+            //     top: this.props.chatWindowRef.current.scrollHeight,
+            // });
         }
     }
 
@@ -80,11 +80,13 @@ class ChatContent extends React.Component<{}, {}> {
 
     @boundMethod
     onScrollbarInitialized(instance) {
+        console.log("got here");
+        GlobalModel.inputModel.setChatOsInstance(instance);
         this.osInstance = instance;
         const { viewport } = instance.elements();
         viewport.scrollTo({
             behavior: "auto",
-            top: this.chatWindowRef.current.scrollHeight,
+            top: this.props.chatWindowRef.current.scrollHeight,
         });
     }
 
@@ -144,7 +146,7 @@ class ChatContent extends React.Component<{}, {}> {
                 options={{ scrollbars: { autoHide: "leave" } }}
                 events={{ initialized: this.onScrollbarInitialized }}
             >
-                <div ref={this.chatWindowRef} className="chat-window">
+                <div ref={this.props.chatWindowRef} className="chat-window">
                     <div className="filler"></div>
                     <For each="chitem" index="idx" of={chatMessageItems}>
                         {this.renderChatMessage(chitem)}
@@ -158,6 +160,7 @@ class ChatContent extends React.Component<{}, {}> {
 @mobxReact.observer
 class AIChat extends React.Component<{}, {}> {
     textAreaRef: React.RefObject<HTMLTextAreaElement> = React.createRef();
+    chatWindowRef: React.RefObject<HTMLDivElement> = React.createRef();
     termFontSize: number = 14;
 
     constructor(props) {
@@ -167,9 +170,12 @@ class AIChat extends React.Component<{}, {}> {
 
     componentDidMount() {
         const inputModel = GlobalModel.inputModel;
+
+        inputModel.openAIAssistantChat();
+
         if (this.textAreaRef.current != null) {
             this.textAreaRef.current.focus();
-            // inputModel.setCmdInfoChatRefs(this.textAreaRef, this.chatWindowScrollRef);
+            inputModel.setCmdInfoChatRefs(this.textAreaRef, this.chatWindowRef);
         }
         this.requestChatUpdate();
         this.onTextAreaChange(null);
@@ -182,6 +188,28 @@ class AIChat extends React.Component<{}, {}> {
         }
     }
 
+    // Adjust the height of the textarea to fit the text
+    @boundMethod
+    onTextAreaChange(e: any) {
+        if (this.textAreaRef.current == null) {
+            return;
+        }
+        // Calculate the bounding height of the text area
+        const textAreaMaxLines = 4;
+        const textAreaLineHeight = this.termFontSize * 1.5;
+        const textAreaMinHeight = textAreaLineHeight;
+        const textAreaMaxHeight = textAreaLineHeight * textAreaMaxLines;
+
+        // Get the height of the wrapped text area content. Courtesy of https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
+        this.textAreaRef.current.style.height = "1px";
+        const scrollHeight: number = this.textAreaRef.current.scrollHeight;
+
+        // Set the new height of the text area, bounded by the min and max height.
+        const newHeight = Math.min(Math.max(scrollHeight, textAreaMinHeight), textAreaMaxHeight);
+        this.textAreaRef.current.style.height = newHeight + "px";
+        GlobalModel.inputModel.codeSelectDeselectAll();
+    }
+
     submitChatMessage(messageStr: string) {
         const curLine = GlobalModel.inputModel.curLine;
         const prtn = GlobalModel.submitChatInfoCommand(messageStr, curLine, false);
@@ -201,6 +229,8 @@ class AIChat extends React.Component<{}, {}> {
     @mobx.action.bound
     onTextAreaFocused(e: any) {
         GlobalModel.inputModel.setAuxViewFocus(true);
+        GlobalModel.inputModel.setActiveAuxView(appconst.InputAuxView_AIChat);
+
         this.onTextAreaChange(e);
     }
 
@@ -211,22 +241,8 @@ class AIChat extends React.Component<{}, {}> {
         })();
     }
 
-    // Adjust the height of the textarea to fit the text
     @boundMethod
-    onTextAreaChange(e: any) {
-        // Calculate the bounding height of the text area
-        const textAreaMaxLines = 4;
-        const textAreaLineHeight = this.termFontSize * 1.5;
-        const textAreaMinHeight = textAreaLineHeight;
-        const textAreaMaxHeight = textAreaLineHeight * textAreaMaxLines;
-
-        // Get the height of the wrapped text area content. Courtesy of https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
-        this.textAreaRef.current.style.height = "1px";
-        const scrollHeight: number = this.textAreaRef.current.scrollHeight;
-
-        // Set the new height of the text area, bounded by the min and max height.
-        const newHeight = Math.min(Math.max(scrollHeight, textAreaMinHeight), textAreaMaxHeight);
-        this.textAreaRef.current.style.height = newHeight + "px";
+    onTextAreaInput(e: any) {
         GlobalModel.inputModel.codeSelectDeselectAll();
     }
 
@@ -258,15 +274,18 @@ class AIChat extends React.Component<{}, {}> {
     }
 
     onArrowUpPressed(): boolean {
+        console.log("arrow up pressed==================");
         const currentRef = this.textAreaRef.current;
+        console.log("inputModel.getCodeSelectSelectedIndex()", GlobalModel.inputModel.getCodeSelectSelectedIndex());
         if (currentRef == null) {
             return false;
         }
-        if (this.getLinePos(currentRef).linePos > 1) {
-            // normal up arrow
-            GlobalModel.inputModel.codeSelectDeselectAll();
-            return false;
-        }
+        // if (this.getLinePos(currentRef).linePos > 1) {
+        //     // normal up arrow
+        //     // GlobalModel.inputModel.codeSelectDeselectAll();
+        //     // return false;
+        // }
+
         GlobalModel.inputModel.codeSelectSelectNextOldestCodeBlock();
         return true;
     }
@@ -285,8 +304,7 @@ class AIChat extends React.Component<{}, {}> {
         return true;
     }
 
-    @mobx.action
-    @boundMethod
+    @mobx.action.bound
     onKeyDown(e: any) {}
 
     renderError(err: string): any {
@@ -295,14 +313,22 @@ class AIChat extends React.Component<{}, {}> {
 
     render() {
         const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice();
+        const renderAIChatKeybindings = GlobalModel.inputModel.shouldRenderAuxViewKeybindings(
+            appconst.InputAuxView_AIChat
+        );
+        console.log("renderAIChatKeybindings=====", renderAIChatKeybindings);
+        console.log("codeSelectBlockRefArray", GlobalModel.inputModel.codeSelectBlockRefArray);
+
         return (
             <div className="sidebar-aichat">
-                <AIChatKeybindings AIChatObject={this}></AIChatKeybindings>
+                <If condition={renderAIChatKeybindings}>
+                    <AIChatKeybindings AIChatObject={this}></AIChatKeybindings>
+                </If>
                 <div className="titlebar">
                     <div className="title-string">Wave AI</div>
                 </div>
                 <If condition={chatMessageItems.length > 0}>
-                    <ChatContent />
+                    <ChatContent chatWindowRef={this.chatWindowRef} />
                 </If>
                 <div className="chat-input">
                     <textarea
@@ -311,11 +337,13 @@ class AIChat extends React.Component<{}, {}> {
                         autoComplete="off"
                         autoCorrect="off"
                         autoFocus={true}
-                        id="chat-cmd-input"
+                        className="chat-cmd-input chat-textarea"
+                        onFocus={this.onTextAreaFocused}
+                        onBlur={this.onTextAreaBlur}
                         onChange={this.onTextAreaChange}
+                        onInput={this.onTextAreaInput}
                         onKeyDown={this.onKeyDown}
                         style={{ fontSize: this.termFontSize }}
-                        className="chat-textarea"
                         placeholder="Send a Message..."
                     ></textarea>
                 </div>

src/app/workspace/cmdinput/aichat.tsx

@@ -241,6 +241,7 @@ class AIChat extends React.Component<{}, {}> {
         const chatMessageItems = GlobalModel.inputModel.AICmdInfoChatItems.slice();
         const chitem: OpenAICmdInfoChatMessageType = null;
         const renderKeybindings = GlobalModel.inputModel.shouldRenderAuxViewKeybindings(appconst.InputAuxView_AIChat);
+        console.log("renderKeybindings", renderKeybindings);
         return (
             <AuxiliaryCmdView
                 title="Wave AI"
@@ -263,14 +264,13 @@ class AIChat extends React.Component<{}, {}> {
                         ref={this.textAreaRef}
                         autoComplete="off"
                         autoCorrect="off"
-                        id="chat-cmd-input"
+                        className="chat-cmd-input chat-textarea"
                         onFocus={this.onTextAreaFocused}
                         onBlur={this.onTextAreaBlur}
                         onChange={this.onTextAreaChange}
                         onInput={this.onTextAreaInput}
                         onKeyDown={this.onKeyDown}
                         style={{ fontSize: this.termFontSize }}
-                        className="chat-textarea"
                         placeholder="Send a Message..."
                     ></textarea>
                 </div>

src/app/workspace/cmdinput/cmdinput.less

@@ -12,7 +12,7 @@
 
     // Apply a border between the base cmdinput and any views shown above it
     // TODO: use a generic selector for this
-    &.has-aichat,
+    // &.has-aichat,
     &.has-history,
     &.has-info,
     &.has-suggestions {
@@ -21,8 +21,8 @@
         }
     }
 
-    &.has-history,
-    &.has-aichat {
+    // &.has-aichat,
+    &.has-history {
         height: max(300px, 70%);
     }
 

src/app/workspace/cmdinput/cmdinput.tsx

@@ -86,9 +86,9 @@ class CmdInput extends React.Component<{}, {}> {
         e.stopPropagation();
         const inputModel = GlobalModel.inputModel;
         if (inputModel.getActiveAuxView() === appconst.InputAuxView_AIChat) {
-            inputModel.closeAuxView();
+            // inputModel.closeAuxView();
         } else {
-            inputModel.openAIAssistantChat();
+            // inputModel.openAIAssistantChat();
         }
     }
 
@@ -191,10 +191,10 @@ class CmdInput extends React.Component<{}, {}> {
                         <div className="cmd-input-grow-spacer"></div>
                         <HistoryInfo />
                     </When>
-                    <When condition={openView === appconst.InputAuxView_AIChat}>
+                    {/* <When condition={openView === appconst.InputAuxView_AIChat}>
                         <div className="cmd-input-grow-spacer"></div>
                         <AIChat />
-                    </When>
+                    </When> */}
                     <When condition={openView === appconst.InputAuxView_Info}>
                         <InfoMsg key="infomsg" />
                     </When>

src/app/workspace/cmdinput/textareainput.tsx

@@ -621,6 +621,8 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
             inputModel.shouldRenderAuxViewKeybindings(null) ||
             inputModel.shouldRenderAuxViewKeybindings(appconst.InputAuxView_Info);
         const renderHistoryKeybindings = inputModel.shouldRenderAuxViewKeybindings(appconst.InputAuxView_History);
+        console.log("renderCmdInputKeybindings", renderCmdInputKeybindings);
+        console.log("renderHistoryKeybindings", renderHistoryKeybindings);
         return (
             <div
                 className="textareainput-div control is-expanded"

src/models/aichat.ts

@@ -0,0 +1,188 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type React from "react";
+import * as mobx from "mobx";
+import { Model } from "./model";
+
+class AIChatModel {
+    globalModel: Model;
+    chatTextAreaRef: React.RefObject<HTMLTextAreaElement>;
+    chatWindowRef: React.RefObject<HTMLDivElement>;
+    codeSelectBlockRefArray: Array<React.RefObject<HTMLElement>>;
+    codeSelectSelectedIndex: OV<number> = mobx.observable.box(-1);
+    codeSelectUuid: string;
+    aiCmdInfoChatItems: mobx.IObservableArray<OpenAICmdInfoChatMessageType> = mobx.observable.array([], {
+        name: "aicmdinfo-chat",
+    });
+    isFocused: OV<boolean> = mobx.observable.box(false, {
+        name: "isFocused",
+    });
+    readonly codeSelectTop: number = -2;
+    readonly codeSelectBottom: number = -1;
+
+    constructor(globalModel: Model) {
+        this.globalModel = globalModel;
+        mobx.makeObservable(this);
+        mobx.action(() => {
+            this.codeSelectSelectedIndex.set(-1);
+            this.codeSelectBlockRefArray = [];
+        })();
+        this.codeSelectUuid = "";
+    }
+
+    @mobx.action
+    focus(): void {
+        if (this.chatTextAreaRef?.current != null) {
+            this.chatTextAreaRef.current.focus();
+        }
+        this.isFocused.set(true);
+    }
+
+    @mobx.action
+    unFocus() {
+        if (this.chatTextAreaRef?.current != null) {
+            this.chatTextAreaRef.current.blur();
+        }
+        this.isFocused.set(false);
+    }
+
+    @mobx.action
+    setOpenAICmdInfoChat(chat: OpenAICmdInfoChatMessageType[]): void {
+        this.aiCmdInfoChatItems.replace(chat);
+        this.codeSelectBlockRefArray = [];
+    }
+
+    close(): void {
+        // close and give focus back to main input
+    }
+
+    shouldRenderKeybindings(view: InputAuxViewType): boolean {
+        // when aichat sidebar is mounted, it will render the keybindings
+        return true;
+    }
+
+    setRefs(textAreaRef: React.RefObject<HTMLTextAreaElement>, chatWindowRef: React.RefObject<HTMLDivElement>) {
+        this.chatTextAreaRef = textAreaRef;
+        this.chatWindowRef = chatWindowRef;
+    }
+
+    unsetRefs() {
+        this.chatTextAreaRef = null;
+        this.chatWindowRef = null;
+    }
+
+    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;
+    }
+
+    @mobx.action
+    setCodeSelectSelectedCodeBlock(blockIndex: number) {
+        if (blockIndex >= 0 && blockIndex < this.codeSelectBlockRefArray.length) {
+            this.codeSelectSelectedIndex.set(blockIndex);
+            const currentRef = this.codeSelectBlockRefArray[blockIndex].current;
+            if (currentRef != null && this.chatWindowRef?.current != null) {
+                const chatWindowTop = this.chatWindowRef.current.scrollTop;
+                const chatWindowBottom = chatWindowTop + this.chatWindowRef.current.clientHeight - 100;
+                const elemTop = currentRef.offsetTop;
+                let elemBottom = elemTop - currentRef.offsetHeight;
+                const elementIsInView = elemBottom < chatWindowBottom && elemTop > chatWindowTop;
+                if (!elementIsInView) {
+                    this.chatWindowRef.current.scrollTop = elemBottom - this.chatWindowRef.current.clientHeight / 3;
+                }
+            }
+        }
+        this.codeSelectBlockRefArray = [];
+    }
+
+    @mobx.action
+    codeSelectSelectNextNewestCodeBlock() {
+        // oldest code block = index 0 in array
+        // this decrements codeSelectSelected index
+        if (this.codeSelectSelectedIndex.get() == this.codeSelectTop) {
+            this.codeSelectSelectedIndex.set(this.codeSelectBottom);
+        } else if (this.codeSelectSelectedIndex.get() == this.codeSelectBottom) {
+            return;
+        }
+        const incBlockIndex = this.codeSelectSelectedIndex.get() + 1;
+        if (this.codeSelectSelectedIndex.get() == this.codeSelectBlockRefArray.length - 1) {
+            this.codeSelectDeselectAll();
+            if (this.chatWindowRef?.current != null) {
+                this.chatWindowRef.current.scrollTop = this.chatWindowRef.current.scrollHeight;
+            }
+        }
+        if (incBlockIndex >= 0 && incBlockIndex < this.codeSelectBlockRefArray.length) {
+            this.setCodeSelectSelectedCodeBlock(incBlockIndex);
+        }
+    }
+
+    @mobx.action
+    codeSelectSelectNextOldestCodeBlock() {
+        if (this.codeSelectSelectedIndex.get() == this.codeSelectBottom) {
+            if (this.codeSelectBlockRefArray.length > 0) {
+                this.codeSelectSelectedIndex.set(this.codeSelectBlockRefArray.length);
+            } else {
+                return;
+            }
+        } else if (this.codeSelectSelectedIndex.get() == this.codeSelectTop) {
+            return;
+        }
+        const decBlockIndex = this.codeSelectSelectedIndex.get() - 1;
+        if (decBlockIndex < 0) {
+            this.codeSelectDeselectAll(this.codeSelectTop);
+            if (this.chatWindowRef?.current != null) {
+                this.chatWindowRef.current.scrollTop = 0;
+            }
+        }
+        if (decBlockIndex >= 0 && decBlockIndex < this.codeSelectBlockRefArray.length) {
+            this.setCodeSelectSelectedCodeBlock(decBlockIndex);
+        }
+    }
+
+    getCodeSelectSelectedIndex() {
+        return this.codeSelectSelectedIndex.get();
+    }
+
+    getCodeSelectRefArrayLength() {
+        return this.codeSelectBlockRefArray.length;
+    }
+
+    codeBlockIsSelected(blockIndex: number): boolean {
+        return blockIndex == this.codeSelectSelectedIndex.get();
+    }
+
+    codeSelectDeselectAll(direction: number = this.codeSelectBottom) {
+        if (this.codeSelectSelectedIndex.get() == direction) {
+            return;
+        }
+        mobx.action(() => {
+            this.codeSelectSelectedIndex.set(direction);
+            this.codeSelectBlockRefArray = [];
+        })();
+    }
+
+    @mobx.action
+    openAIAssistantChat(): void {
+        // open aichat sidebar
+    }
+
+    clearAIAssistantChat(): void {
+        const prtn = this.globalModel.submitChatInfoCommand("", "", true);
+        prtn.then((rtn) => {
+            if (!rtn.success) {
+                console.log("submit chat command error: " + rtn.error);
+            }
+        }).catch((error) => {
+            console.log("submit chat command error: ", error);
+        });
+    }
+}
+
+export { AIChatModel };

src/models/index.ts

@@ -6,6 +6,7 @@ export { ClientSettingsViewModel } from "./clientsettingsview";
 export { Cmd } from "./cmd";
 export { ConnectionsViewModel } from "./connectionsview";
 export { InputModel } from "./input";
+export { AIChatModel } from "./aichat";
 export { MainSidebarModel } from "./mainsidebar";
 export { RightSidebarModel } from "./rightsidebar";
 export { ModalsModel } from "./modals";

src/models/input.ts

@@ -7,6 +7,8 @@ import { isBlank } from "@/util/util";
 import * as appconst from "@/app/appconst";
 import type { Model } from "./model";
 import { GlobalCommandRunner, GlobalModel } from "./global";
+import type { OverlayScrollbars } from "overlayscrollbars";
+import { boundMethod } from "autobind-decorator";
 
 function getDefaultHistoryQueryOpts(): HistoryQueryOpts {
     return {
@@ -28,17 +30,17 @@ class InputModel {
     cmdInputHeight: OV<number> = mobx.observable.box(0);
     aiChatTextAreaRef: React.RefObject<HTMLTextAreaElement>;
     aiChatWindowRef: React.RefObject<HTMLDivElement>;
+    chatOsInstance: OverlayScrollbars;
     codeSelectBlockRefArray: Array<React.RefObject<HTMLElement>>;
-    codeSelectSelectedIndex: OV<number> = mobx.observable.box(-1);
+    codeSelectSelectedIndex: OV<number> = mobx.observable.box(null, {
+        name: "codeSelectSelectedIndex",
+    });
     codeSelectUuid: string;
     inputPopUpType: OV<string> = mobx.observable.box("none");
 
     AICmdInfoChatItems: mobx.IObservableArray<OpenAICmdInfoChatMessageType> = mobx.observable.array([], {
         name: "aicmdinfo-chat",
     });
-    readonly codeSelectTop: number = -2;
-    readonly codeSelectBottom: number = -1;
-
     historyType: mobx.IObservableValue<HistoryTypeStrs> = mobx.observable.box("screen");
     historyLoading: mobx.IObservableValue<boolean> = mobx.observable.box(false);
     historyAfterLoadIndex: number = 0;
@@ -139,6 +141,7 @@ class InputModel {
     giveFocus(): void {
         // Override active view to the main input if aux view does not have focus
         const activeAuxView = this.getAuxViewFocus() ? this.getActiveAuxView() : null;
+        console.log("activeAuxView", activeAuxView);
         switch (activeAuxView) {
             case appconst.InputAuxView_History: {
                 const elem: HTMLElement = document.querySelector(".cmd-input input.history-input");
@@ -190,7 +193,7 @@ class InputModel {
         if (document.activeElement == historyInputElem) {
             return true;
         }
-        let aiChatInputElem = document.querySelector(".cmd-input chat-cmd-input");
+        let aiChatInputElem = document.querySelector(".cmd-input .chat-cmd-input");
         if (document.activeElement == aiChatInputElem) {
             return true;
         }
@@ -460,16 +463,21 @@ class InputModel {
     }
 
     shouldRenderAuxViewKeybindings(view: InputAuxViewType): boolean {
+        console.log("view", view, this.getAuxViewFocus(), this.getActiveAuxView());
         if (GlobalModel.activeMainView.get() != "session") {
+            console.log("1");
             return false;
         }
         if (GlobalModel.getActiveScreen()?.getFocusType() != "input") {
+            console.log("2");
             return false;
         }
         // (view == null) means standard cmdinput keybindings
         if (view == null) {
+            console.log("3");
             return !this.getAuxViewFocus();
         } else {
+            console.log("4");
             return this.getAuxViewFocus() && view == this.getActiveAuxView();
         }
     }
@@ -541,6 +549,11 @@ class InputModel {
         this.aiChatWindowRef = chatWindowRef;
     }
 
+    setChatOsInstance(osInstance: OverlayScrollbars) {
+        console.log("triggered***********");
+        this.chatOsInstance = osInstance;
+    }
+
     setAIChatFocus() {
         if (this.aiChatTextAreaRef?.current != null) {
             this.aiChatTextAreaRef.current.focus();
@@ -559,12 +572,15 @@ class InputModel {
         }
     }
 
+    @mobx.action
     addCodeBlockToCodeSelect(blockRef: React.RefObject<HTMLElement>, uuid: string): number {
         let rtn = -1;
-        if (uuid != this.codeSelectUuid) {
-            this.codeSelectUuid = uuid;
-            this.codeSelectBlockRefArray = [];
-        }
+        // Why is codeSelectBlockRefArray being reset here? This causes a bug where multiple code blocks are highlighted
+        // because multiple code blocks have the same index.
+        // if (uuid != this.codeSelectUuid) {
+        //     this.codeSelectUuid = uuid;
+        //     this.codeSelectBlockRefArray = [];
+        // }
         rtn = this.codeSelectBlockRefArray.length;
         this.codeSelectBlockRefArray.push(blockRef);
         return rtn;
@@ -572,17 +588,37 @@ class InputModel {
 
     @mobx.action
     setCodeSelectSelectedCodeBlock(blockIndex: number) {
+        // const { viewport, scrollOffsetElement } = this.chatOsInstance.elements();
+        // const { scrollTop } = scrollOffsetElement;
+        // console.log("setCodeSelectSelectedCodeBlock", scrollTop);
+        // console.log("clientHeight", this.aiChatWindowRef.current.clientHeight);
         if (blockIndex >= 0 && blockIndex < this.codeSelectBlockRefArray.length) {
             this.codeSelectSelectedIndex.set(blockIndex);
             const currentRef = this.codeSelectBlockRefArray[blockIndex].current;
             if (currentRef != null && this.aiChatWindowRef?.current != null) {
-                const chatWindowTop = this.aiChatWindowRef.current.scrollTop;
+                // const chatWindowTop = this.aiChatWindowRef.current.scrollTop;
+                const { viewport, scrollOffsetElement } = this.chatOsInstance.elements();
+                const chatWindowTop = scrollOffsetElement.scrollTop;
+
+                console.log("chatWindowTop", chatWindowTop);
                 const chatWindowBottom = chatWindowTop + this.aiChatWindowRef.current.clientHeight - 100;
+                console.log("chatWindowTop", chatWindowTop);
+                console.log("this.aiChatWindowRef.current.clientHeight", this.aiChatWindowRef.current.clientHeight);
                 const elemTop = currentRef.offsetTop;
                 let elemBottom = elemTop - currentRef.offsetHeight;
                 const elementIsInView = elemBottom < chatWindowBottom && elemTop > chatWindowTop;
                 if (!elementIsInView) {
-                    this.aiChatWindowRef.current.scrollTop = elemBottom - this.aiChatWindowRef.current.clientHeight / 3;
+                    console.log("elemBottom", elemBottom);
+                    console.log(
+                        "this.aiChatWindowRef.current.clientHeight",
+                        this.aiChatWindowRef.current.clientHeight,
+                        this.aiChatWindowRef.current.clientHeight / 2
+                    );
+                    // this.aiChatWindowRef.current.scrollTop = elemBottom - this.aiChatWindowRef.current.clientHeight / 3;
+                    viewport.scrollTo({
+                        behavior: "auto",
+                        top: elemTop - 20,
+                    });
                 }
             }
         }
@@ -591,22 +627,58 @@ class InputModel {
         this.setAuxViewFocus(true);
     }
 
+    // @mobx.action
+    // setCodeSelectSelectedCodeBlock(blockIndex: number) {
+    //     const { viewport, scrollOffsetElement } = this.chatOsInstance.elements();
+    //     const { scrollTop } = scrollOffsetElement;
+    //     console.log("setCodeSelectSelectedCodeBlock", scrollTop);
+    //     console.log("clientHeight", this.aiChatWindowRef.current.clientHeight);
+    //     if (blockIndex >= 0 && blockIndex < this.codeSelectBlockRefArray.length) {
+    //         this.codeSelectSelectedIndex.set(blockIndex);
+    //         const currentRef = this.codeSelectBlockRefArray[blockIndex].current;
+    //         if (currentRef != null && this.aiChatWindowRef?.current != null) {
+    //             const chatWindowTop = scrollTop;
+    //             const chatWindowBottom = chatWindowTop + this.aiChatWindowRef.current.clientHeight - 100;
+    //             const elemTop = currentRef.offsetTop;
+    //             let elemBottom = elemTop - currentRef.offsetHeight;
+    //             const elementIsInView = elemBottom < chatWindowBottom && elemTop > chatWindowTop;
+    //             if (!elementIsInView) {
+    //                 console.log(
+    //                     "elemBottom - this.aiChatWindowRef.current.clientHeight / 3",
+    //                     elemBottom - this.aiChatWindowRef.current.clientHeight / 3
+    //                 );
+    //                 viewport.scrollTo({
+    //                     behavior: "auto",
+    //                     top: elemBottom - this.aiChatWindowRef.current.clientHeight / 3,
+    //                 });
+    //                 // this.aiChatWindowRef.current.scrollTop = elemBottom - this.aiChatWindowRef.current.clientHeight / 3;
+    //             }
+    //         }
+    //     }
+    //     this.codeSelectBlockRefArray = [];
+    //     this.setActiveAuxView(appconst.InputAuxView_AIChat);
+    //     this.setAuxViewFocus(true);
+    // }
+
     @mobx.action
     codeSelectSelectNextNewestCodeBlock() {
         // oldest code block = index 0 in array
         // this decrements codeSelectSelected index
-        if (this.codeSelectSelectedIndex.get() == this.codeSelectTop) {
-            this.codeSelectSelectedIndex.set(this.codeSelectBottom);
-        } else if (this.codeSelectSelectedIndex.get() == this.codeSelectBottom) {
-            return;
-        }
+        // if (this.codeSelectSelectedIndex.get() == this.codeSelectTop) {
+
+        //     this.codeSelectSelectedIndex.set(this.codeSelectBottom);
+        // } else if (this.codeSelectSelectedIndex.get() == this.codeSelectBottom) {
+        //     return;
+        // }
         const incBlockIndex = this.codeSelectSelectedIndex.get() + 1;
-        if (this.codeSelectSelectedIndex.get() == this.codeSelectBlockRefArray.length - 1) {
-            this.codeSelectDeselectAll();
-            if (this.aiChatWindowRef?.current != null) {
-                this.aiChatWindowRef.current.scrollTop = this.aiChatWindowRef.current.scrollHeight;
-            }
-        }
+        // if (this.codeSelectSelectedIndex.get() == this.codeSelectBlockRefArray.length - 1) {
+        //     // this.codeSelectDeselectAll();
+        //     // if (this.aiChatWindowRef?.current != null) {
+        //     //     this.aiChatWindowRef.current.scrollTop = this.aiChatWindowRef.current.scrollHeight;
+        //     // }
+        // }
+        // console.log("incBlockIndex", incBlockIndex);
+        // console.log("this.codeSelectBlockRefArray.length", this.codeSelectBlockRefArray.length);
         if (incBlockIndex >= 0 && incBlockIndex < this.codeSelectBlockRefArray.length) {
             this.setCodeSelectSelectedCodeBlock(incBlockIndex);
         }
@@ -614,23 +686,29 @@ class InputModel {
 
     @mobx.action
     codeSelectSelectNextOldestCodeBlock() {
-        if (this.codeSelectSelectedIndex.get() == this.codeSelectBottom) {
-            if (this.codeSelectBlockRefArray.length > 0) {
-                this.codeSelectSelectedIndex.set(this.codeSelectBlockRefArray.length);
-            } else {
-                return;
-            }
-        } else if (this.codeSelectSelectedIndex.get() == this.codeSelectTop) {
+        if (this.codeSelectSelectedIndex.get() == null && this.codeSelectBlockRefArray.length > 0) {
+            console.log("triggered====== 1");
+            // if (this.codeSelectBlockRefArray.length > 0) {
+            //     this.codeSelectSelectedIndex.set(this.codeSelectBlockRefArray.length - 1);
+            // }
+            this.setCodeSelectSelectedCodeBlock(this.codeSelectBlockRefArray.length - 1);
             return;
+            // } else if (this.codeSelectSelectedIndex.get() == this.codeSelectTop) {
+            //     console.log("triggered====== 2");
+            //     return;
         }
         const decBlockIndex = this.codeSelectSelectedIndex.get() - 1;
-        if (decBlockIndex < 0) {
-            this.codeSelectDeselectAll(this.codeSelectTop);
-            if (this.aiChatWindowRef?.current != null) {
-                this.aiChatWindowRef.current.scrollTop = 0;
-            }
-        }
+        // if (decBlockIndex < 0) {
+        //     console.log("triggered====== 3");
+
+        //     this.codeSelectDeselectAll(this.codeSelectTop);
+        //     if (this.aiChatWindowRef?.current != null) {
+        //         this.aiChatWindowRef.current.scrollTop = 0;
+        //     }
+        // }
         if (decBlockIndex >= 0 && decBlockIndex < this.codeSelectBlockRefArray.length) {
+            console.log("triggered====== 4");
+
             this.setCodeSelectSelectedCodeBlock(decBlockIndex);
         }
     }
@@ -647,7 +725,7 @@ class InputModel {
         return blockIndex == this.codeSelectSelectedIndex.get();
     }
 
-    codeSelectDeselectAll(direction: number = this.codeSelectBottom) {
+    codeSelectDeselectAll(direction: number) {
         if (this.codeSelectSelectedIndex.get() == direction) {
             return;
         }
@@ -659,6 +737,7 @@ class InputModel {
 
     @mobx.action
     openAIAssistantChat(): void {
+        console.log("openAIAssistantChat");
         this.setActiveAuxView(appconst.InputAuxView_AIChat);
         this.setAuxViewFocus(true);
         this.globalModel.sendActivity("aichat-open");
@@ -775,6 +854,7 @@ class InputModel {
     }
 
     set curLine(val: string) {
+        console.log("triggered set curLine");
         this.lastCurLine = this.curLine;
         const hidx = this.historyIndex.get();
         mobx.action(() => {

src/models/model.ts

@@ -21,6 +21,7 @@ import { KeybindManager, adaptFromReactOrNativeKeyEvent, setKeyUtilPlatform } fr
 import { Session } from "./session";
 import { ScreenLines } from "./screenlines";
 import { InputModel } from "./input";
+import { AIChatModel } from "./aichat";
 import { PluginsModel } from "./plugins";
 import { BookmarksModel } from "./bookmarks";
 import { HistoryViewModel } from "./historyview";
@@ -113,6 +114,7 @@ class Model {
 
     keybindManager: KeybindManager;
     inputModel: InputModel;
+    aichatModel: AIChatModel;
     pluginsModel: PluginsModel;
     bookmarksModel: BookmarksModel;
     historyViewModel: HistoryViewModel;
@@ -162,6 +164,7 @@ class Model {
         this.initSystemKeybindings();
         this.initAppKeybindings();
         this.inputModel = new InputModel(this);
+        this.aichatModel = new AIChatModel(this);
         this.pluginsModel = new PluginsModel(this);
         this.bookmarksModel = new BookmarksModel(this);
         this.historyViewModel = new HistoryViewModel(this);
@@ -1041,6 +1044,7 @@ class Model {
                 } else if (update.cmdline != null) {
                     this.inputModel.updateCmdLine(update.cmdline);
                 } else if (update.openaicmdinfochat != null) {
+                    this.aichatModel.setOpenAICmdInfoChat(update.openaicmdinfochat);
                     this.inputModel.setOpenAICmdInfoChat(update.openaicmdinfochat);
                 } else if (update.screenstatusindicator != null) {
                     this.updateScreenStatusIndicators([update.screenstatusindicator]);

src/plugins/markdown/markdown.tsx

@@ -6,6 +6,7 @@ import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
 import { sprintf } from "sprintf-js";
 import { Markdown } from "@/elements";
+import { GlobalModel } from "@/models/global";
 
 import "./markdown.less";
 

src/plugins/openai/openai.tsx

@@ -8,6 +8,7 @@ import { debounce } from "throttle-debounce";
 import { boundMethod } from "autobind-decorator";
 import { PacketDataBuffer } from "../core/ptydata";
 import { Markdown } from "@/elements";
+import { GlobalModel } from "@/models/global";
 
 import "./openai.less";