langfuse

1
import { Button } from "@/src/components/ui/button";
2
import {
3
  Card,
4
  CardContent,
5
  CardDescription,
6
  CardFooter,
7
  CardHeader,
8
  CardTitle,
9
} from "@/src/components/ui/card";
10
import { chatAvailable, openChat } from "@/src/features/support-chat/chat";
11
import {
12
  Book,
13
  Calendar,
14
  Github,
15
  Mail,
16
  MessageSquare,
17
  Slack,
18
} from "lucide-react";
19
import Link from "next/link";
20
import { SiDiscord } from "react-icons/si";
21

22
const supportChannels = [
23
  {
24
    icon: Book,
25
    title: "Documentation",
26
    description: "Find answers in the documentation.",
27
    href: "https://docs.langfuse.com",
28
    buttonText: "Visit Docs",
29
    primary: true,
30
  },
31
  {
32
    icon: Github,
33
    title: "GitHub",
34
    description:
35
      "Create an issue on Github to report bugs or request new features.",
36
    href: "https://github.com/langfuse/langfuse/issues/new/choose",
37
    buttonText: "Create issue",
38
    primary: true,
39
  },
40
  {
41
    icon: SiDiscord,
42
    title: "Discord",
43
    description:
44
      "Get support from community and maintainers. Follow announcements to stay up to date with new features.",
45
    href: "https://langfuse.com/discord",
46
    buttonText: "Join Discord",
47
    primary: true,
48
  },
49
  {
50
    icon: Mail,
51
    title: "Email",
52
    description: "Send email to our shared inbox: help@langfuse.com",
53
    href: "mailto:help@langfuse.com",
54
    buttonText: "Send Email",
55
    available: !chatAvailable,
56
  },
57
  {
58
    icon: MessageSquare,
59
    title: "Chat",
60
    description: "Get quick support directly from the team.",
61
    onClick: () => openChat(),
62
    available: chatAvailable,
63
    buttonText: "Launch Chat",
64
  },
65
  {
66
    icon: Calendar,
67
    title: "Schedule call",
68
    description: "Schedule a call with one of the founders.",
69
    href: "https://cal.com/marc-kl/office-hours",
70
    buttonText: "Schedule Call",
71
  },
72
  {
73
    icon: Slack,
74
    title: "Slack Connect",
75
    description: "Get a dedicated support channel for you and your team.",
76
    href: "mailto:help@langfuse.com?subject=Slack%20Connect%20Request&body=I'd%20like%20to%20request%20a%20dedicated%20Slack%20Connect%20channel%20for%20me%20and%20my%20team.%0D%0A%0D%0AUsers%20(emails)%20to%20include%20besides%20mine%3A%0D%0A%0D%0A",
77
    buttonText: "Request Slack Connect (via Email)",
78
  },
79
];
80

81
export const SupportChannels = () => (
82
  <div className="mt-10 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
83
    {supportChannels
84
      .filter((channel) => channel.available === undefined || channel.available)
85
      .map((channel) => (
86
        <Card key={channel.title} className="flex flex-col">
87
          <CardHeader>
88
            <CardTitle className="flex items-center gap-2">
89
              <channel.icon size={20} />
90
              {channel.title}
91
            </CardTitle>
92
          </CardHeader>
93
          <CardContent className="flex-1">
94
            <CardDescription>{channel.description}</CardDescription>
95
          </CardContent>
96
          <CardFooter>
97
            {channel.href ? (
98
              <Button
99
                asChild
100
                variant={channel.primary ? "default" : "secondary"}
101
              >
102
                <Link href={channel.href}>{channel.buttonText}</Link>
103
              </Button>
104
            ) : (
105
              <Button
106
                onClick={channel.onClick}
107
                variant={channel.primary ? "default" : "secondary"}
108
              >
109
                {channel.buttonText}
110
              </Button>
111
            )}
112
          </CardFooter>
113
        </Card>
114
      ))}
115
  </div>
116
);
117