From da8f7cff2fc303f84fc929703cd8231321f88daf Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 18 Nov 2024 22:49:38 -0800
Subject: [PATCH] refac

---
 src/lib/components/chat/Placeholder.svelte | 247 ++++++++++-----------
 1 file changed, 121 insertions(+), 126 deletions(-)

diff --git a/src/lib/components/chat/Placeholder.svelte b/src/lib/components/chat/Placeholder.svelte
index 5b7bb52ae..6782ea628 100644
--- a/src/lib/components/chat/Placeholder.svelte
+++ b/src/lib/components/chat/Placeholder.svelte
@@ -75,7 +75,6 @@
 		await tick();
 	};
 
-	let mounted = false;
 	let selectedModelIdx = 0;
 
 	$: if (selectedModels.length > 0) {
@@ -84,147 +83,143 @@
 
 	$: models = selectedModels.map((id) => $_models.find((m) => m.id === id));
 
-	onMount(() => {
-		mounted = true;
-	});
+	onMount(() => {});
 </script>
 
-{#if mounted}
-	<div class="m-auto w-full max-w-6xl px-2 xl:px-20 translate-y-6 py-24 text-center">
-		{#if $temporaryChatEnabled}
-			<Tooltip
-				content="This chat won't appear in history and your messages will not be saved."
-				className="w-full flex justify-center mb-0.5"
-				placement="top"
-			>
-				<div class="flex items-center gap-2 text-gray-500 font-medium text-lg my-2 w-fit">
-					<EyeSlash strokeWidth="2.5" className="size-5" /> Temporary Chat
-				</div>
-			</Tooltip>
-		{/if}
-
-		<div
-			class="w-full text-3xl text-gray-800 dark:text-gray-100 font-medium text-center flex items-center gap-4 font-primary"
+<div class="m-auto w-full max-w-6xl px-2 xl:px-20 translate-y-6 py-24 text-center">
+	{#if $temporaryChatEnabled}
+		<Tooltip
+			content="This chat won't appear in history and your messages will not be saved."
+			className="w-full flex justify-center mb-0.5"
+			placement="top"
 		>
-			<div class="w-full flex flex-col justify-center items-center">
-				<div class="flex flex-row justify-center gap-3 sm:gap-3.5 w-fit px-5">
-					<div class="flex flex-shrink-0 justify-center">
-						<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}>
-							{#each models as model, modelIdx}
-								<Tooltip
-									content={(models[modelIdx]?.info?.meta?.tags ?? [])
-										.map((tag) => tag.name.toUpperCase())
-										.join(', ')}
-									placement="top"
-								>
-									<button
-										on:click={() => {
-											selectedModelIdx = modelIdx;
-										}}
-									>
-										<img
-											crossorigin="anonymous"
-											src={model?.info?.meta?.profile_image_url ??
-												($i18n.language === 'dg-DG'
-													? `/doge.png`
-													: `${WEBUI_BASE_URL}/static/favicon.png`)}
-											class=" size-9 sm:size-10 rounded-full border-[1px] border-gray-200 dark:border-none"
-											alt="logo"
-											draggable="false"
-										/>
-									</button>
-								</Tooltip>
-							{/each}
-						</div>
-					</div>
+			<div class="flex items-center gap-2 text-gray-500 font-medium text-lg my-2 w-fit">
+				<EyeSlash strokeWidth="2.5" className="size-5" /> Temporary Chat
+			</div>
+		</Tooltip>
+	{/if}
 
-					<div class=" text-3xl sm:text-4xl line-clamp-1" in:fade={{ duration: 100 }}>
-						{#if models[selectedModelIdx]?.name}
-							{models[selectedModelIdx]?.name}
-						{:else}
-							{$i18n.t('Hello, {{name}}', { name: $user.name })}
-						{/if}
-					</div>
-				</div>
-
-				<div class="flex mt-1 mb-2">
-					<div in:fade={{ duration: 100, delay: 50 }}>
-						{#if models[selectedModelIdx]?.info?.meta?.description ?? null}
+	<div
+		class="w-full text-3xl text-gray-800 dark:text-gray-100 font-medium text-center flex items-center gap-4 font-primary"
+	>
+		<div class="w-full flex flex-col justify-center items-center">
+			<div class="flex flex-row justify-center gap-3 sm:gap-3.5 w-fit px-5">
+				<div class="flex flex-shrink-0 justify-center">
+					<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}>
+						{#each models as model, modelIdx}
 							<Tooltip
-								className=" w-fit"
-								content={marked.parse(
-									sanitizeResponseContent(models[selectedModelIdx]?.info?.meta?.description ?? '')
-								)}
+								content={(models[modelIdx]?.info?.meta?.tags ?? [])
+									.map((tag) => tag.name.toUpperCase())
+									.join(', ')}
 								placement="top"
 							>
-								<div
-									class="mt-0.5 px-2 text-sm font-normal text-gray-500 dark:text-gray-400 line-clamp-2 max-w-xl markdown"
+								<button
+									on:click={() => {
+										selectedModelIdx = modelIdx;
+									}}
 								>
-									{@html marked.parse(
-										sanitizeResponseContent(models[selectedModelIdx]?.info?.meta?.description)
-									)}
-								</div>
+									<img
+										crossorigin="anonymous"
+										src={model?.info?.meta?.profile_image_url ??
+											($i18n.language === 'dg-DG'
+												? `/doge.png`
+												: `${WEBUI_BASE_URL}/static/favicon.png`)}
+										class=" size-9 sm:size-10 rounded-full border-[1px] border-gray-200 dark:border-none"
+										alt="logo"
+										draggable="false"
+									/>
+								</button>
 							</Tooltip>
-
-							{#if models[selectedModelIdx]?.info?.meta?.user}
-								<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
-									By
-									{#if models[selectedModelIdx]?.info?.meta?.user.community}
-										<a
-											href="https://openwebui.com/m/{models[selectedModelIdx]?.info?.meta?.user
-												.username}"
-											>{models[selectedModelIdx]?.info?.meta?.user.name
-												? models[selectedModelIdx]?.info?.meta?.user.name
-												: `@${models[selectedModelIdx]?.info?.meta?.user.username}`}</a
-										>
-									{:else}
-										{models[selectedModelIdx]?.info?.meta?.user.name}
-									{/if}
-								</div>
-							{/if}
-						{/if}
+						{/each}
 					</div>
 				</div>
 
-				<div
-					class="text-base font-normal xl:translate-x-6 md:max-w-3xl w-full py-3 {atSelectedModel
-						? 'mt-2'
-						: ''}"
-				>
-					<MessageInput
-						{history}
-						{selectedModels}
-						bind:files
-						bind:prompt
-						bind:autoScroll
-						bind:selectedToolIds
-						bind:webSearchEnabled
-						bind:atSelectedModel
-						{transparentBackground}
-						{stopResponse}
-						{createMessagePair}
-						placeholder={$i18n.t('How can I help you today?')}
-						on:upload={(e) => {
-							dispatch('upload', e.detail);
-						}}
-						on:submit={(e) => {
-							dispatch('submit', e.detail);
-						}}
-					/>
+				<div class=" text-3xl sm:text-4xl line-clamp-1" in:fade={{ duration: 100 }}>
+					{#if models[selectedModelIdx]?.name}
+						{models[selectedModelIdx]?.name}
+					{:else}
+						{$i18n.t('Hello, {{name}}', { name: $user.name })}
+					{/if}
 				</div>
 			</div>
-		</div>
-		<div class="mx-auto max-w-2xl font-primary" in:fade={{ duration: 200, delay: 200 }}>
-			<div class="mx-5">
-				<Suggestions
-					suggestionPrompts={models[selectedModelIdx]?.info?.meta?.suggestion_prompts ??
-						$config?.default_prompt_suggestions ??
-						[]}
-					on:select={(e) => {
-						selectSuggestionPrompt(e.detail);
+
+			<div class="flex mt-1 mb-2">
+				<div in:fade={{ duration: 100, delay: 50 }}>
+					{#if models[selectedModelIdx]?.info?.meta?.description ?? null}
+						<Tooltip
+							className=" w-fit"
+							content={marked.parse(
+								sanitizeResponseContent(models[selectedModelIdx]?.info?.meta?.description ?? '')
+							)}
+							placement="top"
+						>
+							<div
+								class="mt-0.5 px-2 text-sm font-normal text-gray-500 dark:text-gray-400 line-clamp-2 max-w-xl markdown"
+							>
+								{@html marked.parse(
+									sanitizeResponseContent(models[selectedModelIdx]?.info?.meta?.description)
+								)}
+							</div>
+						</Tooltip>
+
+						{#if models[selectedModelIdx]?.info?.meta?.user}
+							<div class="mt-0.5 text-sm font-normal text-gray-400 dark:text-gray-500">
+								By
+								{#if models[selectedModelIdx]?.info?.meta?.user.community}
+									<a
+										href="https://openwebui.com/m/{models[selectedModelIdx]?.info?.meta?.user
+											.username}"
+										>{models[selectedModelIdx]?.info?.meta?.user.name
+											? models[selectedModelIdx]?.info?.meta?.user.name
+											: `@${models[selectedModelIdx]?.info?.meta?.user.username}`}</a
+									>
+								{:else}
+									{models[selectedModelIdx]?.info?.meta?.user.name}
+								{/if}
+							</div>
+						{/if}
+					{/if}
+				</div>
+			</div>
+
+			<div
+				class="text-base font-normal xl:translate-x-6 md:max-w-3xl w-full py-3 {atSelectedModel
+					? 'mt-2'
+					: ''}"
+			>
+				<MessageInput
+					{history}
+					{selectedModels}
+					bind:files
+					bind:prompt
+					bind:autoScroll
+					bind:selectedToolIds
+					bind:webSearchEnabled
+					bind:atSelectedModel
+					{transparentBackground}
+					{stopResponse}
+					{createMessagePair}
+					placeholder={$i18n.t('How can I help you today?')}
+					on:upload={(e) => {
+						dispatch('upload', e.detail);
+					}}
+					on:submit={(e) => {
+						dispatch('submit', e.detail);
 					}}
 				/>
 			</div>
 		</div>
 	</div>
-{/if}
+	<div class="mx-auto max-w-2xl font-primary" in:fade={{ duration: 200, delay: 200 }}>
+		<div class="mx-5">
+			<Suggestions
+				suggestionPrompts={models[selectedModelIdx]?.info?.meta?.suggestion_prompts ??
+					$config?.default_prompt_suggestions ??
+					[]}
+				on:select={(e) => {
+					selectSuggestionPrompt(e.detail);
+				}}
+			/>
+		</div>
+	</div>
+</div>