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

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

{system}

{/if}

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

<div class="pb-3">
				<div class="border border-gray-100 dark:border-gray-850 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 dark:border-gray-850 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">
								{#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>