{$i18n.t("System Instructions")}

{#if !showSystem && system.trim()}

{system}

{/if}

{
									resizeSystemTextarea();
								}}
								rows="4"
							/>
						</div>
					</div>
				</Collapsible>

<div slot="content">
						<div
							class="min-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
						>
							<DropdownSub>
								<button
									slot="trigger"
									class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
								>
									<Download strokeWidth="1.5" />
									<div class="flex items-center">
										{$i18n.t("Download")}
									</div>
								</button>
								<button
									class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
									disabled={messages.length === 0}
									on:click={() => {
										exportToJson();
									}}
								>
									<div class="flex items-center line-clamp-1">
										{$i18n.t("Export chat (.json)")}
									</div>
								</button>
								<button
									class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
									disabled={messages.length === 0}
									on:click={() => {
										downloadTxt();
									}}
								>
									<div class="flex items-center line-clamp-1">
										{$i18n.t("Plain text (.txt)")}
									</div>
								</button>
							</DropdownSub>
						</div>
					</div>
				</Dropdown>
			</div>

<div class="pb-3">
				<div
					class="border border-gray-100/30 dark:border-gray-850/30 w-full px-3 py-2.5 rounded-xl"
				>
					<div class="py-0.5">
						
						
						<textarea
							bind:value={message}
							class=" w-full h-full bg-transparent resize-none outline-hidden text-sm"
							placeholder={$i18n.t(
								`Enter {{role}} message here`,
								{
									role:
										role === "user"
											? $i18n.t("a user")
											: $i18n.t("an assistant"),
								},
							)}
							on:input={(e) => {
								e.target.style.height = "";
								e.target.style.height =
									Math.min(e.target.scrollHeight, 150) + "px";
							}}
							on:focus={(e) => {
								e.target.style.height = "";
								e.target.style.height =
									Math.min(e.target.scrollHeight, 150) + "px";
							}}
							rows="2"
						/>
					</div>

<div
						class="flex justify-between flex-col sm:flex-row items-start sm:items-center gap-2 mt-2"
					>
						<div class="shrink-0">
							<button
								type="button"
								class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg shrink-0 {($settings?.highContrastMode ??
								false)
									? ''
									: 'outline-hidden'}"
								aria-pressed={role === "assistant"}
								aria-label={$i18n.t(
									role === "user"
										? "Switch to Assistant role"
										: "Switch to User role",
								)}
								on:click={() => {
									role =
										role === "user" ? "assistant" : "user";
								}}
							>
								{#if role === "user"}
									{$i18n.t("User")}
								{:else}
									{$i18n.t("Assistant")}
								{/if}
							</button>
						</div>

<div
							class="flex items-center justify-between gap-2 w-full sm:w-auto"
						>
							<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>

<button
								class="p-1.5 text-sm font-medium bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg {showControls
									? 'text-black dark:text-white'
									: 'text-gray-500 dark:text-gray-400'}"
								aria-label={$i18n.t("Controls")}
								id="playground-controls-toggle"
								on:click={() => {
									showControls = !showControls;
								}}
							>
								<AdjustmentsHorizontal className="size-4" />
							</button>

<div class="flex gap-2 shrink-0">
								{#if !loading}
									<button
										disabled={message === ""}
										class="px-3.5 py-1.5 text-sm font-medium disabled:bg-gray-50 dark:disabled:hover:bg-gray-850 disabled:cursor-not-allowed bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
										on:click={() => {
											addHandler();
											role =
												role === "user"
													? "assistant"
													: "user";
										}}
									>
										{$i18n.t("Add")}
									</button>

<button
										class="px-3.5 py-1.5 text-sm font-medium 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 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-lg"
										on:click={() => {
											stopResponse();
										}}
									>
										{$i18n.t("Cancel")}
									</button>
								{/if}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>