{#if message.from === "assistant"}

(isTapped = !isTapped)} on:keydown={() => (isTapped = !isTapped)} > {#if $page.data?.assistant?.avatar}

{:else}

{/if}

{#if message.files?.length}

{#each message.files as file} {/each}

{/if} {#if searchUpdates && searchUpdates.length > 0} {/if} {#if toolUpdates} {#each Object.values(toolUpdates) as tool} {#if tool.length} {#key tool[0].uuid} {/key} {/if} {/each} {/if}

{#if isLast && loading && $settings.disableStream} {/if} {#each tokens as token} {#if token.type === "code"} {:else} {#await marked.parse(token.raw, options) then parsed} {@html DOMPurify.sanitize(parsed)} {/await} {/if} {/each}

{#if webSearchSources?.length}

Sources:

{#each webSearchSources as { link, title }}

{new URL(link).hostname.replace(/^www\./, "")}

{/each}

{/if}

{#if !loading && (message.content || toolUpdates)}

{#if isAuthor} {/if} { isCopied = true; }} classNames="btn rounded-sm p-1 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300" value={message.content} />

{/if}

{/if} {#if message.from === "user"}

(isTapped = !isTapped)} on:keydown={() => (isTapped = !isTapped)} >

{#if message.files?.length}

{#each message.files as file} {/each}

{/if}

{#if !editMode}

{message.content.trim()}

{:else}

{ dispatch("retry", { content: editContentEl.value, id: message.id }); $convTreeStore.editing = null; }} >

<div class="flex w-full flex-row flex-nowrap items-center justify-center gap-2 pt-2">
							<button
								type="submit"
								class="btn rounded-lg px-3 py-1.5 text-sm
                                {loading
									? 'bg-gray-300 text-gray-400 dark:bg-gray-700 dark:text-gray-600'
									: 'bg-gray-200 text-gray-600 hover:text-gray-800   focus:ring-0 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-200'}
								"
								disabled={loading}
							>
								Submit
							</button>
							<button
								type="button"
								class="btn rounded-sm p-2 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
								on:click={() => {
									$convTreeStore.editing = null;
								}}
							>
								Cancel
							</button>
						</div>
					</form>
				{/if}
				{#if !loading && !editMode}
					<div
						class="
                        max-md:opacity-0' invisible absolute
                        right-0 top-3.5 z-10 h-max max-md:-translate-y-4 max-md:transition-all md:bottom-0 md:group-hover:visible md:group-hover:opacity-100 {isTapped ||
						isCopied
							? 'max-md:visible max-md:translate-y-0 max-md:opacity-100'
							: ''}"
					>
						<div class="mx-auto flex flex-row flex-nowrap gap-2">
							{#if downloadLink}
								<a
									class="rounded-lg border border-gray-100 bg-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-300 max-sm:!hidden md:hidden"
									title="Download prompt and parameters"
									type="button"
									target="_blank"
									href={downloadLink}
								>
									<CarbonDownload />
								</a>
							{/if}
							{#if !readOnly}
								<button
									class="cursor-pointer rounded-lg border border-gray-100 bg-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
									title="Branch"
									type="button"
									on:click={() => ($convTreeStore.editing = message.id)}
								>
									<CarbonPen />
								</button>
							{/if}
						</div>
					</div>
				{/if}
			</div>
			<slot name="childrenNav" />
		</div>
	</div>
{/if}

{#if nChildren > 0}
	<svelte:self
		{loading}
		{messages}
		{isAuthor}
		{readOnly}
		{model}
		id={messages.find((m) => m.id === id)?.children?.[childrenToRender]}
		on:retry
		on:vote
		on:continue
	>
		<svelte:fragment slot="childrenNav">
			{#if nChildren > 1 && $convTreeStore.editing === null}
				<div
					class="font-white group/navbranch z-10 -mt-1 ml-3.5 mr-auto flex h-6 w-fit select-none flex-row items-center justify-center gap-1 text-sm"
				>
					<button
						class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
						on:click={() => (childrenToRender = Math.max(0, childrenToRender - 1))}
						disabled={childrenToRender === 0 || loading}
					>
						<CarbonChevronLeft class="text-sm" />
					</button>
					<span class=" text-gray-400 dark:text-gray-500">
						{childrenToRender + 1} / {nChildren}
					</span>
					<button
						class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
						on:click={() =>
							(childrenToRender = Math.min(
								message?.children?.length ?? 1 - 1,
								childrenToRender + 1
							))}
						disabled={childrenToRender === nChildren - 1 || loading}
					>
						<CarbonChevronRight class="text-sm" />
					</button>
					{#if !loading && message.children}<form
							method="POST"
							action="?/deleteBranch"
							class="hidden group-hover/navbranch:block"
							use:enhance={({ cancel }) => {
								if (!confirm("Are you sure you want to delete this branch?")) {
									cancel();
								}
							}}
						>
							<input name="messageId" value={message.children[childrenToRender]} type="hidden" />
							<button
								class="flex items-center justify-center text-xs text-gray-400 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-200"
								type="submit"
								><CarbonTrashCan />
							</button>
						</form>
					{/if}
				</div>
			{/if}
		</svelte:fragment>
	</svelte:self>
{/if}