sparkecoder 0.1.22 → 0.1.23

package/web/.next/standalone/web/src/components/ai-elements/mention-input.tsx

@@ -0,0 +1,809 @@
+"use client";
+
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  type KeyboardEvent,
+  type ChangeEvent,
+  createContext,
+  useContext,
+  useMemo,
+  type ReactNode,
+  type ComponentProps,
+  type ClipboardEventHandler,
+} from "react";
+import { cn } from "@/lib/utils";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverAnchor,
+} from "@/components/ui/popover";
+import { useWorkspaceFiles } from "@/hooks/use-workspace-files";
+import { usePromptInputAttachments } from "@/components/ai-elements/prompt-input";
+import {
+  FileIcon,
+  FolderIcon,
+  HashIcon,
+  HelpCircleIcon,
+  TerminalIcon,
+} from "lucide-react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface FileMention {
+  id: string;
+  type: "file" | "folder";
+  path: string;
+  name: string;
+}
+
+export interface SlashCommand {
+  id: string;
+  name: string;
+  description: string;
+  icon?: ReactNode;
+  /** Text to insert when this command is selected */
+  prompt?: string;
+  /** Optional action to run (for special commands like clear) */
+  action?: () => void;
+}
+
+interface TriggerState {
+  type: "file" | "command";
+  query: string;
+  startIndex: number; // Where the trigger character is
+  endIndex: number; // Current cursor position
+}
+
+// ============================================================================
+// Context - tracks mentions found in the text (for extraction on submit)
+// ============================================================================
+
+interface MentionInputContextValue {
+  /** Extract mentions from text (parses @path patterns) */
+  extractMentions: (text: string) => FileMention[];
+  /** Clear any internal state */
+  clear: () => void;
+}
+
+const MentionInputContext = createContext<MentionInputContextValue | null>(null);
+
+export function useMentionInput() {
+  const ctx = useContext(MentionInputContext);
+  if (!ctx) {
+    throw new Error("useMentionInput must be used within MentionInputProvider");
+  }
+  return ctx;
+}
+
+// Regex to match @mentions in text (matches @path/to/file or @folder/)
+const MENTION_REGEX = /@([\w./-]+\/?)/g;
+
+// ============================================================================
+// Default Slash Commands - Each inserts a prompt template
+// ============================================================================
+
+export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
+  {
+    id: "help",
+    name: "help",
+    description: "Ask about available features",
+    icon: <HelpCircleIcon className="size-4" />,
+    prompt: "What commands and features are available? How can you help me?",
+  },
+  {
+    id: "terminal",
+    name: "terminal",
+    description: "Open a new terminal",
+    icon: <TerminalIcon className="size-4" />,
+    prompt: "Please open a new terminal session for me.",
+  },
+  {
+    id: "explain",
+    name: "explain",
+    description: "Explain a file or code",
+    icon: <FileIcon className="size-4" />,
+    prompt: "Please explain this code: ",
+  },
+  {
+    id: "fix",
+    name: "fix",
+    description: "Fix a bug or issue",
+    icon: <HashIcon className="size-4" />,
+    prompt: "Please help me fix this issue: ",
+  },
+  {
+    id: "refactor",
+    name: "refactor",
+    description: "Refactor code",
+    icon: <HashIcon className="size-4" />,
+    prompt: "Please refactor this code to be cleaner and more maintainable: ",
+  },
+  {
+    id: "test",
+    name: "test",
+    description: "Write tests",
+    icon: <HashIcon className="size-4" />,
+    prompt: "Please write tests for: ",
+  },
+];
+
+// ============================================================================
+// Provider - Simplified to extract mentions from text on demand
+// ============================================================================
+
+interface MentionInputProviderProps {
+  children: ReactNode;
+  onChange?: (mentions: FileMention[]) => void;
+}
+
+export function MentionInputProvider({
+  children,
+}: MentionInputProviderProps) {
+  // Extract mentions from text by parsing @path patterns
+  const extractMentions = useCallback((text: string): FileMention[] => {
+    const mentions: FileMention[] = [];
+    const regex = new RegExp(MENTION_REGEX.source, 'g');
+    let match;
+    
+    while ((match = regex.exec(text)) !== null) {
+      const path = match[1];
+      const isFolder = path.endsWith('/');
+      mentions.push({
+        id: `mention-${match.index}`,
+        type: isFolder ? 'folder' : 'file',
+        path: isFolder ? path.slice(0, -1) : path,
+        name: path.split('/').pop()?.replace(/\/$/, '') || path,
+      });
+    }
+    
+    return mentions;
+  }, []);
+
+  const clear = useCallback(() => {
+    // No-op for now, mentions are extracted from text
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      extractMentions,
+      clear,
+    }),
+    [extractMentions, clear]
+  );
+
+  return (
+    <MentionInputContext.Provider value={value}>
+      {children}
+    </MentionInputContext.Provider>
+  );
+}
+
+// ============================================================================
+// Highlight Backdrop - renders behind textarea to show styled mentions
+// ============================================================================
+
+interface HighlightBackdropProps {
+  value: string;
+  className?: string;
+}
+
+export function HighlightBackdrop({ value, className }: HighlightBackdropProps) {
+  // Parse text and highlight @mentions
+  const renderHighlightedText = () => {
+    const parts: ReactNode[] = [];
+    const regex = new RegExp(MENTION_REGEX.source, 'g');
+    let lastIndex = 0;
+    let match;
+
+    while ((match = regex.exec(value)) !== null) {
+      // Add text before the match
+      if (match.index > lastIndex) {
+        parts.push(
+          <span key={`text-${lastIndex}`}>
+            {value.slice(lastIndex, match.index)}
+          </span>
+        );
+      }
+
+      // Add the highlighted mention
+      parts.push(
+        <span
+          key={`mention-${match.index}`}
+          className="bg-primary/20 text-primary rounded px-0.5 -mx-0.5"
+        >
+          {match[0]}
+        </span>
+      );
+
+      lastIndex = match.index + match[0].length;
+    }
+
+    // Add remaining text
+    if (lastIndex < value.length) {
+      parts.push(
+        <span key={`text-${lastIndex}`}>
+          {value.slice(lastIndex)}
+        </span>
+      );
+    }
+
+    // Add a trailing space to match textarea behavior
+    parts.push(<span key="trailing">&nbsp;</span>);
+
+    return parts;
+  };
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 pointer-events-none whitespace-pre-wrap break-words overflow-hidden",
+        "px-3 py-2 text-sm text-transparent",
+        className
+      )}
+      aria-hidden="true"
+    >
+      {renderHighlightedText()}
+    </div>
+  );
+}
+
+// Legacy export for backwards compatibility - no longer shows chips
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function MentionsDisplay(_props: { className?: string }) {
+  // Mentions are now shown inline, this component is no longer needed
+  return null;
+}
+
+// ============================================================================
+// Mention Textarea with Popover
+// ============================================================================
+
+interface MentionTextareaProps
+  extends Omit<ComponentProps<"textarea">, "onChange"> {
+  sessionId: string;
+  value: string;
+  onChange: (value: string) => void;
+  onSlashCommand?: (command: SlashCommand) => void;
+  slashCommands?: SlashCommand[];
+  /** Show inline highlighting for @mentions (default: true) */
+  showHighlights?: boolean;
+}
+
+export function MentionTextarea({
+  sessionId,
+  value,
+  onChange,
+  onSlashCommand,
+  slashCommands = DEFAULT_SLASH_COMMANDS,
+  showHighlights = true,
+  className,
+  onKeyDown,
+  disabled,
+  ...props
+}: MentionTextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const [trigger, setTrigger] = useState<TriggerState | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });
+  const [isComposing, setIsComposing] = useState(false); // For IME input
+
+  // Get attachments context for paste handling
+  const attachments = usePromptInputAttachments();
+
+  // Fetch workspace files when @ is triggered
+  const { files, isLoading } = useWorkspaceFiles({
+    sessionId,
+    query: trigger?.type === "file" ? trigger.query : "",
+    enabled: trigger?.type === "file",
+    limit: 15,
+  });
+
+  // Filter slash commands based on query
+  const filteredCommands = useMemo(() => {
+    if (trigger?.type !== "command") return [];
+    const query = trigger.query.toLowerCase();
+    return slashCommands.filter(
+      (cmd) =>
+        cmd.name.toLowerCase().includes(query) ||
+        cmd.description.toLowerCase().includes(query)
+    );
+  }, [trigger, slashCommands]);
+
+  // Current items to display
+  const items = trigger?.type === "file" ? files : filteredCommands;
+  const showPopover = trigger !== null && (items.length > 0 || isLoading);
+
+  // Calculate popover position based on textarea caret
+  const updatePopoverPosition = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || !trigger) return;
+
+    // Create a hidden div to measure text up to caret
+    const mirror = document.createElement("div");
+    const style = window.getComputedStyle(textarea);
+
+    // Copy relevant styles
+    const stylesToCopy = [
+      "fontFamily",
+      "fontSize",
+      "fontWeight",
+      "lineHeight",
+      "padding",
+      "paddingLeft",
+      "paddingTop",
+      "border",
+      "borderWidth",
+      "boxSizing",
+      "whiteSpace",
+      "wordWrap",
+      "wordBreak",
+    ];
+
+    stylesToCopy.forEach((prop) => {
+      // @ts-expect-error - style props
+      mirror.style[prop] = style[prop];
+    });
+
+    mirror.style.position = "absolute";
+    mirror.style.visibility = "hidden";
+    mirror.style.height = "auto";
+    mirror.style.width = `${textarea.clientWidth}px`;
+    mirror.style.overflow = "hidden";
+
+    // Get text up to trigger position
+    const textBeforeTrigger = value.substring(0, trigger.startIndex);
+    mirror.textContent = textBeforeTrigger;
+
+    // Add a span for the trigger character to measure position
+    const marker = document.createElement("span");
+    marker.textContent = "|";
+    mirror.appendChild(marker);
+
+    document.body.appendChild(mirror);
+
+    // Get position relative to textarea
+    const textareaRect = textarea.getBoundingClientRect();
+    const markerRect = marker.getBoundingClientRect();
+    const mirrorRect = mirror.getBoundingClientRect();
+
+    // Calculate offset from textarea
+    const left = markerRect.left - mirrorRect.left;
+    const top = markerRect.top - mirrorRect.top + parseInt(style.lineHeight);
+
+    // Adjust for scroll
+    const scrollTop = textarea.scrollTop;
+
+    document.body.removeChild(mirror);
+
+    setPopoverPosition({
+      left: Math.min(left, textareaRect.width - 250), // Keep popover in view
+      top: top - scrollTop + 4,
+    });
+  }, [trigger, value]);
+
+  useEffect(() => {
+    updatePopoverPosition();
+  }, [updatePopoverPosition]);
+
+  // Detect trigger characters
+  const detectTrigger = useCallback(
+    (text: string, cursorPos: number) => {
+      if (cursorPos === 0) {
+        setTrigger(null);
+        return;
+      }
+
+      const beforeCursor = text.slice(0, cursorPos);
+
+      // Check for @ trigger (file mention)
+      const atMatch = beforeCursor.match(/@([^\s@]*)$/);
+      if (atMatch) {
+        setTrigger({
+          type: "file",
+          query: atMatch[1],
+          startIndex: cursorPos - atMatch[0].length,
+          endIndex: cursorPos,
+        });
+        setSelectedIndex(0);
+        return;
+      }
+
+      // Check for / trigger at start of line or after whitespace (slash command)
+      const slashMatch = beforeCursor.match(/(?:^|\s)\/([^\s]*)$/);
+      if (slashMatch) {
+        setTrigger({
+          type: "command",
+          query: slashMatch[1],
+          startIndex: cursorPos - slashMatch[1].length - 1,
+          endIndex: cursorPos,
+        });
+        setSelectedIndex(0);
+        return;
+      }
+
+      setTrigger(null);
+    },
+    []
+  );
+
+  // Handle input change
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      const cursorPos = e.target.selectionStart ?? 0;
+
+      onChange(newValue);
+      detectTrigger(newValue, cursorPos);
+    },
+    [onChange, detectTrigger]
+  );
+
+  // Handle selection from popover
+  const handleSelect = useCallback(
+    (item: (typeof files)[0] | SlashCommand) => {
+      if (!trigger || !textareaRef.current) return;
+
+      if (trigger.type === "file" && "path" in item) {
+        // Insert @path inline (replacing @query with @fullpath)
+        const before = value.slice(0, trigger.startIndex);
+        const after = value.slice(trigger.endIndex);
+        // Add trailing slash for folders, space after for usability
+        const mentionText = `@${item.path}${item.type === 'folder' ? '/' : ''} `;
+        const newValue = before + mentionText + after;
+
+        onChange(newValue);
+
+        // Set cursor after the inserted mention
+        setTimeout(() => {
+          if (textareaRef.current) {
+            const newPos = trigger.startIndex + mentionText.length;
+            textareaRef.current.selectionStart = newPos;
+            textareaRef.current.selectionEnd = newPos;
+            textareaRef.current.focus();
+          }
+        }, 0);
+      } else if (trigger.type === "command" && "description" in item) {
+        const cmd = item as SlashCommand;
+        
+        // If command has an action, call it (for special commands)
+        if (cmd.action) {
+          cmd.action();
+          onSlashCommand?.(cmd);
+          
+          // Remove the /command from input
+          const before = value.slice(0, trigger.startIndex);
+          const after = value.slice(trigger.endIndex);
+          onChange((before + after).trim());
+        } else if (cmd.prompt) {
+          // Insert the prompt text (replacing /command with the prompt)
+          const before = value.slice(0, trigger.startIndex);
+          const after = value.slice(trigger.endIndex);
+          const newValue = before + cmd.prompt + after;
+          
+          onChange(newValue);
+          
+          // Set cursor at end of inserted prompt
+          setTimeout(() => {
+            if (textareaRef.current) {
+              const newPos = trigger.startIndex + cmd.prompt!.length;
+              textareaRef.current.selectionStart = newPos;
+              textareaRef.current.selectionEnd = newPos;
+              textareaRef.current.focus();
+            }
+          }, 0);
+        } else {
+          // Fallback: just notify via callback
+          onSlashCommand?.(cmd);
+          
+          // Remove the /command from input
+          const before = value.slice(0, trigger.startIndex);
+          const after = value.slice(trigger.endIndex);
+          onChange((before + after).trim());
+        }
+        
+        setTimeout(() => {
+          textareaRef.current?.focus();
+        }, 0);
+      }
+
+      setTrigger(null);
+    },
+    [trigger, value, onChange, onSlashCommand]
+  );
+
+  // Handle keyboard navigation and form submission
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      // Call external handler first
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+
+      // When popover is showing, handle navigation
+      if (showPopover) {
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setSelectedIndex((prev) => (prev + 1) % items.length);
+            return;
+          case "ArrowUp":
+            e.preventDefault();
+            setSelectedIndex((prev) => (prev - 1 + items.length) % items.length);
+            return;
+          case "Tab":
+          case "Enter":
+            if (items.length > 0) {
+              e.preventDefault();
+              handleSelect(items[selectedIndex]);
+            }
+            return;
+          case "Escape":
+            e.preventDefault();
+            setTrigger(null);
+            return;
+        }
+      }
+
+      // When popover is NOT showing, handle Enter to submit form
+      if (e.key === "Enter") {
+        // Don't submit during IME composition
+        if (isComposing || e.nativeEvent.isComposing) {
+          return;
+        }
+        // Shift+Enter for newline
+        if (e.shiftKey) {
+          return;
+        }
+        
+        e.preventDefault();
+        
+        // Find the form - use closest() as fallback if .form is null
+        const textarea = e.currentTarget;
+        const form = textarea.form || textarea.closest('form') as HTMLFormElement | null;
+        
+        if (form) {
+          // Find and check submit button
+          const submitButton = form.querySelector(
+            'button[type="submit"]'
+          ) as HTMLButtonElement | null;
+          
+          if (submitButton?.disabled) {
+            return;
+          }
+          
+          // Click the submit button directly (more reliable than requestSubmit)
+          if (submitButton) {
+            submitButton.click();
+          } else {
+            // Fallback to requestSubmit
+            form.requestSubmit();
+          }
+        }
+      }
+      // Backspace to remove last attachment when textarea is empty
+      if (e.key === "Backspace" && value === "" && attachments.files.length > 0) {
+        e.preventDefault();
+        const lastAttachment = attachments.files.at(-1);
+        if (lastAttachment) {
+          attachments.remove(lastAttachment.id);
+        }
+      }
+    },
+    [showPopover, items, selectedIndex, handleSelect, onKeyDown, isComposing, value, attachments]
+  );
+
+  // Handle paste for file attachments
+  const handlePaste: ClipboardEventHandler<HTMLTextAreaElement> = useCallback((event) => {
+    const items = event.clipboardData?.items;
+    if (!items) return;
+
+    const files: File[] = [];
+    for (const item of items) {
+      if (item.kind === "file") {
+        const file = item.getAsFile();
+        if (file) files.push(file);
+      }
+    }
+
+    if (files.length > 0) {
+      event.preventDefault();
+      attachments.add(files);
+    }
+  }, [attachments]);
+
+  // Handle click to update cursor position
+  const handleClick = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    detectTrigger(value, textarea.selectionStart ?? 0);
+  }, [value, detectTrigger]);
+
+  // Sync backdrop scroll with textarea
+  const handleScroll = useCallback(() => {
+    if (textareaRef.current && backdropRef.current) {
+      backdropRef.current.scrollTop = textareaRef.current.scrollTop;
+    }
+  }, []);
+
+  // Parse text and render with highlighted mentions
+  const renderHighlightedText = () => {
+    const parts: ReactNode[] = [];
+    const regex = new RegExp(MENTION_REGEX.source, 'g');
+    let lastIndex = 0;
+    let match;
+
+    while ((match = regex.exec(value)) !== null) {
+      // Add text before the match
+      if (match.index > lastIndex) {
+        parts.push(
+          <span key={`text-${lastIndex}`}>
+            {value.slice(lastIndex, match.index)}
+          </span>
+        );
+      }
+
+      // Add the highlighted mention
+      parts.push(
+        <mark
+          key={`mention-${match.index}`}
+          className="bg-primary/20 text-transparent rounded-sm"
+        >
+          {match[0]}
+        </mark>
+      );
+
+      lastIndex = match.index + match[0].length;
+    }
+
+    // Add remaining text
+    if (lastIndex < value.length) {
+      parts.push(
+        <span key={`text-${lastIndex}`}>
+          {value.slice(lastIndex)}
+        </span>
+      );
+    }
+
+    // Add trailing character to match textarea sizing
+    parts.push(<span key="trailing">{'\n'}</span>);
+
+    return parts;
+  };
+
+  return (
+    <div className="relative w-full">
+      <Popover open={showPopover} onOpenChange={() => setTrigger(null)}>
+        <PopoverAnchor
+          style={{
+            position: "absolute",
+            left: popoverPosition.left,
+            top: popoverPosition.top,
+            width: 0,
+            height: 0,
+          }}
+        />
+        <PopoverContent
+          align="start"
+          side="top"
+          className="w-64 p-0"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <Command>
+            <CommandList>
+              {isLoading && trigger?.type === "file" && (
+                <div className="p-2 text-sm text-muted-foreground text-center">
+                  Loading...
+                </div>
+              )}
+              {!isLoading && items.length === 0 && (
+                <CommandEmpty>
+                  {trigger?.type === "file"
+                    ? "No files found"
+                    : "No commands found"}
+                </CommandEmpty>
+              )}
+              {trigger?.type === "file" && files.length > 0 && (
+                <CommandGroup heading="Files & Folders">
+                  {files.map((file, index) => (
+                    <CommandItem
+                      key={file.path}
+                      onSelect={() => handleSelect(file)}
+                      className={cn(
+                        "cursor-pointer",
+                        index === selectedIndex && "bg-accent"
+                      )}
+                    >
+                      {file.type === "folder" ? (
+                        <FolderIcon className="mr-2 size-4 text-blue-500" />
+                      ) : (
+                        <FileIcon className="mr-2 size-4 text-muted-foreground" />
+                      )}
+                      <span className="truncate">{file.path}</span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+              {trigger?.type === "command" && filteredCommands.length > 0 && (
+                <CommandGroup heading="Commands">
+                  {filteredCommands.map((cmd, index) => (
+                    <CommandItem
+                      key={cmd.id}
+                      onSelect={() => handleSelect(cmd)}
+                      className={cn(
+                        "cursor-pointer",
+                        index === selectedIndex && "bg-accent"
+                      )}
+                    >
+                      {cmd.icon || <HashIcon className="mr-2 size-4" />}
+                      <div className="flex flex-col ml-2">
+                        <span className="font-medium">/{cmd.name}</span>
+                        <span className="text-xs text-muted-foreground">
+                          {cmd.description}
+                        </span>
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {/* Highlight backdrop - renders behind textarea to show colored mentions */}
+      {showHighlights && (
+        <div
+          ref={backdropRef}
+          aria-hidden="true"
+          className="absolute inset-0 pointer-events-none overflow-hidden whitespace-pre-wrap break-words px-3 py-3 text-sm"
+          style={{ color: 'transparent' }}
+        >
+          {renderHighlightedText()}
+        </div>
+      )}
+
+      <textarea
+        ref={textareaRef}
+        name="message"
+        data-slot="input-group-control"
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onClick={handleClick}
+        onScroll={handleScroll}
+        onPaste={handlePaste}
+        onCompositionStart={() => setIsComposing(true)}
+        onCompositionEnd={() => setIsComposing(false)}
+        disabled={disabled}
+        className={cn(
+          // Match InputGroupTextarea styling - no border since InputGroup provides it
+          "flex-1 w-full resize-none rounded-none border-0 py-3 px-3 text-sm shadow-none",
+          "placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          // Make background transparent so highlights show through
+          "bg-transparent dark:bg-transparent",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export type { TriggerState };