Newer
Older
import type Session from '$lib/types/session';
import { toastAlert } from '$lib/utils/toasts';
import { Icon, PaperAirplane } from 'svelte-hero-icons';
onMount(async () => {
await import('emoji-picker-element');
});
export let session: Session;
let metadata: { message: string; date: number }[] = [];
let lastMessage = '';
let message = '';
let disabled =
us == null ||
session.users.find((u) => us.id === u.id) === undefined ||
new Date() > session.end_time ||
new Date() < session.start_time;
async function sendMessage() {
if (message.length == 0) return;
const m = await session.sendMessage($user, message, metadata);
return;
}
message = '';
metadata = [];
}
if (message === lastMessage) return;
metadata.push({ message: message, date: new Date().getTime() });
lastMessage = message;
<ul class="flex justify-around divide-x-2 border-b-2 py-1 flex-wrap md:flex-nowrap">
{#each config.SPECIAL_CHARS as char (char)}
<button
class="border-none"
on:click={() => {
message += char;
}}
>
<kbd class="kbd">
{char}
</kbd>
</button>
{/each}
</ul>
{/if}
<div class="w-full flex relative">
<textarea
bind:this={textearea}
class="flex-grow p-2 resize-none overflow-y-hidden pr-16"
placeholder={disabled ? $t('chatbox.disabled') : $t('chatbox.placeholder')}
{disabled}
bind:value={message}
on:keypress={(e) => keyPress()}
on:keypress={async (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
await sendMessage();
} else {
keyPress();
}
}}
/>
<div
class="absolute top-1/2 right-20 transform -translate-y-1/2 text-lg select-none cursor-pointer"
on:click={() => (showPicker = !showPicker)}
data-tooltip-target="tooltip-emoji"
data-tooltip-placement="right"
data-riple-light="true"
aria-hidden={false}
role="button"
tabindex="0"
>
😀
<div class="relative">
<div
id="tooltip-emoji"
data-tooltip="tooltip-emoji"
role="tooltip"
class:hidden={!showPicker}
class="absolute z-10 tooltip bottom-16 right-0 lg:left-0 lg:right-auto"
<emoji-picker
class="light"
on:emoji-click={(event) => {
message += event.detail.unicode;
textearea.focus();
}}
>
<div
class="absolute top-1/2 right-28 kbd transform -translate-y-1/2 text-sm select-none cursor-pointer"
on:click={() => (showSpecials = !showSpecials)}
aria-hidden={false}
role="button"
tabindex="0"
>
É
</div>
<button class="btn btn-primary rounded-none size-16" on:click={sendMessage}>
<Icon src={PaperAirplane} />
</button>
</div>
</div>