{#if viewMode === 'json'}

{#if jsonError}

{jsonError}

{/if} {:else}

{#each displayItems as di, idx}

{getItemLabel(di)}

{#if di.type === 'message'}

{
									updateMessageText(di.indices[0], e.target.value);
									autoResize(e);
								}}
								placeholder={$i18n.t('Message text...')}
								rows="1"
							/>
						{:else if di.type === 'reasoning'}
							<textarea
								use:fitContent
								class="w-full bg-transparent outline-hidden resize-none overflow-hidden text-sm text-gray-500 dark:text-gray-400 p-1.5 rounded-lg"
								value={getReasoningText(di.item)}
								on:input={(e) => {
									updateReasoningText(di.indices[0], e.target.value);
									autoResize(e);
								}}
								placeholder={$i18n.t('Reasoning text...')}
								rows="1"
							/>
						{:else if di.type === 'function_call'}
							<div class="text-sm p-1.5 text-gray-500 dark:text-gray-400">
								{#if di.item.arguments}
									<pre
										class="text-xs font-mono whitespace-pre-wrap overflow-x-auto pb-0.5">{formatArgs(
											di.item.arguments
										)}</pre>
								{/if}
								{#if di.outputItem}
									<pre
										class="text-xs font-mono whitespace-pre-wrap overflow-x-auto mt-1 max-h-32 overflow-y-auto">{JSON.stringify(
											di.outputItem.output,
											null,
											2
										)}</pre>
								{/if}
							</div>
						{:else if di.type === 'code_interpreter'}
							<div class="text-sm p-1.5 text-gray-500 dark:text-gray-400">
								{#if di.item.code}
									<pre class="text-xs font-mono whitespace-pre overflow-x-auto">{di.item.code}</pre>
								{/if}
								{#if di.item.output}
									<pre
										class="text-xs font-mono whitespace-pre-wrap overflow-x-auto mt-1 max-h-32 overflow-y-auto">{typeof di
											.item.output === 'object'
											? JSON.stringify(di.item.output, null, 2)
											: di.item.output}</pre>
								{/if}
							</div>
						{:else if di.type === 'openai_tool'}
							<div class="text-sm p-1.5 text-gray-500 dark:text-gray-400">
								{#if di.item.action?.queries || di.item.queries}
									<span class="text-xs"
										>{(di.item.action?.queries ?? di.item.queries ?? []).join(', ')}</span
									>
								{/if}
							</div>
						{/if}
					</div>

<div class="pt-1.5">
						<button
							class="invisible group-hover:visible p-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition rounded-lg"
							on:click={() => deleteIndices(di.indices)}
						>
							<svg
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								stroke-width="2"
								stroke="currentColor"
								class="w-4 h-4"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
								/>
							</svg>
						</button>
					</div>
				</div>
			{/each}

{#if displayItems.length === 0}
				<div class="text-sm text-gray-400 dark:text-gray-500 italic px-1">
					{$i18n.t('No output items')}
				</div>
			{/if}
		</div>
	{/if}
</div>