{$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-3">
				{#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>

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