mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-13 21:05:19 +00:00
refac: interface settings styling
This commit is contained in:
Timothy Jaeryang Baek
parent
cce1f876c9
commit
5d670cb7ce
2 changed files with 740 additions and 896 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,170 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { toast } from 'svelte-sonner';
|
||||||
|
import { getContext, onMount } from 'svelte';
|
||||||
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
|
import Modal from '$lib/components/common/Modal.svelte';
|
||||||
|
import Plus from '$lib/components/icons/Plus.svelte';
|
||||||
|
import Minus from '$lib/components/icons/Minus.svelte';
|
||||||
|
import XMark from '$lib/components/icons/XMark.svelte';
|
||||||
|
import Textarea from '$lib/components/common/Textarea.svelte';
|
||||||
|
import Switch from '$lib/components/common/Switch.svelte';
|
||||||
|
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||||
|
|
||||||
|
export let show = false;
|
||||||
|
export let onSave = () => {};
|
||||||
|
|
||||||
|
export let floatingActionButtons = null;
|
||||||
|
|
||||||
|
const submitHandler = async () => {
|
||||||
|
onSave(floatingActionButtons);
|
||||||
|
show = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
$: if (show) {
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal size="sm" bind:show>
|
||||||
|
<div>
|
||||||
|
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-1.5">
|
||||||
|
<h1 class="text-lg font-medium self-center font-primary">
|
||||||
|
{$i18n.t('Action Buttons')}
|
||||||
|
</h1>
|
||||||
|
<button
|
||||||
|
class="self-center"
|
||||||
|
aria-label={$i18n.t('Close modal')}
|
||||||
|
on:click={() => {
|
||||||
|
show = false;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<XMark className={'size-5'} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
|
||||||
|
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
|
||||||
|
<form
|
||||||
|
class="flex flex-col w-full px-1"
|
||||||
|
on:submit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
submitHandler();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="text-xs flex items-center justify-between mb-2">
|
||||||
|
<div class="font-medium">Actions</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
if (floatingActionButtons === null) {
|
||||||
|
floatingActionButtons = [
|
||||||
|
{
|
||||||
|
id: 'ask',
|
||||||
|
label: $i18n.t('Ask'),
|
||||||
|
input: true,
|
||||||
|
prompt: `{{SELECTED_CONTENT}}\n\n\n{{INPUT_CONTENT}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'explain',
|
||||||
|
label: $i18n.t('Explain'),
|
||||||
|
input: false,
|
||||||
|
prompt: `{{SELECTED_CONTENT}}\n\n\n${$i18n.t('Explain')}`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
floatingActionButtons = null;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{#if floatingActionButtons === null}
|
||||||
|
<span class="">{$i18n.t('Default')}</span>
|
||||||
|
{:else}
|
||||||
|
<span class="">{$i18n.t('Custom')}</span>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if floatingActionButtons !== null}
|
||||||
|
<button
|
||||||
|
class=""
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
floatingActionButtons = [
|
||||||
|
...floatingActionButtons,
|
||||||
|
{
|
||||||
|
id: 'new-button',
|
||||||
|
label: $i18n.t('New Button'),
|
||||||
|
input: true,
|
||||||
|
prompt: `{{CONTENT}}\n\n\n{{INPUT_CONTENT}}`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Plus className="size-4 " />
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if floatingActionButtons === null || floatingActionButtons.length === 0}
|
||||||
|
<div class="text-gray-500 dark:text-gray-400 text-xs w-full text-center py-5">
|
||||||
|
{$i18n.t('Default action buttons will be used.')}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
{#each floatingActionButtons as button (button.id)}
|
||||||
|
<div class=" py-1 flex w-full justify-between items-start">
|
||||||
|
<div class="flex flex-col items-start">
|
||||||
|
<input
|
||||||
|
class=" self-center text-xs outline-none w-20"
|
||||||
|
placeholder={$i18n.t('Button Label')}
|
||||||
|
value={button.label}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<input
|
||||||
|
class=" self-center text-xs outline-none w-20 text-gray-600 dark:text-gray-400"
|
||||||
|
placeholder={$i18n.t('Button ID')}
|
||||||
|
value={button.id}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2 w-full">
|
||||||
|
<Textarea
|
||||||
|
className=" self-center text-xs w-full outline-none"
|
||||||
|
placeholder={$i18n.t('Button Prompt')}
|
||||||
|
minSize={30}
|
||||||
|
bind:value={button.prompt}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="pl-3 text-xs flex rounded-sm transition"
|
||||||
|
on:click={() => {
|
||||||
|
floatingActionButtons = floatingActionButtons.filter(
|
||||||
|
(b) => b.id !== button.id
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<Minus className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end text-sm font-medium">
|
||||||
|
<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"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{$i18n.t('Save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
Loading…
Reference in a new issue