feature: prevent switching modes

Author: densumesh

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

@@ -111,6 +111,7 @@ export default function Home() {
               brandLogoImgSrcUrl="https://avatars.githubusercontent.com/u/76905799?s=200&v=4"
               brandName="SigNoz"
               brandColor="#E75536"
+              allowSwitchingModes={false}
             />
 
             <div className="mt-8 text-sm rounded overflow-hidden max-w-[100vw]">

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

@@ -381,7 +381,7 @@ body {
           }
 
           img {
-            @apply w-7 max-h-7 sm:w-3/4 sm:h-3/4 sm:mx-auto sm:mt-2;
+            @apply w-7 sm:w-3/4 sm:h-3/4 sm:mx-auto sm:mt-2;
           }
 
           svg {

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

@@ -21,19 +21,19 @@ const Modal = () => {
   useEffect(() => {
     document.documentElement.style.setProperty(
       "--tv-prop-brand-color",
-      props.brandColor ?? "#CB53EB"
+      props.brandColor ?? "#CB53EB",
     );
 
     // depending on the theme, set the background color of ::-webkit-scrollbar-thumb for #trieve-search-modal
     if (props.theme === "dark") {
       document.documentElement.style.setProperty(
         "--tv-prop-scrollbar-thumb-color",
-        "var(--tv-zinc-700)"
+        "var(--tv-zinc-700)",
       );
     } else {
       document.documentElement.style.setProperty(
         "--tv-prop-scrollbar-thumb-color",
-        "var(--tv-zinc-300)"
+        "var(--tv-zinc-300)",
       );
     }
   }, [props.brandColor]);
@@ -44,8 +44,7 @@ const Modal = () => {
       onOpenChange={(value) => {
         setOpen(value);
         setMode(props.defaultSearchMode || "search");
-      }}
-    >
+      }}>
       <OpenModalButton />
       <Dialog.Portal>
         <Dialog.DialogTitle className="sr-only">Search</Dialog.DialogTitle>
@@ -58,16 +57,14 @@ const Modal = () => {
           className={
             (mode === "chat" ? "chat-modal-mobile " : " ") +
             (props.theme === "dark" ? "dark " : "")
-          }
-        >
-          <ModeSwitch />
+          }>
+          {props.allowSwitchingModes && <ModeSwitch />}
           <div style={{ display: mode === "search" ? "block" : "none" }}>
             <SearchMode />
           </div>
           <div
             className={mode === "chat" ? " chat-container" : " "}
-            style={{ display: mode === "chat" ? "block" : "none" }}
-          >
+            style={{ display: mode === "chat" ? "block" : "none" }}>
             <ChatMode />
           </div>
         </Dialog.Content>

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

@@ -46,6 +46,7 @@ export type ModalProps = {
   }[];
   defaultSearchMode?: SearchModes;
   type?: ModalTypes;
+  allowSwitchingModes?: boolean;
   defaultCurrency?: string;
   currencyPosition?: currencyPosition;
 };
@@ -63,6 +64,7 @@ const defaultProps = {
   trieve: (() => {}) as unknown as TrieveSDK,
   openKeyCombination: [{ ctrl: true }, { key: "k", label: "K" }],
   type: "docs" as ModalTypes,
+  allowSwitchingModes: true,
   currencyPosition: "after" as currencyPosition,
 };