mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: enable @-mention autocomplete in new project description editor

Browse source 
The MarkdownEditor in NewProjectDialog was not receiving mention options,
so typing @ in the description field did nothing. Added agents query and
mentionOptions prop to match how NewIssueDialog handles mentions.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-26 07:41:58 -05:00
parent 0fd75aa579
commit a6ca3a9418
1 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ui/src/components/NewProjectDialog.tsx
View file

@ -1,8 +1,9 @@
import { useRef, useState } from "react"; import { useMemo, useRef, useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useDialog } from "../context/DialogContext"; import { useDialog } from "../context/DialogContext";
import { useCompany } from "../context/CompanyContext"; import { useCompany } from "../context/CompanyContext";
import { projectsApi } from "../api/projects"; import { projectsApi } from "../api/projects";
import { agentsApi } from "../api/agents";
import { goalsApi } from "../api/goals"; import { goalsApi } from "../api/goals";
import { assetsApi } from "../api/assets"; import { assetsApi } from "../api/assets";
import { queryKeys } from "../lib/queryKeys"; import { queryKeys } from "../lib/queryKeys";
@ -32,7 +33,7 @@ import {
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { PROJECT_COLORS } from "@paperclipai/shared"; import { PROJECT_COLORS } from "@paperclipai/shared";
import { cn } from "../lib/utils"; import { cn } from "../lib/utils";
import { MarkdownEditor, type MarkdownEditorRef } from "./MarkdownEditor"; import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
import { StatusBadge } from "./StatusBadge"; import { StatusBadge } from "./StatusBadge";
import { ChoosePathButton } from "./PathInstructionsModal"; import { ChoosePathButton } from "./PathInstructionsModal";
@ -68,6 +69,29 @@ export function NewProjectDialog() {
enabled: !!selectedCompanyId && newProjectOpen, enabled: !!selectedCompanyId && newProjectOpen,
}); });
const { data: agents } = useQuery({
queryKey: queryKeys.agents.list(selectedCompanyId!),
queryFn: () => agentsApi.list(selectedCompanyId!),
enabled: !!selectedCompanyId && newProjectOpen,
});
const mentionOptions = useMemo<MentionOption[]>(() => {
const options: MentionOption[] = [];
const activeAgents = [...(agents ?? [])]
.filter((agent) => agent.status !== "terminated")
.sort((a, b) => a.name.localeCompare(b.name));
for (const agent of activeAgents) {
options.push({
id: `agent:${agent.id}`,
name: agent.name,
kind: "agent",
agentId: agent.id,
agentIcon: agent.icon,
});
}
return options;
}, [agents]);
const createProject = useMutation({ const createProject = useMutation({
mutationFn: (data: Record<string, unknown>) => mutationFn: (data: Record<string, unknown>) =>
projectsApi.create(selectedCompanyId!, data), projectsApi.create(selectedCompanyId!, data),
@ -250,6 +274,7 @@ export function NewProjectDialog() {
onChange={setDescription} onChange={setDescription}
placeholder="Add description..." placeholder="Add description..."
bordered={false} bordered={false}
mentions={mentionOptions}
contentClassName={cn("text-sm text-muted-foreground", expanded ? "min-h-[220px]" : "min-h-[120px]")} contentClassName={cn("text-sm text-muted-foreground", expanded ? "min-h-[220px]" : "min-h-[120px]")}
imageUploadHandler={async (file) => { imageUploadHandler={async (file) => {
const asset = await uploadDescriptionImage.mutateAsync(file); const asset = await uploadDescriptionImage.mutateAsync(file);