evan/aethera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: evan:8f732e6fc7c9a22867d4b2107c7af4b4455a0751
Branches Tags
evan:master
..
compare: evan:0c002cf5ee76dee7fc1788ed8c3e3c1274af8cd9
Branches Tags
evan:master

4 Commits
8f732e6fc7 ... 0c002cf5ee

Author SHA1 Message Date
Evan Reichard
0c002cf5ee refactor(style): align sidebar controls
All checks were successful
continuous-integration/drone/push Build is passing
Details
2026-05-17 18:29:04 -04:00
Evan Reichard
f5bc4e2ae4 chore: no zoom on mobile 2026-05-17 18:16:46 -04:00
Evan Reichard
eddf5bf12d refactor(style): update chat layout and scrolling 2026-05-17 17:57:30 -04:00
Evan Reichard
6307a64c9c feat(chat): redesign input bar, expand sidebar, add thinking toggle 
- Restructure floating input: dominant textarea with compact bottom
  toolbar (model badge, thinking toggle, attach, send/stop).
- Model badge sizes to the current selection (not widest option) via
  a layered transparent select, with truncate-on-overflow fallback.
- Auto-expand the conversation sidebar on desktop and slide chat
  content right when open instead of overlaying.
- Add per-request thinking toggle (brain icon, default on, persisted
  in localStorage) sending chat_template_kwargs.enable_thinking.
- Always disable thinking for title summarization.
- Generate chat titles before the main response to keep the SSE
  stream from staying open past visible completion and to avoid
  busting the KV cache between turns.
 2026-05-17 16:36:11 -04:00
14 changed files with 714 additions and 519 deletions
Expand all files Collapse all files

40
backend/internal/api/handlers.go
View File

