</div>
				</div>
			</div>

<div class="pb-3 flex justify-between items-center">
				<div class="flex-1">
					<select
						class="bg-transparent border border-gray-100/30 dark:border-gray-850/30 rounded-lg py-1 px-2 -mx-0.5 text-sm outline-hidden w-full"
						bind:value={selectedModelId}
					>
						{#each $models as model}
							<option value={model.id} class="bg-gray-50 dark:bg-gray-700">{model.name}</option>
						{/each}
					</select>
				</div>

<div class="flex gap-2 shrink-0 ml-2">
					{#if !loading}
						<button
							class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-lg"
							on:click={() => {
								submitHandler();
							}}
						>
							{$i18n.t('Run')}
						</button>
					{:else}
						<button
							class="px-3.5 py-1.5 text-sm font-normal bg-gray-300 text-black transition rounded-lg flex items-center gap-2"
							on:click={() => {
								stopResponse();
							}}
						>
							<Spinner className="size-4" />
							{$i18n.t('Cancel')}
						</button>
					{/if}
				</div>
			</div>
		</div>
	</div>
</div>

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