Docs: Bot route updates

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/11106
GitOrigin-RevId: aed07c10184dfb3d40ddb0d6fcbf818c7b169ed4

docs/docs/schema/postgres/input-validations.mdx

@@ -146,7 +146,7 @@ The `type` determines the interface for the input validation, which initially on
 The `definition` field provides the necessary context for communicating and submitting the data for input validation. It
 is an object with the following fields.
 
-- `url` - _Required_, a [string value](https://hasura.io/docs/2.0/api-reference/syntax-defs/#webhookurl) which
+- `url` - _Required_, a [string value](/api-reference/syntax-defs/#webhookurl) which
   supports templating environment variables.
 - `headers` - _Optional_, a list of headers to be sent to the URL.
 - `forward_client_headers` - _Optional_, default is `false`. If set to `true` the client headers are forwarded to the

docs/docusaurus.config.js

@@ -5,10 +5,22 @@ const path = require('path');
 const lightCodeTheme = require('prism-react-renderer/themes/vsLight');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
+const DOCS_SERVER_ROOT_URLS = {
+  development: 'localhost:8000',
+  production: 'website-api.hasura.io',
+  staging: 'website-api.stage.hasura.io',
+};
+
+const DOCS_SERVER_URLS = {
+  development: `http://${DOCS_SERVER_ROOT_URLS.development}`,
+  production: `https://${DOCS_SERVER_ROOT_URLS.production}`,
+  staging: `https://${DOCS_SERVER_ROOT_URLS.staging}`,
+};
+
 const BOT_ROUTES = {
-  development: 'ws://localhost:8000/bot/query',
+  development: `ws://${DOCS_SERVER_ROOT_URLS.development}/bot/query`,
-  production: 'wss://website-api.hasura.io/docs-services/docs-server/bot/query',
+  production: `wss://${DOCS_SERVER_ROOT_URLS.production}/docs-services/docs-server/bot/query`,
-  staging: 'wss://website-api.stage.hasura.io/docs-services/docs-server/bot/query',
+  staging: `wss://${DOCS_SERVER_ROOT_URLS.staging}/docs-services/docs-server/bot/query`,
 };
 
 /** @type {import('@docusaurus/types').Config} */
@@ -16,7 +28,7 @@ const config = {
   title: 'Hasura GraphQL Docs',
   tagline: 'Instant GraphQL on all your data',
   url: 'https://hasura.io',
-  baseUrl: '/docs/2.0',
+  baseUrl: process.env.CF_PAGES === '1' ? '/' : '/docs/2.0',
   trailingSlash: true,
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'throw',
@@ -29,19 +41,25 @@ const config = {
       if (process.env.CF_PAGES === '1') {
         return BOT_ROUTES.staging; // if we're on CF pages, use the staging environment
       } else {
-        switch (process.env.release_mode) {
+        const mode = process.env.release_mode;
-          case 'development':
+        if (mode === 'staging') {
-            return BOT_ROUTES.development; // if we're on the development environment, use the local server
+          return BOT_ROUTES.production; // use production route for staging
-          case 'production':
-            return BOT_ROUTES.production;
-          case 'staging':
-            return BOT_ROUTES.production; // if we're in full staging on GCP and not cloudflare pages, use the production environment
-          default:
-            return BOT_ROUTES.development; // default to development if no match (env var not generally set on local dev)
         }
+        return BOT_ROUTES[mode ?? 'development'];
       }
     })(),
-    hasuraVersion: 2,
+    docsServerURL: (() => {
+      if (process.env.CF_PAGES === '1') {
+        return DOCS_SERVER_URLS.staging; // if we're on CF pages, use the staging environment
+      } else {
+        const mode = process.env.release_mode;
+        if (mode === 'staging') {
+          return DOCS_SERVER_URLS.production; // use production route for staging
+        }
+        return DOCS_SERVER_URLS[mode ?? 'development'];
+      }
+    })(),
+    hasuraVersion: 3,
     DEV_TOKEN: process.env.DEV_TOKEN,
   },
   scripts: [],
@@ -167,8 +185,8 @@ const config = {
       announcementBar: {
         id: 'announcementBar-1', // Increment on change
         content: `The new version of Hasura has launched. <a target="_blank" rel="noopener" href="https://hasura.io/docs/3.0/getting-started/quickstart/?utm_source=hasura&utm_medium=v2_docs">Get started with Hasura DDN here.</a>`,
-        // isCloseable: true,
+        isCloseable: false,
-        // backgroundColor: '#fafbfc',
+        // backgroundColor: '#478BCA',
         // textColor: '#091E42',
       },
       // announcementBar: {

docs/src/components/AiChatBot/AiChatBot.tsx

@@ -332,8 +332,7 @@ export function AiChatBot({ style }) {
                   </div>
                   {messages.length > 3 && !isResponding && (
                     <form
-                      id="bad-response-form"
+                      id={'bad-response-form'}
-                      className="bad-response-form"
                       onSubmit={e => {
                         e.preventDefault();
                         handleBadBotResponse();
@@ -341,8 +340,8 @@ export function AiChatBot({ style }) {
                     >
                       <div className={'flex'}>
                         <button
-                          className="thumbs-down-button"
                           type="button"
+                          className="thumbs-down-button"
                           onClick={() => {
                             setBadResponse({
                               responseText: null,
@@ -358,13 +357,14 @@ export function AiChatBot({ style }) {
                           <div className="bad-response-container">
                             <textarea
                               rows={4}
+                              className={'w-full bg-none text-gray-700 placeholder-gray-500'}
                               onChange={e =>
                                 setBadResponse(prevState => ({ ...prevState, responseText: e.target.value }))
                               }
                               placeholder={'Sorry about that. Please tell us how we can improve.'}
                             ></textarea>
-                            <button className="feedback-submit-button" type={'submit'}>
+                            <button type={'submit'} className={'feedback-submit-button'}>
-                              Submit Feedback
+                              Submit
                             </button>
                           </div>
                         )}

docs/src/components/AiChatBot/styles.css

@@ -179,7 +179,7 @@
   cursor: pointer;
 }
 
-.chat-popup .bad-response-form .thumbs-down-button {
+.chat-popup #bad-response-form .thumbs-down-button {
   background-color: transparent;
   border: none;
 }

docs/src/components/CustomDocItem/index.tsx

@@ -4,9 +4,11 @@ import GraphQLWithHasuraBanner from '@site/src/components/GraphQLWithHasuraBanne
 import CustomFooter from '@site/src/components/CustomFooter';
 import styles from './styles.module.scss';
 import { Redirect } from '@docusaurus/router';
-import { AiChatBot } from "@site/src/components/AiChatBot/AiChatBot";
+import { AiChatBot } from '@site/src/components/AiChatBot/AiChatBot';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import { NewVersionModal } from "@site/src/components/NewVersionModal/NewVersionModal";
+import { NewVersionModal } from '@site/src/components/NewVersionModal/NewVersionModal';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 const CustomDocItem = props => {
   useEffect(() => {
     // This function is adds <wbr> tags to code blocks within a table
@@ -56,13 +58,13 @@ const CustomDocItem = props => {
   // redirect them to the index if they attempt to directly navigate to a path with
   // _heading_ in it
   if (props.location.pathname.includes('_heading_')) {
-    return <Redirect to="/docs/2.0/index/" />;
+    return <Redirect to={useBaseUrl('/index/')} />;
   }
 
   return (
     <div
       className={
-        props.location.pathname === `/docs/2.0/index/`
+        props.location.pathname === useBaseUrl('/index/')
           ? `custom_doc_item_wrapper custom_doc_item_wrapper-x-wide`
           : `custom_doc_item_wrapper ${styles['custom_doc_item_wrapper']}`
       }
@@ -70,19 +72,13 @@ const CustomDocItem = props => {
       <ActualDocItem {...props} />
       <div
         className={
-          props.location.pathname === `/docs/2.0/index/` || props.location.pathname.includes('overview')
+          props.location.pathname === useBaseUrl('/index/') || props.location.pathname.includes('overview')
             ? `custom_doc_item_footer-x-wide`
             : styles['custom_doc_item_footer']
         }
       >
-        {/*<PageHelpful />*/}
+        <BrowserOnly fallback={<div>Loading...</div>}>{() => <AiChatBot style={{}} />}</BrowserOnly>
-        <GraphQLWithHasuraBanner />
+        <BrowserOnly fallback={<div>Loading...</div>}>{() => <NewVersionModal />}</BrowserOnly>
-        <BrowserOnly fallback={<div>Loading...</div>}>
-          {() => <AiChatBot/>}
-        </BrowserOnly>
-        <BrowserOnly fallback={<div>Loading...</div>}>
-          {() => <NewVersionModal/>}
-        </BrowserOnly>
         <CustomFooter />
       </div>
     </div>

docs/src/components/Feedback/ScrollToFeedbackButton.tsx

@@ -1,16 +1,16 @@
-import styles from "./styles.module.scss";
+import styles from './styles.module.scss';
-import React from "react";
+import React from 'react';
-
+import useBaseUrl from '@docusaurus/useBaseUrl';
-export const ScrollToFeedbackButton = ({path}: {path: string}) => {
 
+export const ScrollToFeedbackButton = ({ path }: { path: string }) => {
   const scrollToFeedback = () => {
     const feedbackElement = document.getElementById('feedback');
     const y = feedbackElement.getBoundingClientRect().top + window.scrollY - 100;
-    window.scrollTo({top: y, behavior: 'smooth'});
+    window.scrollTo({ top: y, behavior: 'smooth' });
-  }
+  };
 
   // Do not show on Intro page
-  if (path === '/docs/2.0/index/') {
+  if (path === useBaseUrl('/index/')) {
     return null;
   }
 
@@ -18,5 +18,5 @@ export const ScrollToFeedbackButton = ({path}: {path: string}) => {
     <div className={styles.scrollToWrapper} onClick={scrollToFeedback}>
       Feedback 👋
     </div>
-  )
+  );
-}
+};

docs/src/theme/AnnouncementBar/styles.module.css

@@ -15,9 +15,11 @@
   color: var(--ifm-color-black);
   border: 1px solid transparent;
   border-radius: 112px;
-  padding: .75rem 1.4rem;
+  padding: 0.75rem 1.4rem;
   /* shadow/default */
-  box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.06), 0px 1px 3px 0px rgba(28, 38, 63, 0.10);
+  box-shadow:
+    0px 1px 2px 0px rgba(28, 38, 63, 0.06),
+    0px 1px 3px 0px rgba(28, 38, 63, 0.1);
   /*
   Unfortunately we can't make announcement bar render above the navbar
   IE need to use border-bottom instead of shadow
@@ -50,14 +52,15 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
 .announcementBarContent {
   flex: 1 1 auto;
   color: var(--primary-neutral-600);
-  font-size: .938rem;
+  font-size: 0.938rem;
   font-weight: 500;
   padding: 0;
 }
 
 .announcementBarContent a {
-  color: #1E56E3;
+  color: #1e56e3;
   text-decoration: none;
+  text-decoration: underline;
 }
 
 @media print {
@@ -94,14 +97,14 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
 
 [data-theme='dark'] .announcementBar {
   box-shadow: none;
-  border: 1px solid #333E4B;
+  border: 1px solid #333e4b;
-  background-color: #28334F;
+  background-color: #28334f;
 }
 [data-theme='dark'] .announcementBarContent {
-  color: #E5E7EB;
+  color: #e5e7eb;
 }
 [data-theme='dark'] .announcementBarContent a {
-  color: #80A3FF;
+  color: #80a3ff;
 }
 [data-theme='dark'] .announcementWrapper {
   background-color: #1c262f;

docs/src/theme/DocSidebarItem/index.js

@@ -2,20 +2,19 @@ import React from 'react';
 import DocSidebarItemCategory from '@theme/DocSidebarItem/Category';
 import DocSidebarItemLink from '@theme/DocSidebarItem/Link';
 import DocSidebarItemHtml from '@theme/DocSidebarItem/Html';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 export default function DocSidebarItem({ item, ...props }) {
   switch (item.type) {
     case 'category':
       if (item.customProps?.sidebar_pathname) {
         // if there is a custom sidebar_pathname, use it
-        item.href = `/docs/2.0/${item.customProps.sidebar_pathname}/overview/`;
+        item.href = useBaseUrl(`/${item.customProps.sidebar_pathname}/overview/`);
       } else if (item.href === undefined) {
         // if there is no custom sidebar_pathname, use the label with our regex
         // and apparently deal with the Wiki as a special case
         if (item.label != 'Docs Wiki') {
-          item.href = `/docs/2.0/${item.label
+          item.href = useBaseUrl(`/${item.label.toLowerCase().replace(/\s/g, '-')}/overview/`);
-            .toLowerCase()
-            .replace(/\s/g, '-')}/overview/`;
         }
       } else {
         // if it already has a href (such as any category that has an index within the dir), use it