feature(search component): add buttonTriggers parameter for adding

custom event trigger

clients/search-component/example/src/routes/__root.tsx

@@ -4,6 +4,9 @@ import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 export const Route = createRootRoute({
   component: () => (
     <>
+      <div className="random-trigger-location" style={{ background: "red" }}>
+        Hi, I'm a random root div that is outside the Hiearchy
+      </div>
       <Outlet />
       <TanStackRouterDevtools />
     </>

clients/search-component/example/src/routes/index.lazy.tsx

@@ -119,6 +119,12 @@ export default function Home() {
                   ),
                 },
               ]}
+              buttonTriggers={[
+                {
+                  selector: ".random-trigger-location",
+                  mode: "chat",
+                }
+              ]}
               useGroupSearch={useGroupSearch}
               defaultAiQuestions={[
                 "What is Trieve?",

clients/search-component/package.json

@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.15",
+  "version": "0.2.19",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

clients/search-component/src/TrieveModal/index.tsx

@@ -12,9 +12,11 @@ import { ModeSwitch } from "./ModeSwitch";
 import { OpenModalButton } from "./OpenModalButton";
 import { ChatProvider } from "../utils/hooks/chat-context";
 import r2wc from "@r2wc/react-to-web-component";
+import { setClickTriggers } from "../utils/hooks/setClickTriggers";
 
 const Modal = () => {
   useKeyboardNavigation();
+  setClickTriggers();
   const { mode, open, setOpen, setMode, props } = useModalState();
 
   useEffect(() => {

clients/search-component/src/utils/hooks/modal-context.tsx

@@ -75,6 +75,10 @@ export type ModalProps = {
   openLinksInNewTab?: boolean;
   onOpenChange?: (open: boolean) => void;
   debounceMs?: number;
+  buttonTriggers?: {
+    selector: string;
+    mode: SearchModes;
+  }[];
 };
 
 const defaultProps = {

clients/search-component/src/utils/hooks/setClickTriggers.ts

@@ -0,0 +1,18 @@
+import { startTransition } from "react";
+import { useModalState } from "./modal-context";
+
+export const setClickTriggers = () => {
+  const { setOpen, setMode, props } = useModalState();
+
+  props.buttonTriggers?.forEach((trigger) => {
+    const element = document.querySelector(trigger.selector);
+    if (element) {
+      element.addEventListener("click", () => {
+        startTransition(() => {
+          setMode(trigger.mode);
+          setOpen(true);
+        })
+      });
+    }
+  })
+}