OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-05-24 06:44:24 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor: Update WebSearchResults.svelte to use new CollapsibleComponent

Browse Source
This commit is contained in:
rdavis 2024-07-04 13:55:37 +00:00
parent d20601dc47
commit 2389c36a70
1 changed files with 73 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
View File

@ -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 @@
<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"
slot="content"
>
{#if status?.query}
<a
href="https://www.google.com/search?q={status.query}"
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 />
<Collapsible.Content <div class=" line-clamp-1">
class=" text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl" {status.query}
transition={slide} </div>
>
{#if status?.query}
<a
href="https://www.google.com/search?q={status.query}"
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>
<div <div
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition" class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
>
<!-- -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="size-4"
> >
<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"
clip-rule="evenodd"
/>
</svg>
</div>
</a>
{/if}
{#each status.urls as url, urlIdx} {#each status.urls as url, urlIdx}
<a <a
href={url} href={url}
target="_blank" target="_blank"
class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1 class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
? '' ? ''
: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300" : '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">
{url}
</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=" 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>