(EAI-565) [UI] Add HotkeyContext + connect HotkeyTrigger to placehold…

…er (#530)

packages/mongodb-chatbot-ui/package.json

@@ -93,7 +93,7 @@
     "@lg-chat/chat-disclaimer": "^3.0.2",
     "@lg-chat/chat-window": "^2.0.1",
     "@lg-chat/fixed-chat-window": "^2.0.3",
-    "@lg-chat/input-bar": "^4.0.3",
+    "@lg-chat/input-bar": "^5.1.0",
     "@lg-chat/leafygreen-chat-provider": "^2.0.0",
     "@lg-chat/message": "^4.2.1",
     "@lg-chat/message-feed": "^3.0.1",

packages/mongodb-chatbot-ui/src/App.tsx

@@ -78,7 +78,6 @@ function App() {
           maxInputCharacters={3000}
         >
           <DocsChatbot suggestedPrompts={SUGGESTED_PROMPTS} />
-          <HotkeyTrigger onKey="?" />
         </Chatbot>
         <Chatbot
           name="MongoDB AI (Dev Center)"

packages/mongodb-chatbot-ui/src/ChatWindow.tsx

@@ -18,6 +18,7 @@ import { defaultChatbotFatalErrorMessage } from "./ui-text";
 import { Conversation } from "./useConversation";
 import { type ChatbotViewProps } from "./ChatbotView";
 import { useChatbotContext } from "./useChatbotContext";
+import { useHotkeyContext } from "./HotkeyContext";
 
 const styles = {
   chatbot_input: css`
@@ -118,6 +119,8 @@ export function ChatWindow(props: ChatWindowProps) {
 
   const hasError = inputTextError !== "";
 
+  const hotkeyContext = useHotkeyContext();
+
   const inputPlaceholder = conversation.error
     ? fatalErrorMessage
     : props.inputBarPlaceholder ?? MongoDbInputBarPlaceholder();
@@ -191,6 +194,7 @@ export function ChatWindow(props: ChatWindowProps) {
                 ref={inputBarRef}
                 disabled={Boolean(conversation.error?.length)}
                 disableSend={hasError || awaitingReply}
+                shouldRenderHotkeyIndicator={hotkeyContext.hotkey !== null}
                 onMessageSend={(messageContent) => {
                   const canSubmit =
                     inputTextError.length === 0 && !conversation.error;

packages/mongodb-chatbot-ui/src/Chatbot.tsx

@@ -8,6 +8,7 @@ import { type User } from "./useUser";
 import { ChatbotProvider } from "./ChatbotProvider";
 import ConversationProvider from "./ConversationProvider";
 import { RenameFields } from "./utils";
+import { HotkeyContextProvider } from "./HotkeyContext";
 
 export type ChatbotProps = OpenCloseHandlers &
   RenameFields<UseChatbotProps, { chatbotName: "name" }> & {
@@ -60,9 +61,11 @@ export function Chatbot({
       <LinkDataProvider tck={tck}>
         <UserProvider user={user}>
           <ChatbotProvider {...chatbotData}>
-            <ConversationProvider conversation={chatbotData.conversation}>
-              {children}
-            </ConversationProvider>
+            <HotkeyContextProvider>
+              <ConversationProvider conversation={chatbotData.conversation}>
+                {children}
+              </ConversationProvider>
+            </HotkeyContextProvider>
           </ChatbotProvider>
         </UserProvider>
       </LinkDataProvider>

packages/mongodb-chatbot-ui/src/HotkeyContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, useContext, useMemo, useState } from "react";
+
+export type HotkeyContextData = {
+  hotkey: string | null;
+  setHotkey: (hotkey: HotkeyContextData["hotkey"]) => void;
+};
+
+const defaultHotkeyContextData: HotkeyContextData = {
+  hotkey: null,
+  setHotkey: () => {
+    // Do nothing by default
+  },
+};
+
+const HotkeyContext = createContext<HotkeyContextData>(
+  defaultHotkeyContextData
+);
+
+export function HotkeyContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [hotkey, setHotkey] = useState<string | null>(null);
+  const hotkeyContextData = useMemo(() => ({ hotkey, setHotkey }), [hotkey]);
+  return (
+    <HotkeyContext.Provider value={hotkeyContextData}>
+      {children}
+    </HotkeyContext.Provider>
+  );
+}
+
+export function useHotkeyContext() {
+  return useContext(HotkeyContext);
+}

packages/mongodb-chatbot-ui/src/HotkeyTrigger.tsx

@@ -1,28 +1,35 @@
 import { useEffect } from "react";
 import { useChatbotContext } from "./useChatbotContext";
+import { useHotkeyContext } from "./HotkeyContext";
 
 export type HotkeyTriggerProps = {
   onKey: string;
 };
 
 export function HotkeyTrigger({ onKey }: HotkeyTriggerProps) {
-  const { openChat } = useChatbotContext();
+  const { open, openChat } = useChatbotContext();
+  const hotkeyContext = useHotkeyContext();
 
   useEffect(() => {
+    hotkeyContext.setHotkey(onKey);
+
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === onKey) {
         openChat();
       }
     };
 
     // Add event listener when component mounts
-    window.addEventListener("keydown", handleKeyDown);
+    if (!open) {
+      window.addEventListener("keydown", handleKeyDown);
+    }
 
     // Remove event listener when component unmounts
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
+      hotkeyContext.setHotkey(null);
     };
-  }, [onKey, openChat]);
+  }, [hotkeyContext, onKey, open, openChat]);
 
   // This component doesn't render anything
   return null;

packages/mongodb-chatbot-ui/vite.config.component.ts

@@ -77,6 +77,7 @@ export default ({ mode }) => {
                 FloatingActionButtonTrigger: resolvePath(
                   "src/FloatingActionButtonTrigger.tsx"
                 ),
+                HotkeyTrigger: resolvePath("src/HotkeyTrigger.tsx"),
                 InputBarTrigger: resolvePath("src/InputBarTrigger.tsx"),
                 // Chatbot Views
                 ChatWindow: resolvePath("src/ChatWindow.tsx"),