feature: group search in component

devflowinc · Oct 21, 2024 · ea76b78 · ea76b78
1 parent d144bbe
commit ea76b78
Show file tree

Hide file tree

Showing 10 changed files with 205 additions and 66 deletions.
diff --git a/clients/search-component/example/src/routes/index.lazy.tsx b/clients/search-component/example/src/routes/index.lazy.tsx
@@ -16,15 +16,14 @@ export default function Home() {
   return (
     <>
       <div
-        className={`p-12 flex flex-col items-center justify-center w-screen h-screen relative ${theme === "dark" ? "bg-zinc-900 text-zinc-50" : ""
-          }`}
-      >
+        className={`p-12 flex flex-col items-center justify-center w-screen h-screen relative ${
+          theme === "dark" ? "bg-zinc-900 text-zinc-50" : ""
+        }`}>
         <div className="absolute top-6 right-6">
           <ul>
             <li>
               <button
-                onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-              >
+                onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
                 {theme === "light" ? <IconMoon /> : <IconSun />}
               </button>
             </li>
@@ -39,8 +38,8 @@ export default function Home() {
             <TrieveModalSearch
               debounceMs={1000}
               defaultSearchMode="search"
-              apiKey="tr-zpPVGUq18FxOCmXgLfqGbmDOY4UMW00r"
-              datasetId="4538ad9f-47cf-44d4-8a14-7c111f9558a9"
+              apiKey="tr-ZMwMAbZsIqqB2Ss4OTyPBe9hQEb5S0ov"
+              datasetId="e7ac9f62-1a01-41ad-8e37-4b0e0bfb8843"
               problemLink="mailto:[email protected]?subject="
               theme={theme}
               tags={[
@@ -58,8 +57,7 @@ export default function Home() {
                       strokeWidth="2"
                       strokeLinecap="round"
                       strokeLinejoin="round"
-                      className="w-3 h-3"
-                    >
+                      className="w-3 h-3">
                       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                       <path d="M14 3v4a1 1 0 0 0 1 1h4" />
                       <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
@@ -83,8 +81,7 @@ export default function Home() {
                       stroke="currentColor"
                       strokeLinecap="round"
                       strokeLinejoin="round"
-                      className="w-3 h-3"
-                    >
+                      className="w-3 h-3">
                       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                       <path d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z" />
                       <path d="M5 10h3v3h-3z" />
@@ -113,6 +110,7 @@ export default function Home() {
               brandName="Trieve"
               brandColor="#b557c5"
               allowSwitchingModes={true}
+              useGroupSearch={false}
               responsive={false}
             />
 
@@ -128,7 +126,8 @@ export default function Home() {
               Search Results Component
             </h2>
             <h2 className="font-bold text-center py-8">
-              This was removed, see https://github.com/devflowinc/trieve/pull/2613
+              This was removed, see
+              https://github.com/devflowinc/trieve/pull/2613
             </h2>
           </>
         )}

diff --git a/clients/search-component/src/TrieveModal/Search/SearchMode.tsx b/clients/search-component/src/TrieveModal/Search/SearchMode.tsx
@@ -5,6 +5,7 @@ import { useSuggestedQueries } from "../../utils/hooks/useSuggestedQueries";
 import { useModalState } from "../../utils/hooks/modal-context";
 import { Tags } from "./Tags";
 import { useChatState } from "../../utils/hooks/chat-context";
+import { isChunksWithHighlights } from "../../utils/types";
 
 export const SearchMode = () => {
   const {
@@ -45,8 +46,7 @@ export const SearchMode = () => {
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
-            className="search-icon"
-          >
+            className="search-icon">
             <circle cx="11" cy="11" r="8"></circle>
             <path d="m21 21-4.3-4.3"></path>
           </svg>
@@ -68,8 +68,7 @@ export const SearchMode = () => {
               stroke="currentColor"
               strokeWidth="2"
               strokeLinecap="round"
-              strokeLinejoin="round"
-            >
+              strokeLinejoin="round">
               <path stroke="none" d="M0 0h24v24H0z" fill="none" />
               <line x1="18" y1="6" x2="6" y2="18" />
               <line x1="6" y1="6" x2="18" y2="18" />
@@ -83,8 +82,7 @@ export const SearchMode = () => {
                 onClick={refetchSuggestedQueries}
                 disabled={isLoadingSuggestedQueries}
                 className="suggested-query"
-                title="Refresh suggested queries"
-              >
+                title="Refresh suggested queries">
                 <ReloadIcon width="14" height="14" />
               </button>
               <p>Suggested Queries: </p>
@@ -99,8 +97,7 @@ export const SearchMode = () => {
                   key={q}
                   className={`suggested-query${
                     isLoadingSuggestedQueries ? " loading" : ""
-                  }`}
-                >
+                  }`}>
                   {q}
                 </button>
               ))}
@@ -114,8 +111,7 @@ export const SearchMode = () => {
           <li>
             <button
               className="item start-chat"
-              onClick={() => switchToChatAndAskQuestion(query)}
-            >
+              onClick={() => switchToChatAndAskQuestion(query)}>
               <div>
                 <AIIcon />
                 <div>
@@ -130,14 +126,29 @@ export const SearchMode = () => {
           </li>
         ) : null}
         {results.length
-          ? results.map((result, index) => (
-              <Item
-                item={result}
-                index={index}
-                requestID={requestID}
-                key={result.chunk.id}
-              />
-            ))
+          ? results.map((result, index) =>
+              isChunksWithHighlights(result) ? (
+                <Item
+                  item={result}
+                  index={index}
+                  requestID={requestID}
+                  key={result.chunk.id}
+                />
+              ) : (
+                <div key={index} className="item-group-container">
+                  <p className="item-group-name">{result.group.name}</p>
+                  {result.chunks.map((chunk, index) => (
+                    <Item
+                      item={chunk}
+                      index={index}
+                      requestID={requestID}
+                      key={chunk.chunk.id}
+                      className="item group"
+                    />
+                  ))}
+                </div>
+              ),
+            )
           : null}
         {query && !results.length && !loadingResults ? (
           <div className="no-results">
@@ -148,8 +159,7 @@ export const SearchMode = () => {
                 <a
                   className="no-results-help-link"
                   href={`${props.problemLink}No results found for query: ${query} on ${props.brandName}`}
-                  target="_blank"
-                >
+                  target="_blank">
                   Contact us
                 </a>
               </p>
@@ -166,8 +176,7 @@ export const SearchMode = () => {
           <a
             className="trieve-powered"
             href="https://trieve.ai"
-            target="_blank"
-          >
+            target="_blank">
             <img src="https://cdn.trieve.ai/trieve-logo.png" alt="logo" />
             Powered by Trieve
           </a>

diff --git a/clients/search-component/src/TrieveModal/Search/item.tsx b/clients/search-component/src/TrieveModal/Search/item.tsx
@@ -10,14 +10,16 @@ type Props = {
   item: ChunkWithHighlights;
   requestID: string;
   index: number;
+  className?: string;
 };
 
-export const Item = ({ item, requestID, index }: Props) => {
+export const Item = ({ item, requestID, index, className }: Props) => {
   const { onUpOrDownClicked } = useKeyboardNavigation();
   const { props, trieveSDK } = useModalState();
   const Component = item.chunk.link ? "a" : "button";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const itemRef = useRef<HTMLButtonElement | HTMLLinkElement | any>(null);
+  const [isHovered, setIsHovered] = useState(false);
 
   let descriptionHtml = item.highlights
     ? item.highlights.join("...")
@@ -161,7 +163,7 @@ export const Item = ({ item, requestID, index }: Props) => {
       <Component
         ref={itemRef}
         id={`trieve-search-item-${index}`}
-        className="item"
+        className={className ?? "item"}
         onClick={() =>
           onResultClick(
             {
@@ -171,6 +173,12 @@ export const Item = ({ item, requestID, index }: Props) => {
             requestID,
           )
         }
+        onMouseEnter={() => {
+          setIsHovered(true);
+        }}
+        onMouseLeave={() => {
+          setIsHovered(false);
+        }}
         {...(item.chunk.link
           ? {
               href: `${item.chunk.link}${linkSuffix}`,
@@ -190,7 +198,9 @@ export const Item = ({ item, requestID, index }: Props) => {
           ) : null}
           {title ? (
             <div>
-              {props.type !== "ecommerce" ? <h6 className="chunk-path">{getChunkPath()}</h6> : null}
+              {props.type === "docs" ? (
+                <h6 className="chunk-path">{getChunkPath()}</h6>
+              ) : null}
               <h4
                 dangerouslySetInnerHTML={{
                   __html: title,
@@ -237,7 +247,7 @@ export const Item = ({ item, requestID, index }: Props) => {
               }}
             />
           )}
-          <ArrowIcon />
+          <ArrowIcon className={!isHovered ? "hidden" : ""} />
         </div>
       </Component>
     </li>

diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -54,6 +54,13 @@ body {
 
     .trieve-elements-search {
       @apply pr-2;
+
+      .item-group-container {
+        @apply border-b border-gray-300 mb-5;
+      }
+      .item-group-name {
+        @apply text-sm font-bold mb-2;
+      }
     }
 
     .no-results {
@@ -596,11 +603,19 @@ body {
         @apply shrink-0 w-8;
       }
 
+      /* &.hidden {
+        @apply hidden;
+      } */
+
       mark {
         @apply bg-inherit;
         color: var(--tv-prop-brand-color);
       }
 
+      &.group {
+        @apply pl-2 pr-3;
+      }
+
       &.start-chat {
         @apply items-center flex;