mirror of
https://github.com/open-webui/open-webui
synced 2025-03-16 02:17:33 +00:00
refac: styling
This commit is contained in:
parent
e530914328
commit
e8c629a2e2
@ -28,6 +28,7 @@
|
|||||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||||
import Switch from '$lib/components/common/Switch.svelte';
|
import Switch from '$lib/components/common/Switch.svelte';
|
||||||
import { text } from '@sveltejs/kit';
|
import { text } from '@sveltejs/kit';
|
||||||
|
import Textarea from '$lib/components/common/Textarea.svelte';
|
||||||
|
|
||||||
const i18n = getContext('i18n');
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
@ -629,11 +630,9 @@
|
|||||||
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
||||||
placement="top-start"
|
placement="top-start"
|
||||||
>
|
>
|
||||||
<textarea
|
<Textarea
|
||||||
bind:value={querySettings.template}
|
bind:value={querySettings.template}
|
||||||
placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
||||||
class="w-full rounded-lg px-4 py-3 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize-none"
|
|
||||||
rows="4"
|
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
@ -14,6 +14,7 @@
|
|||||||
|
|
||||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||||
import Switch from '$lib/components/common/Switch.svelte';
|
import Switch from '$lib/components/common/Switch.svelte';
|
||||||
|
import Textarea from '$lib/components/common/Textarea.svelte';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
@ -125,10 +126,8 @@
|
|||||||
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
||||||
placement="top-start"
|
placement="top-start"
|
||||||
>
|
>
|
||||||
<textarea
|
<Textarea
|
||||||
bind:value={taskConfig.TITLE_GENERATION_PROMPT_TEMPLATE}
|
bind:value={taskConfig.TITLE_GENERATION_PROMPT_TEMPLATE}
|
||||||
class="w-full rounded-lg py-3 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize"
|
|
||||||
rows="1"
|
|
||||||
placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
@ -141,10 +140,8 @@
|
|||||||
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
||||||
placement="top-start"
|
placement="top-start"
|
||||||
>
|
>
|
||||||
<textarea
|
<Textarea
|
||||||
bind:value={taskConfig.TAG_GENERATION_PROMPT_TEMPLATE}
|
bind:value={taskConfig.TAG_GENERATION_PROMPT_TEMPLATE}
|
||||||
class="w-full rounded-lg py-3 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize"
|
|
||||||
rows="1"
|
|
||||||
placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
@ -168,10 +165,8 @@
|
|||||||
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
|
||||||
placement="top-start"
|
placement="top-start"
|
||||||
>
|
>
|
||||||
<textarea
|
<Textarea
|
||||||
bind:value={taskConfig.SEARCH_QUERY_GENERATION_PROMPT_TEMPLATE}
|
bind:value={taskConfig.SEARCH_QUERY_GENERATION_PROMPT_TEMPLATE}
|
||||||
class="w-full rounded-lg py-3 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
|
|
||||||
rows="1"
|
|
||||||
placeholder={$i18n.t(
|
placeholder={$i18n.t(
|
||||||
'Leave empty to use the default prompt, or enter a custom prompt'
|
'Leave empty to use the default prompt, or enter a custom prompt'
|
||||||
)}
|
)}
|
||||||
|
37
src/lib/components/common/Textarea.svelte
Normal file
37
src/lib/components/common/Textarea.svelte
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount, tick } from 'svelte';
|
||||||
|
|
||||||
|
export let value = '';
|
||||||
|
export let placeholder = '';
|
||||||
|
|
||||||
|
export let className =
|
||||||
|
'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none resize-none h-full';
|
||||||
|
|
||||||
|
let textareaElement;
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
await tick();
|
||||||
|
if (textareaElement) {
|
||||||
|
setInterval(adjustHeight, 0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const adjustHeight = () => {
|
||||||
|
if (textareaElement) {
|
||||||
|
textareaElement.style.height = '';
|
||||||
|
textareaElement.style.height = `${textareaElement.scrollHeight}px`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
bind:this={textareaElement}
|
||||||
|
bind:value
|
||||||
|
{placeholder}
|
||||||
|
class={className}
|
||||||
|
on:input={(e) => {
|
||||||
|
e.target.style.height = '';
|
||||||
|
e.target.style.height = `${e.target.scrollHeight}px`;
|
||||||
|
}}
|
||||||
|
rows="1"
|
||||||
|
/>
|
Loading…
Reference in New Issue
Block a user