cleanup: default input and floating search to false

devflowinc · Dec 21, 2024 · a55ff0a · a55ff0a
1 parent b7c1589
commit a55ff0a
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 73 deletions.
diff --git a/clients/search-component/example/src/routes/ecommerce.tsx b/clients/search-component/example/src/routes/ecommerce.tsx
@@ -19,13 +19,18 @@ export default function ECommerce() {
   const useGroupSearch = import.meta.env.VITE_USE_GROUP_SEARCH == "true";
   const showFloatingButton = import.meta.env.VITE_SHOW_FLOATING_BTN == "true";
   const floatingButtonPosition = import.meta.env.VITE_FLOATING_BTN_POSITION;
+  const floatingSearchIconPosition = import.meta.env
+    .VITE_FLOATING_SEARCH_ICON_POSITION;
+  const showFloatingSearchIcon =
+    import.meta.env.VITE_SHOW_FLOATING_SEARCH_ICON == "true";
+  const showFloatingInput = import.meta.env.VITE_SHOW_FLOATING_INPUT == "true";
   const usePagefind = import.meta.env.VITE_USE_PAGEFIND == "true";
 
   const defaultSearchQueries: string[] = (
     import.meta.env.VITE_DEFAULT_SEARCH_QUERIES ?? ""
   ).split(",");
   const defaultTags: any[] = JSON.parse(
-    import.meta.env.VITE_DEFAULT_TAGS ?? "[]",
+    import.meta.env.VITE_DEFAULT_TAGS ?? "[]"
   );
 
   const [theme, setTheme] = useState<"light" | "dark">("light");
@@ -94,6 +99,9 @@ export default function ECommerce() {
               floatingButtonPosition={floatingButtonPosition}
               showFloatingButton={showFloatingButton}
               debounceMs={500}
+              floatingSearchIconPosition={floatingSearchIconPosition}
+              showFloatingSearchIcon={showFloatingSearchIcon}
+              showFloatingInput={showFloatingInput}
             />
           </>
         ) : (

diff --git a/clients/search-component/package.json b/clients/search-component/package.json
@@ -19,12 +19,12 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.43",
+  "version": "0.2.44",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {
     "dev": "run-p watch:css watch:js",
-    "all" : "run-p build:example watch:css watch:js serve",
+    "all": "run-p build:example watch:css watch:js serve",
     "build:example": "cd example/ && yarn dev",
     "build": "run-s build:src build:css type:dts",
     "build:watch": "run-p watch:js build:src build:css type:dts",

diff --git a/clients/search-component/src/TrieveModal/FloatingActionButton.tsx b/clients/search-component/src/TrieveModal/FloatingActionButton.tsx
@@ -30,7 +30,6 @@ export const FloatingActionButton = () => {
       className="floating-action-button"
       style={{
         ...setButtonPosition(props.floatingButtonPosition || "bottom-right"),
-        display: props.showFloatingButton ? "" : "none",
       }}
     >
       <i

diff --git a/clients/search-component/src/TrieveModal/FloatingSearchIcon.tsx b/clients/search-component/src/TrieveModal/FloatingSearchIcon.tsx
@@ -29,7 +29,6 @@ export const FloatingSearchIcon = () => {
     <div
       className="floating-search-btn-container"
       style={{
-        display: props.showFloatingSearchIcon ? "" : "none",
         ...setButtonPosition(props.floatingSearchIconPosition || "right"),
       }}
       onMouseEnter={() => setIsHovered(true)}

diff --git a/clients/search-component/src/TrieveModal/FloatingSearchInput.tsx b/clients/search-component/src/TrieveModal/FloatingSearchInput.tsx
@@ -1,35 +1,18 @@
-import React, { startTransition, useState } from "react";
+import React, { startTransition } from "react";
 import { useModalState } from "../utils/hooks/modal-context";
 
 export const FloatingSearchInput = () => {
   const { props, setOpen, setMode, query, setQuery } = useModalState();
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isHovered, setIsHovered] = useState(false);
 
   const handleOpenSearch = () => {
-    if (query) {
-      startTransition(() => {
-        setOpen(true);
-        setMode("search");
-      });
-    }
+    startTransition(() => {
+      setOpen(true);
+      setMode("search");
+    });
   };
 
   return (
-    <div
-      className="floating-input-container"
-      style={{
-        display: props.showFloatingInput ? "flex" : "none",
-
-        border: `3px solid ${
-          isFocused || isHovered ? "var(--tv-zinc-300)" : "var(--tv-zinc-200)"
-        }`,
-
-        backgroundColor: isFocused || isHovered ? `var(--tv-zinc-50)` : "",
-      }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
+    <button className="floating-input-container" onClick={handleOpenSearch}>
       <div className="floating-search-icon">
         <svg
           width="26"
@@ -48,8 +31,6 @@ export const FloatingSearchInput = () => {
         placeholder={props.placeholder}
         value={query}
         onChange={(e) => setQuery(e.target.value)}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
             handleOpenSearch();
@@ -65,6 +46,6 @@ export const FloatingSearchInput = () => {
       >
         <i className="fa-regular fa-paper-plane"></i>
       </button>
-    </div>
+    </button>
   );
 };
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -1288,7 +1288,15 @@ body {
   }
 
   .floating-input-container {
-    @apply z-[999] fixed bottom-5 flex flex-row items-center justify-start gap-2 w-2/4 p-1 pr-5 h-[55px] rounded-full cursor-pointer transition-colors duration-300 ease-in-out;
+    @apply z-[999] fixed bottom-5 flex flex-row items-center justify-start gap-2 w-2/4 p-1 pr-5 h-[55px] rounded-full cursor-pointer transition-colors duration-300 ease-in-out bg-white border-2;
+
+    &:hover {
+      border-color: var(--tv-prop-brand-color);
+    }
+
+    &:focus {
+      border-color: var(--tv-prop-brand-color);
+    }
 
     .floating-search-input {
       @apply p-2 outline-none text-base w-full text-black bg-transparent;

diff --git a/clients/search-component/src/TrieveModal/index.tsx b/clients/search-component/src/TrieveModal/index.tsx
@@ -34,7 +34,7 @@ const Modal = () => {
 
       if ((window.visualViewport?.width ?? 1000) <= 768) {
         const trieveSearchModal = document.getElementById(
-          "trieve-search-modal",
+          "trieve-search-modal"
         );
         if (trieveSearchModal) {
           trieveSearchModal.style.maxHeight = `calc(${viewportHeight}px - ${
@@ -90,7 +90,7 @@ const Modal = () => {
         }
         chatWithGroup(
           customEvent.detail.group,
-          customEvent.detail.betterGroupName,
+          customEvent.detail.betterGroupName
         );
         if (customEvent.detail.message) {
           askQuestion(customEvent.detail.message, customEvent.detail.group);
@@ -108,26 +108,26 @@ const Modal = () => {
   useEffect(() => {
     document.documentElement.style.setProperty(
       "--tv-prop-brand-color",
-      props.brandColor ?? "#CB53EB",
+      props.brandColor ?? "#CB53EB"
     );
 
     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)"
       );
     }
 
     document.documentElement.style.setProperty(
       "--tv-prop-brand-font-family",
       props.brandFontFamily ??
         `Maven Pro, ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
     );
   }, [props.brandColor, props.brandFontFamily]);
 
@@ -173,9 +173,9 @@ const Modal = () => {
           </div>
         </>
       )}
-      <FloatingSearchIcon />
-      <FloatingActionButton />
-      <FloatingSearchInput />
+      {props.showFloatingSearchIcon && <FloatingSearchIcon />}
+      {props.showFloatingButton && <FloatingActionButton />}
+      {props.showFloatingInput && <FloatingSearchInput />}
     </>
   );
 };

diff --git a/clients/search-component/src/utils/hooks/modal-context.tsx b/clients/search-component/src/utils/hooks/modal-context.tsx
@@ -134,15 +134,15 @@ const defaultProps = {
   responsive: false,
   zIndex: 1000,
   debounceMs: 0,
-  show: true,
-  position: "bottom-right" as
+  showFloatingButton: false,
+  floatingButtonPosition: "bottom-right" as
     | "top-left"
     | "top-right"
     | "bottom-left"
     | "bottom-right",
   floatingSearchIconPosition: "right" as "left" | "right",
-  showFloatingSearchIcon: true,
-  showFloatingInput: true,
+  showFloatingSearchIcon: false,
+  showFloatingInput: false,
 };
 
 const ModalContext = createContext<{

diff --git a/server/static/output.css b/server/static/output.css
@@ -584,10 +584,6 @@ video {
   margin-right: 1rem;
 }
 
-.mt-0\.5 {
-  margin-top: 0.125rem;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -616,10 +612,6 @@ video {
   margin-top: 2rem;
 }
 
-.mt-1\.5 {
-  margin-top: 0.375rem;
-}
-
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -804,11 +796,6 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -858,11 +845,6 @@ video {
   padding-bottom: 1rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .pl-0\.5 {
   padding-left: 0.125rem;
 }
@@ -907,11 +889,6 @@ video {
   letter-spacing: -0.025em;
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -922,11 +899,6 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));