@@ -345,7 +345,7 @@ func (a *API) PostChat(w http.ResponseWriter, r *http.Request) {
} }
// Start Message // Start Message
chunk, err := a.startMessageGeneration(chat.ID, genReq.Model, genReq.Prompt, genReq.Images) chunk, err := a.startMessageGeneration(chat.ID, genReq.Model, genReq.Prompt, genReq.Images, genReq.EnableThinking())
if err != nil { if err != nil {
log.WithError(err).WithField("chat_id", chat.ID).Error("failed to start message generation") log.WithError(err).WithField("chat_id", chat.ID).Error("failed to start message generation")
http.Error(w, "Failed to start message generation", http.StatusInternalServerError) http.Error(w, "Failed to start message generation", http.StatusInternalServerError)
@@ -539,7 +539,7 @@ func (a *API) PostChatMessage(w http.ResponseWriter, r *http.Request) {
} }
// Start Message // Start Message
chunk, err := a.startMessageGeneration(chatID, genReq.Model, genReq.Prompt, genReq.Images) chunk, err := a.startMessageGeneration(chatID, genReq.Model, genReq.Prompt, genReq.Images, genReq.EnableThinking())
if err != nil { if err != nil {
log.WithError(err).WithField("chat_id", chatID).Error("failed to start message generation") log.WithError(err).WithField("chat_id", chatID).Error("failed to start message generation")
if errors.Is(err, errGenerationActive) { if errors.Is(err, errGenerationActive) {
@@ -572,7 +572,7 @@ func (a *API) getClient() (*client.Client, error) {
return a.client, nil return a.client, nil
} }
func (a *API) startMessageGeneration(chatID uuid.UUID, chatModel, userMessage string, images []string) (*MessageChunk, error) { func (a *API) startMessageGeneration(chatID uuid.UUID, chatModel, userMessage string, images []string, enableThinking bool) (*MessageChunk, error) {
apiClient, err := a.getClient() apiClient, err := a.getClient()
if err != nil { if err != nil {
return nil, fmt.Errorf("failed to get client: %w", err) return nil, fmt.Errorf("failed to get client: %w", err)
@@ -613,7 +613,7 @@ func (a *API) startMessageGeneration(chatID uuid.UUID, chatModel, userMessage st
} }
return nil return nil
}, func(gen *generation) { }, func(gen *generation) {
a.runMessageGeneration(apiClient, chat, assistantMsg, chatModel, gen) a.runMessageGeneration(apiClient, chat, assistantMsg, chatModel, enableThinking, gen)
}); err != nil { }); err != nil {
return nil, err return nil, err
} }
@@ -621,13 +621,30 @@ func (a *API) startMessageGeneration(chatID uuid.UUID, chatModel, userMessage st
return initialChunk, nil return initialChunk, nil
} }
func (a *API) runMessageGeneration(apiClient *client.Client, chat *store.Chat, assistantMsg *store.Message, chatModel string, gen *generation) { func (a *API) runMessageGeneration(apiClient *client.Client, chat *store.Chat, assistantMsg *store.Message, chatModel string, enableThinking bool, gen *generation) {
// Create Generation Context // Create Generation Context
ctx, cancel := context.WithTimeout(gen.ctx, a.textGenerationTimeout()) ctx, cancel := context.WithTimeout(gen.ctx, a.textGenerationTimeout())
defer cancel() defer cancel()
// Generate Title First - Doing this before the main response avoids busting the KV
// cache between the user prompt and the assistant reply, and keeps the stream from
// staying open past the visible response completing.
if chat.Title == "" && len(chat.Messages) > 0 {
title, err := apiClient.CreateTitle(ctx, chat.Messages[0].Content, chatModel)
if err != nil {
a.logger.WithError(err).WithField("chat_id", chat.ID).Error("failed to create chat title")
} else {
chat.Title = title
if err := a.store.SaveChat(chat); err != nil {
a.logger.WithError(err).WithField("chat_id", chat.ID).Error("failed to update chat")
} else {
gen.broadcast(&MessageChunk{Chat: toChatNoMessages(chat)})
}
}
}
// Send Message // Send Message
if _, err := apiClient.SendMessage(ctx, chat.Messages, chatModel, func(m *client.MessageChunk) error { if _, err := apiClient.SendMessage(ctx, chat.Messages, chatModel, enableThinking, func(m *client.MessageChunk) error {
messageChanged := false messageChanged := false
if m.Stats != nil { if m.Stats != nil {
@@ -684,17 +701,6 @@ func (a *API) runMessageGeneration(apiClient *client.Client, chat *store.Chat, a
return return
} }
// Summarize & Update Chat Title
if chat.Title == "" {
var err error
chat.Title, err = apiClient.CreateTitle(ctx, chat.Messages[0].Content, chatModel)
if err != nil {
a.logger.WithError(err).WithField("chat_id", chat.ID).Error("failed to create chat title")
} else if err := a.store.SaveChat(chat); err != nil {
a.logger.WithError(err).WithField("chat_id", chat.ID).Error("failed to update chat")
}
}
// Complete Assistant Message // Complete Assistant Message
assistantMsg.Status = store.MessageStatusComplete assistantMsg.Status = store.MessageStatusComplete
if err := a.store.SaveChatMessage(assistantMsg); err != nil { if err := a.store.SaveChatMessage(assistantMsg); err != nil {

14
backend/internal/api/types.go
View File

@@ -69,9 +69,17 @@ type ImageRecord struct {
} }
type GenerateTextRequest struct { type GenerateTextRequest struct {
Model string `json:"model"` Model string `json:"model"`
Prompt string `json:"prompt"` Prompt string `json:"prompt"`
Images []string `json:"images,omitempty"` Images []string `json:"images,omitempty"`
Thinking *bool `json:"thinking,omitempty"`
}
func (r *GenerateTextRequest) EnableThinking() bool {
if r.Thinking == nil {
return true
}
return *r.Thinking
} }
func (r *GenerateTextRequest) Validate() error { func (r *GenerateTextRequest) Validate() error {

7
backend/internal/client/client.go
View File

@@ -66,7 +66,7 @@ func (c *Client) EditImage(ctx context.Context, body openai.ImageEditParams) ([]
return resp.Data, nil return resp.Data, nil
} }
func (c *Client) SendMessage(ctx context.Context, chatMessages []*store.Message, model string, cb StreamCallback) (string, error) { func (c *Client) SendMessage(ctx context.Context, chatMessages []*store.Message, model string, enableThinking bool, cb StreamCallback) (string, error) {
// Ensure Callback // Ensure Callback
if cb == nil { if cb == nil {
cb = func(mc *MessageChunk) error { return nil } cb = func(mc *MessageChunk) error { return nil }
@@ -89,7 +89,8 @@ func (c *Client) SendMessage(ctx context.Context, chatMessages []*store.Message,
}, },
} }
chatReq.SetExtraFields(map[string]any{ chatReq.SetExtraFields(map[string]any{
"timings_per_token": true, // Llama.cpp "timings_per_token": true, // Llama.cpp
"chat_template_kwargs": map[string]any{"enable_thinking": enableThinking},
}) })
// Perform Request & Allocate Stats // Perform Request & Allocate Stats
@@ -172,7 +173,7 @@ func (c *Client) CreateTitle(ctx context.Context, userMessage, model string) (st
output, err := c.SendMessage(ctx, []*store.Message{{ output, err := c.SendMessage(ctx, []*store.Message{{
Role: "user", Role: "user",
Content: prompt, Content: prompt,
}}, model, nil) }}, model, false, nil)
if err != nil { if err != nil {
return "", fmt.Errorf("failed to sent message: %w", err) return "", fmt.Errorf("failed to sent message: %w", err)
} }

4
backend/internal/client/client_test.go
View File

@@ -32,7 +32,7 @@ func TestSendMessage(t *testing.T) {
_, err = client.SendMessage(ctx, []*store.Message{{ _, err = client.SendMessage(ctx, []*store.Message{{
Role: "user", Role: "user",
Content: "What is 2+2? Think step by step.", Content: "What is 2+2? Think step by step.",
}}, model, func(mc *MessageChunk) error { }}, model, true, func(mc *MessageChunk) error {
if mc.Thinking != nil { if mc.Thinking != nil {
_, err := thinkingBuf.Write([]byte(*mc.Thinking)) _, err := thinkingBuf.Write([]byte(*mc.Thinking))
return err return err
@@ -118,7 +118,7 @@ func TestSendMessageWithImage(t *testing.T) {
Role: "user", Role: "user",
Content: "Describe this image in detail.", Content: "Describe this image in detail.",
Images: []string{dataURL}, Images: []string{dataURL},
}}, model, func(mc *MessageChunk) error { }}, model, true, func(mc *MessageChunk) error {
if mc.Message != nil { if mc.Message != nil {
outputBuf.WriteString(*mc.Message) outputBuf.WriteString(*mc.Message)
} }

55
frontend/public/index.html
View File

@@ -4,21 +4,56 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" content="width=device-width, initial-scale=0.9, maximum-scale=0.9, user-scalable=no, viewport-fit=cover"
/> />
<meta name="theme-color" content="#f8f7ff" />
<title>Aethera - AI Conversation & Image Generator</title> <title>Aethera - AI Conversation & Image Generator</title>
<script type="module" src="./dist/main.js"></script> <script type="module" src="./dist/main.js"></script>
<link rel="stylesheet" href="./dist/styles.css" /> <link rel="stylesheet" href="./dist/styles.css" />
</head> </head>
<body class="bg-primary-50" x-data x-init="$store.navigation.init()"> <body class="bg-primary-50" x-data x-init="$store.navigation.init()">
<!-- Nav --> <!-- Nav - Fixed and fully transparent so page content always sits behind
<div it (including under the iOS dynamic island, even at scroll=0). The
class="isolate fixed z-50 w-full flex justify-between mt-4 px-4 md:px-6" pill inside provides its own background. Pages clear the nav with
padding-top: var(--nav-h). -->
<header
class="fixed top-0 left-0 right-0 z-50 flex justify-between px-4 md:px-6 pb-3 pointer-events-none"
style="padding-top: max(1rem, env(safe-area-inset-top));"
> >
<div class="size-9"></div> <div class="size-9 flex items-center justify-start pointer-events-none">
<button
x-show="$store.navigation.activeTab === 'chats' && !$store.chatSidebar.mobileOpen"
@click="$store.chatSidebar.toggleMobile()"
:aria-expanded="$store.chatSidebar.mobileOpen ? 'true' : 'false'"
aria-label="Toggle conversation list"
class="md:hidden p-2 rounded-md text-primary-700 hover:bg-primary-300 transition-colors cursor-pointer pointer-events-auto"
>
<svg
x-show="!$store.chatSidebar.mobileOpen"
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<svg
x-show="$store.chatSidebar.mobileOpen"
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
</div>
<!-- Main Nav --> <!-- Main Nav -->
<nav class="inline-flex bg-primary-100 rounded-full shadow-sm"> <nav class="inline-flex bg-primary-100 rounded-full pointer-events-auto">
<a <a
href="#/chats" href="#/chats"
:class="[ :class="[
@@ -58,7 +93,7 @@
<button <button
@click="$store.theme.cycleTheme()" @click="$store.theme.cycleTheme()"
x-init="$store.theme.init()" x-init="$store.theme.init()"
class="p-2 cursor-pointer rounded-md text-primary-700 hover:bg-primary-300 transition-colors" class="p-2 cursor-pointer rounded-md text-primary-700 hover:bg-primary-300 transition-colors pointer-events-auto"
aria-label="Toggle theme" aria-label="Toggle theme"
> >
<svg <svg
@@ -107,9 +142,9 @@
/> />
</svg> </svg>
</button> </button>
</div> </header>
<!-- Main Content Area --> <!-- Main Content Area - No fixed height; the document scrolls. -->
<main id="page-content" class="h-dvh"></main> <main id="page-content"></main>
</body> </body>
</html> </html>

950
frontend/public/pages/chats.html
View File

@@ -1,503 +1,501 @@
<div x-data="chatManager()"> <div x-data="chatManager()">
<!-- Chat Content -->
<div <div
class="h-dvh pt-16 flex flex-col-reverse pb-36 overflow-scroll mx-auto px-4 md:px-6 max-w-6xl" :class="$store.chatSidebar.collapsed ? 'md:grid-cols-[3.5rem_minmax(0,1fr)]' : 'md:grid-cols-[18rem_minmax(0,1fr)]'"
class="md:grid transition-[grid-template-columns] duration-300 ease-out"
> >
<template x-for="message in currentChatMessages" :key="message.id"> <!-- Desktop Sidebar - Flat rail flush with the page. Extends the full
<div viewport height; the transparent nav floats above its top region.
:class="['mb-4', message.role === 'user' ? 'text-right' : 'text-left']" Internal padding-top clears the nav. -->
> <aside
class="hidden md:flex md:flex-col md:sticky top-0 border-r border-primary-200/60"
style="height: 100dvh;"
>
<!-- Expanded Rail -->
<template x-if="!$store.chatSidebar.collapsed">
<div <div
:class="['inline-block px-4 py-3 text-left rounded-lg max-w-[95%] md:max-w-[85%]', class="flex flex-col h-full"
message.role === 'user' style="padding-top: max(1rem, env(safe-area-inset-top));"
? 'bg-primary-100 text-primary-900 rounded-br-none'
: 'bg-primary-200 text-primary-900 rounded-bl-none'
]"
> >
<!-- User Images --> <div class="px-2 pb-3 flex items-center gap-1">
<div <button
x-show="message.role === 'user' && message.images && message.images.length > 0" @click="$store.chatSidebar.toggleCollapsed()"
class="flex gap-1 mb-2 flex-wrap" class="size-9 flex items-center justify-center rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer flex-shrink-0"
> title="Collapse sidebar"
<template x-for="(img, imgIdx) in message.images" :key="imgIdx"> aria-label="Collapse sidebar"
<img :src="img" class="max-w-full h-auto rounded-lg max-h-48" />
</template>
</div>
<!-- Thinking Section -->
<div
x-show="message.thinking"
x-data="{ expanded: false }"
@click="expanded = !expanded"
>
<div
class="cursor-pointer rounded-lg overflow-hidden bg-primary-100 hover:bg-primary-50"
> >
<div <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
class="flex justify-center w-full px-3 py-2 text-xs text-primary-700 flex items-center gap-2 transition-colors" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
>
<span x-text="expanded ? '▼' : '◀'"></span>
<span class="font-medium">Reasoning</span>
<span x-text="expanded ? '▼' : '▶'"></span>
</div>
<div
x-show="expanded"
class="prose p-4 max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
x-html="renderMarkdown(message.thinking)"
></div>
</div>
</div>
<hr x-show="message.thinking" class="my-2 border-primary-400/50" />
<!-- Loading Spinner (Streaming with no content yet) -->
<div
x-show="message.role === 'assistant' && message.status === 'streaming' && !message.thinking && !message.content"
class="flex items-center gap-2 py-1"
>
<div
class="h-4 w-4 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"
></div>
<span class="text-xs text-primary-600">Thinking...</span>
</div>
<!-- Main Content -->
<div
x-show="message.content || message.status !== 'streaming'"
class="prose max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
x-html="renderMarkdown(message.content)"
></div>
<!-- Message Metadata -->
<div class="flex items-center justify-between gap-2 mt-2">
<div
class="text-[10px] opacity-60"
x-text="new Date(message.created_at).toLocaleTimeString()"
></div>
<div
x-show="message.role === 'assistant' && ['stopped', 'error', 'failed'].includes(message.status)"
:class="message.status === 'stopped' ? 'bg-primary-300/50 text-primary-700' : 'bg-tertiary-100 text-tertiary-700'"
class="px-2 py-0.5 rounded-full text-[10px] font-medium"
x-text="message.status === 'stopped' ? 'Stopped' : 'Error'"
></div>
</div>
</div>
<!-- Stats Badges (Assistant) -->
<div
x-show="message.role === 'assistant' && message.stats"
class="flex items-center gap-1 py-2 flex-wrap justify-start text-primary-700"
>
<!-- Cumulative Tokens with Hover Breakdown -->
<div
x-show="message.stats?.prompt_tokens || message.stats?.generated_tokens"
class="group relative px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full cursor-help"
>
<span
x-text="`${(message.stats?.prompt_tokens || 0) + (message.stats?.generated_tokens || 0)} tokens`"
></span>
<!-- Tokens -->
<div
class="invisible group-hover:visible absolute bottom-full left-1/2 -translate-x-1/2 m-2 px-2 py-1 bg-gray-900 text-white text-[10px] rounded whitespace-nowrap pointer-events-none grid grid-cols-[auto_1fr] gap-x-2"
>
<div
x-show="message.stats?.prompt_tokens"
x-text="message.stats?.prompt_tokens"
></div>
<div x-show="message.stats?.prompt_tokens">prompt tokens</div>
<div
x-show="message.stats?.generated_tokens"
x-text="message.stats?.generated_tokens"
></div>
<div x-show="message.stats?.generated_tokens">
generated tokens
</div>
</div>
</div>
<span
x-show="message.stats?.prompt_per_second"
class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
x-text="`${message.stats?.prompt_per_second.toFixed(1)} ppt/s`"
></span>
<span
x-show="message.stats?.generated_per_second"
class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
x-text="`${message.stats?.generated_per_second.toFixed(1)} tgt/s`"
></span>
<span
x-show="message.stats?.time_to_first_token"
class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
x-text="`${(message.stats?.time_to_first_token / 1000).toFixed(2)}s TTFT`"
></span>
</div>
</div>
</template>
</div>
<!-- Floating Input and Model Selection -->
<div class="fixed bottom-4 w-full flex justify-center px-4 md:px-6">
<div class="w-full sm:w-[calc(100%-2rem)] max-w-3xl z-10">
<div
class="flex flex-col gap-3 p-3 bg-primary-50/95 backdrop-blur-sm rounded-2xl shadow-2xl border border-primary-200"
>
<!-- Model Select -->
<div class="relative">
<select
x-model="selectedModel"
class="w-full appearance-none px-9 py-3 bg-gradient-to-r from-primary-50 to-primary-300 border border-primary-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-400 text-primary-900 text-sm font-medium cursor-pointer transition-shadow hover:shadow-md"
>
<option value="">Select Model</option>
<template x-for="model in models" :key="model.id">
<option
:value="model.id"
x-text="model.name || model.id"
></option>
</template>
</select>
<!-- Computer Icon -->
<svg
class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-primary-400 pointer-events-none"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
<!-- Chevron Icon -->
<svg
class="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-primary-400 pointer-events-none transition-colors hover:text-primary-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</div>
<!-- Image Preview Strip -->
<div
x-show="selectedImages.length > 0"
class="flex gap-2 flex-wrap"
>
<template x-for="(img, idx) in selectedImages" :key="idx">
<div class="relative">
<img :src="img" class="w-20 h-20 object-cover rounded-lg" />
<button
@click="selectedImages.splice(idx, 1)"
class="absolute -top-1 -right-1 w-5 h-5 bg-tertiary-700 text-white rounded-full flex items-center justify-center text-xs hover:bg-tertiary-900"
>
×
</button>
</div>
</template>
</div>
<!-- Message Form -->
<form @submit.prevent="sendMessage" class="flex gap-2 items-end">
<!-- Attach Image Button -->
<button
type="button"
@click="$refs.fileInput.click()"
class="self-stretch w-[44px] bg-primary-200 text-primary-700 rounded-xl transition-all flex items-center justify-center flex-shrink-0 hover:bg-primary-300 hover:shadow-md"
title="Attach Image"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
<!-- Hidden File Input -->
<input
x-ref="fileInput"
type="file"
accept="image/png, image/jpeg, image/webp"
multiple
class="hidden"
@change="
Array.from($event.target.files).forEach(file => {
const reader = new FileReader();
reader.onload = (e) => { selectedImages.push(e.target.result); };
reader.readAsDataURL(file);
});
$event.target.value = '';
"
/>
<textarea
x-model="inputMessage"
placeholder="Type your message..."
rows="1"
class="scrollbar-hide flex-1 p-3 bg-primary-50 border border-primary-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-400 text-primary-900 text-sm transition-shadow hover:bg-primary-100 resize-none overflow-y-auto max-h-60"
@keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); sendMessage(); }"
@input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
></textarea>
<button
type="submit"
:disabled="(!inputMessage.trim() && selectedImages.length === 0) || loading"
:class=" ((!inputMessage.trim() && selectedImages.length === 0) || loading) ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-md hover:scale-105'"
class="self-stretch w-[44px] bg-gradient-to-r from-primary-600 to-primary-500 text-white rounded-xl transition-all flex items-center justify-center flex-shrink-0"
>
<template x-if="loading">
<div
class="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
></div>
</template>
<template x-if="!loading">
<svg
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
/>
</svg> </svg>
</template> </button>
</button> <button
@click="selectChat(null)"
<button class="size-9 flex items-center justify-center rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
x-show="loading" title="New conversation"
type="button" aria-label="New conversation"
@click="stopResponse()"
:disabled="!activeStreamChatID"
:class="!activeStreamChatID ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-md hover:scale-105'"
class="self-stretch w-[44px] bg-tertiary-600 text-white rounded-xl transition-all flex items-center justify-center flex-shrink-0"
title="Stop response"
aria-label="Stop response"
>
<svg
class="h-4 w-4"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
> >
<path d="M6 6h12v12H6z" /> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>
<div class="flex-1 overflow-y-auto px-2 pb-4">
<div
x-show="chats.length === 0"
class="h-full flex flex-col justify-center text-center py-8 text-primary-500"
>
<p class="text-sm">No chats yet</p>
</div>
<template x-for="group in chatGroups" :key="group.label">
<div class="mt-2 first:mt-0">
<div
class="px-3 pt-3 pb-1 text-[10px] uppercase tracking-wider text-primary-500/70 font-medium"
x-text="group.label"
></div>
<div class="space-y-0.5">
<template x-for="chat in group.chats" :key="chat.id">
<div
@click="selectChat(chat.id)"
:class="selectedChatID === chat.id ? 'bg-primary-200' : 'hover:bg-primary-200/60'"
class="group relative px-3 py-2 rounded-lg cursor-pointer transition-colors"
:title="chat.title || chat.initial_message"
>
<div class="flex items-center justify-between gap-2">
<div
:class="selectedChatID === chat.id ? 'font-semibold' : 'font-medium'"
class="text-sm text-primary-900 truncate min-w-0 flex-1"
x-text="chat.title || chat.initial_message || 'New conversation'"
></div>
<button
@click.stop="deleteChat($event, chat.id)"
class="opacity-0 group-hover:opacity-100 focus:opacity-100 shrink-0 p-1 -mr-1 text-primary-400 hover:text-tertiary-600 hover:bg-tertiary-100 rounded transition-opacity"
title="Delete chat"
aria-label="Delete chat"
>
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
<div
x-show="chat.title && chat.initial_message"
class="text-xs text-primary-500/80 truncate mt-0.5"
x-text="chat.initial_message"
></div>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
</template>
<!-- Collapsed Icon Rail -->
<template x-if="$store.chatSidebar.collapsed">
<div
class="flex flex-col items-center px-2 pb-3 gap-1"
style="padding-top: max(1rem, env(safe-area-inset-top));"
>
<button
@click="$store.chatSidebar.toggleCollapsed()"
class="size-9 flex items-center justify-center rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer"
title="Expand sidebar"
aria-label="Expand sidebar"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg> </svg>
</button> </button>
</form> <button
@click="selectChat(null)"
<!-- Error Message --> class="size-9 flex items-center justify-center rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
<div title="New conversation"
x-show="error" aria-label="New conversation"
class="bg-tertiary-50 border border-tertiary-200 px-4 py-2"
>
<p class="text-sm text-tertiary-700" x-text="error"></p>
</div>
</div>
</div>
</div>
<!-- Floating Conversation List Toggle -->
<button
@click="chatListOpen = !chatListOpen"
:aria-expanded="chatListOpen ? 'true' : 'false'"
aria-label="Toggle left navigation"
class="isolate cursor-pointer fixed z-50 flex justify-between top-4 left-4 md:left-6 p-2 rounded-md text-primary-700 hover:bg-primary-300 transition-colors"
>
<svg
x-show="!chatListOpen"
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<svg
x-show="chatListOpen"
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<!-- Floating Conversation List -->
<div
x-show="chatListOpen"
x-transition:enter="transform transition-all duration-300 ease-out"
x-transition:enter-start="-translate-x-full opacity-0"
x-transition:enter-end="translate-x-0 opacity-100"
x-transition:leave="transform transition-all duration-300 ease-in"
x-transition:leave-start="translate-x-0 opacity-100"
x-transition:leave-end="-translate-x-full opacity-0"
class="fixed top-16 left-0 right-0 mx-auto md:left-6 md:right-auto md:mx-0 bottom-4 w-86 bg-primary-100 rounded-xl shadow-lg z-20 overflow-hidden flex flex-col"
>
<div class="px-4 py-3 border-b border-primary-200 flex justify-center">
<h4 class="font-semibold text-primary-900">
<span>Conversations</span>
</h4>
</div>
<!-- Conversation List-->
<div id="left-nav-desktop" class="flex-1 overflow-y-auto p-4">
<div
x-show="chats.length === 0"
class="h-full flex flex-col justify-center text-center py-8 text-primary-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-10 w-10 mx-auto mb-2 text-primary-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
<p class="text-sm">No chats yet</p>
</div>
<div class="space-y-2">
<template x-for="chat in chats" :key="chat.id">
<div
@click="selectChat(chat.id); chatListOpen = false;"
:class="[
'p-3 rounded-lg cursor-pointer transition-all border-l-3',
selectedChatID === chat.id
? 'bg-primary-200 border-l-primary-600'
: 'hover:bg-primary-200 border-l-transparent'
]"
:title="chat.title"
> >
<div class="flex items-start gap-3"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<!-- Icon --> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
<div class="mt-0.5 shrink-0"> </svg>
<svg </button>
xmlns="http://www.w3.org/2000/svg" </div>
:class="[ </template>
'h-4 w-4', </aside>
selectedChatID === chat.id ? 'text-primary-600' : 'text-primary-400'
]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
</div>
<div class="flex-1 min-w-0"> <!-- Main Chat Column - min-h ensures the sticky input pins to the viewport bottom
<div class="font-medium text-sm text-primary-900 truncate"> even when there are few messages (the column always fills the visible area).
<span x-text="chat.title || 'New Conversation'"></span> The reading column (max-w-3xl) is centered within whatever space the grid gives. -->
</div> <div
<div class="flex flex-col min-w-0 px-4 md:px-6"
class="flex items-center gap-2 mt-1.5 text-xs text-primary-600" style="min-height: 100dvh;"
> >
<span <!-- Messages (oldest first, newest last) -->
x-show="chat.message_count > 0" <div
class="shrink-0 bg-primary-300 text-primary-700 px-1.5 py-0.5 rounded text-[10px] font-medium" class="flex-1 flex flex-col gap-1 pb-4 w-full"
x-text="chat.message_count" style="padding-top: var(--nav-h);"
></span> >
<span class="truncate" x-text="chat.initial_message"></span> <template x-for="message in currentChatMessages" :key="message.id">
</div> <div :class="['mb-4', message.role === 'user' ? 'text-right' : 'text-left']">
</div> <div
:class="['inline-block px-4 py-3 text-left rounded-lg max-w-[95%] md:max-w-[85%]',
<button message.role === 'user'
@click.stop="deleteChat($event, chat.id)" ? 'bg-primary-100 text-primary-900 rounded-br-none'
class="cursor-pointer shrink-0 p-1 text-primary-400 hover:text-tertiary-600 hover:bg-tertiary-100 rounded transition-colors" : 'bg-primary-200 text-primary-900 rounded-bl-none'
title="Delete Chat" ]"
>
<div
x-show="message.role === 'user' && message.images && message.images.length > 0"
class="flex gap-1 mb-2 flex-wrap"
> >
<svg <template x-for="(img, imgIdx) in message.images" :key="imgIdx">
xmlns="http://www.w3.org/2000/svg" <img :src="img" class="max-w-full h-auto rounded-lg max-h-48" />
class="h-4 w-4" </template>
fill="none" </div>
viewBox="0 0 24 24"
stroke="currentColor" <div
> x-show="message.thinking"
<path x-data="{ expanded: false }"
stroke-linecap="round" @click="expanded = !expanded"
stroke-linejoin="round" >
stroke-width="2" <div class="cursor-pointer rounded-lg overflow-hidden bg-primary-100 hover:bg-primary-50">
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" <div class="flex justify-center w-full px-3 py-2 text-xs text-primary-700 flex items-center gap-2 transition-colors">
/> <span x-text="expanded ? '▼' : '◀'"></span>
</svg> <span class="font-medium">Reasoning</span>
</button> <span x-text="expanded ? '▼' : '▶'"></span>
</div>
<div
x-show="expanded"
class="prose p-4 max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
x-html="renderMarkdown(message.thinking)"
></div>
</div>
</div>
<hr x-show="message.thinking" class="my-2 border-primary-400/50" />
<div
x-show="message.role === 'assistant' && message.status === 'streaming' && !message.thinking && !message.content"
class="flex items-center gap-2 py-1"
>
<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"></div>
<span class="text-xs text-primary-600">Thinking...</span>
</div>
<div
x-show="message.content || message.status !== 'streaming'"
class="prose max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
x-html="renderMarkdown(message.content)"
></div>
<div class="flex items-center justify-between gap-2 mt-2">
<div class="text-[10px] opacity-60" x-text="new Date(message.created_at).toLocaleTimeString()"></div>
<div
x-show="message.role === 'assistant' && ['stopped', 'error', 'failed'].includes(message.status)"
:class="message.status === 'stopped' ? 'bg-primary-300/50 text-primary-700' : 'bg-tertiary-100 text-tertiary-700'"
class="px-2 py-0.5 rounded-full text-[10px] font-medium"
x-text="message.status === 'stopped' ? 'Stopped' : 'Error'"
></div>
</div>
</div>
<div
x-show="message.role === 'assistant' && message.stats"
class="flex items-center gap-1 py-2 flex-wrap justify-start text-primary-700"
>
<div
x-show="message.stats?.prompt_tokens || message.stats?.generated_tokens"
class="group relative px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full cursor-help"
>
<span x-text="`${(message.stats?.prompt_tokens || 0) + (message.stats?.generated_tokens || 0)} tokens`"></span>
<div class="invisible group-hover:visible absolute bottom-full left-1/2 -translate-x-1/2 m-2 px-2 py-1 bg-gray-900 text-white text-[10px] rounded whitespace-nowrap pointer-events-none grid grid-cols-[auto_1fr] gap-x-2">
<div x-show="message.stats?.prompt_tokens" x-text="message.stats?.prompt_tokens"></div>
<div x-show="message.stats?.prompt_tokens">prompt tokens</div>
<div x-show="message.stats?.generated_tokens" x-text="message.stats?.generated_tokens"></div>
<div x-show="message.stats?.generated_tokens">generated tokens</div>
</div>
</div>
<span
x-show="message.stats?.prompt_per_second"
class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
x-text="`${message.stats?.prompt_per_second.toFixed(1)} ppt/s`"
></span>
<span
x-show="message.stats?.generated_per_second"
class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
x-text="`${message.stats?.generated_per_second.toFixed(1)} tgt/s`"
></span>
<span
x-show="message.stats?.time_to_first_token"
class="px-2 py-0.5 text-[10px] bg-primary-300/50 rounded-full"
x-text="`${(message.stats?.time_to_first_token / 1000).toFixed(2)}s TTFT`"
></span>
</div> </div>
</div> </div>
</template> </template>
</div> </div>
</div>
<!-- Left Nav Footer --> <!-- Sticky Input Bar -->
<div
class="sticky bottom-0 pt-2 bg-primary-50"
style="padding-bottom: max(0.5rem, env(safe-area-inset-bottom));"
>
<form
@submit.prevent="sendMessage"
class="flex flex-col gap-2 p-3 bg-primary-50 rounded-2xl border border-primary-200"
>
<input
x-ref="fileInput"
type="file"
accept="image/png, image/jpeg, image/webp"
multiple
class="hidden"
@change="
Array.from($event.target.files).forEach(file => {
const reader = new FileReader();
reader.onload = (e) => { selectedImages.push(e.target.result); };
reader.readAsDataURL(file);
});
$event.target.value = '';
"
/>
<div x-show="selectedImages.length > 0" class="flex gap-2 flex-wrap">
<template x-for="(img, idx) in selectedImages" :key="idx">
<div class="relative">
<img :src="img" class="w-20 h-20 object-cover rounded-lg" />
<button
type="button"
@click="selectedImages.splice(idx, 1)"
class="absolute -top-1 -right-1 w-5 h-5 bg-tertiary-700 text-white rounded-full flex items-center justify-center text-xs hover:bg-tertiary-900"
>
×
</button>
</div>
</template>
</div>
<textarea
x-model="inputMessage"
placeholder="Type your message..."
rows="2"
class="scrollbar-hide w-full px-2 py-1 bg-transparent border-0 focus:outline-none focus:ring-0 text-primary-900 text-sm resize-none overflow-y-auto max-h-60"
@keydown.enter="if (!$event.shiftKey) { $event.preventDefault(); sendMessage(); }"
@input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px'"
></textarea>
<div class="flex items-center gap-2">
<div class="relative min-w-0 flex-shrink inline-flex items-center pl-7 pr-6 py-1 bg-primary-200/70 hover:bg-primary-300 border border-primary-200 rounded-full transition-colors">
<span
class="text-primary-900 text-xs font-medium truncate pointer-events-none"
x-text="(models.find(m => m.id === selectedModel)?.name) || selectedModel || 'Select Model'"
></span>
<select
x-model="selectedModel"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer focus:outline-none"
aria-label="Select model"
>
<option value="">Select Model</option>
<template x-for="model in models" :key="model.id">
<option :value="model.id" x-text="model.name || model.id"></option>
</template>
</select>
<svg class="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-primary-500 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<svg class="absolute right-1.5 top-1/2 -translate-y-1/2 h-3 w-3 text-primary-500 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
<button
type="button"
@click="thinkingEnabled = !thinkingEnabled"
:class="thinkingEnabled
? 'bg-primary-600 text-white border-primary-600 hover:bg-primary-700'
: 'bg-transparent text-primary-500 border-primary-300 hover:bg-primary-200/70'"
class="relative h-7 w-7 rounded-full border transition-colors flex items-center justify-center flex-shrink-0"
:title="thinkingEnabled ? 'Thinking on' : 'Thinking off'"
:aria-pressed="thinkingEnabled ? 'true' : 'false'"
aria-label="Toggle thinking"
>
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 5a3 3 0 0 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 0 0 12 21z" />
<path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 0 1 12 21" />
<path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
<path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
<path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
<path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
<path d="M19.938 10.5a4 4 0 0 1 .585.396" />
<path d="M6 18a4 4 0 0 1-1.967-.516" />
<path d="M19.967 17.484A4 4 0 0 1 18 18" />
</svg>
<svg
x-show="!thinkingEnabled"
class="absolute inset-0 h-full w-full text-primary-500"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
aria-hidden="true"
>
<line x1="5" y1="19" x2="19" y2="5" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<button
type="button"
@click="$refs.fileInput.click()"
class="h-7 w-7 bg-primary-200/70 text-primary-700 rounded-full transition-colors flex items-center justify-center flex-shrink-0 hover:bg-primary-300"
title="Attach Image"
aria-label="Attach Image"
>
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
<div class="ml-auto flex items-center gap-2">
<button
x-show="loading"
type="button"
@click="stopResponse()"
:disabled="!activeStreamChatID"
:class="!activeStreamChatID ? 'opacity-50 cursor-not-allowed' : 'hover:bg-tertiary-700'"
class="h-7 w-7 bg-tertiary-600 text-white rounded-full transition-colors flex items-center justify-center flex-shrink-0"
title="Stop response"
aria-label="Stop response"
>
<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M6 6h12v12H6z" />
</svg>
</button>
<button
type="submit"
:disabled="(!inputMessage.trim() && selectedImages.length === 0) || loading"
:class=" ((!inputMessage.trim() && selectedImages.length === 0) || loading) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary-600'"
class="h-7 w-7 bg-gradient-to-r from-primary-600 to-primary-500 text-white rounded-full transition-all flex items-center justify-center flex-shrink-0"
title="Send"
aria-label="Send"
>
<template x-if="loading">
<div class="h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
</template>
<template x-if="!loading">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
</template>
</button>
</div>
</div>
<div
x-show="error"
class="bg-tertiary-50 border border-tertiary-200 rounded-lg px-4 py-2"
>
<p class="text-sm text-tertiary-700" x-text="error"></p>
</div>
</form>
</div>
</div>
</div>
<!-- Mobile Sidebar Drawer (controlled from the top nav hamburger) -->
<div
x-show="$store.chatSidebar.mobileOpen"
x-cloak
x-transition.opacity
@click="$store.chatSidebar.mobileOpen = false"
class="md:hidden fixed inset-0 z-60 bg-black/40"
></div>
<div
x-show="$store.chatSidebar.mobileOpen"
x-cloak
x-transition:enter="transform transition-transform duration-300 ease-out"
x-transition:enter-start="-translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition-transform duration-300 ease-in"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="-translate-x-full"
class="md:hidden fixed top-0 left-0 bottom-0 z-60 w-[calc(100vw-3.5rem)] max-w-none bg-primary-50 flex flex-col"
>
<div <div
x-show="$store.navigation.activeTab === 'chats'" class="px-3 pb-3 flex items-center gap-2 border-b border-primary-200/60"
class="p-4 border-t border-primary-200 shrink-0" style="padding-top: max(1rem, env(safe-area-inset-top));"
> >
<button <button
@click="selectChat(null)" @click="$store.chatSidebar.mobileOpen = false"
class="w-full px-4 py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm font-medium flex cursor-pointer items-center justify-center gap-2" class="size-9 flex items-center justify-center rounded-md text-primary-500 hover:bg-primary-200 hover:text-primary-700 transition-colors cursor-pointer flex-shrink-0"
title="Collapse sidebar"
aria-label="Collapse sidebar"
> >
<svg <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
xmlns="http://www.w3.org/2000/svg" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg> </svg>
New Conversation
</button> </button>
<button
@click="selectChat(null); $store.chatSidebar.mobileOpen = false"
class="size-9 flex items-center justify-center rounded-md text-primary-700 hover:bg-primary-200 transition-colors cursor-pointer"
title="New conversation"
aria-label="New conversation"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>
<div class="flex-1 overflow-y-auto px-2 pb-4">
<div
x-show="chats.length === 0"
class="h-full flex flex-col justify-center text-center py-8 text-primary-500"
>
<p class="text-sm">No chats yet</p>
</div>
<template x-for="group in chatGroups" :key="group.label">
<div class="mt-2 first:mt-0">
<div
class="px-3 pt-3 pb-1 text-[10px] uppercase tracking-wider text-primary-500/70 font-medium"
x-text="group.label"
></div>
<div class="space-y-0.5">
<template x-for="chat in group.chats" :key="chat.id">
<div
@click="selectChat(chat.id); $store.chatSidebar.mobileOpen = false"
:class="selectedChatID === chat.id ? 'bg-primary-200' : 'hover:bg-primary-200/60'"
class="group relative px-3 py-2 rounded-lg cursor-pointer transition-colors"
:title="chat.title || chat.initial_message"
>
<div class="flex items-center justify-between gap-2">
<div
:class="selectedChatID === chat.id ? 'font-semibold' : 'font-medium'"
class="text-sm text-primary-900 truncate min-w-0 flex-1"
x-text="chat.title || chat.initial_message || 'New conversation'"
></div>
<button
@click.stop="deleteChat($event, chat.id)"
class="shrink-0 p-1 -mr-1 text-primary-400 hover:text-tertiary-600 hover:bg-tertiary-100 rounded transition-colors"
title="Delete chat"
aria-label="Delete chat"
>
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
<div
x-show="chat.title && chat.initial_message"
class="text-xs text-primary-500/80 truncate mt-0.5"
x-text="chat.initial_message"
></div>
</div>
</template>
</div>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>

3
frontend/public/pages/images.html
View File

@@ -1,5 +1,6 @@
<div <div
class="flex flex-col gap-4 pt-16 mx-auto px-4 md:px-6 max-w-6xl" class="flex flex-col gap-4 pb-4 mx-auto px-4 md:px-6 max-w-6xl"
style="padding-top: var(--nav-h);"
x-data="imageGenerator()" x-data="imageGenerator()"
> >
<div> <div>

3
frontend/public/pages/settings.html
View File

@@ -1,7 +1,8 @@
<form <form
x-data="settingsManager()" x-data="settingsManager()"
@submit.prevent="saveSettings" @submit.prevent="saveSettings"
class="p-0.5 w-full flex flex-col gap-4 pt-16 mx-auto px-4 md:px-6 max-w-6xl" class="p-0.5 w-full flex flex-col gap-4 pb-4 mx-auto px-4 md:px-6 max-w-6xl"
style="padding-top: var(--nav-h);"
> >
<div> <div>
<span class="text-sm font-medium font-semibold text-primary-700" <span class="text-sm font-medium font-semibold text-primary-700"

69
frontend/src/components/chatManager.ts
View File

@@ -14,9 +14,11 @@ import {
} from '../client'; } from '../client';
import { Chat, Message, MessageChunk, Model, Settings } from '../types'; import { Chat, Message, MessageChunk, Model, Settings } from '../types';
import { applyFilter } from '../utils'; import { applyFilter } from '../utils';
import { createAutoScroll, AutoScroll } from '../utils/autoScroll';
const CHAT_ROUTE = '#/chats'; const CHAT_ROUTE = '#/chats';
const MODEL_KEY = 'aethera-chat-model'; const MODEL_KEY = 'aethera-chat-model';
const THINKING_KEY = 'aethera-chat-thinking';
const IN_PROGRESS_UUID = '00000000-0000-0000-0000-000000000000'; const IN_PROGRESS_UUID = '00000000-0000-0000-0000-000000000000';
// Markdown Renderer // Markdown Renderer
@@ -37,16 +39,20 @@ Alpine.data('chatManager', () => ({
_models: [] as Model[], _models: [] as Model[],
selectedModel: '', selectedModel: '',
thinkingEnabled: localStorage.getItem(THINKING_KEY) !== 'false',
inputMessage: '', inputMessage: '',
selectedImages: [] as string[], selectedImages: [] as string[],
error: '', error: '',
selectedChatID: null as string | null, selectedChatID: null as string | null,
chatListOpen: false,
loading: false, loading: false,
activeStreamChatID: null as string | null, activeStreamChatID: null as string | null,
_autoScroll: null as AutoScroll | null,
async init() { async init() {
this._autoScroll = createAutoScroll();
// Acquire Data // Acquire Data
this._models = await getModels(); this._models = await getModels();
this.settings = await getSettings(); this.settings = await getSettings();
@@ -56,6 +62,7 @@ Alpine.data('chatManager', () => ({
// Route Chat // Route Chat
const chatID = window.location.hash.split('/')[2]; const chatID = window.location.hash.split('/')[2];
if (chatID) await this.selectChat(chatID); if (chatID) await this.selectChat(chatID);
this._autoScroll.scrollToBottom();
}, },
async loadChats() { async loadChats() {
@@ -80,7 +87,6 @@ Alpine.data('chatManager', () => ({
if (this.selectedChatID == chatId) { if (this.selectedChatID == chatId) {
const newIndex = Math.min(chatIndex, this.chats.length - 1); const newIndex = Math.min(chatIndex, this.chats.length - 1);
this.selectChat(this.chats[newIndex]?.id); this.selectChat(this.chats[newIndex]?.id);
if (!this.selectedChatID) this.chatListOpen = false;
} }
} catch (err) { } catch (err) {
console.error('Error deleting conversation:', err); console.error('Error deleting conversation:', err);
@@ -113,6 +119,7 @@ Alpine.data('chatManager', () => ({
// Save Model // Save Model
if (this.selectedModel) localStorage.setItem(MODEL_KEY, this.selectedModel); if (this.selectedModel) localStorage.setItem(MODEL_KEY, this.selectedModel);
localStorage.setItem(THINKING_KEY, String(this.thinkingEnabled));
// New Chat // New Chat
if (!this.selectedChatID) { if (!this.selectedChatID) {
@@ -141,11 +148,12 @@ Alpine.data('chatManager', () => ({
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}); });
currentChat.message_count += 1; currentChat.message_count += 1;
this._autoScroll?.scrollToBottom('smooth');
try { try {
await sendMessage( await sendMessage(
this.selectedChatID === IN_PROGRESS_UUID ? '' : this.selectedChatID, this.selectedChatID === IN_PROGRESS_UUID ? '' : this.selectedChatID,
{ model: this.selectedModel, prompt: message, images }, { model: this.selectedModel, prompt: message, images, thinking: this.thinkingEnabled },
(chunk: MessageChunk) => { (chunk: MessageChunk) => {
if (chunk.chat) this.activeStreamChatID = chunk.chat.id; if (chunk.chat) this.activeStreamChatID = chunk.chat.id;
this.applyMessageChunk(chunk); this.applyMessageChunk(chunk);
@@ -189,6 +197,8 @@ Alpine.data('chatManager', () => ({
if (chunk.user_message) this.upsertMessage(currentChat, chunk.user_message); if (chunk.user_message) this.upsertMessage(currentChat, chunk.user_message);
if (chunk.assistant_message) if (chunk.assistant_message)
this.upsertMessage(currentChat, chunk.assistant_message); this.upsertMessage(currentChat, chunk.assistant_message);
this._autoScroll?.maybeScrollToBottom();
}, },
upsertMessage(chat: Chat, message: Message) { upsertMessage(chat: Chat, message: Message) {
@@ -219,8 +229,10 @@ Alpine.data('chatManager', () => ({
// Load Messages // Load Messages
this.selectedChatID = chatID; this.selectedChatID = chatID;
if (!this.selectedChatID) this.chatListOpen = false; if (this.selectedChatID) {
else this.loadChatMessages(); await this.loadChatMessages();
this._autoScroll?.scrollToBottom();
}
}, },
async loadChatMessages() { async loadChatMessages() {
@@ -282,7 +294,11 @@ Alpine.data('chatManager', () => ({
const currentChat = const currentChat =
this.chats.find((c) => c.id === this.selectedChatID) ?? null; this.chats.find((c) => c.id === this.selectedChatID) ?? null;
if (!currentChat) return []; if (!currentChat) return [];
return [...currentChat.messages].reverse(); return currentChat.messages;
},
get chatGroups(): { label: string; chats: Chat[] }[] {
return groupChatsByDay(this.chats);
}, },
renderMarkdown(content: string) { renderMarkdown(content: string) {
@@ -290,6 +306,47 @@ Alpine.data('chatManager', () => ({
}, },
})); }));
function startOfDay(d: Date): number {
return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
}
function groupChatsByDay(
chats: Chat[],
): { label: string; chats: Chat[] }[] {
const now = new Date();
const today = startOfDay(now);
const yesterday = today - 86_400_000;
const groups: { key: number; label: string; chats: Chat[] }[] = [];
let current: { key: number; label: string; chats: Chat[] } | null = null;
for (const chat of chats) {
const created = new Date(chat.created_at);
const day = startOfDay(created);
if (!current || current.key !== day) {
let label: string;
if (day === today) label = 'Today';
else if (day === yesterday) label = 'Yesterday';
else {
const opts: Intl.DateTimeFormatOptions = {
month: 'short',
day: 'numeric',
};
if (created.getFullYear() !== now.getFullYear())
opts.year = 'numeric';
label = created.toLocaleDateString(undefined, opts);
}
current = { key: day, label, chats: [] };
groups.push(current);
}
current.chats.push(chat);
}
return groups;
}
function parseError(err: unknown): string { function parseError(err: unknown): string {
const msg = err instanceof Error ? err.message : String(err); const msg = err instanceof Error ? err.message : String(err);

24
frontend/src/components/chatSidebarStore.ts Normal file
View File

@@ -0,0 +1,24 @@
import Alpine from 'alpinejs';
const COLLAPSED_KEY = 'aethera-chat-sidebar-collapsed';
interface ChatSidebarStore {
mobileOpen: boolean;
collapsed: boolean;
toggleMobile(): void;
toggleCollapsed(): void;
}
const store: ChatSidebarStore = {
mobileOpen: false,
collapsed: localStorage.getItem(COLLAPSED_KEY) === 'true',
toggleMobile() {
this.mobileOpen = !this.mobileOpen;
},
toggleCollapsed() {
this.collapsed = !this.collapsed;
localStorage.setItem(COLLAPSED_KEY, String(this.collapsed));
},
};
Alpine.store('chatSidebar', store);

1
frontend/src/main.ts
View File

@@ -13,6 +13,7 @@ import './components/imageManager';
import './components/settingsManager'; import './components/settingsManager';
import './components/themeManager'; import './components/themeManager';
import './components/navigationManager'; import './components/navigationManager';
import './components/chatSidebarStore';
// Start Alpine // Start Alpine
window.Alpine = Alpine; window.Alpine = Alpine;

1
frontend/src/types/index.ts
View File

@@ -71,6 +71,7 @@ export interface GenerateTextRequest {
model: string; model: string;
prompt: string; prompt: string;
images?: string[]; images?: string[];
thinking?: boolean;
} }
export interface ChatListResponse { export interface ChatListResponse {

43
frontend/src/utils/autoScroll.ts Normal file
View File

@@ -0,0 +1,43 @@
// Pin-to-bottom controller for the document scroll.
//
// Tracks whether the user is "near" the bottom of the page. While pinned, new
// content (e.g. streaming tokens) scrolls the viewport to keep up. Once the
// user scrolls up, pinning releases and updates stop forcing scroll until the
// user returns to the bottom.
const PIN_THRESHOLD_PX = 80;
export interface AutoScroll {
isPinned(): boolean;
scrollToBottom(behavior?: ScrollBehavior): void;
maybeScrollToBottom(): void;
}
export function createAutoScroll(): AutoScroll {
let pinned = true;
const scrollEl = () => document.scrollingElement || document.documentElement;
const distanceFromBottom = () => {
const el = scrollEl();
return el.scrollHeight - el.scrollTop - el.clientHeight;
};
const onScroll = () => {
pinned = distanceFromBottom() < PIN_THRESHOLD_PX;
};
window.addEventListener('scroll', onScroll, { passive: true });
return {
isPinned: () => pinned,
scrollToBottom(behavior: ScrollBehavior = 'auto') {
window.scrollTo({ top: scrollEl().scrollHeight, behavior });
pinned = true;
},
maybeScrollToBottom() {
if (!pinned) return;
requestAnimationFrame(() => {
window.scrollTo({ top: scrollEl().scrollHeight });
});
},
};
}

19
frontend/styles.css
View File

@@ -1,6 +1,25 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "@tailwindcss/typography"; @plugin "@tailwindcss/typography";
:root {
/* Top nav clearance - pages use this to pad past the fixed nav. */
--nav-h: calc(max(1rem, env(safe-area-inset-top)) + 3rem);
background: var(--color-primary-50);
}
html,
body {
background: var(--color-primary-50);
}
@media (max-width: 767px) {
input,
textarea,
select {
font-size: 16px;
}
}
[x-cloak] { [x-cloak] {
display: none !important; display: none !important;
} }