Skip to content

Commit 8697288

Browse files
samyakkkksamyakkkk
authored
Merge pull request #334 from CommandDash/highlighted-agents
(feat): search fix
2 parents e20a1e9 + 695ab0f commit 8697288

File tree

1 file changed

+77
-29
lines changed

1 file changed

+77
-29
lines changed

‎web/src/routes/+page.svelte

Lines changed: 77 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,11 @@
7878
if (urlParams.get('create') === 'true') {
7979
showModal = true;
8080
}
81+
82+
// Perform initial search if there is a value in the search input
83+
if (searchValue) {
84+
search(searchValue);
85+
}
8186
} catch (error) {
8287
appInsights.trackException({ error });
8388
} finally {
@@ -95,7 +100,7 @@
95100
96101
const search = debounce(async (value: string) => {
97102
searchValue = value.toLowerCase();
98-
filteredAgents = agents.filter((agent) => {
103+
filteredAgents = sections["All Agents"].filter((agent) => {
99104
return (
100105
agent.metadata.display_name
101106
.toLowerCase()
@@ -170,7 +175,7 @@
170175
placeholder="Search any library or SDK"
171176
maxlength="150"
172177
type="search"
173-
value={searchValue}
178+
bind:value={searchValue}
174179
on:input={(e) => search(e.currentTarget.value)}
175180
/>
176181
</div>
@@ -183,36 +188,13 @@
183188
</div>
184189
</div>
185190
{:else}
186-
{#each Object.keys(sections) as section}
191+
{#if searchValue}
187192
<div class="mt-7">
188-
<h2 class="text-xl font-semibold">{section}</h2>
193+
<h2 class="text-xl font-semibold">Search Results</h2>
189194
<div
190195
class="mt-4 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4"
191196
>
192-
{#each sections[section] as agent, index}
193-
{#if index === 2 && section === "All Agents"}
194-
<button
195-
class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40 promoted-card"
196-
on:click={() => window.open(promotedAgent.author.source_url, "_blank")}
197-
>
198-
<img
199-
src={promotedAgent.metadata.avatar_id}
200-
alt="Avatar"
201-
class="mb-2 aspect-square size-12 flex-none rounded-full object-cover sm:mb-6 sm:size-20"
202-
/>
203-
<h3
204-
class="mb-2 line-clamp-2 max-w-full break-words text-center text-[.8rem] font-semibold leading-snug sm:text-sm promoted-text"
205-
>
206-
{promotedAgent.metadata.display_name}
207-
</h3>
208-
<p
209-
class="line-clamp-4 text-xs text-gray-700 sm:line-clamp-2 dark:text-gray-400 promoted-text"
210-
>
211-
{promotedAgent.metadata.description}
212-
</p>
213-
<span class="promoted-indicator">Promoted</span>
214-
</button>
215-
{/if}
197+
{#each filteredAgents as agent}
216198
<button
217199
class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
218200
on:click={() => navigateAgents(agent)}
@@ -247,7 +229,73 @@
247229
{/each}
248230
</div>
249231
</div>
250-
{/each}
232+
{:else}
233+
{#each Object.keys(sections) as section}
234+
<div class="mt-7">
235+
<h2 class="text-xl font-semibold">{section}</h2>
236+
<div
237+
class="mt-4 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4"
238+
>
239+
{#each sections[section] as agent, index}
240+
<!-- {#if index === 2 && section === "All Agents"}
241+
<button
242+
class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40 promoted-card"
243+
on:click={() => window.open(promotedAgent.author.source_url, "_blank")}
244+
>
245+
<img
246+
src={promotedAgent.metadata.avatar_id}
247+
alt="Avatar"
248+
class="mb-2 aspect-square size-12 flex-none rounded-full object-cover sm:mb-6 sm:size-20"
249+
/>
250+
<h3
251+
class="mb-2 line-clamp-2 max-w-full break-words text-center text-[.8rem] font-semibold leading-snug sm:text-sm promoted-text"
252+
>
253+
{promotedAgent.metadata.display_name}
254+
</h3>
255+
<p
256+
class="line-clamp-4 text-xs text-gray-700 sm:line-clamp-2 dark:text-gray-400 promoted-text"
257+
>
258+
{promotedAgent.metadata.description}
259+
</p>
260+
<span class="promoted-indicator">Promoted</span>
261+
</button>
262+
{/if} -->
263+
<button
264+
class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
265+
on:click={() => navigateAgents(agent)}
266+
>
267+
<img
268+
src={agent.metadata.avatar_id}
269+
alt="Avatar"
270+
class="mb-2 aspect-square size-12 flex-none rounded-full object-cover sm:mb-6 sm:size-20"
271+
/>
272+
<h3
273+
class="mb-2 line-clamp-2 max-w-full break-words text-center text-[.8rem] font-semibold leading-snug sm:text-sm"
274+
>
275+
{agent.metadata.display_name}
276+
</h3>
277+
<p
278+
class="line-clamp-4 text-xs text-gray-700 sm:line-clamp-2 dark:text-gray-400"
279+
>
280+
{agent.metadata.description}
281+
</p>
282+
{#if agent.author?.source_url}
283+
<a
284+
href={agent.author.source_url}
285+
class="mt-auto pt-2 text-xs text-gray-400 dark:text-gray-500 line-clamp-1 hover:underline inline-flex flex-row items-center"
286+
target="_blank"
287+
rel="noreferrer"
288+
>
289+
<CarbonGithub class="mx-1" />
290+
{formatText(agent.author.source_url, 20)}
291+
</a>
292+
{/if}
293+
</button>
294+
{/each}
295+
</div>
296+
</div>
297+
{/each}
298+
{/if}
251299
{/if}
252300
</div>
253301
</div>

0 commit comments

Comments
 (0)