mirror of
https://github.com/tiennm99/DocsGPT.git
synced 2026-10-13 22:15:10 +00:00
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:
1 parent
74b4ae30f9
commit
3711426c83
4 files changed
+55
-65
No files matched your search
@@ -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."
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user