Merge pull request #518 from kubet/fix/pointer-native-event

Fix/pointer native event

frontend/src/components/sidebar/nav-agents.tsx

@@ -462,8 +462,7 @@ export function NavAgents() {
                     <div className="relative">
                       <SidebarMenuButton
                         asChild
-                        className={`relative ${
+                        className={`relative ${isActive
-                          isActive
                           ? 'bg-accent text-accent-foreground font-medium'
                           : isSelected
                             ? 'bg-primary/10'
@@ -485,23 +484,20 @@ export function NavAgents() {
                               <>
                                 {/* MessagesSquare icon - hidden on hover if not selected */}
                                 <MessagesSquare
-                                  className={`h-4 w-4 transition-opacity duration-150 ${
+                                  className={`h-4 w-4 transition-opacity duration-150 ${isSelected ? 'opacity-0' : 'opacity-100 group-hover/icon:opacity-0'
-                                    isSelected ? 'opacity-0' : 'opacity-100 group-hover/icon:opacity-0'
                                     }`}
                                 />
 
                                 {/* Checkbox - appears on hover or when selected */}
                                 <div
-                                  className={`absolute inset-0 flex items-center justify-center transition-opacity duration-150 ${
+                                  className={`absolute inset-0 flex items-center justify-center transition-opacity duration-150 ${isSelected
-                                    isSelected 
                                     ? 'opacity-100'
                                     : 'opacity-0 group-hover/icon:opacity-100'
                                     }`}
                                   onClick={(e) => toggleThreadSelection(thread.threadId, e)}
                                 >
                                   <div
-                                    className={`h-4 w-4 border rounded cursor-pointer hover:bg-muted/50 transition-colors flex items-center justify-center ${
+                                    className={`h-4 w-4 border rounded cursor-pointer hover:bg-muted/50 transition-colors flex items-center justify-center ${isSelected
-                                      isSelected 
                                       ? 'bg-primary border-primary'
                                       : 'border-muted-foreground/30 bg-background'
                                       }`}
@@ -520,7 +516,14 @@ export function NavAgents() {
                   {state !== 'collapsed' && !isSelected && (
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
-                        <SidebarMenuAction showOnHover className="group-hover:opacity-100">
+                        <SidebarMenuAction
+                          showOnHover
+                          className="group-hover:opacity-100"
+                          onClick={() => {
+                            // Ensure pointer events are enabled when dropdown opens
+                            document.body.style.pointerEvents = 'auto';
+                          }}
+                        >
                           <MoreHorizontal />
                           <span className="sr-only">More</span>
                         </SidebarMenuAction>

frontend/src/components/sidebar/share-modal.tsx

@@ -29,6 +29,13 @@ export function ShareModal({ isOpen, onClose, threadId, projectId }: ShareModalP
     const [isChecking, setIsChecking] = useState(false);
     const [isCopying, setIsCopying] = useState(false);
 
+    // Reset pointer events when modal opens
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.pointerEvents = 'auto';
+        }
+    }, [isOpen]);
+
     const updateThreadMutation = useUpdateThreadMutation();
 
     useEffect(() => {

frontend/src/components/thread/DeleteConfirmationDialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Loader2 } from 'lucide-react';
 
 import {
@@ -32,6 +32,13 @@ export function DeleteConfirmationDialog({
   threadName,
   isDeleting,
 }: DeleteConfirmationDialogProps) {
+  // Reset pointer events when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.pointerEvents = 'auto';
+    }
+  }, [isOpen]);
+
   return (
     <AlertDialog open={isOpen} onOpenChange={onClose}>
       <AlertDialogContent>

frontend/src/components/thread/chat-input/message-input.tsx

@@ -96,7 +96,7 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
     }, [value, ref]);
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
+      if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
         e.preventDefault();
         if (
           (value.trim() || uploadedFiles.length > 0) &&