Skip to content
Sign in

flagon-io/g1t

public
0

g1t/apps/web/app/components/mention-textarea.tsx

116 lines4,008 bytesCodeBlame
1import { Bot, Users } from "lucide-react";
2import { type ComponentProps, type KeyboardEvent, useId, useRef, useState } from "react";
3
4import { AGENT_MENTION as AGENT_HANDLE, type MentionMatch, mentionSuggestions } from "../lib/mention";
5import { Textarea } from "./ui";
6
7/**
8 * A comment box that offers to complete `@g1t`, and the teams in `handles`
9 * (`@acme/backend`): Up and Down move through the suggestions, Tab or Enter
10 * takes one, Escape dismisses them.
11 */
12export function MentionTextarea({ handles, ...props }: ComponentProps<"textarea"> & { handles?: readonly string[] }) {
13 const ref = useRef<HTMLTextAreaElement>(null);
14 const [match, setMatch] = useState<MentionMatch | null>(null);
15 const [active, setActive] = useState(0);
16 const list = useId();
17
18 const look = () => {
19 const box = ref.current;
20 if (!box) return;
21 const found = box.selectionStart === box.selectionEnd ? mentionSuggestions(box.value, box.selectionStart, handles) : null;
22 setMatch(found);
23 setActive(0);
24 };
25
26 const complete = (handle: string) => {
27 const box = ref.current;
28 if (!box || !match) return;
29 const caret = box.selectionStart;
30 box.setRangeText(`${handle} `, match.start, caret, "end");
31 setMatch(null);
32 box.focus();
33 };
34
35 const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
36 if (match) {
37 const count = match.options.length;
38 if (event.key === "ArrowDown" || event.key === "ArrowUp") {
39 event.preventDefault();
40 setActive((index) => (index + (event.key === "ArrowDown" ? 1 : count - 1)) % count);
41 return;
42 }
43 if ((event.key === "Tab" || event.key === "Enter") && !event.shiftKey) {
44 event.preventDefault();
45 complete(match.options[active] ?? match.options[0]!);
46 return;
47 }
48 if (event.key === "Escape") {
49 event.preventDefault();
50 setMatch(null);
51 return;
52 }
53 }
54 props.onKeyDown?.(event);
55 };
56
57 const open = match != null;
58 return (
59 <div className="relative">
60 <Textarea
61 {...props}
62 ref={ref}
63 role={open ? "combobox" : undefined}
64 aria-autocomplete="list"
65 aria-expanded={open}
66 aria-controls={open ? list : undefined}
67 aria-activedescendant={open ? `${list}-${active}` : undefined}
68 onKeyDown={onKeyDown}
69 onInput={(event) => {
70 look();
71 props.onInput?.(event);
72 }}
73 onClick={(event) => {
74 look();
75 props.onClick?.(event);
76 }}
77 onBlur={(event) => {
78 // After a click on a suggestion has landed.
79 setTimeout(() => setMatch(null), 150);
80 props.onBlur?.(event);
81 }}
82 />
83 {match && (
84 <ul
85 id={list}
86 role="listbox"
87 aria-label="Mentions"
88 className="absolute top-full left-0 z-20 mt-1 max-w-full min-w-44 overflow-hidden rounded-md border border-line bg-raised p-1 shadow-lg shadow-black/30"
89 >
90 {match.options.map((handle, index) => (
91 <li
92 key={handle}
93 id={`${list}-${index}`}
94 role="option"
95 aria-selected={index === active}
96 onMouseDown={(event) => event.preventDefault()}
97 onMouseEnter={() => setActive(index)}
98 onClick={() => complete(handle)}
99 className={`flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 font-mono text-xs text-fg ${
100 index === active ? "bg-line" : ""
101 }`}
102 >
103 {handle === AGENT_HANDLE ? (
104 <Bot size={12} className="shrink-0 text-accent" />
105 ) : (
106 <Users size={12} className="shrink-0 text-faint" />
107 )}
108 <span className="min-w-0 truncate">{handle}</span>
109 {index === active && <span className="ml-auto pl-3 font-sans text-faint">Tab</span>}
110 </li>
111 ))}
112 </ul>
113 )}
114 </div>
115 );
116}