From 8fb831fac611a2d6ccf261adbba515e849c7e2e3 Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Thu, 19 Sep 2024 16:47:59 -0700
Subject: [PATCH] focus selection stuff

---
 frontend/app/block/block.tsx        |  5 ++---
 frontend/app/view/waveai/waveai.tsx | 26 ++++++++------------------
 frontend/util/focusutil.ts          |  2 +-
 3 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx
index aff83201..a63cceb2 100644
--- a/frontend/app/block/block.tsx
+++ b/frontend/app/block/block.tsx
@@ -14,7 +14,7 @@ import {
     unregisterBlockComponentModel,
 } from "@/store/global";
 import * as WOS from "@/store/wos";
-import { getElemAsStr } from "@/util/focusutil";
+import { focusedBlockId, getElemAsStr } from "@/util/focusutil";
 import * as util from "@/util/util";
 import { CpuPlotView, CpuPlotViewModel, makeCpuPlotViewModel } from "@/view/cpuplot/cpuplot";
 import { HelpView, HelpViewModel, makeHelpViewModel } from "@/view/helpview/helpview";
@@ -159,12 +159,11 @@ const BlockFull = React.memo(({ nodeModel, viewModel }: FullBlockProps) => {
             return;
         }
         setBlockClicked(false);
-        const focusWithin = blockRef.current?.contains(document.activeElement);
+        const focusWithin = focusedBlockId() == nodeModel.blockId;
         if (!focusWithin) {
             setFocusTarget();
         }
         if (!isFocused) {
-            console.log("blockClicked focus", nodeModel.blockId);
             nodeModel.focusNode();
         }
     }, [blockClicked, isFocused]);
diff --git a/frontend/app/view/waveai/waveai.tsx b/frontend/app/view/waveai/waveai.tsx
index 44c13388..384dba4c 100644
--- a/frontend/app/view/waveai/waveai.tsx
+++ b/frontend/app/view/waveai/waveai.tsx
@@ -342,18 +342,24 @@ const ChatWindow = memo(
 
         const handleScrollbarInitialized = (instance: OverlayScrollbars) => {
             const { viewport } = instance.elements();
+            viewport.removeAttribute("tabindex");
             viewport.scrollTo({
                 behavior: "auto",
                 top: chatWindowRef.current?.scrollHeight || 0,
             });
         };
 
+        const handleScrollbarUpdated = (instance: OverlayScrollbars) => {
+            const { viewport } = instance.elements();
+            viewport.removeAttribute("tabindex");
+        };
+
         return (
             <OverlayScrollbarsComponent
                 ref={osRef}
                 className="scrollable"
                 options={{ scrollbars: { autoHide: "leave" } }}
-                events={{ initialized: handleScrollbarInitialized }}
+                events={{ initialized: handleScrollbarInitialized, updated: handleScrollbarUpdated }}
             >
                 <div ref={chatWindowRef} className="chat-window" style={msgWidths}>
                     <div className="filler"></div>
@@ -491,22 +497,6 @@ const WaveAi = ({ model }: { model: WaveAiModel; blockId: string }) => {
         setSelectedBlockIdx(null);
     }, [messages, value]);
 
-    const handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {
-        inputRef.current?.focus();
-
-        const target = event.target as HTMLElement;
-        if (
-            target.closest(".copy-button") ||
-            target.closest(".fa-square-terminal") ||
-            target.closest(".waveai-input")
-        ) {
-            return;
-        }
-
-        const pre = target.closest("pre");
-        updatePreTagOutline(pre);
-    };
-
     const updateScrollTop = () => {
         const pres = chatWindowRef.current?.querySelectorAll("pre");
         if (!pres || selectedBlockIdx === null) return;
@@ -610,7 +600,7 @@ const WaveAi = ({ model }: { model: WaveAiModel; blockId: string }) => {
     }, [locked, handleEnterKeyPressed]);
 
     return (
-        <div ref={waveaiRef} className="waveai" onClick={handleContainerClick}>
+        <div ref={waveaiRef} className="waveai">
             <ChatWindow ref={osRef} chatWindowRef={chatWindowRef} messages={messages} msgWidths={msgWidths} />
             <div className="waveai-controls">
                 <div className="waveai-input-wrapper">
diff --git a/frontend/util/focusutil.ts b/frontend/util/focusutil.ts
index a5c9bb16..ad97607b 100644
--- a/frontend/util/focusutil.ts
+++ b/frontend/util/focusutil.ts
@@ -54,7 +54,7 @@ export function focusedBlockId(): string {
         }
     }
     const sel = document.getSelection();
-    if (sel && sel.anchorNode) {
+    if (sel && sel.anchorNode && sel.rangeCount > 0 && !sel.isCollapsed) {
         let anchor = sel.anchorNode;
         if (anchor instanceof Text) {
             anchor = anchor.parentElement;