feat: embedded inkeep + share link (#1033)

components/inkeep/InkeepChatButton.tsx

@@ -1,29 +1,18 @@
-import React, { useEffect, useState } from "react";
-import useInkeepSettings from "./useInkeepSettings";
+import dynamic from "next/dynamic";
 import type { InkeepChatButtonProps } from "@inkeep/uikit";
-import { isChatOpen } from "../supportChat/chat";
+import useInkeepSettings from "./useInkeepSettings";
 
-export default function InkeepChatButton() {
-  const [ChatButton, setChatButton] =
-    useState<(e: InkeepChatButtonProps) => JSX.Element>();
+const ChatButton = dynamic(
+  () => import("@inkeep/uikit").then((mod) => mod.InkeepChatButton),
+  {
+    ssr: false,
+  }
+);
 
+export default function InkeepChatButton() {
   const { baseSettings, aiChatSettings, searchSettings, modalSettings } =
     useInkeepSettings();
 
-  // load the library asynchronously
-  useEffect(() => {
-    const loadChatButton = async () => {
-      try {
-        const { InkeepChatButton } = await import("@inkeep/uikit");
-        setChatButton(() => InkeepChatButton);
-      } catch (error) {
-        console.error("Failed to load ChatButton:", error);
-      }
-    };
-
-    loadChatButton();
-  }, []);
-
   const chatButtonProps: InkeepChatButtonProps = {
     baseSettings,
     aiChatSettings,
@@ -32,10 +21,8 @@ export default function InkeepChatButton() {
   };
 
   return (
-    ChatButton && (
-      <div className="w-20">
-        <ChatButton {...chatButtonProps} />
-      </div>
-    )
+    <div className="w-20">
+      <ChatButton {...chatButtonProps} />
+    </div>
   );
 }

components/inkeep/InkeepEmbeddedChat.tsx

@@ -0,0 +1,24 @@
+import dynamic from "next/dynamic";
+import { InkeepEmbeddedChatProps } from "@inkeep/uikit";
+import useInkeepSettings from "./useInkeepSettings";
+
+const EmbeddedChat = dynamic(
+  () => import("@inkeep/uikit").then((mod) => mod.InkeepEmbeddedChat),
+  {
+    ssr: false,
+    loading: () => <div>loading...</div>, // optional: loading animation component
+  }
+);
+
+function InkeepEmbeddedChat() {
+  const { baseSettings, aiChatSettings } = useInkeepSettings();
+
+  const embeddedChatProps: InkeepEmbeddedChatProps = {
+    baseSettings,
+    aiChatSettings,
+  };
+
+  return <EmbeddedChat {...embeddedChatProps} />;
+}
+
+export default InkeepEmbeddedChat;

components/inkeep/InkeepSearchBar.tsx

@@ -1,37 +1,23 @@
-import React, { useEffect, useState } from "react";
-import useInkeepSettings from "./useInkeepSettings";
+import dynamic from "next/dynamic";
 import type { InkeepSearchBarProps } from "@inkeep/uikit";
+import useInkeepSettings from "./useInkeepSettings";
 
-export default function InkeepSearchBar() {
-  const [SearchBar, setSearchBar] =
-    useState<(e: InkeepSearchBarProps) => JSX.Element>();
+const SearchBar = dynamic(
+  () => import("@inkeep/uikit").then((mod) => mod.InkeepSearchBar),
+  { ssr: false }
+);
 
+export default function InkeepSearchBar() {
   const { baseSettings, aiChatSettings, searchSettings, modalSettings } =
     useInkeepSettings();
 
-  // load the library asynchronously
-  useEffect(() => {
-    const loadSearchBar = async () => {
-      try {
-        const { InkeepSearchBar } = await import("@inkeep/uikit");
-        setSearchBar(() => InkeepSearchBar);
-      } catch (error) {
-        console.error("Failed to load SearchBar:", error);
-      }
-    };
-
-    loadSearchBar();
-  }, []);
-
   const searchBarProps: InkeepSearchBarProps = {
     baseSettings,
     aiChatSettings,
     searchSettings,
     modalSettings,
   };
 
-  if (!SearchBar) return null;
-
   return (
     <div className="h-9 overflow-hidden">
       <SearchBar {...searchBarProps} />

components/inkeep/useInkeepSettings.ts

@@ -66,6 +66,8 @@ const useInkeepSettings = (): InkeepSharedSettings => {
     // optional settings
     chatSubjectName: "Langfuse",
     botAvatarSrcUrl: "/icon256.png", // use your own bot avatar
+    isChatSharingEnabled: true,
+    shareChatUrlBasePath: "https://langfuse.com/docs/ask-ai",
     includeAIAnnotations: {
       shouldEscalateToSupport: true,
     },

pages/docs/_meta.tsx

@@ -64,6 +64,7 @@ export default {
   "data-security-privacy": "Data Security & Privacy",
   "open-source": "Open Source",
   roadmap: "Roadmap",
+  "ask-ai": "Ask AI",
   support: {
     title: "Support ↗",
     href: "/support",

pages/docs/ask-ai.mdx

@@ -0,0 +1,21 @@
+---
+title: Ask AI
+description: Ask AI
+---
+
+# Ask AI
+
+The Langfuse AI assistant helps you find answers about Langfuse's features, integrations, and best practices. It's trained on our documentation, GitHub discussions/issues, and API, and can help you with:
+
+- Understanding Langfuse's core features like tracing, prompt management, and evaluations
+- Getting started with our SDKs and integrations
+- Finding relevant code examples and implementation guides
+- Troubleshooting common issues
+- Learning about best practices for LLM observability and evaluation
+
+_If you are looking for the interactive Langfuse demo, please visit [langfuse.com/demo](/demo)._
+
+import InkeepEmbeddedChat from "@/components/inkeep/InkeepEmbeddedChat";
+
+<div className="h-10" />
+<InkeepEmbeddedChat />

pages/support.mdx

@@ -13,18 +13,24 @@ description: "The Langfuse team and community can help you with questions and is
   Discussions](/gh-support).
 </Callout>
 
+## Finding an answer to your question
+
+- Our [documentation](/docs) is the best place to start looking for answers. It is comprehensive, and we invest significant time into maintaining it. You can also suggest edits to the docs via GitHub.
+- [Langfuse FAQs](/faq) where the most common questions are answered.
+- Use the "Ask AI" chat `widget` to get instant answers to your questions:
+
+import InkeepEmbeddedChat from "@/components/inkeep/InkeepEmbeddedChat";
+
+<div className="h-5" />
+<InkeepEmbeddedChat />
+
 ## Support Channels
 
 - **Ask any question in our [public Q&A](/gh-support) on GitHub Discussions.** Please include as much detail as possible (e.g. code snippets, screenshots, background information) to help us understand your question.
 - [Request a feature](/ideas) on GitHub Discussions.
 - [Report a Bug](/issues) on GitHub Issues.
 - For time-sensitive queries, ping us via the in-app chat widget.
 
-## Finding an answer to your question
-
-- Our [documentation](/docs) is the best place to start looking for answers. It is comprehensive, and we invest significant time into maintaining it. You can also suggest edits to the docs via GitHub. You can use our [Docs Chatbot](/demo) to ask questions about the docs.
-- [Langfuse FAQs](/faq) where the most common questions are answered.
-
 ### Recent GitHub Discussions
 
 import { GhDiscussionsPreview } from "@/components/gh-discussions/GhDiscussionsPreview";
@@ -33,6 +39,8 @@ import { GhDiscussionsPreview } from "@/components/gh-discussions/GhDiscussionsP
 
 ## Community Discord
 
+[![Discord](https://img.shields.io/discord/1111061815649124414?style=flat&logo=discord&logoColor=white)](/discord)
+
 Over 1,700 users are on our [Discord Server](/discord). It's a great place to ask questions, share your projects, and get to know other Langfuse users.
 
 Please note: The Langfuse team does not provide dedicated support on Discord. Please use our [GitHub Discussions](/ideas) or Email ([email protected]) if your request is sensitive. Feel free to cross-post from GitHub to Discord to raise awareness for your issue or question.