(EAI-543) [UI] Create HotkeyTrigger (#512)

* (EAI-543) [UI] Create HotkeyTrigger * add docs
mongodb · Sep 25, 2024 · 11adc59 · 11adc59
1 parent 269ba2b
commit 11adc59
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/docs/docs/ui.md b/docs/docs/ui.md
@@ -108,6 +108,14 @@ The `<InputBarTrigger />` component opens a view component (like `<ModalView />`
 | `suggestedPrompts`  | `string[]?`  | A list of suggested prompts that appear in the input bar dropdown menu.                        | If no prompts are specified, the dropdown is not shown.                         |
 | `placeholder`       | `string?`    | The placeholder text shown when the input bar is empty.                                        | If not specified, the input bar uses default placeholders.                      |
 
+### `HotkeyTrigger`
+
+The `<HotkeyTrigger />` component opens a view component (like `<ModalView />`) when the presses a specific key on their keyboard. It accepts the following props:
+
+| Prop    | Type     | Description                                                                                                                                 | Default                                |
+| ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| `onKey` | `string` | The key to listen for. This matches the value of [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key). |                                        |
+
 ### `ModalView`
 
 The `<ModalView />` component renders a chat message feed in a modal window. It accepts the following props:

diff --git a/packages/mongodb-chatbot-ui/src/App.tsx b/packages/mongodb-chatbot-ui/src/App.tsx
@@ -10,6 +10,7 @@ import Toggle from "@leafygreen-ui/toggle";
 import { Chatbot } from "./Chatbot";
 import { DocsChatbot } from "./DocsChatbot";
 import { DevCenterChatbot } from "./DevCenterChatbot";
+import { HotkeyTrigger } from "./HotkeyTrigger";
 
 const prefersDarkMode = () =>
   window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
@@ -59,7 +60,7 @@ function App() {
     <div className={app_background(darkMode)}>
       <div className={styles.main_content}>
         <Chatbot
-          name="MongoDB AI"
+          name="MongoDB AI (Docs)"
           shouldStream={shouldStream}
           darkMode={darkMode}
           fetchOptions={{ credentials: "include" }}
@@ -72,9 +73,10 @@ function App() {
           maxInputCharacters={3000}
         >
           <DocsChatbot suggestedPrompts={SUGGESTED_PROMPTS} />
+          <HotkeyTrigger onKey="?" />
         </Chatbot>
         <Chatbot
-          name="MongoDB AI"
+          name="MongoDB AI (Dev Center)"
           shouldStream={shouldStream}
           darkMode={darkMode}
           fetchOptions={{ credentials: "include" }}
@@ -89,6 +91,7 @@ function App() {
             initialMessageSuggestedPrompts={SUGGESTED_PROMPTS}
             initialMessageReferences={initialMessageReferences}
           />
+          <HotkeyTrigger onKey="/" />
         </Chatbot>
       </div>
       <Controls>

diff --git a/packages/mongodb-chatbot-ui/src/HotkeyTrigger.tsx b/packages/mongodb-chatbot-ui/src/HotkeyTrigger.tsx
@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import { useChatbotContext } from "./useChatbotContext";
+
+export type HotkeyTriggerProps = {
+  onKey: string;
+};
+
+export function HotkeyTrigger({ onKey }: HotkeyTriggerProps) {
+  const { openChat } = useChatbotContext();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === onKey) {
+        openChat();
+      }
+    };
+
+    // Add event listener when component mounts
+    window.addEventListener("keydown", handleKeyDown);
+
+    // Remove event listener when component unmounts
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onKey, openChat]);
+
+  // This component doesn't render anything
+  return null;
+}
diff --git a/packages/mongodb-chatbot-ui/src/index.tsx b/packages/mongodb-chatbot-ui/src/index.tsx
@@ -21,6 +21,7 @@ export {
   InputBarTrigger,
   type InputBarTriggerProps,
 } from "./InputBarTrigger.tsx";
+export { HotkeyTrigger, type HotkeyTriggerProps } from "./HotkeyTrigger.tsx";
 export {
   FloatingActionButtonTrigger,
   type FloatingActionButtonTriggerProps,