PaperClipAI/ui/src/components/task-chat/TaskChatInteractionCard.tsx

import type { ComponentProps } from "react";
import type { IssueDocument } from "@paperclipai/shared";
import type { MentionOption } from "@/components/MarkdownEditor";
import { IssueThreadInteractionCard } from "@/components/IssueThreadInteractionCard";
import { AppLogo } from "@/pages/apps/AppLogo";
import { MarkdownBody } from "@/components/MarkdownBody";
import { Button } from "@/components/ui/button";
import { CircleHelp, ChevronRight } from "lucide-react";
import { shouldHideInteractionCard } from "@/lib/issue-thread-interactions";
import { TaskChatCompactInteractionCard } from "./TaskChatCompactInteractionCard";
import { TaskChatPlanPreviewCard } from "./TaskChatPlanPreviewCard";
import { markdownToPlainText } from "@/lib/markdown-plain-text";
import type { TaskChatInteractionItem } from "./task-chat-model";
import { useCoordinatorWorkspaceEnabled } from "@/hooks/useCoordinatorWorkspaceEnabled";

type InteractionCardProps = Omit<
  ComponentProps<typeof IssueThreadInteractionCard>,
  "interaction"
>;

export interface TaskChatInteractionCardProps extends InteractionCardProps {
  item: TaskChatInteractionItem;
  onReviewRequest?: (interactionId: string) => void;
  showUnansweredQuestion?: boolean;
  showPendingRequest?: boolean;
  planDocument?: IssueDocument | null;
  showPlanPreview?: boolean;
  presentation?: "timeline" | "takeover";
  draftKey?: string;
  mentions?: MentionOption[];
}

/**
 * Task-page presentation for durable issue interactions. The new task view uses
 * a compact, protocol-card-aligned renderer with paginated questions and
 * verdicts; the classic issue thread keeps its existing card. Resolved inputs
 * collapse to one receipt row, with security and audit details preserved in the
 * disclosure.
 */
