{`Playground | ${$WEBUI

Playground (Beta)

{#if mode === 'chat'}

System

</div>
					</div>
				{/if}

<div
					class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
					id="messages-container"
				>
					<div class=" h-full w-full flex flex-col">
						<div class="flex-1 p-1">
							{#if mode === 'complete'}
								<textarea
									id="text-completion-textarea"
									class="w-full h-full p-3 bg-transparent outline outline-1 outline-gray-200 dark:outline-gray-800 resize-none rounded-lg text-sm"
									bind:value={text}
									placeholder="You're a helpful assistant."
								/>
							{:else if mode === 'chat'}
								<div class="py-3 space-y-3">
									{#each messages as message, idx}
										<div class="flex gap-2 group">
											<div class="flex items-start pt-1">
												<button
													class="px-2 py-1 text-sm font-semibold uppercase min-w-[6rem] text-left dark:group-hover:bg-gray-800 rounded-lg transition"
													on:click={() => {
														message.role = message.role === 'user' ? 'assistant' : 'user';
													}}>{message.role}</button
												>
											</div>

<div class="flex-1">
												<textarea
													id="text-completion-textarea"
													class="w-full bg-transparent outline-none rounded-lg p-2 text-sm resize-none"
													placeholder="Enter {message.role === 'user'
														? 'a user'
														: 'an assistant'} message here"
													rows="1"
													on:input={(e) => {
														e.target.style.height = '';
														e.target.style.height = e.target.scrollHeight + 'px';
													}}
													on:focus={(e) => {
														e.target.style.height = '';
														e.target.style.height = e.target.scrollHeight + 'px';

// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
													}}
													bind:value={message.content}
												/>
											</div>

<div class=" pt-1">
												<button
													class=" group-hover:text-gray-500 dark:text-gray-900 dark:hover:text-gray-300 transition"
													on:click={() => {
														messages = messages.filter((message, messageIdx) => messageIdx !== idx);
													}}
												>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														fill="none"
														viewBox="0 0 24 24"
														stroke-width="2"
														stroke="currentColor"
														class="w-5 h-5"
													>
														<path
															stroke-linecap="round"
															stroke-linejoin="round"
															d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
														/>
													</svg>
												</button>
											</div>
										</div>

<hr class=" dark:border-gray-800" />
									{/each}

<button
										class="flex items-center gap-2"
										on:click={() => {
											console.log(messages.at(-1));
											messages.push({
												role:
													(messages.at(-1)?.role ?? 'assistant') === 'user' ? 'assistant' : 'user',
												content: ''
											});
											messages = messages;
										}}
									>
										<div>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												fill="none"
												viewBox="0 0 24 24"
												stroke-width="1.5"
												stroke="currentColor"
												class="w-5 h-5"
											>
												<path
													stroke-linecap="round"
													stroke-linejoin="round"
													d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
												/>
											</svg>
										</div>

<div class=" text-sm font-medium">Add message</div>
									</button>
								</div>
							{/if}
						</div>
					</div>
				</div>

<div class="pb-2">
					{#if !loading}
						<button
							class="px-3 py-1.5 text-sm font-medium bg-emerald-600 hover:bg-emerald-700 text-gray-50 transition rounded-lg"
							on:click={() => {
								submitHandler();
							}}
						>
							Submit
						</button>
					{:else}
						<button
							class="px-3 py-1.5 text-sm font-medium bg-gray-100 hover:bg-gray-200 text-gray-900 transition rounded-lg"
							on:click={() => {
								stopResponse();
							}}
						>
							Cancel
						</button>
					{/if}
				</div>
			</div>
		</div>
	</div>
</div>

<!-- <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
	{#if loaded}
		<div class=" flex flex-col justify-between w-full overflow-y-auto">
			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
				<div class="w-full">
					<div class=" flex flex-col justify-center">
						<div class=" text-2xl font-semibold self-center">My Documents</div>

.scrollbar-hidden::-webkit-scrollbar {
		display: none; /* for Chrome, Safari and Opera */
	}

.scrollbar-hidden {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}
</style>