diff --git a/docs/app/layout.jsx b/docs/app/layout.jsx index 85911381..040d1781 100644 --- a/docs/app/layout.jsx +++ b/docs/app/layout.jsx @@ -5,6 +5,7 @@ import { getPageMap } from 'nextra/page-map'; import { Footer, Layout, Navbar } from 'nextra-theme-docs'; import 'nextra-theme-docs/style.css'; +import { DocsGPTChatWidget } from '../components/DocsGPTChatWidget'; import CuteLogo from '../public/cute-docsgpt.png'; import themeConfig from '../theme.config'; @@ -79,6 +80,7 @@ export default async function RootLayout({ children }) { > {children} + diff --git a/docs/components/DocsGPTChatWidget.jsx b/docs/components/DocsGPTChatWidget.jsx new file mode 100644 index 00000000..785f461b --- /dev/null +++ b/docs/components/DocsGPTChatWidget.jsx @@ -0,0 +1,48 @@ +'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'; + +// Public embed token for the docs agent, the same way every documented +// DocsGPT embed carries one. It reaches the browser either way, since +// NEXT_PUBLIC_* is inlined at build time. Abuse is capped by the agent's +// daily request and token limits, so rotate the agent key if it needs +// revoking. NEXT_PUBLIC_DOCSGPT_API_KEY overrides it for staging. +const apiKey = + process.env.NEXT_PUBLIC_DOCSGPT_API_KEY || + '0e714713-1bc6-4aae-a595-aa0b3bf317b3'; + +export function DocsGPTChatWidget() { + const { resolvedTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + + useEffect(() => setMounted(true), []); + + // Hold off until next-themes has resolved, so the widget does not flash + // the wrong theme on first paint. + if (!mounted) return null; + + return ( + + ); +} diff --git a/docs/package-lock.json b/docs/package-lock.json index 5ec785aa..ae0e7b0a 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -7,8 +7,9 @@ "license": "MIT", "dependencies": { "@vercel/analytics": "^2.0.1", - "docsgpt-react": "^0.6.3", + "docsgpt-react": "^0.7.0", "next": "^16.3.0", + "next-themes": "^0.4.6", "nextra": "^4.6.1", "nextra-theme-docs": "^4.6.1", "react": "^19.2.8", @@ -311,13 +312,6 @@ "node": ">=6.9.0" } }, - "node_modules/@bpmn-io/snarkdown": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@bpmn-io/snarkdown/-/snarkdown-2.2.0.tgz", - "integrity": "sha512-bVD7FIoaBDZeCJkMRgnBPDeptPlto87wt2qaCjf5t8iLaevDmTPaREd6FpBEGsHlUdHFFZWRk4qAoEC5So2M0Q==", - "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", - "license": "MIT" - }, "node_modules/@braintree/sanitize-url": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.1.2.tgz", @@ -4389,13 +4383,12 @@ } }, "node_modules/docsgpt-react": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/docsgpt-react/-/docsgpt-react-0.6.3.tgz", - "integrity": "sha512-sG2sb129O76ux2KbQJLEJ/rD1CCaO3vAKC4fN8/Ks5GaATC9lbavZy/PH75Y/q0bOMsPkh/Kdq6xSfGTfTIAuA==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/docsgpt-react/-/docsgpt-react-0.7.0.tgz", + "integrity": "sha512-/noRUe3+5pudINS+nGYq4aN5NwNI9LC+teU8g23r8QxKubk8/xybFt6HS0ZK9JnCnMC/2GbnNL4kSP0IGw0vaA==", "license": "Apache-2.0", "dependencies": { "@babel/plugin-transform-flow-strip-types": "^7.23.3", - "@bpmn-io/snarkdown": "^2.2.0", "@parcel/resolver-glob": "^2.16.4", "@parcel/transformer-svg-react": "^2.16.4", "@parcel/transformer-typescript-tsc": "^2.16.4", @@ -4404,47 +4397,13 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "dompurify": "^3.1.5", - "flow-bin": "^0.306.0", + "flow-bin": "^0.326.0", "markdown-it": "^14.1.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.2.5", + "react-dom": "^19.2.5", "styled-components": "^6.1.8" } }, - "node_modules/docsgpt-react/node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/docsgpt-react/node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" - }, - "peerDependencies": { - "react": "^18.3.1" - } - }, - "node_modules/docsgpt-react/node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - } - }, "node_modules/dompurify": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.0.tgz", @@ -4765,9 +4724,9 @@ } }, "node_modules/flow-bin": { - "version": "0.306.1", - "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.306.1.tgz", - "integrity": "sha512-xcLHE4dGHbsFio7/55YcFgeWttMEvpoC0T9FHj6xDB7frXvi+IQTWuBQtXpWrHPFflaUGF4jpQ1l6Rnlsev+Gw==", + "version": "0.326.0", + "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.326.0.tgz", + "integrity": "sha512-2WUYp7px5GeXLX+c2iFAUbr7093ta2c7bjox0pVTWaA6guMP91WFq3mkGKKzbKCIjqgDJepmMF5UPLafaJGE/A==", "license": "MIT", "bin": { "flow": "cli.js" @@ -5544,18 +5503,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "license": "MIT", - "dependencies": { - "js-tokens": "^3.0.0 || ^4.0.0" - }, - "bin": { - "loose-envify": "cli.js" - } - }, "node_modules/lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", diff --git a/docs/package.json b/docs/package.json index 9830fe61..be4c32e4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -8,8 +8,9 @@ "license": "MIT", "dependencies": { "@vercel/analytics": "^2.0.1", - "docsgpt-react": "^0.6.3", + "docsgpt-react": "^0.7.0", "next": "^16.3.0", + "next-themes": "^0.4.6", "nextra": "^4.6.1", "nextra-theme-docs": "^4.6.1", "react": "^19.2.8", diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx index 7af67307..94f09fd2 100644 --- a/extensions/react-widget/src/components/DocsGPTWidget.tsx +++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx @@ -1,4 +1,3 @@ -'use client'; import React, { useRef } from 'react'; import DOMPurify from 'dompurify'; import styled, { keyframes, css } from 'styled-components';