- {selectedSlashSkill ? (
+ {hasInlineReferences || inlineEditorActive || selectedSlashSkill ? (
{
if (event.target === event.currentTarget) {
focusContentEditableEnd(inlineSkillTextRef.current);
}
}}
>
-
+ {selectedSlashSkill && (
+
+ )}
setTextareaFocused(false)}
onCompositionEnd={() => {
inlineSkillComposingRef.current = false;
+ inlineCompositionEndedAt.current = Date.now();
}}
onCompositionStart={() => {
inlineSkillComposingRef.current = true;
}}
onFocus={() => setTextareaFocused(true)}
+ aria-controls={showMentions ? mentionListId : undefined}
+ aria-activedescendant={
+ showMentions ? activeMentionOption : undefined
+ }
+ onClick={(event) =>
+ updateMentionQuery(
+ readReferenceEditor(event.currentTarget),
+ referenceCaret(event.currentTarget),
+ )
+ }
+ onKeyUp={(event) => {
+ if (
+ ["ArrowLeft", "ArrowRight", "Home", "End"].includes(
+ event.key,
+ )
+ )
+ updateMentionQuery(
+ readReferenceEditor(event.currentTarget),
+ referenceCaret(event.currentTarget),
+ );
+ }}
onInput={handleInlineSkillInput}
onKeyDown={handleInlineSkillKeyDown}
onPaste={handleInlineSkillPaste}
@@ -2555,7 +3207,9 @@ export function InputBox({
role="textbox"
suppressContentEditableWarning
className={cn(
- "outline-none",
+ selectedSlashSkill
+ ? "inline min-h-6 outline-none"
+ : "block min-h-6 outline-none",
"before:text-muted-foreground before:pointer-events-none",
"data-[empty=true]:before:content-[attr(data-placeholder)]",
composerLocked && "cursor-not-allowed opacity-50",
@@ -2571,6 +3225,20 @@ export function InputBox({
autoFocus={autoFocus}
defaultValue={initialValue}
onBlur={() => setTextareaFocused(false)}
+ aria-controls={showMentions ? mentionListId : undefined}
+ aria-activedescendant={
+ showMentions ? activeMentionOption : undefined
+ }
+ onSelect={(event) => {
+ const input = event.currentTarget;
+ if (!mentionButtonOpen && !mentionInFlight.current)
+ updateMentionQuery(
+ input.value,
+ input.selectionStart === input.selectionEnd
+ ? input.selectionStart
+ : null,
+ );
+ }}
onChange={handlePromptTextareaChange}
onFocus={() => setTextareaFocused(true)}
onKeyDown={handlePromptTextareaKeyDown}
@@ -2580,18 +3248,22 @@ export function InputBox({
+
+
+
+
+
-
@@ -3088,7 +3766,9 @@ function AddAttachmentsButton({
className,
disabled,
uploadLimits,
+ onOpen,
}: {
+ onOpen?: () => void;
className?: string;
disabled?: boolean;
uploadLimits?: UploadLimits;
@@ -3109,7 +3789,7 @@ function AddAttachmentsButton({
className={cn("px-2!", className)}
data-testid="add-attachments-button"
disabled={disabled}
- onClick={() => attachments.openFileDialog()}
+ onClick={onOpen ?? (() => attachments.openFileDialog())}
>
diff --git a/frontend/src/components/workspace/mentions/inline-references.ts b/frontend/src/components/workspace/mentions/inline-references.ts
new file mode 100644
index 0000000000..d0a96cd9cd
--- /dev/null
+++ b/frontend/src/components/workspace/mentions/inline-references.ts
@@ -0,0 +1,210 @@
+import type { ConversationReference } from "@/core/conversation-references";
+
+export const MAX_EXPLICIT_SKILLS = 16;
+
+export type InlineReference = {
+ kind: "skill" | "file" | "conversation";
+ id: string;
+ label: string;
+ start: number;
+ end: number;
+};
+
+const pattern = /@\[([^\]]*)\]\(ref:(skill|file|conversation):([^)]*)\)/g;
+
+export function referenceToken(
+ kind: InlineReference["kind"],
+ id: string,
+ label: string,
+) {
+ const encode = (value: string) =>
+ encodeURIComponent(value).replace(
+ /[!'()*]/g,
+ (char) => `%${char.charCodeAt(0).toString(16)}`,
+ );
+ return `@[${encode(label)}](ref:${kind}:${encode(id)})`;
+}
+
+export function inlineReferences(text: string): InlineReference[] {
+ const result: InlineReference[] = [];
+ for (const match of text.matchAll(pattern)) {
+ try {
+ result.push({
+ kind: match[2] as InlineReference["kind"],
+ id: decodeURIComponent(match[3]!),
+ label: decodeURIComponent(match[1]!),
+ start: match.index,
+ end: match.index + match[0].length,
+ });
+ } catch {
+ /* Malformed pasted text remains ordinary text. */
+ }
+ }
+ return result;
+}
+
+export function readableReferences(text: string) {
+ let value = text;
+ for (const reference of inlineReferences(text).reverse()) {
+ value =
+ value.slice(0, reference.start) +
+ `@${reference.label}` +
+ value.slice(reference.end);
+ }
+ return value;
+}
+
+/** Restore display labels in one pass so replacement tokens cannot match again. */
+export function restoreReferenceLabels(original: string, rewritten: string) {
+ const remaining = inlineReferences(original);
+ if (!remaining.length) return rewritten;
+ const labels = [...new Set(remaining.map((ref) => ref.label))]
+ .sort((a, b) => b.length - a.length)
+ .map((label) => label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+ // Longest labels win; a short label cannot consume a longer word or slug.
+ const pattern = new RegExp(
+ `@(?:${labels.join("|")})(?![\\p{L}\\p{M}\\p{N}_-])`,
+ "gu",
+ );
+ const restored = rewritten.replace(pattern, (label) => {
+ const index = remaining.findIndex((ref) => `@${ref.label}` === label);
+ if (index < 0) return label;
+ const [ref] = remaining.splice(index, 1);
+ return referenceToken(ref!.kind, ref!.id, ref!.label);
+ });
+ // A rewrite may omit a label; retain that explicit selection in draft order.
+ return [
+ ...remaining.map((ref) => referenceToken(ref.kind, ref.id, ref.label)),
+ restored,
+ ].join(" ");
+}
+
+export function readReferenceEditor(node: Node): string {
+ if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
+ if (node instanceof HTMLElement) {
+ if (node.dataset.reference) return node.dataset.reference;
+ if (node.tagName === "BR") return "\n";
+ }
+ return Array.from(node.childNodes, readReferenceEditor).join("");
+}
+
+export function referenceCaret(root: HTMLElement): number | null {
+ const selection = window.getSelection();
+ if (!selection?.isCollapsed || !selection.rangeCount) return null;
+ const range = selection.getRangeAt(0);
+ if (!root.contains(range.endContainer)) return null;
+ const before = range.cloneRange();
+ before.selectNodeContents(root);
+ before.setEnd(range.endContainer, range.endOffset);
+ return readReferenceEditor(before.cloneContents()).length;
+}
+
+export function focusReferenceAt(root: HTMLElement, offset: number) {
+ root.focus();
+ const range = document.createRange();
+ range.selectNodeContents(root);
+ range.collapse(false);
+ let remaining = offset;
+ for (const node of root.childNodes) {
+ const length = readReferenceEditor(node).length;
+ if (remaining <= length) {
+ if (node.nodeType === Node.TEXT_NODE) range.setStart(node, remaining);
+ else if (remaining === 0) range.setStartBefore(node);
+ else range.setStartAfter(node);
+ range.collapse(true);
+ break;
+ }
+ remaining -= length;
+ }
+ const selection = window.getSelection();
+ selection?.removeAllRanges();
+ selection?.addRange(range);
+}
+
+export function renderReferenceEditor(root: HTMLElement, text: string) {
+ if (readReferenceEditor(root) === text) return;
+ const caret = referenceCaret(root);
+ const fragment = document.createDocumentFragment();
+ let end = 0;
+ for (const ref of inlineReferences(text)) {
+ fragment.append(document.createTextNode(text.slice(end, ref.start)));
+ const token = document.createElement("span");
+ token.contentEditable = "false";
+ token.dataset.reference = text.slice(ref.start, ref.end);
+ token.dataset.referenceKind = ref.kind;
+ token.dataset.testid =
+ ref.kind === "file"
+ ? "project-attachment-chip"
+ : ref.kind === "conversation"
+ ? "conversation-reference-chip"
+ : "inline-skill-reference";
+ token.className =
+ "inline-flex items-baseline gap-1 align-baseline font-medium select-all " +
+ (ref.kind === "skill"
+ ? "text-blue-600 dark:text-blue-400"
+ : ref.kind === "file"
+ ? "text-rose-600 dark:text-rose-400"
+ : "text-violet-600 dark:text-violet-400");
+ const icon = document.createElement("span");
+ icon.setAttribute("aria-hidden", "true");
+ icon.textContent =
+ ref.kind === "skill" ? "✦" : ref.kind === "file" ? "▤" : "◉";
+ token.append(icon, document.createTextNode(ref.label));
+ token.setAttribute("aria-label", `@${ref.label}`);
+ fragment.append(token);
+ end = ref.end;
+ }
+ fragment.append(document.createTextNode(text.slice(end)));
+ root.replaceChildren(fragment);
+ if (caret !== null) focusReferenceAt(root, Math.min(caret, text.length));
+}
+
+export function reconcileConversationReferences(
+ text: string,
+ known: ConversationReference[],
+ capability: {
+ enabled: boolean;
+ maxReferences: number;
+ isLoading: boolean;
+ isSuccess: boolean;
+ },
+ threadId: string,
+): { text: string; references: ConversationReference[] } {
+ // Only a successful discovery may destructively normalize the draft.
+ // Preserve known metadata while pending/failed, including across editor changes.
+ if (!capability.isSuccess || capability.isLoading) {
+ const ids = new Set(
+ inlineReferences(text)
+ .filter((ref) => ref.kind === "conversation")
+ .map((ref) => ref.id),
+ );
+ return { text, references: known.filter((ref) => ids.has(ref.threadId)) };
+ }
+ const references = new Map
();
+ const limit = capability.enabled ? capability.maxReferences : 0;
+ const tokens = inlineReferences(text).filter(
+ (ref) => ref.kind === "conversation",
+ );
+ for (const ref of tokens) {
+ if (
+ !ref.id ||
+ ref.id === threadId ||
+ references.has(ref.id) ||
+ references.size >= limit
+ )
+ continue;
+ references.set(
+ ref.id,
+ known.find((item) => item.threadId === ref.id) ?? {
+ threadId: ref.id,
+ title: ref.label,
+ },
+ );
+ }
+ // Disabled, self, and over-limit references become honest ordinary text.
+ for (const ref of tokens.reverse()) {
+ if (!references.has(ref.id))
+ text = text.slice(0, ref.start) + `@${ref.label}` + text.slice(ref.end);
+ }
+ return { text, references: [...references.values()] };
+}
diff --git a/frontend/src/components/workspace/mentions/mention-picker.tsx b/frontend/src/components/workspace/mentions/mention-picker.tsx
new file mode 100644
index 0000000000..899dfffcf3
--- /dev/null
+++ b/frontend/src/components/workspace/mentions/mention-picker.tsx
@@ -0,0 +1,420 @@
+"use client";
+
+import {
+ CheckIcon,
+ FileIcon,
+ MessagesSquareIcon,
+ SparklesIcon,
+ UploadIcon,
+ XIcon,
+} from "lucide-react";
+import {
+ useEffect,
+ useImperativeHandle,
+ useMemo,
+ useRef,
+ useState,
+ type KeyboardEvent,
+ type Ref,
+} from "react";
+
+import type { ConversationReference } from "@/core/conversation-references";
+import { useI18n } from "@/core/i18n/hooks";
+import { useInfiniteProjectDocuments } from "@/core/projects/hooks";
+import type { ProjectDocument } from "@/core/projects/types";
+import type { Skill } from "@/core/skills/type";
+import { useInfiniteThreads } from "@/core/threads/hooks";
+import { agentNameOfThread, titleOfThread } from "@/core/threads/utils";
+import { isCompositionConfirmEnter, isIMEComposing } from "@/lib/ime";
+import { cn } from "@/lib/utils";
+
+import { MAX_EXPLICIT_SKILLS } from "./inline-references";
+
+export type MentionSelection =
+ | { kind: "skill"; skill: Skill }
+ | { kind: "file"; document: ProjectDocument }
+ | { kind: "conversation"; reference: ConversationReference }
+ | { kind: "upload" };
+export type MentionPickerHandle = {
+ onKeyDown: (event: KeyboardEvent) => void;
+};
+type Option = {
+ id: string;
+ label: string;
+ description?: string;
+ selection: MentionSelection;
+ disabled?: boolean;
+ selected?: boolean;
+};
+
+export function MentionPicker({
+ ref,
+ query,
+ searchInput = false,
+ skills,
+ skillsLoading = false,
+ skillsError,
+ onRetrySkills,
+ capability,
+ onActiveOptionChange,
+ selectedSkills,
+ references,
+ threadId,
+ projectId,
+ busy,
+ error,
+ onSelect,
+ onClose,
+ listId,
+}: {
+ ref?: Ref;
+ query: string;
+ searchInput?: boolean;
+ skills: Skill[];
+ skillsLoading?: boolean;
+ skillsError?: unknown;
+ onRetrySkills?: () => unknown;
+ capability: {
+ enabled: boolean;
+ maxReferences: number;
+ isLoading: boolean;
+ error?: unknown;
+ refetch?: () => unknown;
+ };
+ onActiveOptionChange?: (id: string | undefined) => void;
+ selectedSkills?: string[];
+ references: ConversationReference[];
+ threadId: string;
+ projectId?: string | null;
+ busy: boolean;
+ error: string | null;
+ onSelect: (selection: MentionSelection) => void;
+ onClose: () => void;
+ listId: string;
+}) {
+ const { t } = useI18n();
+ const labels = t.inputBox;
+ const documents = useInfiniteProjectDocuments(projectId ?? "", {
+ enabled: !!projectId,
+ });
+ const conversations = useInfiniteThreads(undefined, {
+ enabled: capability.enabled,
+ });
+ const [search, setSearch] = useState("");
+ const [activeId, setActiveId] = useState(null);
+ const rootRef = useRef(null);
+ const compositionEndedAt = useRef(-Infinity);
+ const filter = (searchInput ? search : query).toLocaleLowerCase();
+ const options = useMemo(() => {
+ const result: Option[] = skills
+ .filter((skill) => skill.enabled)
+ .map((skill) => ({
+ id: `skill:${skill.name}`,
+ label: skill.name,
+ description: skill.description,
+ selection: { kind: "skill", skill },
+ selected: selectedSkills?.includes(skill.name),
+ disabled:
+ !selectedSkills?.includes(skill.name) &&
+ new Set(selectedSkills).size >= MAX_EXPLICIT_SKILLS,
+ }));
+ for (const document of documents.data?.pages.flatMap(
+ (page) => page.documents,
+ ) ?? []) {
+ result.push({
+ id: `file:${document.id}`,
+ label: document.name,
+ description: document.content_missing
+ ? labels.mentionUnavailable
+ : undefined,
+ selection: { kind: "file", document },
+ disabled: document.content_missing,
+ });
+ }
+ if (capability.enabled) {
+ const seen = new Set();
+ for (const thread of conversations.data?.pages.flat() ?? []) {
+ if (thread.thread_id === threadId || seen.has(thread.thread_id))
+ continue;
+ seen.add(thread.thread_id);
+ const selected = references.some(
+ (item) => item.threadId === thread.thread_id,
+ );
+ result.push({
+ id: `conversation:${thread.thread_id}`,
+ label: titleOfThread(thread),
+ selection: {
+ kind: "conversation",
+ reference: {
+ threadId: thread.thread_id,
+ title: titleOfThread(thread),
+ agentName: agentNameOfThread(thread),
+ },
+ },
+ selected,
+ disabled: !selected && references.length >= capability.maxReferences,
+ });
+ }
+ }
+ const filtered = result.filter((option) =>
+ `${option.label} ${option.description ?? ""}`
+ .toLocaleLowerCase()
+ .includes(filter),
+ );
+ filtered.push({
+ id: "upload",
+ label: labels.mentionUpload,
+ selection: { kind: "upload" },
+ });
+ return filtered;
+ }, [
+ skills,
+ selectedSkills,
+ documents.data,
+ conversations.data,
+ capability.enabled,
+ capability.maxReferences,
+ threadId,
+ references,
+ filter,
+ labels,
+ ]);
+ const available = options.filter((option) => !option.disabled);
+ const active =
+ available.find((option) => option.id === activeId) ??
+ (filter
+ ? available.find((option) => option.selection.kind !== "upload")
+ : available[0]);
+ const optionId = (id: string) => `${listId}-${encodeURIComponent(id)}`;
+ const activeOptionId = active ? optionId(active.id) : undefined;
+ useEffect(() => {
+ onActiveOptionChange?.(searchInput ? undefined : activeOptionId);
+ }, [activeOptionId, searchInput, onActiveOptionChange]);
+ useEffect(
+ () => () => onActiveOptionChange?.(undefined),
+ [onActiveOptionChange],
+ );
+ const choose = (option: Option) => {
+ if (!busy && !option.disabled) onSelect(option.selection);
+ };
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (isCompositionConfirmEnter(event, compositionEndedAt.current)) {
+ event.preventDefault();
+ return;
+ }
+ if (isIMEComposing(event)) return;
+ if (event.key === "Escape") {
+ event.preventDefault();
+ onClose();
+ return;
+ }
+ if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+ event.preventDefault();
+ const index = available.findIndex((option) => option.id === active?.id);
+ const next =
+ available[
+ (index + (event.key === "ArrowDown" ? 1 : -1) + available.length) %
+ available.length
+ ];
+ setActiveId(next?.id ?? null);
+ } else if (event.key === "Enter" && !event.shiftKey && active) {
+ event.preventDefault();
+ choose(active);
+ }
+ };
+ useImperativeHandle(ref, () => ({ onKeyDown }));
+ useEffect(() => {
+ if (activeOptionId)
+ document
+ .getElementById(activeOptionId)
+ ?.scrollIntoView?.({ block: "nearest" });
+ }, [activeOptionId]);
+ const loading =
+ skillsLoading ||
+ capability.isLoading ||
+ (!!projectId && documents.isPending) ||
+ (capability.enabled && conversations.isPending);
+ const failed =
+ !!capability.error ||
+ !!skillsError ||
+ (!!projectId && documents.isError) ||
+ (capability.enabled && conversations.isError);
+ const groups = [
+ { kind: "skill", title: labels.mentionSkills, Icon: SparklesIcon },
+ { kind: "file", title: labels.mentionFiles, Icon: FileIcon },
+ {
+ kind: "conversation",
+ title: labels.mentionConversations,
+ Icon: MessagesSquareIcon,
+ },
+ { kind: "upload", title: "", Icon: UploadIcon },
+ ] as const;
+ return (
+
+
+ {searchInput ? (
+ {
+ setSearch(event.target.value);
+ setActiveId(null);
+ }}
+ onKeyDown={onKeyDown}
+ onCompositionEnd={() => {
+ compositionEndedAt.current = Date.now();
+ }}
+ />
+ ) : (
+
+ {labels.mentionPicker}
+
+ )}
+
+
+
+ {groups.map(({ kind, title, Icon }) => {
+ const items = options.filter(
+ (option) => option.selection.kind === kind,
+ );
+ if (!items.length) return null;
+ return (
+
+ {title && (
+
+ {title}
+
+ )}
+ {items.map((option) => (
+
+ ))}
+
+ );
+ })}
+
+ {options.length === 1 && !loading && !failed && (
+
+ {labels.mentionEmpty}
+
+ )}
+ {loading && (
+
+ {labels.mentionLoading}
+
+ )}
+ {failed && (
+
+ {labels.mentionFailed}{" "}
+
+
+ )}
+ {(documents.hasNextPage ||
+ (capability.enabled && conversations.hasNextPage)) && (
+
+ )}
+ {!projectId && (
+
+ {labels.mentionNoProject}
+
+ )}
+
+ {labels.mentionMultipleSkills}
+
+ {capability.enabled && (
+
+ {labels.referenceConversationsLimit(capability.maxReferences)}
+
+ )}
+ {busy && (
+
+ {labels.mentionAttaching}
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+