(langfuse/langfuse)"] + Worker["Async Worker
(langfuse/worker)"] + Postgres@{ img: "/images/logos/postgres_icon.svg", label: "Postgres - OLTP\n(Transactional Data)", pos: "b", w: 60, h: 60, constraint: "on" } + Cache@{ img: "/images/logos/redis_icon.png", label: "Redis\n(Cache, Queue)", pos: "b", w: 60, h: 60, constraint: "on" } + Clickhouse@{ img: "/images/logos/clickhouse_icon.svg", label: "Clickhouse - OLAP\n(Observability Data)", pos: "b", w: 60, h: 60, constraint: "on" } + S3@{ img: "/images/logos/s3_icon.svg", label: "S3 / Blob Storage\n(Raw events, multi-modal attachments)", pos: "b", w: 60, h: 60, constraint: "on" } + end + LLM["LLM API/Gateway
(optional; BYO; can be same VPC or VPC-peered)"] + + User --> Web + Web --> S3 + Web --> Postgres + Web --> Cache + Web --> Clickhouse + Web -..->|"optional for playground"| LLM + + Cache --> Worker + Worker --> Clickhouse + Worker --> Postgres + Worker --> S3 + Worker -..->|"optional for evals"| LLM +``` diff --git a/components-mdx/changes-v3-architecture-changes-short-description.mdx b/components-mdx/changes-v3-architecture-changes-short-description.mdx new file mode 100644 index 000000000..bab02c2b1 --- /dev/null +++ b/components-mdx/changes-v3-architecture-changes-short-description.mdx @@ -0,0 +1,10 @@ +Langfuse has gained significant traction over the last months, both in our Cloud environment and in self-hosted setups. +With Langfuse v3 we introduce changes that allow our backend to handle hundreds of events per second with higher reliability. +To achieve this scale, we introduce a second Langfuse container and additional storage services like S3/Blob store, Clickhouse, and Redis which are better suited for the required workloads than our previous Postgres-based setup. + +In short, Langfuse v3 adds: + +- A new worker container that processes events asynchronously. +- A new S3/Blob store for storing large objects. +- A new Clickhouse instance for storing traces, observations, and scores. +- Redis/Valkey for queuing events and caching data. diff --git a/components-mdx/changes-v3-component-reasoning.mdx b/components-mdx/changes-v3-component-reasoning.mdx new file mode 100644 index 000000000..33622ef6f --- /dev/null +++ b/components-mdx/changes-v3-component-reasoning.mdx @@ -0,0 +1,84 @@ +
+
+
+1. Why Clickhouse
+ +We made the strategic decision to migrate our traces, observations, and scores table from Postgres to Clickhouse. +Both us and our self-hosters observed bottlenecks in Postgres when dealing with millions of rows of tracing data, +both on ingestion and retrieval of information. +Our core requirement was a database that could handle massive volumes of trace and event data with exceptional query speed and efficiency +while also being available for free to self-hosters. + +**Limitations of Postgres** + +Initially, Postgres was an excellent choice due to its robustness, flexibility, and the extensive tooling available. +As our platform grew, we encountered performance bottlenecks with complex aggregations and time-series data. +The row-based storage model of PostgreSQL becomes increasingly inefficient when dealing with billions of rows of tracing data, +leading to slow query times and high resource consumption. + +**Our requirements** + +- Analytical queries: all queries for our dashboards (e.g. sum of LLM tokens consumed over time) +- Table queries: Finding tracing data based on filtering and ordering selected via tables in our UI. +- Select by ID: Quickly locating a specific trace by its ID. +- High write throughput while allowing for updates. Our tracing data can be updated from the SKDs. Hence, we need an option to update rows in the database. +- Self-hosting: We needed a database that is free to use for self-hosters, avoiding dependencies on specific cloud providers. +- Low operational effort: As a small team, we focus on building features for our users. We try to keep operational efforts as low as possible. + +**Why Clickhouse is great** + +- Optimized for Analytical Queries: ClickHouse is a modern OLAP database capable of ingesting data at high rates and querying it with low latency. It handles billions of rows efficiently. +- Rich feature-set: Clickhouse offers different Table Engines, Materialized views, different types of Indices, and many integrations which helps us to build fast and achieve low latency read queries. +- Our self-hosters can use the official Clickhouse Helm Charts and Docker Images for deploying in the cloud infrastructure of their choice. +- Clickhouse Cloud: Clickhouse Cloud is a database as a SaaS service which allows us to reduce operational efforts on our side. + +When talking to other companies and looking at their code bases, we learned that Clickhouse is a popular choice these days for analytical workloads. +Many modern observability tools, such as [Signoz](https://signoz.io/) or [Posthog](https://posthog.com/), as well as established companies like [Cloudflare](https://blog.cloudflare.com/http-analytics-for-6m-requests-per-second-using-clickhouse/), use Clickhouse for their analytical workloads. + +**Clickhouse vs. others** + +We think there are many great OLAP databases out there and are sure that we could have chosen an alternative and would also succeed with it. However, here are some thoughts on alternatives: + +- Druid: Unlike Druid's [modular architecture](https://posthog.com/blog/clickhouse-vs-druid), ClickHouse provides a more straightforward, unified instance approach. Hence, it is easier for teams to manage Clickhouse in production as there are fewer moving parts. This reduces the operational burden especially for our self-hosters. +- StarRocks: We think StarRocks is great but early. The vast amount of features in Clickhouse help us to remain flexible with our requirements while benefiting from the performance of an OLAP database. + +**Building an adapter and support multiple databases** + +We explored building a multi-database adapter to support Postgres for smaller self-hosted deployments. +After talking to engineers and reviewing some of PostHog's [Clickhouse implementation](https://github.com/PostHog/posthog), +we decided against this path due to its complexity and maintenance overhead. +This allows us to focus our resources on building user features instead. + +
+
+
+2. Why Redis
+ +We added a Redis instance to serve cache and queue use-cases within our stack. +With its open source license, broad native support my major cloud vendors, and ubiquity in the industry, Redis was a natural choice for us. + +
+
+
+3. Why S3/Blob Store
+ +Observability data for LLM application tends to contain large, semi-structured bodies of data to represent inputs and outputs. +We chose S3/Blob Store as a scalable, secure, and cost-effective solution to store these large objects. +It allows us to store all incoming events for further processing and acts as a native backup solution, as the full state +can be restored based on the events stored there. + +
+
diff --git a/components-mdx/datasets-create-dataset-item.mdx b/components-mdx/datasets-create-dataset-item.mdx
new file mode 100644
index 000000000..ab7549b67
--- /dev/null
+++ b/components-mdx/datasets-create-dataset-item.mdx
@@ -0,0 +1,80 @@
+4. Why Worker Container
+ +When processing observability data for LLM applications, there are many CPU-heavy operations which block the main loop in our Node.js backend, +e.g. tokenization and other parsing of event bodies. +To achieve high availability and low latencies across client applications, we decided to move the heavy processing into an asynchronous worker container. +It accepts events from a Redis queue and ensures that they are eventually being upserted into Clickhouse. + +
+
+```mermaid
+classDiagram
+direction LR
+ class Dataset {
+ name
+ description
+ metadata
+ }
+
+ class DatasetItem {
+ datasetName
+ input
+ expectedOutput
+ metadata
+ sourceTraceId
+ sourceObservationId
+ id
+ status
+ }
+
+ Dataset "1" --> "n" DatasetItem
+```
+
+
+
+### Dataset object
+
+| Attribute | Type | Required | Description |
+| ------------- | ------ | -------- | --------------------------------------------------------------------------- |
+| `name` | string | Yes | Name of the dataset |
+| `description` | string | No | Description of the dataset |
+| `metadata` | object | No | Additional metadata for the dataset |
+
+### DatasetItem object
+
+| Attribute | Type | Required | Description |
+| ------------------ | -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `datasetName` | string | Yes | Name of the dataset to add the item to |
+| `input` | object | No | Input data for the dataset item |
+| `expectedOutput` | object | No | Expected output data for the dataset item |
+| `metadata` | object | No | Additional metadata for the dataset item |
+| `sourceTraceId` | string | No | ID of the source trace to link this dataset item to |
+| `sourceObservationId` | string | No | ID of the source observation to link this dataset item to |
+| `id` | string | No | Unique identifier for the dataset item. Dataset items are upserted on their id. Id needs to be unique (project-level) and cannot be reused across datasets. |
+| `status` | DatasetStatus | No | Status of the dataset item. Defaults to ACTIVE for newly created items. Possible values: `ACTIVE`, `ARCHIVED` |
+
+
+
+
+
+
+## DatasetRun
+Dataset runs are used to run a dataset through your LLM application and optionally apply evaluation methods to the results.
+
++
+
+```mermaid
+classDiagram
+direction LR
+ class DatasetRun {
+ name
+ description
+ metadata
+ }
+
+ DatasetRun "1" --> "n" DatasetRunItem
+
+ class DatasetRunItem {
+ runName
+ runDescription
+ metadata
+ datasetItemId
+ traceId
+ observationId
+
+ }
+```
+
+
+
+### DatasetRun object
+
+| Attribute | Type | Required | Description |
+| -------------- | ------ | -------- | --------------------------------------------------------------------------- |
+| `datasetName` | string | Yes | Name of the dataset |
+| `runName` | string | Yes | Name of the dataset run |
+
+### DatasetRunItem object
+
+| Attribute | Type | Required | Description |
+| ---------------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `runName` | string | Yes | Name of the dataset run to add the item to |
+| `runDescription` | string | No | Description of the run. If run exists, description will be updated |
+| `metadata` | object | No | Metadata of the dataset run, updates run if run already exists |
+| `datasetItemId` | string | Yes | ID of the dataset item to link to this run |
+| `observationId` | string | No | ID of the observation to link to this run |
+| `traceId` | string | No | ID of the trace to link to this run. traceId should always be provided. For compatibility with older SDK versions it can also be inferred from the provided observationId. |
+
++ +
+
+```mermaid
+classDiagram
+direction LR
+ namespace Datasets {
+ class Dataset {
+ }
+ class DatasetItem {
+ }
+ }
+ namespace DatasetRuns {
+ class DatasetRun {
+ }
+ class DatasetRunItem {
+ }
+ }
+ namespace Observability {
+ class Trace {
+ }
+ class Observation {
+ }
+ }
+ namespace Evals {
+ class Score {
+ }
+ }
+
+
+ class DatasetRun {
+ }
+
+ class DatasetRunItem {
+ }
+
+ class Dataset {
+ }
+
+ class DatasetItem {
+ }
+
+ class Trace {
+ input
+ output
+ }
+
+ class Observation {
+ input
+ output
+ }
+
+ class Score {
+ name
+ value
+ comment
+ }
+
+ Dataset "1" --> "n" DatasetItem
+ Dataset "1" --> "n" DatasetRun
+ DatasetRun "1" --> "n" DatasetRunItem
+ DatasetRunItem "1" --> "1" DatasetItem
+ Trace "1" --> "n" Observation
+ DatasetRunItem "1" --> "1" Trace
+ DatasetRunItem "1" --> "0..1" Observation
+ Observation "1" --> "n" Score
+ Trace "1" --> "n" Score
+```
+
+
+
diff --git a/components-mdx/datasets-overview-gif.mdx b/components-mdx/datasets-overview-gif.mdx
new file mode 100644
index 000000000..493c7a52b
--- /dev/null
+++ b/components-mdx/datasets-overview-gif.mdx
@@ -0,0 +1,37 @@
+import { CloudflareVideo } from "@/components/Video";
+
+
[lobehub](https://github.com/lobehub) / [lobe-chat](https://github.com/lobehub/lobe-chat) | 56800 |
+|
[FlowiseAI](https://github.com/FlowiseAI) / [Flowise](https://github.com/FlowiseAI/Flowise) | 35760 |
+|
[chatchat-space](https://github.com/chatchat-space) / [Langchain-Chatchat](https://github.com/chatchat-space/Langchain-Chatchat) | 33855 |
+|
[twentyhq](https://github.com/twentyhq) / [twenty](https://github.com/twentyhq/twenty) | 26681 |
+|
[formbricks](https://github.com/formbricks) / [formbricks](https://github.com/formbricks/formbricks) | 10163 |
+|
[anthropics](https://github.com/anthropics) / [courses](https://github.com/anthropics/courses) | 9504 |
+|
[langfuse](https://github.com/langfuse) / [langfuse](https://github.com/langfuse/langfuse) | 9019 |
+|
[promptfoo](https://github.com/promptfoo) / [promptfoo](https://github.com/promptfoo/promptfoo) | 5686 |
+|
[superagent-ai](https://github.com/superagent-ai) / [superagent](https://github.com/superagent-ai/superagent) | 5641 |
+|
[pingcap](https://github.com/pingcap) / [autoflow](https://github.com/pingcap/autoflow) | 2394 |
+|
[alishobeiri](https://github.com/alishobeiri) / [thread](https://github.com/alishobeiri/thread) | 1089 |
+|
[plastic-labs](https://github.com/plastic-labs) / [tutor-gpt](https://github.com/plastic-labs/tutor-gpt) | 795 |
+|
[AIDotNet](https://github.com/AIDotNet) / [fast-wiki](https://github.com/AIDotNet/fast-wiki) | 435 |
+|
[inferablehq](https://github.com/inferablehq) / [inferable](https://github.com/inferablehq/inferable) | 338 |
+|
[vespperhq](https://github.com/vespperhq) / [vespper](https://github.com/vespperhq/vespper) | 332 |
+|
[souzatharsis](https://github.com/souzatharsis) / [tamingLLMs](https://github.com/souzatharsis/tamingLLMs) | 292 |
+|
[ElectricCodeGuy](https://github.com/ElectricCodeGuy) / [SupabaseAuthWithSSR](https://github.com/ElectricCodeGuy/SupabaseAuthWithSSR) | 222 |
+|
[LibreChat-AI](https://github.com/LibreChat-AI) / [librechat.ai](https://github.com/LibreChat-AI/librechat.ai) | 201 |
+|
[i-am-alice](https://github.com/i-am-alice) / [3rd-devs](https://github.com/i-am-alice/3rd-devs) | 185 |
+|
[babelcloud](https://github.com/babelcloud) / [LLM-RGB](https://github.com/babelcloud/LLM-RGB) | 153 |
+|
[cofacts](https://github.com/cofacts) / [rumors-api](https://github.com/cofacts/rumors-api) | 115 |
+|
[awslabs](https://github.com/awslabs) / [backstage-plugins-for-aws](https://github.com/awslabs/backstage-plugins-for-aws) | 87 |
+| [langfuse](https://github.com/langfuse) / [langfuse-docs](https://github.com/langfuse/langfuse-docs) | 86 |
+|
[lucagrippa](https://github.com/lucagrippa) / [obsidian-ai-tagger](https://github.com/lucagrippa/obsidian-ai-tagger) | 85 |
+| [cofacts](https://github.com/cofacts) / [rumors-site](https://github.com/cofacts/rumors-site) | 84 |
+|
[chokiproai](https://github.com/chokiproai) / [ChatGPT-Plugins](https://github.com/chokiproai/ChatGPT-Plugins) | 74 |
+|
[Davis-Media](https://github.com/Davis-Media) / [weights-ai](https://github.com/Davis-Media/weights-ai) | 69 |
+|
[indexnetwork](https://github.com/indexnetwork) / [index](https://github.com/indexnetwork/index) | 52 |
+|
[empirical-run](https://github.com/empirical-run) / [appwright](https://github.com/empirical-run/appwright) | 52 |
+|
[giselles-ai](https://github.com/giselles-ai) / [giselle](https://github.com/giselles-ai/giselle) | 51 |
+|
[SuveenE](https://github.com/SuveenE) / [codenames-ai](https://github.com/SuveenE/codenames-ai) | 47 |
+|
[AmineDjeghri](https://github.com/AmineDjeghri) / [generative-ai-project-template](https://github.com/AmineDjeghri/generative-ai-project-template) | 47 |
+|
[Chainlit](https://github.com/Chainlit) / [literalai-cookbooks](https://github.com/Chainlit/literalai-cookbooks) | 45 |
+| [langfuse](https://github.com/langfuse) / [langfuse-js](https://github.com/langfuse/langfuse-js) | 43 |
+|
[Future-House](https://github.com/Future-House) / [LAB-Bench](https://github.com/Future-House/LAB-Bench) | 36 |
+|
[Ozamatash](https://github.com/Ozamatash) / [deep-research-mcp](https://github.com/Ozamatash/deep-research-mcp) | 30 |
+|
[orsonteodoro](https://github.com/orsonteodoro) / [oiledmachine-overlay](https://github.com/orsonteodoro/oiledmachine-overlay) | 25 |
+|
[ChristophHandschuh](https://github.com/ChristophHandschuh) / [chatbot-ui](https://github.com/ChristophHandschuh/chatbot-ui) | 23 |
+|
[bluewind-ai](https://github.com/bluewind-ai) / [bluewind](https://github.com/bluewind-ai/bluewind) | 23 |
+|
[checkly](https://github.com/checkly) / [srebot](https://github.com/checkly/srebot) | 17 |
+|
[kalviumcommunity](https://github.com/kalviumcommunity) / [compilerd](https://github.com/kalviumcommunity/compilerd) | 17 |
+|
[microsoft](https://github.com/microsoft) / [vscode-azureapicenter](https://github.com/microsoft/vscode-azureapicenter) | 16 |
+| [langfuse](https://github.com/langfuse) / [mcp-server-langfuse](https://github.com/langfuse/mcp-server-langfuse) | 15 |
+|
[minorun365](https://github.com/minorun365) / [aws-level-checker](https://github.com/minorun365/aws-level-checker) | 15 |
+| [promptfoo](https://github.com/promptfoo) / [promptfoo-action](https://github.com/promptfoo/promptfoo-action) | 15 |
+|
[justUmen](https://github.com/justUmen) / [Bjornulf_lobe-chat](https://github.com/justUmen/Bjornulf_lobe-chat) | 14 |
+| [langfuse](https://github.com/langfuse) / [ai-chatbot](https://github.com/langfuse/ai-chatbot) | 14 |
+|
[anti-work](https://github.com/anti-work) / [helper](https://github.com/anti-work/helper) | 13 |
+|
[find-xposed-magisk](https://github.com/find-xposed-magisk) / [lobe-chat](https://github.com/find-xposed-magisk/lobe-chat) | 11 |
+
+_Generated using [github-dependents-info](https://github.com/nvuillam/github-dependents-info), by [Nicolas Vuillamy](https://github.com/nvuillam)_
\ No newline at end of file
diff --git a/components-mdx/dependents/python.md b/components-mdx/dependents/python.md
new file mode 100644
index 000000000..4e3ef6eb7
--- /dev/null
+++ b/components-mdx/dependents/python.md
@@ -0,0 +1,119 @@
+### Dependents stats for langfuse/langfuse-python
+
+[](https://github.com/langfuse/langfuse-python/network/dependents)
+[&message=108&color=informational&logo=slickpic)](https://github.com/langfuse/langfuse-python/network/dependents)
+[&message=-108&color=informational&logo=slickpic)](https://github.com/langfuse/langfuse-python/network/dependents)
+[&message=50276&color=informational&logo=slickpic)](https://github.com/langfuse/langfuse-python/network/dependents)
+
+| Repository | Stars |
+| :-------- | -----: |
+|
[open-webui](https://github.com/open-webui) / [open-webui](https://github.com/open-webui/open-webui) | 80355 |
+|
[langgenius](https://github.com/langgenius) / [dify](https://github.com/langgenius/dify) | 76869 |
+|
[langflow-ai](https://github.com/langflow-ai) / [langflow](https://github.com/langflow-ai/langflow) | 50121 |
+|
[run-llama](https://github.com/run-llama) / [llama_index](https://github.com/run-llama/llama_index) | 39485 |
+|
[QuivrHQ](https://github.com/QuivrHQ) / [quivr](https://github.com/QuivrHQ/quivr) | 37432 |
+|
[mindsdb](https://github.com/mindsdb) / [mindsdb](https://github.com/mindsdb/mindsdb) | 27274 |
+|
[BerriAI](https://github.com/BerriAI) / [litellm](https://github.com/BerriAI/litellm) | 18293 |
+|
[GreyDGL](https://github.com/GreyDGL) / [PentestGPT](https://github.com/GreyDGL/PentestGPT) | 7876 |
+|
[Canner](https://github.com/Canner) / [WrenAI](https://github.com/Canner/WrenAI) | 6767 |
+| [superagent-ai](https://github.com/superagent-ai) / [superagent](https://github.com/superagent-ai/superagent) | 5641 |
+|
[bRAGAI](https://github.com/bRAGAI) / [bRAG-langchain](https://github.com/bRAGAI/bRAG-langchain) | 2501 |
+| [pingcap](https://github.com/pingcap) / [autoflow](https://github.com/pingcap/autoflow) | 2394 |
+| [open-webui](https://github.com/open-webui) / [pipelines](https://github.com/open-webui/pipelines) | 1499 |
+|
[topoteretes](https://github.com/topoteretes) / [cognee](https://github.com/topoteretes/cognee) | 1335 |
+|
[MLSysOps](https://github.com/MLSysOps) / [MLE-agent](https://github.com/MLSysOps/MLE-agent) | 1238 |
+|
[dynamiq-ai](https://github.com/dynamiq-ai) / [dynamiq](https://github.com/dynamiq-ai/dynamiq) | 751 |
+|
[opslane](https://github.com/opslane) / [opslane](https://github.com/opslane/opslane) | 694 |
+|
[dmayboroda](https://github.com/dmayboroda) / [minima](https://github.com/dmayboroda/minima) | 546 |
+|
[theopenconversationkit](https://github.com/theopenconversationkit) / [tock](https://github.com/theopenconversationkit/tock) | 538 |
+|
[andysingal](https://github.com/andysingal) / [llm-course](https://github.com/andysingal/llm-course) | 459 |
+|
[phospho-app](https://github.com/phospho-app) / [phospho](https://github.com/phospho-app/phospho) | 417 |
+|
[sentient-engineering](https://github.com/sentient-engineering) / [agent-q](https://github.com/sentient-engineering/agent-q) | 399 |
+|
[aorwall](https://github.com/aorwall) / [moatless-tools](https://github.com/aorwall/moatless-tools) | 362 |
+|
[duoyang666](https://github.com/duoyang666) / [ai_novel](https://github.com/duoyang666/ai_novel) | 277 |
+|
[YFGaia](https://github.com/YFGaia) / [dify-plus](https://github.com/YFGaia/dify-plus) | 259 |
+|
[sql-agi](https://github.com/sql-agi) / [DB-GPT](https://github.com/sql-agi/DB-GPT) | 242 |
+|
[zenml-io](https://github.com/zenml-io) / [zenml-projects](https://github.com/zenml-io/zenml-projects) | 238 |
+|
[bklieger-groq](https://github.com/bklieger-groq) / [mathtutor-on-groq](https://github.com/bklieger-groq/mathtutor-on-groq) | 215 |
+|
[RobotecAI](https://github.com/RobotecAI) / [rai](https://github.com/RobotecAI/rai) | 201 |
+| [plastic-labs](https://github.com/plastic-labs) / [honcho](https://github.com/plastic-labs/honcho) | 168 |
+|
[8090-inc](https://github.com/8090-inc) / [xrx-sample-apps](https://github.com/8090-inc/xrx-sample-apps) | 156 |
+| [langfuse](https://github.com/langfuse) / [langfuse-python](https://github.com/langfuse/langfuse-python) | 142 |
+|
[deepset-ai](https://github.com/deepset-ai) / [haystack-core-integrations](https://github.com/deepset-ai/haystack-core-integrations) | 134 |
+|
[ai-shifu](https://github.com/ai-shifu) / [ai-shifu](https://github.com/ai-shifu/ai-shifu) | 118 |
+|
[kenshiro-o](https://github.com/kenshiro-o) / [nagato-ai](https://github.com/kenshiro-o/nagato-ai) | 113 |
+|
[bmd1905](https://github.com/bmd1905) / [ChatOpsLLM](https://github.com/bmd1905/ChatOpsLLM) | 109 |
+|
[i-dot-ai](https://github.com/i-dot-ai) / [redbox](https://github.com/i-dot-ai/redbox) | 107 |
+|
[zozoheir](https://github.com/zozoheir) / [tinyllm](https://github.com/zozoheir/tinyllm) | 100 |
+|
[pavanjava](https://github.com/pavanjava) / [bootstrap-rag](https://github.com/pavanjava/bootstrap-rag) | 88 |
+|
[ansari-project](https://github.com/ansari-project) / [ansari-backend](https://github.com/ansari-project/ansari-backend) | 87 |
+| [chatchat-space](https://github.com/chatchat-space) / [LangGraph-Chatchat](https://github.com/chatchat-space/LangGraph-Chatchat) | 80 |
+|
[elenagalun](https://github.com/elenagalun) / [difygit](https://github.com/elenagalun/difygit) | 68 |
+|
[veragloo](https://github.com/veragloo) / [dify](https://github.com/veragloo/dify) | 67 |
+|
[jayita13](https://github.com/jayita13) / [GenerativeAI](https://github.com/jayita13/GenerativeAI) | 58 |
+|
[MSNP1381](https://github.com/MSNP1381) / [kaggle-Agent](https://github.com/MSNP1381/kaggle-Agent) | 51 |
+|
[longevity-genie](https://github.com/longevity-genie) / [just-agents](https://github.com/longevity-genie/just-agents) | 49 |
+|
[gnosis](https://github.com/gnosis) / [prediction-market-agent](https://github.com/gnosis/prediction-market-agent) | 45 |
+|
[opendatahub-io-contrib](https://github.com/opendatahub-io-contrib) / [workbench-images](https://github.com/opendatahub-io-contrib/workbench-images) | 44 |
+|
[agentcoinorg](https://github.com/agentcoinorg) / [predictionprophet](https://github.com/agentcoinorg/predictionprophet) | 43 |
+|
[Coding-Crashkurse](https://github.com/Coding-Crashkurse) / [Udemy-Advanced-LangChain](https://github.com/Coding-Crashkurse/Udemy-Advanced-LangChain) | 43 |
+|
[holunda-io](https://github.com/holunda-io) / [bpm-ai-connectors-camunda-8](https://github.com/holunda-io/bpm-ai-connectors-camunda-8) | 38 |
+|
[hustyichi](https://github.com/hustyichi) / [dify-eval](https://github.com/hustyichi/dify-eval) | 36 |
+|
[guyernest](https://github.com/guyernest) / [advanced-rag](https://github.com/guyernest/advanced-rag) | 35 |
+|
[jakobap](https://github.com/jakobap) / [graph2nosql](https://github.com/jakobap/graph2nosql) | 35 |
+|
[valory-xyz](https://github.com/valory-xyz) / [mech](https://github.com/valory-xyz/mech) | 34 |
+|
[UNOAWORLD](https://github.com/UNOAWORLD) / [unoa-agent](https://github.com/UNOAWORLD/unoa-agent) | 33 |
+| [jakobap](https://github.com/jakobap) / [graphrag-light](https://github.com/jakobap/graphrag-light) | 33 |
+|
[garyzava](https://github.com/garyzava) / [chat-to-database-chatbot](https://github.com/garyzava/chat-to-database-chatbot) | 32 |
+| [gnosis](https://github.com/gnosis) / [prediction-market-agent-tooling](https://github.com/gnosis/prediction-market-agent-tooling) | 31 |
+|
[Shekswess](https://github.com/Shekswess) / [synthgenai](https://github.com/Shekswess/synthgenai) | 30 |
+|
[IDinsight](https://github.com/IDinsight) / [ask-a-question](https://github.com/IDinsight/ask-a-question) | 30 |
+|
[SSK-14](https://github.com/SSK-14) / [WizSearch](https://github.com/SSK-14/WizSearch) | 30 |
+|
[thomasnormal](https://github.com/thomasnormal) / [fewshot](https://github.com/thomasnormal/fewshot) | 28 |
+| [i-dot-ai](https://github.com/i-dot-ai) / [themefinder](https://github.com/i-dot-ai/themefinder) | 27 |
+| [pingcap](https://github.com/pingcap) / [LinguFlow](https://github.com/pingcap/LinguFlow) | 26 |
+| [GreyDGL](https://github.com/GreyDGL) / [ShareGPTs](https://github.com/GreyDGL/ShareGPTs) | 26 |
+|
[syzhy113](https://github.com/syzhy113) / [Engineering-Code-Analysis](https://github.com/syzhy113/Engineering-Code-Analysis) | 25 |
+|
[yaitec](https://github.com/yaitec) / [langflow-streamlit](https://github.com/yaitec/langflow-streamlit) | 25 |
+|
[kaymen99](https://github.com/kaymen99) / [AI-Sales-agent](https://github.com/kaymen99/AI-Sales-agent) | 25 |
+|
[SuperGalaxy0901](https://github.com/SuperGalaxy0901) / [Streamlit-OpenAI-Chatbot](https://github.com/SuperGalaxy0901/Streamlit-OpenAI-Chatbot) | 23 |
+|
[dimagi](https://github.com/dimagi) / [open-chat-studio](https://github.com/dimagi/open-chat-studio) | 22 |
+|
[mayflower](https://github.com/mayflower) / [langchain_agents](https://github.com/mayflower/langchain_agents) | 22 |
+|
[cab938](https://github.com/cab938) / [jupyter_tool](https://github.com/cab938/jupyter_tool) | 21 |
+|
[jayrinaldime](https://github.com/jayrinaldime) / [ollama-straico-apiproxy](https://github.com/jayrinaldime/ollama-straico-apiproxy) | 21 |
+|
[PersonaFlow](https://github.com/PersonaFlow) / [agentstack](https://github.com/PersonaFlow/agentstack) | 21 |
+|
[bearlike](https://github.com/bearlike) / [Personal-Assistant](https://github.com/bearlike/Personal-Assistant) | 21 |
+|
[asteroidai](https://github.com/asteroidai) / [asteroid-python-sdk](https://github.com/asteroidai/asteroid-python-sdk) | 19 |
+|
[betagouv](https://github.com/betagouv) / [ComparIA](https://github.com/betagouv/ComparIA) | 18 |
+| [Coding-Crashkurse](https://github.com/Coding-Crashkurse) / [LangChain-in-Production-with-Langfuse](https://github.com/Coding-Crashkurse/LangChain-in-Production-with-Langfuse) | 18 |
+|
[beaubeas](https://github.com/beaubeas) / [lung-cancer-detection](https://github.com/beaubeas/lung-cancer-detection) | 17 |
+|
[blacksmithop](https://github.com/blacksmithop) / [LLM-Graph-Builder](https://github.com/blacksmithop/LLM-Graph-Builder) | 17 |
+|
[Hyperspawn](https://github.com/Hyperspawn) / [Dropbear](https://github.com/Hyperspawn/Dropbear) | 16 |
+|
[shreyashankar](https://github.com/shreyashankar) / [spade-experiments](https://github.com/shreyashankar/spade-experiments) | 16 |
+|
[ogabrielluiz](https://github.com/ogabrielluiz) / [langflow-railway](https://github.com/ogabrielluiz/langflow-railway) | 16 |
+| [minorun365](https://github.com/minorun365) / [aws-level-checker](https://github.com/minorun365/aws-level-checker) | 15 |
+|
[aimclub](https://github.com/aimclub) / [ProtoLLM](https://github.com/aimclub/ProtoLLM) | 15 |
+| [Coding-Crashkurse](https://github.com/Coding-Crashkurse) / [LangGraph-Visualizer](https://github.com/Coding-Crashkurse/LangGraph-Visualizer) | 14 |
+|
[ldilab](https://github.com/ldilab) / [ArchCode](https://github.com/ldilab/ArchCode) | 14 |
+|
[balajivis](https://github.com/balajivis) / [modernaipro](https://github.com/balajivis/modernaipro) | 14 |
+|
[diicellman](https://github.com/diicellman) / [dynamite-dogs](https://github.com/diicellman/dynamite-dogs) | 14 |
+|
[shivaraj-bh](https://github.com/shivaraj-bh) / [ollama-flake](https://github.com/shivaraj-bh/ollama-flake) | 13 |
+|
[maxritter](https://github.com/maxritter) / [aws-bedrock-multi-agent-blueprint](https://github.com/maxritter/aws-bedrock-multi-agent-blueprint) | 12 |
+|
[krflorian](https://github.com/krflorian) / [planeswalker_companion](https://github.com/krflorian/planeswalker_companion) | 12 |
+|
[wangxj03](https://github.com/wangxj03) / [ai-cookbook](https://github.com/wangxj03/ai-cookbook) | 12 |
+|
[dida-do](https://github.com/dida-do) / [public](https://github.com/dida-do/public) | 12 |
+|
[georgian-io](https://github.com/georgian-io) / [GAL](https://github.com/georgian-io/GAL) | 12 |
+| [Coding-Crashkurse](https://github.com/Coding-Crashkurse) / [RAG-Evaluation-with-Ragas](https://github.com/Coding-Crashkurse/RAG-Evaluation-with-Ragas) | 12 |
+|
[phitrann](https://github.com/phitrann) / [arXivRAG](https://github.com/phitrann/arXivRAG) | 11 |
+| [aimclub](https://github.com/aimclub) / [FEDOT.LLM](https://github.com/aimclub/FEDOT.LLM) | 11 |
+|
[c00cjz00](https://github.com/c00cjz00) / [llmservice_ip](https://github.com/c00cjz00/llmservice_ip) | 11 |
+|
[zby](https://github.com/zby) / [answerbot](https://github.com/zby/answerbot) | 11 |
+|
[himanshu-skid19](https://github.com/himanshu-skid19) / [Inter-IIT-12-Devrev-AI-Agent-007](https://github.com/himanshu-skid19/Inter-IIT-12-Devrev-AI-Agent-007) | 11 |
+|
[YeonwooSung](https://github.com/YeonwooSung) / [MLOps](https://github.com/YeonwooSung/MLOps) | 11 |
+|
[stackitcloud](https://github.com/stackitcloud) / [rag-template](https://github.com/stackitcloud/rag-template) | 10 |
+|
[CeS-3](https://github.com/CeS-3) / [pwn.hust.college](https://github.com/CeS-3/pwn.hust.college) | 10 |
+|
[CdC-SI](https://github.com/CdC-SI) / [ZAS-EAK-CopilotGPT](https://github.com/CdC-SI/ZAS-EAK-CopilotGPT) | 10 |
+|
[PhiBrandon](https://github.com/PhiBrandon) / [offer-generator-lightrag](https://github.com/PhiBrandon/offer-generator-lightrag) | 10 |
+|
[brylie](https://github.com/brylie) / [langflow-fastapi-htmx](https://github.com/brylie/langflow-fastapi-htmx) | 10 |
+
+_Generated using [github-dependents-info](https://github.com/nvuillam/github-dependents-info), by [Nicolas Vuillamy](https://github.com/nvuillam)_
\ No newline at end of file
diff --git a/components-mdx/docs-mcp-server-installation.mdx b/components-mdx/docs-mcp-server-installation.mdx
new file mode 100644
index 000000000..ab8780670
--- /dev/null
+++ b/components-mdx/docs-mcp-server-installation.mdx
@@ -0,0 +1,151 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+
+
+
+
+
+
+
+Manual configuration
+ +Add the following to your `mcp.json`: + +```json +{ + "mcpServers": { + "langfuse-docs": { + "url": "https://langfuse.com/api/mcp" + } + } +} +``` + +
+
+
+Manual configuration
+ +Alternatively, add the following to your settings file: + +- **User scope**: `~/.claude/settings.json` +- **Project scope**: `your-repo/.claude/settings.json` +- **Local scope**: `your-repo/.claude/settings.local.json` + +```json +{ + "mcpServers": { + "langfuse-docs": { + "transportType": "http", + "url": "https://langfuse.com/api/mcp", + "verifySsl": true + } + } +} +``` + +**One-liner JSON import** + +```bash +claude mcp add-json langfuse-docs \ + '{"type":"http","url":"https://langfuse.com/api/mcp"}' +``` + +Once added, start a Claude Code session (`claude`) and type `/mcp` to confirm the connection. + +
+ Stay updated: Star Langfuse on [GitHub](https://github.com/langfuse/langfuse) to get instant notifications about new releases.
+
+ 
+
+
+
+
+
+
+
diff --git a/components/CTACard.tsx b/components/CTACard.tsx
new file mode 100644
index 000000000..1cb15df79
--- /dev/null
+++ b/components/CTACard.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface CTACardProps {
+ title: string;
+ description: string;
+ children?: React.ReactNode;
+ className?: string;
+ showArrow?: boolean;
+}
+
+export function CTACard({ title, description, children, className, showArrow = false }: CTACardProps) {
+ return (
+
{authors.map((author) => (
- 2}
+ />
))}
);
};
-export const Author = (props: { author: string }) => {
+export const Author = (props: { author: string; hideLastName?: boolean }) => {
const author =
allAuthors[props.author] ??
Object.values(allAuthors).find(
@@ -87,8 +46,12 @@ export const Author = (props: { author: string }) => {
className="rounded-full"
alt={`Picture ${author.name}`}
/>
-
- {author.name}
+
+ {props.hideLastName ? author.firstName : author.name}
+
+
+
+ {children && (
+ + {title} +
++ {description} +
+
+ {showArrow ? (
+ React.Children.map(children, (child) => {
+ if (React.isValidElement(child) && (child.type === Button || child.props.asChild)) {
+ return React.cloneElement(child, {
+ children: (
+
+ )}
+
+ {child.props.children}
+
+ )
+ } as any);
+ }
+ return child;
+ })
+ ) : (
+ children
+ )}
+
-
+
diff --git a/components/DocsContributors.tsx b/components/DocsContributors.tsx
new file mode 100644
index 000000000..11258c455
--- /dev/null
+++ b/components/DocsContributors.tsx
@@ -0,0 +1,112 @@
+import { useRouter } from "next/router";
+import { useState, useEffect } from "react";
+import { allAuthors } from "./Authors";
+import contributorsData from "../data/generated/contributors.json";
+import Image from "next/image";
+
+const getContributors = (path: string): string[] => {
+ // Try exact path first, then with/without /index suffix
+ const variants = [
+ path,
+ path.endsWith("/index") ? path.slice(0, -6) : `${path}/index`,
+ ];
+
+ for (const variant of variants) {
+ const contributors = contributorsData[variant];
+ if (contributors?.length > 0) return contributors;
+ }
+
+ return [];
+};
+
+const processContributor = (username: string) => {
+ const author = Object.values(allAuthors).find(
+ (author) => author.github === username
+ );
+
+ if (author) {
+ // Internal contributor
+ return {
+ username,
+ name: author.name,
+ title: author.title || "Team Member",
+ image: author.image,
+ profileUrl:
+ "twitter" in author
+ ? `https://twitter.com/${author.twitter}`
+ : `https://github.com/${author.github}`,
+ };
+ }
+
+ // External contributor
+ return {
+ username,
+ name: username,
+ title: "Contributor",
+ image: `https://github.com/${username}.png?size=64`,
+ profileUrl: `https://github.com/${username}`,
+ };
+};
+
+export const DocsContributors = () => {
+ const router = useRouter();
+ const currentPath = router.asPath.split("#")[0].split("?")[0];
+ const [showAll, setShowAll] = useState(false);
+
+ // Reset showAll when the page changes
+ useEffect(() => {
+ setShowAll(false);
+ }, [currentPath]);
+
+ const contributors = getContributors(currentPath);
+ if (contributors.length === 0) return null;
+
+ const processedContributors = contributors.map(processContributor);
+ const displayedContributors = showAll
+ ? processedContributors
+ : processedContributors.slice(0, 3);
+ const remainingCount = Math.max(0, processedContributors.length - 3);
+
+ return (
+
+
{category}
{pages.map((page) => (
- word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ")
+ }
icon={
+
))}
+
+ );
+};
diff --git a/components/EnterpriseLogos.tsx b/components/EnterpriseLogos.tsx
new file mode 100644
index 000000000..994622aaf
--- /dev/null
+++ b/components/EnterpriseLogos.tsx
@@ -0,0 +1,9 @@
+import { EnterpriseLogoGrid } from "./shared/EnterpriseLogoGrid";
+
+export const EnterpriseLogos = () => {
+ return (
+
+ Contributors
+
+
+ {displayedContributors.map((contributor) => (
+
+
+
+
+
+ ))}
+ {remainingCount > 0 && !showAll && (
+
+ )}
+
+ {contributor.name}
+
+
+ {contributor.title}
+
+
+
+ );
+};
diff --git a/components/FeatureOverview.tsx b/components/FeatureOverview.tsx
new file mode 100644
index 000000000..57a81719c
--- /dev/null
+++ b/components/FeatureOverview.tsx
@@ -0,0 +1,95 @@
+import {
+ TextQuote,
+ GitPullRequestArrow,
+ ThumbsUp,
+ Database,
+} from "lucide-react";
+
+const features = [
+ {
+ icon: TextQuote,
+ title: "Tracing",
+ items: [
+ "Log traces",
+ "Lowest level transparency",
+ "Understand cost and latency",
+ ],
+ },
+ {
+ icon: GitPullRequestArrow,
+ title: "Prompts",
+ items: [
+ "Version control and deploy",
+ "Collaborate on prompts",
+ "Test prompts and models",
+ ],
+ },
+ {
+ icon: ThumbsUp,
+ title: "Evals",
+ items: [
+ "Measure output quality",
+ "Monitor production health",
+ "Test changes in development",
+ ],
+ },
+];
+
+const platformFeature = {
+ icon: Database,
+ title: "Platform",
+ items: [
+ "API-first architecture",
+ "Data exports to blob storage",
+ "Enterprise security and administration",
+ ],
+};
+
+export const FeatureOverview = () => {
+ return (
+
+ {/* Top 3 cards */}
+
+ );
+};
diff --git a/components/FooterMenu.tsx b/components/FooterMenu.tsx
index a5acae2bc..e5634ca83 100644
--- a/components/FooterMenu.tsx
+++ b/components/FooterMenu.tsx
@@ -1,8 +1,12 @@
import Link from "next/link";
+import InkeepChatButton from "./inkeep/InkeepChatButton";
const menuItems: {
heading: string;
- items: { name: string; href: string; notificationCount?: number }[];
+ items: (
+ | { name: string; href: string; notificationCount?: number }
+ | "separator"
+ )[];
}[] = [
{
heading: "Platform",
@@ -20,7 +24,7 @@ const menuItems: {
href: "/docs/scores/overview",
},
{
- name: "Manual Annotation",
+ name: "Human Annotation",
href: "/docs/scores/annotation",
},
{
@@ -42,7 +46,7 @@ const menuItems: {
items: [
{
name: "Python SDK",
- href: "/docs/sdk/python",
+ href: "/docs/sdk/python/sdk-v3",
},
{
name: "JS/TS SDK",
@@ -50,47 +54,43 @@ const menuItems: {
},
{
name: "OpenAI SDK",
- href: "/docs/integrations/openai/get-started",
+ href: "/integrations/model-providers/openai-py",
},
{
name: "Langchain",
- href: "/docs/integrations/langchain/tracing",
+ href: "/integrations/frameworks/langchain",
},
{
name: "Llama-Index",
- href: "/docs/integrations/llama-index/get-started",
+ href: "/integrations/frameworks/llamaindex",
},
{
name: "Litellm",
- href: "/docs/integrations/litellm",
+ href: "/integrations/gateways/litellm",
},
{
name: "Dify",
- href: "/docs/integrations/dify",
+ href: "/integrations/no-code/dify",
},
{
name: "Flowise",
- href: "/docs/integrations/flowise",
+ href: "/integrations/no-code/flowise",
},
{
name: "Langflow",
- href: "/docs/integrations/langflow",
+ href: "/integrations/no-code/langflow",
},
{
name: "Vercel AI SDK",
- href: "/docs/sdk/typescript/example-vercel-ai",
+ href: "/integrations/frameworks/vercel-ai-sdk",
},
{
name: "Instructor",
- href: "/docs/integrations/instructor",
- },
- {
- name: "Mirascope",
- href: "/docs/integrations/mirascope",
+ href: "/integrations/frameworks/instructor",
},
{
name: "API",
- href: "https://api.reference.langfuse.com/",
+ href: "/docs/api",
},
],
},
@@ -103,8 +103,8 @@ const menuItems: {
href: "/demo",
},
{
- name: "Video demo (3 min)",
- href: "/video",
+ name: "Video demo (10 min)",
+ href: "/watch-demo",
},
{
name: "Changelog",
@@ -124,37 +124,65 @@ const menuItems: {
},
{
name: "Self-hosting",
- href: "/docs/deployment/self-host",
+ href: "/self-hosting",
},
{
name: "Open Source",
- href: "/docs/open-source",
+ href: "/open-source",
},
{ name: "Why Langfuse?", href: "/why" },
+ {
+ name: "AI Engineering Library",
+ href: "/library",
+ },
{
name: "Status",
href: "https://status.langfuse.com",
},
+ {
+ name: "🇯🇵 Japanese",
+ href: "/jp",
+ },
+ {
+ name: "🇰🇷 Korean",
+ href: "/kr",
+ },
+ {
+ name: "🇨🇳 Chinese",
+ href: "/cn",
+ },
],
},
{
heading: "About",
items: [
{ name: "Blog", href: "/blog" },
- { name: "Careers", href: "/careers", notificationCount: 2 },
+ { name: "Careers", href: "/careers" },
{
name: "About us",
href: "/about",
},
+ {
+ name: "Customers",
+ href: "/customers",
+ },
{ name: "Support", href: "/support" },
{
- name: "Schedule Demo",
- href: "/schedule-demo",
+ name: "Talk to us",
+ href: "/talk-to-us",
},
{
name: "OSS Friends",
href: "/oss-friends",
},
+ {
+ name: "Twitter",
+ href: "https://x.com/langfuse",
+ },
+ {
+ name: "LinkedIn",
+ href: "https://www.linkedin.com/company/langfuse/",
+ },
],
},
@@ -171,6 +199,23 @@ const menuItems: {
name: "Privacy",
href: "/privacy",
},
+ "separator",
+ {
+ name: "SOC 2 Type II",
+ href: "/security/soc2",
+ },
+ {
+ name: "ISO 27001",
+ href: "/security/iso27001",
+ },
+ {
+ name: "GDPR",
+ href: "/security/gdpr",
+ },
+ {
+ name: "HIPAA",
+ href: "/security/hipaa",
+ },
],
},
];
@@ -185,21 +230,30 @@ const FooterMenu = () => {
{menu.heading}
+ {features.map((feature) => (
+
+
+ {/* Platform card - full width */}
+
+
+ ))}
+
+
+ + {feature.title} +
+-
+ {feature.items.map((item, itemIndex) => (
+
- + + {item} + + ))} +
+
+
+
+ + {platformFeature.title} +
+-
+ {platformFeature.items.map((item, itemIndex) => (
+
- + + {item} + + ))} +
-
- {menu.items.map((item) => (
-
- - - {item.name} - - {item.notificationCount > 0 && ( - - {item.notificationCount} - - )} - - ))} + {menu.items.map((item, index) => { + if (item === "separator") { + return ( +
-
+
+
+ );
+ }
+ return (
+ - + + {item.name} + + {item.notificationCount > 0 && ( + + {item.notificationCount} + + )} + + ); + })}
+
+ );
+};
export const Frame = ({
children,
@@ -12,24 +57,90 @@ export const Frame = ({
border?: boolean;
fullWidth?: boolean;
transparent?: boolean;
-}) => (
-
+ 
e.stopPropagation()}
+ />
+
+
+
-
-);
+
+ );
+};
diff --git a/components/GitHubBadge.tsx b/components/GitHubBadge.tsx
index bd60bfd47..6ec3dca9d 100644
--- a/components/GitHubBadge.tsx
+++ b/components/GitHubBadge.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { getGitHubStars } from "@/lib/github-stars";
import IconGithub from "./icons/github";
export const GithubMenuBadge = () => (
@@ -19,23 +19,14 @@ export const GithubMenuBadge = () => (
);
export const StarCount = () => {
- const [stars, setStars] = useState*]:mt-0",
- fullWidth && "max-w-full",
- transparent && "bg-transparent",
- border && "[&>*]:-mb-1"
+}) => {
+ const frameRef = useRef(null);
+ const [zoomedImage, setZoomedImage] = useState<{ src: string; alt: string } | null>(null);
+
+ useEffect(() => {
+ const frame = frameRef.current;
+ if (!frame) return;
+
+ const handleImageClick = (e: Event) => {
+ const target = e.target as HTMLImageElement;
+ if (target.tagName === 'IMG') {
+ // Only handle clicks on desktop (screens wider than 500px)
+ if (window.innerWidth <= 500) {
+ return;
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+ const src = target.src;
+ const alt = target.alt || 'Image';
+ if (src) {
+ setZoomedImage({ src, alt });
+ }
+ }
+ };
+
+ const updateImageCursors = () => {
+ const images = frame.querySelectorAll('img');
+ images.forEach(img => {
+ if (window.innerWidth > 500) {
+ img.style.cursor = 'pointer';
+ img.style.transition = 'opacity 0.2s ease';
+ } else {
+ img.style.cursor = 'default';
+ img.style.transition = 'none';
+ }
+ });
+ };
+
+ // Add click event listener to the frame
+ frame.addEventListener('click', handleImageClick);
+
+ // Initial cursor setup
+ updateImageCursors();
+
+ // Add resize listener to update cursors when screen size changes
+ window.addEventListener('resize', updateImageCursors);
+
+ return () => {
+ frame.removeEventListener('click', handleImageClick);
+ window.removeEventListener('resize', updateImageCursors);
+ };
+ }, []);
+
+ return (
+ <>
+ setZoomedImage(null)}
+ />
)}
- >
- {children}
-
-
+
+
+ {zoomedImage && (
+ *]:mt-0 [&>*]:mb-0 [&>img]:block [&>img]:w-full [&>img]:h-auto [&>img]:leading-none [&>img]:align-top",
+ fullWidth && "max-w-full",
+ transparent && "bg-transparent",
+ border
+ )}
+ >
+ {children}
+
+
{buttons.map((button) => (
))}
diff --git a/components/LogoContextMenu.tsx b/components/LogoContextMenu.tsx
index fbab097ab..f826272d8 100644
--- a/components/LogoContextMenu.tsx
+++ b/components/LogoContextMenu.tsx
@@ -1,3 +1,4 @@
+import { DropdownMenuPortal } from "@radix-ui/react-dropdown-menu";
import {
DropdownMenuContent,
DropdownMenuTrigger,
@@ -11,39 +12,75 @@ const LogoContextMenu: React.FC<{
open: boolean;
setOpen: (open: boolean) => void;
}> = ({ open, setOpen }) => {
+ const handleAction = (
+ e: React.MouseEvent,
+ url: string,
+ isDownload: boolean
+ ) => {
+ e.preventDefault();
+
+ if (isDownload) {
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = url.split("/").pop() || ""; // Get filename from URL
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ } else {
+ window.open(url, "_blank", "noopener,noreferrer");
+ }
+ };
+
return (
+ {versionLabel && (
+
+ {versionLabel}
+
+ )}
+ {shouldShowCopyButton &&
+ )}
+
{cookbook ? (
-
-
- );
-};
-
export const DocsSupport = () => {
return (
- Subscribe to updates
-
-
-
- ("");
const [submitting, setSubmitting] = useState(false);
+ const [commentSubmitting, setCommentSubmitting] = useState(false);
+
+ // Controls the prominent follow-up dialog shown after any rating
+ const [dialogOpen, setDialogOpen] = useState(false);
const handleFeedbackSelection = (newSelection: "positive" | "negative") => {
+ // For both positive and negative feedback, open dialog immediately
+ setSelected(newSelection);
+ setDialogOpen(true);
+ setFeedbackComment("");
setSubmitting(true);
+
fetch("/api/feedback", {
method: "POST",
body: JSON.stringify({
@@ -107,15 +235,18 @@ export const DocsFeedback = () => {
}),
})
.then(() => {
- setFeedbackComment("");
- setSelected(newSelection);
setSubmitting(false);
})
- .catch(() => setSelected(null));
+ .catch(() => {
+ setSelected(null);
+ setDialogOpen(false);
+ setSubmitting(false);
+ });
};
const handleFeedbackCommentSubmit = () => {
- setSubmitting(true);
+ setCommentSubmitting(true);
+
fetch("/api/feedback", {
method: "POST",
body: JSON.stringify({
@@ -127,76 +258,154 @@ export const DocsFeedback = () => {
.then(() => {
setSelected("submitted");
setFeedbackComment("");
- setSubmitting(false);
+ setCommentSubmitting(false);
})
- .catch(() => setSelected(null));
+ .catch(() => {
+ setSelected(null);
+ setDialogOpen(false);
+ setCommentSubmitting(false);
+ });
};
return (
-
- Questions? We're here to help -
-
-
-
-
-
-
+
+
);
};
@@ -96,9 +215,18 @@ export const DocsFeedback = () => {
>(null);
const [feedbackComment, setFeedbackComment] = useState
-
- {selected === null - ? "Was this page useful?" - : selected === "positive" - ? "What was most useful?" - : selected === "negative" - ? "What can we improve?" - : "Thanks for your feedback!"} -
- {selected === null ? ( -
-
-
-
- ) : selected === "positive" || selected === "negative" ? (
-
-