forked from farhoodlabs/paperclip
dotta
884 lines
30 KiB
TypeScript
884 lines
30 KiB
TypeScript
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>
|
|
);
|
|
}
|