automagik-forge 0.1.11 → 0.1.13

package/frontend/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-[10000] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-[10000] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

package/frontend/src/components/ui/file-search-textarea.tsx

@@ -0,0 +1,292 @@
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AutoExpandingTextarea } from '@/components/ui/auto-expanding-textarea';
+import { projectsApi } from '@/lib/api';
+
+interface FileSearchResult {
+  path: string;
+  name: string;
+}
+
+interface FileSearchTextareaProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  rows?: number;
+  disabled?: boolean;
+  className?: string;
+  projectId?: string;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  maxRows?: number;
+}
+
+export function FileSearchTextarea({
+  value,
+  onChange,
+  placeholder,
+  rows = 3,
+  disabled = false,
+  className,
+  projectId,
+  onKeyDown,
+  maxRows = 10,
+}: FileSearchTextareaProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<FileSearchResult[]>([]);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const [atSymbolPosition, setAtSymbolPosition] = useState(-1);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Search for files when query changes
+  useEffect(() => {
+    if (!searchQuery || !projectId || searchQuery.length < 1) {
+      setSearchResults([]);
+      setShowDropdown(false);
+      return;
+    }
+
+    const searchFiles = async () => {
+      setIsLoading(true);
+
+      try {
+        const result = await projectsApi.searchFiles(projectId, searchQuery);
+        setSearchResults(result);
+        setShowDropdown(true);
+        setSelectedIndex(-1);
+      } catch (error) {
+        console.error('Failed to search files:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    const debounceTimer = setTimeout(searchFiles, 300);
+    return () => clearTimeout(debounceTimer);
+  }, [searchQuery, projectId]);
+
+  // Handle text changes and detect @ symbol
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    const newCursorPosition = e.target.selectionStart || 0;
+
+    onChange(newValue);
+
+    // Check if @ was just typed
+    const textBeforeCursor = newValue.slice(0, newCursorPosition);
+    const lastAtIndex = textBeforeCursor.lastIndexOf('@');
+
+    if (lastAtIndex !== -1) {
+      // Check if there's no space after the @ (still typing the search query)
+      const textAfterAt = textBeforeCursor.slice(lastAtIndex + 1);
+      const hasSpace = textAfterAt.includes(' ') || textAfterAt.includes('\n');
+
+      if (!hasSpace) {
+        setAtSymbolPosition(lastAtIndex);
+        setSearchQuery(textAfterAt);
+        return;
+      }
+    }
+
+    // If no valid @ context, hide dropdown
+    setShowDropdown(false);
+    setSearchQuery('');
+    setAtSymbolPosition(-1);
+  };
+
+  // Handle keyboard navigation
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    // Handle dropdown navigation first
+    if (showDropdown && searchResults.length > 0) {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            prev < searchResults.length - 1 ? prev + 1 : 0
+          );
+          return;
+        case 'ArrowUp':
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            prev > 0 ? prev - 1 : searchResults.length - 1
+          );
+          return;
+        case 'Enter':
+          if (selectedIndex >= 0) {
+            e.preventDefault();
+            selectFile(searchResults[selectedIndex]);
+            return;
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          setShowDropdown(false);
+          setSearchQuery('');
+          setAtSymbolPosition(-1);
+          return;
+      }
+    }
+
+    // Call the passed onKeyDown handler
+    onKeyDown?.(e);
+  };
+
+  // Select a file and insert it into the text
+  const selectFile = (file: FileSearchResult) => {
+    if (atSymbolPosition === -1) return;
+
+    const beforeAt = value.slice(0, atSymbolPosition);
+    const afterQuery = value.slice(atSymbolPosition + 1 + searchQuery.length);
+    const newValue = beforeAt + file.path + afterQuery;
+
+    onChange(newValue);
+    setShowDropdown(false);
+    setSearchQuery('');
+    setAtSymbolPosition(-1);
+
+    // Focus back to textarea
+    setTimeout(() => {
+      if (textareaRef.current) {
+        const newCursorPos = atSymbolPosition + file.path.length;
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(newCursorPos, newCursorPos);
+      }
+    }, 0);
+  };
+
+  // Calculate dropdown position relative to textarea (simpler, more stable approach)
+  const getDropdownPosition = () => {
+    if (!textareaRef.current) return { top: 0, left: 0, maxHeight: 240 };
+
+    const textareaRect = textareaRef.current.getBoundingClientRect();
+    const dropdownWidth = 256; // min-w-64 = 256px
+    const maxDropdownHeight = 320;
+    const minDropdownHeight = 120;
+
+    // Position dropdown below the textarea by default
+    let finalTop = textareaRect.bottom + 4; // 4px gap
+    let finalLeft = textareaRect.left;
+    let maxHeight = maxDropdownHeight;
+
+    // Ensure dropdown doesn't go off the right edge
+    if (finalLeft + dropdownWidth > window.innerWidth - 16) {
+      finalLeft = window.innerWidth - dropdownWidth - 16;
+    }
+
+    // Ensure dropdown doesn't go off the left edge
+    if (finalLeft < 16) {
+      finalLeft = 16;
+    }
+
+    // Calculate available space below and above textarea
+    const availableSpaceBelow = window.innerHeight - textareaRect.bottom - 32;
+    const availableSpaceAbove = textareaRect.top - 32;
+
+    // If not enough space below, position above
+    if (
+      availableSpaceBelow < minDropdownHeight &&
+      availableSpaceAbove > availableSpaceBelow
+    ) {
+      // Get actual height from rendered dropdown
+      const actualHeight =
+        dropdownRef.current?.getBoundingClientRect().height ||
+        minDropdownHeight;
+      finalTop = textareaRect.top - actualHeight - 4;
+      maxHeight = Math.min(
+        maxDropdownHeight,
+        Math.max(availableSpaceAbove, minDropdownHeight)
+      );
+    } else {
+      // Position below with available space
+      maxHeight = Math.min(
+        maxDropdownHeight,
+        Math.max(availableSpaceBelow, minDropdownHeight)
+      );
+    }
+
+    return { top: finalTop, left: finalLeft, maxHeight };
+  };
+
+  // Use effect to reposition when dropdown content changes
+  useEffect(() => {
+    if (showDropdown && dropdownRef.current) {
+      // Small delay to ensure content is rendered
+      setTimeout(() => {
+        const newPosition = getDropdownPosition();
+        if (dropdownRef.current) {
+          dropdownRef.current.style.top = `${newPosition.top}px`;
+          dropdownRef.current.style.left = `${newPosition.left}px`;
+          dropdownRef.current.style.maxHeight = `${newPosition.maxHeight}px`;
+        }
+      }, 0);
+    }
+  }, [searchResults.length, showDropdown]);
+
+  const dropdownPosition = getDropdownPosition();
+
+  return (
+    <div
+      className={`relative ${className?.includes('flex-1') ? 'flex-1' : ''}`}
+    >
+      <AutoExpandingTextarea
+        ref={textareaRef}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        rows={rows}
+        disabled={disabled}
+        className={className}
+        maxRows={maxRows}
+      />
+
+      {showDropdown &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            className="fixed bg-background border border-border rounded-md shadow-lg overflow-y-auto min-w-64"
+            style={{
+              top: dropdownPosition.top,
+              left: dropdownPosition.left,
+              maxHeight: dropdownPosition.maxHeight,
+              zIndex: 10000, // Higher than dialog z-[9999]
+            }}
+          >
+            {isLoading ? (
+              <div className="p-2 text-sm text-muted-foreground">
+                Searching...
+              </div>
+            ) : searchResults.length === 0 ? (
+              <div className="p-2 text-sm text-muted-foreground">
+                No files found
+              </div>
+            ) : (
+              <div className="py-1">
+                {searchResults.map((file, index) => (
+                  <div
+                    key={file.path}
+                    className={`px-3 py-2 cursor-pointer text-sm ${
+                      index === selectedIndex
+                        ? 'bg-blue-50 text-blue-900'
+                        : 'hover:bg-muted'
+                    }`}
+                    onClick={() => selectFile(file)}
+                  >
+                    <div className="font-medium truncate">{file.name}</div>
+                    <div className="text-xs text-muted-foreground truncate">
+                      {file.path}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+}