{#if modalImageToShow} (modalImageToShow = null)}> {#if modalImageToShow.type === "hash"} input from user

{:else}

{/if} {/if} {#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} {@const toolName = tool.find(isMessageToolCallUpdate)?.call.name} {@const toolError = tool.some(isMessageToolErrorUpdate)} {@const toolDone = tool.some(isMessageToolResultUpdate)} {#if toolName && toolName !== "websearch"}

{toolError ? "Error calling" : toolDone ? "Called" : "Calling"} tool {availableTools.find((el) => toolHasName(toolName, el))?.displayName}

{#each tool as toolUpdate} {#if toolUpdate.subtype === MessageToolUpdateType.Call}

Parameters

{k}: {v}

{:else if toolUpdate.subtype === MessageToolUpdateType.Error}

Error

{toolUpdate.message}

{/if} {/each}

{/if} {/if} {/each} {/if}

{#if isLast && loading && reducedMotionMode} {/if} {#each tokens as token} {#if token.type === "code"} {:else} {@html marked.parse(token.raw, options)} {/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="ml-1.5 !rounded-sm !p-1 !text-sm !text-gray-400 focus:!ring-0 hover:!text-gray-500 dark:!text-gray-400 dark:hover:!text-gray-300 !border-none !shadow-none" value={message.content} />

{/if}

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

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

{#if message.files?.length}

{#each message.files as file} {#if file.mime.startsWith("image/")} {:else} {/if} {/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 focus:ring-0   hover:text-gray-800 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 focus:ring-0 hover:text-gray-500 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 max-sm:!hidden md:hidden dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
									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 md:hidden lg:-right-2 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
									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 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 disabled:pointer-events-none disabled:opacity-25 hover:text-gray-800 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 disabled:pointer-events-none disabled:opacity-25 hover:text-gray-800 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>
				</div>
			{/if}
		</svelte:fragment>
	</svelte:self>
{/if}

.loading-path {
		stroke-dasharray: 61.45;
		animation: loading 2s linear infinite;
	}

@keyframes loading {
		to {
			stroke-dashoffset: 122.9;
		}
	}
</style>