-
- );
-}
diff --git a/app/(wide)/layout.tsx b/app/(wide)/layout.tsx
deleted file mode 100644
index 1a0693d3ad..0000000000
--- a/app/(wide)/layout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Layout } from "@/components/layout";
-import { MainContentWrapper } from "@/components/MainContentWrapper";
-
-/**
- * Layout for wide marketing sections (pricing, enterprise, etc.) that have
- * their own route folders. No sidebar, no prose, max-w-7xl content.
- */
-export default function WideSectionLayout({
- children,
-}: {
- children: React.ReactNode;
-}) {
- return (
-
- {children}
-
-
- {children}
-
- );
-}
diff --git a/app/[section]/[[...slug]]/page.tsx b/app/[section]/[[...slug]]/page.tsx
index 83714e835b..d529360dfd 100644
--- a/app/[section]/[[...slug]]/page.tsx
+++ b/app/[section]/[[...slug]]/page.tsx
@@ -1,21 +1,18 @@
import type { Metadata } from "next";
import { notFound } from "next/navigation";
-import { DocsPage, DocsBody } from "fumadocs-ui/page";
-import type { TOCItemType } from "fumadocs-core/toc";
-import { SECTION_CONFIG, SECTION_SLUGS, MARKETING_SECTION_SLUGS, WIDE_SECTIONS, DOCS_STYLE_APP_SECTIONS, POST_SECTIONS, CHANGELOG_SECTIONS } from "@/lib/source";
-import type { SectionSlug } from "@/lib/source";
-import { MARKETING_SLUGS, usersSource, changelogSource } from "@/lib/source";
-import { sortCustomerStoriesByMetaOrder } from "@/lib/sortCustomerStoriesByMeta";
-import { buildOgImageUrl, buildPageUrl } from "@/lib/og-url";
-import { DocsContributors } from "@/components/DocsContributors";
-import { DocBodyChrome } from "@/components/DocBodyChrome";
+import {
+ SECTION_CONFIG,
+ DEDICATED_APP_SECTIONS,
+ MARKETING_SLUGS,
+ SECTION_SLUGS,
+ MARKETING_SECTIONS,
+} from "@/lib/section-registry";
+import { loadPage, buildSectionMetadata, primitiveOnly } from "@/lib/mdx-page";
import { getMDXComponents } from "@/mdx-components";
-import type { ComponentType } from "react";
-import { FaqPreview } from "@/components/faq/FaqPreview";
-import { formatTag } from "@/components/faq/FaqIndex";
-import { ChangelogFrontMatterProvider } from "@/components/changelog/ChangelogFrontMatterContext";
-import type { ChangelogFrontMatter } from "@/components/changelog/ChangelogFrontMatterContext";
import { WrappedDataProvider } from "@/components/wrapped/WrappedDataContext";
+import { DocBodyChrome } from "@/components/DocBodyChrome";
+import { usersSource, changelogSource } from "@/lib/source";
+import { sortCustomerStoriesByMetaOrder } from "@/lib/sortCustomerStoriesByMeta";
type PageProps = {
params: Promise<{ section: string; slug?: string[] }>;
@@ -25,121 +22,49 @@ export default async function SectionDocPage(props: PageProps) {
const params = await props.params;
const { section, slug: slugParam } = params;
const slug = slugParam ?? [];
- const isMarketing = MARKETING_SECTION_SLUGS.has(section as (typeof MARKETING_SLUGS)[number]);
- const isPost = POST_SECTIONS.has(section);
- const isChangelog = CHANGELOG_SECTIONS.has(section);
- const isCollectionIndex = section === "users" && slug.length === 0;
+ const isMarketing = MARKETING_SECTIONS.has(section as (typeof MARKETING_SLUGS)[number]);
const effectiveSlug = isMarketing ? [section] : slug;
- if (!SECTION_SLUGS.includes(section as SectionSlug)) {
- notFound();
- }
- if (WIDE_SECTIONS.has(section)) {
- notFound(); /* wide sections are served by app/(wide)/FAQ: {formatTag(tag)}
-
+ {bodyClient}
+
);
}
@@ -147,68 +72,25 @@ export async function generateMetadata(props: PageProps): Promise
-
- ) : (
- children
- )}
-
-
- {children}
-
-
+
+
+
+
+
+
+ );
+}
+
+export async function generateMetadata(props: PageProps): Promise
-
+ ) as ChangelogFrontMatter;
+
+ return (
+
+
+ );
+}
+
+export async function generateMetadata(props: PageProps): Promise {
+ const { slug } = await props.params;
+ const page = changelogSource.getPage(slug);
+ if (!page) return { title: "Not Found" };
+ return buildSectionMetadata(page, "changelog", "Changelog", slug);
+}
+
+export function generateStaticParams() {
+ return changelogSource.generateParams();
+}
diff --git a/app/changelog/layout.tsx b/app/changelog/layout.tsx
index a500140f5a..27eb775c96 100644
--- a/app/changelog/layout.tsx
+++ b/app/changelog/layout.tsx
@@ -1,23 +1,9 @@
-import { changelogSource } from "@/lib/source";
-import { Layout } from "@/components/layout";
-import { FluxLayoutNoPanel } from "@/components/layout/FluxLayoutNoPanel";
+import { PageChrome } from "@/components/layout";
export default function ChangelogLayout({
children,
}: {
children: React.ReactNode;
}) {
- return (
-
-
- {children}
-
-
- );
+ return {children} ;
}
diff --git a/app/changelog/page.tsx b/app/changelog/page.tsx
index 49315289d5..14a16179a5 100644
--- a/app/changelog/page.tsx
+++ b/app/changelog/page.tsx
@@ -1,59 +1,87 @@
-import { Suspense } from "react";
+import type { Metadata } from "next";
import { ChangelogIndex } from "@/components/changelog/ChangelogIndex";
-import type { ChangelogPageItem } from "@/components/changelog/ChangelogIndex";
-import { Header } from "@/components/Header";
-import { ProductUpdateSignup } from "@/components/productUpdateSignup";
-import Link from "next/link";
-import { changelogSource } from "@/lib/source";
+import { ProductUpdateSignup } from "@/components/ProductUpdateSignup";
+import {
+ CHANGELOG_ITEMS_PER_PAGE,
+ changelogPageHref,
+ getChangelogIndexItems,
+ parseChangelogPageParam,
+} from "@/lib/changelog-index";
+import { ContentColumns } from "@/components/layout";
+import { TextHighlight } from "@/components/ui/text-highlight";
+import { Link } from "@/components/ui/link";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
-export default function ChangelogIndexPage() {
- const pages: ChangelogPageItem[] = changelogSource
- .getPages()
- .filter((p) => p.url !== "/changelog")
- .sort(
- (a, b) =>
- new Date((b.data.date as string) ?? 0).getTime() -
- new Date((a.data.date as string) ?? 0).getTime()
- )
- .map((p) => ({
- route: p.url,
- name: p.data.title,
- title: p.data.title,
- frontMatter: {
- title: p.data.title,
- description: p.data.description as string | undefined,
- date: p.data.date as string | undefined,
- ogImage: p.data.ogImage as string | undefined,
- ogVideo: p.data.ogVideo as string | undefined,
- gif: p.data.gif as string | undefined,
- badge: p.data.badge as string | undefined,
- },
- }));
+type PageProps = {
+ searchParams: Promise<{ page?: string }>;
+};
+
+export async function generateMetadata({
+ searchParams,
+}: PageProps): Promise {
+ const sp = await searchParams;
+ const all = getChangelogIndexItems();
+ const totalPages = Math.max(
+ 1,
+ Math.ceil(all.length / CHANGELOG_ITEMS_PER_PAGE)
+ );
+ const currentPage = parseChangelogPageParam(sp.page, totalPages);
+ const canonical = changelogPageHref(currentPage, totalPages) ?? "/changelog";
+
+ return {
+ alternates: {
+ canonical,
+ },
+ pagination: {
+ ...(currentPage > 1 && {
+ previous: changelogPageHref(currentPage - 1, totalPages),
+ }),
+ ...(currentPage < totalPages && {
+ next: changelogPageHref(currentPage + 1, totalPages),
+ }),
+ },
+ };
+}
+
+export default async function ChangelogIndexPage({ searchParams }: PageProps) {
+ const sp = await searchParams;
+ const allPages = getChangelogIndexItems();
+ const totalPages = Math.max(
+ 1,
+ Math.ceil(allPages.length / CHANGELOG_ITEMS_PER_PAGE)
+ );
+ const currentPage = parseChangelogPageParam(sp.page, totalPages);
+ const sliceStart = (currentPage - 1) * CHANGELOG_ITEMS_PER_PAGE;
+ const pages = allPages.slice(
+ sliceStart,
+ sliceStart + CHANGELOG_ITEMS_PER_PAGE
+ );
return (
-
-
+
+
+
+
);
}
diff --git a/app/changelog/[...slug]/page.tsx b/app/changelog/[...slug]/page.tsx
new file mode 100644
index 0000000000..56e9fa6e9d
--- /dev/null
+++ b/app/changelog/[...slug]/page.tsx
@@ -0,0 +1,50 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { changelogSource } from "@/lib/source";
+import { loadPage, buildSectionMetadata, primitiveOnly } from "@/lib/mdx-page";
+import { getMDXComponents } from "@/mdx-components";
+import { ContentColumns } from "@/components/layout";
+import { DocBodyChrome } from "@/components/DocBodyChrome";
+import { ChangelogFrontMatterProvider } from "@/components/changelog/ChangelogFrontMatterContext";
+import type { ChangelogFrontMatter } from "@/components/changelog/ChangelogFrontMatterContext";
+import { MainContentWrapper } from "@/components/MainContentWrapper";
+
+type PageProps = {
+ params: Promise<{ slug: string[] }>;
+};
+
+export default async function ChangelogPostPage(props: PageProps) {
+ const { slug } = await props.params;
+ const result = await loadPage(changelogSource, slug);
+ if (!result) notFound();
+ const { page, MDX } = result;
+
+ const frontMatter = primitiveOnly(
+ page.data as unknown as Record
+
-
+
+ Langfuse Blog
+
+
The latest updates from Langfuse. See{" "}
-
+
Changelog
{" "}
for more product updates.
-
- }
- className="mb-8"
- h="h1"
- />
-
-
-
+
+
+
+
+
+
+
+
+
-
-
- Latest release updates from the Langfuse team. Check out our{" "}
-
- Roadmap
- {" "}
- to see what's next.
-
- }
- className="mb-8"
- h="h1"
- />
+
+
+
);
}
diff --git a/app/docs/DocsLayoutWrapper.tsx b/app/docs/DocsLayoutWrapper.tsx
index 79cdbe7790..3e94716941 100644
--- a/app/docs/DocsLayoutWrapper.tsx
+++ b/app/docs/DocsLayoutWrapper.tsx
@@ -1,17 +1,14 @@
"use client";
-import { SidebarProvider } from "fumadocs-ui/components/sidebar/base";
import type { ReactNode } from "react";
/**
- * Wraps docs layout so SidebarTrigger has a SidebarProvider.
- * Sidebar sticky top is handled via --fd-docs-row-1 override in overrides.css:
- * calc(var(--fd-nav-height, 4rem) + var(--fd-banner-height, 0px))
+ * Pattern-bg is applied to #nd-page directly via CSS + DocsPatternTracker.
*/
export function DocsLayoutWrapper({ children }: { children: ReactNode }) {
return (
-
+
-
+
+ Changelog
+
+
+ Latest release updates from the Langfuse team. Check out our{" "}
+
+ Roadmap
+ {" "}
+ to see what's next.
+
+
- {children}
+
-
-
-
+
+
);
}
diff --git a/app/docs/[[...slug]]/not-found.tsx b/app/docs/[[...slug]]/not-found.tsx
deleted file mode 100644
index f5ccb78f17..0000000000
--- a/app/docs/[[...slug]]/not-found.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Link from "next/link";
-
-export default function DocsNotFound() {
- return (
-
{children} ;
+ return {children} ;
}
diff --git a/app/faq/[[...slug]]/page.tsx b/app/faq/[[...slug]]/page.tsx
new file mode 100644
index 0000000000..5ff16e1696
--- /dev/null
+++ b/app/faq/[[...slug]]/page.tsx
@@ -0,0 +1,139 @@
+import type { Metadata } from "next";
+import { faqSource } from "@/lib/source";
+import { buildOgImageUrl, buildPageUrl } from "@/lib/og-url";
+import { DocsPage } from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import { DocsTocFooter } from "@/components/DocsTocFooter";
+import { DocBodyChrome } from "@/components/DocBodyChrome";
+import { getMDXComponents } from "@/mdx-components";
+import type { ComponentType } from "react";
+import { DocsAndPageFooter } from "@/components/DocsAndPageFooter";
+import { FaqPreview } from "@/components/faq/FaqPreview";
+import { formatTag } from "@/components/faq/FaqIndex";
+
+type PageProps = {
+ params: Promise<{ slug?: string[] }>;
+};
+
+export default async function FaqPage(props: PageProps) {
+ const params = await props.params;
+ const slug = params.slug ?? [];
+ const page = faqSource.getPage(slug);
+
+ if (!page && slug.length === 2 && slug[0] === "tag") {
+ const tag = decodeURIComponent(slug[1]);
+ return (
+
+
+
+
+ );
+ }
+
+ if (!page) notFound();
+
+ const { toc } = page.data;
+ const MDX = page.data.body as ComponentType<{ components?: Record }>;
+
+ return (
+
+
+
+ );
+}
+
+export async function generateMetadata(props: PageProps): Promise {
+ const params = await props.params;
+ const slug = params.slug ?? [];
+ const page = faqSource.getPage(slug);
+
+ if (!page && slug.length === 2 && slug[0] === "tag") {
+ const tag = decodeURIComponent(slug[1]);
+ const title = `FAQ: ${formatTag(tag)}`;
+ const canonicalUrl = buildPageUrl(`/faq/tag/${slug[1]}`);
+ const ogImage = buildOgImageUrl({
+ title,
+ description: `Frequently asked questions about ${formatTag(tag)}.`,
+ section: "FAQ",
+ });
+ return {
+ title,
+ description: `Frequently asked questions about ${formatTag(tag)}.`,
+ alternates: { canonical: canonicalUrl },
+ openGraph: { images: [{ url: ogImage }], url: canonicalUrl },
+ twitter: { images: [{ url: ogImage }] },
+ };
+ }
+
+ if (!page)
+ return {
+ title: "Not Found",
+ };
+
+ const pageData = page.data as typeof page.data & {
+ canonical?: string | null;
+ noindex?: boolean | null;
+ seoTitle?: string | null;
+ ogImage?: string | null;
+ ogVideo?: string | null;
+ };
+ const pagePath = `/faq${slug.length > 0 ? `/${slug.join("/")}` : ""}`;
+ const canonicalUrl = pageData.canonical ?? buildPageUrl(pagePath);
+ const seoTitle = pageData.seoTitle || page.data.title;
+ const ogImage = buildOgImageUrl({
+ title: seoTitle,
+ description: page.data.description,
+ section: "FAQ",
+ staticOgImage: pageData.ogImage,
+ });
+ const ogVideoUrl = pageData.ogVideo
+ ? pageData.ogVideo.startsWith("http")
+ ? pageData.ogVideo
+ : buildPageUrl(pageData.ogVideo)
+ : null;
+ return {
+ title: seoTitle,
+ description: page.data.description ?? undefined,
+ alternates: { canonical: canonicalUrl },
+ ...(pageData.noindex ? { robots: { index: false, follow: true } } : {}),
+ openGraph: {
+ images: [{ url: ogImage }],
+ url: canonicalUrl,
+ ...(ogVideoUrl ? { videos: [{ url: ogVideoUrl }] } : {}),
+ },
+ twitter: { images: [{ url: ogImage }] },
+ };
+}
+
+export function generateStaticParams() {
+ const params = [...faqSource.generateParams()];
+ const allTags = new Set();
+
+ for (const p of faqSource.getPages()) {
+ const tags = ((p.data as unknown as Record).tags as string[] | undefined) ?? [];
+ for (const tag of tags) {
+ allTags.add(tag);
+ }
+ }
+
+ for (const tag of Array.from(allTags)) {
+ if (!faqSource.getPage(["tag", tag])) {
+ params.push({ slug: ["tag", tag] } as (typeof params)[number]);
+ }
+ }
+
+ return params;
+}
diff --git a/app/faq/layout.tsx b/app/faq/layout.tsx
new file mode 100644
index 0000000000..123eed1a07
--- /dev/null
+++ b/app/faq/layout.tsx
@@ -0,0 +1,10 @@
+import { faqSource } from "@/lib/source";
+import { SharedDocsLayout } from "@/app/docs/SharedDocsLayout";
+
+export default function FaqLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return {children} ;
+}
diff --git a/app/guides/[[...slug]]/not-found.tsx b/app/guides/[[...slug]]/not-found.tsx
deleted file mode 100644
index 4411fd59ab..0000000000
--- a/app/guides/[[...slug]]/not-found.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Link from "next/link";
-
-export default function GuidesNotFound() {
- return (
-
{
ogImage?: string | null;
};
const pagePath = `/guides${slug.length > 0 ? `/${slug.join("/")}` : ""}`;
- const canonicalUrl = pageData.canonical ?? buildPageUrl(pagePath);
+ const cookbookMapping = COOKBOOK_ROUTE_MAPPING.find(
+ (r) => r.path === pagePath && r.canonicalPath,
+ );
+ const canonicalUrl =
+ pageData.canonical ??
+ (cookbookMapping ? buildPageUrl(cookbookMapping.canonicalPath!) : null) ??
+ buildPageUrl(pagePath);
const seoTitle = pageData.seoTitle || page.data.title;
const ogImage = buildOgImageUrl({
title: seoTitle,
diff --git a/app/guides/layout.tsx b/app/guides/layout.tsx
index cd6df660ff..4a6445d70e 100644
--- a/app/guides/layout.tsx
+++ b/app/guides/layout.tsx
@@ -1,4 +1,4 @@
-import { guidesSource, getPageTreeWithShortTitles } from "@/lib/source";
+import { guidesSource } from "@/lib/source";
import { SharedDocsLayout } from "@/app/docs/SharedDocsLayout";
export default function GuidesLayout({
@@ -6,5 +6,5 @@ export default function GuidesLayout({
}: {
children: React.ReactNode;
}) {
- return {children} ;
+ return {children} ;
}
diff --git a/app/integrations/[[...slug]]/not-found.tsx b/app/integrations/[[...slug]]/not-found.tsx
deleted file mode 100644
index 53e6937bae..0000000000
--- a/app/integrations/[[...slug]]/not-found.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Link from "next/link";
-
-export default function IntegrationsNotFound() {
- return (
-
{children} ;
+ return {children} ;
}
diff --git a/app/layout.tsx b/app/layout.tsx
index 36141bd7db..388a29715c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,14 +1,35 @@
import type { Metadata } from "next";
import Script from "next/script";
import { RootProvider } from "fumadocs-ui/provider/next";
-import { GeistSans } from "geist/font/sans";
-import { GeistMono } from "geist/font/mono";
+import { GoogleTagManager } from '@next/third-parties/google';
+import localFont from "next/font/local";
+import { Inter } from 'next/font/google'
import { DevAriaHiddenConsoleFilter } from "@/components/DevAriaHiddenConsoleFilter";
import {
buildDefaultSiteOgImageUrl,
SITE_DEFAULT_OG_DESCRIPTION,
} from "@/lib/og-url";
import { PostHogProvider } from "@/components/analytics/PostHogProvider";
+
+const interVariable = Inter({
+ subsets: ['latin'],
+ variable: "--font-inter",
+ display: "swap",
+});
+
+const geistMono = localFont({
+ src: "../public/fonts/GeistMono-Medium.woff2",
+ variable: "--font-geist-mono",
+ display: "swap",
+ weight: "500",
+});
+
+const f37Analog = localFont({
+ src: "../public/fonts/F37Analog-Medium.woff2",
+ variable: "--font-analog",
+ display: "swap",
+ weight: "500",
+});
import { Hubspot } from "@/components/analytics/hubspot";
import "../style.css";
import "@vidstack/react/player/styles/base.css";
@@ -47,7 +68,7 @@ export default function RootLayout({
lang="en"
dir="ltr"
suppressHydrationWarning
- className={`${GeistSans.variable} ${GeistMono.variable}`}
+ className={`${interVariable.variable} ${geistMono.variable} ${f37Analog.variable}`}
>
{process.env.NODE_ENV === "development" &&
+ {children}
);
}
diff --git a/app/docs/SharedDocsLayout.tsx b/app/docs/SharedDocsLayout.tsx
index bede7d2e8d..d83553547c 100644
--- a/app/docs/SharedDocsLayout.tsx
+++ b/app/docs/SharedDocsLayout.tsx
@@ -1,14 +1,24 @@
import type { ComponentProps, ReactNode } from "react";
import { DocsLayout } from "fumadocs-ui/layouts/docs";
import { DocsLayoutWrapper } from "./DocsLayoutWrapper";
-import { Layout } from "@/components/layout";
-import { MenuSwitcher } from "@/components/MenuSwitcher";
+import { NavbarDocs, DocsSecondaryNav, DocsSecondaryNavMobile } from "@/components/layout";
+import { DocsPatternTracker } from "@/components/layout/DocsContentArea";
import { ThemeToggle } from "@/components/ThemeToggle";
+import { AISearch, AISearchPanel, FloatingAskAIButton } from "@/components/inkeep/search";
+import { SidebarFolderItem } from "@/components/docs-sidebar/SidebarFolderItem";
+import { SidebarItem } from "@/components/docs-sidebar/SidebarItem";
+import { SidebarSeparatorItem } from "@/components/docs-sidebar/SidebarSeparatorItem";
/**
* Shared wrapper used by all sidebar-based section layouts
* (docs, guides, integrations, self-hosting, library).
* Each layout only needs to pass the correct page tree.
+ *
+ * Renders two sticky headers:
+ * 1. NavbarDocs — 60px — logo + search + launch app
+ * 2. DocsSecondaryNav — 40px — section tabs
+ * Total header height is `calc(var(--lf-nav-primary-height) + var(--lf-nav-docs-secondary-height))`
+ * on `.docs-chrome` as `--fd-nav-height` (see `src/overrides.css`) so fumadocs sticky offsets stay correct.
*/
export function SharedDocsLayout({
tree,
@@ -18,19 +28,30 @@ export function SharedDocsLayout({
children: ReactNode;
}) {
return (
-
+
+
+
+
-
- );
-}
diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index e4094bbdee..fcef4fb529 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -3,10 +3,11 @@ import { source } from "@/lib/source";
import { buildOgImageUrl, buildPageUrl } from "@/lib/og-url";
import { DocsPage } from "fumadocs-ui/page";
import { notFound } from "next/navigation";
-import { DocsContributors } from "@/components/DocsContributors";
+import { DocsTocFooter } from "@/components/DocsTocFooter";
import { DocBodyChrome } from "@/components/DocBodyChrome";
import { getMDXComponents } from "@/mdx-components";
import type { ComponentType } from "react";
+import { DocsAndPageFooter } from "@/components/DocsAndPageFooter";
type PageProps = {
params: Promise<{ slug?: string[] }>;
@@ -26,7 +27,8 @@ export default async function DocPage(props: PageProps) {
Page not found
-- The documentation page you’re looking for doesn’t exist or has moved. -
- - Back to Documentation - -FAQ: {formatTag(tag)}
+
-
- );
-}
diff --git a/app/guides/[[...slug]]/page.tsx b/app/guides/[[...slug]]/page.tsx
index d8019988a0..40bf30bcd6 100644
--- a/app/guides/[[...slug]]/page.tsx
+++ b/app/guides/[[...slug]]/page.tsx
@@ -1,12 +1,14 @@
import type { Metadata } from "next";
import { guidesSource } from "@/lib/source";
import { buildOgImageUrl, buildPageUrl } from "@/lib/og-url";
+import { COOKBOOK_ROUTE_MAPPING } from "@/lib/cookbook_route_mapping";
import { DocsPage } from "fumadocs-ui/page";
import { notFound } from "next/navigation";
-import { DocsContributors } from "@/components/DocsContributors";
+import { DocsTocFooter } from "@/components/DocsTocFooter";
import { DocBodyChrome } from "@/components/DocBodyChrome";
import { getMDXComponents } from "@/mdx-components";
import type { ComponentType } from "react";
+import { DocsAndPageFooter } from "@/components/DocsAndPageFooter";
type PageProps = {
params: Promise<{ slug?: string[] }>;
@@ -26,7 +28,8 @@ export default async function GuidesPage(props: PageProps) {
Page not found
-- The guides page you're looking for doesn't exist or has moved. -
- - Back to Guides - -
-
- );
-}
diff --git a/app/integrations/[[...slug]]/page.tsx b/app/integrations/[[...slug]]/page.tsx
index a49ebf396b..8b8c8d2db8 100644
--- a/app/integrations/[[...slug]]/page.tsx
+++ b/app/integrations/[[...slug]]/page.tsx
@@ -3,10 +3,11 @@ import { integrationsSource } from "@/lib/source";
import { buildOgImageUrl, buildPageUrl } from "@/lib/og-url";
import { DocsPage } from "fumadocs-ui/page";
import { notFound } from "next/navigation";
-import { DocsContributors } from "@/components/DocsContributors";
+import { DocsTocFooter } from "@/components/DocsTocFooter";
import { DocBodyChrome } from "@/components/DocBodyChrome";
import { getMDXComponents } from "@/mdx-components";
import type { ComponentType } from "react";
+import { DocsAndPageFooter } from "@/components/DocsAndPageFooter";
type PageProps = {
params: Promise<{ slug?: string[] }>;
@@ -26,7 +27,8 @@ export default async function IntegrationsPage(props: PageProps) {
Page not found
-- The integrations page you're looking for doesn't exist or has moved. -
- - Back to Integrations - -
-
+
+
+
Pricing Calculator
-
-
+
+
Enter your monthly billable units to see the graduated pricing
breakdown.
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {currentBaseFee > 0 ? (
+
+
+
+
+ {formatCurrency(currentBaseFee)}
+
+
+ {selectedPlan} Base
+
-
- {selectedPlan} Base
+
+ +
-
- +
-
-
- {formatCurrency(calculatedPrice)}
-
-
- Usage
+
+
+ {formatCurrency(calculatedPrice)}
+
+
+ Usage
+
-
- =
-
-
- {formatCurrency(calculatedPrice + currentBaseFee)}
+
+ =
-
- Total / Month
+
+
+ {formatCurrency(calculatedPrice + currentBaseFee)}
+
+
+ Total / Month
+
-
- ) : (
-
-
+ ) : (
+
{formatCurrency(calculatedPrice)}
@@ -235,74 +240,74 @@ export function PricingCalculator({
Total Usage Cost / Month
-
- )}
+ )}
+
{/* Breakdown */}
Pricing tiers breakdown:
-
-
-
-
- Tier
- Rate
-
-
- Your Units
-
-
- Cost
-
-
-
- {pricingBreakdown.map((breakdown, index) => {
- const { tier, eventsInTier, costForTier, tierRate } =
- breakdown;
+
+
+
+ Tier
+ Rate
+
+
+ Your Units
+
+
+ Cost
+
+
+
+ {pricingBreakdown.map((breakdown, index) => {
+ const { tier, eventsInTier, costForTier, tierRate } =
+ breakdown;
- return (
-
-
- {tier.description}
-
- {tierRate}
-
- {eventsInTier > 0 ? formatNumber(eventsInTier) : "—"}
-
-
- {eventsInTier > 0 ? formatCurrency(costForTier) : "—"}
-
-
- );
- })}
- {/* Total row */}
-
- Total
-
- {(() => {
- const totalUnits = parseInt(monthlyEvents.replace(/,/g, "")) || 0;
- if (totalUnits === 0) return "—";
- const avgRate = (calculatedPrice / totalUnits) * 100000;
- return formatCurrency(avgRate) + "/100k";
- })()}
-
-
- {monthlyEvents}
-
-
- {formatCurrency(calculatedPrice)}
-
-
-
-
-
+ return (
+
+
+ {tier.description}
+
+ {tierRate}
+
+ {eventsInTier > 0 ? formatNumber(eventsInTier) : "—"}
+
+
+ {eventsInTier > 0 ? formatCurrency(costForTier) : "—"}
+
+
+ );
+ })}
+ {/* Total row */}
+
+ Total
+
+ {(() => {
+ const totalUnits =
+ parseInt(monthlyEvents.replace(/,/g, "")) || 0;
+ if (totalUnits === 0) return "—";
+ const avgRate = (calculatedPrice / totalUnits) * 100000;
+ return formatCurrency(avgRate) + "/100k";
+ })()}
+
+
+ {monthlyEvents}
+
+
+ {formatCurrency(calculatedPrice)}
+
+
+
+
diff --git a/components/home/pricing/PricingDiscounts.tsx b/components/home/pricing/PricingDiscounts.tsx
index 9c4556a5dd..f2b554be53 100644
--- a/components/home/pricing/PricingDiscounts.tsx
+++ b/components/home/pricing/PricingDiscounts.tsx
@@ -1,4 +1,7 @@
import { Button } from "@/components/ui/button";
+import { CornerBox } from "@/components/ui/corner-box";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
import Link from "next/link";
const discounts = [
@@ -33,34 +36,45 @@ const discounts = [
];
export const PricingDiscounts = () => (
-
-
-
+
+
+
Discounts
-
-
+
+
{discounts.map((discount) => (
-
-
+
{discount.name}
-
-
+
+
{discount.description}
-
+
{discount.cta && (
-
+
))}
-
+
Reach out to{" "}
support@langfuse.com
@@ -68,7 +82,7 @@ export const PricingDiscounts = () => (
to apply for a discount. We want all startups, educational users,
non-profits and open source projects to build with Langfuse and are
happy to work with you to make that happen.
-
+
);
diff --git a/components/home/pricing/PricingFAQ.tsx b/components/home/pricing/PricingFAQ.tsx
index cfa7e4a6f0..d8e25b9dd0 100644
--- a/components/home/pricing/PricingFAQ.tsx
+++ b/components/home/pricing/PricingFAQ.tsx
@@ -1,31 +1,31 @@
-import { Plus, Minus } from "lucide-react";
-import { Disclosure } from "@headlessui/react";
+import { Heading } from "@/components/ui/heading";
+import { FAQAccordion, type FAQItem } from "@/components/shared/FAQAccordion";
-const faqs = [
+const faqs: FAQItem[] = [
{
question: "What is the easiest way to try Langfuse?",
answer:
- "You can view the public example project or sign up for a free account to try Langfuse with your own data. The Hobby plan is completely free and does not require a credit card.",
+ "You can view the [public example project](/demo) or sign up for a [free account](https://cloud.langfuse.com) to try Langfuse with your own data. The Hobby plan is completely free and does not require a credit card.",
},
{
question: "Can I self-host Langfuse for free?",
answer:
- "Yes, Langfuse is open source and you can self-host Langfuse for free. Use docker compose to run Langfuse locally, or use one of our templates to self-host Langfuse in production on Kubernetes. Check out the self-hosting documentation to learn more.",
+ "Yes, Langfuse is open source and you can self-host Langfuse for free. Use docker compose to run Langfuse locally, or use one of our templates to self-host Langfuse in production on Kubernetes. Check out the [self-hosting documentation](/self-hosting) to learn more.",
},
{
question: "What is a billable unit?",
answer:
- "A billable unit in Langfuse is any tracing data point you send to our platform - this includes the trace (a complete application interaction), observations (individual steps within a trace: Spans, Events and Generations), and scores (evaluations of your AI outputs). For a detailed explanation and an example, see our Langfuse Billable Units docs.",
+ "A billable unit in Langfuse is any tracing data point you send to our platform — this includes the trace (a complete application interaction), observations (individual steps within a trace: Spans, Events and Generations), and scores (evaluations of your AI outputs). For a detailed explanation and an example, see our [Langfuse Billable Units docs](/docs/administration/billable-units).",
},
{
question: "How does the graduated pricing work?",
answer:
- "Our graduated pricing means you pay different rates for different volume tiers. The first 100k units are included in paid plans, then you pay $8/100k for units 100k-1M, $7/100k for 1M-10M units, $6.5/100k for 10M-50M units, and $6/100k for 50M+ units. This ensures you get better rates as you scale up your usage. Use the pricing calculator to estimate your bill.",
+ "Our graduated pricing means you pay different rates for different volume tiers. The first 100k units are included in paid plans, then you pay $8/100k for units 100k–1M, $7/100k for 1M–10M units, $6.5/100k for 10M–50M units, and $6/100k for 50M+ units. This ensures you get better rates as you scale up your usage. Use the pricing calculator to estimate your bill.",
},
{
question: "How can I reduce my Langfuse Cloud bill?",
answer:
- "The primary way to reduce your Langfuse Cloud bill is to reduce the number of billable units that you ingest. We have summarized how this can be done here. Additionally, with our new graduated pricing model, you automatically get lower rates per 100k units as your volume increases.",
+ "The primary way to reduce your Langfuse Cloud bill is to reduce the number of billable units that you ingest. We have summarized how this can be done [here](/faq/all/cutting-costs). Additionally, with our new graduated pricing model, you automatically get lower rates per 100k units as your volume increases.",
},
{
question: "When do I get billed?",
@@ -35,12 +35,12 @@ const faqs = [
{
question: "Can I set up alerts on the usage fees?",
answer:
- "Yes, you can configure spend alerts to receive email notifications when your organization's spending exceeds predefined monetary thresholds. This helps you monitor costs and take action before unexpected charges occur. Navigate to your organization settings and the Billing tab to configure spend alerts. Learn more in our spend alerts documentation.",
+ "Yes, you can configure spend alerts to receive email notifications when your organization's spending exceeds predefined monetary thresholds. This helps you monitor costs and take action before unexpected charges occur. Navigate to your organization settings and the Billing tab to configure spend alerts. Learn more in our [spend alerts documentation](/docs/administration/spend-alerts).",
},
{
question: "How can I manage my subscription?",
answer:
- "You can manage your subscription through the organization settings in Langfuse Cloud or by using this Customer Portal.",
+ "You can manage your subscription through the organization settings in Langfuse Cloud or by using this [Customer Portal](/billing-portal).",
},
{
question: "Can I redline the contracts?",
@@ -50,56 +50,24 @@ const faqs = [
{
question: "Where is the data stored?",
answer:
- "Langfuse Cloud is hosted on AWS and data is stored in the US or EU depending on your selection. See our security and privacy documentation for more details.",
+ "Langfuse Cloud is hosted on AWS and data is stored in the US or EU depending on your selection. See our [security and privacy documentation](/security) for more details.",
},
{
question: "I have security questions, where to start?",
answer:
- "We publish almost all of our security documentation and controls. Please refer to our security documentation for more details.",
+ "We publish almost all of our security documentation and controls. Please refer to our [security documentation](/security) for more details.",
},
];
export function PricingFAQ() {
return (
-
-
-
- Frequently asked questions
-
-
- {faqs.map((faq) => (
-
- {({ open }) => (
- <>
- -
-
-
- {faq.question}
-
-
- {open ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
-
- )}
-
- ))}
-
+
+
+
+ FAQ
+
+ = {
id: "tier-self-hosted-enterprise",
href: "https://langfuse.app.n8n.cloud/form/edaa0e7f-0244-4b3e-92d6-870179e066f2",
featured: false,
- cardClassName:
- "border-[#FAFF6A] bg-[#FAFF6A12] dark:bg-[#FAFF6A14] dark:border-[#FAFF6A]",
pillClassName: "bg-[#FAFF6A] text-[#1A1A1A]",
description:
"Dedicated Langfuse deployment with enterprise capabilities and support.",
@@ -1408,9 +1407,8 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
return (
-
-
- ) : (
- <>
-
+
+ ) : (
+
)}
{/* Callouts for different tiers - always render container for alignment */}
-
+
{tier.calloutLink ? (
-
+
-
+
{tier.mainFeatures.map((feature, index) => (
@@ -1520,10 +1528,11 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
))}
{tier.addOn && (
-
-
+
+
+ optional
+
{tier.addOn.name}
@@ -1544,14 +1553,13 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
{tier.addOn.cta && (
)}
{tier.addOn.calloutLink && (
@@ -1564,6 +1572,7 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
)}
+
)}
@@ -1584,9 +1593,17 @@ export function PricingTable({
}) {
const [isHeaderFixed, setIsHeaderFixed] = useState(false);
const [headerWidth, setHeaderWidth] = useState(0);
+ const [headerLeft, setHeaderLeft] = useState(0);
+ const [containerLeft, setContainerLeft] = useState(0);
+ const [containerWidth, setContainerWidth] = useState(0);
const [columnWidths, setColumnWidths] = useState([]);
+ const [mounted, setMounted] = useState(false);
const tableRef = useRef(null);
const headerRef = useRef(null);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
const selectedTiers = tiers[variant];
const visibleSections = sections.filter((section) =>
section.features.some((feature) => variant in feature.tiers),
@@ -1595,13 +1612,24 @@ export function PricingTable({
useEffect(() => {
if (!isPricingPage) return;
+ const getContainer = () =>
+ document.getElementById("home-main-area") ??
+ tableRef.current?.parentElement ??
+ null;
+
const calculateWidths = () => {
if (headerRef.current && tableRef.current) {
- // Get the total width of the table
- const tableWidth = tableRef.current.getBoundingClientRect().width;
- setHeaderWidth(tableWidth);
+ const tableRect = tableRef.current.getBoundingClientRect();
+ setHeaderWidth(tableRect.width);
+ setHeaderLeft(tableRect.left);
+
+ const container = getContainer();
+ if (container) {
+ const containerRect = container.getBoundingClientRect();
+ setContainerLeft(containerRect.left);
+ setContainerWidth(containerRect.width);
+ }
- // Get the widths of each column
const headerCells = headerRef.current.querySelectorAll("th");
const widths = Array.from(headerCells).map(
(cell) => (cell as HTMLElement).getBoundingClientRect().width,
@@ -1618,9 +1646,21 @@ export function PricingTable({
if (!tableRef.current) return;
const tableRect = tableRef.current.getBoundingClientRect();
- const navbarHeight = 64; // Approximate height of the navbar
+ /** Keep aligned with `--lf-nav-primary-height` in `src/overrides.css`. */
+ const navbarHeight = 60;
+
+ // Keep the sticky header aligned with the table / container horizontal
+ // position (layout may shift if content above the table changes size).
+ setHeaderLeft(tableRect.left);
+ setHeaderWidth(tableRect.width);
+
+ const container = getContainer();
+ if (container) {
+ const containerRect = container.getBoundingClientRect();
+ setContainerLeft(containerRect.left);
+ setContainerWidth(containerRect.width);
+ }
- // Check if we're within the table's vertical bounds
const isWithinTableBounds =
tableRect.top < navbarHeight && tableRect.bottom > navbarHeight;
@@ -1660,10 +1700,7 @@ export function PricingTable({
)}
>
{selectedTiers.map((tier) => (
-
+
{tier.name}
@@ -1676,7 +1713,7 @@ export function PricingTable({
{visibleSections.map((section) => (
-
+
- {isHeaderFixed && (
-
-
-
-
-
-
- {columnWidths.length > 0 && (
- <>
-
- {tier.name}
-
- ))}
-
- )}
-
-
-
-
-
-
- )}
+ {mounted &&
+ isHeaderFixed &&
+ columnWidths.length > 0 &&
+ createPortal(
+ 0 ? containerLeft : headerLeft,
+ width: containerWidth > 0 ? containerWidth : headerWidth,
+ }}
+ >
+ 0
+ ? Math.max(0, headerLeft - containerLeft)
+ : 0,
+ marginRight: 0,
+ }}
+ >
+
+
+
+ {tier.name}
+
+ ))}
+
+
+
+ ,
+ document.body,
+ )}
-
+
{visibleSections.map((section) => (
-
+
);
-}
+}
\ No newline at end of file
diff --git a/components/home/pricing/index.tsx b/components/home/pricing/index.tsx
index 919cd15f17..c3f7bc1a10 100644
--- a/components/home/pricing/index.tsx
+++ b/components/home/pricing/index.tsx
@@ -1,12 +1,14 @@
"use client";
import Link from "next/link";
-import { Header } from "../../Header";
-import { HomeSection } from "../components/HomeSection";
+import { HomeSection } from "../HomeSection";
import { cn } from "@/lib/utils";
import { Tabs, TabsList, TabsTrigger } from "../../ui/tabs";
import { useState } from "react";
import React from "react";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { TextHighlight } from "@/components/ui/text-highlight";
import { PricingCalculator } from "./PricingCalculator";
import { PricingFAQ } from "./PricingFAQ";
import { PricingDiscounts } from "./PricingDiscounts";
@@ -59,15 +61,23 @@ export function PricingPage({
const variant = isPricingPage ? initialVariant : localVariant;
return (
-
-
+
+
-
+ {deploymentOptions[variant].title}
+
+ {deploymentOptions[variant].subtitle}
+
{/* Deployment Options Tabs */}
{variant === "cloud" && ) {
- return (
-
- );
-}
-
-export default IconAWS;
diff --git a/components/icons/azure.tsx b/components/icons/azure.tsx
deleted file mode 100644
index 42596f75f5..0000000000
--- a/components/icons/azure.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-
-function IconAzure(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconAzure;
diff --git a/components/icons/book-bookmark.tsx b/components/icons/book-bookmark.tsx
new file mode 100644
index 0000000000..05b32f4b85
--- /dev/null
+++ b/components/icons/book-bookmark.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconBookBookmark(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconBookBookmark;
diff --git a/components/icons/book.tsx b/components/icons/book.tsx
new file mode 100644
index 0000000000..96600193ff
--- /dev/null
+++ b/components/icons/book.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+function IconBook(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconBook;
diff --git a/components/icons/compass.tsx b/components/icons/compass.tsx
new file mode 100644
index 0000000000..378d09ea22
--- /dev/null
+++ b/components/icons/compass.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+function IconCompass(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconCompass;
diff --git a/components/icons/desktop-tower.tsx b/components/icons/desktop-tower.tsx
new file mode 100644
index 0000000000..731484a7f1
--- /dev/null
+++ b/components/icons/desktop-tower.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+function IconDesktopTower(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconDesktopTower;
diff --git a/components/icons/docker.tsx b/components/icons/docker.tsx
deleted file mode 100644
index b95cd3abba..0000000000
--- a/components/icons/docker.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// icon:docker | Ant Design Icons https://ant.design/components/icon/ | Ant Design
-import * as React from "react";
-
-function IconDocker(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconDocker;
diff --git a/components/icons/error.tsx b/components/icons/error.tsx
new file mode 100644
index 0000000000..52d00078b1
--- /dev/null
+++ b/components/icons/error.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconError(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconError;
diff --git a/components/icons/gcp.tsx b/components/icons/gcp.tsx
deleted file mode 100644
index 501ff96d3e..0000000000
--- a/components/icons/gcp.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-
-function IconGCP(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconGCP;
diff --git a/components/icons/github.tsx b/components/icons/github.tsx
index ed49ddfaef..0b0cde80b6 100644
--- a/components/icons/github.tsx
+++ b/components/icons/github.tsx
@@ -4,14 +4,14 @@ import * as React from "react";
function IconGithub(props: React.SVGProps) {
return (
);
}
diff --git a/components/icons/idea.tsx b/components/icons/idea.tsx
new file mode 100644
index 0000000000..677c9aa914
--- /dev/null
+++ b/components/icons/idea.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconIdea(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconIdea;
diff --git a/components/icons/info.tsx b/components/icons/info.tsx
new file mode 100644
index 0000000000..2a5914f426
--- /dev/null
+++ b/components/icons/info.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconInfo(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconInfo;
diff --git a/components/icons/kubernetes.tsx b/components/icons/kubernetes.tsx
deleted file mode 100644
index 7ea6a2ef23..0000000000
--- a/components/icons/kubernetes.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react";
-
-function IconKubernetes(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconKubernetes;
diff --git a/components/icons/success.tsx b/components/icons/success.tsx
new file mode 100644
index 0000000000..71cc29a9ec
--- /dev/null
+++ b/components/icons/success.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+function IconSuccess(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconSuccess;
diff --git a/components/icons/warning.tsx b/components/icons/warning.tsx
new file mode 100644
index 0000000000..d8cdda6495
--- /dev/null
+++ b/components/icons/warning.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconWarning(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconWarning;
diff --git a/components/icons/x.tsx b/components/icons/x.tsx
index eb7812a501..4470d5ab8b 100644
--- a/components/icons/x.tsx
+++ b/components/icons/x.tsx
@@ -1,14 +1,15 @@
function IconX(props: React.SVGProps) {
return (
);
}
diff --git a/components/inkeep/InkeepChatButton.tsx b/components/inkeep/InkeepChatButton.tsx
deleted file mode 100644
index 201be5d7e2..0000000000
--- a/components/inkeep/InkeepChatButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import type { InkeepChatButtonProps } from "@inkeep/cxkit-react";
-import useInkeepSettings from "./useInkeepSettings";
-
-const ChatButton = dynamic(
- () => import("@inkeep/cxkit-react").then((mod) => mod.InkeepChatButton),
- {
- ssr: false,
- }
-);
-
-export default function InkeepChatButton() {
- const { baseSettings, aiChatSettings, searchSettings, modalSettings } =
- useInkeepSettings();
-
- const chatButtonProps: InkeepChatButtonProps = {
- baseSettings,
- aiChatSettings,
- searchSettings,
- modalSettings,
- label: "Ask AI",
- avatar: "/langfuse-icon.svg",
- };
-
- return (
-
- = {
+ user: 'you',
+ assistant: 'langfuse',
+};
+
+type AIChatMessageProps = {
+ message: InkeepUIMessage;
+ /** Stops clicks from closing a parent overlay (e.g. search panel backdrop). */
+ captureClicks?: boolean;
+} & Omit, 'children'>;
+
+export function AIChatMessage({
+ message,
+ captureClicks,
+ className,
+ onClick,
+ ...props
+}: AIChatMessageProps) {
+ let markdown = '';
+ let links: ProvideLinksData['links'] = [];
+
+ for (const part of message.parts ?? []) {
+ if (part.type === 'text') {
+ markdown += part.text;
+ continue;
+ }
+ if (part.type === 'tool-provideLinks' && part.input) {
+ links = (part.input as ProvideLinksData).links;
+ }
+ }
+
+ return (
+ {
+ if (captureClicks) e.stopPropagation();
+ onClick?.(e);
+ }}
+ >
+
+ {roleName[message.role] ?? 'unknown'}
+
+
+ {item.title}
+ Reference {item.label}
+
+ ))}
+
+ )}
+
+ );
+}
+
+type AIChatEmptyStateProps = {
+ onPickQuestion: (question: string) => void;
+};
+
+export function AIChatEmptyState({ onPickQuestion }: AIChatEmptyStateProps) {
+ return (
+
+
+ 
+
+ Hi! I'm Langfuse's AI assistant trained on documentation, help articles, and other
+ content. How can I help you today?
+
+
+
+ {AI_CHAT_EXAMPLE_QUESTIONS.map((question) => (
+
+ ))}
+
+
+ );
+}
diff --git a/components/inkeep/ask-ai-button.tsx b/components/inkeep/ask-ai-button.tsx
new file mode 100644
index 0000000000..f657de2e0d
--- /dev/null
+++ b/components/inkeep/ask-ai-button.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { AISearchTrigger, useAISearchContext } from "@/components/inkeep/search";
+import { cn } from "@/lib/utils";
+
+export const AskAIButton = () => {
+ return (
+
+ Ask AI
+
+ );
+};
+
+export const FloatingAskAIButton = () => {
+ const { open } = useAISearchContext();
+
+ return (
+
+
+ Ask AI
+
+
+ );
+};
diff --git a/components/inkeep/embedded-chat.tsx b/components/inkeep/embedded-chat.tsx
new file mode 100644
index 0000000000..50e320ea3a
--- /dev/null
+++ b/components/inkeep/embedded-chat.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import {
+ type ComponentProps,
+ type SyntheticEvent,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { Loader2, RefreshCw, Send } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { Link } from '@/components/ui/link';
+import { AIChatEmptyState, AIChatMessage } from './ai-chat-shared';
+import { useChatContext, buildUserMessage } from './search-context';
+
+function EmbeddedTextarea(props: ComponentProps<'textarea'>) {
+ const shared = cn('col-start-1 row-start-1', props.className);
+
+ return (
+
+
+
+ {`${props.value?.toString() ?? ''}\n`}
+
+
+ );
+}
+
+export function EmbeddedAIChat() {
+ const chat = useChatContext();
+ const messages = chat.messages.filter((msg) => msg.role !== 'system');
+ const isLoading = chat.status === 'streaming' || chat.status === 'submitted';
+ const isStreaming = chat.status === 'streaming';
+
+ const [input, setInput] = useState('');
+ const scrollRef = useRef(null);
+
+ useEffect(() => {
+ if (!scrollRef.current) return;
+ const container = scrollRef.current;
+
+ function scrollToBottom() {
+ container.scrollTo({ top: container.scrollHeight, behavior: 'auto' });
+ }
+
+ const observer = new ResizeObserver(scrollToBottom);
+ scrollToBottom();
+
+ const child = container.firstElementChild;
+ if (child) observer.observe(child);
+
+ return () => observer.disconnect();
+ }, []);
+
+ const onSubmit = (e?: SyntheticEvent) => {
+ e?.preventDefault();
+ const message = input.trim();
+ if (message.length === 0) return;
+
+ void chat.sendMessage(buildUserMessage(message));
+ setInput('');
+ };
+
+ return (
+
+
+ 
+
+ Ask AI
+
+
+ — Powered by{' '}
+
+ Inkeep AI
+
+
+
+
+
+ {messages.length === 0 ? (
+ {
+ void chat.sendMessage(buildUserMessage(question));
+ }}
+ />
+ ) : (
+
+ {messages.map((item) => (
+
+
+
+
+ {messages.length > 0 && (
+
+ {!isStreaming && messages.at(-1)?.role === 'assistant' && (
+ }
+ onClick={() => chat.regenerate()}
+ >
+ Retry
+
+ )}
+
+
+ )}
+
+
+ );
+}
diff --git a/components/inkeep/markdown.tsx b/components/inkeep/markdown.tsx
new file mode 100644
index 0000000000..c61b6d0cd6
--- /dev/null
+++ b/components/inkeep/markdown.tsx
@@ -0,0 +1,124 @@
+import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import {
+ Children,
+ type ComponentProps,
+ type ReactElement,
+ type ReactNode,
+ Suspense,
+ use,
+ useDeferredValue,
+} from 'react';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { visit } from 'unist-util-visit';
+import type { ElementContent, Root, RootContent } from 'hast';
+
+export interface Processor {
+ process: (content: string) => Promise;
+}
+
+export function rehypeWrapWords() {
+ return (tree: Root) => {
+ visit(tree, ['text', 'element'], (node, index, parent) => {
+ if (node.type === 'element' && node.tagName === 'pre') return 'skip';
+ if (node.type !== 'text' || !parent || index === undefined) return;
+
+ const words = node.value.split(/(?=\s)/);
+
+ // Create new span nodes for each word and whitespace
+ const newNodes: ElementContent[] = words.flatMap((word) => {
+ if (word.length === 0) return [];
+
+ return {
+ type: 'element',
+ tagName: 'span',
+ properties: {
+ class: 'animate-fd-fade-in',
+ },
+ children: [{ type: 'text', value: word }],
+ };
+ });
+
+ Object.assign(node, {
+ type: 'element',
+ tagName: 'span',
+ properties: {},
+ children: newNodes,
+ } satisfies RootContent);
+ return 'skip';
+ });
+ };
+}
+
+function createProcessor(): Processor {
+ const processor = remark().use(remarkGfm).use(remarkRehype).use(rehypeWrapWords);
+
+ return {
+ async process(content) {
+ const nodes = processor.parse({ value: content });
+ const hast = await processor.run(nodes);
+
+ return toJsxRuntime(hast, {
+ development: false,
+ jsx,
+ jsxs,
+ Fragment,
+ components: {
+ ...defaultMdxComponents,
+ pre: Pre,
+ img: undefined, // use JSX
+ },
+ });
+ },
+ };
+}
+
+function Pre(props: ComponentProps<'pre'>) {
+ const code = Children.only(props.children) as ReactElement;
+ const codeProps = code.props as ComponentProps<'code'>;
+ const content = codeProps.children;
+ if (typeof content !== 'string') return null;
+
+ let lang =
+ codeProps.className
+ ?.split(' ')
+ .find((v) => v.startsWith('language-'))
+ ?.slice('language-'.length) ?? 'text';
+
+ if (lang === 'mdx') lang = 'md';
+
+ return {text}}>
+
+ );
+}
+
+const MAX_CACHE_SIZE = 200;
+const cache = new Map>();
+
+function Renderer({ text }: { text: string }) {
+ let result = cache.get(text);
+ if (!result) {
+ result = processor.process(text);
+ cache.set(text, result);
+ if (cache.size > MAX_CACHE_SIZE) {
+ const oldest = cache.keys().next().value;
+ if (oldest !== undefined) cache.delete(oldest);
+ }
+ }
+
+ return use(result);
+}
diff --git a/components/inkeep/search-context.tsx b/components/inkeep/search-context.tsx
new file mode 100644
index 0000000000..b669c40e4d
--- /dev/null
+++ b/components/inkeep/search-context.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import {
+ createContext,
+ type ReactNode,
+ use,
+ useMemo,
+ useState,
+} from 'react';
+import { useChat, type UseChatHelpers } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import type { InkeepUIMessage } from '@/lib/ai/inkeep-qa-schema';
+
+type AISearchContextValue = {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ chat: UseChatHelpers;
+};
+
+const Context = createContext(null);
+
+const transport = new DefaultChatTransport({ api: '/api/chat' });
+
+export function AISearch({ children }: { children: ReactNode }) {
+ const [open, setOpen] = useState(false);
+ const chat = useChat({
+ id: 'search',
+ transport,
+ });
+
+ return (
+ ({ chat, open, setOpen }), [chat, open])}>
+ {children}
+
+ );
+}
+
+export function useAISearchContext() {
+ const ctx = use(Context);
+ if (!ctx) throw new Error('useAISearchContext must be used within ');
+ return ctx;
+}
+
+export function useChatContext() {
+ return useAISearchContext().chat;
+}
+
+export function buildUserMessage(text: string) {
+ return {
+ role: 'user' as const,
+ parts: [
+ {
+ type: 'data-client' as const,
+ data: { location: location.href },
+ },
+ {
+ type: 'text' as const,
+ text,
+ },
+ ],
+ };
+}
diff --git a/components/inkeep/search-panel.tsx b/components/inkeep/search-panel.tsx
new file mode 100644
index 0000000000..fe3847b6e4
--- /dev/null
+++ b/components/inkeep/search-panel.tsx
@@ -0,0 +1,319 @@
+'use client';
+
+import {
+ type ComponentProps,
+ type SyntheticEvent,
+ useEffect,
+ useEffectEvent,
+ useRef,
+ useState,
+} from 'react';
+import { Loader2, RefreshCw, Send, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { Link } from '@/components/ui/link';
+import { AIChatEmptyState, AIChatMessage } from './ai-chat-shared';
+import { Presence } from '@radix-ui/react-presence';
+import { useAISearchContext, useChatContext, buildUserMessage } from './search-context';
+
+// ─── Header ────────────────────────────────────────────────────────────────────
+
+function AISearchPanelHeader({ className, ...props }: ComponentProps<'div'>) {
+ const { setOpen } = useAISearchContext();
+
+ return (
+
+
+
+ Ask AI
+
+
+ Powered by{' '}
+
+ Inkeep AI
+
+
+
+
+ }
+ aria-label="Close"
+ onClick={() => setOpen(false)}
+ className="mt-1 mr-1"
+ />
+
+ );
+}
+
+// ─── Input actions (retry / clear) ─────────────────────────────────────────────
+
+function AISearchInputActions() {
+ const { messages, status, setMessages, regenerate } = useChatContext();
+ const isLoading = status === 'streaming';
+
+ if (messages.length === 0) return null;
+
+ return (
+ <>
+ {!isLoading && messages.at(-1)?.role === 'assistant' && (
+ }
+ onClick={() => regenerate()}
+ >
+ Retry
+
+ )}
+
+
+ );
+}
+
+// ─── Input form ────────────────────────────────────────────────────────────────
+
+const StorageKeyInput = '__ai_search_input';
+
+function AISearchInput(props: ComponentProps<'form'>) {
+ const { status, sendMessage, stop } = useChatContext();
+ const [input, setInput] = useState(() =>
+ typeof window === 'undefined' ? '' : (localStorage.getItem(StorageKeyInput) ?? ''),
+ );
+ const isLoading = status === 'streaming' || status === 'submitted';
+
+ const wasLoadingRef = useRef(false);
+ useEffect(() => {
+ if (!isLoading && wasLoadingRef.current) {
+ document.getElementById('nd-ai-input')?.focus();
+ }
+ wasLoadingRef.current = isLoading;
+ }, [isLoading]);
+
+ const onStart = (e?: SyntheticEvent) => {
+ e?.preventDefault();
+ const message = input.trim();
+ if (message.length === 0) return;
+
+ void sendMessage(buildUserMessage(message));
+ setInput('');
+ localStorage.removeItem(StorageKeyInput);
+ };
+
+ return (
+
+ );
+}
+
+// ─── Auto-resizing textarea ────────────────────────────────────────────────────
+
+function TextareaAutoResize(props: ComponentProps<'textarea'>) {
+ const shared = cn('col-start-1 row-start-1', props.className);
+
+ return (
+
+
+
+ {`${props.value?.toString() ?? ''}\n`}
+
+
+ );
+}
+
+// ─── Scrollable message list ───────────────────────────────────────────────────
+
+function ScrollList(props: Omit, 'dir'>) {
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ if (!containerRef.current) return;
+ const container = containerRef.current;
+
+ function scrollToBottom() {
+ container.scrollTo({ top: container.scrollHeight, behavior: 'instant' });
+ }
+
+ const observer = new ResizeObserver(scrollToBottom);
+ scrollToBottom();
+
+ const child = container.firstElementChild;
+ if (child) observer.observe(child);
+
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+ {props.children}
+
+ );
+}
+
+// ─── Message list panel (empty state + messages) ───────────────────────────────
+
+function AISearchPanelList({ className, style, ...props }: ComponentProps<'div'>) {
+ const chat = useChatContext();
+ const messages = chat.messages.filter((msg) => msg.role !== 'system');
+
+ const sendExampleQuestion = (question: string) => {
+ void chat.sendMessage(buildUserMessage(question));
+ };
+
+ return (
+
+ {messages.length === 0 ? (
+
+ );
+}
+
+// ─── Hotkey handler ────────────────────────────────────────────────────────────
+
+function useHotKey() {
+ const { open, setOpen } = useAISearchContext();
+
+ const onKeyPress = useEffectEvent((e: KeyboardEvent) => {
+ if (e.key === 'Escape' && open) {
+ setOpen(false);
+ e.preventDefault();
+ }
+
+ if (e.key === '/' && (e.metaKey || e.ctrlKey) && !open) {
+ setOpen(true);
+ e.preventDefault();
+ }
+ });
+
+ useEffect(() => {
+ window.addEventListener('keydown', onKeyPress);
+ return () => window.removeEventListener('keydown', onKeyPress);
+ }, []);
+}
+
+// ─── Main panel ────────────────────────────────────────────────────────────────
+
+export function AISearchPanel() {
+ const { open, setOpen } = useAISearchContext();
+ useHotKey();
+
+ return (
+ <>
+
+ setOpen(false)}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/components/inkeep/search-trigger.tsx b/components/inkeep/search-trigger.tsx
new file mode 100644
index 0000000000..c46dacece3
--- /dev/null
+++ b/components/inkeep/search-trigger.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+import { useAISearchContext } from './search-context';
+import { Button } from '@/components/ui/button';
+
+export function AISearchTrigger({
+ position = 'default',
+ className,
+ ...props
+}: ComponentProps<'button'> & { position?: 'default' | 'float' }) {
+ const { open, setOpen } = useAISearchContext();
+
+ return (
+
+ );
+}
diff --git a/components/inkeep/search.tsx b/components/inkeep/search.tsx
new file mode 100644
index 0000000000..5d0ddd8d2a
--- /dev/null
+++ b/components/inkeep/search.tsx
@@ -0,0 +1,4 @@
+export { AISearch, useAISearchContext } from './search-context';
+export { AISearchPanel } from './search-panel';
+export { AISearchTrigger } from './search-trigger';
+export { FloatingAskAIButton } from './ask-ai-button';
diff --git a/components/inkeep/useInkeepSettings.ts b/components/inkeep/useInkeepSettings.ts
index 00c5d1d5cf..ad66104d65 100644
--- a/components/inkeep/useInkeepSettings.ts
+++ b/components/inkeep/useInkeepSettings.ts
@@ -13,7 +13,7 @@ import { useMemo } from "react";
const customAnalyticsCallback = (
event: InkeepCallbackEvent,
- posthog: PostHog
+ posthog: PostHog,
): void => {
const { componentType, conversation } = event.properties;
const messages = conversation?.messages || [];
@@ -57,19 +57,17 @@ const useInkeepSettings = (): InkeepSharedSettings => {
const baseSettings: InkeepBaseSettings = {
apiKey: process.env.NEXT_PUBLIC_INKEEP_API_KEY! || "",
- primaryBrandColor: "#E11312", // your brand color, widget color scheme is derived from this
+ primaryBrandColor: "#E11312",
organizationDisplayName: "Langfuse",
- // ...optional settings
colorMode: {
- forcedColorMode: resolvedTheme, // to sync dark mode with the widget
+ forcedColorMode: resolvedTheme,
},
onEvent: (event) => customAnalyticsCallback(event, posthog),
- transformSource: (source, type, opts) => {
- // Transform based on source type
+ transformSource: (source, type) => {
const tab = inkeepCustomTabsToSlugs.find((t) => {
const slugs = Array.isArray(t.slug) ? t.slug : [t.slug];
return slugs.some((slug) =>
- source.url.startsWith("https://langfuse.com" + slug)
+ source.url.startsWith("https://langfuse.com" + slug),
);
})?.tab;
if (type === "searchResultItem") {
@@ -83,20 +81,16 @@ const useInkeepSettings = (): InkeepSharedSettings => {
};
const modalSettings: InkeepModalSettings = {
- // optional settings
-
- // deactivate by default, only activated for search bar
shortcutKey: null,
};
const searchSettings: InkeepSearchSettings = {
- placeholder: "Search...",
+ placeholder: "Search",
tabs: inkeepCustomTabsToSlugs
.map((t) => t.tab)
.concat(["All", "GitHub"])
- // add isAlwaysVisible to current website section
.map((t) =>
- t === tabOfCurrentDocsSection ? [t, { isAlwaysVisible: true }] : t
+ t === tabOfCurrentDocsSection ? [t, { isAlwaysVisible: true }] : t,
),
};
@@ -107,29 +101,7 @@ const useInkeepSettings = (): InkeepSharedSettings => {
"This response is generated by AI and may contain inaccuracies or errors. Please reach out to support if you need assistance.",
};
- // const contactSupportCallToAction: InvokeCallbackAction = {
- // type: "invoke_callback",
- // callback: () => {
- // showChat();
- // // if (!args.conversation?.messages?.length) {
- // // showChat();
- // // return;
- // // }
-
- // // const draftMessage =
- // // "I tried to get answers via the AI chat but was unable to. My questions were:\n\n" +
- // // args.conversation.messages
- // // .filter((message) => message.role === "user")
- // // .map((message) => message.content)
- // // .join("\n");
-
- // // openChat(draftMessage);
- // },
- // shouldCloseModal: false,
- // };
-
const aiChatSettings: InkeepAIChatSettings = {
- // optional settings
chatSubjectName: "Langfuse",
aiAssistantAvatar: "/langfuse-icon.svg",
introMessage:
diff --git a/components/integrations/IntegrationIndex.tsx b/components/integrations/IntegrationIndex.tsx
index 896284b013..530aeece8a 100644
--- a/components/integrations/IntegrationIndex.tsx
+++ b/components/integrations/IntegrationIndex.tsx
@@ -219,16 +219,14 @@ export const IntegrationIndex = () => {
href={page.route}
key={page.route}
title={page.title}
- className="flex flex-row items-center justify-start gap-2"
+ className=""
icon={
(page as any).frontMatter?.logo ? (
-
- 
-
+
) : (
config.icon
)
@@ -251,16 +249,14 @@ export const IntegrationIndex = () => {
href={page.route}
key={page.route}
title={page.title}
- className="flex flex-row items-center justify-start gap-2"
+ className=""
icon={
page.frontMatter?.logo ? (
-
- 
-
+
) : (
config.icon
)
diff --git a/components/jp-cloud/JpCloudLogos.tsx b/components/jp-cloud/JpCloudLogos.tsx
index ec3360a38a..ec7f1cc837 100644
--- a/components/jp-cloud/JpCloudLogos.tsx
+++ b/components/jp-cloud/JpCloudLogos.tsx
@@ -7,26 +7,21 @@ import type { StaticImageData } from "next/image";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
-import canvaLight from "@/components/home/img/canva_light.png";
-import canvaDark from "@/components/home/img/canva_dark.png";
-import twilioLight from "@/components/home/img/twilio_light.svg";
-import twilioDark from "@/components/home/img/twilio_dark.svg";
-import intuitLight from "@/components/home/img/intuit_light.svg";
-import intuitDark from "@/components/home/img/intuit_dark.svg";
-import freeeLight from "@/components/home/img/freee_light.png";
-import freeeDark from "@/components/home/img/freee_dark.png";
+import canvaLogo from "@/components/home/img/canva.svg";
+import twilioLogo from "@/components/home/img/twilio.svg";
+import intuitLogo from "@/components/home/img/intuit.svg";
+import freeeLogo from "@/components/home/img/freee.svg";
type Logo = {
name: string;
- light: StaticImageData;
- dark: StaticImageData;
+ logo: StaticImageData;
};
const logos: Logo[] = [
- { name: "freee", light: freeeDark, dark: freeeLight },
- { name: "Canva", light: canvaDark, dark: canvaLight },
- { name: "Twilio", light: twilioDark, dark: twilioLight },
- { name: "Intuit", light: intuitLight, dark: intuitDark },
+ { name: "freee", logo: freeeLogo },
+ { name: "Canva", logo: canvaLogo },
+ { name: "Twilio", logo: twilioLogo },
+ { name: "Intuit", logo: intuitLogo },
];
export function JpCloudLogos() {
@@ -60,15 +55,9 @@ export function JpCloudLogos() {
className="flex items-center justify-center h-16 md:h-20 px-6 md:px-10 border border-border/50 -mr-px -mb-px bg-card"
>
-
-
+
);
}
diff --git a/components/layout/DocsContentArea.tsx b/components/layout/DocsContentArea.tsx
new file mode 100644
index 0000000000..ba91b768ae
--- /dev/null
+++ b/components/layout/DocsContentArea.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import {
+ createPatternSpotlightState,
+ disposePatternSpotlight,
+ updatePatternSpotlightTarget,
+} from "@/lib/patternSpotlight";
+import { useEffect } from "react";
+
+/**
+ * Headless component — renders nothing.
+ * Attaches a window mousemove listener, finds fumadocs' #nd-page element
+ * (the main content area between sidebar and TOC), and sets --cursor-x /
+ * --cursor-y as element-relative percentages so the pattern-bg spotlight
+ * follows the cursor only inside that column.
+ */
+export function DocsPatternTracker() {
+ useEffect(() => {
+ const spotlightState = createPatternSpotlightState();
+ const getPage = () => document.getElementById("nd-page");
+
+ const handler = (e: MouseEvent) => {
+ const page = getPage();
+ if (!page) return;
+ const rect = page.getBoundingClientRect();
+ // Only update when cursor is inside the content area
+ if (
+ e.clientX < rect.left ||
+ e.clientX > rect.right ||
+ e.clientY < rect.top ||
+ e.clientY > rect.bottom
+ )
+ return;
+ const x = ((e.clientX - rect.left) / rect.width) * 100;
+ const y = ((e.clientY - rect.top) / rect.height) * 100;
+ updatePatternSpotlightTarget(getPage, spotlightState, x, y);
+ };
+ window.addEventListener("mousemove", handler, { passive: true });
+ return () => {
+ window.removeEventListener("mousemove", handler);
+ disposePatternSpotlight(spotlightState);
+ };
+ }, []);
+
+ return null;
+}
diff --git a/components/layout/DocsSecondaryNav.tsx b/components/layout/DocsSecondaryNav.tsx
new file mode 100644
index 0000000000..6d56ca96ef
--- /dev/null
+++ b/components/layout/DocsSecondaryNav.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import {
+ Menu,
+ X,
+ ChevronRight,
+ Unplug,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { useSidebar } from "fumadocs-ui/components/sidebar/base";
+import { useTreePath } from "fumadocs-ui/contexts/tree";
+import IconBook from "@/components/icons/book";
+import IconBookBookmark from "@/components/icons/book-bookmark";
+import IconDesktopTower from "@/components/icons/desktop-tower";
+import IconCompass from "@/components/icons/compass";
+
+const SECTIONS = [
+ { title: "Docs", path: "/docs", Icon: IconBook },
+ { title: "Integrations", path: "/integrations", Icon: Unplug },
+ { title: "Self Hosting", path: "/self-hosting", Icon: IconDesktopTower },
+ { title: "Guides", path: "/guides", Icon: IconCompass },
+ { title: "AI Engineering Library", path: "/library", Icon: IconBookBookmark },
+] as const;
+
+/** Derive a human-readable page name from the last pathname segment. */
+function pageNameFromPath(pathname: string | null): string | null {
+ if (!pathname) return null;
+ const slug = pathname.split("/").filter(Boolean).pop();
+ if (!slug) return null;
+ // "get-started" → "Get Started"
+ return slug
+ .split("-")
+ .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+ .join(" ");
+}
+
+/**
+ * Mobile breadcrumb bar with hamburger to open the Fumadocs sidebar drawer.
+ */
+export function DocsSecondaryNavMobile() {
+ const pathname = usePathname();
+ const { open, setOpen } = useSidebar();
+ const treePath = useTreePath();
+
+ const activeSection = SECTIONS.find((s) => pathname?.startsWith(s.path));
+
+ // Prefer tree path for page name (gives the authored title), fall back to slug
+ const treeNode = treePath.length > 0 ? treePath[treePath.length - 1] : null;
+ const pageName =
+ (treeNode && "name" in treeNode ? treeNode.name : null) ??
+ pageNameFromPath(pathname);
+
+ // Don't show breadcrumb arrow if we're on the section root
+ const isRoot = activeSection && pathname === activeSection.path;
+
+ return (
+
+
+ {activeSection && (
+ {activeSection.title}
+ )}
+ {pageName && !isRoot && (
+ <>
+ ) {
- return null} />;
-}
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index e4cb4ebc51..9d8580d90b 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,11 +1,164 @@
-import FooterMenu from "@/components/FooterMenu";
+import { CornerBox } from "@/components/ui/corner-box";
+import { Link } from "@/components/ui/link";
+import { Text } from "@/components/ui/text";
+import IconGithub from "@/components/icons/github";
+import IconDiscord from "@/components/icons/discord";
+import IconX from "@/components/icons/x";
+import IconYoutube from "@/components/icons/youtube";
+import IconLinkedin from "@/components/icons/linkedin";
+import { cn } from "@/lib/utils";
-export function Footer() {
+const socialLinks = [
+ { name: "GitHub", href: "https://github.com/langfuse/langfuse", icon: IconGithub },
+ { name: "Discord", href: "/discord", icon: IconDiscord },
+ { name: "X", href: "https://x.com/langfuse", icon: IconX },
+ { name: "YouTube", href: "https://www.youtube.com/@langfuse", icon: IconYoutube },
+ { name: "LinkedIn", href: "https://www.linkedin.com/company/langfuse/", icon: IconLinkedin },
+];
+
+const menuItems: { heading: string; items: { name: string; href: string }[] }[] = [
+ {
+ heading: "Product",
+ items: [
+ { name: "Observability", href: "/docs/observability/overview" },
+ { name: "Prompt Management", href: "/docs/prompt-management/overview" },
+ { name: "Evaluations", href: "/docs/evaluation/overview" },
+ { name: "Metrics", href: "/docs/metrics/overview" },
+ { name: "Playground", href: "/docs/prompt-management/features/playground" },
+ { name: "Pricing", href: "/pricing" },
+ { name: "Enterprise", href: "/enterprise" },
+ ],
+ },
+ {
+ heading: "Developers",
+ items: [
+ { name: "Documentation", href: "/docs" },
+ { name: "Self-Hosting", href: "/self-hosting" },
+ { name: "SDKs", href: "/docs/observability/sdk/overview" },
+ { name: "Integrations", href: "/integrations" },
+ { name: "API Reference", href: "/docs/api-and-data-platform/overview" },
+ { name: "Status", href: "https://status.langfuse.com" },
+ { name: "Talk to Us", href: "/talk-to-us" },
+ ],
+ },
+ {
+ heading: "Resources",
+ items: [
+ { name: "Blog", href: "/blog" },
+ { name: "Changelog", href: "/changelog" },
+ { name: "Roadmap", href: "/docs/roadmap" },
+ { name: "Interactive Demo", href: "/docs/demo" },
+ { name: "Customers", href: "/users" },
+ { name: "AI Engineering Library", href: "/library" },
+ { name: "Guides & Cookbooks", href: "/guides" },
+ ],
+ },
+ {
+ heading: "Company",
+ items: [
+ { name: "About Us", href: "/about" },
+ { name: "Careers", href: "/careers" },
+ { name: "Press", href: "/press" },
+ { name: "Security", href: "/security" },
+ { name: "Support", href: "/support" },
+ { name: "Open source", href: "/handbook/chapters/open-source" },
+ ],
+ },
+];
+
+const bottomLinks = [
+ { name: "Terms", href: "/terms" },
+ { name: "Privacy", href: "/privacy" },
+ { name: "Imprint", href: "/imprint" },
+ { name: "Cookie Policy", href: "/cookie-policy" },
+];
+
+const linkClassName =
+ "text-text-tertiary transition-colors hover:text-text-primary";
+
+export function Footer({ className }: { className?: string }) {
return (
-
+
-
-
-
-
-
-
-
-
-
+
+
-
+
-
+
+
+
+
+
-
+
+
+
+
- {currentBaseFee > 0 ? (
-
-
-
-
- {formatCurrency(currentBaseFee)}
+
+ {currentBaseFee > 0 ? (
+
+
+
+
-
+ {formatCurrency(currentBaseFee)}
+
+
+ {selectedPlan} Base
+
- {selectedPlan} Base
+
-
+ +
- +
-
-
{/* Breakdown */}
- {formatCurrency(calculatedPrice)}
-
-
- Usage
+
-
+
-
+ {formatCurrency(calculatedPrice)}
+
+
+ Usage
+
=
-
-
- ) : (
-
- {formatCurrency(calculatedPrice + currentBaseFee)}
+
-
+ =
-
- Total / Month
+
+
+ {formatCurrency(calculatedPrice + currentBaseFee)}
+
+
+ Total / Month
+
-
- )}
+ )}
+
+ ) : (
+
-
{formatCurrency(calculatedPrice)}
@@ -235,74 +240,74 @@ export function PricingCalculator({
Total Usage Cost / Month
Pricing tiers breakdown:
-
-
-
diff --git a/components/home/pricing/PricingDiscounts.tsx b/components/home/pricing/PricingDiscounts.tsx
index 9c4556a5dd..f2b554be53 100644
--- a/components/home/pricing/PricingDiscounts.tsx
+++ b/components/home/pricing/PricingDiscounts.tsx
@@ -1,4 +1,7 @@
import { Button } from "@/components/ui/button";
+import { CornerBox } from "@/components/ui/corner-box";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
import Link from "next/link";
const discounts = [
@@ -33,34 +36,45 @@ const discounts = [
];
export const PricingDiscounts = () => (
-
-
-
+
+
+
+
Discounts
-
-
+
+
{discounts.map((discount) => (
-
-
+
{discount.name}
-
-
+
+
{discount.description}
-
+
{discount.cta && (
-
+
))}
-
+
Reach out to{" "}
support@langfuse.com
@@ -68,7 +82,7 @@ export const PricingDiscounts = () => (
to apply for a discount. We want all startups, educational users,
non-profits and open source projects to build with Langfuse and are
happy to work with you to make that happen.
-
+
);
diff --git a/components/home/pricing/PricingFAQ.tsx b/components/home/pricing/PricingFAQ.tsx
index cfa7e4a6f0..d8e25b9dd0 100644
--- a/components/home/pricing/PricingFAQ.tsx
+++ b/components/home/pricing/PricingFAQ.tsx
@@ -1,31 +1,31 @@
-import { Plus, Minus } from "lucide-react";
-import { Disclosure } from "@headlessui/react";
+import { Heading } from "@/components/ui/heading";
+import { FAQAccordion, type FAQItem } from "@/components/shared/FAQAccordion";
-const faqs = [
+const faqs: FAQItem[] = [
{
question: "What is the easiest way to try Langfuse?",
answer:
- "You can view the public example project or sign up for a free account to try Langfuse with your own data. The Hobby plan is completely free and does not require a credit card.",
+ "You can view the [public example project](/demo) or sign up for a [free account](https://cloud.langfuse.com) to try Langfuse with your own data. The Hobby plan is completely free and does not require a credit card.",
},
{
question: "Can I self-host Langfuse for free?",
answer:
- "Yes, Langfuse is open source and you can self-host Langfuse for free. Use docker compose to run Langfuse locally, or use one of our templates to self-host Langfuse in production on Kubernetes. Check out the self-hosting documentation to learn more.",
+ "Yes, Langfuse is open source and you can self-host Langfuse for free. Use docker compose to run Langfuse locally, or use one of our templates to self-host Langfuse in production on Kubernetes. Check out the [self-hosting documentation](/self-hosting) to learn more.",
},
{
question: "What is a billable unit?",
answer:
- "A billable unit in Langfuse is any tracing data point you send to our platform - this includes the trace (a complete application interaction), observations (individual steps within a trace: Spans, Events and Generations), and scores (evaluations of your AI outputs). For a detailed explanation and an example, see our Langfuse Billable Units docs.",
+ "A billable unit in Langfuse is any tracing data point you send to our platform — this includes the trace (a complete application interaction), observations (individual steps within a trace: Spans, Events and Generations), and scores (evaluations of your AI outputs). For a detailed explanation and an example, see our [Langfuse Billable Units docs](/docs/administration/billable-units).",
},
{
question: "How does the graduated pricing work?",
answer:
- "Our graduated pricing means you pay different rates for different volume tiers. The first 100k units are included in paid plans, then you pay $8/100k for units 100k-1M, $7/100k for 1M-10M units, $6.5/100k for 10M-50M units, and $6/100k for 50M+ units. This ensures you get better rates as you scale up your usage. Use the pricing calculator to estimate your bill.",
+ "Our graduated pricing means you pay different rates for different volume tiers. The first 100k units are included in paid plans, then you pay $8/100k for units 100k–1M, $7/100k for 1M–10M units, $6.5/100k for 10M–50M units, and $6/100k for 50M+ units. This ensures you get better rates as you scale up your usage. Use the pricing calculator to estimate your bill.",
},
{
question: "How can I reduce my Langfuse Cloud bill?",
answer:
- "The primary way to reduce your Langfuse Cloud bill is to reduce the number of billable units that you ingest. We have summarized how this can be done here. Additionally, with our new graduated pricing model, you automatically get lower rates per 100k units as your volume increases.",
+ "The primary way to reduce your Langfuse Cloud bill is to reduce the number of billable units that you ingest. We have summarized how this can be done [here](/faq/all/cutting-costs). Additionally, with our new graduated pricing model, you automatically get lower rates per 100k units as your volume increases.",
},
{
question: "When do I get billed?",
@@ -35,12 +35,12 @@ const faqs = [
{
question: "Can I set up alerts on the usage fees?",
answer:
- "Yes, you can configure spend alerts to receive email notifications when your organization's spending exceeds predefined monetary thresholds. This helps you monitor costs and take action before unexpected charges occur. Navigate to your organization settings and the Billing tab to configure spend alerts. Learn more in our spend alerts documentation.",
+ "Yes, you can configure spend alerts to receive email notifications when your organization's spending exceeds predefined monetary thresholds. This helps you monitor costs and take action before unexpected charges occur. Navigate to your organization settings and the Billing tab to configure spend alerts. Learn more in our [spend alerts documentation](/docs/administration/spend-alerts).",
},
{
question: "How can I manage my subscription?",
answer:
- "You can manage your subscription through the organization settings in Langfuse Cloud or by using this Customer Portal.",
+ "You can manage your subscription through the organization settings in Langfuse Cloud or by using this [Customer Portal](/billing-portal).",
},
{
question: "Can I redline the contracts?",
@@ -50,56 +50,24 @@ const faqs = [
{
question: "Where is the data stored?",
answer:
- "Langfuse Cloud is hosted on AWS and data is stored in the US or EU depending on your selection. See our security and privacy documentation for more details.",
+ "Langfuse Cloud is hosted on AWS and data is stored in the US or EU depending on your selection. See our [security and privacy documentation](/security) for more details.",
},
{
question: "I have security questions, where to start?",
answer:
- "We publish almost all of our security documentation and controls. Please refer to our security documentation for more details.",
+ "We publish almost all of our security documentation and controls. Please refer to our [security documentation](/security) for more details.",
},
];
export function PricingFAQ() {
return (
-
-
-
- Frequently asked questions
-
-
- {faqs.map((faq) => (
-
- {({ open }) => (
- <>
- -
-
-
- {faq.question}
-
-
- {open ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
-
- )}
-
- ))}
-
+
+
+
+ FAQ
+
+ = {
id: "tier-self-hosted-enterprise",
href: "https://langfuse.app.n8n.cloud/form/edaa0e7f-0244-4b3e-92d6-870179e066f2",
featured: false,
- cardClassName:
- "border-[#FAFF6A] bg-[#FAFF6A12] dark:bg-[#FAFF6A14] dark:border-[#FAFF6A]",
pillClassName: "bg-[#FAFF6A] text-[#1A1A1A]",
description:
"Dedicated Langfuse deployment with enterprise capabilities and support.",
@@ -1408,9 +1407,8 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
return (
-
-
- ) : (
- <>
-
+
+ ) : (
+
)}
{/* Callouts for different tiers - always render container for alignment */}
-
+
{tier.calloutLink ? (
-
+
-
+
{tier.mainFeatures.map((feature, index) => (
@@ -1520,10 +1528,11 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
))}
{tier.addOn && (
-
-
+
+
+ optional
+
{tier.addOn.name}
@@ -1544,14 +1553,13 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
{tier.addOn.cta && (
)}
{tier.addOn.calloutLink && (
@@ -1564,6 +1572,7 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
)}
+
)}
@@ -1584,9 +1593,17 @@ export function PricingTable({
}) {
const [isHeaderFixed, setIsHeaderFixed] = useState(false);
const [headerWidth, setHeaderWidth] = useState(0);
+ const [headerLeft, setHeaderLeft] = useState(0);
+ const [containerLeft, setContainerLeft] = useState(0);
+ const [containerWidth, setContainerWidth] = useState(0);
const [columnWidths, setColumnWidths] = useState([]);
+ const [mounted, setMounted] = useState(false);
const tableRef = useRef(null);
const headerRef = useRef(null);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
const selectedTiers = tiers[variant];
const visibleSections = sections.filter((section) =>
section.features.some((feature) => variant in feature.tiers),
@@ -1595,13 +1612,24 @@ export function PricingTable({
useEffect(() => {
if (!isPricingPage) return;
+ const getContainer = () =>
+ document.getElementById("home-main-area") ??
+ tableRef.current?.parentElement ??
+ null;
+
const calculateWidths = () => {
if (headerRef.current && tableRef.current) {
- // Get the total width of the table
- const tableWidth = tableRef.current.getBoundingClientRect().width;
- setHeaderWidth(tableWidth);
+ const tableRect = tableRef.current.getBoundingClientRect();
+ setHeaderWidth(tableRect.width);
+ setHeaderLeft(tableRect.left);
+
+ const container = getContainer();
+ if (container) {
+ const containerRect = container.getBoundingClientRect();
+ setContainerLeft(containerRect.left);
+ setContainerWidth(containerRect.width);
+ }
- // Get the widths of each column
const headerCells = headerRef.current.querySelectorAll("th");
const widths = Array.from(headerCells).map(
(cell) => (cell as HTMLElement).getBoundingClientRect().width,
@@ -1618,9 +1646,21 @@ export function PricingTable({
if (!tableRef.current) return;
const tableRect = tableRef.current.getBoundingClientRect();
- const navbarHeight = 64; // Approximate height of the navbar
+ /** Keep aligned with `--lf-nav-primary-height` in `src/overrides.css`. */
+ const navbarHeight = 60;
+
+ // Keep the sticky header aligned with the table / container horizontal
+ // position (layout may shift if content above the table changes size).
+ setHeaderLeft(tableRect.left);
+ setHeaderWidth(tableRect.width);
+
+ const container = getContainer();
+ if (container) {
+ const containerRect = container.getBoundingClientRect();
+ setContainerLeft(containerRect.left);
+ setContainerWidth(containerRect.width);
+ }
- // Check if we're within the table's vertical bounds
const isWithinTableBounds =
tableRect.top < navbarHeight && tableRect.bottom > navbarHeight;
@@ -1660,10 +1700,7 @@ export function PricingTable({
)}
>
{selectedTiers.map((tier) => (
-
+
{tier.name}
@@ -1676,7 +1713,7 @@ export function PricingTable({
{visibleSections.map((section) => (
-
+
- {isHeaderFixed && (
-
-
-
-
-
-
- {columnWidths.length > 0 && (
- <>
-
- {tier.name}
-
- ))}
-
- )}
-
-
-
-
-
-
- )}
+ {mounted &&
+ isHeaderFixed &&
+ columnWidths.length > 0 &&
+ createPortal(
+ 0 ? containerLeft : headerLeft,
+ width: containerWidth > 0 ? containerWidth : headerWidth,
+ }}
+ >
+ 0
+ ? Math.max(0, headerLeft - containerLeft)
+ : 0,
+ marginRight: 0,
+ }}
+ >
+
+
+
+ {tier.name}
+
+ ))}
+
+
+
+ ,
+ document.body,
+ )}
-
+
{visibleSections.map((section) => (
-
+
);
-}
+}
\ No newline at end of file
diff --git a/components/home/pricing/index.tsx b/components/home/pricing/index.tsx
index 919cd15f17..c3f7bc1a10 100644
--- a/components/home/pricing/index.tsx
+++ b/components/home/pricing/index.tsx
@@ -1,12 +1,14 @@
"use client";
import Link from "next/link";
-import { Header } from "../../Header";
-import { HomeSection } from "../components/HomeSection";
+import { HomeSection } from "../HomeSection";
import { cn } from "@/lib/utils";
import { Tabs, TabsList, TabsTrigger } from "../../ui/tabs";
import { useState } from "react";
import React from "react";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { TextHighlight } from "@/components/ui/text-highlight";
import { PricingCalculator } from "./PricingCalculator";
import { PricingFAQ } from "./PricingFAQ";
import { PricingDiscounts } from "./PricingDiscounts";
@@ -59,15 +61,23 @@ export function PricingPage({
const variant = isPricingPage ? initialVariant : localVariant;
return (
-
-
+
+
-
+ {deploymentOptions[variant].title}
+
+ {deploymentOptions[variant].subtitle}
+
{/* Deployment Options Tabs */}
{variant === "cloud" && ) {
- return (
-
- );
-}
-
-export default IconAWS;
diff --git a/components/icons/azure.tsx b/components/icons/azure.tsx
deleted file mode 100644
index 42596f75f5..0000000000
--- a/components/icons/azure.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-
-function IconAzure(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconAzure;
diff --git a/components/icons/book-bookmark.tsx b/components/icons/book-bookmark.tsx
new file mode 100644
index 0000000000..05b32f4b85
--- /dev/null
+++ b/components/icons/book-bookmark.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconBookBookmark(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconBookBookmark;
diff --git a/components/icons/book.tsx b/components/icons/book.tsx
new file mode 100644
index 0000000000..96600193ff
--- /dev/null
+++ b/components/icons/book.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+function IconBook(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconBook;
diff --git a/components/icons/compass.tsx b/components/icons/compass.tsx
new file mode 100644
index 0000000000..378d09ea22
--- /dev/null
+++ b/components/icons/compass.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+function IconCompass(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconCompass;
diff --git a/components/icons/desktop-tower.tsx b/components/icons/desktop-tower.tsx
new file mode 100644
index 0000000000..731484a7f1
--- /dev/null
+++ b/components/icons/desktop-tower.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+function IconDesktopTower(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconDesktopTower;
diff --git a/components/icons/docker.tsx b/components/icons/docker.tsx
deleted file mode 100644
index b95cd3abba..0000000000
--- a/components/icons/docker.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// icon:docker | Ant Design Icons https://ant.design/components/icon/ | Ant Design
-import * as React from "react";
-
-function IconDocker(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconDocker;
diff --git a/components/icons/error.tsx b/components/icons/error.tsx
new file mode 100644
index 0000000000..52d00078b1
--- /dev/null
+++ b/components/icons/error.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconError(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconError;
diff --git a/components/icons/gcp.tsx b/components/icons/gcp.tsx
deleted file mode 100644
index 501ff96d3e..0000000000
--- a/components/icons/gcp.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-
-function IconGCP(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconGCP;
diff --git a/components/icons/github.tsx b/components/icons/github.tsx
index ed49ddfaef..0b0cde80b6 100644
--- a/components/icons/github.tsx
+++ b/components/icons/github.tsx
@@ -4,14 +4,14 @@ import * as React from "react";
function IconGithub(props: React.SVGProps) {
return (
);
}
diff --git a/components/icons/idea.tsx b/components/icons/idea.tsx
new file mode 100644
index 0000000000..677c9aa914
--- /dev/null
+++ b/components/icons/idea.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconIdea(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconIdea;
diff --git a/components/icons/info.tsx b/components/icons/info.tsx
new file mode 100644
index 0000000000..2a5914f426
--- /dev/null
+++ b/components/icons/info.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconInfo(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconInfo;
diff --git a/components/icons/kubernetes.tsx b/components/icons/kubernetes.tsx
deleted file mode 100644
index 7ea6a2ef23..0000000000
--- a/components/icons/kubernetes.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react";
-
-function IconKubernetes(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconKubernetes;
diff --git a/components/icons/success.tsx b/components/icons/success.tsx
new file mode 100644
index 0000000000..71cc29a9ec
--- /dev/null
+++ b/components/icons/success.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+function IconSuccess(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconSuccess;
diff --git a/components/icons/warning.tsx b/components/icons/warning.tsx
new file mode 100644
index 0000000000..d8cdda6495
--- /dev/null
+++ b/components/icons/warning.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconWarning(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconWarning;
diff --git a/components/icons/x.tsx b/components/icons/x.tsx
index eb7812a501..4470d5ab8b 100644
--- a/components/icons/x.tsx
+++ b/components/icons/x.tsx
@@ -1,14 +1,15 @@
function IconX(props: React.SVGProps) {
return (
);
}
diff --git a/components/inkeep/InkeepChatButton.tsx b/components/inkeep/InkeepChatButton.tsx
deleted file mode 100644
index 201be5d7e2..0000000000
--- a/components/inkeep/InkeepChatButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import type { InkeepChatButtonProps } from "@inkeep/cxkit-react";
-import useInkeepSettings from "./useInkeepSettings";
-
-const ChatButton = dynamic(
- () => import("@inkeep/cxkit-react").then((mod) => mod.InkeepChatButton),
- {
- ssr: false,
- }
-);
-
-export default function InkeepChatButton() {
- const { baseSettings, aiChatSettings, searchSettings, modalSettings } =
- useInkeepSettings();
-
- const chatButtonProps: InkeepChatButtonProps = {
- baseSettings,
- aiChatSettings,
- searchSettings,
- modalSettings,
- label: "Ask AI",
- avatar: "/langfuse-icon.svg",
- };
-
- return (
-
- = {
+ user: 'you',
+ assistant: 'langfuse',
+};
+
+type AIChatMessageProps = {
+ message: InkeepUIMessage;
+ /** Stops clicks from closing a parent overlay (e.g. search panel backdrop). */
+ captureClicks?: boolean;
+} & Omit, 'children'>;
+
+export function AIChatMessage({
+ message,
+ captureClicks,
+ className,
+ onClick,
+ ...props
+}: AIChatMessageProps) {
+ let markdown = '';
+ let links: ProvideLinksData['links'] = [];
+
+ for (const part of message.parts ?? []) {
+ if (part.type === 'text') {
+ markdown += part.text;
+ continue;
+ }
+ if (part.type === 'tool-provideLinks' && part.input) {
+ links = (part.input as ProvideLinksData).links;
+ }
+ }
+
+ return (
+ {
+ if (captureClicks) e.stopPropagation();
+ onClick?.(e);
+ }}
+ >
+
+ {roleName[message.role] ?? 'unknown'}
+
+
+ {item.title}
+ Reference {item.label}
+
+ ))}
+
+ )}
+
+ );
+}
+
+type AIChatEmptyStateProps = {
+ onPickQuestion: (question: string) => void;
+};
+
+export function AIChatEmptyState({ onPickQuestion }: AIChatEmptyStateProps) {
+ return (
+
+
+
+
+ Hi! I'm Langfuse's AI assistant trained on documentation, help articles, and other
+ content. How can I help you today?
+
+
+
+ {AI_CHAT_EXAMPLE_QUESTIONS.map((question) => (
+
+ ))}
+
+
+ );
+}
diff --git a/components/inkeep/ask-ai-button.tsx b/components/inkeep/ask-ai-button.tsx
new file mode 100644
index 0000000000..f657de2e0d
--- /dev/null
+++ b/components/inkeep/ask-ai-button.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { AISearchTrigger, useAISearchContext } from "@/components/inkeep/search";
+import { cn } from "@/lib/utils";
+
+export const AskAIButton = () => {
+ return (
+
+ Ask AI
+
+ );
+};
+
+export const FloatingAskAIButton = () => {
+ const { open } = useAISearchContext();
+
+ return (
+
+
+ Ask AI
+
+
+ );
+};
diff --git a/components/inkeep/embedded-chat.tsx b/components/inkeep/embedded-chat.tsx
new file mode 100644
index 0000000000..50e320ea3a
--- /dev/null
+++ b/components/inkeep/embedded-chat.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import {
+ type ComponentProps,
+ type SyntheticEvent,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { Loader2, RefreshCw, Send } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { Link } from '@/components/ui/link';
+import { AIChatEmptyState, AIChatMessage } from './ai-chat-shared';
+import { useChatContext, buildUserMessage } from './search-context';
+
+function EmbeddedTextarea(props: ComponentProps<'textarea'>) {
+ const shared = cn('col-start-1 row-start-1', props.className);
+
+ return (
+
+
+
+ {`${props.value?.toString() ?? ''}\n`}
+
+
+ );
+}
+
+export function EmbeddedAIChat() {
+ const chat = useChatContext();
+ const messages = chat.messages.filter((msg) => msg.role !== 'system');
+ const isLoading = chat.status === 'streaming' || chat.status === 'submitted';
+ const isStreaming = chat.status === 'streaming';
+
+ const [input, setInput] = useState('');
+ const scrollRef = useRef(null);
+
+ useEffect(() => {
+ if (!scrollRef.current) return;
+ const container = scrollRef.current;
+
+ function scrollToBottom() {
+ container.scrollTo({ top: container.scrollHeight, behavior: 'auto' });
+ }
+
+ const observer = new ResizeObserver(scrollToBottom);
+ scrollToBottom();
+
+ const child = container.firstElementChild;
+ if (child) observer.observe(child);
+
+ return () => observer.disconnect();
+ }, []);
+
+ const onSubmit = (e?: SyntheticEvent) => {
+ e?.preventDefault();
+ const message = input.trim();
+ if (message.length === 0) return;
+
+ void chat.sendMessage(buildUserMessage(message));
+ setInput('');
+ };
+
+ return (
+
+
+
+
+ Ask AI
+
+
+ — Powered by{' '}
+
+ Inkeep AI
+
+
+
+
+
+ {messages.length === 0 ? (
+ {
+ void chat.sendMessage(buildUserMessage(question));
+ }}
+ />
+ ) : (
+
+ {messages.map((item) => (
+
+
+
+
+ {messages.length > 0 && (
+
+ {!isStreaming && messages.at(-1)?.role === 'assistant' && (
+ }
+ onClick={() => chat.regenerate()}
+ >
+ Retry
+
+ )}
+
+
+ )}
+
+
+ );
+}
diff --git a/components/inkeep/markdown.tsx b/components/inkeep/markdown.tsx
new file mode 100644
index 0000000000..c61b6d0cd6
--- /dev/null
+++ b/components/inkeep/markdown.tsx
@@ -0,0 +1,124 @@
+import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import {
+ Children,
+ type ComponentProps,
+ type ReactElement,
+ type ReactNode,
+ Suspense,
+ use,
+ useDeferredValue,
+} from 'react';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { visit } from 'unist-util-visit';
+import type { ElementContent, Root, RootContent } from 'hast';
+
+export interface Processor {
+ process: (content: string) => Promise;
+}
+
+export function rehypeWrapWords() {
+ return (tree: Root) => {
+ visit(tree, ['text', 'element'], (node, index, parent) => {
+ if (node.type === 'element' && node.tagName === 'pre') return 'skip';
+ if (node.type !== 'text' || !parent || index === undefined) return;
+
+ const words = node.value.split(/(?=\s)/);
+
+ // Create new span nodes for each word and whitespace
+ const newNodes: ElementContent[] = words.flatMap((word) => {
+ if (word.length === 0) return [];
+
+ return {
+ type: 'element',
+ tagName: 'span',
+ properties: {
+ class: 'animate-fd-fade-in',
+ },
+ children: [{ type: 'text', value: word }],
+ };
+ });
+
+ Object.assign(node, {
+ type: 'element',
+ tagName: 'span',
+ properties: {},
+ children: newNodes,
+ } satisfies RootContent);
+ return 'skip';
+ });
+ };
+}
+
+function createProcessor(): Processor {
+ const processor = remark().use(remarkGfm).use(remarkRehype).use(rehypeWrapWords);
+
+ return {
+ async process(content) {
+ const nodes = processor.parse({ value: content });
+ const hast = await processor.run(nodes);
+
+ return toJsxRuntime(hast, {
+ development: false,
+ jsx,
+ jsxs,
+ Fragment,
+ components: {
+ ...defaultMdxComponents,
+ pre: Pre,
+ img: undefined, // use JSX
+ },
+ });
+ },
+ };
+}
+
+function Pre(props: ComponentProps<'pre'>) {
+ const code = Children.only(props.children) as ReactElement;
+ const codeProps = code.props as ComponentProps<'code'>;
+ const content = codeProps.children;
+ if (typeof content !== 'string') return null;
+
+ let lang =
+ codeProps.className
+ ?.split(' ')
+ .find((v) => v.startsWith('language-'))
+ ?.slice('language-'.length) ?? 'text';
+
+ if (lang === 'mdx') lang = 'md';
+
+ return {text}}>
+
+ );
+}
+
+const MAX_CACHE_SIZE = 200;
+const cache = new Map>();
+
+function Renderer({ text }: { text: string }) {
+ let result = cache.get(text);
+ if (!result) {
+ result = processor.process(text);
+ cache.set(text, result);
+ if (cache.size > MAX_CACHE_SIZE) {
+ const oldest = cache.keys().next().value;
+ if (oldest !== undefined) cache.delete(oldest);
+ }
+ }
+
+ return use(result);
+}
diff --git a/components/inkeep/search-context.tsx b/components/inkeep/search-context.tsx
new file mode 100644
index 0000000000..b669c40e4d
--- /dev/null
+++ b/components/inkeep/search-context.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import {
+ createContext,
+ type ReactNode,
+ use,
+ useMemo,
+ useState,
+} from 'react';
+import { useChat, type UseChatHelpers } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import type { InkeepUIMessage } from '@/lib/ai/inkeep-qa-schema';
+
+type AISearchContextValue = {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ chat: UseChatHelpers;
+};
+
+const Context = createContext(null);
+
+const transport = new DefaultChatTransport({ api: '/api/chat' });
+
+export function AISearch({ children }: { children: ReactNode }) {
+ const [open, setOpen] = useState(false);
+ const chat = useChat({
+ id: 'search',
+ transport,
+ });
+
+ return (
+ ({ chat, open, setOpen }), [chat, open])}>
+ {children}
+
+ );
+}
+
+export function useAISearchContext() {
+ const ctx = use(Context);
+ if (!ctx) throw new Error('useAISearchContext must be used within ');
+ return ctx;
+}
+
+export function useChatContext() {
+ return useAISearchContext().chat;
+}
+
+export function buildUserMessage(text: string) {
+ return {
+ role: 'user' as const,
+ parts: [
+ {
+ type: 'data-client' as const,
+ data: { location: location.href },
+ },
+ {
+ type: 'text' as const,
+ text,
+ },
+ ],
+ };
+}
diff --git a/components/inkeep/search-panel.tsx b/components/inkeep/search-panel.tsx
new file mode 100644
index 0000000000..fe3847b6e4
--- /dev/null
+++ b/components/inkeep/search-panel.tsx
@@ -0,0 +1,319 @@
+'use client';
+
+import {
+ type ComponentProps,
+ type SyntheticEvent,
+ useEffect,
+ useEffectEvent,
+ useRef,
+ useState,
+} from 'react';
+import { Loader2, RefreshCw, Send, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { Link } from '@/components/ui/link';
+import { AIChatEmptyState, AIChatMessage } from './ai-chat-shared';
+import { Presence } from '@radix-ui/react-presence';
+import { useAISearchContext, useChatContext, buildUserMessage } from './search-context';
+
+// ─── Header ────────────────────────────────────────────────────────────────────
+
+function AISearchPanelHeader({ className, ...props }: ComponentProps<'div'>) {
+ const { setOpen } = useAISearchContext();
+
+ return (
+
+
+
+ Ask AI
+
+
+ Powered by{' '}
+
+ Inkeep AI
+
+
+
+
+ }
+ aria-label="Close"
+ onClick={() => setOpen(false)}
+ className="mt-1 mr-1"
+ />
+
+ );
+}
+
+// ─── Input actions (retry / clear) ─────────────────────────────────────────────
+
+function AISearchInputActions() {
+ const { messages, status, setMessages, regenerate } = useChatContext();
+ const isLoading = status === 'streaming';
+
+ if (messages.length === 0) return null;
+
+ return (
+ <>
+ {!isLoading && messages.at(-1)?.role === 'assistant' && (
+ }
+ onClick={() => regenerate()}
+ >
+ Retry
+
+ )}
+
+
+ );
+}
+
+// ─── Input form ────────────────────────────────────────────────────────────────
+
+const StorageKeyInput = '__ai_search_input';
+
+function AISearchInput(props: ComponentProps<'form'>) {
+ const { status, sendMessage, stop } = useChatContext();
+ const [input, setInput] = useState(() =>
+ typeof window === 'undefined' ? '' : (localStorage.getItem(StorageKeyInput) ?? ''),
+ );
+ const isLoading = status === 'streaming' || status === 'submitted';
+
+ const wasLoadingRef = useRef(false);
+ useEffect(() => {
+ if (!isLoading && wasLoadingRef.current) {
+ document.getElementById('nd-ai-input')?.focus();
+ }
+ wasLoadingRef.current = isLoading;
+ }, [isLoading]);
+
+ const onStart = (e?: SyntheticEvent) => {
+ e?.preventDefault();
+ const message = input.trim();
+ if (message.length === 0) return;
+
+ void sendMessage(buildUserMessage(message));
+ setInput('');
+ localStorage.removeItem(StorageKeyInput);
+ };
+
+ return (
+
+ );
+}
+
+// ─── Auto-resizing textarea ────────────────────────────────────────────────────
+
+function TextareaAutoResize(props: ComponentProps<'textarea'>) {
+ const shared = cn('col-start-1 row-start-1', props.className);
+
+ return (
+
+
+
+ {`${props.value?.toString() ?? ''}\n`}
+
+
+ );
+}
+
+// ─── Scrollable message list ───────────────────────────────────────────────────
+
+function ScrollList(props: Omit, 'dir'>) {
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ if (!containerRef.current) return;
+ const container = containerRef.current;
+
+ function scrollToBottom() {
+ container.scrollTo({ top: container.scrollHeight, behavior: 'instant' });
+ }
+
+ const observer = new ResizeObserver(scrollToBottom);
+ scrollToBottom();
+
+ const child = container.firstElementChild;
+ if (child) observer.observe(child);
+
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+ {props.children}
+
+ );
+}
+
+// ─── Message list panel (empty state + messages) ───────────────────────────────
+
+function AISearchPanelList({ className, style, ...props }: ComponentProps<'div'>) {
+ const chat = useChatContext();
+ const messages = chat.messages.filter((msg) => msg.role !== 'system');
+
+ const sendExampleQuestion = (question: string) => {
+ void chat.sendMessage(buildUserMessage(question));
+ };
+
+ return (
+
+ {messages.length === 0 ? (
+
+ );
+}
+
+// ─── Hotkey handler ────────────────────────────────────────────────────────────
+
+function useHotKey() {
+ const { open, setOpen } = useAISearchContext();
+
+ const onKeyPress = useEffectEvent((e: KeyboardEvent) => {
+ if (e.key === 'Escape' && open) {
+ setOpen(false);
+ e.preventDefault();
+ }
+
+ if (e.key === '/' && (e.metaKey || e.ctrlKey) && !open) {
+ setOpen(true);
+ e.preventDefault();
+ }
+ });
+
+ useEffect(() => {
+ window.addEventListener('keydown', onKeyPress);
+ return () => window.removeEventListener('keydown', onKeyPress);
+ }, []);
+}
+
+// ─── Main panel ────────────────────────────────────────────────────────────────
+
+export function AISearchPanel() {
+ const { open, setOpen } = useAISearchContext();
+ useHotKey();
+
+ return (
+ <>
+
+ setOpen(false)}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/components/inkeep/search-trigger.tsx b/components/inkeep/search-trigger.tsx
new file mode 100644
index 0000000000..c46dacece3
--- /dev/null
+++ b/components/inkeep/search-trigger.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+import { useAISearchContext } from './search-context';
+import { Button } from '@/components/ui/button';
+
+export function AISearchTrigger({
+ position = 'default',
+ className,
+ ...props
+}: ComponentProps<'button'> & { position?: 'default' | 'float' }) {
+ const { open, setOpen } = useAISearchContext();
+
+ return (
+
+ );
+}
diff --git a/components/inkeep/search.tsx b/components/inkeep/search.tsx
new file mode 100644
index 0000000000..5d0ddd8d2a
--- /dev/null
+++ b/components/inkeep/search.tsx
@@ -0,0 +1,4 @@
+export { AISearch, useAISearchContext } from './search-context';
+export { AISearchPanel } from './search-panel';
+export { AISearchTrigger } from './search-trigger';
+export { FloatingAskAIButton } from './ask-ai-button';
diff --git a/components/inkeep/useInkeepSettings.ts b/components/inkeep/useInkeepSettings.ts
index 00c5d1d5cf..ad66104d65 100644
--- a/components/inkeep/useInkeepSettings.ts
+++ b/components/inkeep/useInkeepSettings.ts
@@ -13,7 +13,7 @@ import { useMemo } from "react";
const customAnalyticsCallback = (
event: InkeepCallbackEvent,
- posthog: PostHog
+ posthog: PostHog,
): void => {
const { componentType, conversation } = event.properties;
const messages = conversation?.messages || [];
@@ -57,19 +57,17 @@ const useInkeepSettings = (): InkeepSharedSettings => {
const baseSettings: InkeepBaseSettings = {
apiKey: process.env.NEXT_PUBLIC_INKEEP_API_KEY! || "",
- primaryBrandColor: "#E11312", // your brand color, widget color scheme is derived from this
+ primaryBrandColor: "#E11312",
organizationDisplayName: "Langfuse",
- // ...optional settings
colorMode: {
- forcedColorMode: resolvedTheme, // to sync dark mode with the widget
+ forcedColorMode: resolvedTheme,
},
onEvent: (event) => customAnalyticsCallback(event, posthog),
- transformSource: (source, type, opts) => {
- // Transform based on source type
+ transformSource: (source, type) => {
const tab = inkeepCustomTabsToSlugs.find((t) => {
const slugs = Array.isArray(t.slug) ? t.slug : [t.slug];
return slugs.some((slug) =>
- source.url.startsWith("https://langfuse.com" + slug)
+ source.url.startsWith("https://langfuse.com" + slug),
);
})?.tab;
if (type === "searchResultItem") {
@@ -83,20 +81,16 @@ const useInkeepSettings = (): InkeepSharedSettings => {
};
const modalSettings: InkeepModalSettings = {
- // optional settings
-
- // deactivate by default, only activated for search bar
shortcutKey: null,
};
const searchSettings: InkeepSearchSettings = {
- placeholder: "Search...",
+ placeholder: "Search",
tabs: inkeepCustomTabsToSlugs
.map((t) => t.tab)
.concat(["All", "GitHub"])
- // add isAlwaysVisible to current website section
.map((t) =>
- t === tabOfCurrentDocsSection ? [t, { isAlwaysVisible: true }] : t
+ t === tabOfCurrentDocsSection ? [t, { isAlwaysVisible: true }] : t,
),
};
@@ -107,29 +101,7 @@ const useInkeepSettings = (): InkeepSharedSettings => {
"This response is generated by AI and may contain inaccuracies or errors. Please reach out to support if you need assistance.",
};
- // const contactSupportCallToAction: InvokeCallbackAction = {
- // type: "invoke_callback",
- // callback: () => {
- // showChat();
- // // if (!args.conversation?.messages?.length) {
- // // showChat();
- // // return;
- // // }
-
- // // const draftMessage =
- // // "I tried to get answers via the AI chat but was unable to. My questions were:\n\n" +
- // // args.conversation.messages
- // // .filter((message) => message.role === "user")
- // // .map((message) => message.content)
- // // .join("\n");
-
- // // openChat(draftMessage);
- // },
- // shouldCloseModal: false,
- // };
-
const aiChatSettings: InkeepAIChatSettings = {
- // optional settings
chatSubjectName: "Langfuse",
aiAssistantAvatar: "/langfuse-icon.svg",
introMessage:
diff --git a/components/integrations/IntegrationIndex.tsx b/components/integrations/IntegrationIndex.tsx
index 896284b013..530aeece8a 100644
--- a/components/integrations/IntegrationIndex.tsx
+++ b/components/integrations/IntegrationIndex.tsx
@@ -219,16 +219,14 @@ export const IntegrationIndex = () => {
href={page.route}
key={page.route}
title={page.title}
- className="flex flex-row items-center justify-start gap-2"
+ className=""
icon={
(page as any).frontMatter?.logo ? (
-
-
-
+
) : (
config.icon
)
@@ -251,16 +249,14 @@ export const IntegrationIndex = () => {
href={page.route}
key={page.route}
title={page.title}
- className="flex flex-row items-center justify-start gap-2"
+ className=""
icon={
page.frontMatter?.logo ? (
-
-
-
+
) : (
config.icon
)
diff --git a/components/jp-cloud/JpCloudLogos.tsx b/components/jp-cloud/JpCloudLogos.tsx
index ec3360a38a..ec7f1cc837 100644
--- a/components/jp-cloud/JpCloudLogos.tsx
+++ b/components/jp-cloud/JpCloudLogos.tsx
@@ -7,26 +7,21 @@ import type { StaticImageData } from "next/image";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
-import canvaLight from "@/components/home/img/canva_light.png";
-import canvaDark from "@/components/home/img/canva_dark.png";
-import twilioLight from "@/components/home/img/twilio_light.svg";
-import twilioDark from "@/components/home/img/twilio_dark.svg";
-import intuitLight from "@/components/home/img/intuit_light.svg";
-import intuitDark from "@/components/home/img/intuit_dark.svg";
-import freeeLight from "@/components/home/img/freee_light.png";
-import freeeDark from "@/components/home/img/freee_dark.png";
+import canvaLogo from "@/components/home/img/canva.svg";
+import twilioLogo from "@/components/home/img/twilio.svg";
+import intuitLogo from "@/components/home/img/intuit.svg";
+import freeeLogo from "@/components/home/img/freee.svg";
type Logo = {
name: string;
- light: StaticImageData;
- dark: StaticImageData;
+ logo: StaticImageData;
};
const logos: Logo[] = [
- { name: "freee", light: freeeDark, dark: freeeLight },
- { name: "Canva", light: canvaDark, dark: canvaLight },
- { name: "Twilio", light: twilioDark, dark: twilioLight },
- { name: "Intuit", light: intuitLight, dark: intuitDark },
+ { name: "freee", logo: freeeLogo },
+ { name: "Canva", logo: canvaLogo },
+ { name: "Twilio", logo: twilioLogo },
+ { name: "Intuit", logo: intuitLogo },
];
export function JpCloudLogos() {
@@ -60,15 +55,9 @@ export function JpCloudLogos() {
className="flex items-center justify-center h-16 md:h-20 px-6 md:px-10 border border-border/50 -mr-px -mb-px bg-card"
>
-
-
+
);
}
diff --git a/components/layout/DocsContentArea.tsx b/components/layout/DocsContentArea.tsx
new file mode 100644
index 0000000000..ba91b768ae
--- /dev/null
+++ b/components/layout/DocsContentArea.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import {
+ createPatternSpotlightState,
+ disposePatternSpotlight,
+ updatePatternSpotlightTarget,
+} from "@/lib/patternSpotlight";
+import { useEffect } from "react";
+
+/**
+ * Headless component — renders nothing.
+ * Attaches a window mousemove listener, finds fumadocs' #nd-page element
+ * (the main content area between sidebar and TOC), and sets --cursor-x /
+ * --cursor-y as element-relative percentages so the pattern-bg spotlight
+ * follows the cursor only inside that column.
+ */
+export function DocsPatternTracker() {
+ useEffect(() => {
+ const spotlightState = createPatternSpotlightState();
+ const getPage = () => document.getElementById("nd-page");
+
+ const handler = (e: MouseEvent) => {
+ const page = getPage();
+ if (!page) return;
+ const rect = page.getBoundingClientRect();
+ // Only update when cursor is inside the content area
+ if (
+ e.clientX < rect.left ||
+ e.clientX > rect.right ||
+ e.clientY < rect.top ||
+ e.clientY > rect.bottom
+ )
+ return;
+ const x = ((e.clientX - rect.left) / rect.width) * 100;
+ const y = ((e.clientY - rect.top) / rect.height) * 100;
+ updatePatternSpotlightTarget(getPage, spotlightState, x, y);
+ };
+ window.addEventListener("mousemove", handler, { passive: true });
+ return () => {
+ window.removeEventListener("mousemove", handler);
+ disposePatternSpotlight(spotlightState);
+ };
+ }, []);
+
+ return null;
+}
diff --git a/components/layout/DocsSecondaryNav.tsx b/components/layout/DocsSecondaryNav.tsx
new file mode 100644
index 0000000000..6d56ca96ef
--- /dev/null
+++ b/components/layout/DocsSecondaryNav.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import {
+ Menu,
+ X,
+ ChevronRight,
+ Unplug,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { useSidebar } from "fumadocs-ui/components/sidebar/base";
+import { useTreePath } from "fumadocs-ui/contexts/tree";
+import IconBook from "@/components/icons/book";
+import IconBookBookmark from "@/components/icons/book-bookmark";
+import IconDesktopTower from "@/components/icons/desktop-tower";
+import IconCompass from "@/components/icons/compass";
+
+const SECTIONS = [
+ { title: "Docs", path: "/docs", Icon: IconBook },
+ { title: "Integrations", path: "/integrations", Icon: Unplug },
+ { title: "Self Hosting", path: "/self-hosting", Icon: IconDesktopTower },
+ { title: "Guides", path: "/guides", Icon: IconCompass },
+ { title: "AI Engineering Library", path: "/library", Icon: IconBookBookmark },
+] as const;
+
+/** Derive a human-readable page name from the last pathname segment. */
+function pageNameFromPath(pathname: string | null): string | null {
+ if (!pathname) return null;
+ const slug = pathname.split("/").filter(Boolean).pop();
+ if (!slug) return null;
+ // "get-started" → "Get Started"
+ return slug
+ .split("-")
+ .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+ .join(" ");
+}
+
+/**
+ * Mobile breadcrumb bar with hamburger to open the Fumadocs sidebar drawer.
+ */
+export function DocsSecondaryNavMobile() {
+ const pathname = usePathname();
+ const { open, setOpen } = useSidebar();
+ const treePath = useTreePath();
+
+ const activeSection = SECTIONS.find((s) => pathname?.startsWith(s.path));
+
+ // Prefer tree path for page name (gives the authored title), fall back to slug
+ const treeNode = treePath.length > 0 ? treePath[treePath.length - 1] : null;
+ const pageName =
+ (treeNode && "name" in treeNode ? treeNode.name : null) ??
+ pageNameFromPath(pathname);
+
+ // Don't show breadcrumb arrow if we're on the section root
+ const isRoot = activeSection && pathname === activeSection.path;
+
+ return (
+
+
+ {activeSection && (
+ {activeSection.title}
+ )}
+ {pageName && !isRoot && (
+ <>
+ ) {
- return null} />;
-}
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index e4cb4ebc51..9d8580d90b 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,11 +1,164 @@
-import FooterMenu from "@/components/FooterMenu";
+import { CornerBox } from "@/components/ui/corner-box";
+import { Link } from "@/components/ui/link";
+import { Text } from "@/components/ui/text";
+import IconGithub from "@/components/icons/github";
+import IconDiscord from "@/components/icons/discord";
+import IconX from "@/components/icons/x";
+import IconYoutube from "@/components/icons/youtube";
+import IconLinkedin from "@/components/icons/linkedin";
+import { cn } from "@/lib/utils";
-export function Footer() {
+const socialLinks = [
+ { name: "GitHub", href: "https://github.com/langfuse/langfuse", icon: IconGithub },
+ { name: "Discord", href: "/discord", icon: IconDiscord },
+ { name: "X", href: "https://x.com/langfuse", icon: IconX },
+ { name: "YouTube", href: "https://www.youtube.com/@langfuse", icon: IconYoutube },
+ { name: "LinkedIn", href: "https://www.linkedin.com/company/langfuse/", icon: IconLinkedin },
+];
+
+const menuItems: { heading: string; items: { name: string; href: string }[] }[] = [
+ {
+ heading: "Product",
+ items: [
+ { name: "Observability", href: "/docs/observability/overview" },
+ { name: "Prompt Management", href: "/docs/prompt-management/overview" },
+ { name: "Evaluations", href: "/docs/evaluation/overview" },
+ { name: "Metrics", href: "/docs/metrics/overview" },
+ { name: "Playground", href: "/docs/prompt-management/features/playground" },
+ { name: "Pricing", href: "/pricing" },
+ { name: "Enterprise", href: "/enterprise" },
+ ],
+ },
+ {
+ heading: "Developers",
+ items: [
+ { name: "Documentation", href: "/docs" },
+ { name: "Self-Hosting", href: "/self-hosting" },
+ { name: "SDKs", href: "/docs/observability/sdk/overview" },
+ { name: "Integrations", href: "/integrations" },
+ { name: "API Reference", href: "/docs/api-and-data-platform/overview" },
+ { name: "Status", href: "https://status.langfuse.com" },
+ { name: "Talk to Us", href: "/talk-to-us" },
+ ],
+ },
+ {
+ heading: "Resources",
+ items: [
+ { name: "Blog", href: "/blog" },
+ { name: "Changelog", href: "/changelog" },
+ { name: "Roadmap", href: "/docs/roadmap" },
+ { name: "Interactive Demo", href: "/docs/demo" },
+ { name: "Customers", href: "/users" },
+ { name: "AI Engineering Library", href: "/library" },
+ { name: "Guides & Cookbooks", href: "/guides" },
+ ],
+ },
+ {
+ heading: "Company",
+ items: [
+ { name: "About Us", href: "/about" },
+ { name: "Careers", href: "/careers" },
+ { name: "Press", href: "/press" },
+ { name: "Security", href: "/security" },
+ { name: "Support", href: "/support" },
+ { name: "Open source", href: "/handbook/chapters/open-source" },
+ ],
+ },
+];
+
+const bottomLinks = [
+ { name: "Terms", href: "/terms" },
+ { name: "Privacy", href: "/privacy" },
+ { name: "Imprint", href: "/imprint" },
+ { name: "Cookie Policy", href: "/cookie-policy" },
+];
+
+const linkClassName =
+ "text-text-tertiary transition-colors hover:text-text-primary";
+
+export function Footer({ className }: { className?: string }) {
return (
-
+
Discounts
-
-
);
diff --git a/components/home/pricing/PricingFAQ.tsx b/components/home/pricing/PricingFAQ.tsx
index cfa7e4a6f0..d8e25b9dd0 100644
--- a/components/home/pricing/PricingFAQ.tsx
+++ b/components/home/pricing/PricingFAQ.tsx
@@ -1,31 +1,31 @@
-import { Plus, Minus } from "lucide-react";
-import { Disclosure } from "@headlessui/react";
+import { Heading } from "@/components/ui/heading";
+import { FAQAccordion, type FAQItem } from "@/components/shared/FAQAccordion";
-const faqs = [
+const faqs: FAQItem[] = [
{
question: "What is the easiest way to try Langfuse?",
answer:
- "You can view the public example project or sign up for a free account to try Langfuse with your own data. The Hobby plan is completely free and does not require a credit card.",
+ "You can view the [public example project](/demo) or sign up for a [free account](https://cloud.langfuse.com) to try Langfuse with your own data. The Hobby plan is completely free and does not require a credit card.",
},
{
question: "Can I self-host Langfuse for free?",
answer:
- "Yes, Langfuse is open source and you can self-host Langfuse for free. Use docker compose to run Langfuse locally, or use one of our templates to self-host Langfuse in production on Kubernetes. Check out the self-hosting documentation to learn more.",
+ "Yes, Langfuse is open source and you can self-host Langfuse for free. Use docker compose to run Langfuse locally, or use one of our templates to self-host Langfuse in production on Kubernetes. Check out the [self-hosting documentation](/self-hosting) to learn more.",
},
{
question: "What is a billable unit?",
answer:
- "A billable unit in Langfuse is any tracing data point you send to our platform - this includes the trace (a complete application interaction), observations (individual steps within a trace: Spans, Events and Generations), and scores (evaluations of your AI outputs). For a detailed explanation and an example, see our Langfuse Billable Units docs.",
+ "A billable unit in Langfuse is any tracing data point you send to our platform — this includes the trace (a complete application interaction), observations (individual steps within a trace: Spans, Events and Generations), and scores (evaluations of your AI outputs). For a detailed explanation and an example, see our [Langfuse Billable Units docs](/docs/administration/billable-units).",
},
{
question: "How does the graduated pricing work?",
answer:
- "Our graduated pricing means you pay different rates for different volume tiers. The first 100k units are included in paid plans, then you pay $8/100k for units 100k-1M, $7/100k for 1M-10M units, $6.5/100k for 10M-50M units, and $6/100k for 50M+ units. This ensures you get better rates as you scale up your usage. Use the pricing calculator to estimate your bill.",
+ "Our graduated pricing means you pay different rates for different volume tiers. The first 100k units are included in paid plans, then you pay $8/100k for units 100k–1M, $7/100k for 1M–10M units, $6.5/100k for 10M–50M units, and $6/100k for 50M+ units. This ensures you get better rates as you scale up your usage. Use the pricing calculator to estimate your bill.",
},
{
question: "How can I reduce my Langfuse Cloud bill?",
answer:
- "The primary way to reduce your Langfuse Cloud bill is to reduce the number of billable units that you ingest. We have summarized how this can be done here. Additionally, with our new graduated pricing model, you automatically get lower rates per 100k units as your volume increases.",
+ "The primary way to reduce your Langfuse Cloud bill is to reduce the number of billable units that you ingest. We have summarized how this can be done [here](/faq/all/cutting-costs). Additionally, with our new graduated pricing model, you automatically get lower rates per 100k units as your volume increases.",
},
{
question: "When do I get billed?",
@@ -35,12 +35,12 @@ const faqs = [
{
question: "Can I set up alerts on the usage fees?",
answer:
- "Yes, you can configure spend alerts to receive email notifications when your organization's spending exceeds predefined monetary thresholds. This helps you monitor costs and take action before unexpected charges occur. Navigate to your organization settings and the Billing tab to configure spend alerts. Learn more in our spend alerts documentation.",
+ "Yes, you can configure spend alerts to receive email notifications when your organization's spending exceeds predefined monetary thresholds. This helps you monitor costs and take action before unexpected charges occur. Navigate to your organization settings and the Billing tab to configure spend alerts. Learn more in our [spend alerts documentation](/docs/administration/spend-alerts).",
},
{
question: "How can I manage my subscription?",
answer:
- "You can manage your subscription through the organization settings in Langfuse Cloud or by using this Customer Portal.",
+ "You can manage your subscription through the organization settings in Langfuse Cloud or by using this [Customer Portal](/billing-portal).",
},
{
question: "Can I redline the contracts?",
@@ -50,56 +50,24 @@ const faqs = [
{
question: "Where is the data stored?",
answer:
- "Langfuse Cloud is hosted on AWS and data is stored in the US or EU depending on your selection. See our security and privacy documentation for more details.",
+ "Langfuse Cloud is hosted on AWS and data is stored in the US or EU depending on your selection. See our [security and privacy documentation](/security) for more details.",
},
{
question: "I have security questions, where to start?",
answer:
- "We publish almost all of our security documentation and controls. Please refer to our security documentation for more details.",
+ "We publish almost all of our security documentation and controls. Please refer to our [security documentation](/security) for more details.",
},
];
export function PricingFAQ() {
return (
+
+
{discounts.map((discount) => (
-
-
-
+
{discount.name}
-
-
+
+
{discount.description}
-
+
{discount.cta && (
-
+
))}
+
-
+ ) : (
+
)}
- = {
id: "tier-self-hosted-enterprise",
href: "https://langfuse.app.n8n.cloud/form/edaa0e7f-0244-4b3e-92d6-870179e066f2",
featured: false,
- cardClassName:
- "border-[#FAFF6A] bg-[#FAFF6A12] dark:bg-[#FAFF6A14] dark:border-[#FAFF6A]",
pillClassName: "bg-[#FAFF6A] text-[#1A1A1A]",
description:
"Dedicated Langfuse deployment with enterprise capabilities and support.",
@@ -1408,9 +1407,8 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
return (
-
-
- ) : (
- <>
-
+
-
diff --git a/components/home/pricing/PricingTable.tsx b/components/home/pricing/PricingTable.tsx
index 08449f4158..66d717216e 100644
--- a/components/home/pricing/PricingTable.tsx
+++ b/components/home/pricing/PricingTable.tsx
@@ -10,9 +10,11 @@ import {
CardTitle,
} from "@/components/ui/card";
import { Check, ExternalLink, InfoIcon } from "lucide-react";
+import { CornerBox } from "@/components/ui/corner-box";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
import {
Table,
TableBody,
@@ -51,7 +53,6 @@ type Tier = {
id: string;
href: string;
featured: boolean;
- cardClassName?: string;
pillClassName?: string;
description: string;
pill?: React.ReactNode;
@@ -235,8 +236,6 @@ const tiers: Record- Frequently asked questions -
--
- {faqs.map((faq) => (
-
-
-
- - {faq.question} - - - {open ? ( - - ) : ( - - )} - - -
-
+
+
+ FAQ
+
+
{tier.calloutLink ? (
-
+
-
+
-
{tier.mainFeatures.map((feature, index) => (
@@ -1520,10 +1528,11 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
))}
-
+ (0);
+ const [headerLeft, setHeaderLeft] = useState(0);
+ const [containerLeft, setContainerLeft] = useState(0);
+ const [containerWidth, setContainerWidth] = useState(0);
const [columnWidths, setColumnWidths] = useState([]);
+ const [mounted, setMounted] = useState(false);
const tableRef = useRef(null);
const headerRef = useRef(null);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
const selectedTiers = tiers[variant];
const visibleSections = sections.filter((section) =>
section.features.some((feature) => variant in feature.tiers),
@@ -1595,13 +1612,24 @@ export function PricingTable({
useEffect(() => {
if (!isPricingPage) return;
+ const getContainer = () =>
+ document.getElementById("home-main-area") ??
+ tableRef.current?.parentElement ??
+ null;
+
const calculateWidths = () => {
if (headerRef.current && tableRef.current) {
- // Get the total width of the table
- const tableWidth = tableRef.current.getBoundingClientRect().width;
- setHeaderWidth(tableWidth);
+ const tableRect = tableRef.current.getBoundingClientRect();
+ setHeaderWidth(tableRect.width);
+ setHeaderLeft(tableRect.left);
+
+ const container = getContainer();
+ if (container) {
+ const containerRect = container.getBoundingClientRect();
+ setContainerLeft(containerRect.left);
+ setContainerWidth(containerRect.width);
+ }
- // Get the widths of each column
const headerCells = headerRef.current.querySelectorAll("th");
const widths = Array.from(headerCells).map(
(cell) => (cell as HTMLElement).getBoundingClientRect().width,
@@ -1618,9 +1646,21 @@ export function PricingTable({
if (!tableRef.current) return;
const tableRect = tableRef.current.getBoundingClientRect();
- const navbarHeight = 64; // Approximate height of the navbar
+ /** Keep aligned with `--lf-nav-primary-height` in `src/overrides.css`. */
+ const navbarHeight = 60;
+
+ // Keep the sticky header aligned with the table / container horizontal
+ // position (layout may shift if content above the table changes size).
+ setHeaderLeft(tableRect.left);
+ setHeaderWidth(tableRect.width);
+
+ const container = getContainer();
+ if (container) {
+ const containerRect = container.getBoundingClientRect();
+ setContainerLeft(containerRect.left);
+ setContainerWidth(containerRect.width);
+ }
- // Check if we're within the table's vertical bounds
const isWithinTableBounds =
tableRect.top < navbarHeight && tableRect.bottom > navbarHeight;
@@ -1660,10 +1700,7 @@ export function PricingTable({
)}
>
{selectedTiers.map((tier) => (
-
+
)}
@@ -1584,9 +1593,17 @@ export function PricingTable({
}) {
const [isHeaderFixed, setIsHeaderFixed] = useState(false);
const [headerWidth, setHeaderWidth] = useState
+ optional
+
{tier.addOn.name}
@@ -1544,14 +1553,13 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
{tier.addOn.cta && (
)}
{tier.addOn.calloutLink && (
@@ -1564,6 +1572,7 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
)}
+
+
{tier.name}
@@ -1676,7 +1713,7 @@ export function PricingTable({
{tier.name}
@@ -1676,7 +1713,7 @@ export function PricingTable({
{visibleSections.map((section) => (
-
+
- {isHeaderFixed && (
-
-
-
-
-
-
- {columnWidths.length > 0 && (
- <>
-
- {tier.name}
-
- ))}
-
- )}
-
-
-
-
-
-
- )}
+ {mounted &&
+ isHeaderFixed &&
+ columnWidths.length > 0 &&
+ createPortal(
+ 0 ? containerLeft : headerLeft,
+ width: containerWidth > 0 ? containerWidth : headerWidth,
+ }}
+ >
+ 0
+ ? Math.max(0, headerLeft - containerLeft)
+ : 0,
+ marginRight: 0,
+ }}
+ >
+
+
+
+ {tier.name}
+
+ ))}
+
+
+
+ ,
+ document.body,
+ )}
-
+
{visibleSections.map((section) => (
-
+
);
-}
+}
\ No newline at end of file
diff --git a/components/home/pricing/index.tsx b/components/home/pricing/index.tsx
index 919cd15f17..c3f7bc1a10 100644
--- a/components/home/pricing/index.tsx
+++ b/components/home/pricing/index.tsx
@@ -1,12 +1,14 @@
"use client";
import Link from "next/link";
-import { Header } from "../../Header";
-import { HomeSection } from "../components/HomeSection";
+import { HomeSection } from "../HomeSection";
import { cn } from "@/lib/utils";
import { Tabs, TabsList, TabsTrigger } from "../../ui/tabs";
import { useState } from "react";
import React from "react";
+import { Heading } from "@/components/ui/heading";
+import { Text } from "@/components/ui/text";
+import { TextHighlight } from "@/components/ui/text-highlight";
import { PricingCalculator } from "./PricingCalculator";
import { PricingFAQ } from "./PricingFAQ";
import { PricingDiscounts } from "./PricingDiscounts";
@@ -59,15 +61,23 @@ export function PricingPage({
const variant = isPricingPage ? initialVariant : localVariant;
return (
-
-
+
+
-
+ {deploymentOptions[variant].title}
+
+ {deploymentOptions[variant].subtitle}
+
{/* Deployment Options Tabs */}
{variant === "cloud" && ) {
- return (
-
- );
-}
-
-export default IconAWS;
diff --git a/components/icons/azure.tsx b/components/icons/azure.tsx
deleted file mode 100644
index 42596f75f5..0000000000
--- a/components/icons/azure.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-
-function IconAzure(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconAzure;
diff --git a/components/icons/book-bookmark.tsx b/components/icons/book-bookmark.tsx
new file mode 100644
index 0000000000..05b32f4b85
--- /dev/null
+++ b/components/icons/book-bookmark.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconBookBookmark(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconBookBookmark;
diff --git a/components/icons/book.tsx b/components/icons/book.tsx
new file mode 100644
index 0000000000..96600193ff
--- /dev/null
+++ b/components/icons/book.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+function IconBook(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconBook;
diff --git a/components/icons/compass.tsx b/components/icons/compass.tsx
new file mode 100644
index 0000000000..378d09ea22
--- /dev/null
+++ b/components/icons/compass.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+function IconCompass(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconCompass;
diff --git a/components/icons/desktop-tower.tsx b/components/icons/desktop-tower.tsx
new file mode 100644
index 0000000000..731484a7f1
--- /dev/null
+++ b/components/icons/desktop-tower.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+function IconDesktopTower(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconDesktopTower;
diff --git a/components/icons/docker.tsx b/components/icons/docker.tsx
deleted file mode 100644
index b95cd3abba..0000000000
--- a/components/icons/docker.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// icon:docker | Ant Design Icons https://ant.design/components/icon/ | Ant Design
-import * as React from "react";
-
-function IconDocker(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconDocker;
diff --git a/components/icons/error.tsx b/components/icons/error.tsx
new file mode 100644
index 0000000000..52d00078b1
--- /dev/null
+++ b/components/icons/error.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconError(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconError;
diff --git a/components/icons/gcp.tsx b/components/icons/gcp.tsx
deleted file mode 100644
index 501ff96d3e..0000000000
--- a/components/icons/gcp.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-
-function IconGCP(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconGCP;
diff --git a/components/icons/github.tsx b/components/icons/github.tsx
index ed49ddfaef..0b0cde80b6 100644
--- a/components/icons/github.tsx
+++ b/components/icons/github.tsx
@@ -4,14 +4,14 @@ import * as React from "react";
function IconGithub(props: React.SVGProps) {
return (
);
}
diff --git a/components/icons/idea.tsx b/components/icons/idea.tsx
new file mode 100644
index 0000000000..677c9aa914
--- /dev/null
+++ b/components/icons/idea.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconIdea(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconIdea;
diff --git a/components/icons/info.tsx b/components/icons/info.tsx
new file mode 100644
index 0000000000..2a5914f426
--- /dev/null
+++ b/components/icons/info.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconInfo(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconInfo;
diff --git a/components/icons/kubernetes.tsx b/components/icons/kubernetes.tsx
deleted file mode 100644
index 7ea6a2ef23..0000000000
--- a/components/icons/kubernetes.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react";
-
-function IconKubernetes(props: React.SVGProps) {
- return (
-
- );
-}
-
-export default IconKubernetes;
diff --git a/components/icons/success.tsx b/components/icons/success.tsx
new file mode 100644
index 0000000000..71cc29a9ec
--- /dev/null
+++ b/components/icons/success.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+function IconSuccess(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconSuccess;
diff --git a/components/icons/warning.tsx b/components/icons/warning.tsx
new file mode 100644
index 0000000000..d8cdda6495
--- /dev/null
+++ b/components/icons/warning.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+function IconWarning(props: React.SVGProps) {
+ return (
+
+ );
+}
+
+export default IconWarning;
diff --git a/components/icons/x.tsx b/components/icons/x.tsx
index eb7812a501..4470d5ab8b 100644
--- a/components/icons/x.tsx
+++ b/components/icons/x.tsx
@@ -1,14 +1,15 @@
function IconX(props: React.SVGProps) {
return (
);
}
diff --git a/components/inkeep/InkeepChatButton.tsx b/components/inkeep/InkeepChatButton.tsx
deleted file mode 100644
index 201be5d7e2..0000000000
--- a/components/inkeep/InkeepChatButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import type { InkeepChatButtonProps } from "@inkeep/cxkit-react";
-import useInkeepSettings from "./useInkeepSettings";
-
-const ChatButton = dynamic(
- () => import("@inkeep/cxkit-react").then((mod) => mod.InkeepChatButton),
- {
- ssr: false,
- }
-);
-
-export default function InkeepChatButton() {
- const { baseSettings, aiChatSettings, searchSettings, modalSettings } =
- useInkeepSettings();
-
- const chatButtonProps: InkeepChatButtonProps = {
- baseSettings,
- aiChatSettings,
- searchSettings,
- modalSettings,
- label: "Ask AI",
- avatar: "/langfuse-icon.svg",
- };
-
- return (
-
- = {
+ user: 'you',
+ assistant: 'langfuse',
+};
+
+type AIChatMessageProps = {
+ message: InkeepUIMessage;
+ /** Stops clicks from closing a parent overlay (e.g. search panel backdrop). */
+ captureClicks?: boolean;
+} & Omit, 'children'>;
+
+export function AIChatMessage({
+ message,
+ captureClicks,
+ className,
+ onClick,
+ ...props
+}: AIChatMessageProps) {
+ let markdown = '';
+ let links: ProvideLinksData['links'] = [];
+
+ for (const part of message.parts ?? []) {
+ if (part.type === 'text') {
+ markdown += part.text;
+ continue;
+ }
+ if (part.type === 'tool-provideLinks' && part.input) {
+ links = (part.input as ProvideLinksData).links;
+ }
+ }
+
+ return (
+ {
+ if (captureClicks) e.stopPropagation();
+ onClick?.(e);
+ }}
+ >
+
+ {roleName[message.role] ?? 'unknown'}
+
+
+ {item.title}
+ Reference {item.label}
+
+ ))}
+
+ )}
+
+ );
+}
+
+type AIChatEmptyStateProps = {
+ onPickQuestion: (question: string) => void;
+};
+
+export function AIChatEmptyState({ onPickQuestion }: AIChatEmptyStateProps) {
+ return (
+
+
+
+
+ Hi! I'm Langfuse's AI assistant trained on documentation, help articles, and other
+ content. How can I help you today?
+
+
+
+ {AI_CHAT_EXAMPLE_QUESTIONS.map((question) => (
+
+ ))}
+
+
+ );
+}
diff --git a/components/inkeep/ask-ai-button.tsx b/components/inkeep/ask-ai-button.tsx
new file mode 100644
index 0000000000..f657de2e0d
--- /dev/null
+++ b/components/inkeep/ask-ai-button.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { AISearchTrigger, useAISearchContext } from "@/components/inkeep/search";
+import { cn } from "@/lib/utils";
+
+export const AskAIButton = () => {
+ return (
+
+ Ask AI
+
+ );
+};
+
+export const FloatingAskAIButton = () => {
+ const { open } = useAISearchContext();
+
+ return (
+
+
+ Ask AI
+
+
+ );
+};
diff --git a/components/inkeep/embedded-chat.tsx b/components/inkeep/embedded-chat.tsx
new file mode 100644
index 0000000000..50e320ea3a
--- /dev/null
+++ b/components/inkeep/embedded-chat.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import {
+ type ComponentProps,
+ type SyntheticEvent,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { Loader2, RefreshCw, Send } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { Link } from '@/components/ui/link';
+import { AIChatEmptyState, AIChatMessage } from './ai-chat-shared';
+import { useChatContext, buildUserMessage } from './search-context';
+
+function EmbeddedTextarea(props: ComponentProps<'textarea'>) {
+ const shared = cn('col-start-1 row-start-1', props.className);
+
+ return (
+
+
+
+ {`${props.value?.toString() ?? ''}\n`}
+
+
+ );
+}
+
+export function EmbeddedAIChat() {
+ const chat = useChatContext();
+ const messages = chat.messages.filter((msg) => msg.role !== 'system');
+ const isLoading = chat.status === 'streaming' || chat.status === 'submitted';
+ const isStreaming = chat.status === 'streaming';
+
+ const [input, setInput] = useState('');
+ const scrollRef = useRef(null);
+
+ useEffect(() => {
+ if (!scrollRef.current) return;
+ const container = scrollRef.current;
+
+ function scrollToBottom() {
+ container.scrollTo({ top: container.scrollHeight, behavior: 'auto' });
+ }
+
+ const observer = new ResizeObserver(scrollToBottom);
+ scrollToBottom();
+
+ const child = container.firstElementChild;
+ if (child) observer.observe(child);
+
+ return () => observer.disconnect();
+ }, []);
+
+ const onSubmit = (e?: SyntheticEvent) => {
+ e?.preventDefault();
+ const message = input.trim();
+ if (message.length === 0) return;
+
+ void chat.sendMessage(buildUserMessage(message));
+ setInput('');
+ };
+
+ return (
+
+
+
+
+ Ask AI
+
+
+ — Powered by{' '}
+
+ Inkeep AI
+
+
+
+
+
+ {messages.length === 0 ? (
+ {
+ void chat.sendMessage(buildUserMessage(question));
+ }}
+ />
+ ) : (
+
+ {messages.map((item) => (
+
+
+
+
+ {messages.length > 0 && (
+
+ {!isStreaming && messages.at(-1)?.role === 'assistant' && (
+ }
+ onClick={() => chat.regenerate()}
+ >
+ Retry
+
+ )}
+
+
+ )}
+
+
+ );
+}
diff --git a/components/inkeep/markdown.tsx b/components/inkeep/markdown.tsx
new file mode 100644
index 0000000000..c61b6d0cd6
--- /dev/null
+++ b/components/inkeep/markdown.tsx
@@ -0,0 +1,124 @@
+import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import {
+ Children,
+ type ComponentProps,
+ type ReactElement,
+ type ReactNode,
+ Suspense,
+ use,
+ useDeferredValue,
+} from 'react';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { visit } from 'unist-util-visit';
+import type { ElementContent, Root, RootContent } from 'hast';
+
+export interface Processor {
+ process: (content: string) => Promise;
+}
+
+export function rehypeWrapWords() {
+ return (tree: Root) => {
+ visit(tree, ['text', 'element'], (node, index, parent) => {
+ if (node.type === 'element' && node.tagName === 'pre') return 'skip';
+ if (node.type !== 'text' || !parent || index === undefined) return;
+
+ const words = node.value.split(/(?=\s)/);
+
+ // Create new span nodes for each word and whitespace
+ const newNodes: ElementContent[] = words.flatMap((word) => {
+ if (word.length === 0) return [];
+
+ return {
+ type: 'element',
+ tagName: 'span',
+ properties: {
+ class: 'animate-fd-fade-in',
+ },
+ children: [{ type: 'text', value: word }],
+ };
+ });
+
+ Object.assign(node, {
+ type: 'element',
+ tagName: 'span',
+ properties: {},
+ children: newNodes,
+ } satisfies RootContent);
+ return 'skip';
+ });
+ };
+}
+
+function createProcessor(): Processor {
+ const processor = remark().use(remarkGfm).use(remarkRehype).use(rehypeWrapWords);
+
+ return {
+ async process(content) {
+ const nodes = processor.parse({ value: content });
+ const hast = await processor.run(nodes);
+
+ return toJsxRuntime(hast, {
+ development: false,
+ jsx,
+ jsxs,
+ Fragment,
+ components: {
+ ...defaultMdxComponents,
+ pre: Pre,
+ img: undefined, // use JSX
+ },
+ });
+ },
+ };
+}
+
+function Pre(props: ComponentProps<'pre'>) {
+ const code = Children.only(props.children) as ReactElement;
+ const codeProps = code.props as ComponentProps<'code'>;
+ const content = codeProps.children;
+ if (typeof content !== 'string') return null;
+
+ let lang =
+ codeProps.className
+ ?.split(' ')
+ .find((v) => v.startsWith('language-'))
+ ?.slice('language-'.length) ?? 'text';
+
+ if (lang === 'mdx') lang = 'md';
+
+ return {text}}>
+
+ );
+}
+
+const MAX_CACHE_SIZE = 200;
+const cache = new Map>();
+
+function Renderer({ text }: { text: string }) {
+ let result = cache.get(text);
+ if (!result) {
+ result = processor.process(text);
+ cache.set(text, result);
+ if (cache.size > MAX_CACHE_SIZE) {
+ const oldest = cache.keys().next().value;
+ if (oldest !== undefined) cache.delete(oldest);
+ }
+ }
+
+ return use(result);
+}
diff --git a/components/inkeep/search-context.tsx b/components/inkeep/search-context.tsx
new file mode 100644
index 0000000000..b669c40e4d
--- /dev/null
+++ b/components/inkeep/search-context.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import {
+ createContext,
+ type ReactNode,
+ use,
+ useMemo,
+ useState,
+} from 'react';
+import { useChat, type UseChatHelpers } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import type { InkeepUIMessage } from '@/lib/ai/inkeep-qa-schema';
+
+type AISearchContextValue = {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ chat: UseChatHelpers;
+};
+
+const Context = createContext(null);
+
+const transport = new DefaultChatTransport({ api: '/api/chat' });
+
+export function AISearch({ children }: { children: ReactNode }) {
+ const [open, setOpen] = useState(false);
+ const chat = useChat({
+ id: 'search',
+ transport,
+ });
+
+ return (
+ ({ chat, open, setOpen }), [chat, open])}>
+ {children}
+
+ );
+}
+
+export function useAISearchContext() {
+ const ctx = use(Context);
+ if (!ctx) throw new Error('useAISearchContext must be used within ');
+ return ctx;
+}
+
+export function useChatContext() {
+ return useAISearchContext().chat;
+}
+
+export function buildUserMessage(text: string) {
+ return {
+ role: 'user' as const,
+ parts: [
+ {
+ type: 'data-client' as const,
+ data: { location: location.href },
+ },
+ {
+ type: 'text' as const,
+ text,
+ },
+ ],
+ };
+}
diff --git a/components/inkeep/search-panel.tsx b/components/inkeep/search-panel.tsx
new file mode 100644
index 0000000000..fe3847b6e4
--- /dev/null
+++ b/components/inkeep/search-panel.tsx
@@ -0,0 +1,319 @@
+'use client';
+
+import {
+ type ComponentProps,
+ type SyntheticEvent,
+ useEffect,
+ useEffectEvent,
+ useRef,
+ useState,
+} from 'react';
+import { Loader2, RefreshCw, Send, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { Link } from '@/components/ui/link';
+import { AIChatEmptyState, AIChatMessage } from './ai-chat-shared';
+import { Presence } from '@radix-ui/react-presence';
+import { useAISearchContext, useChatContext, buildUserMessage } from './search-context';
+
+// ─── Header ────────────────────────────────────────────────────────────────────
+
+function AISearchPanelHeader({ className, ...props }: ComponentProps<'div'>) {
+ const { setOpen } = useAISearchContext();
+
+ return (
+
+
+
+ Ask AI
+
+
+ Powered by{' '}
+
+ Inkeep AI
+
+
+
+
+ }
+ aria-label="Close"
+ onClick={() => setOpen(false)}
+ className="mt-1 mr-1"
+ />
+
+ );
+}
+
+// ─── Input actions (retry / clear) ─────────────────────────────────────────────
+
+function AISearchInputActions() {
+ const { messages, status, setMessages, regenerate } = useChatContext();
+ const isLoading = status === 'streaming';
+
+ if (messages.length === 0) return null;
+
+ return (
+ <>
+ {!isLoading && messages.at(-1)?.role === 'assistant' && (
+ }
+ onClick={() => regenerate()}
+ >
+ Retry
+
+ )}
+
+
+ );
+}
+
+// ─── Input form ────────────────────────────────────────────────────────────────
+
+const StorageKeyInput = '__ai_search_input';
+
+function AISearchInput(props: ComponentProps<'form'>) {
+ const { status, sendMessage, stop } = useChatContext();
+ const [input, setInput] = useState(() =>
+ typeof window === 'undefined' ? '' : (localStorage.getItem(StorageKeyInput) ?? ''),
+ );
+ const isLoading = status === 'streaming' || status === 'submitted';
+
+ const wasLoadingRef = useRef(false);
+ useEffect(() => {
+ if (!isLoading && wasLoadingRef.current) {
+ document.getElementById('nd-ai-input')?.focus();
+ }
+ wasLoadingRef.current = isLoading;
+ }, [isLoading]);
+
+ const onStart = (e?: SyntheticEvent) => {
+ e?.preventDefault();
+ const message = input.trim();
+ if (message.length === 0) return;
+
+ void sendMessage(buildUserMessage(message));
+ setInput('');
+ localStorage.removeItem(StorageKeyInput);
+ };
+
+ return (
+
+ );
+}
+
+// ─── Auto-resizing textarea ────────────────────────────────────────────────────
+
+function TextareaAutoResize(props: ComponentProps<'textarea'>) {
+ const shared = cn('col-start-1 row-start-1', props.className);
+
+ return (
+
+
+
+ {`${props.value?.toString() ?? ''}\n`}
+
+
+ );
+}
+
+// ─── Scrollable message list ───────────────────────────────────────────────────
+
+function ScrollList(props: Omit, 'dir'>) {
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ if (!containerRef.current) return;
+ const container = containerRef.current;
+
+ function scrollToBottom() {
+ container.scrollTo({ top: container.scrollHeight, behavior: 'instant' });
+ }
+
+ const observer = new ResizeObserver(scrollToBottom);
+ scrollToBottom();
+
+ const child = container.firstElementChild;
+ if (child) observer.observe(child);
+
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+ {props.children}
+
+ );
+}
+
+// ─── Message list panel (empty state + messages) ───────────────────────────────
+
+function AISearchPanelList({ className, style, ...props }: ComponentProps<'div'>) {
+ const chat = useChatContext();
+ const messages = chat.messages.filter((msg) => msg.role !== 'system');
+
+ const sendExampleQuestion = (question: string) => {
+ void chat.sendMessage(buildUserMessage(question));
+ };
+
+ return (
+
+ {messages.length === 0 ? (
+
+ );
+}
+
+// ─── Hotkey handler ────────────────────────────────────────────────────────────
+
+function useHotKey() {
+ const { open, setOpen } = useAISearchContext();
+
+ const onKeyPress = useEffectEvent((e: KeyboardEvent) => {
+ if (e.key === 'Escape' && open) {
+ setOpen(false);
+ e.preventDefault();
+ }
+
+ if (e.key === '/' && (e.metaKey || e.ctrlKey) && !open) {
+ setOpen(true);
+ e.preventDefault();
+ }
+ });
+
+ useEffect(() => {
+ window.addEventListener('keydown', onKeyPress);
+ return () => window.removeEventListener('keydown', onKeyPress);
+ }, []);
+}
+
+// ─── Main panel ────────────────────────────────────────────────────────────────
+
+export function AISearchPanel() {
+ const { open, setOpen } = useAISearchContext();
+ useHotKey();
+
+ return (
+ <>
+
+ setOpen(false)}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/components/inkeep/search-trigger.tsx b/components/inkeep/search-trigger.tsx
new file mode 100644
index 0000000000..c46dacece3
--- /dev/null
+++ b/components/inkeep/search-trigger.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+import { useAISearchContext } from './search-context';
+import { Button } from '@/components/ui/button';
+
+export function AISearchTrigger({
+ position = 'default',
+ className,
+ ...props
+}: ComponentProps<'button'> & { position?: 'default' | 'float' }) {
+ const { open, setOpen } = useAISearchContext();
+
+ return (
+
+ );
+}
diff --git a/components/inkeep/search.tsx b/components/inkeep/search.tsx
new file mode 100644
index 0000000000..5d0ddd8d2a
--- /dev/null
+++ b/components/inkeep/search.tsx
@@ -0,0 +1,4 @@
+export { AISearch, useAISearchContext } from './search-context';
+export { AISearchPanel } from './search-panel';
+export { AISearchTrigger } from './search-trigger';
+export { FloatingAskAIButton } from './ask-ai-button';
diff --git a/components/inkeep/useInkeepSettings.ts b/components/inkeep/useInkeepSettings.ts
index 00c5d1d5cf..ad66104d65 100644
--- a/components/inkeep/useInkeepSettings.ts
+++ b/components/inkeep/useInkeepSettings.ts
@@ -13,7 +13,7 @@ import { useMemo } from "react";
const customAnalyticsCallback = (
event: InkeepCallbackEvent,
- posthog: PostHog
+ posthog: PostHog,
): void => {
const { componentType, conversation } = event.properties;
const messages = conversation?.messages || [];
@@ -57,19 +57,17 @@ const useInkeepSettings = (): InkeepSharedSettings => {
const baseSettings: InkeepBaseSettings = {
apiKey: process.env.NEXT_PUBLIC_INKEEP_API_KEY! || "",
- primaryBrandColor: "#E11312", // your brand color, widget color scheme is derived from this
+ primaryBrandColor: "#E11312",
organizationDisplayName: "Langfuse",
- // ...optional settings
colorMode: {
- forcedColorMode: resolvedTheme, // to sync dark mode with the widget
+ forcedColorMode: resolvedTheme,
},
onEvent: (event) => customAnalyticsCallback(event, posthog),
- transformSource: (source, type, opts) => {
- // Transform based on source type
+ transformSource: (source, type) => {
const tab = inkeepCustomTabsToSlugs.find((t) => {
const slugs = Array.isArray(t.slug) ? t.slug : [t.slug];
return slugs.some((slug) =>
- source.url.startsWith("https://langfuse.com" + slug)
+ source.url.startsWith("https://langfuse.com" + slug),
);
})?.tab;
if (type === "searchResultItem") {
@@ -83,20 +81,16 @@ const useInkeepSettings = (): InkeepSharedSettings => {
};
const modalSettings: InkeepModalSettings = {
- // optional settings
-
- // deactivate by default, only activated for search bar
shortcutKey: null,
};
const searchSettings: InkeepSearchSettings = {
- placeholder: "Search...",
+ placeholder: "Search",
tabs: inkeepCustomTabsToSlugs
.map((t) => t.tab)
.concat(["All", "GitHub"])
- // add isAlwaysVisible to current website section
.map((t) =>
- t === tabOfCurrentDocsSection ? [t, { isAlwaysVisible: true }] : t
+ t === tabOfCurrentDocsSection ? [t, { isAlwaysVisible: true }] : t,
),
};
@@ -107,29 +101,7 @@ const useInkeepSettings = (): InkeepSharedSettings => {
"This response is generated by AI and may contain inaccuracies or errors. Please reach out to support if you need assistance.",
};
- // const contactSupportCallToAction: InvokeCallbackAction = {
- // type: "invoke_callback",
- // callback: () => {
- // showChat();
- // // if (!args.conversation?.messages?.length) {
- // // showChat();
- // // return;
- // // }
-
- // // const draftMessage =
- // // "I tried to get answers via the AI chat but was unable to. My questions were:\n\n" +
- // // args.conversation.messages
- // // .filter((message) => message.role === "user")
- // // .map((message) => message.content)
- // // .join("\n");
-
- // // openChat(draftMessage);
- // },
- // shouldCloseModal: false,
- // };
-
const aiChatSettings: InkeepAIChatSettings = {
- // optional settings
chatSubjectName: "Langfuse",
aiAssistantAvatar: "/langfuse-icon.svg",
introMessage:
diff --git a/components/integrations/IntegrationIndex.tsx b/components/integrations/IntegrationIndex.tsx
index 896284b013..530aeece8a 100644
--- a/components/integrations/IntegrationIndex.tsx
+++ b/components/integrations/IntegrationIndex.tsx
@@ -219,16 +219,14 @@ export const IntegrationIndex = () => {
href={page.route}
key={page.route}
title={page.title}
- className="flex flex-row items-center justify-start gap-2"
+ className=""
icon={
(page as any).frontMatter?.logo ? (
-
-
-
+
) : (
config.icon
)
@@ -251,16 +249,14 @@ export const IntegrationIndex = () => {
href={page.route}
key={page.route}
title={page.title}
- className="flex flex-row items-center justify-start gap-2"
+ className=""
icon={
page.frontMatter?.logo ? (
-
-
-
+
) : (
config.icon
)
diff --git a/components/jp-cloud/JpCloudLogos.tsx b/components/jp-cloud/JpCloudLogos.tsx
index ec3360a38a..ec7f1cc837 100644
--- a/components/jp-cloud/JpCloudLogos.tsx
+++ b/components/jp-cloud/JpCloudLogos.tsx
@@ -7,26 +7,21 @@ import type { StaticImageData } from "next/image";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
-import canvaLight from "@/components/home/img/canva_light.png";
-import canvaDark from "@/components/home/img/canva_dark.png";
-import twilioLight from "@/components/home/img/twilio_light.svg";
-import twilioDark from "@/components/home/img/twilio_dark.svg";
-import intuitLight from "@/components/home/img/intuit_light.svg";
-import intuitDark from "@/components/home/img/intuit_dark.svg";
-import freeeLight from "@/components/home/img/freee_light.png";
-import freeeDark from "@/components/home/img/freee_dark.png";
+import canvaLogo from "@/components/home/img/canva.svg";
+import twilioLogo from "@/components/home/img/twilio.svg";
+import intuitLogo from "@/components/home/img/intuit.svg";
+import freeeLogo from "@/components/home/img/freee.svg";
type Logo = {
name: string;
- light: StaticImageData;
- dark: StaticImageData;
+ logo: StaticImageData;
};
const logos: Logo[] = [
- { name: "freee", light: freeeDark, dark: freeeLight },
- { name: "Canva", light: canvaDark, dark: canvaLight },
- { name: "Twilio", light: twilioDark, dark: twilioLight },
- { name: "Intuit", light: intuitLight, dark: intuitDark },
+ { name: "freee", logo: freeeLogo },
+ { name: "Canva", logo: canvaLogo },
+ { name: "Twilio", logo: twilioLogo },
+ { name: "Intuit", logo: intuitLogo },
];
export function JpCloudLogos() {
@@ -60,15 +55,9 @@ export function JpCloudLogos() {
className="flex items-center justify-center h-16 md:h-20 px-6 md:px-10 border border-border/50 -mr-px -mb-px bg-card"
>
-
-
+
);
}
diff --git a/components/layout/DocsContentArea.tsx b/components/layout/DocsContentArea.tsx
new file mode 100644
index 0000000000..ba91b768ae
--- /dev/null
+++ b/components/layout/DocsContentArea.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import {
+ createPatternSpotlightState,
+ disposePatternSpotlight,
+ updatePatternSpotlightTarget,
+} from "@/lib/patternSpotlight";
+import { useEffect } from "react";
+
+/**
+ * Headless component — renders nothing.
+ * Attaches a window mousemove listener, finds fumadocs' #nd-page element
+ * (the main content area between sidebar and TOC), and sets --cursor-x /
+ * --cursor-y as element-relative percentages so the pattern-bg spotlight
+ * follows the cursor only inside that column.
+ */
+export function DocsPatternTracker() {
+ useEffect(() => {
+ const spotlightState = createPatternSpotlightState();
+ const getPage = () => document.getElementById("nd-page");
+
+ const handler = (e: MouseEvent) => {
+ const page = getPage();
+ if (!page) return;
+ const rect = page.getBoundingClientRect();
+ // Only update when cursor is inside the content area
+ if (
+ e.clientX < rect.left ||
+ e.clientX > rect.right ||
+ e.clientY < rect.top ||
+ e.clientY > rect.bottom
+ )
+ return;
+ const x = ((e.clientX - rect.left) / rect.width) * 100;
+ const y = ((e.clientY - rect.top) / rect.height) * 100;
+ updatePatternSpotlightTarget(getPage, spotlightState, x, y);
+ };
+ window.addEventListener("mousemove", handler, { passive: true });
+ return () => {
+ window.removeEventListener("mousemove", handler);
+ disposePatternSpotlight(spotlightState);
+ };
+ }, []);
+
+ return null;
+}
diff --git a/components/layout/DocsSecondaryNav.tsx b/components/layout/DocsSecondaryNav.tsx
new file mode 100644
index 0000000000..6d56ca96ef
--- /dev/null
+++ b/components/layout/DocsSecondaryNav.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import {
+ Menu,
+ X,
+ ChevronRight,
+ Unplug,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { useSidebar } from "fumadocs-ui/components/sidebar/base";
+import { useTreePath } from "fumadocs-ui/contexts/tree";
+import IconBook from "@/components/icons/book";
+import IconBookBookmark from "@/components/icons/book-bookmark";
+import IconDesktopTower from "@/components/icons/desktop-tower";
+import IconCompass from "@/components/icons/compass";
+
+const SECTIONS = [
+ { title: "Docs", path: "/docs", Icon: IconBook },
+ { title: "Integrations", path: "/integrations", Icon: Unplug },
+ { title: "Self Hosting", path: "/self-hosting", Icon: IconDesktopTower },
+ { title: "Guides", path: "/guides", Icon: IconCompass },
+ { title: "AI Engineering Library", path: "/library", Icon: IconBookBookmark },
+] as const;
+
+/** Derive a human-readable page name from the last pathname segment. */
+function pageNameFromPath(pathname: string | null): string | null {
+ if (!pathname) return null;
+ const slug = pathname.split("/").filter(Boolean).pop();
+ if (!slug) return null;
+ // "get-started" → "Get Started"
+ return slug
+ .split("-")
+ .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+ .join(" ");
+}
+
+/**
+ * Mobile breadcrumb bar with hamburger to open the Fumadocs sidebar drawer.
+ */
+export function DocsSecondaryNavMobile() {
+ const pathname = usePathname();
+ const { open, setOpen } = useSidebar();
+ const treePath = useTreePath();
+
+ const activeSection = SECTIONS.find((s) => pathname?.startsWith(s.path));
+
+ // Prefer tree path for page name (gives the authored title), fall back to slug
+ const treeNode = treePath.length > 0 ? treePath[treePath.length - 1] : null;
+ const pageName =
+ (treeNode && "name" in treeNode ? treeNode.name : null) ??
+ pageNameFromPath(pathname);
+
+ // Don't show breadcrumb arrow if we're on the section root
+ const isRoot = activeSection && pathname === activeSection.path;
+
+ return (
+
+
+ {activeSection && (
+ {activeSection.title}
+ )}
+ {pageName && !isRoot && (
+ <>
+ ) {
- return null} />;
-}
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index e4cb4ebc51..9d8580d90b 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,11 +1,164 @@
-import FooterMenu from "@/components/FooterMenu";
+import { CornerBox } from "@/components/ui/corner-box";
+import { Link } from "@/components/ui/link";
+import { Text } from "@/components/ui/text";
+import IconGithub from "@/components/icons/github";
+import IconDiscord from "@/components/icons/discord";
+import IconX from "@/components/icons/x";
+import IconYoutube from "@/components/icons/youtube";
+import IconLinkedin from "@/components/icons/linkedin";
+import { cn } from "@/lib/utils";
-export function Footer() {
+const socialLinks = [
+ { name: "GitHub", href: "https://github.com/langfuse/langfuse", icon: IconGithub },
+ { name: "Discord", href: "/discord", icon: IconDiscord },
+ { name: "X", href: "https://x.com/langfuse", icon: IconX },
+ { name: "YouTube", href: "https://www.youtube.com/@langfuse", icon: IconYoutube },
+ { name: "LinkedIn", href: "https://www.linkedin.com/company/langfuse/", icon: IconLinkedin },
+];
+
+const menuItems: { heading: string; items: { name: string; href: string }[] }[] = [
+ {
+ heading: "Product",
+ items: [
+ { name: "Observability", href: "/docs/observability/overview" },
+ { name: "Prompt Management", href: "/docs/prompt-management/overview" },
+ { name: "Evaluations", href: "/docs/evaluation/overview" },
+ { name: "Metrics", href: "/docs/metrics/overview" },
+ { name: "Playground", href: "/docs/prompt-management/features/playground" },
+ { name: "Pricing", href: "/pricing" },
+ { name: "Enterprise", href: "/enterprise" },
+ ],
+ },
+ {
+ heading: "Developers",
+ items: [
+ { name: "Documentation", href: "/docs" },
+ { name: "Self-Hosting", href: "/self-hosting" },
+ { name: "SDKs", href: "/docs/observability/sdk/overview" },
+ { name: "Integrations", href: "/integrations" },
+ { name: "API Reference", href: "/docs/api-and-data-platform/overview" },
+ { name: "Status", href: "https://status.langfuse.com" },
+ { name: "Talk to Us", href: "/talk-to-us" },
+ ],
+ },
+ {
+ heading: "Resources",
+ items: [
+ { name: "Blog", href: "/blog" },
+ { name: "Changelog", href: "/changelog" },
+ { name: "Roadmap", href: "/docs/roadmap" },
+ { name: "Interactive Demo", href: "/docs/demo" },
+ { name: "Customers", href: "/users" },
+ { name: "AI Engineering Library", href: "/library" },
+ { name: "Guides & Cookbooks", href: "/guides" },
+ ],
+ },
+ {
+ heading: "Company",
+ items: [
+ { name: "About Us", href: "/about" },
+ { name: "Careers", href: "/careers" },
+ { name: "Press", href: "/press" },
+ { name: "Security", href: "/security" },
+ { name: "Support", href: "/support" },
+ { name: "Open source", href: "/handbook/chapters/open-source" },
+ ],
+ },
+];
+
+const bottomLinks = [
+ { name: "Terms", href: "/terms" },
+ { name: "Privacy", href: "/privacy" },
+ { name: "Imprint", href: "/imprint" },
+ { name: "Cookie Policy", href: "/cookie-policy" },
+];
+
+const linkClassName =
+ "text-text-tertiary transition-colors hover:text-text-primary";
+
+export function Footer({ className }: { className?: string }) {
return (
-
-
- )}
+ {mounted &&
+ isHeaderFixed &&
+ columnWidths.length > 0 &&
+ createPortal(
+
-
-
-
-
-
-
- | - {selectedTiers.map((tier, index) => ( - | - {tier.name} - | - ))} - - )} -
|---|
0 ? containerLeft : headerLeft,
+ width: containerWidth > 0 ? containerWidth : headerWidth,
+ }}
+ >
+ 0
+ ? Math.max(0, headerLeft - containerLeft)
+ : 0,
+ marginRight: 0,
+ }}
+ >
+
+
+
,
+ document.body,
+ )}
| + {selectedTiers.map((tier, index) => ( + | + {tier.name} + | + ))} +
|---|
|
{visibleSections.map((section) => (
+
-
+
{/* Deployment Options Tabs */}
{variant === "cloud" &&
-
- );
-}
diff --git a/components/inkeep/InkeepCustomTrigger.tsx b/components/inkeep/InkeepCustomTrigger.tsx
deleted file mode 100644
index 9049010741..0000000000
--- a/components/inkeep/InkeepCustomTrigger.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { useEffect, useState } from "react";
-import useInkeepSettings from "./useInkeepSettings";
-import type { InkeepModalSearchAndChatProps } from "@inkeep/cxkit-react";
-
-export default function InkeepCustomTrigger() {
- const [isOpen, setIsOpen] = useState(false);
- const [CustomTrigger, setCustomTrigger] =
- useState<(e: InkeepModalSearchAndChatProps) => React.ReactElement>();
-
- const { baseSettings, aiChatSettings, searchSettings, modalSettings } =
- useInkeepSettings();
-
- // Handle keyboard shortcuts
- useEffect(() => {
- const handleKeyDown = (event: KeyboardEvent) => {
- const isMac = navigator.platform.toLowerCase().includes("mac");
- const modifier = isMac ? event.metaKey : event.ctrlKey;
-
- if (modifier && event.key.toLowerCase() === "k") {
- event.preventDefault();
- setIsOpen(true);
- }
- };
-
- document.addEventListener("keydown", handleKeyDown);
- return () => document.removeEventListener("keydown", handleKeyDown);
- }, []);
-
- // load the library asynchronously
- useEffect(() => {
- const loadCustomTrigger = async () => {
- try {
- const { InkeepModalSearchAndChat } = await import("@inkeep/cxkit-react");
- setCustomTrigger(() => InkeepModalSearchAndChat);
- } catch (error) {
- console.error("Failed to load CustomTrigger:", error);
- }
- };
-
- loadCustomTrigger();
- }, []);
-
- const customTriggerProps: InkeepModalSearchAndChatProps = {
- baseSettings,
- aiChatSettings,
- searchSettings,
- modalSettings: {
- ...modalSettings,
- isOpen,
- onOpenChange: setIsOpen,
- },
- };
-
- return (
-
-
- );
-}
diff --git a/components/inkeep/InkeepEmbeddedChat.tsx b/components/inkeep/InkeepEmbeddedChat.tsx
deleted file mode 100644
index f4bfed9270..0000000000
--- a/components/inkeep/InkeepEmbeddedChat.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import type { InkeepEmbeddedChatProps } from "@inkeep/cxkit-react";
-import useInkeepSettings from "./useInkeepSettings";
-
-const EmbeddedChat = dynamic(
- () => import("@inkeep/cxkit-react").then((mod) => mod.InkeepEmbeddedChat),
- {
- ssr: false,
- loading: () => setIsOpen(true)}
- className="relative flex items-center text-gray-900 dark:text-gray-300 contrast-more:text-gray-800 contrast-more:dark:text-gray-300 max-md:hidden hover:ring-2 hover:ring-gray-300 dark:hover:ring-gray-700 rounded-lg"
- >
-
- {CustomTrigger &&
- Search or ask...
-
-
- ⌘K
-
- loading... , // optional: loading animation component
- }
-);
-
-const css = String.raw;
-
-function InkeepEmbeddedChat() {
- const { baseSettings, aiChatSettings } = useInkeepSettings();
-
- const embeddedChatProps: InkeepEmbeddedChatProps = {
- baseSettings: {
- ...baseSettings,
- theme: {
- styles: [
- {
- key: '1',
- type: 'style',
- value: css`
- .ikp-ai-chat-wrapper {
- width: 100%;
- height: auto;
- max-height: 100%;
- }
- `,
- },
- ],
- },
- },
- aiChatSettings,
- };
-
- return
-
+
- );
+ )
}
diff --git a/components/inkeep/ai-chat-shared.tsx b/components/inkeep/ai-chat-shared.tsx
new file mode 100644
index 0000000000..e5d5074204
--- /dev/null
+++ b/components/inkeep/ai-chat-shared.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import type { ComponentProps } from 'react';
+import { cn } from '@/lib/utils';
+import { Text } from '@/components/ui/text';
+import { Link } from '@/components/ui/link';
+import type { InkeepUIMessage, ProvideLinksData } from '@/lib/ai/inkeep-qa-schema';
+import { Markdown } from './markdown';
+
+export const AI_CHAT_EXAMPLE_QUESTIONS = [
+ 'How can Langfuse help me?',
+ 'How to use the Python decorator for tracing?',
+ 'How to set up LLM-as-a-judge evals?',
+] as const;
+
+const roleName: Record
+
{
+ if (captureClicks) e.stopPropagation();
+ onClick?.(e);
+ }}
+ >
+
+ );
+}
+
+type AIChatEmptyStateProps = {
+ onPickQuestion: (question: string) => void;
+};
+
+export function AIChatEmptyState({ onPickQuestion }: AIChatEmptyStateProps) {
+ return (
+ + {roleName[message.role] ?? 'unknown'} + +
+
+ {links && links.length > 0 && (
+
+ {links.map((item, i) => (
+
+
+ )}
+ {item.title} +Reference {item.label} + + ))} +
+
+ );
+}
diff --git a/components/inkeep/ask-ai-button.tsx b/components/inkeep/ask-ai-button.tsx
new file mode 100644
index 0000000000..f657de2e0d
--- /dev/null
+++ b/components/inkeep/ask-ai-button.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { AISearchTrigger, useAISearchContext } from "@/components/inkeep/search";
+import { cn } from "@/lib/utils";
+
+export const AskAIButton = () => {
+ return (
+
+
+
+
+ {AI_CHAT_EXAMPLE_QUESTIONS.map((question) => (
+
+ ))}
+
+
+
+ );
+};
diff --git a/components/inkeep/embedded-chat.tsx b/components/inkeep/embedded-chat.tsx
new file mode 100644
index 0000000000..50e320ea3a
--- /dev/null
+++ b/components/inkeep/embedded-chat.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import {
+ type ComponentProps,
+ type SyntheticEvent,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { Loader2, RefreshCw, Send } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { Link } from '@/components/ui/link';
+import { AIChatEmptyState, AIChatMessage } from './ai-chat-shared';
+import { useChatContext, buildUserMessage } from './search-context';
+
+function EmbeddedTextarea(props: ComponentProps<'textarea'>) {
+ const shared = cn('col-start-1 row-start-1', props.className);
+
+ return (
+
+
+
+ );
+}
+
+export function EmbeddedAIChat() {
+ const chat = useChatContext();
+ const messages = chat.messages.filter((msg) => msg.role !== 'system');
+ const isLoading = chat.status === 'streaming' || chat.status === 'submitted';
+ const isStreaming = chat.status === 'streaming';
+
+ const [input, setInput] = useState('');
+ const scrollRef = useRef
+ {`${props.value?.toString() ?? ''}\n`}
+
+
+
+ );
+}
diff --git a/components/inkeep/markdown.tsx b/components/inkeep/markdown.tsx
new file mode 100644
index 0000000000..c61b6d0cd6
--- /dev/null
+++ b/components/inkeep/markdown.tsx
@@ -0,0 +1,124 @@
+import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import {
+ Children,
+ type ComponentProps,
+ type ReactElement,
+ type ReactNode,
+ Suspense,
+ use,
+ useDeferredValue,
+} from 'react';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { visit } from 'unist-util-visit';
+import type { ElementContent, Root, RootContent } from 'hast';
+
+export interface Processor {
+ process: (content: string) => Promise
+
+
+
+
+ {messages.length === 0 ? (
+
+
+
+ {messages.map((item) => (
+
+ )}
+
+
+ {messages.length > 0 && (
+
+
+ {!isStreaming && messages.at(-1)?.role === 'assistant' && (
+ }
+ onClick={() => chat.regenerate()}
+ >
+ Retry
+
+ )}
+
+
+ )}
+
+
+ );
+}
+
+// ─── Input actions (retry / clear) ─────────────────────────────────────────────
+
+function AISearchInputActions() {
+ const { messages, status, setMessages, regenerate } = useChatContext();
+ const isLoading = status === 'streaming';
+
+ if (messages.length === 0) return null;
+
+ return (
+ <>
+ {!isLoading && messages.at(-1)?.role === 'assistant' && (
+ }
+ onClick={() => regenerate()}
+ >
+ Retry
+
+ )}
+
+
+ );
+}
+
+// ─── Input form ────────────────────────────────────────────────────────────────
+
+const StorageKeyInput = '__ai_search_input';
+
+function AISearchInput(props: ComponentProps<'form'>) {
+ const { status, sendMessage, stop } = useChatContext();
+ const [input, setInput] = useState(() =>
+ typeof window === 'undefined' ? '' : (localStorage.getItem(StorageKeyInput) ?? ''),
+ );
+ const isLoading = status === 'streaming' || status === 'submitted';
+
+ const wasLoadingRef = useRef(false);
+ useEffect(() => {
+ if (!isLoading && wasLoadingRef.current) {
+ document.getElementById('nd-ai-input')?.focus();
+ }
+ wasLoadingRef.current = isLoading;
+ }, [isLoading]);
+
+ const onStart = (e?: SyntheticEvent) => {
+ e?.preventDefault();
+ const message = input.trim();
+ if (message.length === 0) return;
+
+ void sendMessage(buildUserMessage(message));
+ setInput('');
+ localStorage.removeItem(StorageKeyInput);
+ };
+
+ return (
+
+ );
+}
+
+// ─── Auto-resizing textarea ────────────────────────────────────────────────────
+
+function TextareaAutoResize(props: ComponentProps<'textarea'>) {
+ const shared = cn('col-start-1 row-start-1', props.className);
+
+ return (
+
+
+
+ }
+ aria-label="Close"
+ onClick={() => setOpen(false)}
+ className="mt-1 mr-1"
+ />
+
+
+
+ );
+}
+
+// ─── Scrollable message list ───────────────────────────────────────────────────
+
+function ScrollList(props: Omit
+ {`${props.value?.toString() ?? ''}\n`}
+
+
+ {props.children}
+
+ );
+}
+
+// ─── Message list panel (empty state + messages) ───────────────────────────────
+
+function AISearchPanelList({ className, style, ...props }: ComponentProps<'div'>) {
+ const chat = useChatContext();
+ const messages = chat.messages.filter((msg) => msg.role !== 'system');
+
+ const sendExampleQuestion = (question: string) => {
+ void chat.sendMessage(buildUserMessage(question));
+ };
+
+ return (
+
+ {messages.map((item) => (
+
+ )}
+ setOpen(false)}
+ />
+
+
diff --git a/components/jp-cloud/index.tsx b/components/jp-cloud/index.tsx
index 50784f0fe6..af2875a834 100644
--- a/components/jp-cloud/index.tsx
+++ b/components/jp-cloud/index.tsx
@@ -1,4 +1,3 @@
-import { Background } from "@/components/Background";
import { JpCloudHero } from "./JpCloudHero";
import { JpCloudValueProps } from "./JpCloudValueProps";
import { JpCloudSecurity } from "./JpCloudSecurity";
@@ -9,17 +8,14 @@ import { JpCloudCTA } from "./JpCloudCTA";
export function JpCloud() {
return (
- <>
-
+
+
+
+
+
+
+
+
-
+
-
+
+
+ {activeSection && (
+ {activeSection.title}
+ )}
+ {pageName && !isRoot && (
+ <>
+
+ );
+}
+
+export function DocsSecondaryNav() {
+ const pathname = usePathname();
+ return (
+
+
+
+ );
+}
diff --git a/components/layout/FluxLayoutNoPanel.tsx b/components/layout/FluxLayoutNoPanel.tsx
deleted file mode 100644
index fbf8a795d5..0000000000
--- a/components/layout/FluxLayoutNoPanel.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-import { DocsLayout, type DocsLayoutProps } from "fumadocs-ui/layouts/flux";
-
-/** Wrapper around fumadocs flux DocsLayout that suppresses the NavigationPanel.
- * Must be a Client Component because renderNavigationPanel is a function prop. */
-export function FluxLayoutNoPanel(props: Omit |
|---|