feat(ui): replace comment reassign checkbox with inline assignee selector
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
@@ -4,6 +4,7 @@ import type { IssueComment, Agent } from "@paperclip/shared";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Paperclip } from "lucide-react";
|
||||
import { Identity } from "./Identity";
|
||||
import { InlineEntitySelector, type InlineEntityOption } from "./InlineEntitySelector";
|
||||
import { MarkdownBody } from "./MarkdownBody";
|
||||
import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
|
||||
import { StatusBadge } from "./StatusBadge";
|
||||
@@ -27,11 +28,6 @@ interface CommentReassignment {
|
||||
assigneeUserId: string | null;
|
||||
}
|
||||
|
||||
interface ReassignOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface CommentThreadProps {
|
||||
comments: CommentWithRunMeta[];
|
||||
linkedRuns?: LinkedRunItem[];
|
||||
@@ -44,7 +40,8 @@ interface CommentThreadProps {
|
||||
draftKey?: string;
|
||||
liveRunSlot?: React.ReactNode;
|
||||
enableReassign?: boolean;
|
||||
reassignOptions?: ReassignOption[];
|
||||
reassignOptions?: InlineEntityOption[];
|
||||
currentAssigneeValue?: string;
|
||||
mentions?: MentionOption[];
|
||||
}
|
||||
|
||||
@@ -80,8 +77,7 @@ function clearDraft(draftKey: string) {
|
||||
}
|
||||
|
||||
function parseReassignment(target: string): CommentReassignment | null {
|
||||
if (!target) return null;
|
||||
if (target === "__none__") {
|
||||
if (!target || target === "__none__") {
|
||||
return { assigneeAgentId: null, assigneeUserId: null };
|
||||
}
|
||||
if (target.startsWith("agent:")) {
|
||||
@@ -111,14 +107,14 @@ export function CommentThread({
|
||||
liveRunSlot,
|
||||
enableReassign = false,
|
||||
reassignOptions = [],
|
||||
currentAssigneeValue = "",
|
||||
mentions: providedMentions,
|
||||
}: CommentThreadProps) {
|
||||
const [body, setBody] = useState("");
|
||||
const [reopen, setReopen] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [attaching, setAttaching] = useState(false);
|
||||
const [reassign, setReassign] = useState(false);
|
||||
const [reassignTarget, setReassignTarget] = useState("");
|
||||
const [reassignTarget, setReassignTarget] = useState(currentAssigneeValue);
|
||||
const editorRef = useRef<MarkdownEditorRef>(null);
|
||||
const attachInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
@@ -177,16 +173,14 @@ export function CommentThread({
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (enableReassign) return;
|
||||
setReassign(false);
|
||||
setReassignTarget("");
|
||||
}, [enableReassign]);
|
||||
setReassignTarget(currentAssigneeValue);
|
||||
}, [currentAssigneeValue]);
|
||||
|
||||
async function handleSubmit() {
|
||||
const trimmed = body.trim();
|
||||
if (!trimmed) return;
|
||||
const reassignment = reassign ? parseReassignment(reassignTarget) : null;
|
||||
if (reassign && !reassignment) return;
|
||||
const hasReassignment = enableReassign && reassignTarget !== currentAssigneeValue;
|
||||
const reassignment = hasReassignment ? parseReassignment(reassignTarget) : null;
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
@@ -194,8 +188,7 @@ export function CommentThread({
|
||||
setBody("");
|
||||
if (draftKey) clearDraft(draftKey);
|
||||
setReopen(false);
|
||||
setReassign(false);
|
||||
setReassignTarget("");
|
||||
setReassignTarget(currentAssigneeValue);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
@@ -213,7 +206,7 @@ export function CommentThread({
|
||||
}
|
||||
}
|
||||
|
||||
const canSubmit = !submitting && !!body.trim() && (!reassign || !!parseReassignment(reassignTarget));
|
||||
const canSubmit = !submitting && !!body.trim();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -308,61 +301,24 @@ export function CommentThread({
|
||||
contentClassName="min-h-[60px] text-sm"
|
||||
/>
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
{(onAttachImage || enableReassign) && (
|
||||
{onAttachImage && (
|
||||
<div className="mr-auto flex items-center gap-3">
|
||||
{onAttachImage && (
|
||||
<>
|
||||
<input
|
||||
ref={attachInputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp,image/gif"
|
||||
className="hidden"
|
||||
onChange={handleAttachFile}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => attachInputRef.current?.click()}
|
||||
disabled={attaching}
|
||||
title="Attach image"
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
<input
|
||||
ref={attachInputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp,image/gif"
|
||||
className="hidden"
|
||||
onChange={handleAttachFile}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => attachInputRef.current?.click()}
|
||||
disabled={attaching}
|
||||
title="Attach image"
|
||||
>
|
||||
<Paperclip className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{isClosed && (
|
||||
@@ -376,6 +332,18 @@ export function CommentThread({
|
||||
Re-open
|
||||
</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}>
|
||||
{submitting ? "Posting..." : "Comment"}
|
||||
</Button>
|
||||
|
||||
@@ -273,30 +273,26 @@ export function IssueDetail() {
|
||||
.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
|
||||
}, [allIssues, issue]);
|
||||
|
||||
const canReassignFromComment = Boolean(
|
||||
issue?.assigneeUserId &&
|
||||
(issue.assigneeUserId === "local-board" || (currentUserId && issue.assigneeUserId === currentUserId)),
|
||||
);
|
||||
|
||||
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 ?? [])]
|
||||
.filter((agent) => agent.status !== "terminated")
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
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) {
|
||||
const requesterLabel =
|
||||
issue.createdByUserId === "local-board"
|
||||
? "Board"
|
||||
: currentUserId && issue.createdByUserId === currentUserId
|
||||
? "Me"
|
||||
: issue.createdByUserId.slice(0, 8);
|
||||
options.push({ value: `user:${issue.createdByUserId}`, label: `Requester (${requesterLabel})` });
|
||||
if (currentUserId) {
|
||||
const label = currentUserId === "local-board" ? "Board" : "Me (Board)";
|
||||
options.push({ id: `user:${currentUserId}`, label });
|
||||
}
|
||||
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 runMetaByCommentId = new Map<string, { runId: string; runAgentId: string | null }>();
|
||||
@@ -744,8 +740,9 @@ export function IssueDetail() {
|
||||
issueStatus={issue.status}
|
||||
agentMap={agentMap}
|
||||
draftKey={`paperclip:issue-comment-draft:${issue.id}`}
|
||||
enableReassign={canReassignFromComment}
|
||||
enableReassign
|
||||
reassignOptions={commentReassignOptions}
|
||||
currentAssigneeValue={currentAssigneeValue}
|
||||
mentions={mentionOptions}
|
||||
onAdd={async (body, reopen, reassignment) => {
|
||||
if (reassignment) {
|
||||
|
||||
Reference in New Issue
Block a user