hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): replace comment reassign checkbox with inline assignee selector

Browse Source 
Replace the checkbox + native <select> reassign pattern in CommentThread
with an always-visible InlineEntitySelector (matching the new issue dialog).
The selector defaults to the current assignee and only triggers reassignment
on comment submit if the user changed the selection.

- Remove ReassignOption interface, use InlineEntityOption from InlineEntitySelector
- Add currentAssigneeValue prop to track issue's current assignee
- Remove canReassignFromComment gate so selector is always visible
- Position selector to the left of the Comment button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
2026-03-02 16:56:05 -06:00
parent ae5c85adb9
commit dff78a6df4
2 changed files with 55 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
ui/src/components/CommentThread.tsx
View File

@@ -4,6 +4,7 @@ import type { IssueComment, Agent } from "@paperclip/shared";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Paperclip } from "lucide-react"; import { Paperclip } from "lucide-react";
import { Identity } from "./Identity"; import { Identity } from "./Identity";
import { InlineEntitySelector, type InlineEntityOption } from "./InlineEntitySelector";
import { MarkdownBody } from "./MarkdownBody"; import { MarkdownBody } from "./MarkdownBody";
import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor"; import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
import { StatusBadge } from "./StatusBadge"; import { StatusBadge } from "./StatusBadge";
@@ -27,11 +28,6 @@ interface CommentReassignment {
assigneeUserId: string | null; assigneeUserId: string | null;
} }
interface ReassignOption {
value: string;
label: string;
}
interface CommentThreadProps { interface CommentThreadProps {
comments: CommentWithRunMeta[]; comments: CommentWithRunMeta[];
linkedRuns?: LinkedRunItem[]; linkedRuns?: LinkedRunItem[];
@@ -44,7 +40,8 @@ interface CommentThreadProps {
draftKey?: string; draftKey?: string;
liveRunSlot?: React.ReactNode; liveRunSlot?: React.ReactNode;
enableReassign?: boolean; enableReassign?: boolean;
reassignOptions?: ReassignOption[]; reassignOptions?: InlineEntityOption[];
currentAssigneeValue?: string;
mentions?: MentionOption[]; mentions?: MentionOption[];
} }
@@ -80,8 +77,7 @@ function clearDraft(draftKey: string) {
} }
function parseReassignment(target: string): CommentReassignment | null { function parseReassignment(target: string): CommentReassignment | null {
if (!target) return null; if (!target || target === "__none__") {
if (target === "__none__") {
return { assigneeAgentId: null, assigneeUserId: null }; return { assigneeAgentId: null, assigneeUserId: null };
} }
if (target.startsWith("agent:")) { if (target.startsWith("agent:")) {
@@ -111,14 +107,14 @@ export function CommentThread({
liveRunSlot, liveRunSlot,
enableReassign = false, enableReassign = false,
reassignOptions = [], reassignOptions = [],
currentAssigneeValue = "",
mentions: providedMentions, mentions: providedMentions,
}: CommentThreadProps) { }: CommentThreadProps) {
const [body, setBody] = useState(""); const [body, setBody] = useState("");
const [reopen, setReopen] = useState(true); const [reopen, setReopen] = useState(true);
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [attaching, setAttaching] = useState(false); const [attaching, setAttaching] = useState(false);
const [reassign, setReassign] = useState(false); const [reassignTarget, setReassignTarget] = useState(currentAssigneeValue);
const [reassignTarget, setReassignTarget] = useState("");
const editorRef = useRef<MarkdownEditorRef>(null); const editorRef = useRef<MarkdownEditorRef>(null);
const attachInputRef = useRef<HTMLInputElement | null>(null); const attachInputRef = useRef<HTMLInputElement | null>(null);
const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null); const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -177,16 +173,14 @@ export function CommentThread({
}, []); }, []);
useEffect(() => { useEffect(() => {
if (enableReassign) return; setReassignTarget(currentAssigneeValue);
setReassign(false); }, [currentAssigneeValue]);
setReassignTarget("");
}, [enableReassign]);
async function handleSubmit() { async function handleSubmit() {
const trimmed = body.trim(); const trimmed = body.trim();
if (!trimmed) return; if (!trimmed) return;
const reassignment = reassign ? parseReassignment(reassignTarget) : null; const hasReassignment = enableReassign && reassignTarget !== currentAssigneeValue;
if (reassign && !reassignment) return; const reassignment = hasReassignment ? parseReassignment(reassignTarget) : null;
setSubmitting(true); setSubmitting(true);
try { try {
@@ -194,8 +188,7 @@ export function CommentThread({
setBody(""); setBody("");
if (draftKey) clearDraft(draftKey); if (draftKey) clearDraft(draftKey);
setReopen(false); setReopen(false);
setReassign(false); setReassignTarget(currentAssigneeValue);
setReassignTarget("");
} finally { } finally {
setSubmitting(false); setSubmitting(false);
} }
@@ -213,7 +206,7 @@ export function CommentThread({
} }
} }
const canSubmit = !submitting && !!body.trim() && (!reassign || !!parseReassignment(reassignTarget)); const canSubmit = !submitting && !!body.trim();
return ( return (
<div className="space-y-4"> <div className="space-y-4">
@@ -308,61 +301,24 @@ export function CommentThread({
contentClassName="min-h-[60px] text-sm" contentClassName="min-h-[60px] text-sm"
/> />
<div className="flex items-center justify-end gap-3"> <div className="flex items-center justify-end gap-3">
{(onAttachImage || enableReassign) && ( {onAttachImage && (
<div className="mr-auto flex items-center gap-3"> <div className="mr-auto flex items-center gap-3">
{onAttachImage && ( <input
<> ref={attachInputRef}
<input type="file"
ref={attachInputRef} accept="image/png,image/jpeg,image/webp,image/gif"
type="file" className="hidden"
accept="image/png,image/jpeg,image/webp,image/gif" onChange={handleAttachFile}
className="hidden" />
onChange={handleAttachFile} <Button
/> variant="ghost"
<Button size="icon-sm"
variant="ghost" onClick={() => attachInputRef.current?.click()}
size="icon-sm" disabled={attaching}
onClick={() => attachInputRef.current?.click()} title="Attach image"
disabled={attaching} >
title="Attach image" <Paperclip className="h-4 w-4" />
> </Button>
<Paperclip className="h-4 w-4" />
</Button>
</>
)}
{enableReassign && (
<div className="flex items-center gap-2">
<label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
<input
type="checkbox"
checked={reassign}
onChange={(e) => {
setReassign(e.target.checked);
if (!e.target.checked) setReassignTarget("");
}}
className="rounded border-border"
/>
Reassign
</label>
<select
value={reassignTarget}
onFocus={() => setReassign(true)}
onMouseDown={() => setReassign(true)}
onChange={(event) => {
setReassign(true);
setReassignTarget(event.target.value);
}}
className="h-8 rounded border border-border bg-background px-2 text-xs"
>
<option value="">Select assignee...</option>
{reassignOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</div>
)}
</div> </div>
)} )}
{isClosed && ( {isClosed && (
@@ -376,6 +332,18 @@ export function CommentThread({
Re-open Re-open
</label> </label>
)} )}
{enableReassign && reassignOptions.length > 0 && (
<InlineEntitySelector
value={reassignTarget}
options={reassignOptions}
placeholder="Assignee"
noneLabel="No assignee"
searchPlaceholder="Search assignees..."
emptyMessage="No assignees found."
onChange={setReassignTarget}
className="text-xs h-8"
/>
)}
<Button size="sm" disabled={!canSubmit} onClick={handleSubmit}> <Button size="sm" disabled={!canSubmit} onClick={handleSubmit}>
{submitting ? "Posting..." : "Comment"} {submitting ? "Posting..." : "Comment"}
</Button> </Button>

31
ui/src/pages/IssueDetail.tsx
View File

@@ -273,30 +273,26 @@ export function IssueDetail() {
.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()); .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
}, [allIssues, issue]); }, [allIssues, issue]);
const canReassignFromComment = Boolean(
issue?.assigneeUserId &&
(issue.assigneeUserId === "local-board" || (currentUserId && issue.assigneeUserId === currentUserId)),
);
const commentReassignOptions = useMemo(() => { const commentReassignOptions = useMemo(() => {
const options: Array<{ value: string; label: string }> = [{ value: "__none__", label: "No assignee" }]; const options: Array<{ id: string; label: string; searchText?: string }> = [];
const activeAgents = [...(agents ?? [])] const activeAgents = [...(agents ?? [])]
.filter((agent) => agent.status !== "terminated") .filter((agent) => agent.status !== "terminated")
.sort((a, b) => a.name.localeCompare(b.name)); .sort((a, b) => a.name.localeCompare(b.name));
for (const agent of activeAgents) { for (const agent of activeAgents) {
options.push({ value: `agent:${agent.id}`, label: agent.name }); options.push({ id: `agent:${agent.id}`, label: agent.name });
} }
if (issue?.createdByUserId && issue.createdByUserId !== issue.assigneeUserId) { if (currentUserId) {
const requesterLabel = const label = currentUserId === "local-board" ? "Board" : "Me (Board)";
issue.createdByUserId === "local-board" options.push({ id: `user:${currentUserId}`, label });
? "Board"
: currentUserId && issue.createdByUserId === currentUserId
? "Me"
: issue.createdByUserId.slice(0, 8);
options.push({ value: `user:${issue.createdByUserId}`, label: `Requester (${requesterLabel})` });
} }
return options; return options;
}, [agents, currentUserId, issue?.assigneeUserId, issue?.createdByUserId]); }, [agents, currentUserId]);
const currentAssigneeValue = useMemo(() => {
if (issue?.assigneeAgentId) return `agent:${issue.assigneeAgentId}`;
if (issue?.assigneeUserId) return `user:${issue.assigneeUserId}`;
return "";
}, [issue?.assigneeAgentId, issue?.assigneeUserId]);
const commentsWithRunMeta = useMemo(() => { const commentsWithRunMeta = useMemo(() => {
const runMetaByCommentId = new Map<string, { runId: string; runAgentId: string | null }>(); const runMetaByCommentId = new Map<string, { runId: string; runAgentId: string | null }>();
@@ -744,8 +740,9 @@ export function IssueDetail() {
issueStatus={issue.status} issueStatus={issue.status}
agentMap={agentMap} agentMap={agentMap}
draftKey={`paperclip:issue-comment-draft:${issue.id}`} draftKey={`paperclip:issue-comment-draft:${issue.id}`}
enableReassign={canReassignFromComment} enableReassign
reassignOptions={commentReassignOptions} reassignOptions={commentReassignOptions}
currentAssigneeValue={currentAssigneeValue}
mentions={mentionOptions} mentions={mentionOptions}
onAdd={async (body, reopen, reassignment) => { onAdd={async (body, reopen, reassignment) => {
if (reassignment) { if (reassignment) {