save

src/app/common/elements/scrollbars.tsx

@@ -0,0 +1,16 @@
+import { OverlayScrollbarsComponentProps, useOverlayScrollbars } from "overlayscrollbars-react";
+import React from "react";
+
+export const ScrollbarsComponent = (props: {
+    options?: OverlayScrollbarsComponentProps["options"];
+    children: React.ReactNode;
+    childrenRef: React.RefObject<any>;
+}) => {
+    const [initialize, instance] = useOverlayScrollbars({ options: props.options });
+
+    React.useEffect(() => {
+        initialize(props.childrenRef.current);
+    }, [initialize, props.childrenRef.current]);
+
+    return <div ref={props.childrenRef}>{props.children}</div>;
+};

src/app/workspace/cmdinput/aichat.tsx

@@ -11,6 +11,8 @@ import { Markdown } from "@/elements";
 import { AuxiliaryCmdView } from "./auxview";
 
 import "./aichat.less";
+import { UseOverlayScrollbarsInitialization, useOverlayScrollbars } from "overlayscrollbars-react";
+import { ScrollbarsComponent } from "@/app/common/elements/scrollbars";
 
 class AIChatKeybindings extends React.Component<{ AIChatObject: AIChat }, {}> {
     componentDidMount(): void {
@@ -70,7 +72,7 @@ class AIChat extends React.Component<{}, {}> {
 
     componentDidMount() {
         const inputModel = GlobalModel.inputModel;
-        if (this.chatWindowScrollRef != null && this.chatWindowScrollRef.current != null) {
+        if (this.chatWindowScrollRef?.current != null) {
             this.chatWindowScrollRef.current.scrollTop = this.chatWindowScrollRef.current.scrollHeight;
         }
         if (this.textAreaRef.current != null) {
@@ -82,7 +84,7 @@ class AIChat extends React.Component<{}, {}> {
     }
 
     componentDidUpdate() {
-        if (this.chatWindowScrollRef != null && this.chatWindowScrollRef.current != null) {
+        if (this.chatWindowScrollRef?.current != null) {
             this.chatWindowScrollRef.current.scrollTop = this.chatWindowScrollRef.current.scrollHeight;
         }
     }
@@ -258,11 +260,16 @@ class AIChat extends React.Component<{}, {}> {
                 <If condition={renderKeybindings}>
                     <AIChatKeybindings AIChatObject={this}></AIChatKeybindings>
                 </If>
-                <div className="chat-window" ref={this.chatWindowScrollRef}>
-                    <For each="chitem" index="idx" of={chatMessageItems}>
-                        {this.renderChatMessage(chitem)}
-                    </For>
-                </div>
+                <ScrollbarsComponent
+                    childrenRef={this.chatWindowScrollRef}
+                    options={{ scrollbars: { autoHide: "leave" } }}
+                >
+                    <div className="chat-window" ref={this.chatWindowScrollRef}>
+                        <For each="chitem" index="idx" of={chatMessageItems}>
+                            {this.renderChatMessage(chitem)}
+                        </For>
+                    </div>
+                </ScrollbarsComponent>
                 <div className="chat-input">
                     <textarea
                         key="main"

src/app/workspace/cmdinput/historyinfo.tsx

@@ -15,6 +15,7 @@ import { isBlank } from "@/util/util";
 
 import "./historyinfo.less";
 import { AuxiliaryCmdView } from "./auxview";
+import { ScrollbarsComponent } from "@/app/common/elements/scrollbars";
 
 dayjs.extend(localizedFormat);
 
@@ -153,6 +154,7 @@ class HistoryInfo extends React.Component<{}, {}> {
     lastClickHNum: string = null;
     lastClickTs: number = 0;
     containingText: mobx.IObservableValue<string> = mobx.observable.box("");
+    historyItemsRef: React.RefObject<HTMLDivElement> = React.createRef();
 
     componentDidMount() {
         const inputModel = GlobalModel.inputModel;
@@ -239,33 +241,39 @@ class HistoryInfo extends React.Component<{}, {}> {
         return (
             <AuxiliaryCmdView
                 title="History"
-                className="cmd-history hide-scrollbar"
+                className="cmd-history"
                 onClose={this.handleClose}
                 titleBarContents={this.getTitleBarContents()}
                 iconClass="fa-sharp fa-solid fa-clock-rotate-left"
             >
-                <div
-                    className={cn(
-                        "history-items",
-                        { "show-remotes": !opts.limitRemote },
-                        { "show-sessions": opts.queryType == "global" }
-                    )}
+                <ScrollbarsComponent
+                    childrenRef={this.historyItemsRef}
+                    options={{ scrollbars: { autoHide: "scroll" } }}
                 >
-                    <If condition={hitems.length == 0}>[no history]</If>
-                    <If condition={hitems.length > 0}>
-                        <For each="hitem" index="idx" of={hitems}>
-                            <HItem
-                                key={hitem.historyid}
-                                hitem={hitem}
-                                isSelected={hitem == selItem}
-                                opts={opts}
-                                snames={snames}
-                                scrNames={scrNames}
-                                onClick={this.handleItemClick}
-                            ></HItem>
-                        </For>
-                    </If>
-                </div>
+                    <div
+                        className={cn(
+                            "history-items",
+                            { "show-remotes": !opts.limitRemote },
+                            { "show-sessions": opts.queryType == "global" }
+                        )}
+                        ref={this.historyItemsRef}
+                    >
+                        <If condition={hitems.length == 0}>[no history]</If>
+                        <If condition={hitems.length > 0}>
+                            <For each="hitem" index="idx" of={hitems}>
+                                <HItem
+                                    key={hitem.historyid}
+                                    hitem={hitem}
+                                    isSelected={hitem == selItem}
+                                    opts={opts}
+                                    snames={snames}
+                                    scrNames={scrNames}
+                                    onClick={this.handleItemClick}
+                                ></HItem>
+                            </For>
+                        </If>
+                    </div>
+                </ScrollbarsComponent>
             </AuxiliaryCmdView>
         );
     }