langfuse

1
import { AlertTriangle } from "lucide-react";
2

3
import { VERSION } from "@/src/constants";
4
import { env } from "@/src/env.mjs";
5
import { cn } from "@/src/utils/tailwind";
6

7
export const LangfuseIcon = ({
8
  size = 32,
9
  className,
10
}: {
11
  size?: number;
12
  className?: string;
13
}) => (
14
  // eslint-disable-next-line @next/next/no-img-element
15
  <img
16
    src="/icon.svg"
17
    width={size}
18
    height={size}
19
    alt="Langfuse Icon"
20
    className={className}
21
  />
22
);
23

24
export const LangfuseLogo = ({
25
  className,
26
  size = "sm",
27
  version = false,
28
  showEnvLabel = false,
29
}: {
30
  size?: "sm" | "xl";
31
  className?: string;
32
  version?: boolean;
33
  showEnvLabel?: boolean;
34
}) => (
35
  <div className={cn("flex gap-4 xl:flex-col xl:items-start", className)}>
36
    {/* Environment Labeling for Langfuse Maintainers */}
37
    {showEnvLabel && env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION && (
38
      <div
39
        className={cn(
40
          "flex items-center gap-2 self-stretch rounded-md  px-3 py-1  ring-1  xl:-mx-2",
41
          env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION === "STAGING"
42
            ? "bg-blue-100 text-blue-500 ring-blue-500"
43
            : "bg-red-100 text-red-500 ring-red-500",
44
        )}
45
      >
46
        <AlertTriangle size={16} />
47
        <span className="whitespace-nowrap">
48
          {["EU", "US"].includes(env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION)
49
            ? `PRODUCTION-${env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION}`
50
            : env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION}
51
        </span>
52
      </div>
53
    )}
54
    {/* Langfuse Logo */}
55
    <div className="flex items-center">
56
      <LangfuseIcon size={size === "sm" ? 16 : 20} />
57
      <span
58
        className={cn(
59
          "ml-2 font-mono font-semibold",
60
          size === "sm" ? "text-sm" : "text-xl",
61
        )}
62
      >
63
        Langfuse
64
      </span>
65
      {version && (
66
        <a
67
          href="https://github.com/langfuse/langfuse/releases"
68
          target="_blank"
69
          rel="noopener"
70
          title="View releases on GitHub"
71
          className="ml-2 text-xs text-gray-400"
72
        >
73
          {VERSION}
74
        </a>
75
      )}
76
    </div>
77
  </div>
78
);
79