save work

src/app/common/elements/markdown.tsx

@@ -50,6 +50,7 @@ class CodeBlockMarkdown extends React.Component<
     }
 
     render() {
+        console.log("this.blockIndex", this.blockIndex);
         let selected = this.blockIndex == this.props.codeSelectSelectedIndex;
         return (
             <pre ref={this.blockRef} className={cn({ selected: selected })} onClick={this.handleClick}>

src/app/sidebar/aichat.tsx

@@ -63,11 +63,13 @@ class ChatContent extends React.Component<{ chatWindowRef }, {}> {
     componentDidUpdate() {
         this.chatListKeyCount = 0;
         if (this.containerRef?.current && this.osInstance) {
-            const { viewport } = this.osInstance.elements();
+            const { viewport, scrollOffsetElement } = this.osInstance.elements();
-            viewport.scrollTo({
+            const { scrollTop } = scrollOffsetElement;
-                behavior: "auto",
+            console.log("this.props.chatWindowRef.current.scrollTop", scrollTop);
-                top: this.props.chatWindowRef.current.scrollHeight,
+            // viewport.scrollTo({
-            });
+            //     behavior: "auto",
+            //     top: this.props.chatWindowRef.current.scrollHeight,
+            // });
         }
     }
 
@@ -80,12 +82,14 @@ class ChatContent extends React.Component<{ chatWindowRef }, {}> {
 
     @boundMethod
     onScrollbarInitialized(instance) {
+        console.log("got here");
+        GlobalModel.inputModel.setChatOsInstance(instance);
         this.osInstance = instance;
         const { viewport } = instance.elements();
-        viewport.scrollTo({
+        // viewport.scrollTo({
-            behavior: "auto",
+        //     behavior: "auto",
-            top: this.props.chatWindowRef.current.scrollHeight,
+        //     top: this.props.chatWindowRef.current.scrollHeight,
-        });
+        // });
     }
 
     renderError(err: string): any {
@@ -309,6 +313,8 @@ class AIChat extends React.Component<{}, {}> {
             appconst.InputAuxView_AIChat
         );
         console.log("renderAIChatKeybindings=====", renderAIChatKeybindings);
+        console.log("codeSelectBlockRefArray", GlobalModel.inputModel.codeSelectBlockRefArray);
+
         return (
             <div className="sidebar-aichat">
                 <If condition={renderAIChatKeybindings}>

src/models/aichat.ts

@@ -4,7 +4,6 @@
 import type React from "react";
 import * as mobx from "mobx";
 import { Model } from "./model";
-import { GlobalCommandRunner } from "./global";
 
 class AIChatModel {
     globalModel: Model;

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,6 +30,7 @@ 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);
     codeSelectUuid: string;
@@ -547,6 +550,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();
@@ -565,11 +573,14 @@ class InputModel {
         }
     }
 
+    @mobx.action
     addCodeBlockToCodeSelect(blockRef: React.RefObject<HTMLElement>, uuid: string): number {
         let rtn = -1;
+        // 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.codeSelectUuid = uuid;
-            this.codeSelectBlockRefArray = [];
+            // this.codeSelectBlockRefArray = [];
         }
         rtn = this.codeSelectBlockRefArray.length;
         this.codeSelectBlockRefArray.push(blockRef);
@@ -578,6 +589,10 @@ 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;
@@ -597,6 +612,39 @@ 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