"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface MentionSuggestion {
  id: string;
  label: string;
  subtitle?: string;
}

export interface MentionInputProps {
  value?: string;
  defaultValue?: string;
  placeholder?: string;
  suggestions: MentionSuggestion[];
  onChange?: (value: string) => void;
  className?: string;
}

export function MentionInput({
  value,
  defaultValue = "",
  placeholder = "Type a message and mention someone with @",
  suggestions,
  onChange,
  className,
}: MentionInputProps) {
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const [cursorIndex, setCursorIndex] = React.useState(0);
  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
  const isControlled = value !== undefined;
  const inputValue = isControlled ? value : internalValue;

  const updateValue = React.useCallback(
    (nextValue: string, nextCursor: number) => {
      if (!isControlled) {
        setInternalValue(nextValue);
      }
      onChange?.(nextValue);
      setCursorIndex(nextCursor);
    },
    [isControlled, onChange]
  );

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const nextValue = event.target.value;
    const nextCursor = event.target.selectionStart ?? nextValue.length;
    updateValue(nextValue, nextCursor);
  };

  const mentionMatch = React.useMemo(() => {
    const slice = inputValue.slice(0, cursorIndex);
    return slice.match(/@([\w-]*)$/);
  }, [cursorIndex, inputValue]);

  const query = mentionMatch?.[1] ?? "";
  const showSuggestions = mentionMatch !== null;

  const filteredSuggestions = React.useMemo(() => {
    if (!showSuggestions) {
      return [];
    }
    const lower = query.toLowerCase();
    return suggestions.filter((item) => item.label.toLowerCase().includes(lower));
  }, [query, showSuggestions, suggestions]);

  const insertMention = (label: string) => {
    const slice = inputValue.slice(0, cursorIndex);
    const match = slice.match(/@([\w-]*)$/);
    if (!match) {
      return;
    }

    const start = slice.lastIndexOf(match[0]);
    const before = inputValue.slice(0, start);
    const after = inputValue.slice(cursorIndex);
    const nextValue = `${before}@${label} ${after}`;
    const nextCursor = (before + `@${label} `).length;

    updateValue(nextValue, nextCursor);

    requestAnimationFrame(() => {
      if (textareaRef.current) {
        textareaRef.current.focus();
        textareaRef.current.setSelectionRange(nextCursor, nextCursor);
      }
    });
  };

  return (
    <div className={cn("relative w-full", className)}>
      <div className="relative rounded-xl border border-border bg-card p-3 text-sm text-foreground">
        <div
          aria-hidden="true"
          className="pointer-events-none whitespace-pre-wrap break-words"
        >
          {inputValue.length === 0 ? (
            <span className="text-muted-foreground">{placeholder}</span>
          ) : (
            renderHighlightedText(inputValue)
          )}
        </div>
        <textarea
          ref={textareaRef}
          value={inputValue}
          onChange={handleChange}
          onClick={(event) =>
            setCursorIndex(event.currentTarget.selectionStart ?? inputValue.length)
          }
          onKeyUp={(event) =>
            setCursorIndex(event.currentTarget.selectionStart ?? inputValue.length)
          }
          rows={4}
          placeholder={placeholder}
          style={{ caretColor: "currentColor" }}
          className="absolute inset-0 h-full w-full resize-none bg-transparent p-3 text-sm text-transparent outline-none"
        />
      </div>

      {showSuggestions ? (
        <div className="absolute left-0 top-full z-10 mt-2 w-full rounded-xl border border-border bg-card p-2">
          <p className="px-3 py-2 text-xs font-semibold text-muted-foreground">
            Mentions
          </p>
          <div className="max-h-48 overflow-y-auto">
            {filteredSuggestions.length === 0 ? (
              <p className="px-3 py-2 text-xs text-muted-foreground">
                No matches found.
              </p>
            ) : (
              filteredSuggestions.map((item) => (
                <button
                  key={item.id}
                  type="button"
                  onClick={() => insertMention(item.label)}
                  className="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm text-foreground transition"
                >
                  <span className="font-medium">{item.label}</span>
                  {item.subtitle ? (
                    <span className="text-xs text-muted-foreground">
                      {item.subtitle}
                    </span>
                  ) : null}
                </button>
              ))
            )}
          </div>
        </div>
      ) : null}
    </div>
  );
}

function renderHighlightedText(value: string) {
  const parts = value.split(/(@[\w-]+)/g);
  return parts.map((part, index) => {
    if (part.startsWith("@")) {
      return (
        <span
          key={`${part}-${index}`}
          className="rounded bg-muted px-1 text-primary"
        >
          {part}
        </span>
      );
    }

    return <span key={`${part}-${index}`}>{part}</span>;
  });
}
Mention Input

Dependencies

Files

Installation
