feature: edits required for public page to work on multiple sites

clients/search-component/package.json

@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.29",
+  "version": "0.2.30",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {
@@ -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/",
@@ -56,7 +57,7 @@
     "react-dom": "^18.3.1",
     "tailwind": "^4.0.0",
     "tailwindcss": "^3.4.11",
-    "tailwindcss-scoped-preflight": "^3.4.4",
+    "tailwindcss-scoped-preflight": "^3.4.10",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.3.0"
   },

clients/search-component/src/TrieveModal/Chat/Carousel.tsx

@@ -7,35 +7,6 @@ import React, {
 } from "react";
 
 const styles = {
-  root: {
-    width: "100%",
-    overflow: "hidden",
-  },
-  scroll: {
-    display: "flex",
-    overflowX: "hidden",
-    scrollSnapType: "x mandatory",
-    scrollBehavior: "smooth",
-    width: "100%",
-    listStyle: "none",
-    padding: 0,
-    margin: 0,
-  },
-  item: {
-    flex: "0 0 auto",
-    padding: "1rem",
-    scrollSnapAlign: "start",
-    boxSizing: "border-box",
-  },
-  itemSnapPoint: {
-    scrollSnapAlign: "start",
-  },
-  controls: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    marginTop: "5px",
-  },
   nextPrevButton: {
     fontSize: "16px",
     cursor: "pointer",
@@ -109,15 +80,13 @@ export const Carousel = ({ children }: { children: React.ReactNode }) => {
   const goToPage = (pageIndex: number) => setCurrentPage(pageIndex);
 
   return (
-    <div style={styles.root}>
-      <ul style={styles.scroll} ref={scrollRef}>
+    <div className="carousel-root">
+      <ul className="carousel-scroll" ref={scrollRef}>
         {allProductsCarousel.map((child, index) => (
           <li
-            className="carousel-item"
+            className={child ? "carousel-item carousel-item-visibile" : "carousel-item carousel-item-hidden"}
             style={{
-              ...styles.item,
               width: `calc(100% / ${itemsPerPage})`,
-              visibility: child ? "visible" : "hidden",
             }}
             key={index}
           >
@@ -126,7 +95,7 @@ export const Carousel = ({ children }: { children: React.ReactNode }) => {
         ))}
       </ul>
       {numPages > 1 && (
-        <div style={styles.controls}>
+        <div className="carousel-controls">
           <button
             style={{
               ...styles.nextPrevButton,

clients/search-component/src/TrieveModal/Search/SearchMode.tsx

@@ -102,7 +102,7 @@ export const SearchMode = () => {
   }, [results]);
 
   return (
-    <Suspense fallback={<div className="hidden"> </div>}>
+    <Suspense fallback={<div className="suspense-fallback"> </div>}>
       <div
         className={`close-modal-button search ${props.type}`}
         onClick={() => setOpen(false)}

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 {
@@ -33,6 +33,10 @@ body {
       @apply pl-2 flex gap-2 w-full overflow-x-auto;
     }
 
+    .suspense-fallback {
+      @apply hidden;
+    }
+
     ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
@@ -309,6 +313,44 @@ body {
       .additional-image-links {
         @apply gap-2 mt-4 mb-4 flex flex-row;
 
+        .carousel-root {
+          width: 100%;
+          overflow: hidden;
+        }
+
+        .carousel-scroll {
+          display: flex;
+          overflow-x: hidden;
+          scroll-snap-type: x-mandatory;
+          scroll-behavior: smooth;
+          width: 100%;
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+
+        .carousel-item {
+          flex: 0 0 auto;
+          padding: 1rem;
+          scroll-snap-align: start;
+          box-sizing: border-box;
+        }
+
+        .carousel-item-hidden {
+          visibility: hidden;
+        }
+
+        .carousel-item-visibile {
+          visibility: visible;
+        }
+
+        .carousel-controls {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: 5px;
+        }
+
         a {
           @apply hover:bg-zinc-200 text-zinc-700 hover:text-zinc-950 rounded px-2 text-xs py-1 line-clamp-2 overflow-ellipsis grid-rows-2 w-fit;
         }

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

@@ -79,7 +79,9 @@ export type ModalProps = {
   buttonTriggers?: {
     selector: string;
     mode: SearchModes;
+    removeListeners?: boolean;
   }[];
+  zIndex?: number;
   showFloatingButton?: boolean;
   floatingButtonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 };
@@ -110,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,11 +1,32 @@
 import { startTransition } from "react";
-import { useModalState } from "./modal-context";
+import { ModalProps, SearchModes } from "./modal-context";
 
-export const setClickTriggers = () => {
-  const { setOpen, setMode, props } = useModalState();
+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 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) {
       element.addEventListener("click", () => {
         startTransition(() => {

clients/search-component/tailwind.config.js

@@ -17,6 +17,7 @@ export default {
           "#trieve-search-component",
           "#trieve-search-modal",
           "#trieve-search-modal-overlay",
+          "#open-trieve-modal"
         ],
         {
           rootStyles: true,

clients/ts-sdk/openapi.json

@@ -6977,6 +6977,10 @@
           "mode": {
             "type": "string"
           },
+          "removeTriggers": {
+            "type": "boolean",
+            "nullable": true
+          },
           "selector": {
             "type": "string"
           }
@@ -12447,6 +12451,11 @@
           "useGroupSearch": {
             "type": "boolean",
             "nullable": true
+          },
+          "zIndex": {
+            "type": "integer",
+            "format": "int32",
+            "nullable": true
           }
         }
       },

clients/ts-sdk/src/types.gen.ts

@@ -132,6 +132,7 @@ export type BulkDeleteChunkPayload = {
 
 export type ButtonTrigger = {
     mode: string;
+    removeTriggers?: (boolean) | null;
     selector: string;
 };
 
@@ -2080,6 +2081,7 @@ export type PublicPageParameters = {
     theme?: ((PublicPageTheme) | null);
     type?: (string) | null;
     useGroupSearch?: (boolean) | null;
+    zIndex?: (number) | null;
 };
 
 export type PublicPageSearchOptions = {