|
78 | 78 | if (urlParams.get('create') === 'true') {
|
79 | 79 | showModal = true;
|
80 | 80 | }
|
| 81 | +
|
| 82 | + // Perform initial search if there is a value in the search input |
| 83 | + if (searchValue) { |
| 84 | + search(searchValue); |
| 85 | + } |
81 | 86 | } catch (error) {
|
82 | 87 | appInsights.trackException({ error });
|
83 | 88 | } finally {
|
|
95 | 100 |
|
96 | 101 | const search = debounce(async (value: string) => {
|
97 | 102 | searchValue = value.toLowerCase();
|
98 |
| - filteredAgents = agents.filter((agent) => { |
| 103 | + filteredAgents = sections["All Agents"].filter((agent) => { |
99 | 104 | return (
|
100 | 105 | agent.metadata.display_name
|
101 | 106 | .toLowerCase()
|
|
170 | 175 | placeholder="Search any library or SDK"
|
171 | 176 | maxlength="150"
|
172 | 177 | type="search"
|
173 |
| - value={searchValue} |
| 178 | + bind:value={searchValue} |
174 | 179 | on:input={(e) => search(e.currentTarget.value)}
|
175 | 180 | />
|
176 | 181 | </div>
|
|
183 | 188 | </div>
|
184 | 189 | </div>
|
185 | 190 | {:else}
|
186 |
| - {#each Object.keys(sections) as section} |
| 191 | + {#if searchValue} |
187 | 192 | <div class="mt-7">
|
188 |
| - <h2 class="text-xl font-semibold">{section}</h2> |
| 193 | + <h2 class="text-xl font-semibold">Search Results</h2> |
189 | 194 | <div
|
190 | 195 | class="mt-4 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4"
|
191 | 196 | >
|
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} |
216 | 198 | <button
|
217 | 199 | 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"
|
218 | 200 | on:click={() => navigateAgents(agent)}
|
|
247 | 229 | {/each}
|
248 | 230 | </div>
|
249 | 231 | </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} |
251 | 299 | {/if}
|
252 | 300 | </div>
|
253 | 301 | </div>
|
|
0 commit comments