feat(sender): mention trigger (#62)

Co-authored-by: 苏向夜 <[email protected]>

Author: moeyue23

.changes/add-suggestion-component.md

@@ -0,0 +1,6 @@
+---
+"@matechat/react": patch:feat
+---
+
+Add `Suggestion` component to provide trigger-based autocomplete in textareas.
+This component supports multiple trigger characters and grouped options.

src/sender.tsx

@@ -5,6 +5,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import PublishNew from "./icons/publish-new.svg";
 import QuickStop from "./icons/quick-stop.svg";
+import type { OnTextInject, TriggerConfig } from "./suggestion";
+import Suggestion from "./suggestion";
 import type { Backend } from "./utils";
 
 export interface InputCountProps extends React.ComponentProps<"span"> {
@@ -105,6 +107,10 @@ export interface SenderProps extends React.ComponentProps<"div"> {
    */
   onSend?: (controller: AbortController) => void;
   toolbar?: React.ReactNode;
+  /**
+   * Trigger configurations for the suggestion list
+   */
+  triggerConfigs?: TriggerConfig[];
 }
 
 export function Sender({
@@ -115,11 +121,13 @@ export function Sender({
   input,
   onSend,
   toolbar,
+  triggerConfigs,
   ...props
 }: SenderProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [message, setMessage] = useState(initialMessage);
   const [isSending, setIsSending] = useState(false);
+  const [caretPosition, setCaretPosition] = useState<number | null>(null);
 
   useEffect(() => {
     if (textareaRef.current) {
@@ -129,6 +137,15 @@ export function Sender({
     onMessageChange?.(message);
   }, [message, onMessageChange]);
 
+  useEffect(() => {
+    if (textareaRef.current && caretPosition !== null) {
+      textareaRef.current.focus();
+      textareaRef.current.selectionStart = caretPosition;
+      textareaRef.current.selectionEnd = caretPosition;
+      setCaretPosition(null);
+    }
+  }, [caretPosition]);
+
   const [controller, setController] = useState<AbortController | null>(null);
   const handleSend = useCallback(() => {
     if (isSending) {
@@ -175,19 +192,41 @@ export function Sender({
     [],
   );
 
+  const handleTextInject: OnTextInject = useCallback(
+    (newText, suggestionStartPosition) => {
+      setMessage((prevMessage) => {
+        const currentCaretPosition =
+          textareaRef.current?.selectionStart ?? prevMessage.length;
+        const textBefore = prevMessage.slice(0, suggestionStartPosition);
+        const textAfter = prevMessage.slice(currentCaretPosition);
+        const newMessage = textBefore + newText + textAfter;
+        return newMessage;
+      });
+      setCaretPosition(suggestionStartPosition + newText.length);
+    },
+    [],
+  );
   return (
     <div
       data-slot="sender"
       className={twMerge(
         clsx(
-          "px-1 flex flex-col items-center border rounded-2xl",
+          "relative px-1 flex flex-col items-center border rounded-2xl",
           "border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-300 hover:shadow-md",
           "focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
           className,
         ),
       )}
       {...props}
     >
+      <div className="absolute bottom-full left-0 w-full bg-white dark:bg-gray-50 rounded-lg shadow-amber-50 max-h-64 overflow-y-auto">
+        <Suggestion
+          message={message}
+          textareaRef={textareaRef}
+          triggerConfigs={triggerConfigs ?? []}
+          onInject={handleTextInject}
+        />
+      </div>
       <textarea
         ref={textareaRef}
         value={message}

src/suggestion.tsx

@@ -0,0 +1,79 @@
+import "./tailwind.css";
+import React from "react";
+import type { SelectItemOptionsType } from "./list";
+import { List } from "./list";
+
+export interface TriggerConfig {
+  char: string;
+  data: SelectItemOptionsType;
+  optionLabel: string;
+  optionGroupLabel?: string;
+  optionGroupChildren?: string;
+}
+
+export type OnTextInject = (newText: string, newCursorPosition: number) => void;
+
+interface SuggestionProps {
+  message: string;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  triggerConfigs: TriggerConfig[];
+  onInject: OnTextInject;
+}
+
+const useSuggestionContext = (
+  message: string,
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>,
+  triggerConfigs: TriggerConfig[],
+) => {
+  const context = React.useMemo(() => {
+    const textarea = textareaRef?.current;
+    if (!textarea) return null;
+
+    const caretPostionIndex = textarea.selectionStart ?? message.length;
+    let currentConfig: TriggerConfig | undefined;
+    let triggerIndex = -1;
+    let queryText = "";
+
+    for (let i = caretPostionIndex - 1; i >= 0; i--) {
+      const char = message[i];
+      const matchedConfig = triggerConfigs.find(
+        (config) => config.char === char,
+      );
+      if (matchedConfig) {
+        currentConfig = matchedConfig;
+        triggerIndex = i;
+        queryText = message.slice(i + 1, caretPostionIndex);
+        break;
+      }
+    }
+    if (!currentConfig) return null;
+    return {
+      currentConfig,
+      triggerIndex,
+      queryText,
+    };
+  }, [message, textareaRef, triggerConfigs]);
+  return context;
+};
+export default function Suggestion({
+  message,
+  textareaRef,
+  triggerConfigs,
+  onInject,
+}: SuggestionProps) {
+  const context = useSuggestionContext(message, textareaRef, triggerConfigs);
+  return (
+    <div>
+      <List
+        options={context?.currentConfig.data}
+        optionLabel={context?.currentConfig.optionLabel ?? "default value"}
+        optionGroupLabel={context?.currentConfig.optionGroupLabel}
+        optionGroupChildren={context?.currentConfig.optionGroupChildren}
+        onChange={(e) => {
+          const newText: string = (e.value ?? e.target.value) as string;
+          onInject(newText, context?.triggerIndex ?? -1);
+        }}
+      />
+    </div>
+  );
+}