{#if !edit}

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

{/if}

{#if showUserProfile} {:else} {#if message.created_at}

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

{/if} {/if}

{#if showUserProfile}

{message?.user?.name}

{#if message.created_at}

{formatDate(message.created_at / 1000000)}

{/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-4 py-2 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-4 py-2 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">
						<Markdown
							id={message.id}
							content={message.content}
						/>{#if message.created_at !== message.updated_at}<span class="text-gray-500 text-[10px]"
								>(edited)</span
							>{/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);
											}}
										>
											{#if $shortCodesToEmojis[reaction.name]}
												<img
													src="/assets/emojis/{$shortCodesToEmojis[
														reaction.name
													].toLowerCase()}.svg"
													alt={reaction.name}
													class=" size-4"
													loading="lazy"
												/>
											{:else}
												<div>
													{reaction.name}
												</div>
											{/if}

{#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}

<ReactionPicker
									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>
								</ReactionPicker>
							</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}