From f1387877338fdf447405e3b8de156266e3f5c63d Mon Sep 17 00:00:00 2001
From: Gina A <70909035+gndz07@users.noreply.github.com>
Date: Fri, 15 Mar 2024 09:30:04 +0100
Subject: [PATCH] feat: AI assistant for traefikee and proxy documentations

---
 package.json                             |  2 +-
 src/components/nav/Header.tsx            |  2 ++
 src/components/nav/useDocWhizzScript.jsx | 36 ++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/components/nav/useDocWhizzScript.jsx

diff --git a/package.json b/package.json
index 02dcffc..0d588ef 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "web-vitals": "^2.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set PORT=8000 && react-scripts start",
     "build": "react-scripts build",
     "gen-assets": "rimraf static-assets && mkdir -p static-assets && cp build/static/js/*.js static-assets/main-v1.js",
     "test": "react-scripts test",
diff --git a/src/components/nav/Header.tsx b/src/components/nav/Header.tsx
index 3211fa1..9d0e03b 100644
--- a/src/components/nav/Header.tsx
+++ b/src/components/nav/Header.tsx
@@ -6,6 +6,7 @@ import Link from 'components/Link'
 import SkipLink from 'components/Link/Skip'
 import MainNav from 'components/nav/MainNav'
 import DrawerNav from 'components/nav/DrawerNav'
+import useDocWhizzScript from './useDocWhizzScript'
 
 const Nav = styled(FaencyNav)`
   position: fixed;
@@ -120,6 +121,7 @@ const Header = ({ product }: { product?: string }) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [isHeaderScrolled, setHeaderScrolled] = useState(false)
 
+  useDocWhizzScript()
   const demoLink = useMemo(() => {
     if (product === 'hub') return 'https://info.traefik.io/traefik-hub-signup'
 
diff --git a/src/components/nav/useDocWhizzScript.jsx b/src/components/nav/useDocWhizzScript.jsx
new file mode 100644
index 0000000..71b5efc
--- /dev/null
+++ b/src/components/nav/useDocWhizzScript.jsx
@@ -0,0 +1,36 @@
+import { useEffect, useMemo } from 'react'
+
+const WHITELISTED_HOSTNAME = ['localhost', 'doc.traefik.io']
+
+const useDocWhizzScript = () => {
+  const { pathname, hostname } = window.location
+  const product = pathname.split('/')[1]
+
+  const clientId = useMemo(() => {
+    if (WHITELISTED_HOSTNAME.includes(hostname)) {
+      if (product === 'traefik') return '65e8267d7714e3b11a5ce139'
+      if (product === 'traefik-enterprise') return '65f0e20984bd4dfcfe7e58a6'
+
+      return null
+    }
+    return null
+  }, [hostname, product])
+
+  useEffect(() => {
+    if (!!clientId) {
+      const t = document.createElement('script')
+      t.setAttribute('data-id', 'docwhizz-script')
+      t.setAttribute('data-client', clientId)
+      t.crossOrigin = 'anonymous'
+      t.src = 'https://widget.docwhizz.com/index.js'
+      t.type = 'module'
+      document.head.appendChild(t)
+
+      return () => {
+        document.head.removeChild(t)
+      }
+    }
+  }, [clientId])
+}
+
+export default useDocWhizzScript