langfuse

1
import { Switch } from "@/src/components/ui/switch";
2
import { useHasAccess } from "@/src/features/rbac/utils/checkAccess";
3
import { api } from "@/src/utils/api";
4
import { Link, LockIcon } from "lucide-react";
5
import { usePostHog } from "posthog-js/react";
6
import { useState } from "react";
7

8
export const PublishTraceSwitch = (props: {
9
  traceId: string;
10
  projectId: string;
11
  isPublic: boolean;
12
}) => {
13
  const posthog = usePostHog();
14
  const hasAccess = useHasAccess({
15
    projectId: props.projectId,
16
    scope: "objects:publish",
17
  });
18
  const utils = api.useUtils();
19
  const mut = api.traces.publish.useMutation({
20
    onSuccess: () => utils.traces.invalidate(),
21
  });
22

23
  return (
24
    <Base
25
      id={props.traceId}
26
      isPublic={props.isPublic}
27
      onChange={(val) => {
28
        mut.mutate({
29
          projectId: props.projectId,
30
          traceId: props.traceId,
31
          public: val,
32
        });
33
        posthog.capture("trace_detail:publish_trace_button_click");
34
      }}
35
      isLoading={mut.isLoading}
36
      disabled={!hasAccess}
37
    />
38
  );
39
};
40

41
export const PublishSessionSwitch = (props: {
42
  sessionId: string;
43
  projectId: string;
44
  isPublic: boolean;
45
}) => {
46
  const posthog = usePostHog();
47
  const hasAccess = useHasAccess({
48
    projectId: props.projectId,
49
    scope: "objects:publish",
50
  });
51
  const utils = api.useUtils();
52
  const mut = api.sessions.publish.useMutation({
53
    onSuccess: () => utils.sessions.invalidate(),
54
  });
55

56
  return (
57
    <Base
58
      id={props.sessionId}
59
      isPublic={props.isPublic}
60
      onChange={(val) => {
61
        mut.mutate({
62
          projectId: props.projectId,
63
          sessionId: props.sessionId,
64
          public: val,
65
        });
66
        posthog.capture("session_detail:publish_session_button_click");
67
      }}
68
      isLoading={mut.isLoading}
69
      disabled={!hasAccess}
70
    />
71
  );
72
};
73

74
const Base = (props: {
75
  id: string;
76
  onChange: (value: boolean) => void;
77
  isLoading: boolean;
78
  isPublic: boolean;
79
  disabled?: boolean;
80
}) => {
81
  const [isCopied, setIsCopied] = useState(false);
82

83
  const copyUrl = () => {
84
    setIsCopied(true);
85
    void navigator.clipboard.writeText(window.location.href);
86
    setTimeout(() => setIsCopied(false), 1500);
87
  };
88

89
  return (
90
    <div className="flex items-center gap-3">
91
      <div className="text-sm font-semibold">
92
        {props.isLoading ? (
93
          "Loading.."
94
        ) : props.isPublic ? (
95
          <div
96
            className="flex cursor-pointer items-center gap-1 text-green-800"
97
            onClick={() => copyUrl()}
98
          >
99
            {isCopied ? "Link copied ..." : "Public"}
100
            <Link size={16} />
101
          </div>
102
        ) : (
103
          <div className="flex items-center gap-1">
104
            Private
105
            <LockIcon size={16} />
106
          </div>
107
        )}
108
      </div>
109
      <Switch
110
        id="publish-trace"
111
        checked={props.isPublic}
112
        onCheckedChange={() => {
113
          if (props.isLoading) return;
114
          props.onChange(!props.isPublic);
115
        }}
116
        disabled={props.disabled}
117
      />
118
    </div>
119
  );
120
};
121