feature: small css fixes, make zIndex a parameter

clients/search-component/package.json

@@ -29,6 +29,7 @@
     "lint": "eslint",
     "build:clean": "rm -rf dist && yarn type:dts && yarn build",
     "build": "run-s build:src build:css type:dts",
+    "build:watch": "run-p watch:js build:src build:css type:dts",
     "build:src": "node ./scripts/build.js",
     "type:dts": "tsc --emitDeclarationOnly --declarationMap",
     "build:css": "npx postcss src/app.css -o dist/index.css && cp src/styles.d.ts dist/",

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

@@ -29,7 +29,7 @@ export const Tags = () => {
           <kbd className="commands-key">
             <EnterKeyIcon />
           </kbd>
-          <span className="label">to select</span>
+          <span>to select</span>
         </li>
         <li key="arrow-key-commands">
           <kbd className="commands-key">
@@ -38,13 +38,13 @@ export const Tags = () => {
           <kbd className="commands-key">
             <ArrowUpIcon />
           </kbd>
-          <span className="label">to navigate</span>
+          <span>to navigate</span>
         </li>
         <li key="esc-key-command">
           <kbd className="commands-key">
             <EscKeyIcon />
           </kbd>
-          <span className="label">to close</span>
+          <span>to close</span>
         </li>
       </ul>
     ))

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

@@ -15,7 +15,7 @@
 
 body {
   #trieve-search-modal-overlay {
-    @apply bg-black/60 w-screen fixed inset-0 h-screen animate-overlayShow backdrop-blur-sm z-[998];
+    @apply bg-black/60 w-screen fixed inset-0 h-screen animate-overlayShow backdrop-blur-sm;
   }
 
   .close-icon {

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

@@ -18,10 +18,17 @@ import { FloatingActionButton } from "./FloatingActionButton";
 
 const Modal = () => {
   useKeyboardNavigation();
-  setClickTriggers();
   const { mode, open, setOpen, setMode, props } = useModalState();
   const { askQuestion, chatWithGroup } = useChatState();
 
+  useEffect(() => {
+    setClickTriggers(
+      setOpen,
+      setMode,
+      props
+    );
+  }, []);
+
   useEffect(() => {
     const onViewportResize = () => {
       const viewportHeight = window.visualViewport?.height;
@@ -105,7 +112,7 @@ const Modal = () => {
     document.documentElement.style.setProperty(
       "--tv-prop-brand-font-family",
       props.brandFontFamily ??
-        `Maven Pro, ui-sans-serif, system-ui, sans-serif,
+      `Maven Pro, ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
     );
   }, [props.brandColor, props.brandFontFamily]);
@@ -127,12 +134,13 @@ const Modal = () => {
               setOpen(false);
             }}
             id="trieve-search-modal-overlay"
+            style={{ zIndex: props.zIndex ?? 1000 }}
           ></div>
           <div
             id="trieve-search-modal"
-            className={`${mode === "chat" ? "chat-modal-mobile " : ""} ${
-              props.theme === "dark" ? "dark " : ""
-            } ${props.type}`.trim()}
+            className={`${mode === "chat" ? "chat-modal-mobile " : ""} ${props.theme === "dark" ? "dark " : ""
+              } ${props.type}`.trim()}
+            style={{ zIndex: props.zIndex ? props.zIndex + 1 : 1001 }}
           >
             {props.allowSwitchingModes && <ModeSwitch />}
             <div

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

@@ -81,6 +81,7 @@ export type ModalProps = {
     mode: SearchModes;
     removeListeners?: boolean;
   }[];
+  zIndex?: number;
   showFloatingButton?: boolean;
   floatingButtonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 };
@@ -111,6 +112,7 @@ const defaultProps = {
   openLinksInNewTab: false,
   currencyPosition: "before" as currencyPosition,
   responsive: false,
+  zIndex: 1000,
   debounceMs: 0,
   show: true,
   position: "bottom-right" as

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

@@ -1,27 +1,33 @@
 import { startTransition } from "react";
-import { useModalState } from "./modal-context";
+import { ModalProps, SearchModes } from "./modal-context";
 
-export const setClickTriggers = () => {
-  const { setOpen, setMode, props } = useModalState();
-
-  function removeAllClickListeners(selector: string) {
+export const setClickTriggers = (
+  setOpen: (open: boolean) => void,
+  setMode: React.Dispatch<React.SetStateAction<SearchModes>>,
+  props: ModalProps
+) => {
+  const removeAllClickListeners = (selector: string): Element | null => {
     const element: Element | null = document.querySelector(selector);
-    if (!element) return;
+    if (!element) return null;
     // Vue click attributes
     element.removeAttribute("@click.prevent");
     element.removeAttribute("@click");
+    // @ts-expect-error Property 'href' does not exist on type 'Element'. [2339]
+    element.href = "#";
 
     const newElement = element.cloneNode(true);
     element?.parentNode?.replaceChild(newElement, element);
+    return newElement as unknown as Element;
   }
 
-
   props.buttonTriggers?.forEach((trigger) => {
-    const element = document.querySelector(trigger.selector);
+    let element: Element | null = document.querySelector(trigger.selector);
+    if (trigger.removeListeners ?? true) {
+      element = removeAllClickListeners(trigger.selector);
+      console.log("Removed click listeners from", trigger.selector);
+    }
+
     if (element) {
-      if (trigger.removeListeners ?? true) {
-        removeAllClickListeners(trigger.selector);
-      }
       element.addEventListener("click", () => {
         startTransition(() => {
           setMode(trigger.mode);

server/src/public/search-component-code.html

@@ -88,6 +88,9 @@
       {% if params.buttonTriggers -%}
       buttonTriggers: {{ params.buttonTriggers }},
       {% endif -%}
+      {% if params.zIndex -%}
+      zIndex: {{ params.zIndex }},
+      {% endif -%}
       {% if params.debounceMs -%}
       debounceMs: {{ params.debounceMs }},
       {% endif -%}