forked from farhoodlabs/paperclip
Implement assistant-ui issue chat thread
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta
@@ -26,6 +26,7 @@
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@assistant-ui/react": "0.12.23",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
|
||||
@@ -0,0 +1,883 @@
|
||||
import {
|
||||
AssistantRuntimeProvider,
|
||||
MessagePrimitive,
|
||||
ThreadPrimitive,
|
||||
useAui,
|
||||
useAuiState,
|
||||
useMessage,
|
||||
} from "@assistant-ui/react";
|
||||
import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
|
||||
import { Link, useLocation } from "@/lib/router";
|
||||
import type {
|
||||
Agent,
|
||||
FeedbackDataSharingPreference,
|
||||
FeedbackVote,
|
||||
FeedbackVoteValue,
|
||||
} from "@paperclipai/shared";
|
||||
import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats";
|
||||
import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
|
||||
import { usePaperclipIssueRuntime, type PaperclipIssueRuntimeReassignment } from "../hooks/usePaperclipIssueRuntime";
|
||||
import {
|
||||
buildIssueChatMessages,
|
||||
type IssueChatComment,
|
||||
type IssueChatLinkedRun,
|
||||
} from "../lib/issue-chat-messages";
|
||||
import type { IssueTimelineEvent } from "../lib/issue-timeline-events";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { MarkdownBody } from "./MarkdownBody";
|
||||
import { MarkdownEditor, type MentionOption, type MarkdownEditorRef } from "./MarkdownEditor";
|
||||
import { Identity } from "./Identity";
|
||||
import { OutputFeedbackButtons } from "./OutputFeedbackButtons";
|
||||
import { InlineEntitySelector, type InlineEntityOption } from "./InlineEntitySelector";
|
||||
import { AgentIcon } from "./AgentIconPicker";
|
||||
import { StatusBadge } from "./StatusBadge";
|
||||
import { restoreSubmittedCommentDraft } from "../lib/comment-submit-draft";
|
||||
import { cn, formatDateTime } from "../lib/utils";
|
||||
import { Check, Copy, Loader2, Paperclip, Square } from "lucide-react";
|
||||
|
||||
interface CommentReassignment {
|
||||
assigneeAgentId: string | null;
|
||||
assigneeUserId: string | null;
|
||||
}
|
||||
|
||||
interface IssueChatThreadProps {
|
||||
comments: IssueChatComment[];
|
||||
feedbackVotes?: FeedbackVote[];
|
||||
feedbackDataSharingPreference?: FeedbackDataSharingPreference;
|
||||
feedbackTermsUrl?: string | null;
|
||||
linkedRuns?: IssueChatLinkedRun[];
|
||||
timelineEvents?: IssueTimelineEvent[];
|
||||
liveRuns?: LiveRunForIssue[];
|
||||
activeRun?: ActiveRunForIssue | null;
|
||||
companyId?: string | null;
|
||||
projectId?: string | null;
|
||||
issueStatus?: string;
|
||||
agentMap?: Map<string, Agent>;
|
||||
currentUserId?: string | null;
|
||||
onVote?: (
|
||||
commentId: string,
|
||||
vote: FeedbackVoteValue,
|
||||
options?: { allowSharing?: boolean; reason?: string },
|
||||
) => Promise<void>;
|
||||
onAdd: (body: string, reopen?: boolean, reassignment?: CommentReassignment) => Promise<void>;
|
||||
onCancelRun?: () => Promise<void>;
|
||||
imageUploadHandler?: (file: File) => Promise<string>;
|
||||
onAttachImage?: (file: File) => Promise<void>;
|
||||
draftKey?: string;
|
||||
enableReassign?: boolean;
|
||||
reassignOptions?: InlineEntityOption[];
|
||||
currentAssigneeValue?: string;
|
||||
suggestedAssigneeValue?: string;
|
||||
mentions?: MentionOption[];
|
||||
composerDisabledReason?: string | null;
|
||||
}
|
||||
|
||||
const DRAFT_DEBOUNCE_MS = 800;
|
||||
|
||||
function toIsoString(value: string | Date | null | undefined): string | null {
|
||||
if (!value) return null;
|
||||
return typeof value === "string" ? value : value.toISOString();
|
||||
}
|
||||
|
||||
function loadDraft(draftKey: string): string {
|
||||
try {
|
||||
return localStorage.getItem(draftKey) ?? "";
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function saveDraft(draftKey: string, value: string) {
|
||||
try {
|
||||
if (value.trim()) {
|
||||
localStorage.setItem(draftKey, value);
|
||||
} else {
|
||||
localStorage.removeItem(draftKey);
|
||||
}
|
||||
} catch {
|
||||
// Ignore localStorage failures.
|
||||
}
|
||||
}
|
||||
|
||||
function clearDraft(draftKey: string) {
|
||||
try {
|
||||
localStorage.removeItem(draftKey);
|
||||
} catch {
|
||||
// Ignore localStorage failures.
|
||||
}
|
||||
}
|
||||
|
||||
function parseReassignment(target: string): PaperclipIssueRuntimeReassignment | null {
|
||||
if (!target || target === "__none__") {
|
||||
return { assigneeAgentId: null, assigneeUserId: null };
|
||||
}
|
||||
if (target.startsWith("agent:")) {
|
||||
const assigneeAgentId = target.slice("agent:".length);
|
||||
return assigneeAgentId ? { assigneeAgentId, assigneeUserId: null } : null;
|
||||
}
|
||||
if (target.startsWith("user:")) {
|
||||
const assigneeUserId = target.slice("user:".length);
|
||||
return assigneeUserId ? { assigneeAgentId: null, assigneeUserId } : null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function CopyMarkdownButton({ text }: { text: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
title="Copy as markdown"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
});
|
||||
}}
|
||||
>
|
||||
{copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueChatTextPart({ text }: { text: string }) {
|
||||
return <MarkdownBody className="text-sm leading-6">{text}</MarkdownBody>;
|
||||
}
|
||||
|
||||
function IssueChatReasoningPart({ text }: { text: string }) {
|
||||
return (
|
||||
<details className="rounded-lg border border-border/70 bg-background/70 px-3 py-2">
|
||||
<summary className="cursor-pointer text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
||||
Thinking
|
||||
</summary>
|
||||
<div className="mt-2">
|
||||
<MarkdownBody className="text-sm leading-6">{text}</MarkdownBody>
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueChatToolPart({
|
||||
toolName,
|
||||
argsText,
|
||||
result,
|
||||
isError,
|
||||
}: {
|
||||
toolName: string;
|
||||
argsText: string;
|
||||
result?: unknown;
|
||||
isError?: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const resultText =
|
||||
typeof result === "string"
|
||||
? result
|
||||
: result === undefined
|
||||
? ""
|
||||
: JSON.stringify(result, null, 2);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg border px-3 py-2",
|
||||
isError
|
||||
? "border-red-300/70 bg-red-50/70 dark:border-red-500/40 dark:bg-red-500/10"
|
||||
: "border-border/70 bg-background/70",
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between gap-3 text-left"
|
||||
onClick={() => setOpen((current) => !current)}
|
||||
>
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
||||
Tool
|
||||
</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-foreground">{toolName}</span>
|
||||
{result === undefined ? (
|
||||
<span className="inline-flex items-center gap-1 rounded-full border border-cyan-400/40 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-cyan-700 dark:text-cyan-200">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
Running
|
||||
</span>
|
||||
) : isError ? (
|
||||
<span className="inline-flex items-center rounded-full border border-red-400/50 bg-red-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-red-700 dark:text-red-200">
|
||||
Error
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center rounded-full border border-emerald-400/50 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-emerald-700 dark:text-emerald-200">
|
||||
Complete
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{open ? (
|
||||
<div className="mt-3 space-y-3">
|
||||
{argsText ? (
|
||||
<div>
|
||||
<div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
||||
Input
|
||||
</div>
|
||||
<pre className="overflow-x-auto rounded-md bg-accent/40 p-2 text-xs text-foreground">{argsText}</pre>
|
||||
</div>
|
||||
) : null}
|
||||
{result !== undefined ? (
|
||||
<div>
|
||||
<div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
||||
Result
|
||||
</div>
|
||||
<pre className="overflow-x-auto rounded-md bg-accent/40 p-2 text-xs text-foreground">{resultText}</pre>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueChatUserMessage({
|
||||
companyId,
|
||||
projectId,
|
||||
}: {
|
||||
companyId?: string | null;
|
||||
projectId?: string | null;
|
||||
}) {
|
||||
const message = useMessage();
|
||||
const custom = message.metadata.custom as Record<string, unknown>;
|
||||
const anchorId = typeof custom.anchorId === "string" ? custom.anchorId : undefined;
|
||||
const authorName = typeof custom.authorName === "string" ? custom.authorName : "You";
|
||||
const body = message.content
|
||||
.filter((part): part is Extract<(typeof message.content)[number], { type: "text" }> => part.type === "text")
|
||||
.map((part) => part.text)
|
||||
.join("\n");
|
||||
const queued = custom.queueState === "queued" || custom.clientStatus === "queued";
|
||||
const pending = custom.clientStatus === "pending";
|
||||
|
||||
return (
|
||||
<MessagePrimitive.Root
|
||||
id={anchorId}
|
||||
className="flex justify-end"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"max-w-[min(680px,92%)] rounded-2xl border px-4 py-3 shadow-sm",
|
||||
queued
|
||||
? "border-amber-300/70 bg-amber-50/80 dark:border-amber-500/40 dark:bg-amber-500/10"
|
||||
: "border-primary/20 bg-primary/8",
|
||||
pending && "opacity-80",
|
||||
)}
|
||||
>
|
||||
<div className="mb-2 flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Identity name={authorName} size="sm" />
|
||||
{queued ? (
|
||||
<span className="inline-flex items-center rounded-full border border-amber-400/60 bg-amber-100/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-amber-800 dark:border-amber-400/40 dark:bg-amber-500/20 dark:text-amber-200">
|
||||
Queued
|
||||
</span>
|
||||
) : null}
|
||||
{pending ? <span className="text-xs text-muted-foreground">Sending...</span> : null}
|
||||
</div>
|
||||
<span className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<a href={anchorId ? `#${anchorId}` : undefined} className="hover:text-foreground hover:underline">
|
||||
{formatDateTime(message.createdAt)}
|
||||
</a>
|
||||
<CopyMarkdownButton text={body} />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<MessagePrimitive.Content
|
||||
components={{
|
||||
Text: ({ text }) => <IssueChatTextPart text={text} />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{companyId && typeof custom.commentId === "string" ? null : null}
|
||||
{projectId ? null : null}
|
||||
</div>
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueChatAssistantMessage({
|
||||
feedbackVoteByTargetId,
|
||||
feedbackDataSharingPreference,
|
||||
feedbackTermsUrl,
|
||||
onVote,
|
||||
}: {
|
||||
feedbackVoteByTargetId: Map<string, FeedbackVoteValue>;
|
||||
feedbackDataSharingPreference?: FeedbackDataSharingPreference;
|
||||
feedbackTermsUrl?: string | null;
|
||||
onVote?: (
|
||||
commentId: string,
|
||||
vote: FeedbackVoteValue,
|
||||
options?: { allowSharing?: boolean; reason?: string },
|
||||
) => Promise<void>;
|
||||
}) {
|
||||
const message = useMessage();
|
||||
const custom = message.metadata.custom as Record<string, unknown>;
|
||||
const anchorId = typeof custom.anchorId === "string" ? custom.anchorId : undefined;
|
||||
const authorName = typeof custom.authorName === "string"
|
||||
? custom.authorName
|
||||
: typeof custom.runAgentName === "string"
|
||||
? custom.runAgentName
|
||||
: "Agent";
|
||||
const runId = typeof custom.runId === "string" ? custom.runId : null;
|
||||
const runAgentId = typeof custom.runAgentId === "string" ? custom.runAgentId : null;
|
||||
const commentId = typeof custom.commentId === "string" ? custom.commentId : null;
|
||||
const notices = Array.isArray(custom.notices)
|
||||
? custom.notices.filter((notice): notice is string => typeof notice === "string" && notice.length > 0)
|
||||
: [];
|
||||
const waitingText = typeof custom.waitingText === "string" ? custom.waitingText : "";
|
||||
const isRunning = message.role === "assistant" && message.status?.type === "running";
|
||||
|
||||
const handleVote = async (
|
||||
vote: FeedbackVoteValue,
|
||||
options?: { allowSharing?: boolean; reason?: string },
|
||||
) => {
|
||||
if (!commentId || !onVote) return;
|
||||
await onVote(commentId, vote, options);
|
||||
};
|
||||
|
||||
return (
|
||||
<MessagePrimitive.Root id={anchorId} className="flex justify-start">
|
||||
<div className="max-w-[min(760px,96%)] rounded-2xl border border-border bg-card px-4 py-3 shadow-sm">
|
||||
<div className="mb-2 flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Identity name={authorName} size="sm" />
|
||||
{isRunning ? (
|
||||
<span className="inline-flex items-center gap-1 rounded-full border border-cyan-400/40 bg-cyan-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-cyan-700 dark:text-cyan-200">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
Running
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<span className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<a href={anchorId ? `#${anchorId}` : undefined} className="hover:text-foreground hover:underline">
|
||||
{formatDateTime(message.createdAt)}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<MessagePrimitive.Content
|
||||
components={{
|
||||
Text: ({ text }) => <IssueChatTextPart text={text} />,
|
||||
Reasoning: ({ text }) => <IssueChatReasoningPart text={text} />,
|
||||
tools: {
|
||||
Override: ({ toolName, argsText, result, isError }) => (
|
||||
<IssueChatToolPart
|
||||
toolName={toolName}
|
||||
argsText={argsText}
|
||||
result={result}
|
||||
isError={isError}
|
||||
/>
|
||||
),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{message.content.length === 0 && waitingText ? (
|
||||
<div className="rounded-lg border border-border/70 bg-background/70 px-3 py-2 text-sm text-muted-foreground">
|
||||
{waitingText}
|
||||
</div>
|
||||
) : null}
|
||||
{notices.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{notices.map((notice, index) => (
|
||||
<div
|
||||
key={`${message.id}:notice:${index}`}
|
||||
className="rounded-lg border border-border/60 bg-accent/30 px-3 py-2 text-sm text-muted-foreground"
|
||||
>
|
||||
{notice}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2 border-t border-border/60 pt-3">
|
||||
{runId ? (
|
||||
runAgentId ? (
|
||||
<Link
|
||||
to={`/agents/${runAgentId}/runs/${runId}`}
|
||||
className="inline-flex items-center rounded-md border border-border bg-accent/30 px-2 py-1 text-[10px] font-mono text-muted-foreground hover:bg-accent/50 hover:text-foreground"
|
||||
>
|
||||
run {runId.slice(0, 8)}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="inline-flex items-center rounded-md border border-border bg-accent/30 px-2 py-1 text-[10px] font-mono text-muted-foreground">
|
||||
run {runId.slice(0, 8)}
|
||||
</span>
|
||||
)
|
||||
) : null}
|
||||
{commentId && onVote ? (
|
||||
<OutputFeedbackButtons
|
||||
activeVote={feedbackVoteByTargetId.get(commentId) ?? null}
|
||||
sharingPreference={feedbackDataSharingPreference ?? "prompt"}
|
||||
termsUrl={feedbackTermsUrl ?? null}
|
||||
onVote={handleVote}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueChatSystemMessage() {
|
||||
const message = useMessage();
|
||||
const custom = message.metadata.custom as Record<string, unknown>;
|
||||
const text = message.content
|
||||
.filter((part): part is Extract<(typeof message.content)[number], { type: "text" }> => part.type === "text")
|
||||
.map((part) => part.text)
|
||||
.join("\n");
|
||||
const anchorId = typeof custom.anchorId === "string" ? custom.anchorId : undefined;
|
||||
const runId = typeof custom.runId === "string" ? custom.runId : null;
|
||||
const runAgentId = typeof custom.runAgentId === "string" ? custom.runAgentId : null;
|
||||
const runStatus = typeof custom.runStatus === "string" ? custom.runStatus : null;
|
||||
|
||||
return (
|
||||
<MessagePrimitive.Root id={anchorId} className="flex justify-center">
|
||||
<div className="max-w-[min(760px,96%)] rounded-xl border border-border/70 bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
|
||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||
<span className="whitespace-pre-wrap text-center">{text}</span>
|
||||
{runStatus ? <StatusBadge status={runStatus} /> : null}
|
||||
{runId && runAgentId ? (
|
||||
<Link
|
||||
to={`/agents/${runAgentId}/runs/${runId}`}
|
||||
className="inline-flex items-center rounded-md border border-border bg-background/70 px-2 py-1 text-[10px] font-mono text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{runId.slice(0, 8)}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueChatComposer({
|
||||
onImageUpload,
|
||||
onAttachImage,
|
||||
draftKey,
|
||||
enableReassign = false,
|
||||
reassignOptions = [],
|
||||
currentAssigneeValue = "",
|
||||
suggestedAssigneeValue,
|
||||
mentions = [],
|
||||
agentMap,
|
||||
composerDisabledReason = null,
|
||||
issueStatus,
|
||||
onCancelRun,
|
||||
}: {
|
||||
onImageUpload?: (file: File) => Promise<string>;
|
||||
onAttachImage?: (file: File) => Promise<void>;
|
||||
draftKey?: string;
|
||||
enableReassign?: boolean;
|
||||
reassignOptions?: InlineEntityOption[];
|
||||
currentAssigneeValue?: string;
|
||||
suggestedAssigneeValue?: string;
|
||||
mentions?: MentionOption[];
|
||||
agentMap?: Map<string, Agent>;
|
||||
composerDisabledReason?: string | null;
|
||||
issueStatus?: string;
|
||||
onCancelRun?: (() => Promise<void>) | undefined;
|
||||
}) {
|
||||
const api = useAui();
|
||||
const isRunning = useAuiState((state) => state.thread.isRunning);
|
||||
const [body, setBody] = useState("");
|
||||
const [reopen, setReopen] = useState(issueStatus === "done" || issueStatus === "cancelled");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [attaching, setAttaching] = useState(false);
|
||||
const [cancelling, setCancelling] = useState(false);
|
||||
const effectiveSuggestedAssigneeValue = suggestedAssigneeValue ?? currentAssigneeValue;
|
||||
const [reassignTarget, setReassignTarget] = useState(effectiveSuggestedAssigneeValue);
|
||||
const attachInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const editorRef = useRef<MarkdownEditorRef>(null);
|
||||
const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!draftKey) return;
|
||||
setBody(loadDraft(draftKey));
|
||||
}, [draftKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!draftKey) return;
|
||||
if (draftTimer.current) clearTimeout(draftTimer.current);
|
||||
draftTimer.current = setTimeout(() => {
|
||||
saveDraft(draftKey, body);
|
||||
}, DRAFT_DEBOUNCE_MS);
|
||||
}, [body, draftKey]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (draftTimer.current) clearTimeout(draftTimer.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setReassignTarget(effectiveSuggestedAssigneeValue);
|
||||
}, [effectiveSuggestedAssigneeValue]);
|
||||
|
||||
async function handleSubmit() {
|
||||
const trimmed = body.trim();
|
||||
if (!trimmed || submitting) return;
|
||||
|
||||
const hasReassignment = enableReassign && reassignTarget !== currentAssigneeValue;
|
||||
const reassignment = hasReassignment ? parseReassignment(reassignTarget) : undefined;
|
||||
const submittedBody = trimmed;
|
||||
|
||||
setSubmitting(true);
|
||||
setBody("");
|
||||
try {
|
||||
await api.thread().append({
|
||||
role: "user",
|
||||
content: [{ type: "text", text: submittedBody }],
|
||||
metadata: { custom: {} },
|
||||
attachments: [],
|
||||
runConfig: {
|
||||
custom: {
|
||||
...(reopen ? { reopen: true } : {}),
|
||||
...(reassignment ? { reassignment } : {}),
|
||||
},
|
||||
},
|
||||
});
|
||||
if (draftKey) clearDraft(draftKey);
|
||||
setReopen(issueStatus === "done" || issueStatus === "cancelled");
|
||||
setReassignTarget(effectiveSuggestedAssigneeValue);
|
||||
} catch {
|
||||
setBody((current) =>
|
||||
restoreSubmittedCommentDraft({
|
||||
currentBody: current,
|
||||
submittedBody,
|
||||
}),
|
||||
);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAttachFile(evt: ChangeEvent<HTMLInputElement>) {
|
||||
const file = evt.target.files?.[0];
|
||||
if (!file) return;
|
||||
setAttaching(true);
|
||||
try {
|
||||
if (onImageUpload) {
|
||||
const url = await onImageUpload(file);
|
||||
const safeName = file.name.replace(/[[\]]/g, "\\$&");
|
||||
const markdown = ``;
|
||||
setBody((prev) => prev ? `${prev}\n\n${markdown}` : markdown);
|
||||
} else if (onAttachImage) {
|
||||
await onAttachImage(file);
|
||||
}
|
||||
} finally {
|
||||
setAttaching(false);
|
||||
if (attachInputRef.current) attachInputRef.current.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancelRun() {
|
||||
if (!onCancelRun || cancelling) return;
|
||||
setCancelling(true);
|
||||
try {
|
||||
await onCancelRun();
|
||||
} finally {
|
||||
setCancelling(false);
|
||||
}
|
||||
}
|
||||
|
||||
const canSubmit = !submitting && !!body.trim();
|
||||
|
||||
if (composerDisabledReason) {
|
||||
return (
|
||||
<div className="rounded-md border border-amber-300/70 bg-amber-50/80 px-3 py-2 text-sm text-amber-900 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-100">
|
||||
{composerDisabledReason}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-border bg-card px-4 py-4 shadow-sm">
|
||||
{isRunning ? (
|
||||
<div className="mb-3 flex flex-wrap items-center justify-between gap-2 rounded-xl border border-cyan-400/30 bg-cyan-500/10 px-3 py-2 text-sm text-cyan-900 dark:text-cyan-100">
|
||||
<span>Messages sent now queue behind the active run.</span>
|
||||
{onCancelRun ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-red-300 text-red-700 hover:bg-red-50 hover:text-red-800 dark:border-red-500/40 dark:text-red-300 dark:hover:bg-red-500/10"
|
||||
disabled={cancelling}
|
||||
onClick={() => void handleCancelRun()}
|
||||
>
|
||||
<Square className="mr-1 h-3.5 w-3.5" fill="currentColor" />
|
||||
{cancelling ? "Stopping..." : "Interrupt"}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<MarkdownEditor
|
||||
ref={editorRef}
|
||||
value={body}
|
||||
onChange={setBody}
|
||||
placeholder="Reply in chat..."
|
||||
mentions={mentions}
|
||||
onSubmit={handleSubmit}
|
||||
imageUploadHandler={onImageUpload}
|
||||
contentClassName="min-h-[72px] text-sm"
|
||||
/>
|
||||
|
||||
<div className="mt-3 flex items-center justify-end gap-3">
|
||||
{(onImageUpload || onAttachImage) ? (
|
||||
<div className="mr-auto flex items-center gap-3">
|
||||
<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>
|
||||
) : null}
|
||||
|
||||
<label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={reopen}
|
||||
onChange={(event) => setReopen(event.target.checked)}
|
||||
className="rounded border-border"
|
||||
/>
|
||||
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="h-8 text-xs"
|
||||
renderTriggerValue={(option) => {
|
||||
if (!option) return <span className="text-muted-foreground">Assignee</span>;
|
||||
const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
|
||||
const agent = agentId ? agentMap?.get(agentId) : null;
|
||||
return (
|
||||
<>
|
||||
{agent ? (
|
||||
<AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
) : null}
|
||||
<span className="truncate">{option.label}</span>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
renderOption={(option) => {
|
||||
if (!option.id) return <span className="truncate">{option.label}</span>;
|
||||
const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
|
||||
const agent = agentId ? agentMap?.get(agentId) : null;
|
||||
return (
|
||||
<>
|
||||
{agent ? (
|
||||
<AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
) : null}
|
||||
<span className="truncate">{option.label}</span>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Button size="sm" disabled={!canSubmit} onClick={() => void handleSubmit()}>
|
||||
{submitting ? "Posting..." : "Send"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function IssueChatThread({
|
||||
comments,
|
||||
feedbackVotes = [],
|
||||
feedbackDataSharingPreference = "prompt",
|
||||
feedbackTermsUrl = null,
|
||||
linkedRuns = [],
|
||||
timelineEvents = [],
|
||||
liveRuns = [],
|
||||
activeRun = null,
|
||||
companyId,
|
||||
projectId,
|
||||
issueStatus,
|
||||
agentMap,
|
||||
currentUserId,
|
||||
onVote,
|
||||
onAdd,
|
||||
onCancelRun,
|
||||
imageUploadHandler,
|
||||
onAttachImage,
|
||||
draftKey,
|
||||
enableReassign = false,
|
||||
reassignOptions = [],
|
||||
currentAssigneeValue = "",
|
||||
suggestedAssigneeValue,
|
||||
mentions = [],
|
||||
composerDisabledReason = null,
|
||||
}: IssueChatThreadProps) {
|
||||
const location = useLocation();
|
||||
const hasScrolledRef = useRef(false);
|
||||
const displayLiveRuns = useMemo(() => {
|
||||
const deduped = new Map<string, LiveRunForIssue>();
|
||||
for (const run of liveRuns) {
|
||||
deduped.set(run.id, run);
|
||||
}
|
||||
if (activeRun) {
|
||||
deduped.set(activeRun.id, {
|
||||
id: activeRun.id,
|
||||
status: activeRun.status,
|
||||
invocationSource: activeRun.invocationSource,
|
||||
triggerDetail: activeRun.triggerDetail,
|
||||
startedAt: toIsoString(activeRun.startedAt),
|
||||
finishedAt: toIsoString(activeRun.finishedAt),
|
||||
createdAt: toIsoString(activeRun.createdAt) ?? new Date().toISOString(),
|
||||
agentId: activeRun.agentId,
|
||||
agentName: activeRun.agentName,
|
||||
adapterType: activeRun.adapterType,
|
||||
});
|
||||
}
|
||||
return [...deduped.values()].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
|
||||
}, [activeRun, liveRuns]);
|
||||
const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({ runs: displayLiveRuns, companyId });
|
||||
|
||||
const messages = useMemo(
|
||||
() =>
|
||||
buildIssueChatMessages({
|
||||
comments,
|
||||
timelineEvents,
|
||||
linkedRuns,
|
||||
liveRuns,
|
||||
activeRun,
|
||||
transcriptsByRunId: transcriptByRun,
|
||||
hasOutputForRun,
|
||||
companyId,
|
||||
projectId,
|
||||
agentMap,
|
||||
currentUserId,
|
||||
}),
|
||||
[
|
||||
comments,
|
||||
timelineEvents,
|
||||
linkedRuns,
|
||||
liveRuns,
|
||||
activeRun,
|
||||
transcriptByRun,
|
||||
hasOutputForRun,
|
||||
companyId,
|
||||
projectId,
|
||||
agentMap,
|
||||
currentUserId,
|
||||
],
|
||||
);
|
||||
|
||||
const isRunning = displayLiveRuns.some((run) => run.status === "queued" || run.status === "running");
|
||||
const feedbackVoteByTargetId = useMemo(() => {
|
||||
const map = new Map<string, FeedbackVoteValue>();
|
||||
for (const feedbackVote of feedbackVotes) {
|
||||
if (feedbackVote.targetType !== "issue_comment") continue;
|
||||
map.set(feedbackVote.targetId, feedbackVote.vote);
|
||||
}
|
||||
return map;
|
||||
}, [feedbackVotes]);
|
||||
|
||||
const runtime = usePaperclipIssueRuntime({
|
||||
messages,
|
||||
isRunning,
|
||||
onSend: ({ body, reopen, reassignment }) => onAdd(body, reopen, reassignment),
|
||||
onCancel: onCancelRun,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const hash = location.hash;
|
||||
if (!(hash.startsWith("#comment-") || hash.startsWith("#activity-") || hash.startsWith("#run-"))) return;
|
||||
if (messages.length === 0 || hasScrolledRef.current) return;
|
||||
const targetId = hash.slice(1);
|
||||
const element = document.getElementById(targetId);
|
||||
if (!element) return;
|
||||
hasScrolledRef.current = true;
|
||||
element.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}, [location.hash, messages]);
|
||||
|
||||
const components = useMemo(
|
||||
() => ({
|
||||
UserMessage: () => <IssueChatUserMessage companyId={companyId} projectId={projectId} />,
|
||||
AssistantMessage: () => (
|
||||
<IssueChatAssistantMessage
|
||||
feedbackVoteByTargetId={feedbackVoteByTargetId}
|
||||
feedbackDataSharingPreference={feedbackDataSharingPreference}
|
||||
feedbackTermsUrl={feedbackTermsUrl}
|
||||
onVote={onVote}
|
||||
/>
|
||||
),
|
||||
SystemMessage: () => <IssueChatSystemMessage />,
|
||||
}),
|
||||
[
|
||||
companyId,
|
||||
projectId,
|
||||
feedbackVoteByTargetId,
|
||||
feedbackDataSharingPreference,
|
||||
feedbackTermsUrl,
|
||||
onVote,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
<AssistantRuntimeProvider runtime={runtime}>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h3 className="text-sm font-semibold">Chat ({messages.length})</h3>
|
||||
<ThreadPrimitive.ScrollToBottom className="text-xs text-muted-foreground hover:text-foreground">
|
||||
Jump to latest
|
||||
</ThreadPrimitive.ScrollToBottom>
|
||||
</div>
|
||||
|
||||
<ThreadPrimitive.Root className="rounded-2xl border border-border bg-background shadow-sm">
|
||||
<ThreadPrimitive.Viewport className="max-h-[70vh] space-y-4 overflow-y-auto px-4 py-4">
|
||||
<ThreadPrimitive.Empty>
|
||||
<div className="rounded-2xl border border-dashed border-border bg-card px-6 py-10 text-center text-sm text-muted-foreground">
|
||||
This issue conversation is empty. Start with a message below.
|
||||
</div>
|
||||
</ThreadPrimitive.Empty>
|
||||
<ThreadPrimitive.Messages components={components} />
|
||||
</ThreadPrimitive.Viewport>
|
||||
</ThreadPrimitive.Root>
|
||||
|
||||
<IssueChatComposer
|
||||
onImageUpload={imageUploadHandler}
|
||||
onAttachImage={onAttachImage}
|
||||
draftKey={draftKey}
|
||||
enableReassign={enableReassign}
|
||||
reassignOptions={reassignOptions}
|
||||
currentAssigneeValue={currentAssigneeValue}
|
||||
suggestedAssigneeValue={suggestedAssigneeValue}
|
||||
mentions={mentions}
|
||||
agentMap={agentMap}
|
||||
composerDisabledReason={composerDisabledReason}
|
||||
issueStatus={issueStatus}
|
||||
onCancelRun={onCancelRun}
|
||||
/>
|
||||
</div>
|
||||
</AssistantRuntimeProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { useExternalStoreRuntime, type ThreadMessage, type AppendMessage } from "@assistant-ui/react";
|
||||
|
||||
export interface PaperclipIssueRuntimeReassignment {
|
||||
assigneeAgentId: string | null;
|
||||
assigneeUserId: string | null;
|
||||
}
|
||||
|
||||
export interface PaperclipIssueRuntimeSendOptions {
|
||||
body: string;
|
||||
reopen?: boolean;
|
||||
reassignment?: PaperclipIssueRuntimeReassignment;
|
||||
}
|
||||
|
||||
interface UsePaperclipIssueRuntimeOptions {
|
||||
messages: readonly ThreadMessage[];
|
||||
isRunning: boolean;
|
||||
onSend: (options: PaperclipIssueRuntimeSendOptions) => Promise<void>;
|
||||
onCancel?: (() => Promise<void>) | undefined;
|
||||
}
|
||||
|
||||
function asRecord(value: unknown): Record<string, unknown> | null {
|
||||
if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
|
||||
return value as Record<string, unknown>;
|
||||
}
|
||||
|
||||
function readTextContent(message: AppendMessage) {
|
||||
return message.content
|
||||
.filter((part): part is Extract<(typeof message.content)[number], { type: "text" }> => part.type === "text")
|
||||
.map((part) => part.text)
|
||||
.join("")
|
||||
.trim();
|
||||
}
|
||||
|
||||
export function usePaperclipIssueRuntime({
|
||||
messages,
|
||||
isRunning,
|
||||
onSend,
|
||||
onCancel,
|
||||
}: UsePaperclipIssueRuntimeOptions) {
|
||||
return useExternalStoreRuntime({
|
||||
messages,
|
||||
isRunning,
|
||||
onNew: async (message) => {
|
||||
const body = readTextContent(message);
|
||||
if (!body) return;
|
||||
|
||||
const custom = asRecord(message.runConfig?.custom);
|
||||
const reassignmentRecord = asRecord(custom?.reassignment);
|
||||
const reassignment =
|
||||
reassignmentRecord &&
|
||||
("assigneeAgentId" in reassignmentRecord || "assigneeUserId" in reassignmentRecord)
|
||||
? {
|
||||
assigneeAgentId:
|
||||
typeof reassignmentRecord.assigneeAgentId === "string" ? reassignmentRecord.assigneeAgentId : null,
|
||||
assigneeUserId:
|
||||
typeof reassignmentRecord.assigneeUserId === "string" ? reassignmentRecord.assigneeUserId : null,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
await onSend({
|
||||
body,
|
||||
reopen: custom?.reopen === true ? true : undefined,
|
||||
reassignment,
|
||||
});
|
||||
},
|
||||
...(onCancel ? { onCancel } : {}),
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import type { Agent } from "@paperclipai/shared";
|
||||
import {
|
||||
buildAssistantPartsFromTranscript,
|
||||
buildIssueChatMessages,
|
||||
type IssueChatComment,
|
||||
type IssueChatLinkedRun,
|
||||
} from "./issue-chat-messages";
|
||||
import type { IssueTimelineEvent } from "./issue-timeline-events";
|
||||
import type { LiveRunForIssue } from "../api/heartbeats";
|
||||
|
||||
function createAgent(id: string, name: string): Agent {
|
||||
return {
|
||||
id,
|
||||
companyId: "company-1",
|
||||
name,
|
||||
role: "engineer",
|
||||
title: null,
|
||||
icon: "code",
|
||||
status: "active",
|
||||
reportsTo: null,
|
||||
capabilities: null,
|
||||
adapterType: "codex_local",
|
||||
adapterConfig: {},
|
||||
runtimeConfig: {},
|
||||
budgetMonthlyCents: 0,
|
||||
spentMonthlyCents: 0,
|
||||
lastHeartbeatAt: null,
|
||||
metadata: {},
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
pauseReason: null,
|
||||
pausedAt: null,
|
||||
urlKey: "codexcoder",
|
||||
permissions: { canCreateAgents: false },
|
||||
} as Agent;
|
||||
}
|
||||
|
||||
function createComment(overrides: Partial<IssueChatComment> = {}): IssueChatComment {
|
||||
return {
|
||||
id: "comment-1",
|
||||
companyId: "company-1",
|
||||
issueId: "issue-1",
|
||||
authorAgentId: null,
|
||||
authorUserId: "user-1",
|
||||
body: "Hello",
|
||||
createdAt: new Date("2026-04-06T12:00:00.000Z"),
|
||||
updatedAt: new Date("2026-04-06T12:00:00.000Z"),
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("buildAssistantPartsFromTranscript", () => {
|
||||
it("maps assistant text, reasoning, tool calls, and tool results", () => {
|
||||
const result = buildAssistantPartsFromTranscript([
|
||||
{ kind: "assistant", ts: "2026-04-06T12:00:00.000Z", text: "Working on it. " },
|
||||
{ kind: "assistant", ts: "2026-04-06T12:00:01.000Z", text: "Done." },
|
||||
{ kind: "thinking", ts: "2026-04-06T12:00:02.000Z", text: "Need to inspect files." },
|
||||
{
|
||||
kind: "tool_call",
|
||||
ts: "2026-04-06T12:00:03.000Z",
|
||||
name: "read_file",
|
||||
toolUseId: "tool-1",
|
||||
input: { path: "ui/src/pages/IssueDetail.tsx" },
|
||||
},
|
||||
{
|
||||
kind: "tool_result",
|
||||
ts: "2026-04-06T12:00:04.000Z",
|
||||
toolUseId: "tool-1",
|
||||
content: "file contents",
|
||||
isError: false,
|
||||
},
|
||||
{ kind: "stderr", ts: "2026-04-06T12:00:05.000Z", text: "warn: noisy setup output" },
|
||||
]);
|
||||
|
||||
expect(result.parts).toHaveLength(3);
|
||||
expect(result.parts[0]).toMatchObject({ type: "text", text: "Working on it. Done." });
|
||||
expect(result.parts[1]).toMatchObject({ type: "reasoning", text: "Need to inspect files." });
|
||||
expect(result.parts[2]).toMatchObject({
|
||||
type: "tool-call",
|
||||
toolCallId: "tool-1",
|
||||
toolName: "read_file",
|
||||
result: "file contents",
|
||||
isError: false,
|
||||
});
|
||||
expect(result.notices).toEqual(["warn: noisy setup output"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("buildIssueChatMessages", () => {
|
||||
it("orders events before comments and appends active live runs as running assistant messages", () => {
|
||||
const agentMap = new Map<string, Agent>([["agent-1", createAgent("agent-1", "CodexCoder")]]);
|
||||
const comments = [
|
||||
createComment(),
|
||||
createComment({
|
||||
id: "comment-2",
|
||||
authorAgentId: "agent-1",
|
||||
authorUserId: null,
|
||||
body: "I made the change.",
|
||||
createdAt: new Date("2026-04-06T12:03:00.000Z"),
|
||||
updatedAt: new Date("2026-04-06T12:03:00.000Z"),
|
||||
runId: "run-1",
|
||||
runAgentId: "agent-1",
|
||||
}),
|
||||
];
|
||||
const timelineEvents: IssueTimelineEvent[] = [
|
||||
{
|
||||
id: "event-1",
|
||||
createdAt: new Date("2026-04-06T11:59:00.000Z"),
|
||||
actorType: "user",
|
||||
actorId: "user-1",
|
||||
statusChange: {
|
||||
from: "done",
|
||||
to: "todo",
|
||||
},
|
||||
},
|
||||
];
|
||||
const linkedRuns: IssueChatLinkedRun[] = [
|
||||
{
|
||||
runId: "run-history-1",
|
||||
status: "succeeded",
|
||||
agentId: "agent-1",
|
||||
createdAt: new Date("2026-04-06T12:01:00.000Z"),
|
||||
startedAt: new Date("2026-04-06T12:01:00.000Z"),
|
||||
finishedAt: new Date("2026-04-06T12:02:00.000Z"),
|
||||
},
|
||||
];
|
||||
const liveRuns: LiveRunForIssue[] = [
|
||||
{
|
||||
id: "run-live-1",
|
||||
status: "running",
|
||||
invocationSource: "manual",
|
||||
triggerDetail: null,
|
||||
startedAt: "2026-04-06T12:04:00.000Z",
|
||||
finishedAt: null,
|
||||
createdAt: "2026-04-06T12:04:00.000Z",
|
||||
agentId: "agent-1",
|
||||
agentName: "CodexCoder",
|
||||
adapterType: "codex_local",
|
||||
},
|
||||
];
|
||||
|
||||
const messages = buildIssueChatMessages({
|
||||
comments,
|
||||
timelineEvents,
|
||||
linkedRuns,
|
||||
liveRuns,
|
||||
transcriptsByRunId: new Map([
|
||||
[
|
||||
"run-live-1",
|
||||
[{ kind: "assistant", ts: "2026-04-06T12:04:01.000Z", text: "Streaming reply" }],
|
||||
],
|
||||
]),
|
||||
hasOutputForRun: () => true,
|
||||
companyId: "company-1",
|
||||
projectId: "project-1",
|
||||
agentMap,
|
||||
currentUserId: "user-1",
|
||||
});
|
||||
|
||||
expect(messages.map((message) => `${message.role}:${message.id}`)).toEqual([
|
||||
"system:activity:event-1",
|
||||
"user:comment-1",
|
||||
"system:run:run-history-1",
|
||||
"assistant:comment-2",
|
||||
"assistant:live-run:run-live-1",
|
||||
]);
|
||||
|
||||
const liveRunMessage = messages.at(-1);
|
||||
expect(liveRunMessage).toMatchObject({
|
||||
role: "assistant",
|
||||
status: { type: "running" },
|
||||
});
|
||||
expect(liveRunMessage?.content[0]).toMatchObject({
|
||||
type: "text",
|
||||
text: "Streaming reply",
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,502 @@
|
||||
import type {
|
||||
ReasoningMessagePart,
|
||||
TextMessagePart,
|
||||
ThreadAssistantMessage,
|
||||
ThreadMessage,
|
||||
ToolCallMessagePart,
|
||||
ThreadSystemMessage,
|
||||
ThreadUserMessage,
|
||||
} from "@assistant-ui/react";
|
||||
import type { Agent, IssueComment } from "@paperclipai/shared";
|
||||
import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats";
|
||||
import { formatAssigneeUserLabel } from "./assignees";
|
||||
import type { IssueTimelineEvent } from "./issue-timeline-events";
|
||||
|
||||
type JsonValue = null | string | number | boolean | JsonValue[] | { [key: string]: JsonValue };
|
||||
type JsonObject = { [key: string]: JsonValue };
|
||||
|
||||
export interface IssueChatComment extends IssueComment {
|
||||
runId?: string | null;
|
||||
runAgentId?: string | null;
|
||||
interruptedRunId?: string | null;
|
||||
clientId?: string;
|
||||
clientStatus?: "pending" | "queued";
|
||||
queueState?: "queued";
|
||||
queueTargetRunId?: string | null;
|
||||
}
|
||||
|
||||
export interface IssueChatLinkedRun {
|
||||
runId: string;
|
||||
status: string;
|
||||
agentId: string;
|
||||
createdAt: Date | string;
|
||||
startedAt: Date | string | null;
|
||||
finishedAt?: Date | string | null;
|
||||
}
|
||||
|
||||
export interface IssueChatTranscriptEntry {
|
||||
kind:
|
||||
| "assistant"
|
||||
| "thinking"
|
||||
| "user"
|
||||
| "tool_call"
|
||||
| "tool_result"
|
||||
| "init"
|
||||
| "result"
|
||||
| "stderr"
|
||||
| "system"
|
||||
| "stdout"
|
||||
| "diff";
|
||||
ts: string;
|
||||
text?: string;
|
||||
name?: string;
|
||||
input?: unknown;
|
||||
toolUseId?: string;
|
||||
toolName?: string;
|
||||
content?: string;
|
||||
isError?: boolean;
|
||||
subtype?: string;
|
||||
errors?: string[];
|
||||
}
|
||||
|
||||
type MessageWithOrder = {
|
||||
createdAtMs: number;
|
||||
order: number;
|
||||
message: ThreadMessage;
|
||||
};
|
||||
|
||||
function toDate(value: Date | string | null | undefined) {
|
||||
return value instanceof Date ? value : new Date(value ?? Date.now());
|
||||
}
|
||||
|
||||
function toTimestamp(value: Date | string | null | undefined) {
|
||||
return toDate(value).getTime();
|
||||
}
|
||||
|
||||
function sortByCreated<T extends { createdAt: Date | string; id: string }>(items: readonly T[]) {
|
||||
return [...items].sort((a, b) => {
|
||||
const diff = toTimestamp(a.createdAt) - toTimestamp(b.createdAt);
|
||||
if (diff !== 0) return diff;
|
||||
return a.id.localeCompare(b.id);
|
||||
});
|
||||
}
|
||||
|
||||
function normalizeJsonValue(input: unknown): JsonValue {
|
||||
if (
|
||||
input === null ||
|
||||
typeof input === "string" ||
|
||||
typeof input === "number" ||
|
||||
typeof input === "boolean"
|
||||
) {
|
||||
return input;
|
||||
}
|
||||
if (Array.isArray(input)) {
|
||||
return input.map((entry) => normalizeJsonValue(entry));
|
||||
}
|
||||
if (typeof input === "object" && input) {
|
||||
const entries = Object.entries(input as Record<string, unknown>).map(([key, value]) => [
|
||||
key,
|
||||
normalizeJsonValue(value),
|
||||
]);
|
||||
return Object.fromEntries(entries) as JsonObject;
|
||||
}
|
||||
return String(input);
|
||||
}
|
||||
|
||||
function normalizeToolArgs(input: unknown): JsonObject {
|
||||
if (typeof input === "object" && input && !Array.isArray(input)) {
|
||||
return normalizeJsonValue(input) as JsonObject;
|
||||
}
|
||||
if (input === undefined) return {};
|
||||
return { value: normalizeJsonValue(input) };
|
||||
}
|
||||
|
||||
function stringifyUnknown(value: unknown) {
|
||||
if (typeof value === "string") return value;
|
||||
if (value === null || value === undefined) return "";
|
||||
try {
|
||||
return JSON.stringify(value, null, 2);
|
||||
} catch {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
|
||||
function createAssistantMetadata(custom: Record<string, unknown>) {
|
||||
return {
|
||||
unstable_state: null,
|
||||
unstable_annotations: [],
|
||||
unstable_data: [],
|
||||
steps: [],
|
||||
custom,
|
||||
} as const;
|
||||
}
|
||||
|
||||
function authorNameForComment(
|
||||
comment: IssueChatComment,
|
||||
agentMap?: Map<string, Agent>,
|
||||
currentUserId?: string | null,
|
||||
) {
|
||||
if (comment.authorAgentId) {
|
||||
return agentMap?.get(comment.authorAgentId)?.name ?? comment.authorAgentId.slice(0, 8);
|
||||
}
|
||||
return formatAssigneeUserLabel(comment.authorUserId ?? null, currentUserId) ?? "You";
|
||||
}
|
||||
|
||||
function formatStatusLabel(status: string) {
|
||||
return status.replace(/_/g, " ");
|
||||
}
|
||||
|
||||
function createCommentMessage(args: {
|
||||
comment: IssueChatComment;
|
||||
agentMap?: Map<string, Agent>;
|
||||
currentUserId?: string | null;
|
||||
companyId?: string | null;
|
||||
projectId?: string | null;
|
||||
}): ThreadMessage {
|
||||
const { comment, agentMap, currentUserId, companyId, projectId } = args;
|
||||
const createdAt = toDate(comment.createdAt);
|
||||
const authorName = authorNameForComment(comment, agentMap, currentUserId);
|
||||
const custom = {
|
||||
kind: "comment",
|
||||
commentId: comment.id,
|
||||
anchorId: `comment-${comment.id}`,
|
||||
authorName,
|
||||
authorAgentId: comment.authorAgentId,
|
||||
authorUserId: comment.authorUserId,
|
||||
companyId: companyId ?? comment.companyId,
|
||||
projectId: projectId ?? null,
|
||||
runId: comment.runId ?? null,
|
||||
runAgentId: comment.runAgentId ?? null,
|
||||
clientStatus: comment.clientStatus ?? null,
|
||||
queueState: comment.queueState ?? null,
|
||||
queueTargetRunId: comment.queueTargetRunId ?? null,
|
||||
interruptedRunId: comment.interruptedRunId ?? null,
|
||||
};
|
||||
|
||||
if (comment.authorAgentId) {
|
||||
const message: ThreadAssistantMessage = {
|
||||
id: comment.id,
|
||||
role: "assistant",
|
||||
createdAt,
|
||||
content: [{ type: "text", text: comment.body }],
|
||||
status: { type: "complete", reason: "stop" },
|
||||
metadata: createAssistantMetadata(custom),
|
||||
};
|
||||
return message;
|
||||
}
|
||||
|
||||
const message: ThreadUserMessage = {
|
||||
id: comment.id,
|
||||
role: "user",
|
||||
createdAt,
|
||||
content: [{ type: "text", text: comment.body }],
|
||||
attachments: [],
|
||||
metadata: { custom },
|
||||
};
|
||||
return message;
|
||||
}
|
||||
|
||||
function createTimelineEventMessage(args: {
|
||||
event: IssueTimelineEvent;
|
||||
agentMap?: Map<string, Agent>;
|
||||
currentUserId?: string | null;
|
||||
}) {
|
||||
const { event, agentMap, currentUserId } = args;
|
||||
const actorName = event.actorType === "agent"
|
||||
? (agentMap?.get(event.actorId)?.name ?? event.actorId.slice(0, 8))
|
||||
: event.actorType === "system"
|
||||
? "System"
|
||||
: (formatAssigneeUserLabel(event.actorId, currentUserId) ?? "Board");
|
||||
|
||||
const lines: string[] = [`${actorName} updated this issue`];
|
||||
if (event.statusChange) {
|
||||
lines.push(
|
||||
`Status: ${event.statusChange.from ?? "none"} -> ${event.statusChange.to ?? "none"}`,
|
||||
);
|
||||
}
|
||||
if (event.assigneeChange) {
|
||||
const from = event.assigneeChange.from.agentId
|
||||
? (agentMap?.get(event.assigneeChange.from.agentId)?.name ?? event.assigneeChange.from.agentId.slice(0, 8))
|
||||
: (formatAssigneeUserLabel(event.assigneeChange.from.userId, currentUserId) ?? "Unassigned");
|
||||
const to = event.assigneeChange.to.agentId
|
||||
? (agentMap?.get(event.assigneeChange.to.agentId)?.name ?? event.assigneeChange.to.agentId.slice(0, 8))
|
||||
: (formatAssigneeUserLabel(event.assigneeChange.to.userId, currentUserId) ?? "Unassigned");
|
||||
lines.push(`Assignee: ${from} -> ${to}`);
|
||||
}
|
||||
|
||||
const message: ThreadSystemMessage = {
|
||||
id: `activity:${event.id}`,
|
||||
role: "system",
|
||||
createdAt: toDate(event.createdAt),
|
||||
content: [{ type: "text", text: lines.join("\n") }],
|
||||
metadata: {
|
||||
custom: {
|
||||
kind: "event",
|
||||
anchorId: `activity-${event.id}`,
|
||||
eventId: event.id,
|
||||
actorName,
|
||||
statusChange: event.statusChange ?? null,
|
||||
assigneeChange: event.assigneeChange ?? null,
|
||||
},
|
||||
},
|
||||
};
|
||||
return message;
|
||||
}
|
||||
|
||||
function runTimestamp(run: IssueChatLinkedRun) {
|
||||
return run.finishedAt ?? run.startedAt ?? run.createdAt;
|
||||
}
|
||||
|
||||
function createHistoricalRunMessage(run: IssueChatLinkedRun, agentMap?: Map<string, Agent>) {
|
||||
const agentName = agentMap?.get(run.agentId)?.name ?? run.agentId.slice(0, 8);
|
||||
const message: ThreadSystemMessage = {
|
||||
id: `run:${run.runId}`,
|
||||
role: "system",
|
||||
createdAt: toDate(runTimestamp(run)),
|
||||
content: [{ type: "text", text: `${agentName} run ${run.runId.slice(0, 8)} ${formatStatusLabel(run.status)}` }],
|
||||
metadata: {
|
||||
custom: {
|
||||
kind: "run",
|
||||
anchorId: `run-${run.runId}`,
|
||||
runId: run.runId,
|
||||
runAgentId: run.agentId,
|
||||
runAgentName: agentName,
|
||||
runStatus: run.status,
|
||||
},
|
||||
},
|
||||
};
|
||||
return message;
|
||||
}
|
||||
|
||||
function mergeAdjacentTextParts(parts: Array<TextMessagePart | ReasoningMessagePart>) {
|
||||
const merged: Array<TextMessagePart | ReasoningMessagePart> = [];
|
||||
for (const part of parts) {
|
||||
const previous = merged.at(-1);
|
||||
if (previous && previous.type === part.type && previous.parentId === part.parentId) {
|
||||
merged[merged.length - 1] = {
|
||||
...previous,
|
||||
text: `${previous.text}${part.text}`,
|
||||
};
|
||||
continue;
|
||||
}
|
||||
merged.push(part);
|
||||
}
|
||||
return merged;
|
||||
}
|
||||
|
||||
export function buildAssistantPartsFromTranscript(entries: readonly IssueChatTranscriptEntry[]) {
|
||||
const textLikeParts: Array<TextMessagePart | ReasoningMessagePart> = [];
|
||||
const toolParts = new Map<string, ToolCallMessagePart<JsonObject, unknown>>();
|
||||
const toolOrder: string[] = [];
|
||||
const notices: string[] = [];
|
||||
|
||||
for (const [index, entry] of entries.entries()) {
|
||||
if (entry.kind === "assistant" && entry.text) {
|
||||
textLikeParts.push({ type: "text", text: entry.text });
|
||||
continue;
|
||||
}
|
||||
if (entry.kind === "thinking" && entry.text) {
|
||||
textLikeParts.push({ type: "reasoning", text: entry.text });
|
||||
continue;
|
||||
}
|
||||
if (entry.kind === "tool_call") {
|
||||
const toolCallId = entry.toolUseId || `tool-${index}`;
|
||||
if (!toolParts.has(toolCallId)) {
|
||||
toolOrder.push(toolCallId);
|
||||
}
|
||||
toolParts.set(toolCallId, {
|
||||
type: "tool-call",
|
||||
toolCallId,
|
||||
toolName: entry.name || "tool",
|
||||
args: normalizeToolArgs(entry.input),
|
||||
argsText: stringifyUnknown(entry.input),
|
||||
});
|
||||
continue;
|
||||
}
|
||||
if (entry.kind === "tool_result") {
|
||||
const toolCallId = entry.toolUseId || `tool-result-${index}`;
|
||||
const existing = toolParts.get(toolCallId);
|
||||
if (!existing) {
|
||||
toolOrder.push(toolCallId);
|
||||
}
|
||||
toolParts.set(toolCallId, {
|
||||
type: "tool-call",
|
||||
toolCallId,
|
||||
toolName: existing?.toolName || entry.toolName || "tool",
|
||||
args: existing?.args ?? {},
|
||||
argsText: existing?.argsText ?? "",
|
||||
result: entry.content ?? "",
|
||||
isError: entry.isError === true,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
if (entry.kind === "stderr" && entry.text) {
|
||||
notices.push(entry.text);
|
||||
continue;
|
||||
}
|
||||
if (entry.kind === "system" && entry.text) {
|
||||
notices.push(entry.text);
|
||||
continue;
|
||||
}
|
||||
if (entry.kind === "result") {
|
||||
if (entry.isError && entry.errors?.length) {
|
||||
notices.push(...entry.errors);
|
||||
} else if (entry.text) {
|
||||
notices.push(entry.text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
parts: [
|
||||
...mergeAdjacentTextParts(textLikeParts),
|
||||
...toolOrder
|
||||
.map((toolCallId) => toolParts.get(toolCallId))
|
||||
.filter((part): part is ToolCallMessagePart<JsonObject, unknown> => Boolean(part)),
|
||||
],
|
||||
notices,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeLiveRuns(
|
||||
liveRuns: readonly LiveRunForIssue[],
|
||||
activeRun: ActiveRunForIssue | null | undefined,
|
||||
issueId?: string,
|
||||
) {
|
||||
const deduped = new Map<string, LiveRunForIssue>();
|
||||
for (const run of liveRuns) {
|
||||
deduped.set(run.id, run);
|
||||
}
|
||||
if (activeRun) {
|
||||
deduped.set(activeRun.id, {
|
||||
id: activeRun.id,
|
||||
status: activeRun.status,
|
||||
invocationSource: activeRun.invocationSource,
|
||||
triggerDetail: activeRun.triggerDetail,
|
||||
startedAt: activeRun.startedAt ? toDate(activeRun.startedAt).toISOString() : null,
|
||||
finishedAt: activeRun.finishedAt ? toDate(activeRun.finishedAt).toISOString() : null,
|
||||
createdAt: toDate(activeRun.createdAt).toISOString(),
|
||||
agentId: activeRun.agentId,
|
||||
agentName: activeRun.agentName,
|
||||
adapterType: activeRun.adapterType,
|
||||
issueId,
|
||||
});
|
||||
}
|
||||
return [...deduped.values()].sort((a, b) => toTimestamp(a.createdAt) - toTimestamp(b.createdAt));
|
||||
}
|
||||
|
||||
function createLiveRunMessage(args: {
|
||||
run: LiveRunForIssue;
|
||||
transcript: readonly IssueChatTranscriptEntry[];
|
||||
hasOutput: boolean;
|
||||
}) {
|
||||
const { run, transcript, hasOutput } = args;
|
||||
const { parts, notices } = buildAssistantPartsFromTranscript(transcript);
|
||||
const waitingText =
|
||||
run.status === "queued"
|
||||
? "Queued..."
|
||||
: hasOutput
|
||||
? ""
|
||||
: "Working...";
|
||||
|
||||
const content = parts.length > 0
|
||||
? parts
|
||||
: waitingText
|
||||
? [{ type: "text", text: waitingText } satisfies TextMessagePart]
|
||||
: [];
|
||||
|
||||
const message: ThreadAssistantMessage = {
|
||||
id: `live-run:${run.id}`,
|
||||
role: "assistant",
|
||||
createdAt: toDate(run.startedAt ?? run.createdAt),
|
||||
content,
|
||||
status: { type: "running" },
|
||||
metadata: createAssistantMetadata({
|
||||
kind: "live-run",
|
||||
runId: run.id,
|
||||
runAgentId: run.agentId,
|
||||
runAgentName: run.agentName,
|
||||
runStatus: run.status,
|
||||
adapterType: run.adapterType,
|
||||
notices,
|
||||
waitingText,
|
||||
}),
|
||||
};
|
||||
return message;
|
||||
}
|
||||
|
||||
export function buildIssueChatMessages(args: {
|
||||
comments: readonly IssueChatComment[];
|
||||
timelineEvents: readonly IssueTimelineEvent[];
|
||||
linkedRuns: readonly IssueChatLinkedRun[];
|
||||
liveRuns: readonly LiveRunForIssue[];
|
||||
activeRun?: ActiveRunForIssue | null;
|
||||
transcriptsByRunId?: ReadonlyMap<string, readonly IssueChatTranscriptEntry[]>;
|
||||
hasOutputForRun?: (runId: string) => boolean;
|
||||
issueId?: string;
|
||||
companyId?: string | null;
|
||||
projectId?: string | null;
|
||||
agentMap?: Map<string, Agent>;
|
||||
currentUserId?: string | null;
|
||||
}) {
|
||||
const {
|
||||
comments,
|
||||
timelineEvents,
|
||||
linkedRuns,
|
||||
liveRuns,
|
||||
activeRun,
|
||||
transcriptsByRunId,
|
||||
hasOutputForRun,
|
||||
issueId,
|
||||
companyId,
|
||||
projectId,
|
||||
agentMap,
|
||||
currentUserId,
|
||||
} = args;
|
||||
|
||||
const orderedMessages: MessageWithOrder[] = [];
|
||||
|
||||
for (const comment of sortByCreated(comments)) {
|
||||
orderedMessages.push({
|
||||
createdAtMs: toTimestamp(comment.createdAt),
|
||||
order: 1,
|
||||
message: createCommentMessage({ comment, agentMap, currentUserId, companyId, projectId }),
|
||||
});
|
||||
}
|
||||
|
||||
for (const event of sortByCreated(timelineEvents)) {
|
||||
orderedMessages.push({
|
||||
createdAtMs: toTimestamp(event.createdAt),
|
||||
order: 0,
|
||||
message: createTimelineEventMessage({ event, agentMap, currentUserId }),
|
||||
});
|
||||
}
|
||||
|
||||
for (const run of [...linkedRuns].sort((a, b) => toTimestamp(runTimestamp(a)) - toTimestamp(runTimestamp(b)))) {
|
||||
orderedMessages.push({
|
||||
createdAtMs: toTimestamp(runTimestamp(run)),
|
||||
order: 2,
|
||||
message: createHistoricalRunMessage(run, agentMap),
|
||||
});
|
||||
}
|
||||
|
||||
for (const run of normalizeLiveRuns(liveRuns, activeRun, issueId)) {
|
||||
orderedMessages.push({
|
||||
createdAtMs: toTimestamp(run.startedAt ?? run.createdAt),
|
||||
order: 3,
|
||||
message: createLiveRunMessage({
|
||||
run,
|
||||
transcript: transcriptsByRunId?.get(run.id) ?? [],
|
||||
hasOutput: hasOutputForRun?.(run.id) ?? false,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
return orderedMessages
|
||||
.sort((a, b) => {
|
||||
if (a.createdAtMs !== b.createdAtMs) return a.createdAtMs - b.createdAtMs;
|
||||
if (a.order !== b.order) return a.order - b.order;
|
||||
return a.message.id.localeCompare(b.message.id);
|
||||
})
|
||||
.map((entry) => entry.message);
|
||||
}
|
||||
@@ -40,11 +40,10 @@ import { useProjectOrder } from "../hooks/useProjectOrder";
|
||||
import { relativeTime, cn, formatTokens, visibleRunCostUsd } from "../lib/utils";
|
||||
import { ApprovalCard } from "../components/ApprovalCard";
|
||||
import { InlineEditor } from "../components/InlineEditor";
|
||||
import { CommentThread } from "../components/CommentThread";
|
||||
import { IssueChatThread } from "../components/IssueChatThread";
|
||||
import { IssueDocumentsSection } from "../components/IssueDocumentsSection";
|
||||
import { IssueProperties } from "../components/IssueProperties";
|
||||
import { IssueWorkspaceCard } from "../components/IssueWorkspaceCard";
|
||||
import { LiveRunWidget } from "../components/LiveRunWidget";
|
||||
import type { MentionOption } from "../components/MarkdownEditor";
|
||||
import { ImageGalleryModal } from "../components/ImageGalleryModal";
|
||||
import { ScrollToBottom } from "../components/ScrollToBottom";
|
||||
@@ -300,7 +299,7 @@ export function IssueDetail() {
|
||||
const [moreOpen, setMoreOpen] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [mobilePropsOpen, setMobilePropsOpen] = useState(false);
|
||||
const [detailTab, setDetailTab] = useState("comments");
|
||||
const [detailTab, setDetailTab] = useState("chat");
|
||||
const [pendingApprovalAction, setPendingApprovalAction] = useState<{
|
||||
approvalId: string;
|
||||
action: "approve" | "reject";
|
||||
@@ -610,15 +609,6 @@ export function IssueDetail() {
|
||||
});
|
||||
}, [activity, threadComments, linkedRuns, runningIssueRun]);
|
||||
|
||||
const queuedComments = useMemo(
|
||||
() => commentsWithRunMeta.filter((comment) => comment.queueState === "queued"),
|
||||
[commentsWithRunMeta],
|
||||
);
|
||||
|
||||
const timelineComments = useMemo(
|
||||
() => commentsWithRunMeta.filter((comment) => comment.queueState !== "queued"),
|
||||
[commentsWithRunMeta],
|
||||
);
|
||||
const timelineEvents = useMemo(
|
||||
() => extractIssueTimelineEvents(activity),
|
||||
[activity],
|
||||
@@ -1713,9 +1703,9 @@ export function IssueDetail() {
|
||||
|
||||
<Tabs value={detailTab} onValueChange={setDetailTab} className="space-y-3">
|
||||
<TabsList variant="line" className="w-full justify-start gap-1">
|
||||
<TabsTrigger value="comments" className="gap-1.5">
|
||||
<TabsTrigger value="chat" className="gap-1.5">
|
||||
<MessageSquare className="h-3.5 w-3.5" />
|
||||
Comments
|
||||
Chat
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="activity" className="gap-1.5">
|
||||
<ActivityIcon className="h-3.5 w-3.5" />
|
||||
@@ -1728,16 +1718,16 @@ export function IssueDetail() {
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="comments">
|
||||
<CommentThread
|
||||
comments={timelineComments}
|
||||
queuedComments={queuedComments}
|
||||
linkedApprovals={linkedApprovals}
|
||||
<TabsContent value="chat">
|
||||
<IssueChatThread
|
||||
comments={commentsWithRunMeta}
|
||||
feedbackVotes={feedbackVotes}
|
||||
feedbackDataSharingPreference={feedbackDataSharingPreference}
|
||||
feedbackTermsUrl={FEEDBACK_TERMS_URL}
|
||||
linkedRuns={timelineRuns}
|
||||
timelineEvents={timelineEvents}
|
||||
liveRuns={liveRuns}
|
||||
activeRun={activeRun}
|
||||
companyId={issue.companyId}
|
||||
projectId={issue.projectId}
|
||||
onApproveApproval={async (approvalId) => {
|
||||
@@ -1756,10 +1746,6 @@ export function IssueDetail() {
|
||||
currentAssigneeValue={actualAssigneeValue}
|
||||
suggestedAssigneeValue={suggestedAssigneeValue}
|
||||
mentions={mentionOptions}
|
||||
onInterruptQueued={async (runId) => {
|
||||
await interruptQueuedComment.mutateAsync(runId);
|
||||
}}
|
||||
interruptingQueuedRunId={interruptQueuedComment.isPending ? runningIssueRun?.id ?? null : null}
|
||||
composerDisabledReason={commentComposerDisabledReason}
|
||||
onVote={async (commentId, vote, options) => {
|
||||
await feedbackVoteMutation.mutateAsync({
|
||||
@@ -1785,7 +1771,11 @@ export function IssueDetail() {
|
||||
onAttachImage={async (file) => {
|
||||
await uploadAttachment.mutateAsync(file);
|
||||
}}
|
||||
liveRunSlot={<LiveRunWidget issueId={issueId!} companyId={issue.companyId} />}
|
||||
onCancelRun={runningIssueRun
|
||||
? async () => {
|
||||
await interruptQueuedComment.mutateAsync(runningIssueRun.id);
|
||||
}
|
||||
: undefined}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user