mirror of
https://github.com/open-webui/open-webui
synced 2025-03-22 22:07:15 +00:00
refac: playground
This commit is contained in:
Timothy J. Baek
parent
39e3afd55d
commit
c03cccfd14
src
lib/components
chat/ModelSelector
common
icons
playground
routes/(app)/playground
@ -42,6 +42,7 @@
|
||||
}[] = [];
|
||||
|
||||
export let className = 'w-[32rem]';
|
||||
export let triggerClassName = 'text-lg';
|
||||
|
||||
let show = false;
|
||||
|
||||
@ -236,7 +237,7 @@
|
||||
id="model-selector-{id}-button"
|
||||
>
|
||||
<div
|
||||
class="flex w-full text-left px-0.5 outline-none bg-transparent truncate text-lg font-medium placeholder-gray-400 focus:outline-none"
|
||||
class="flex w-full text-left px-0.5 outline-none bg-transparent truncate {triggerClassName} justify-between font-medium placeholder-gray-400 focus:outline-none"
|
||||
>
|
||||
{#if selectedModel}
|
||||
{selectedModel.label}
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
export let buttonClassName = 'w-fit';
|
||||
export let title = null;
|
||||
|
||||
export let grow = false;
|
||||
|
||||
export let disabled = false;
|
||||
export let hide = false;
|
||||
</script>
|
||||
@ -60,13 +62,28 @@
|
||||
>
|
||||
<div>
|
||||
<slot />
|
||||
|
||||
{#if grow}
|
||||
{#if open && !hide}
|
||||
<div
|
||||
transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}
|
||||
on:pointerup={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if open && !hide}
|
||||
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
{#if !grow}
|
||||
{#if open && !hide}
|
||||
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
30
src/lib/components/common/Sidebar.svelte
Normal file
30
src/lib/components/common/Sidebar.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { quadInOut, quintIn } from 'svelte/easing';
|
||||
import { fade, slide } from 'svelte/transition';
|
||||
|
||||
export let show = false;
|
||||
export let side = 'right';
|
||||
export let width = '200px';
|
||||
|
||||
export let className = '';
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="absolute z-20 top-0 right-0 left-0 bottom-0 bg-black/10 w-full min-h-full h-full flex justify-center overflow-hidden overscroll-contain"
|
||||
on:mousedown={() => {
|
||||
show = false;
|
||||
}}
|
||||
transition:fade
|
||||
/>
|
||||
|
||||
<div
|
||||
class="absolute z-30 shadow-xl {side === 'right' ? 'right-0' : 'left-0'} top-0 bottom-0"
|
||||
transition:slide={{ easing: quadInOut, axis: side === 'right' ? 'x' : 'y' }}
|
||||
>
|
||||
<div class="{className} h-full" style="width: {show ? width : '0px'}">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
15
src/lib/components/icons/ArrowRight.svelte
Normal file
15
src/lib/components/icons/ArrowRight.svelte
Normal file
@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
20
src/lib/components/icons/Cog6.svelte
Normal file
20
src/lib/components/icons/Cog6.svelte
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
export let className = 'w-4 h-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
13
src/lib/components/icons/PencilSquare.svelte
Normal file
13
src/lib/components/icons/PencilSquare.svelte
Normal file
@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class={className}>
|
||||
<path
|
||||
d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z"
|
||||
/>
|
||||
<path
|
||||
d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z"
|
||||
/>
|
||||
</svg>
|
||||
@ -10,13 +10,21 @@
|
||||
WEBUI_API_BASE_URL,
|
||||
WEBUI_BASE_URL
|
||||
} from '$lib/constants';
|
||||
import { WEBUI_NAME, config, user, models, settings, showSidebar } from '$lib/stores';
|
||||
import { WEBUI_NAME, config, user, models, settings } from '$lib/stores';
|
||||
|
||||
import { generateOpenAIChatCompletion } from '$lib/apis/openai';
|
||||
|
||||
import { splitStream } from '$lib/utils';
|
||||
import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
|
||||
import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
|
||||
import Collapsible from '../common/Collapsible.svelte';
|
||||
|
||||
import Messages from './chat/Messages.svelte';
|
||||
import ChevronUp from '../icons/ChevronUp.svelte';
|
||||
import ChevronDown from '../icons/ChevronDown.svelte';
|
||||
import Pencil from '../icons/Pencil.svelte';
|
||||
import Cog6 from '../icons/Cog6.svelte';
|
||||
import Sidebar from '../common/Sidebar.svelte';
|
||||
import ArrowRight from '../icons/ArrowRight.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@ -28,13 +36,15 @@
|
||||
|
||||
let messagesContainerElement: HTMLDivElement;
|
||||
|
||||
let showSystem = false;
|
||||
let showSettings = false;
|
||||
|
||||
let system = '';
|
||||
let messages = [
|
||||
{
|
||||
role: 'user',
|
||||
content: ''
|
||||
}
|
||||
];
|
||||
|
||||
let role = 'user';
|
||||
let message = '';
|
||||
|
||||
let messages = [];
|
||||
|
||||
const scrollToBottom = () => {
|
||||
const element = messagesContainerElement;
|
||||
@ -137,6 +147,20 @@
|
||||
}
|
||||
};
|
||||
|
||||
const addHandler = async () => {
|
||||
if (message) {
|
||||
messages.push({
|
||||
role: role,
|
||||
content: message
|
||||
});
|
||||
messages = messages;
|
||||
message = '';
|
||||
role = role === 'user' ? 'assistant' : 'user';
|
||||
await tick();
|
||||
scrollToBottom();
|
||||
}
|
||||
};
|
||||
|
||||
const submitHandler = async () => {
|
||||
if (selectedModelId) {
|
||||
loading = true;
|
||||
@ -164,40 +188,95 @@
|
||||
</script>
|
||||
|
||||
<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
|
||||
<div class="mx-auto w-full md:px-0 h-full">
|
||||
<div class=" flex flex-col h-full">
|
||||
<div class="flex flex-col justify-between mb-1 gap-1">
|
||||
<div class="flex flex-col gap-1 w-full">
|
||||
<div class="flex w-full">
|
||||
<div class="overflow-hidden w-full">
|
||||
<div class="max-w-full">
|
||||
<Selector
|
||||
placeholder={$i18n.t('Select a model')}
|
||||
items={$models.map((model) => ({
|
||||
value: model.id,
|
||||
label: model.name,
|
||||
model: model
|
||||
}))}
|
||||
bind:value={selectedModelId}
|
||||
/>
|
||||
</div>
|
||||
<div class="mx-auto w-full md:px-0 h-full relative">
|
||||
<Sidebar bind:show={showSettings} className=" dark:bg-gray-900" width="250px">
|
||||
<div class="flex flex-col px-5 py-3 text-sm">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<div class=" font-medium text-base">Settings</div>
|
||||
|
||||
<div>
|
||||
<button class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg">
|
||||
<ArrowRight strokeWidth="2.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div class=" text-xs font-medium mb-1">Model</div>
|
||||
|
||||
<div class="w-full">
|
||||
<Selector
|
||||
triggerClassName="text-sm"
|
||||
placeholder={$i18n.t('Select a model')}
|
||||
items={$models.map((model) => ({
|
||||
value: model.id,
|
||||
label: model.name,
|
||||
model: model
|
||||
}))}
|
||||
bind:value={selectedModelId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Sidebar>
|
||||
|
||||
<div class="p-1">
|
||||
<div class="p-3 outline outline-1 outline-gray-200 dark:outline-gray-800 rounded-lg">
|
||||
<div class=" text-sm font-medium">{$i18n.t('System')}</div>
|
||||
<textarea
|
||||
id="system-textarea"
|
||||
class="w-full h-full bg-transparent resize-none outline-none text-sm"
|
||||
bind:value={system}
|
||||
placeholder={$i18n.t("You're a helpful assistant.")}
|
||||
rows="4"
|
||||
/>
|
||||
<div class=" flex flex-col h-full px-4 py-1">
|
||||
<div class="flex w-full items-start gap-1.5">
|
||||
<Collapsible
|
||||
className="w-full flex-1"
|
||||
bind:open={showSystem}
|
||||
buttonClassName="w-full rounded-lg text-sm border border-gray-50 dark:border-gray-850 w-full py-1 px-1.5"
|
||||
grow={true}
|
||||
>
|
||||
<div class="flex gap-2 justify-between items-center">
|
||||
<div class=" flex-shrink-0 font-medium ml-1.5">
|
||||
{$i18n.t('System Instructions')}
|
||||
</div>
|
||||
|
||||
{#if !showSystem}
|
||||
<div class=" flex-1 text-gray-500 line-clamp-1">
|
||||
{system}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<button class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg">
|
||||
{#if showSystem}
|
||||
<ChevronUp className="size-3.5" />
|
||||
{:else}
|
||||
<Pencil className="size-3.5" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div slot="content">
|
||||
<div class="pt-1 px-1.5">
|
||||
<textarea
|
||||
id="system-textarea"
|
||||
class="w-full h-full bg-transparent resize-none outline-none text-sm"
|
||||
bind:value={system}
|
||||
placeholder={$i18n.t("You're a helpful assistant.")}
|
||||
rows="4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Collapsible>
|
||||
|
||||
<div class="translate-y-1">
|
||||
<button
|
||||
class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg"
|
||||
on:click={() => {
|
||||
showSettings = !showSettings;
|
||||
}}
|
||||
>
|
||||
<Cog6 />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
|
||||
id="messages-container"
|
||||
@ -205,43 +284,84 @@
|
||||
>
|
||||
<div class=" h-full w-full flex flex-col">
|
||||
<div class="flex-1 p-1">
|
||||
<ChatCompletion bind:messages />
|
||||
<Messages bind:messages />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pb-3 flex justify-end">
|
||||
{#if !loading}
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
|
||||
on:click={() => {
|
||||
submitHandler();
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Submit')}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-full"
|
||||
on:click={() => {
|
||||
stopResponse();
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Cancel')}
|
||||
</button>
|
||||
{/if}
|
||||
<div class="pb-3">
|
||||
<div class="border border-gray-50 dark:border-gray-850 w-full px-3 py-2.5 rounded-xl">
|
||||
<div class="py-0.5">
|
||||
<!-- $i18n.t('a user') -->
|
||||
<!-- $i18n.t('an assistant') -->
|
||||
<textarea
|
||||
bind:value={message}
|
||||
class=" w-full h-full bg-transparent resize-none outline-none text-sm"
|
||||
placeholder={$i18n.t(`Enter {{role}} message here`, {
|
||||
role: role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
|
||||
})}
|
||||
on:input={(e) => {
|
||||
e.target.style.height = '';
|
||||
e.target.style.height = Math.min(e.target.scrollHeight, 150) + 'px';
|
||||
}}
|
||||
on:focus={(e) => {
|
||||
e.target.style.height = '';
|
||||
e.target.style.height = Math.min(e.target.scrollHeight, 150) + 'px';
|
||||
}}
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
|
||||
on:click={() => {
|
||||
role = role === 'user' ? 'assistant' : 'user';
|
||||
}}
|
||||
>
|
||||
{#if role === 'user'}
|
||||
{$i18n.t('User')}
|
||||
{:else}
|
||||
{$i18n.t('Assistant')}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{#if !loading}
|
||||
<button
|
||||
disabled={message === ''}
|
||||
class="px-3.5 py-1.5 text-sm font-medium disabled:bg-gray-50 dark:disabled:hover:bg-gray-850 disabled:cursor-not-allowed bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
|
||||
on:click={() => {
|
||||
addHandler();
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Add')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-lg"
|
||||
on:click={() => {
|
||||
submitHandler();
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Run')}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-lg"
|
||||
on:click={() => {
|
||||
stopResponse();
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Cancel')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scrollbar-hidden::-webkit-scrollbar {
|
||||
display: none; /* for Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
.scrollbar-hidden {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -74,38 +74,5 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class=" dark:border-gray-800" />
|
||||
{/each}
|
||||
|
||||
<button
|
||||
class="flex items-center gap-2 px-2 py-1"
|
||||
on:click={() => {
|
||||
console.log(messages.at(-1));
|
||||
messages.push({
|
||||
role: (messages.at(-1)?.role ?? 'assistant') === 'user' ? 'assistant' : 'user',
|
||||
content: ''
|
||||
});
|
||||
messages = messages;
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class=" text-sm font-medium">{$i18n.t('Add message')}</div>
|
||||
</button>
|
||||
</div>
|
||||
@ -6,12 +6,9 @@
|
||||
|
||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||
import { WEBUI_NAME, config, user, models, settings, showSidebar } from '$lib/stores';
|
||||
|
||||
import { generateChatCompletion } from '$lib/apis/ollama';
|
||||
import { generateOpenAIChatCompletion } from '$lib/apis/openai';
|
||||
|
||||
import { splitStream } from '$lib/utils';
|
||||
import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
|
||||
import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
|
||||
import MenuLines from '../icons/MenuLines.svelte';
|
||||
|
||||
@ -125,7 +122,7 @@
|
||||
|
||||
<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
|
||||
<div class="mx-auto w-full md:px-0 h-full">
|
||||
<div class=" flex flex-col h-full">
|
||||
<div class=" flex flex-col h-full px-4">
|
||||
<div class="flex flex-col justify-between mb-1 gap-1">
|
||||
<div class="flex flex-col gap-1 w-full">
|
||||
<div class="flex w-full">
|
||||
@ -147,15 +144,15 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
|
||||
class=" pt-0.5 pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
|
||||
id="messages-container"
|
||||
>
|
||||
<div class=" h-full w-full flex flex-col">
|
||||
<div class="flex-1 p-1">
|
||||
<div class="flex-1">
|
||||
<textarea
|
||||
id="text-completion-textarea"
|
||||
bind:this={textCompletionAreaElement}
|
||||
class="w-full h-full p-3 bg-transparent outline outline-1 outline-gray-200 dark:outline-gray-800 resize-none rounded-lg text-sm"
|
||||
class="w-full h-full p-3 bg-transparent border border-gray-50 dark:border-gray-850 outline-none resize-none rounded-lg text-sm"
|
||||
bind:value={text}
|
||||
placeholder={$i18n.t("You're a helpful assistant.")}
|
||||
/>
|
||||
@ -171,7 +168,7 @@
|
||||
submitHandler();
|
||||
}}
|
||||
>
|
||||
{$i18n.t('Submit')}
|
||||
{$i18n.t('Run')}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" pb-1 px-[18px] flex-1 max-h-full overflow-y-auto">
|
||||
<div class=" flex-1 max-h-full overflow-y-auto">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user