Skip to content

Commit ea76b78

Browse files
densumeshskeptrunedev
densumesh
authored and
skeptrunedev
committed
feature: group search in component
1 parent d144bbe commit ea76b78

File tree

10 files changed

+205
-66
lines changed

10 files changed

+205
-66
lines changed

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

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,14 @@ export default function Home() {
1616
return (
1717
<>
1818
<div
19-
className={`p-12 flex flex-col items-center justify-center w-screen h-screen relative ${theme === "dark" ? "bg-zinc-900 text-zinc-50" : ""
20-
}`}
21-
>
19+
className={`p-12 flex flex-col items-center justify-center w-screen h-screen relative ${
20+
theme === "dark" ? "bg-zinc-900 text-zinc-50" : ""
21+
}`}>
2222
<div className="absolute top-6 right-6">
2323
<ul>
2424
<li>
2525
<button
26-
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
27-
>
26+
onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
2827
{theme === "light" ? <IconMoon /> : <IconSun />}
2928
</button>
3029
</li>
@@ -39,8 +38,8 @@ export default function Home() {
3938
<TrieveModalSearch
4039
debounceMs={1000}
4140
defaultSearchMode="search"
42-
apiKey="tr-zpPVGUq18FxOCmXgLfqGbmDOY4UMW00r"
43-
datasetId="4538ad9f-47cf-44d4-8a14-7c111f9558a9"
41+
apiKey="tr-ZMwMAbZsIqqB2Ss4OTyPBe9hQEb5S0ov"
42+
datasetId="e7ac9f62-1a01-41ad-8e37-4b0e0bfb8843"
4443
problemLink="mailto:[email protected]?subject="
4544
theme={theme}
4645
tags={[
@@ -58,8 +57,7 @@ export default function Home() {
5857
strokeWidth="2"
5958
strokeLinecap="round"
6059
strokeLinejoin="round"
61-
className="w-3 h-3"
62-
>
60+
className="w-3 h-3">
6361
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
6462
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
6563
<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() {
8381
stroke="currentColor"
8482
strokeLinecap="round"
8583
strokeLinejoin="round"
86-
className="w-3 h-3"
87-
>
84+
className="w-3 h-3">
8885
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
8986
<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" />
9087
<path d="M5 10h3v3h-3z" />
@@ -113,6 +110,7 @@ export default function Home() {
113110
brandName="Trieve"
114111
brandColor="#b557c5"
115112
allowSwitchingModes={true}
113+
useGroupSearch={false}
116114
responsive={false}
117115
/>
118116

@@ -128,7 +126,8 @@ export default function Home() {
128126
Search Results Component
129127
</h2>
130128
<h2 className="font-bold text-center py-8">
131-
This was removed, see https://github.com/devflowinc/trieve/pull/2613
129+
This was removed, see
130+
https://github.com/devflowinc/trieve/pull/2613
132131
</h2>
133132
</>
134133
)}

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

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useSuggestedQueries } from "../../utils/hooks/useSuggestedQueries";
55
import { useModalState } from "../../utils/hooks/modal-context";
66
import { Tags } from "./Tags";
77
import { useChatState } from "../../utils/hooks/chat-context";
8+
import { isChunksWithHighlights } from "../../utils/types";
89

910
export const SearchMode = () => {
1011
const {
@@ -45,8 +46,7 @@ export const SearchMode = () => {
4546
strokeWidth="2"
4647
strokeLinecap="round"
4748
strokeLinejoin="round"
48-
className="search-icon"
49-
>
49+
className="search-icon">
5050
<circle cx="11" cy="11" r="8"></circle>
5151
<path d="m21 21-4.3-4.3"></path>
5252
</svg>
@@ -68,8 +68,7 @@ export const SearchMode = () => {
6868
stroke="currentColor"
6969
strokeWidth="2"
7070
strokeLinecap="round"
71-
strokeLinejoin="round"
72-
>
71+
strokeLinejoin="round">
7372
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
7473
<line x1="18" y1="6" x2="6" y2="18" />
7574
<line x1="6" y1="6" x2="18" y2="18" />
@@ -83,8 +82,7 @@ export const SearchMode = () => {
8382
onClick={refetchSuggestedQueries}
8483
disabled={isLoadingSuggestedQueries}
8584
className="suggested-query"
86-
title="Refresh suggested queries"
87-
>
85+
title="Refresh suggested queries">
8886
<ReloadIcon width="14" height="14" />
8987
</button>
9088
<p>Suggested Queries: </p>
@@ -99,8 +97,7 @@ export const SearchMode = () => {
9997
key={q}
10098
className={`suggested-query${
10199
isLoadingSuggestedQueries ? " loading" : ""
102-
}`}
103-
>
100+
}`}>
104101
{q}
105102
</button>
106103
))}
@@ -114,8 +111,7 @@ export const SearchMode = () => {
114111
<li>
115112
<button
116113
className="item start-chat"
117-
onClick={() => switchToChatAndAskQuestion(query)}
118-
>
114+
onClick={() => switchToChatAndAskQuestion(query)}>
119115
<div>
120116
<AIIcon />
121117
<div>
@@ -130,14 +126,29 @@ export const SearchMode = () => {
130126
</li>
131127
) : null}
132128
{results.length
133-
? results.map((result, index) => (
134-
<Item
135-
item={result}
136-
index={index}
137-
requestID={requestID}
138-
key={result.chunk.id}
139-
/>
140-
))
129+
? results.map((result, index) =>
130+
isChunksWithHighlights(result) ? (
131+
<Item
132+
item={result}
133+
index={index}
134+
requestID={requestID}
135+
key={result.chunk.id}
136+
/>
137+
) : (
138+
<div key={index} className="item-group-container">
139+
<p className="item-group-name">{result.group.name}</p>
140+
{result.chunks.map((chunk, index) => (
141+
<Item
142+
item={chunk}
143+
index={index}
144+
requestID={requestID}
145+
key={chunk.chunk.id}
146+
className="item group"
147+
/>
148+
))}
149+
</div>
150+
),
151+
)
141152
: null}
142153
{query && !results.length && !loadingResults ? (
143154
<div className="no-results">
@@ -148,8 +159,7 @@ export const SearchMode = () => {
148159
<a
149160
className="no-results-help-link"
150161
href={`${props.problemLink}No results found for query: ${query} on ${props.brandName}`}
151-
target="_blank"
152-
>
162+
target="_blank">
153163
Contact us
154164
</a>
155165
</p>
@@ -166,8 +176,7 @@ export const SearchMode = () => {
166176
<a
167177
className="trieve-powered"
168178
href="https://trieve.ai"
169-
target="_blank"
170-
>
179+
target="_blank">
171180
<img src="https://cdn.trieve.ai/trieve-logo.png" alt="logo" />
172181
Powered by Trieve
173182
</a>

‎clients/search-component/src/TrieveModal/Search/item.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,16 @@ type Props = {
1010
item: ChunkWithHighlights;
1111
requestID: string;
1212
index: number;
13+
className?: string;
1314
};
1415

15-
export const Item = ({ item, requestID, index }: Props) => {
16+
export const Item = ({ item, requestID, index, className }: Props) => {
1617
const { onUpOrDownClicked } = useKeyboardNavigation();
1718
const { props, trieveSDK } = useModalState();
1819
const Component = item.chunk.link ? "a" : "button";
1920
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2021
const itemRef = useRef<HTMLButtonElement | HTMLLinkElement | any>(null);
22+
const [isHovered, setIsHovered] = useState(false);
2123

2224
let descriptionHtml = item.highlights
2325
? item.highlights.join("...")
@@ -161,7 +163,7 @@ export const Item = ({ item, requestID, index }: Props) => {
161163
<Component
162164
ref={itemRef}
163165
id={`trieve-search-item-${index}`}
164-
className="item"
166+
className={className ?? "item"}
165167
onClick={() =>
166168
onResultClick(
167169
{
@@ -171,6 +173,12 @@ export const Item = ({ item, requestID, index }: Props) => {
171173
requestID,
172174
)
173175
}
176+
onMouseEnter={() => {
177+
setIsHovered(true);
178+
}}
179+
onMouseLeave={() => {
180+
setIsHovered(false);
181+
}}
174182
{...(item.chunk.link
175183
? {
176184
href: `${item.chunk.link}${linkSuffix}`,
@@ -190,7 +198,9 @@ export const Item = ({ item, requestID, index }: Props) => {
190198
) : null}
191199
{title ? (
192200
<div>
193-
{props.type !== "ecommerce" ? <h6 className="chunk-path">{getChunkPath()}</h6> : null}
201+
{props.type === "docs" ? (
202+
<h6 className="chunk-path">{getChunkPath()}</h6>
203+
) : null}
194204
<h4
195205
dangerouslySetInnerHTML={{
196206
__html: title,
@@ -237,7 +247,7 @@ export const Item = ({ item, requestID, index }: Props) => {
237247
}}
238248
/>
239249
)}
240-
<ArrowIcon />
250+
<ArrowIcon className={!isHovered ? "hidden" : ""} />
241251
</div>
242252
</Component>
243253
</li>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,13 @@ body {
5454

5555
.trieve-elements-search {
5656
@apply pr-2;
57+
58+
.item-group-container {
59+
@apply border-b border-gray-300 mb-5;
60+
}
61+
.item-group-name {
62+
@apply text-sm font-bold mb-2;
63+
}
5764
}
5865

5966
.no-results {
@@ -596,11 +603,19 @@ body {
596603
@apply shrink-0 w-8;
597604
}
598605

606+
/* &.hidden {
607+
@apply hidden;
608+
} */
609+
599610
mark {
600611
@apply bg-inherit;
601612
color: var(--tv-prop-brand-color);
602613
}
603614

615+
&.group {
616+
@apply pl-2 pr-3;
617+
}
618+
604619
&.start-chat {
605620
@apply items-center flex;
606621

0 commit comments

Comments
 (0)