open-webui/src/lib/components/workspace/Knowledge/Collection/AddTextContentModal.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>