Skip to content

GitLab

"docs/source/vscode:/vscode.git/clone" did not exist on "267bf657075d66a2c92ae9ef73209108f879f13e"
Commit d5c0876a authored by rdavis's avatar rdavis
Browse files

refactor: fixed new Collapsible Component to allow passed in classes 

chore: format
parent 2389c36a
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 98 deletions
src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
View file @ d5c0876a
...@@ -4,94 +4,88 @@ ...@@ -4,94 +4,88 @@
import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte'; import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
import Collapsible from '$lib/components/common/Collapsible.svelte'; import Collapsible from '$lib/components/common/Collapsible.svelte';
export let status = { urls: [], query: '' }; export let status = { urls: [], query: '' };
let state = false; let state = false;
</script> </script>
<div class="w-full space-y-1"> <Collapsible bind:open={state} className="w-full space-y-1">
<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="head" >
> <slot />
<slot />
{#if state} {#if state}
<ChevronUp strokeWidth="3.5" className="size-3.5 " /> <ChevronUp strokeWidth="3.5" className="size-3.5 " />
{:else} {:else}
<ChevronDown strokeWidth="3.5" className="size-3.5 " /> <ChevronDown strokeWidth="3.5" className="size-3.5 " />
{/if} {/if}
</div> </div>
<div <div class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl" slot="content">
class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl" {#if status?.query}
slot="content" <a
> href="https://www.google.com/search?q={status.query}"
{#if status?.query} target="_blank"
<a 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"
href="https://www.google.com/search?q={status.query}" >
target="_blank" <div class="flex gap-2 items-center">
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" <MagnifyingGlass />
>
<div class="flex gap-2 items-center"> <div class=" line-clamp-1">
<MagnifyingGlass /> {status.query}
<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" <div
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
<svg fill-rule="evenodd"
xmlns="http://www.w3.org/2000/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"
viewBox="0 0 16 16" clip-rule="evenodd"
fill="currentColor" />
class="size-4" </svg>
> </div>
<path </a>
fill-rule="evenodd" {/if}
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" {#each status.urls as url, urlIdx}
/> <a
</svg> href={url}
</div> target="_blank"
</a> class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
{/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} >
<a <div class=" line-clamp-1">
href={url} {url}
target="_blank" </div>
class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
? '' <div
: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300" 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"> <!-- -->
{url} <svg
</div> xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
<div fill="currentColor"
class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition" class="size-4"
> >
<!-- --> <path
<svg fill-rule="evenodd"
xmlns="http://www.w3.org/2000/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"
viewBox="0 0 16 16" clip-rule="evenodd"
fill="currentColor" />
class="size-4" </svg>
> </div>
<path </a>
fill-rule="evenodd" {/each}
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" </div>
clip-rule="evenodd" </Collapsible>
/>
</svg>
</div>
</a>
{/each}
</div>
</Collapsible>
</div>
\ No newline at end of file
src/lib/components/common/Collapsible.svelte
View file @ d5c0876a
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
import { afterUpdate } from 'svelte'; import { afterUpdate } from 'svelte';
export let open = false; export let open = false;
export let className = '';
// Manage the max-height of the collapsible content for snappy transitions // Manage the max-height of the collapsible content for snappy transitions
let contentElement: HTMLElement; let contentElement: HTMLElement;
let maxHeight = '0px'; // Initial max-height let maxHeight = '0px'; // Initial max-height
// After any state update, adjust the max-height for the transition // After any state update, adjust the max-height for the transition
afterUpdate(() => { afterUpdate(() => {
if (open) { if (open) {
...@@ -15,23 +15,22 @@ ...@@ -15,23 +15,22 @@
} else { } else {
maxHeight = '0px'; maxHeight = '0px';
} }
}); });
</script> </script>
<div class={className}>
<button on:click={() => (open = !open)}>
<slot name="head" />
</button>
<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
<slot name="content" />
</div>
</div>
<style> <style>
.collapsible-content { .collapsible-content {
overflow: hidden; overflow: hidden;
transition: max-height 0.3s ease-out; transition: max-height 0.3s ease-out;
max-height: 0; max-height: 0;
} }
</style> </style>
<div>
<button on:click={() => open = !open}>
<slot name="head"></slot>
</button>
<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
<slot name="content"></slot>
</div>
</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