Spaces:
Runtime error
Runtime error
File size: 2,537 Bytes
effb90e 18cd77b effb90e 18cd77b effb90e 18cd77b effb90e 18cd77b effb90e 18cd77b effb90e 18cd77b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { MessageType } from '$lib/types';
export let inputEl: HTMLInputElement;
export let disabled: boolean = true;
const dispatch = createEventDispatcher();
let textInput: string = '';
let isDragOver: boolean = false;
function onSubmit(event: Event) {
event.stopPropagation();
event.preventDefault();
event.stopImmediatePropagation();
if (textInput.trim() !== '') {
dispatch('submitMessage', {
type: MessageType.TEXT,
content: textInput
});
textInput = '';
}
}
function onDrop(event: DragEvent) {
event.stopPropagation();
event.preventDefault();
event.stopImmediatePropagation();
if (event && event.dataTransfer) {
const files = [...event.dataTransfer.files];
if (files.length) {
const file = files[0];
if (file.type.startsWith('image/') && file.size < 1.5e7) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
dispatch('submitMessage', {
type: MessageType.IMAGE,
content: reader.result
});
};
}
}
}
isDragOver = false;
}
function onDragover(event: DragEvent) {
event.stopPropagation();
event.preventDefault();
if (event && event.dataTransfer) {
event.dataTransfer.dropEffect = 'copy';
}
isDragOver = true;
}
onMount(() => {
inputEl.focus();
window.addEventListener('dragover', onDragover, false);
window.addEventListener('drop', onDrop, false);
window.addEventListener('dragleave', () => (isDragOver = false), false);
});
</script>
<div class="mt-auto {isDragOver ? 'bg-yellow-50' : ''} py-4">
<form class="flex selection:w-full gap-2 border-t px-3 pt-4 pb-6" on:submit={onSubmit}>
<input
bind:value={textInput}
bind:this={inputEl}
on:click|stopPropagation
{disabled}
type="text"
class="flex h-11 flex-1 items-center rounded-full border bg-gray-100 px-4 text-black disabled:opacity-60 disabled:cursor-progress"
placeholder="Type here"
title="Type here to send a message"
/>
<button
{disabled}
title="Send your message"
type="submit"
class="rounded-full bg-black dark:bg-white dark:text-black px-4 font-semibold text-gray-200 disabled:opacity-60 disabled:cursor-progress"
>Submit</button
>
</form>
<div class="flex items-center px-3 pt-4 pb-6 bg-yellow-50 py-3 rounded">
<i class="fas fa-image text-2xl text-gray-500 mr-2" />
<h2 class="text-xl font-bold text-gray-500">Drop your image here to start</h2>
</div>
</div>
|