Skip to content

GitLab

Commit 2389c36a authored by rdavis's avatar rdavis
Browse files

refactor: Update WebSearchResults.svelte to use new CollapsibleComponent

parent d20601dc
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 73 deletions
src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
View file @ 2389c36a
...@@ -2,17 +2,18 @@ ...@@ -2,17 +2,18 @@
import ChevronDown from '$lib/components/icons/ChevronDown.svelte'; import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import ChevronUp from '$lib/components/icons/ChevronUp.svelte'; import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte'; import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
import { Collapsible } from 'bits-ui'; import Collapsible from '$lib/components/common/Collapsible.svelte';
import { slide } from 'svelte/transition';
export let status = { urls: [], query: '' }; export let status = { urls: [], query: '' };
let state = false; let state = false;
</script> </script>
<Collapsible.Root class="w-full space-y-1" bind:open={state}> <div class="w-full space-y-1">
<Collapsible.Trigger> <Collapsible bind:open={state}>
<div <div
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition" class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
slot="head"
> >
<slot /> <slot />
...@@ -22,76 +23,75 @@ ...@@ -22,76 +23,75 @@
<ChevronDown strokeWidth="3.5" className="size-3.5 " /> <ChevronDown strokeWidth="3.5" className="size-3.5 " />
{/if} {/if}
</div> </div>
</Collapsible.Trigger> <div
class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
<Collapsible.Content slot="content"
class=" text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl" >
transition={slide} {#if status?.query}
> <a
{#if status?.query} href="https://www.google.com/search?q={status.query}"
<a target="_blank"
href="https://www.google.com/search?q={status.query}" class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
target="_blank"
class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
>
<div class="flex gap-2 items-center">
<MagnifyingGlass />
<div class=" line-clamp-1">
{status.query}
</div>
</div>
<div
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
> >
<!-- --> <div class="flex gap-2 items-center">
<svg <MagnifyingGlass />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" <div class=" line-clamp-1">
fill="currentColor" {status.query}
class="size-4" </div>
</div>
<div
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
> >
<path <!-- -->
fill-rule="evenodd" <svg
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" xmlns="http://www.w3.org/2000/svg"
clip-rule="evenodd" viewBox="0 0 16 16"
/> fill="currentColor"
</svg> class="size-4"
</div> >
</a> <path
{/if} fill-rule="evenodd"
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
{#each status.urls as url, urlIdx} clip-rule="evenodd"
<a />
href={url} </svg>
target="_blank" </div>
class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1 </a>
? '' {/if}
: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
> {#each status.urls as url, urlIdx}
<div class=" line-clamp-1"> <a
{url} href={url}
</div> target="_blank"
class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
<div ? ''
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition" : 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
> >
<!-- --> <div class=" line-clamp-1">
<svg {url}
xmlns="http://www.w3.org/2000/svg" </div>
viewBox="0 0 16 16"
fill="currentColor" <div
class="size-4" class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
> >
<path <!-- -->
fill-rule="evenodd" <svg
d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z" xmlns="http://www.w3.org/2000/svg"
clip-rule="evenodd" viewBox="0 0 16 16"
/> fill="currentColor"
</svg> class="size-4"
</div> >
</a> <path
{/each} fill-rule="evenodd"
</Collapsible.Content> d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
</Collapsible.Root> clip-rule="evenodd"
/>
</svg>
</div>
</a>
{/each}
</div>
</Collapsible>
</div>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment