Merge pull request #187 from ahmad2b/ahmad2b/ask-opencanvas-visibility

fix #154 (task 1): Restrict AskOpenCanvas visibility to renderer boundaries
langchain-ai · Nov 11, 2024 · b5999f8 · b5999f8
2 parents 8e26f2e + fb4c045
commit b5999f8
Showing 1 changed file with 42 additions and 20 deletions.
diff --git a/src/components/artifacts/ArtifactRenderer.tsx b/src/components/artifacts/ArtifactRenderer.tsx
@@ -144,34 +144,55 @@ function ArtifactRendererComponent(props: ArtifactRendererProps) {
   const [isSelectionActive, setIsSelectionActive] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [isHoveringOverArtifact, setIsHoveringOverArtifact] = useState(false);
+  const [isValidSelectionOrigin, setIsValidSelectionOrigin] = useState(false);
 
   const handleMouseUp = useCallback(() => {
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0 && contentRef.current) {
       const range = selection.getRangeAt(0);
       const selectedText = range.toString().trim();
 
-      if (selectedText) {
-        const rects = range.getClientRects();
-        const firstRect = rects[0];
-        const lastRect = rects[rects.length - 1];
-        const contentRect = contentRef.current.getBoundingClientRect();
-
-        const boxWidth = 400; // Approximate width of the selection box
-        let left = lastRect.right - contentRect.left - boxWidth;
+      // Check if the selection originated from within the artifact content
+      if (selectedText && artifactContentRef.current) {
+        const isWithinArtifact = (node: Node | null): boolean => {
+          if (!node) return false;
+          if (node === artifactContentRef.current) return true;
+          return isWithinArtifact(node.parentNode);
+        };
+
+        // Check both start and end containers
+        const startInArtifact = isWithinArtifact(range.startContainer);
+        const endInArtifact = isWithinArtifact(range.endContainer);
+
+        if (startInArtifact && endInArtifact) {
+          setIsValidSelectionOrigin(true);
+          const rects = range.getClientRects();
+          const firstRect = rects[0];
+          const lastRect = rects[rects.length - 1];
+          const contentRect = contentRef.current.getBoundingClientRect();
+
+          const boxWidth = 400; // Approximate width of the selection box
+          let left = lastRect.right - contentRect.left - boxWidth;
+
+          if (left < 0) {
+            left = Math.min(0, firstRect.left - contentRect.left);
+          }
+          // Ensure the box doesn't go beyond the left edge
+          if (left < 0) {
+            left = Math.min(0, firstRect.left - contentRect.left);
+          }
 
-        // Ensure the box doesn't go beyond the left edge
-        if (left < 0) {
-          left = Math.min(0, firstRect.left - contentRect.left);
+          setSelectionBox({
+            top: lastRect.bottom - contentRect.top,
+            left: left,
+            text: selectedText,
+          });
+          setIsInputVisible(false);
+          setIsSelectionActive(true);
+        } else {
+          setIsValidSelectionOrigin(false);
+          handleCleanupState();
         }
-
-        setSelectionBox({
-          top: lastRect.bottom - contentRect.top,
-          left: left,
-          text: selectedText,
-        });
-        setIsInputVisible(false);
-        setIsSelectionActive(true);
       }
     }
   }, []);
@@ -181,6 +202,7 @@ function ArtifactRendererComponent(props: ArtifactRendererProps) {
     setSelectionBox(undefined);
     setSelectionIndexes(undefined);
     setIsSelectionActive(false);
+    setIsValidSelectionOrigin(false);
     setInputValue("");
   };
 
@@ -395,7 +417,7 @@ function ArtifactRendererComponent(props: ArtifactRendererProps) {
             className="absolute top-0 left-0 w-full h-full pointer-events-none"
           />
         </div>
-        {selectionBox && isSelectionActive && (
+        {selectionBox && isSelectionActive && isValidSelectionOrigin && (
           <AskOpenCanvas
             ref={selectionBoxRef}
             inputValue={inputValue}