diff --git a/frontend/src/routes/sessions/[id]/Chatbox.svelte b/frontend/src/routes/sessions/[id]/Chatbox.svelte index 56c7a9a3ed797cf080dbf0bd2b845d514b7384fe..c90d4a8e015f0089c651477c3094a1b9f896a2fe 100644 --- a/frontend/src/routes/sessions/[id]/Chatbox.svelte +++ b/frontend/src/routes/sessions/[id]/Chatbox.svelte @@ -125,6 +125,11 @@ onDestroy(() => { clearInterval(presenceTimeout); }); + + let chatClosed = + session.users.find((u: User) => user.id === u.id) === undefined || + new Date().getTime() > session.end_time.getTime() + 3600000 || + new Date().getTime() < session.start_time.getTime() - 3600000; </script> <div class="flex flex-col w-full max-w-5xl mx-auto h-full scroll-smooth"> @@ -134,7 +139,7 @@ </div> {#each $messages.sort((a, b) => b.created_at.getTime() - a.created_at.getTime()) as message (message.uuid)} {#if message instanceof Message} - <MessageC {user} {message} bind:replyTo /> + <MessageC {user} {message} bind:replyTo {chatClosed} /> {:else if message instanceof Feedback} <a class="text-center italic text-gray-500 my-2" href="#{message.message.uuid}"> {$t('session.feedbackInline')} "{message.message.content.length > 20 @@ -152,7 +157,7 @@ </div> {/if} <div class="flex flex-row"> - <Writebox {user} {session} bind:replyTo /> + <Writebox {user} {session} {chatClosed} bind:replyTo /> </div> </div> diff --git a/frontend/src/routes/sessions/[id]/Message.svelte b/frontend/src/routes/sessions/[id]/Message.svelte index 6dc5483ccc20f10d33693238e2117c5f589fd8df..943515d2dee818b3418757db16fb8127b2bc38e6 100644 --- a/frontend/src/routes/sessions/[id]/Message.svelte +++ b/frontend/src/routes/sessions/[id]/Message.svelte @@ -16,8 +16,9 @@ let { user, message, - replyTo = $bindable() - }: { user: User; message: Message; replyTo: Message | undefined } = $props(); + replyTo = $bindable(), + chatClosed = false + }: { user: User; message: Message; replyTo: Message | undefined; chatClosed: boolean } = $props(); let displayedTime = $state(displayTime(message.created_at)); @@ -100,7 +101,7 @@ } function onTextSelect() { - if (isEdit) return; + if (isEdit || chatClosed) return; const selection = window.getSelection(); if (!selection || selection.rangeCount < 1 || !hightlight) return; const range = selection.getRangeAt(0); @@ -271,22 +272,24 @@ {/each} </div> {/if} - {#if isSender} + {#if !chatClosed} + {#if isSender} + <button + class="absolute bottom-0 left-[-1.5rem] invisible group-hover:visible h-full p-0" + onclick={() => (isEdit ? endEdit() : startEdit())} + > + <Icon src={Pencil} class="w-5 h-full text-gray-500 hover:text-gray-800" /> + </button> + {/if} <button - class="absolute bottom-0 left-[-1.5rem] invisible group-hover:visible h-full p-0" - onclick={() => (isEdit ? endEdit() : startEdit())} + class="absolute bottom-0 invisible group-hover:visible h-full p-0" + class:right-[-1.5rem]={!isSender} + class:left-[-3.5rem]={isSender} + onclick={() => (replyTo = message)} > - <Icon src={Pencil} class="w-5 h-full text-gray-500 hover:text-gray-800" /> + <Icon src={ArrowUturnLeft} class="w-5 h-full text-gray-500 hover:text-gray-800" /> </button> {/if} - <button - class="absolute bottom-0 invisible group-hover:visible h-full p-0" - class:right-[-1.5rem]={!isSender} - class:left-[-3.5rem]={isSender} - onclick={() => (replyTo = message)} - > - <Icon src={ArrowUturnLeft} class="w-5 h-full text-gray-500 hover:text-gray-800" /> - </button> </div> <div class="chat-footer opacity-50"> <Icon src={Check} class="w-4 inline" /> diff --git a/frontend/src/routes/sessions/[id]/Writebox.svelte b/frontend/src/routes/sessions/[id]/Writebox.svelte index ae77e62d0e02ad4c277f54f054863f8c6553757e..284d1123ef29850105d906ccd97462ab903a7ff5 100644 --- a/frontend/src/routes/sessions/[id]/Writebox.svelte +++ b/frontend/src/routes/sessions/[id]/Writebox.svelte @@ -17,8 +17,9 @@ let { user, session, - replyTo = $bindable() - }: { user: User; session: Session; replyTo: Message | undefined } = $props(); + replyTo = $bindable(), + chatClosed = false + }: { user: User; session: Session; replyTo: Message | undefined; chatClosed: boolean } = $props(); let metadata: { message: string; date: number }[] = []; let lastMessage = ''; @@ -31,11 +32,6 @@ replyTo = undefined; } - let disabled = - session.users.find((u: User) => user.id === u.id) === undefined || - new Date().getTime() > session.end_time.getTime() + 3600000 || - new Date().getTime() < session.start_time.getTime() - 3600000; - async function sendMessage() { message = message.trim(); if (message.length == 0) return; @@ -142,8 +138,8 @@ <textarea bind:this={textearea} class="flex-grow p-2 resize-none overflow-hidden py-4 pr-12 border rounded-[32px]" - placeholder={disabled ? $t('chatbox.disabled') : $t('chatbox.placeholder')} - {disabled} + placeholder={chatClosed ? $t('chatbox.disabled') : $t('chatbox.placeholder')} + disabled={chatClosed} bind:value={message} use:autosize rows={1}