export function TaskChatInteractionCard({
  item,
  onReviewRequest,
  showUnansweredQuestion = false,
  showPendingRequest = false,
  planDocument,
  showPlanPreview = true,
  presentation = "timeline",
  draftKey,
  ...cardProps
}: TaskChatInteractionCardProps) {
  const { enabled: coordinatorEnabled } = useCoordinatorWorkspaceEnabled();
  const interaction = item.interaction;
  if (coordinatorEnabled && interaction.kind === "suggest_tasks" && !shouldHideInteractionCard(interaction)) {
    return <div id={`interaction-${interaction.id}`} data-testid="task-chat-interaction" className="w-full">
      <TaskChatCompactInteractionCard interaction={interaction} presentation={presentation} draftKey={draftKey} {...cardProps} />
    </div>;
  }
  if (presentation === "timeline" && showUnansweredQuestion && !shouldHideInteractionCard(interaction) && interaction.kind === "ask_user_questions" && interaction.status === "pending") {
    const prompt = interaction.payload.questionSet?.questions[0]?.prompt ?? interaction.payload.questions[0]?.prompt ?? interaction.title ?? "Question";
    return (
      <button
        type="button"
        id={`interaction-${interaction.id}`}
        data-testid="task-chat-unanswered-question"
        aria-label={`Answer question: ${prompt}`}
        disabled={!onReviewRequest}
        onClick={() => onReviewRequest?.(interaction.id)}
        className="group flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <CircleHelp aria-hidden className="h-3.5 w-3.5 shrink-0" />
        <span className="min-w-0 flex-1"><span className="block text-xs">Unanswered question</span><span className="block truncate">{markdownToPlainText(prompt)}</span></span>
        <ChevronRight aria-hidden className="h-3 w-3 shrink-0" />
      </button>
    );
  }
  if (interaction.kind === "request_confirmation" && interaction.payload.toolAction) {
    const action = interaction.payload.toolAction;
    if (presentation === "takeover") {
      return <IssueThreadInteractionCard interaction={interaction} {...cardProps} />;
    }
    return (
      <div id={`interaction-${interaction.id}`} data-testid="task-chat-tool-review" className="w-full space-y-2">
        {interaction.status === "pending" ? (
          <div className="flex flex-wrap items-center gap-2 text-sm">
            <AppLogo name={action.appDisplayName || action.toolDisplayName} size={36} />
            <div className="min-w-0 flex-1"><MarkdownBody>{action.previewMarkdown.split(/\n\s*\n/)[0] || action.toolDisplayName}</MarkdownBody></div>
            <Button className="ml-auto" size="sm" variant="outline" disabled={!onReviewRequest} onClick={() => onReviewRequest?.(interaction.id)}>Review request</Button>
          </div>
        ) : (
          <IssueThreadInteractionCard interaction={interaction} {...cardProps} />
        )}
      </div>
    );
  }
  if (presentation === "timeline" && showPendingRequest && interaction.status === "pending"
    && interaction.kind !== "connection_intent" && interaction.kind !== "ask_user_questions"
    && !shouldHideInteractionCard(interaction)) {
    const label = interaction.title ?? (interaction.kind === "suggest_tasks" ? "Suggested tasks" : "Review request");
    const preview = interaction.summary ?? ("prompt" in interaction.payload ? interaction.payload.prompt : null);
    // One truncated line: show the words, not the markdown syntax.
    const previewText = preview ? markdownToPlainText(preview) : null;
    const showPlan = interaction.kind === "request_confirmation"
      && interaction.payload.target?.type === "issue_document" && interaction.payload.target.key === "plan"
      && planDocument && showPlanPreview
      && (planDocument.latestRevisionId
        ? interaction.payload.target.revisionId === planDocument.latestRevisionId
        : interaction.payload.target.revisionNumber === planDocument.latestRevisionNumber);
    return (
      <div className="w-full space-y-2">
        {showPlan ? <TaskChatPlanPreviewCard source={{ kind: "saved", document: planDocument }} testId="plan-review-preview" /> : null}
        <button type="button" id={`interaction-${interaction.id}`} data-testid="task-chat-pending-request"
          aria-label={`Open request: ${label}`} disabled={!onReviewRequest}
          onClick={() => onReviewRequest?.(interaction.id)}
          className="group flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
          <CircleHelp aria-hidden className="h-3.5 w-3.5 shrink-0" />
          <span className="min-w-0 flex-1"><span className="block text-xs">{label}</span><span className="block truncate">{previewText}</span></span>
          <ChevronRight aria-hidden className="h-3 w-3 shrink-0" />
        </button>
      </div>
    );
  }
  const isSupersededQuestionReceipt =
    interaction.kind === "ask_user_questions" &&
    interaction.status !== "pending" &&
    interaction.result?.expirationReason === "superseded_by_newer_interaction";
  if (shouldHideInteractionCard(interaction) && !isSupersededQuestionReceipt)
    return null;
  if (presentation === "timeline" && interaction.status === "pending" && interaction.kind !== "connection_intent") {
    const isPlanReview =
      interaction.kind === "request_confirmation" &&
      Boolean(interaction.sourceRunId) &&
      interaction.payload.target?.type === "issue_document" &&
      interaction.payload.target.key === "plan" &&
      Boolean(planDocument) &&
      (planDocument?.latestRevisionId
        ? interaction.payload.target.revisionId ===
          planDocument.latestRevisionId
        : interaction.payload.target.revisionNumber ===
          planDocument?.latestRevisionNumber);
    if (!isPlanReview || !showPlanPreview) return null;
    return (
      <div
        id={`interaction-${interaction.id}`}
        data-testid="task-chat-interaction"
      >
        <TaskChatPlanPreviewCard
          source={{ kind: "saved", document: planDocument }}
          testId="plan-review-preview"
        />
      </div>
    );
  }
  const isResolvedPlanReview =
    presentation === "timeline" &&
    interaction.kind === "request_confirmation" &&
    (interaction.status === "accepted" || interaction.status === "rejected") &&
    interaction.payload.target?.type === "issue_document" &&
    interaction.payload.target.key === "plan";
  const resolvedPlanMatchesDocument =
    isResolvedPlanReview &&
    interaction.kind === "request_confirmation" && interaction.payload.target?.type === "issue_document" &&
    planDocument != null &&
    (planDocument.latestRevisionId
      ? interaction.payload.target?.revisionId === planDocument.latestRevisionId
      : interaction.payload.target?.revisionNumber ===
        planDocument.latestRevisionNumber);
  if (isResolvedPlanReview && !coordinatorEnabled) {
    // Keep the decision visible: the approved or sent-back plan stays as a
    // card while it is current, and the receipt records who decided and why.
    return (
      <div
        id={`interaction-${interaction.id}`}
        className="w-full space-y-2"
        data-testid="task-chat-interaction"
      >
        {resolvedPlanMatchesDocument && showPlanPreview && planDocument ? (
          <TaskChatPlanPreviewCard
            source={{ kind: "saved", document: planDocument }}
            testId="plan-review-preview"
          />
        ) : null}
        <TaskChatCompactInteractionCard
          interaction={interaction}
          planDocument={planDocument}
          showPlanPreview={false}
          presentation="timeline"
          draftKey={draftKey}
          {...cardProps}
        />
      </div>
    );
  }
  if (presentation === "timeline" && interaction.status !== "pending") {
    return (
      <div
        id={`interaction-${interaction.id}`}
        className="tc-enter-bubble w-full"
        data-testid="task-chat-interaction"
      >
        <TaskChatCompactInteractionCard
          interaction={interaction}
          planDocument={planDocument}
          showPlanPreview={showPlanPreview}
          presentation="timeline"
          draftKey={draftKey}
          {...cardProps}
        />
      </div>
    );
  }
  return (
    <div
      id={`interaction-${interaction.id}`}
      className="tc-enter-bubble w-full"
      data-testid="task-chat-interaction"
    >
      <TaskChatCompactInteractionCard
        interaction={interaction}
        planDocument={planDocument}
        showPlanPreview={showPlanPreview}
        presentation={presentation}
        draftKey={draftKey}
        {...cardProps}
      />
    </div>
  );
}