1import { scopeProjectRef } from "@t3tools/client-runtime/environment";
2import type { ThreadContextRecord, ProjectId } from "@t3tools/contracts";
3import { Link } from "@tanstack/react-router";
4import { MessagesSquareIcon } from "lucide-react";
5
6import { useProject, useThreadShell } from "~/state/entities";
7import { orchestrationEnvironment } from "~/state/orchestration";
8import { useEnvironmentQuery } from "~/state/query";
9import { ContextChip, ContextChipLabel } from "./ContextChip";
10import { ProjectFavicon } from "./ProjectFavicon";
11import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
12
13export function ThreadContextChip(props: {
14 record: Pick<ThreadContextRecord, "environmentId" | "threadId" | "title">;
15 projectId?: ProjectId | null;
16 copyMarkdown?: string;
17 unreadable?: boolean;
18}) {
19 const { environmentId, threadId } = props.record;
20 const shell = useThreadShell({ environmentId, threadId });
21 const lookup = useEnvironmentQuery(
22 shell === null && props.projectId === undefined
23 ? orchestrationEnvironment.threadLinkMetadata({
24 environmentId,
25 input: { threadIds: [threadId] },
26 })
27 : null,
28 );
29 const metadata = lookup.data?.[threadId];
30 const projectId = shell?.projectId ?? props.projectId ?? metadata?.projectId;
31 const project = useProject(projectId ? scopeProjectRef(environmentId, projectId) : null);
32 const title = shell?.title?.trim() || metadata?.title.trim() || props.record.title;
33 return (
34 <Tooltip>
35 <TooltipTrigger
36 render={
37 <ContextChip
38 kind="thread"
39 {...(props.unreadable ? { state: "invalid" as const } : {})}
40 render={<Link to="/$environmentId/$threadId" params={{ environmentId, threadId }} />}
41 aria-label={`Thread, ${title}`}
42 data-markdown-copy={props.copyMarkdown}
43 className="no-underline"
44 >
45 {project ? (
46 <ProjectFavicon project={project} className="size-[1em] self-center" />
47 ) : (
48 <MessagesSquareIcon />
49 )}
50 <ContextChipLabel>{title}</ContextChipLabel>
51 </ContextChip>
52 }
53 />
54 <TooltipPopup side="top">
55 {props.unreadable
56 ? "On another machine, so this machine's agent can't read it. Remove it or switch back to send."
57 : "Open thread"}
58 </TooltipPopup>
59 </Tooltip>
60 );
61}