feat(docs): mount the DocsGPT chat widget

Adds a floating "Ask the docs" bubble to every docs page. docsgpt-react
was already a dependency but nothing imported it, so no widget rendered.

The widget reads window and navigator on mount, so it is lazy-loaded
with ssr: false from a client wrapper. Its light/dark theme follows the
site toggle via next-themes, promoted here from a transitive dependency
to a declared one.

The key comes from NEXT_PUBLIC_DOCSGPT_API_KEY and the host from
NEXT_PUBLIC_DOCSGPT_API_HOST. With no key set the wrapper renders
nothing rather than falling through to the demo key the package defaults
to.

Bumping docsgpt-react to ^0.7.0 also drops a duplicate React. The old
^0.6.3 pin depended on React 18 and npm installed a nested 18.3.1 beside
the app's 19.2.8, which would have thrown an invalid hook call on first
render.
This commit is contained in:
Alex committed 2026-09-12 12:15:08 +01:00
1 parent 74b4ae30f9
commit 3711426c83
4 files changed
+55 -65

No files matched your search

+40
View File
@@ -0,0 +1,40 @@
'use client';
import dynamic from 'next/dynamic';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
// The widget reads window/navigator on mount and ships its own styled-components
// trees, so it must never be prerendered.
const DocsGPTWidget = dynamic(
() => import('docsgpt-react').then((mod) => mod.DocsGPTWidget),
{ ssr: false },
);
const apiHost =
process.env.NEXT_PUBLIC_DOCSGPT_API_HOST || 'https://gptcloud.arc53.com';
const apiKey = process.env.NEXT_PUBLIC_DOCSGPT_API_KEY;
export function DocsGPTChatWidget() {
const { resolvedTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
// No key means no widget. Falling through would silently use the demo key
// baked into the package default.
if (!apiKey || !mounted) return null;
return (
<DocsGPTWidget
apiHost={apiHost}
apiKey={apiKey}
theme={resolvedTheme === 'light' ? 'light' : 'dark'}
buttonText="Ask the docs"
title="Ask DocsGPT"
description="Answers drawn from these docs"
heroTitle="Ask anything about DocsGPT"
heroDescription="Answers are generated from this documentation. Check the sources for anything you plan to rely on."
/>
);
}