feature: add search bar integration

Author: densumesh

clients/search-component/README.md

@@ -107,7 +107,7 @@ declare module "solid-js" {
 | floatingSearchIconPosition | "left" or "right"                                                                              | "right"                                                               |
 | showFloatingSearchIcon     | boolean                                                                                        | false                                                                 |
 | showFloatingInput          | boolean                                                                                        | false                                                                 |
-| buttonTriggers             | [{ selector: <"query-selector">, mode: "chat"}]                                                |                                                                       |
+| buttonTriggers             | [{ selector: <"query-selector">, mode: "chat", removeListeners: true}]                                                |                                                                       |
 | hideOpenButton             | boolean                                                                                        | false                                                                 |
 | showResultHighlights       | boolean                                                                                        | true                                                                  |
 | initialAiMessage           | string (example: "<p>Hi! How can I help</p>")                                                  | null                                                                  |

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

@@ -30,6 +30,11 @@ export const SearchInput = () => {
             setLoadingResults(true);
             setQuery(e.target.value);
           }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && props.searchBar) {
+              window.location.href = "/search?q=" + query;
+            }
+          }}
           placeholder={
             imageUrl.length > 0
               ? "Using Image for Search"

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

@@ -147,7 +147,6 @@ export const SearchMode = () => {
               resultsDisplay
             )}
           </ul>
-        </div>
           {hasQuery && !resultsLength && !loadingResults && (
             <NoResults props={props} query={query} />
           )}
@@ -156,6 +155,7 @@ export const SearchMode = () => {
               <p className="">Searching...</p>
             </div>
           )}
+        </div>
     </>
   );
 };

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

@@ -209,6 +209,7 @@ export type ModalProps = {
   usePortal?: boolean;
   previewTopicId?: string;
   overrideFetch?: boolean;
+  searchBar?: boolean;
 };
 
 const defaultProps = {
@@ -280,6 +281,7 @@ const defaultProps = {
   } as SearchPageProps,
   usePortal: true,
   previewTopicId: undefined,
+  searchBar: false,
 } satisfies ModalProps;
 
 const ModalContext = createContext<{

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

@@ -15,6 +15,20 @@ export const setClickTriggers = (
     // @ts-expect-error Property 'href' does not exist on type 'Element'. [2339]
     element.href = "#";
 
+  const detailsElement = element.querySelector('details');
+  
+  if (detailsElement) {
+    // Find and remove the summary element
+    const summaryElement = detailsElement.querySelector('summary');
+    
+    if (summaryElement) {
+      //keep everything under the summary element
+      summaryElement.querySelector(".header__icon-close")?.remove();
+      const newDetailsChild = summaryElement.cloneNode(true);
+      detailsElement.replaceChildren(newDetailsChild);
+    }
+  }
+
     const newElement = element.cloneNode(true);
     element?.parentNode?.replaceChild(newElement, element);
     return newElement as unknown as Element;