{#if showSettings}

Endpoint

System Prompt

</div>
      <div class="mb-4">
        <Label class="mb-1" for="temperature">
          Temperature: {$temperatureStore.toFixed(2)}
        </Label>
        <input
          id="temperature"
          type="range"
          min="0"
          max="2"
          step="0.05"
          class="accent-primary w-full"
          bind:value={$temperatureStore}
          disabled={isStreaming}
        />
        <div class="text-muted-foreground mt-1 flex justify-between text-xs">
          <span>Precise (0)</span>
          <span>Creative (2)</span>
        </div>
      </div>
      <div>
        <Label class="mb-1" for="max-tokens">Max Tokens</Label>
        <Input id="max-tokens" type="number" min="1" bind:value={$maxTokensStore} disabled={isStreaming} />
        <p class="text-muted-foreground mt-1 text-xs">Required for /v1/messages.</p>
      </div>
    </div>
  {/if}

{#if !hasModels}
    <div class="text-muted-foreground flex flex-1 items-center justify-center">
      <p>No models configured. Add models to your configuration to start chatting.</p>
    </div>
  {:else}
    
    <div
      class="mb-4 flex-1 overflow-y-auto px-2"
      bind:this={messagesContainer}
      onscroll={handleMessagesScroll}
    >
      {#if messages.length === 0}
        <div class="text-muted-foreground flex h-full items-center justify-center">
          <p>Start a conversation by typing a message below.</p>
        </div>
      {:else}
        {#each messages as message, idx (idx)}
          <ChatMessageComponent
            role={message.role}
            content={message.content}
            reasoning_content={message.reasoning_content}
            reasoningTimeMs={message.reasoningTimeMs}
            isStreaming={isStreaming && idx === messages.length - 1 && message.role === "assistant"}
            isReasoning={isReasoning && idx === messages.length - 1 && message.role === "assistant"}
            onEdit={message.role === "user" ? (newContent) => editMessage(idx, newContent) : undefined}
            onRegenerate={message.role === "assistant" && idx > 0 && messages[idx - 1].role === "user"
              ? () => regenerateFromIndex(idx - 1)
              : undefined}
          />
        {/each}
      {/if}
    </div>

<div class="shrink-0">
      
      {#if attachedImages.length > 0}
        <div class="mb-2 flex flex-wrap gap-2">
          {#each attachedImages as imageUrl, idx (idx)}
            <div class="group relative">
              <img
                src={imageUrl}
                alt="Attached image {idx + 1}"
                class="h-20 w-20 rounded border object-cover"
              />
              <button
                class="bg-destructive text-destructive-foreground absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full opacity-0 transition-opacity group-hover:opacity-100"
                onclick={() => removeImage(idx)}
                title="Remove image"
              >
                ×
              </button>
            </div>
          {/each}
        </div>
      {/if}

{#if imageError}
        <div class="bg-destructive/10 text-destructive mb-2 rounded p-2 text-sm">
          {imageError}
        </div>
      {/if}

<ExpandableTextarea
          bind:value={userInput}
          placeholder="Type a message..."
          rows={3}
          onkeydown={handleKeyDown}
          disabled={isStreaming || !$selectedModelStore}
        />
        <div class="flex flex-col gap-2">
          {#if isStreaming}
            <Button variant="destructive" onclick={cancelStreaming}>Cancel</Button>
          {:else}
            <Button
              variant="outline"
              size="icon"
              onclick={() => fileInput?.click()}
              disabled={isStreaming || !$selectedModelStore}
              title="Attach image"
            >
              <Paperclip />
            </Button>
            <Button
              onclick={sendMessage}
              disabled={(!userInput.trim() && attachedImages.length === 0) || !$selectedModelStore}
            >
              Send
            </Button>
          {/if}
        </div>
      </div>
    </div>
  {/if}
</div>