{#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$ {: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 : `${WEBUI_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"
							/>{#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>
{/if}

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