langfuse

1
import { JSONView } from "@/src/components/ui/code";
2
import { type Trace, type Score } from "@prisma/client";
3
import {
4
  Card,
5
  CardContent,
6
  CardDescription,
7
  CardFooter,
8
  CardHeader,
9
  CardTitle,
10
} from "@/src/components/ui/card";
11
import {
12
  Table,
13
  TableBody,
14
  TableCell,
15
  TableHead,
16
  TableHeader,
17
  TableRow,
18
} from "@/src/components/ui/table";
19
import { TraceAggUsageBadge } from "@/src/components/token-usage-badge";
20
import { ManualScoreButton } from "@/src/features/manual-scoring/components/ManualScoreButton";
21
import { Badge } from "@/src/components/ui/badge";
22
import { type ObservationReturnType } from "@/src/server/api/routers/traces";
23
import { IOPreview } from "@/src/components/trace/IOPreview";
24
import { formatIntervalSeconds } from "@/src/utils/dates";
25

26
export const TracePreview = ({
27
  trace,
28
  observations,
29
  scores,
30
}: {
31
  trace: Trace & { latency?: number };
32
  observations: ObservationReturnType[];
33
  scores: Score[];
34
}) => {
35
  return (
36
    <Card className="flex-1">
37
      <CardHeader className="flex flex-row flex-wrap justify-between gap-2">
38
        <div className="flex flex-col gap-1">
39
          <CardTitle>
40
            <span className="mr-2 rounded-sm bg-gray-200 p-1 text-xs">
41
              TRACE
42
            </span>
43
            <span>{trace.name}</span>
44
          </CardTitle>
45
          <CardDescription>{trace.timestamp.toLocaleString()}</CardDescription>
46
          <div className="flex flex-wrap gap-2">
47
            {!!trace.latency && (
48
              <Badge variant="outline">
49
                {formatIntervalSeconds(trace.latency)}
50
              </Badge>
51
            )}
52
            <TraceAggUsageBadge observations={observations} />
53
            {!!trace.release && (
54
              <Badge variant="outline">Release: {trace.release}</Badge>
55
            )}
56
            {!!trace.version && (
57
              <Badge variant="outline">Version: {trace.version}</Badge>
58
            )}
59
          </div>
60
        </div>
61
        <ManualScoreButton
62
          projectId={trace.projectId}
63
          traceId={trace.id}
64
          scores={scores}
65
        />
66
      </CardHeader>
67
      <CardContent className="flex flex-col gap-4">
68
        <IOPreview
69
          key={trace.id + "-io"}
70
          input={trace.input ?? undefined}
71
          output={trace.output ?? undefined}
72
        />
73
        <JSONView
74
          key={trace.id + "-metadata"}
75
          title="Metadata"
76
          json={trace.metadata}
77
        />
78
        {scores.find((s) => s.observationId === null) ? (
79
          <div className="mt-5 flex flex-col gap-2">
80
            <h3>Scores</h3>
81
            <Table>
82
              <TableHeader>
83
                <TableRow>
84
                  <TableHead className="w-[100px]">Timestamp</TableHead>
85
                  <TableHead>Name</TableHead>
86
                  <TableHead className="text-right">Value</TableHead>
87
                  <TableHead>Comment</TableHead>
88
                </TableRow>
89
              </TableHeader>
90
              <TableBody>
91
                {scores
92
                  .filter((s) => s.observationId === null)
93
                  .map((s) => (
94
                    <TableRow key={s.id}>
95
                      <TableCell className="text-xs">
96
                        {s.timestamp.toLocaleString()}
97
                      </TableCell>
98
                      <TableCell className="text-xs">{s.name}</TableCell>
99
                      <TableCell className="text-right text-xs">
100
                        {s.value}
101
                      </TableCell>
102
                      <TableCell className="text-xs">{s.comment}</TableCell>
103
                    </TableRow>
104
                  ))}
105
              </TableBody>
106
            </Table>
107
          </div>
108
        ) : null}
109
      </CardContent>
110
      <CardFooter></CardFooter>
111
    </Card>
112
  );
113
};
114