Notebook

</div>

<div class="bg-background p-2 md:p-4">
		<div class="flex flex-col-reverse gap-4 md:flex-row md:items-center md:justify-between">
			<div class="flex items-center gap-2">
				<Tooltip.Root>
					<Tooltip.Trigger>
						<Button variant="ghost" size="icon" disabled={!canUndo} onclick={handleUndo}>
							<Undo class="h-4 w-4" />
						</Button>
					</Tooltip.Trigger>
					<Tooltip.Content>
						<p>Undo last generation</p>
						<KeyboardShortcutInfo keys={['ctrl', 'z']} class="w-full justify-center opacity-100" />
					</Tooltip.Content>
				</Tooltip.Root>

<Tooltip.Root>
					<Tooltip.Trigger>
						<Button variant="ghost" size="icon" disabled={!canRedo} onclick={handleRedo}>
							<Redo class="h-4 w-4" />
						</Button>
					</Tooltip.Trigger>
					<Tooltip.Content>
						<p>Redo last generation</p>
						<KeyboardShortcutInfo keys={['ctrl', 'y']} class="w-full justify-center opacity-100" />
					</Tooltip.Content>
				</Tooltip.Root>

{#snippet generateButton()}
					<Button
						disabled={isDisabled}
						onclick={notebookStore.isGenerating ? handleStop : handleGenerate}
						size="sm"
						variant={notebookStore.isGenerating ? 'destructive' : 'default'}
						class="min-w-[120px] gap-2"
					>
						{#if notebookStore.isGenerating}
							<Square class="h-4 w-4 fill-current" />
							Stop
						{:else}
							<Play class="h-4 w-4 fill-current" />
							Generate
						{/if}
					</Button>
				{/snippet}

<Tooltip.Root>
					<Tooltip.Trigger>
						{@render generateButton()}
					</Tooltip.Trigger>

<Tooltip.Content>
						{#if generateTooltip}
							<p>{generateTooltip}</p>
						{:else}
							<div class="flex items-center justify-center py-1">
								<KeyboardShortcutInfo keys={['shift', 'enter']} class="opacity-100" />
							</div>
						{/if}
					</Tooltip.Content>
				</Tooltip.Root>

{#if showMessageStats}
				<div class="flex w-full flex-col items-end justify-center gap-0.5 md:w-auto">
					{#if notebookStore.totalTokens > 0}
						<Tooltip.Root>
							<Tooltip.Trigger>
								<div class="flex items-center gap-1.5 pr-3.5 text-xs text-muted-foreground">
									<RulerDimensionLine class="h-3.5 w-3.5" />
									<span>{notebookStore.totalTokens} tokens</span>
								</div>
							</Tooltip.Trigger>
							<Tooltip.Content>
								<p>Total tokens</p>
							</Tooltip.Content>
						</Tooltip.Root>
					{/if}

{#if notebookStore.promptTokens > 0 || notebookStore.predictedTokens > 0}
						<ChatMessageStatistics
							promptTokens={notebookStore.promptTokens}
							promptMs={notebookStore.promptMs}
							predictedTokens={notebookStore.predictedTokens}
							predictedMs={notebookStore.predictedMs}
							isLive={notebookStore.isGenerating}
							isProcessingPrompt={notebookStore.isGenerating && notebookStore.predictedTokens === 0}
						/>
					{/if}
				</div>
			{/if}
		</div>
	</div>

<DialogChatSettings open={settingsOpen} onOpenChange={(open) => (settingsOpen = open)} />