{$i18n.t('Playground')} | {$WEBUI

{$i18n.t('Playground')} {$i18n.t('(Beta)')}

model.name !== 'hr') .map((model) => ({ value: model.id, label: model.name, info: model }))} bind:value={selectedModelId} />

{#if mode === 'chat'}

{$i18n.t('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"
					bind:this={messagesContainerElement}
				>
					<div class=" h-full w-full flex flex-col">
						<div class="flex-1 p-1">
							{#if mode === 'complete'}
								<textarea
									id="text-completion-textarea"
									bind:this={textCompletionAreaElement}
									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={$i18n.t("You're a helpful assistant.")}
								/>
							{:else if mode === 'chat'}
								<ChatCompletion bind:messages />
							{/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();
							}}
						>
							{$i18n.t('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();
							}}
						>
							{$i18n.t('Cancel')}
						</button>
					{/if}
				</div>
			</div>
		</div>
	</div>
</div>

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