mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-15 05:45:19 +00:00
102 lines
2.7 KiB
Svelte
102 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { toast } from 'svelte-sonner';
|
|
import dayjs from 'dayjs';
|
|
|
|
import { onMount, getContext, createEventDispatcher } from 'svelte';
|
|
const i18n = getContext('i18n');
|
|
const dispatch = createEventDispatcher();
|
|
|
|
import Modal from '$lib/components/common/Modal.svelte';
|
|
import RichTextInput from '$lib/components/common/RichTextInput.svelte';
|
|
import XMark from '$lib/components/icons/XMark.svelte';
|
|
export let show = false;
|
|
|
|
let name = 'Untitled';
|
|
let content = '';
|
|
</script>
|
|
|
|
<Modal size="full" className="h-full bg-white dark:bg-gray-900" bind:show>
|
|
<div class="absolute top-0 right-0 p-5">
|
|
<button
|
|
class="self-center dark:text-white"
|
|
type="button"
|
|
on:click={() => {
|
|
show = false;
|
|
}}
|
|
>
|
|
<XMark className="size-4" />
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row w-full h-full md:space-x-4 dark:text-gray-200">
|
|
<form
|
|
class="flex flex-col w-full h-full"
|
|
on:submit|preventDefault={() => {
|
|
if (name.trim() === '' || content.trim() === '') {
|
|
toast.error($i18n.t('Please fill in all fields.'));
|
|
name = name.trim();
|
|
content = content.trim();
|
|
return;
|
|
}
|
|
|
|
dispatch('submit', {
|
|
name,
|
|
content
|
|
});
|
|
show = false;
|
|
name = '';
|
|
content = '';
|
|
}}
|
|
>
|
|
<div class=" flex-1 w-full h-full flex justify-center overflow-auto px-5 py-4">
|
|
<div class=" max-w-3xl py-2 md:py-14 w-full flex flex-col gap-2">
|
|
<div class="flex-shrink-0 w-full flex justify-between items-center">
|
|
<div class="w-full">
|
|
<input
|
|
class="w-full text-3xl font-semibold rounded-lg bg-transparent outline-none"
|
|
type="text"
|
|
bind:value={name}
|
|
placeholder={$i18n.t('Title')}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=" flex-1 w-full h-full">
|
|
<RichTextInput bind:value={content} placeholder={$i18n.t('Content')} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end text-sm font-medium flex-shrink-0 mt-1 py-3 px-3">
|
|
<button
|
|
class=" px-3.5 py-2 bg-black text-white dark:bg-white dark:text-black transition rounded-full"
|
|
type="submit"
|
|
>
|
|
{$i18n.t('Save')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
|
|
<style>
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
/* display: none; <- Crashes Chrome on hover */
|
|
-webkit-appearance: none;
|
|
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
|
|
}
|
|
|
|
.tabs::-webkit-scrollbar {
|
|
display: none; /* for Chrome, Safari and Opera */
|
|
}
|
|
|
|
.tabs {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
input[type='number'] {
|
|
-moz-appearance: textfield; /* Firefox */
|
|
}
|
|
</style>
|