1import { type EnvironmentContextRecord, resolveEnvironmentMachineKind } from "@t3tools/contracts";
2
3import { useEnvironment } from "~/state/environments";
4import { ContextChip, ContextChipLabel } from "./ContextChip";
5import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
6import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
7
8/**
9 * Inline chip for a mentioned machine, in the composer and in sent messages. Prefers the
10 * name this client knows the machine by, and draws it with its machine icon.
11 */
12export function EnvironmentContextChip(props: {
13 record: Pick<EnvironmentContextRecord, "environmentId" | "label">;
14 copyMarkdown?: string;
15}) {
16 const environment = useEnvironment(props.record.environmentId);
17 const label = environment?.label.trim() || props.record.label;
18 return (
19 <Tooltip>
20 <TooltipTrigger
21 render={
22 <ContextChip
23 kind="environment"
24 tabIndex={0}
25 aria-label={`Machine, ${label}`}
26 data-markdown-copy={props.copyMarkdown}
27 >
28 <EnvironmentMachineIcon
29 kind={resolveEnvironmentMachineKind(environment?.serverConfig ?? null)}
30 />
31 <ContextChipLabel>{label}</ContextChipLabel>
32 </ContextChip>
33 }
34 />
35 <TooltipPopup side="top">
36 {environment ? "T3 Code environment" : "Machine not in this app"}
37 </TooltipPopup>
38 </Tooltip>
39 );
40}