{#if !edit && !disabled}

(showButtons = false)} onSubmit={(name) => { showButtons = false; onReaction(name); }} > {#if !thread} {/if} {#if message.user_id === $user?.id || $user?.role === 'admin'} {/if}

{/if} {#if message?.reply_to_message?.user}

{/if}

{#if showUserProfile} {#if message?.meta?.model_id} ${message.meta.model_name$ {:else} {/if} {:else} {#if message.created_at}

{dayjs(message.created_at / 1000000).format('HH:mm')}

{/if} {/if}

{#if showUserProfile}

{#if message?.meta?.model_id} {message?.meta?.model_name ?? message?.meta?.model_id} {:else} {message?.user?.name} {/if}

{#if message.created_at}

{#if dayjs(message.created_at / 1000000).isToday()} {dayjs(message.created_at / 1000000).format('LT')} {:else} {$i18n.t(formatDate(message.created_at / 1000000), { LOCALIZED_TIME: dayjs(message.created_at / 1000000).format('LT'), LOCALIZED_DATE: dayjs(message.created_at / 1000000).format('L') })} {/if}

{/if} {/if} {#if (message?.data?.files ?? []).length > 0}

{#each message?.data?.files as file}

{#if file.type === 'image'} {file.name}

{:else} {/if}

{/each}

{/if} {#if edit}

{
								if (e.key === 'Escape') {
									document.getElementById('close-edit-message-button')?.click();
								}

const isCmdOrCtrlPressed = e.metaKey || e.ctrlKey;
								const isEnterPressed = e.key === 'Enter';

if (isCmdOrCtrlPressed && isEnterPressed) {
									document.getElementById('confirm-edit-message-button')?.click();
								}
							}}
						/>
						<div class=" mt-2 mb-1 flex justify-end text-sm font-medium">
							<div class="flex space-x-1.5">
								<button
									id="close-edit-message-button"
									class="px-3.5 py-1.5 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
									on:click={() => {
										edit = false;
										editedContent = null;
									}}
								>
									{$i18n.t('Cancel')}
								</button>

<button
									id="confirm-edit-message-button"
									class="px-3.5 py-1.5 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
									on:click={async () => {
										onEdit(editedContent);
										edit = false;
										editedContent = null;
									}}
								>
									{$i18n.t('Save')}
								</button>
							</div>
						</div>
					</div>
				{:else}
					<div class=" min-w-full markdown-prose">
						{#if (message?.content ?? '').trim() === '' && message?.meta?.model_id}
							<Skeleton />
						{:else}
							<Markdown
								id={message.id}
								content={message.content}
							/>{#if message.created_at !== message.updated_at && (message?.meta?.model_id ?? null) === null}<span
									class="text-gray-500 text-[10px]">({$i18n.t('edited')})</span
								>{/if}
						{/if}
					</div>

{#if (message?.reactions ?? []).length > 0}
						<div>
							<div class="flex items-center flex-wrap gap-y-1.5 gap-1 mt-1 mb-2">
								{#each message.reactions as reaction}
									<Tooltip content={`:${reaction.name}:`}>
										<button
											class="flex items-center gap-1.5 transition rounded-xl px-2 py-1 cursor-pointer {reaction.user_ids.includes(
												$user?.id
											)
												? ' bg-blue-300/10 outline outline-blue-500/50 outline-1'
												: 'bg-gray-300/10 dark:bg-gray-500/10 hover:outline hover:outline-gray-700/30 dark:hover:outline-gray-300/30 hover:outline-1'}"
											on:click={() => {
												onReaction(reaction.name);
											}}
										>
											<Emoji shortCode={reaction.name} />

{#if reaction.user_ids.length > 0}
												<div class="text-xs font-medium text-gray-500 dark:text-gray-400">
													{reaction.user_ids?.length}
												</div>
											{/if}
										</button>
									</Tooltip>
								{/each}

<EmojiPicker
									onSubmit={(name) => {
										onReaction(name);
									}}
								>
									<Tooltip content={$i18n.t('Add Reaction')}>
										<div
											class="flex items-center gap-1.5 bg-gray-500/10 hover:outline hover:outline-gray-700/30 dark:hover:outline-gray-300/30 hover:outline-1 transition rounded-xl px-1 py-1 cursor-pointer text-gray-500 dark:text-gray-400"
										>
											<FaceSmile />
										</div>
									</Tooltip>
								</EmojiPicker>
							</div>
						</div>
					{/if}

{#if !thread && message.reply_count > 0}
						<div class="flex items-center gap-1.5 -mt-0.5 mb-1.5">
							<button
								class="flex items-center text-xs py-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition"
								on:click={() => {
									onThread(message.id);
								}}
							>
								<span class="font-medium mr-1">
									{$i18n.t('{{COUNT}} Replies', { COUNT: message.reply_count })}</span
								><span>
									{' - '}{$i18n.t('Last reply')}
									{dayjs.unix(message.latest_reply_at / 1000000000).fromNow()}</span
								>

<span class="ml-1">
									<ChevronRight className="size-2.5" strokeWidth="3" />
								</span>
								
							</button>
						</div>
					{/if}
				{/if}
			</div>
		</div>
	</div>
{/if}

@keyframes highlightAnimation {
		0% {
			background-color: rgba(0, 60, 255, 0.1);
		}
		100% {
			background-color: transparent;
		}
	}
</style>