feat: add mention-textarea-overlay and repo-mention-popover components
This commit is contained in:
zhenyi
parent
dbcdf04817
commit
4f76816de8
103
src/components/ai-elements/mention-textarea-overlay.tsx
Normal file
103
src/components/ai-elements/mention-textarea-overlay.tsx
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
import { memo, useEffect, useRef } from "react";
|
||||||
|
import { parseMentions } from "@/lib/ir/parser";
|
||||||
|
import { MentionChip } from "@/lib/ir/mention-chip";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
/** Raw text content (may contain @[type:id:label] mentions). */
|
||||||
|
content: string;
|
||||||
|
/** Ref to the underlying textarea for scroll sync. */
|
||||||
|
textareaRef: React.RefObject<HTMLTextAreaElement | null>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Absolutely-positioned overlay that mirrors the textarea's text layout
|
||||||
|
* but renders @[mention] tokens as inline chips.
|
||||||
|
*
|
||||||
|
* Must be a sibling of the textarea inside a `relative` container.
|
||||||
|
* Uses `pointer-events: none` so clicks pass through to the textarea.
|
||||||
|
*/
|
||||||
|
export const MentionTextareaOverlay = memo(function MentionTextareaOverlay({
|
||||||
|
content,
|
||||||
|
textareaRef,
|
||||||
|
}: Props) {
|
||||||
|
const overlayRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Sync scroll position from textarea → overlay.
|
||||||
|
useEffect(() => {
|
||||||
|
const ta = textareaRef.current;
|
||||||
|
const ov = overlayRef.current;
|
||||||
|
if (!ta || !ov) return;
|
||||||
|
|
||||||
|
const sync = () => {
|
||||||
|
ov.scrollTop = ta.scrollTop;
|
||||||
|
ov.scrollLeft = ta.scrollLeft;
|
||||||
|
};
|
||||||
|
|
||||||
|
ta.addEventListener("scroll", sync, { passive: true });
|
||||||
|
// Also sync on resize (auto-grow).
|
||||||
|
const ro = new ResizeObserver(sync);
|
||||||
|
ro.observe(ta);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
ta.removeEventListener("scroll", sync);
|
||||||
|
ro.disconnect();
|
||||||
|
};
|
||||||
|
}, [textareaRef]);
|
||||||
|
|
||||||
|
const segments = parseMentions(content);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={overlayRef}
|
||||||
|
aria-hidden
|
||||||
|
className="pointer-events-none absolute inset-x-0 top-0 z-0 overflow-hidden whitespace-pre-wrap break-words px-2.5 py-2 text-sm leading-relaxed [&_span]:align-baseline"
|
||||||
|
>
|
||||||
|
{segments.map((seg, i) => {
|
||||||
|
if (seg.type === "mention" && seg.mention) {
|
||||||
|
return (
|
||||||
|
<MentionChip
|
||||||
|
key={`${seg.mention.entityId}-${i}`}
|
||||||
|
entityType={seg.mention.entityType}
|
||||||
|
entityId={seg.mention.entityId}
|
||||||
|
entityLabel={seg.mention.entityLabel}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// Render text as-is; the textarea underneath handles the same wrapping.
|
||||||
|
return <span key={i}>{seg.content}</span>;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Mention-aware backspace helper
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If `selectionStart` sits at the end of a complete `@[type:id:label]` token,
|
||||||
|
* return the { start, end } byte-offsets of that token so the caller can
|
||||||
|
* delete it as a whole. Otherwise returns `null`.
|
||||||
|
*/
|
||||||
|
export function mentionAtCursor(
|
||||||
|
text: string,
|
||||||
|
selectionStart: number,
|
||||||
|
): { start: number; end: number } | null {
|
||||||
|
if (selectionStart <= 0) return null;
|
||||||
|
|
||||||
|
const before = text.slice(0, selectionStart);
|
||||||
|
|
||||||
|
// Match the *last* complete mention that ends exactly at the cursor.
|
||||||
|
const re = /@\[([a-z_]+):([^:\]]+):([^\]]+)\]/g;
|
||||||
|
let last: { start: number; end: number } | null = null;
|
||||||
|
let m: RegExpExecArray | null;
|
||||||
|
|
||||||
|
while ((m = re.exec(before)) !== null) {
|
||||||
|
const end = m.index + m[0].length;
|
||||||
|
if (end === selectionStart) {
|
||||||
|
last = { start: m.index, end };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return last;
|
||||||
|
}
|
||||||
226
src/page/workspace/workplan/chat/repo-mention-popover.tsx
Normal file
226
src/page/workspace/workplan/chat/repo-mention-popover.tsx
Normal file
@ -0,0 +1,226 @@
|
|||||||
|
import { useState, useEffect, useCallback, useRef, useMemo } from "react";
|
||||||
|
import { client } from "@/client";
|
||||||
|
import { formatMention } from "@/lib/ir/parser";
|
||||||
|
import { GitBranch, Loader2 } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import type { RepoResponse } from "@/client/models/repoResponse";
|
||||||
|
|
||||||
|
interface MentionState {
|
||||||
|
/** Position in text where the @ that started this mention is */
|
||||||
|
startIndex: number;
|
||||||
|
/** The query text after @ (what user is typing to search) */
|
||||||
|
query: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
workspaceName: string;
|
||||||
|
textValue: string;
|
||||||
|
onInsertMention: (
|
||||||
|
mentionText: string,
|
||||||
|
replaceFrom: number,
|
||||||
|
replaceTo: number,
|
||||||
|
) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inline repo mention popover triggered by typing @ in the chat input.
|
||||||
|
* Searches repos in the current workspace and inserts IR mention syntax.
|
||||||
|
*/
|
||||||
|
export function RepoMentionPopover({
|
||||||
|
workspaceName,
|
||||||
|
textValue,
|
||||||
|
onInsertMention,
|
||||||
|
}: Props) {
|
||||||
|
const [repos, setRepos] = useState<RepoResponse[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||||
|
const searchAbortRef = useRef<AbortController | null>(null);
|
||||||
|
|
||||||
|
// Detect @ mention trigger from text value.
|
||||||
|
const mentionState: MentionState | null = useMemo(() => {
|
||||||
|
if (!textValue) return null;
|
||||||
|
|
||||||
|
// Find the last @ that could start a mention.
|
||||||
|
// Exclude @ that are part of existing @[type:id:label] syntax.
|
||||||
|
const atIndex = textValue.lastIndexOf("@");
|
||||||
|
if (atIndex === -1) return null;
|
||||||
|
|
||||||
|
const afterAt = textValue.slice(atIndex);
|
||||||
|
|
||||||
|
// If it looks like a completed @[type:id:label], don't trigger.
|
||||||
|
if (/^@\[[a-z_]+:[^:\]]+:[^\]]+\]/.test(afterAt)) return null;
|
||||||
|
|
||||||
|
// If there's already a complete @[...] before this one, check if
|
||||||
|
// this @ is inside or right after it.
|
||||||
|
const mentionRegex = /@\[[a-z_]+:[^:\]]+:[^\]]+\]/g;
|
||||||
|
let match;
|
||||||
|
while ((match = mentionRegex.exec(textValue)) !== null) {
|
||||||
|
const end = match.index + match[0].length;
|
||||||
|
if (atIndex < end && atIndex >= match.index) {
|
||||||
|
// This @ is inside an existing mention, skip.
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = textValue.slice(atIndex + 1);
|
||||||
|
|
||||||
|
// Don't trigger if query contains space (mention is done).
|
||||||
|
if (query.includes(" ")) return null;
|
||||||
|
|
||||||
|
// Don't trigger on empty query after @ (wait for user to type).
|
||||||
|
// But we show the popover to give immediate feedback.
|
||||||
|
return { startIndex: atIndex, query };
|
||||||
|
}, [textValue]);
|
||||||
|
|
||||||
|
// Fetch repos when query changes.
|
||||||
|
useEffect(() => {
|
||||||
|
if (!mentionState || !workspaceName) {
|
||||||
|
setRepos([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cancel previous search.
|
||||||
|
searchAbortRef.current?.abort();
|
||||||
|
const controller = new AbortController();
|
||||||
|
searchAbortRef.current = controller;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
client
|
||||||
|
.gitListRepos(workspaceName, {
|
||||||
|
search: mentionState.query || undefined,
|
||||||
|
limit: 8,
|
||||||
|
})
|
||||||
|
.then(({ data }) => {
|
||||||
|
if (!controller.signal.aborted) {
|
||||||
|
setRepos(data);
|
||||||
|
setSelectedIndex(0);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err: unknown) => {
|
||||||
|
if (!controller.signal.aborted) {
|
||||||
|
console.error("Failed to search repos for mention:", err);
|
||||||
|
setRepos([]);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
if (!controller.signal.aborted) setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => controller.abort();
|
||||||
|
}, [mentionState?.query, workspaceName]);
|
||||||
|
|
||||||
|
const open = mentionState !== null;
|
||||||
|
|
||||||
|
const handleSelect = useCallback(
|
||||||
|
(repo: RepoResponse) => {
|
||||||
|
if (!mentionState) return;
|
||||||
|
const mentionText = formatMention("repo", repo.name, repo.name) + " ";
|
||||||
|
const replaceTo = mentionState.startIndex + mentionState.query.length + 1;
|
||||||
|
onInsertMention(mentionText, mentionState.startIndex, replaceTo);
|
||||||
|
},
|
||||||
|
[mentionState, onInsertMention],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Keyboard navigation when popover is open.
|
||||||
|
// Use capture phase so we intercept before the textarea's own Enter handler
|
||||||
|
// (which would otherwise submit the form).
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open || repos.length === 0) return;
|
||||||
|
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
switch (e.key) {
|
||||||
|
case "ArrowDown":
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setSelectedIndex((i) => Math.min(i + 1, repos.length - 1));
|
||||||
|
break;
|
||||||
|
case "ArrowUp":
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
setSelectedIndex((i) => Math.max(i - 1, 0));
|
||||||
|
break;
|
||||||
|
case "Enter":
|
||||||
|
if (repos[selectedIndex]) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
handleSelect(repos[selectedIndex]);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "Escape":
|
||||||
|
// Let the user naturally dismiss by continuing to type.
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Capture phase: fire before the textarea's own keydown handler.
|
||||||
|
document.addEventListener("keydown", handleKeyDown, true);
|
||||||
|
return () => document.removeEventListener("keydown", handleKeyDown, true);
|
||||||
|
}, [open, repos, selectedIndex, handleSelect]);
|
||||||
|
|
||||||
|
if (!open) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="absolute bottom-full left-0 mb-2 w-80">
|
||||||
|
<div className="overflow-hidden rounded-lg border border-border/60 bg-popover shadow-lg ring-1 ring-foreground/5">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="border-b border-border/50 px-3 py-2">
|
||||||
|
<span className="text-[11px] text-muted-foreground">
|
||||||
|
Repositories in{" "}
|
||||||
|
<span className="font-medium text-foreground/80">
|
||||||
|
{workspaceName}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Results */}
|
||||||
|
<div className="max-h-56 overflow-y-auto p-1">
|
||||||
|
{loading && (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<Loader2 className="size-4 animate-spin text-muted-foreground/60" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && repos.length === 0 && (
|
||||||
|
<div className="py-6 text-center text-xs text-muted-foreground/60">
|
||||||
|
{mentionState.query
|
||||||
|
? `No repos matching "${mentionState.query}"`
|
||||||
|
: "No repositories found"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading &&
|
||||||
|
repos.map((repo, i) => (
|
||||||
|
<button
|
||||||
|
key={repo.id}
|
||||||
|
type="button"
|
||||||
|
className={cn(
|
||||||
|
"flex w-full items-center gap-3 rounded-md px-3 py-2 text-left transition-colors",
|
||||||
|
i === selectedIndex
|
||||||
|
? "bg-accent text-accent-foreground"
|
||||||
|
: "hover:bg-muted/50",
|
||||||
|
)}
|
||||||
|
onClick={() => handleSelect(repo)}
|
||||||
|
onMouseEnter={() => setSelectedIndex(i)}
|
||||||
|
>
|
||||||
|
<GitBranch className="size-4 shrink-0 text-emerald-500" />
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="truncate text-sm font-medium">{repo.name}</p>
|
||||||
|
{repo.description && (
|
||||||
|
<p className="truncate text-[11px] text-muted-foreground">
|
||||||
|
{repo.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{repo.is_archived && (
|
||||||
|
<span className="shrink-0 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
|
||||||
|
archived
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user