From 100d4c49cf6d939e80c5655b2c635db437dfb30b Mon Sep 17 00:00:00 2001 From: Valerie Jessup Date: Thu, 23 Mar 2023 17:30:23 -0400 Subject: [PATCH 1/4] chat bot impl --- website/docs/about/introduction.mdx | 3 + website/docusaurus.config.js | 7 + website/src/components/ChatBot/ChatBot.tsx | 156 +++++++++++++++++++++ website/src/components/ChatBot/index.ts | 1 + website/src/css/icons.css | 33 ++++- website/src/css/navbar.css | 3 + website/static/img/qa.png | Bin 0 -> 20731 bytes 7 files changed, 202 insertions(+), 1 deletion(-) create mode 100644 website/src/components/ChatBot/ChatBot.tsx create mode 100644 website/src/components/ChatBot/index.ts create mode 100644 website/static/img/qa.png diff --git a/website/docs/about/introduction.mdx b/website/docs/about/introduction.mdx index 79e147902e..fa96237dc5 100644 --- a/website/docs/about/introduction.mdx +++ b/website/docs/about/introduction.mdx @@ -13,6 +13,7 @@ import RoundedCardGroup from "/src/components/RoundedCard/RoundedCardGroup"; import { RustIcon } from "/src/components/icons/RustIcon"; import useBaseUrl from "@docusaurus/useBaseUrl"; import { Box, Container } from "@mui/system"; +import { ChatBot } from "/src/components/ChatBot"; import WhatIsSwitchboard from "/data/docs/faq_what_is_switchboard.md"; import WhatIsAnOracle from "/data/docs/faq_what_is_an_oracle.md"; @@ -23,6 +24,8 @@ import UseCases from "/data/docs/faq_use_cases.md";
+ + Need Help?
Ask Switchboard Bot a Question!", + }, { type: "search", position: "right", diff --git a/website/src/components/ChatBot/ChatBot.tsx b/website/src/components/ChatBot/ChatBot.tsx new file mode 100644 index 0000000000..619c1ecdf6 --- /dev/null +++ b/website/src/components/ChatBot/ChatBot.tsx @@ -0,0 +1,156 @@ +import React, { useState, useEffect } from "react"; +import { styled } from "@mui/system"; +import { Dialog, Divider, IconButton, TextField } from "@mui/material"; +import SendIcon from "@mui/icons-material/Send"; + +const StyledDialog = styled(Dialog)({ + "& .MuiDialog-paper": { + width: 600, + height: 600, + paddingBottom: "32px", + display: "flex", + flexDirection: "column", + }, +}); + +const StyledHeader = styled("div")({ + justifyContent: "space-between", + flexDirection: "column", + display: "flex", + width: "100%", + padding: "12px 18px 12px 30px", +}); + +const StyledTextField = styled(TextField)({ + "& .MuiOutlinedInput-root": { + height: 48, + border: "solid 1px #6b7c9333", + borderRadius: "8px", + fontSize: "16px", + color: "#425466", + "& fieldset": { + borderColor: "transparent", + }, + "&:hover fieldset": { + borderColor: "transparent", + }, + "&.Mui-focused fieldset": { + borderColor: "transparent", + }, + }, +}); + +enum Sender { + "bot", + "user", +} + +interface Message { + sender: Sender; + message: string; +} + +const ChatBot = (props: { open: boolean }) => { + const [questionInput, setQuestionInput] = useState(""); + const [messageHistory, setMessageHistory] = useState([ + { + sender: Sender.bot, + message: "Welcome to Switchboard Chat! Ask me a question below.", + }, + ]); + const [open, setOpen] = useState(true); + + // need to set up session storage to keep track of message history + useEffect(() => { + const messagesFromStorage = sessionStorage.getItem("messageHistory"); + if (messagesFromStorage) setMessageHistory(JSON.parse(messagesFromStorage)); + }, []); + + useEffect(() => { + sessionStorage.setItem( + "messageHistory", + // clear any error states + JSON.stringify(messageHistory) + ); + }, [messageHistory]); + + const onQuestionInputChange = (e: React.ChangeEvent) => { + setQuestionInput(e.target.value); + }; + + const submitQuestion = () => { + messageHistory.push({ sender: Sender.user, message: questionInput }); + setQuestionInput(""); + }; + + const onQuestionKeyDown = (event: React.KeyboardEvent) => { + if (event.key === "Enter") { + submitQuestion(); + } + }; + + return ( + setOpen(false)}> + + + Chat with Switchboard Bot + + Ask a question and the Switchboard Bot will try to help! + + +
+ {messageHistory.map((message: Message, idx: number) => { + const userMessage = message.sender === Sender.user; + return ( +
+ {message.message} +
+ ); + })} +
+
+ +
+ + + + +
+
+ + ); +}; + +export default ChatBot; diff --git a/website/src/components/ChatBot/index.ts b/website/src/components/ChatBot/index.ts new file mode 100644 index 0000000000..ad140c6b16 --- /dev/null +++ b/website/src/components/ChatBot/index.ts @@ -0,0 +1 @@ +export { default as ChatBot } from "./ChatBot"; diff --git a/website/src/css/icons.css b/website/src/css/icons.css index 0549ebf6e6..89e6738886 100644 --- a/website/src/css/icons.css +++ b/website/src/css/icons.css @@ -14,6 +14,38 @@ html[data-theme="dark"] .instruction-icon { color: #ffcb4c; } +/* Ask Me Icon */ +.header-askme-link::before { + content: ""; + position: relative; + width: 28px; + height: 28px; + display: inline-block; + background: url("/img/qa.png") no-repeat; + background-size: 28px; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +.header-askme-link:hover .header-askme-tooltip { + visibility: visible; +} + +.header-askme-link .header-askme-tooltip { + visibility: hidden; + padding: 5px 16px; + border-radius: 6px; + font-size: 16px; + font-weight: 500; + top: 80%; + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; + border: solid 1px gray; + background-color: white; + position: absolute; + text-align: center; + z-index: 1; + margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ +} + /* Github Icon */ .header-github-link:hover { opacity: 0.6; @@ -35,7 +67,6 @@ html[data-theme="dark"] .instruction-icon { display: none; } - /* Aptos Icon */ .header-aptos-link::before { content: ""; diff --git a/website/src/css/navbar.css b/website/src/css/navbar.css index 233479dc5e..362b9254d7 100644 --- a/website/src/css/navbar.css +++ b/website/src/css/navbar.css @@ -12,6 +12,9 @@ padding: 0 1vw; overflow-wrap: break-word; } +.askme_btn { + border-radius: 16px; +} html[data-theme="dark"] .navbar { border-bottom: solid 1px #8998aa; diff --git a/website/static/img/qa.png b/website/static/img/qa.png new file mode 100644 index 0000000000000000000000000000000000000000..cc686e0325fb021030b8158ea8807480bac00f78 GIT binary patch literal 20731 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 Qs1W4k>4$#&C-(CH01S1nBLDyZ literal 0 HcmV?d00001 From 684d2d03c1b3bf8258a0a196a3de5e22eee5b12f Mon Sep 17 00:00:00 2001 From: Valerie Jessup Date: Mon, 27 Mar 2023 11:19:35 -0400 Subject: [PATCH 2/4] Fix chat bot navbar and scrolling of modal --- website/docusaurus.config.js | 5 +- .../ChainComponent/ChainComponent2.tsx | 74 +++++---- website/src/components/ChatBot/ChatBot.tsx | 143 ++++++++++++++++-- .../components/NavbarItems/ChatBotIcon.tsx | 47 ++++++ website/src/css/icons.css | 32 +--- .../src/theme/NavbarItem/ComponentTypes.tsx | 2 + website/src/types/png.d.ts | 4 + 7 files changed, 220 insertions(+), 87 deletions(-) create mode 100644 website/src/components/NavbarItems/ChatBotIcon.tsx create mode 100644 website/src/types/png.d.ts diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 79b1e90d7d..56c8e0613f 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -338,11 +338,8 @@ const config = { "aria-label": "GitHub repository", }, { - type: "html", + type: "custom-chatBotNavbarItem", position: "right", - className: "header-askme-link", - value: - "Need Help?
Ask Switchboard Bot a Question!", }, { type: "search", diff --git a/website/src/components/ChainComponent/ChainComponent2.tsx b/website/src/components/ChainComponent/ChainComponent2.tsx index 136c818257..0b35409bfc 100644 --- a/website/src/components/ChainComponent/ChainComponent2.tsx +++ b/website/src/components/ChainComponent/ChainComponent2.tsx @@ -56,47 +56,45 @@ export default function ChainComponent2({ items }: ChainComponentProps) { > {items.map((item, index) => { return ( - <> - + + - - - {item.title} - - - + {item.title} + + ); })} diff --git a/website/src/components/ChatBot/ChatBot.tsx b/website/src/components/ChatBot/ChatBot.tsx index 619c1ecdf6..a8711e3f03 100644 --- a/website/src/components/ChatBot/ChatBot.tsx +++ b/website/src/components/ChatBot/ChatBot.tsx @@ -1,13 +1,57 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import { styled } from "@mui/system"; import { Dialog, Divider, IconButton, TextField } from "@mui/material"; import SendIcon from "@mui/icons-material/Send"; +const TypingDiv = styled("div")({ + width: "5em", + height: "2em", + position: "relative", + padding: "10px", + background: "#e6e6e6", + borderRadius: "16px", + display: "flex", + alignItems: "center", + justifyContent: "center", + "@keyframes loadingFade": { + "0%": { + opacity: 0, + }, + "50%": { + opacity: 0.8, + }, + "100%": { + opacity: 0, + }, + }, +}); + +const TypingDot = styled("div")({ + float: "left", + width: "8px", + height: "8px", + margin: "0 4px", + background: "#8d8c91", + borderRadius: "50%", + opacity: "0", + animation: "loadingFade 1s infinite", + ":nth-of-type(1)": { + animationDelay: "0s", + }, + ":nth-of-type(2)": { + animationDelay: "0.2s", + }, + ":nth-of-type(3)": { + animationDelay: "0.4s", + marginRight: "0px", + }, +}); + const StyledDialog = styled(Dialog)({ "& .MuiDialog-paper": { - width: 600, + width: 650, height: 600, - paddingBottom: "32px", + paddingBottom: "16px", display: "flex", flexDirection: "column", }, @@ -50,15 +94,40 @@ interface Message { message: string; } -const ChatBot = (props: { open: boolean }) => { +const CHAT_URL = "https://chat.switchboard.xyz"; + +const fetchChat = async (input: string) => { + return fetch(`${CHAT_URL}`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + input, + }), + }) + .then((response) => { + if (response.ok) { + return response.json().then((json) => json.completion); + } else { + return "That isn't a valid question. Please try again."; + } + }) + .catch(() => "Sorry, something went wrong. Please try again."); +}; + +const ChatBot = (props: { open: boolean; onClose: () => void }) => { const [questionInput, setQuestionInput] = useState(""); + const [isTyping, setIsTyping] = useState(false); const [messageHistory, setMessageHistory] = useState([ { sender: Sender.bot, message: "Welcome to Switchboard Chat! Ask me a question below.", }, ]); - const [open, setOpen] = useState(true); + + const messagesRef = useRef(); + const endOfMessagesRef = useRef(); // need to set up session storage to keep track of message history useEffect(() => { @@ -67,20 +136,42 @@ const ChatBot = (props: { open: boolean }) => { }, []); useEffect(() => { - sessionStorage.setItem( - "messageHistory", - // clear any error states - JSON.stringify(messageHistory) - ); + sessionStorage.setItem("messageHistory", JSON.stringify(messageHistory)); }, [messageHistory]); + // use a ref to scroll down to most recent message + useEffect(() => { + endOfMessagesRef.current?.scrollIntoView({ behavior: "smooth" }); + }, [messageHistory]); + + // need a timeout so that the ref exists when trying to + // scroll down when you first open the modal + useEffect(() => { + setTimeout(() => { + endOfMessagesRef.current?.scrollIntoView({ behavior: "smooth" }); + }, 100); + }, [props.open]); + const onQuestionInputChange = (e: React.ChangeEvent) => { setQuestionInput(e.target.value); }; - const submitQuestion = () => { - messageHistory.push({ sender: Sender.user, message: questionInput }); + const submitQuestion = async () => { + const message = questionInput; // temp to keep track of current message + setMessageHistory((prevState: Message[]) => [ + ...prevState, + { sender: Sender.user, message }, + ]); setQuestionInput(""); + + // fetch response + setIsTyping(true); + const response = await fetchChat(message); + setIsTyping(false); + setMessageHistory((prevState: Message[]) => [ + ...prevState, + { sender: Sender.bot, message: response }, + ]); }; const onQuestionKeyDown = (event: React.KeyboardEvent) => { @@ -90,7 +181,7 @@ const ChatBot = (props: { open: boolean }) => { }; return ( - setOpen(false)}> + Chat with Switchboard Bot @@ -105,6 +196,8 @@ const ChatBot = (props: { open: boolean }) => { width: "100%", height: "100%", padding: "16px 32px", + maxHeight: 500, + overflowY: "scroll", }} > {messageHistory.map((message: Message, idx: number) => { @@ -113,7 +206,7 @@ const ChatBot = (props: { open: boolean }) => {
{ width: "60%", alignSelf: userMessage ? "flex-end" : "flex-start", }} + ref={messagesRef} > {message.message}
); })} + {isTyping && ( + + + + + + )} +
{ onKeyDown={onQuestionKeyDown} placeholder="Type your question here..." sx={{ flexGrow: 1, marginRight: "12px" }} + autoComplete="off" />
+ + Powered by ChatGPT +
); diff --git a/website/src/components/NavbarItems/ChatBotIcon.tsx b/website/src/components/NavbarItems/ChatBotIcon.tsx new file mode 100644 index 0000000000..e851a03e8e --- /dev/null +++ b/website/src/components/NavbarItems/ChatBotIcon.tsx @@ -0,0 +1,47 @@ +import React, { useState } from "react"; +import qaIcon from "../../../static/img/qa.png"; +import { IconButton, Tooltip } from "@mui/material"; +import { ChatBot } from "../ChatBot"; + +const ChatBotIcon = () => { + const [openChatModal, setOpenChatModal] = useState(false); + + const onClose = () => { + setOpenChatModal(false); + }; + + return ( + <> + + setOpenChatModal(true)} + sx={{ + ":hover": { + backgroundColor: "white", + opacity: 0.6, + }, + }} + > + + + + + + ); +}; + +export default ChatBotIcon; diff --git a/website/src/css/icons.css b/website/src/css/icons.css index 89e6738886..cb7b0929e4 100644 --- a/website/src/css/icons.css +++ b/website/src/css/icons.css @@ -14,36 +14,8 @@ html[data-theme="dark"] .instruction-icon { color: #ffcb4c; } -/* Ask Me Icon */ -.header-askme-link::before { - content: ""; - position: relative; - width: 28px; - height: 28px; - display: inline-block; - background: url("/img/qa.png") no-repeat; - background-size: 28px; -} - -/* Show the tooltip text when you mouse over the tooltip container */ -.header-askme-link:hover .header-askme-tooltip { - visibility: visible; -} - -.header-askme-link .header-askme-tooltip { - visibility: hidden; - padding: 5px 16px; - border-radius: 6px; - font-size: 16px; - font-weight: 500; - top: 80%; - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; - border: solid 1px gray; - background-color: white; - position: absolute; - text-align: center; - z-index: 1; - margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ +.DocSearch-Search-Icon { + display: none; } /* Github Icon */ diff --git a/website/src/theme/NavbarItem/ComponentTypes.tsx b/website/src/theme/NavbarItem/ComponentTypes.tsx index a8bf5754a9..50a666f17b 100644 --- a/website/src/theme/NavbarItem/ComponentTypes.tsx +++ b/website/src/theme/NavbarItem/ComponentTypes.tsx @@ -1,7 +1,9 @@ import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes"; import SupportedChainsNavbarItem from "@site/src/components/NavbarItems/SupportedChainsNavbarItem"; +import ChatBotIcon from "@site/src/components/NavbarItems/ChatBotIcon"; export default { ...ComponentTypes, "custom-supportedChainsNavbarItem": SupportedChainsNavbarItem, + "custom-chatBotNavbarItem": ChatBotIcon, }; diff --git a/website/src/types/png.d.ts b/website/src/types/png.d.ts new file mode 100644 index 0000000000..81ed67b796 --- /dev/null +++ b/website/src/types/png.d.ts @@ -0,0 +1,4 @@ +declare module "*.png" { + const value: any; + export = value; +} From 2a36c8b8ca7ad8d99e453e8db5dad03241939fd2 Mon Sep 17 00:00:00 2001 From: Valerie Jessup Date: Mon, 27 Mar 2023 11:28:10 -0400 Subject: [PATCH 3/4] Small cleanup --- website/src/components/ChatBot/ChatBot.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/website/src/components/ChatBot/ChatBot.tsx b/website/src/components/ChatBot/ChatBot.tsx index a8711e3f03..fc2f8c5794 100644 --- a/website/src/components/ChatBot/ChatBot.tsx +++ b/website/src/components/ChatBot/ChatBot.tsx @@ -135,12 +135,9 @@ const ChatBot = (props: { open: boolean; onClose: () => void }) => { if (messagesFromStorage) setMessageHistory(JSON.parse(messagesFromStorage)); }, []); + // save to sessionStorage & use a ref to scroll down to most recent message useEffect(() => { sessionStorage.setItem("messageHistory", JSON.stringify(messageHistory)); - }, [messageHistory]); - - // use a ref to scroll down to most recent message - useEffect(() => { endOfMessagesRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messageHistory]); From 201aff909a853bf65e92b32a9bcfb6dfb31705ac Mon Sep 17 00:00:00 2001 From: Valerie Jessup Date: Mon, 27 Mar 2023 16:06:44 -0400 Subject: [PATCH 4/4] cleanup --- website/docs/about/introduction.mdx | 3 --- website/src/css/navbar.css | 3 --- 2 files changed, 6 deletions(-) diff --git a/website/docs/about/introduction.mdx b/website/docs/about/introduction.mdx index fa96237dc5..79e147902e 100644 --- a/website/docs/about/introduction.mdx +++ b/website/docs/about/introduction.mdx @@ -13,7 +13,6 @@ import RoundedCardGroup from "/src/components/RoundedCard/RoundedCardGroup"; import { RustIcon } from "/src/components/icons/RustIcon"; import useBaseUrl from "@docusaurus/useBaseUrl"; import { Box, Container } from "@mui/system"; -import { ChatBot } from "/src/components/ChatBot"; import WhatIsSwitchboard from "/data/docs/faq_what_is_switchboard.md"; import WhatIsAnOracle from "/data/docs/faq_what_is_an_oracle.md"; @@ -24,8 +23,6 @@ import UseCases from "/data/docs/faq_use_cases.md";
- -