feat: call onSearchShortcut on ctrl/cmd + f (#396)

Author: avi-alpert

docs/CONFIG.md

@@ -56,6 +56,7 @@ interface ConfigModel {
     maxTabs: number; // set 1 to hide tabs panel
     showPromptField: boolean; // shows prompt field (default: true)
     dragOverlayIcon?: MynahIcons | MynahIconsType | CustomIcon; // icon displayed in the overlay when a file is dragged into the chat area
+    enableSearchKeyboardShortcut?: boolean; // if true, calls onSearchShortcut on Command + f or Ctrl + f (default: false)
 }
 ...
 ```
@@ -405,4 +406,12 @@ Specifies the icon to display in the drag-and-drop overlay for adding files (suc
 
 <p align="center">
   <img src="./img/dragOverlayIcon.png" alt="noPrompt" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
-</p>
+</p>
+
+## enableSearchKeyboardShortcut
+
+**Type:** `boolean`
+
+When set to `true`, this option enables capturing the search keyboard shortcut. When enabled, pressing Command+F (Mac) or Ctrl+F (Windows/Linux) will trigger the `onSearchShortcut` event instead of the browser's default search behavior. This allows implementing custom search functionality within the chat interface.
+
+Default: `false`

docs/PROPERTIES.md

@@ -1296,3 +1296,23 @@ onFilesDropped: (tabId, files, insertPosition) => {
 ```
 
 ---
+
+### `onSearchShortcut`
+
+This event will be fired when the user presses Command+F (Mac) or Ctrl+F (Windows/Linux). It passes the `tabId` of the current tab and the `eventId` for tracking user intent. This allows the consumer to implement custom search functionality when the standard browser search shortcut is pressed.
+
+```typescript
+...
+onSearchShortcut?: (
+    tabId: string,
+    eventId?: string) => void;
+...
+```
+
+**Example:**
+```typescript
+onSearchShortcut: (tabId, eventId) => {
+  console.log(`Search shortcut triggered in tab: ${tabId}`);
+  // Implement custom search functionality, such as opening a history sheet
+},
+```

example/src/main.ts

@@ -1037,6 +1037,9 @@ here to see if it gets cut off properly as expected, with an ellipsis through cs
         onTabAdd: (tabId: string) => {
             Log(`New tab added: <b>${tabId}</b>`);
         },
+        onSearchShortcut: (tabId: string) => {
+            Log(`Search shortcut pressed on tab: <b>${tabId}</b>`);
+        },
         onOpenFileDialogClick: (tabId: string, fileType: string, insertPosition: number) => {
 
             if (fileType === 'image') {

src/main.ts

@@ -31,7 +31,7 @@ import {
   TreeNodeDetails,
   Action,
 } from './static';
-import { MynahUIGlobalEvents } from './helper/events';
+import { cancelEvent, MynahUIGlobalEvents } from './helper/events';
 import { Tabs } from './components/navigation-tabs';
 import { ChatWrapper } from './components/chat-item/chat-wrapper';
 import { FeedbackForm } from './components/feedback-form/feedback-form';
@@ -167,6 +167,9 @@ export interface MynahUIProps {
   onTabRemove?: (
     tabId: string,
     eventId?: string) => void;
+  onSearchShortcut?: (
+    tabId: string,
+    eventId?: string) => void;
   /**
    * @param tabId tabId which the close button triggered
    * @returns boolean -> If you want to close the tab immediately send true
@@ -480,6 +483,20 @@ export class MynahUI {
     if (this.props.onReady !== undefined) {
       this.props.onReady();
     }
+    if (Config.getInstance().config.enableSearchKeyboardShortcut === true) {
+      document.addEventListener('keydown', (e) => {
+        // Check for Command+F (Mac) or Ctrl+F (Windows/Linux)
+        if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+          cancelEvent(e);
+          // Call the search shortcut handler with the current tab ID
+          if (this.props.onSearchShortcut !== undefined) {
+            this.props.onSearchShortcut(
+              MynahUITabsStore.getInstance().getSelectedTabId(),
+              this.getUserEventId());
+          }
+        }
+      });
+    }
   }
 
   private readonly getSplashLoaderActions = (actions?: Action[]): ExtendedHTMLElement[] => {

src/static.ts

@@ -792,6 +792,7 @@ export interface ConfigOptions {
   codeCopyToClipboardEnabled?: boolean;
   test?: boolean;
   dragOverlayIcon?: MynahIcons | MynahIconsType | CustomIcon;
+  enableSearchKeyboardShortcut?: boolean;
 }
 
 export interface ConfigModel extends ConfigOptions {