Docs: Chatbot update

PR-URL: hasura/graphql-engine-mono#10577 GitOrigin-RevId: 3694033e02e45076c494c1c09f4b59c37b24b1a9
hasura · Dec 23, 2023 · 3df0b4b · 3df0b4b
1 parent 4ba35c3
commit 3df0b4b
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 79 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -19,8 +19,12 @@ const config = {
   projectName: 'graphql-engine',
   staticDirectories: ['static', 'public'],
   customFields: {
-    docsBotEndpointURL: process.env.NODE_ENV === "development" ? "ws://localhost:8000/hasura-docs-ai" : "wss://hasura-docs-bot.deno.dev/hasura-docs-ai",
+    docsBotEndpointURL:
+      process.env.NODE_ENV === 'development'
+        ? 'ws://localhost:8000/hasura-docs-ai'
+        : 'wss://website-api.hasura.io/chat-bot/hasura-docs-ai',
     hasuraVersion: 2,
+    DEV_TOKEN: process.env.DEV_TOKEN,
   },
   scripts: [],
   webpack: {

diff --git a/docs/package.json b/docs/package.json
@@ -41,6 +41,7 @@
     "react-dom": "^17.0.2",
     "react-transition-group": "^4.4.2",
     "sass": "^1.49.8",
+    "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

diff --git a/docs/src/components/AiChatBot/AiChatBot.tsx b/docs/src/components/AiChatBot/AiChatBot.tsx
@@ -1,9 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
-import Markdown from 'markdown-to-jsx';
+import Markdown from 'markdown-to-jsx'
 import './styles.css';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { CloseIcon, RespondingIconGray, SparklesIcon } from '@site/src/components/AiChatBot/icons';
-import useLocalStorage from "@site/src/components/AiChatBot/useLocalStorage";
+import { useLocalStorage } from 'usehooks-ts'
+import profilePic from '@site/static/img/hasura-ai-profile-pic.png';
+
 
 interface Message {
   userMessage: string;
@@ -37,7 +39,7 @@ const initialMessages: Message[] = [
 ];
 
 
-function AiChatBot() {
+export function AiChatBot() {
   // Get the docsBotEndpointURL and hasuraVersion from the siteConfig
   const {
     siteConfig: { customFields },
@@ -65,7 +67,7 @@ function AiChatBot() {
   // Enables scrolling to the end
   const scrollDiv = useRef<HTMLDivElement>(null);
 
-  const { docsBotEndpointURL, hasuraVersion } = customFields as { docsBotEndpointURL: string; hasuraVersion: number };
+  const { docsBotEndpointURL, hasuraVersion, DEV_TOKEN } = customFields as { docsBotEndpointURL: string; hasuraVersion: number; DEV_TOKEN: string };
 
   const storedUserID = localStorage.getItem('hasuraDocsUserID') as string | "null";
 
@@ -85,7 +87,6 @@ function AiChatBot() {
     setIsAutoScroll(atBottom);
   };
 
-
   // Update the ref when the currentMessage changes ie: when the endpoint is responding
   useEffect(() => {
     currentMessageRef.current = currentMessage;
@@ -96,8 +97,13 @@ function AiChatBot() {
     let websocket;
     let reconnectInterval;
 
+    const queryDevToken = process.env.NODE_ENV === "development" && DEV_TOKEN ? `&devToken=${DEV_TOKEN}` : "";
+
+
+    console.log("process.env.NODE_ENV", process.env.NODE_ENV);
+
     const connectWebSocket = () => {
-      websocket = new WebSocket(encodeURI(`${docsBotEndpointURL}?version=${hasuraVersion}&userId=${storedUserID}`));
+      websocket = new WebSocket(encodeURI(`${docsBotEndpointURL}?version=${hasuraVersion}&userId=${storedUserID}${queryDevToken}`));
 
       websocket.onopen = () => {
         console.log('Connected to the websocket');
@@ -204,9 +210,12 @@ function AiChatBot() {
           <div className="info-bar">
             <div className={"bot-name-pic-container"}>
               <div className="bot-name">HasuraAI</div>
-              <img src={"/docs/img/hasura-ai-profile-pic.png"} height={30} width={30} className="bot-pic"/>
+              <img src={profilePic} height={30} width={30} className="bot-pic"/>
             </div>
-            <button className="clear-button" onClick={() => setMessages(initialMessages)}>Clear</button>
+            <button className="clear-button" onClick={() => {
+              setMessages(initialMessages)
+              setCurrentMessage({ userMessage: '', botResponse: '' });
+            }}>Clear</button>
           </div>
           <div className="messages-container" onScroll={handleScroll} ref={scrollDiv}>
             {messages.map((msg, index) => (
@@ -266,6 +275,4 @@ function AiChatBot() {
       )}
     </div>
   );
-}
-
-export default AiChatBot;
+}
diff --git a/docs/src/components/AiChatBot/styles.css b/docs/src/components/AiChatBot/styles.css
@@ -76,6 +76,10 @@
     color: #333;
 }
 
+.messages-container pre {
+    background-color: #8f8f8f;
+}
+
 .formatted-text a {
     color: blue;
     text-decoration: underline;
@@ -86,7 +90,7 @@
     flex: 1;
 }
 
-.message {
+.chat-popup .message {
     border-radius: 8px;
     padding: 10px 15px;
     margin: 5px 0;
@@ -131,7 +135,7 @@
 .responding-message {
 }
 
-input {
+.chat-popup input {
     width: 80%;
     padding: 10px;
     border-radius: 5px 0 0 5px;
@@ -142,25 +146,25 @@ input {
     flex: 1;
 }
 
-.input-container {
+.chat-popup .input-container {
     display: flex;
     margin-top: auto;
     width: 100%;
     font-size: 16px;
     background-color: #fff;
 }
 
-.input-text {
+.chat-popup .input-text {
     font-size: 16px;
     color: #333;
     background-color: white;
 }
 
-.input-text:disabled {
+.chat-popup .input-text:disabled {
     background-color: #eeeeee !important;
 }
 
-.input-button {
+.chat-popup .input-button {
     background-color: #1699e2;
     color: white;
     padding-left: 15px;
@@ -171,11 +175,11 @@ input {
     cursor: pointer;
 }
 
-.input-button:disabled {
+.chat-popup .input-button:disabled {
     background-color: #ababab;
 }
 
-.info-bar {
+.chat-popup .info-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -208,6 +212,6 @@ input {
     font-size: 0.9rem;
 }
 
-html[data-theme=dark] code {
+html[data-theme=dark] .messages-container code {
     background-color: #e0e0e0;
 }
diff --git a/docs/src/components/AiChatBot/useLocalStorage.ts b/docs/src/components/AiChatBot/useLocalStorage.ts
diff --git a/docs/src/components/CustomDocItem/index.tsx b/docs/src/components/CustomDocItem/index.tsx
@@ -5,7 +5,7 @@ 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';
 const CustomDocItem = props => {
   useEffect(() => {
@@ -80,7 +80,7 @@ const CustomDocItem = props => {
         <GraphQLWithHasuraBanner />
         <BrowserOnly fallback={<div>Loading...</div>}>
           {() => <AiChatBot/>}
-          </BrowserOnly>
+        </BrowserOnly>
         <CustomFooter />
       </div>
     </div>

diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -5522,6 +5522,7 @@ __metadata:
     sass: ^1.49.8
     swc-loader: ^0.2.3
     typescript: ^4.8.4
+    usehooks-ts: ^2.9.1
     uuid: ^9.0.0
   languageName: unknown
   linkType: soft
@@ -11431,6 +11432,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usehooks-ts@npm:^2.9.1":
+  version: 2.9.1
+  resolution: "usehooks-ts@npm:2.9.1"
+  peerDependencies:
+    react: ^16.8.0  || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0  || ^17.0.0 || ^18.0.0
+  checksum: 36f1e4142ce23bc019b81d2e93aefd7f2c350abcf255598c21627114a69a2f2f116b35dc3a353375f09c6e4c9b704a04f104e3d10e98280545c097feca66c30a
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"