feature: convert public page to single install script tag

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);
+        })
+      });
+    }
+  })
+}

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

@@ -1,81 +1,91 @@
 <pre class="-my-4"> 
 <code class="language-javascript">
-import { TrieveModalSearch } from 'trieve-search-component';
-import 'trieve-search-component/styles';
+&lt;link
+  rel="stylesheet"
+  href="https://unpkg.com/[email protected]/dist/index.css"
+/&gt;
 
-const App = () => {
-  return (
-    &lt;TrieveModalSearch
+&lt;script type="module"&gt;
+  import {renderToDiv} from 'https://unpkg.com/[email protected]/dist/vanilla/index.js';
+  window.addEventListener('load', () => {
+    const root = document.getElementById('root');
+    renderToDiv(root, 
       {% if params.apiKey -%}
-      apiKey="{{ params.apiKey }}"
+      apiKey: "{{ params.apiKey }}",
+      {% endif -%}
+      {% if params.datasetId -%}
+      datasetId: "{{ params.datasetId }}",
       {% endif -%}
       {% if params.baseUrl -%}
-      baseUrl="{{ params.baseUrl }}"
+      baseUrl: "{{ params.baseUrl }}",
       {% endif -%}
       {% if params.type -%}
-      type="{{ params.type }}"
+      type: "{{ params.type }}",
       {% endif -%}
       {% if params.suggestedQueries -%}
-      suggestedQueries={{ params.suggestedQueries }}
+      suggestedQueries: {{ params.suggestedQueries }},
       {% endif -%}
       {% if params.analytics -%}
-      analytics={{ params.analytics }}
+      analytics: {{ params.analytics }},
       {% endif -%}
       {% if params.tags -%}
-      tags={{ params.tags }}
+      tags: {{ params.tags }},
       {% endif -%}
       {% if params.responsive -%}
-      responsive={{ params.responsive }}
+      responsive: {{ params.responsive }},
       {% endif -%}
       {% if params.chat -%}
-      chat="{{ params.chat}}"
+      chat: "{{ params.chat}}",
       {% endif -%}
       {% if params.theme -%}
-      theme="{{ params.theme }}"
+      theme: "{{ params.theme }}",
       {% endif -%}
       {% if params.search_options -%}
-      search_options={{ params.searchOptions }}
+      search_options: {{ params.searchOptions }},
       {% endif -%}
       {% if params.brandLogoImgSrcUrl -%}
-      brandLogoImgSrcUrl="{{ params.brandLogoImgSrcUrl }}"
+      brandLogoImgSrcUrl: "{{ params.brandLogoImgSrcUrl }}",
       {% endif -%}
       {% if params.brandName -%}
-      brandName="{{ params.brandName }}"
+      brandName: "{{ params.brandName }}",
       {% endif -%}
       {% if params.problemLink -%}
-      problemLink="{{ params.problemLink }}"
+      problemLink: "{{ params.problemLink }}",
       {% endif -%}
       {% if params.brandColor -%}
-      brandColor="{{ params.brandColor }}"
+      brandColor: "{{ params.brandColor }}",
       {% endif -%}
       {% if params.placeholder -%}
-      placeholder="{{ params.placeholder }}"
+      placeholder: "{{ params.placeholder }}",
       {% endif -%}
       {% if params.defaultSearchQueries -%}
-      defaultSearchQueries={{ params.defaultSearchQueries }}
+      defaultSearchQueries: {{ params.defaultSearchQueries }},
       {% endif -%}
       {% if params.defaultAiQuestions -%}
-      defaultAiQuestions={{ params.defaultAiQuestions }}
+      defaultAiQuestions: {{ params.defaultAiQuestions }},
       {% endif -%}
       {% if params.defaultSearchMode -%}
-      defaultSearchMode="{{ params.defaultSearchMode }}"
+      defaultSearchMode: "{{ params.defaultSearchMode }}",
       {% endif -%}
       {% if params.useGroupSearch -%}
-      useGroupSearch={{ params.useGroupSearch }}
+      useGroupSearch: {{ params.useGroupSearch }},
       {% endif -%}
       {% if params.allowSwitchingModes -%}
-      allowSwitchingModes={{ params.allowSwitchingModes }}
+      allowSwitchingModes: {{ params.allowSwitchingModes }},
       {% endif -%}
       {% if params.defaultCurrency -%}
-      defaultCurrency="{{ params.defaultCurrency }}"
+      defaultCurrency: "{{ params.defaultCurrency }}",
       {% endif -%}
       {% if params.currencyPosition -%}
-      currencyPosition="{{ params.currencyPosition }}"
+      currencyPosition: "{{ params.currencyPosition }}",
       {% endif -%}
       {% if params.debounceMs -%}
-      debounceMs={{ params.debounceMs }}
+      debounceMs: {{ params.debounceMs }},
       {% endif -%}
-    /&gt;
-  );
-} </code>
+
+    )
+  });
+&lt;/script&gt;
+
+</code>
 </pre>