{#if !edit && !disabled}

{#if onReaction} (showButtons = false)} onSubmit={(name) => { showButtons = false; onReaction(name); }} > {/if} {#if onReply} {/if} {#if !thread && onThread} {/if} {#if message.user_id === $user?.id || $user?.role === "admin"} {#if onEdit} {/if} {#if onDelete} {/if} {/if}

{/if} {#if message?.is_pinned}

{$i18n.t("Pinned")}

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

{/if}

{#if showUserProfile} {#if message?.meta?.model_id} ${message.meta.model_name$ { e.currentTarget.src = "/favicon.png"; }} /> {:else if message.user?.role === "webhook"} {: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 === true}

{:else if (message?.data?.files ?? []).length > 0}

{#each message?.data?.files as file} {@const fileUrl = file.url.startsWith("data") || file.url.startsWith("http") ? file.url : `${REXPRO_API_BASE_URL}/files/${file.url}${file?.content_type ? "/content" : ""}`}

{#if file.type === "image" || (file?.content_type ?? "").startsWith("image/")} {file.name}

{:else if file.type === "video" || (file?.content_type ?? "").startsWith("video/")}

{: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 {pending
								? 'opacity-50'
								: ''}"
						>
							{#if (message?.content ?? "").trim() === "" && message?.meta?.model_id}
								<Skeleton />
							{:else}
								<Markdown
									id={message.id}
									content={message.content}
									paragraphTag="span"
									allowEmbeds={!!message?.meta?.model_id}
								/>{#if message.created_at !== message.updated_at && (message?.meta?.model_id ?? null) === null}<span
										class="text-gray-500 text-[10px] pl-1 self-center"
										>({$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={$i18n.t(
												"{{NAMES}} reacted with {{REACTION}}",
												{
													NAMES: reaction.users
														.reduce(
															(acc, u, idx) => {
																const name =
																	u.id ===
																	$user?.id
																		? $i18n.t(
																				"You",
																			)
																		: u.name;
																const total =
																	reaction
																		.users
																		.length;

// First three names always added normally
																if (idx < 3) {
																	const separator =
																		idx ===
																		0
																			? ""
																			: idx ===
																				  Math.min(
																						2,
																						total -
																							1,
																				  )
																				? ` ${$i18n.t("and")} `
																				: ", ";
																	return `${acc}${separator}${name}`;
																}

// More than 4 → "and X others"
																if (
																	idx === 3 &&
																	total > 4
																) {
																	return (
																		acc +
																		` ${$i18n.t(
																			"and {{COUNT}} others",
																			{
																				COUNT:
																					total -
																					3,
																			},
																		)}`
																	);
																}

return acc;
															},
															"",
														)
														.trim(),
													REACTION: `:${reaction.name}:`,
												},
											)}
										>
											<button
												class="flex items-center gap-1.5 transition rounded-xl px-2 py-1 cursor-pointer {reaction.users
													.map((u) => u.id)
													.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={() => {
													if (onReaction) {
														onReaction(
															reaction.name,
														);
													}
												}}
											>
												<Emoji
													shortCode={reaction.name}
												/>

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

{#if onReaction}
										<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>
									{/if}
								</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>
	</div>
{/if}

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

/* Swipe-to-reply styles */
	.swipe-reply-wrapper {
		touch-action: pan-y;
	}

.swipe-reply-indicator {
		position: absolute;
		left: 8px;
		top: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;
		pointer-events: none;
	}

.swipe-reply-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background-color: rgba(128, 128, 128, 0.15);
		color: rgba(128, 128, 128, 0.8);
		transition:
			background-color 0.15s,
			color 0.15s;
	}

.swipe-reply-icon--active {
		background-color: rgba(59, 130, 246, 0.2);
		color: rgb(59, 130, 246);
	}

:global(.dark) .swipe-reply-icon {
		background-color: rgba(200, 200, 200, 0.1);
		color: rgba(200, 200, 200, 0.6);
	}

:global(.dark) .swipe-reply-icon--active {
		background-color: rgba(96, 165, 250, 0.2);
		color: rgb(96, 165, 250);
	}
</style>