core/gui
8
0
Fork 0
Code Issues 1 Pull requests 2 Projects Releases Packages Wiki Activity Actions

Implement missing chat contract and UI features

Browse source
This commit is contained in:
Snider 2026-04-15 17:12:04 +01:00
parent f5665049a5
commit e0722c3690
12 changed files with 715 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
pkg/chat/messages.go
View file

@ -2,6 +2,26 @@ package chat
import "time"
type QueryHistory struct {
ConversationID string `json:"conversation_id,omitempty"`
ID string `json:"id,omitempty"`
}
type QueryModels struct{}
type QuerySettings struct{}
type QueryConversationList struct{}
type QueryConversationGet struct {
ConversationID string `json:"conversation_id,omitempty"`
ID string `json:"id,omitempty"`
}
type QueryConversationSearch struct {
Query string `json:"q"`
}
type ChatMessage struct {
ID string `json:"id"`
Role string `json:"role"`

57
pkg/chat/service.go
View file

@ -68,7 +68,9 @@ type renameInput struct {
}
type selectModelInput struct {
Model string `json:"model"`
Model string `json:"model"`
ConversationID string `json:"conversation_id,omitempty"`
ID string `json:"id,omitempty"`
}
type attachImageInput struct {
@ -169,6 +171,7 @@ func (s *Service) OnStartup(_ context.Context) core.Result {
s.toolExecutor = subsystem
}
s.toolHandler = NewToolCallHandler(s.toolExecutor)
s.Core().RegisterQuery(s.handleQuery)
s.registerActions()
return core.Result{OK: true}
}
@ -177,6 +180,29 @@ func (s *Service) HandleIPCEvents(_ *core.Core, _ core.Message) core.Result {
return core.Result{OK: true}
}
func (s *Service) handleQuery(_ *core.Core, q core.Query) core.Result {
switch typed := q.(type) {
case QueryHistory:
conv, err := s.getConversation(typed.ID, typed.ConversationID)
return core.Result{}.New(conv, err)
case QueryModels:
return core.Result{Value: s.discoverModels(), OK: true}
case QuerySettings:
return core.Result{Value: s.loadSettings(), OK: true}
case QueryConversationList:
conversations, err := s.listConversationSummaries()
return core.Result{}.New(conversations, err)
case QueryConversationGet:
conv, err := s.getConversation(typed.ID, typed.ConversationID)
return core.Result{}.New(conv, err)
case QueryConversationSearch:
results, err := s.searchConversationSummaries(typed.Query)
return core.Result{}.New(results, err)
default:
return core.Result{}
}
}
func (s *Service) registerActions() {
c := s.Core()
c.Action("gui.chat.send", func(ctx context.Context, opts core.Options) core.Result {
@ -211,9 +237,7 @@ func (s *Service) registerActions() {
if err != nil {
return core.Result{Value: err, OK: false}
}
settings := s.loadSettings()
settings.DefaultModel = input.Model
err = s.saveSettings(settings)
settings, err := s.selectModel(input)
return core.Result{}.New(settings, err)
})
c.Action("gui.chat.settings.save", func(_ context.Context, opts core.Options) core.Result {
@ -349,6 +373,31 @@ func (s *Service) loadSettings() ChatSettings {
return settings
}
func (s *Service) selectModel(input selectModelInput) (ChatSettings, error) {
settings := s.loadSettings()
settings.DefaultModel = input.Model
if err := s.saveSettings(settings); err != nil {
return ChatSettings{}, err
}
targetConversation := coalesce(input.ConversationID, input.ID)
if targetConversation == "" {
return settings, nil
}
conv, err := s.loadConversation(targetConversation)
if err != nil {
return ChatSettings{}, err
}
conv.Model = input.Model
conv, err = s.saveConversation(conv)
if err != nil {
return ChatSettings{}, err
}
s.emit(ActionConversationUpdated{Conversation: conv})
return settings, nil
}
func (s *Service) saveConversation(conv Conversation) (Conversation, error) {
conv.UpdatedAt = s.now()
payload := core.JSONMarshalString(conv)

27
pkg/chat/service_test.go
View file

@ -81,6 +81,10 @@ func TestService_Good_SendAndHistory(t *testing.T) {
))
require.True(t, history.OK)
assert.Equal(t, conv.ID, history.Value.(Conversation).ID)
queryHistory := c.QUERY(QueryHistory{ConversationID: conv.ID})
require.True(t, queryHistory.OK)
assert.Equal(t, conv.ID, queryHistory.Value.(Conversation).ID)
}
func TestService_Good_ToolCallRoundTrip(t *testing.T) {
@ -113,3 +117,26 @@ func TestService_Good_ToolCallRoundTrip(t *testing.T) {
assert.Equal(t, "tool", conv.Messages[2].Role)
assert.True(t, strings.Contains(conv.Messages[len(conv.Messages)-1].Content, "left-right"))
}
func TestService_Good_SelectModelUpdatesConversation(t *testing.T) {
c := newChatCore(t, func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "text/event-stream")
_, _ = io.WriteString(w, "data: {\"id\":\"chatcmpl-1\",\"choices\":[{\"delta\":{\"content\":\"Hello\"}}]}\n\n")
_, _ = io.WriteString(w, "data: {\"id\":\"chatcmpl-1\",\"choices\":[{\"finish_reason\":\"stop\"}]}\n\n")
_, _ = io.WriteString(w, "data: [DONE]\n\n")
}, &mockToolExecutor{})
created := c.Action("gui.chat.conversations.new").Run(context.Background(), core.NewOptions())
require.True(t, created.OK)
conv := created.Value.(Conversation)
selected := c.Action("gui.chat.selectModel").Run(context.Background(), core.NewOptions(
core.Option{Key: "model", Value: "lemma"},
core.Option{Key: "conversation_id", Value: conv.ID},
))
require.True(t, selected.OK)
updated := c.QUERY(QueryConversationGet{ConversationID: conv.ID})
require.True(t, updated.OK)
assert.Equal(t, "lemma", updated.Value.(Conversation).Model)
}

10
pkg/display/scheme.go
View file

@ -163,13 +163,11 @@ func (s *Service) resolveModelsRoute(subpath string, query url.Values) core.Resu
}
}
func (s *Service) resolveChatRoute(ctx context.Context, subpath string, query url.Values) core.Result {
func (s *Service) resolveChatRoute(_ context.Context, subpath string, query url.Values) core.Result {
if id := coalesce(query.Get("conversation_id"), query.Get("id"), subpath); id != "" {
return s.Core().Action("gui.chat.history").Run(ctx, core.NewOptions(
core.Option{Key: "conversation_id", Value: id},
))
return s.Core().QUERY(chat.QueryHistory{ConversationID: id})
}
return s.Core().Action("gui.chat.conversations.list").Run(ctx, core.NewOptions())
return s.Core().QUERY(chat.QueryConversationList{})
}
func (s *Service) resolveUnavailableCoreRoute(route, subpath string, query url.Values) core.Result {
@ -400,7 +398,7 @@ func (s *Service) renderStoreSearchPage(query string, results []StorageEntry) st
func (s *Service) searchAllStorage(query string) []StorageEntry {
results := s.storage.Search(query)
if conversations := s.Core().Action("gui.chat.conversations.search").Run(context.Background(), core.NewOptions(core.Option{Key: "q", Value: query})); conversations.OK {
if conversations := s.Core().QUERY(chat.QueryConversationSearch{Query: query}); conversations.OK {
switch list := conversations.Value.(type) {
case []any:
for _, item := range list {

13
ui/src/chat/chat-panel.component.ts
View file

@ -22,12 +22,15 @@ import { ChatStateService } from './chat-state.service';
template: `
<div class="workspace">
<chat-conversation-sidebar
[conversations]="state.filteredConversations()"
[conversations]="state.conversations()"
[activeId]="state.activeConversation()?.id || ''"
[query]="state.historyQuery()"
(queryChange)="state.historyQuery.set($event)"
(queryChange)="state.setHistoryQuery($event)"
(create)="state.startConversation()"
(select)="state.refreshConversation($event)"
(rename)="state.renameConversation($event.id, $event.title)"
(delete)="state.deleteConversation($event)"
(export)="state.exportConversation($event)"
/>
<main class="chat-shell">
@ -40,7 +43,7 @@ import { ChatStateService } from './chat-state.service';
<chat-model-selector
[models]="state.models()"
[value]="state.selectedModel()"
(valueChange)="state.selectedModel.set($event)"
(valueChange)="state.changeModel($event)"
/>
<button type="button" class="settings" (click)="state.settingsOpen.set(!state.settingsOpen())">Settings</button>
</div>
@ -51,6 +54,7 @@ import { ChatStateService } from './chat-state.service';
[models]="state.models()"
[settings]="state.settings()"
(saved)="state.saveSettings($event)"
(reset)="state.resetSettings()"
(closed)="state.settingsOpen.set(false)"
/>
@ -61,7 +65,10 @@ import { ChatStateService } from './chat-state.service';
<chat-input-area
[value]="state.draft()"
[disabled]="state.sending()"
[attachments]="state.queuedAttachments()"
(valueChange)="state.draft.set($event)"
(attachFiles)="state.queueImageFiles($event)"
(removeAttachment)="state.removeQueuedAttachment($event)"
(submit)="state.sendMessage()"
/>
</main>

387
ui/src/chat/chat-state.service.ts
View file

@ -1,6 +1,16 @@
import { Injectable, computed, effect, inject, signal } from '@angular/core';
import { Injectable, effect, inject, signal } from '@angular/core';
import { WebSocketService } from '../services/websocket.service';
import { ChatMessage, ChatSettings, Conversation, ConversationSummary, ModelEntry } from './chat.types';
import {
ChatMessage,
ChatSettings,
Conversation,
ConversationSummary,
ImageAttachment,
ModelEntry,
ThinkingState,
ToolCall,
ToolResult,
} from './chat.types';
declare global {
interface Window {
@ -15,6 +25,7 @@ export class ChatStateService {
readonly conversations = signal<ConversationSummary[]>([]);
readonly activeConversation = signal<Conversation | null>(null);
readonly models = signal<ModelEntry[]>([]);
readonly queuedAttachments = signal<ImageAttachment[]>([]);
readonly settings = signal<ChatSettings>({
temperature: 1,
top_p: 0.95,
@ -29,19 +40,14 @@ export class ChatStateService {
readonly settingsOpen = signal(false);
readonly sending = signal(false);
readonly selectedModel = signal('');
readonly filteredConversations = computed(() => {
const needle = this.historyQuery().trim().toLowerCase();
if (!needle) {
return this.conversations();
}
return this.conversations().filter((item) => item.title.toLowerCase().includes(needle));
});
constructor() {
effect(() => {
const current = this.activeConversation();
if (current) {
this.selectedModel.set(current.model || this.settings().default_model);
if (current?.model) {
this.selectedModel.set(current.model);
} else if (this.settings().default_model) {
this.selectedModel.set(this.settings().default_model);
}
});
}
@ -56,6 +62,7 @@ export class ChatStateService {
const conversation = await this.invoke<Conversation>('gui.chat.conversations.get', { id });
if (conversation) {
this.activeConversation.set(conversation);
this.queuedAttachments.set([]);
}
}
@ -63,15 +70,21 @@ export class ChatStateService {
const conversation = await this.invoke<Conversation>('gui.chat.conversations.new');
if (conversation) {
this.activeConversation.set(conversation);
this.conversations.update((items) => [conversation, ...items.filter((item) => item.id !== conversation.id)]);
this.upsertSummary(this.toSummary(conversation));
this.queuedAttachments.set([]);
}
}
async deleteConversation(id: string): Promise<void> {
await this.invoke('gui.chat.conversations.delete', { id });
this.conversations.update((items) => items.filter((item) => item.id !== id));
this.removeSummary(id);
if (this.activeConversation()?.id === id) {
this.activeConversation.set(null);
this.queuedAttachments.set([]);
const next = this.conversations()[0];
if (next) {
await this.refreshConversation(next.id);
}
}
}
@ -82,6 +95,29 @@ export class ChatStateService {
}
}
async exportConversation(id: string): Promise<void> {
const markdown = await this.invoke<string>('gui.chat.conversations.export', { id });
if (!markdown) {
return;
}
const blob = new Blob([markdown], { type: 'text/markdown;charset=utf-8' });
const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = `${id}.md`;
anchor.click();
URL.revokeObjectURL(url);
}
async setHistoryQuery(query: string): Promise<void> {
this.historyQuery.set(query);
const trimmed = query.trim();
const route = trimmed ? 'gui.chat.conversations.search' : 'gui.chat.conversations.list';
const payload = trimmed ? { q: trimmed } : undefined;
const conversations = await this.invoke<ConversationSummary[]>(route, payload);
this.conversations.set(conversations ?? []);
}
async saveSettings(settings: ChatSettings): Promise<void> {
const saved = await this.invoke<ChatSettings>('gui.chat.settings.save', settings);
if (saved) {
@ -92,9 +128,53 @@ export class ChatStateService {
}
}
async resetSettings(): Promise<void> {
const reset = await this.invoke<ChatSettings>('gui.chat.settings.reset');
if (reset) {
this.settings.set(reset);
if (reset.default_model) {
this.selectedModel.set(reset.default_model);
}
}
}
async changeModel(model: string): Promise<void> {
if (!model) {
return;
}
const settings = await this.invoke<ChatSettings>('gui.chat.selectModel', {
model,
conversation_id: this.activeConversation()?.id,
});
this.selectedModel.set(model);
if (settings) {
this.settings.set(settings);
}
this.activeConversation.update((conversation) => (conversation ? { ...conversation, model } : conversation));
this.conversations.update((items) => items.map((item) => (item.id === this.activeConversation()?.id ? { ...item, model } : item)));
}
async queueImageFiles(files: FileList | File[]): Promise<void> {
const items = Array.from(files);
for (const file of items) {
if (!file.type.startsWith('image/')) {
continue;
}
const attachment = await this.fileToAttachment(file);
await this.invoke<ImageAttachment>('gui.chat.attachImage', {
conversation_id: this.activeConversation()?.id,
...attachment,
});
}
}
removeQueuedAttachment(index: number): void {
this.queuedAttachments.update((items) => items.filter((_, itemIndex) => itemIndex !== index));
}
async sendMessage(): Promise<void> {
const content = this.draft().trim();
if (!content && !(this.activeConversation()?.messages?.length)) {
if (!content && this.queuedAttachments().length === 0) {
return;
}
this.sending.set(true);
@ -107,6 +187,7 @@ export class ChatStateService {
this.activeConversation.set(response);
this.mergeConversation(response);
this.draft.set('');
this.queuedAttachments.set([]);
}
} finally {
this.sending.set(false);
@ -126,11 +207,6 @@ export class ChatStateService {
if (current) {
this.selectedModel.set(current.name);
}
} else {
this.models.set([
{ name: 'lemer', architecture: 'gemma3', quant_bits: 4, size_bytes: 1_500_000_000, loaded: true, backend: 'metal' },
]);
this.selectedModel.set('lemer');
}
if (settings) {
@ -143,68 +219,228 @@ export class ChatStateService {
if (conversations?.length) {
this.conversations.set(conversations);
await this.refreshConversation(conversations[0].id);
} else {
await this.startConversation();
return;
}
await this.startConversation();
}
private bindEvents(): void {
this.ws.on('chat.conversation', (payload) => {
const data = payload as { conversation?: Conversation; conversation_id?: string };
const data = payload as { action?: string; conversation?: Conversation; conversationId?: string; conversation_id?: string };
const conversationID = data.conversation_id ?? data.conversationId ?? '';
if (data.conversation) {
this.mergeConversation(data.conversation);
}
if (data.conversation_id && this.activeConversation()?.id === data.conversation_id) {
this.activeConversation.set(null);
}
});
this.ws.on('chat.message', (payload) => {
const data = payload as { conversation_id: string; message: ChatMessage };
if (!data?.message) {
return;
}
if (this.activeConversation()?.id === data.conversation_id) {
this.activeConversation.update((conversation) =>
conversation
? {
...conversation,
messages: [...conversation.messages, data.message],
updated_at: data.message.created_at,
}
: conversation,
);
}
});
this.ws.on('chat.token', (payload) => {
const data = payload as { conversation_id: string; message_id: string; content: string };
if (this.activeConversation()?.id !== data.conversation_id) {
return;
}
this.activeConversation.update((conversation) => {
if (!conversation) {
return conversation;
if (data.action === 'deleted' && conversationID) {
this.removeSummary(conversationID);
if (this.activeConversation()?.id === conversationID) {
this.activeConversation.set(null);
}
const messages = conversation.messages.map((message) =>
message.id === data.message_id ? { ...message, content: `${message.content ?? ''}${data.content ?? ''}` } : message,
);
return { ...conversation, messages };
});
}
if (data.action === 'cleared' && conversationID && this.activeConversation()?.id === conversationID) {
this.activeConversation.update((conversation) => (conversation ? { ...conversation, messages: [] } : conversation));
}
});
this.ws.on('chat.message', (payload) => {
const data = payload as { conversationId?: string; conversation_id?: string; message?: ChatMessage; messageId?: string; message_id?: string; state?: string; finishReason?: string };
const conversationID = data.conversation_id ?? data.conversationId ?? '';
if (this.activeConversation()?.id !== conversationID) {
return;
}
if (data.message) {
this.upsertMessage(conversationID, data.message);
}
if (data.state === 'started') {
this.upsertMessage(conversationID, {
id: data.message_id ?? data.messageId ?? '',
role: 'assistant',
content: '',
created_at: new Date().toISOString(),
model: this.selectedModel(),
});
}
if (data.state === 'finished') {
this.patchMessage(conversationID, data.message_id ?? data.messageId ?? '', (message) => ({
...message,
finish_reason: data.finishReason,
}));
}
});
this.ws.on('chat.token', (payload) => {
const data = payload as { conversationId?: string; conversation_id?: string; messageId?: string; message_id?: string; content?: string };
const conversationID = data.conversation_id ?? data.conversationId ?? '';
const messageID = data.message_id ?? data.messageId ?? '';
this.patchMessage(conversationID, messageID, (message) => ({
...message,
content: `${message.content ?? ''}${data.content ?? ''}`,
}));
});
this.ws.on('chat.thinking.start', (payload) => {
const data = payload as { conversationId?: string; conversation_id?: string; messageId?: string; message_id?: string; startedAt?: string };
this.patchThinking(data, (thinking) => ({
...thinking,
active: true,
started_at: data.startedAt,
}));
});
this.ws.on('chat.thinking.append', (payload) => {
const data = payload as { conversationId?: string; conversation_id?: string; messageId?: string; message_id?: string; content?: string };
this.patchThinking(data, (thinking) => ({
...thinking,
content: `${thinking.content ?? ''}${data.content ?? ''}`,
}));
});
this.ws.on('chat.thinking.end', (payload) => {
const data = payload as { conversationId?: string; conversation_id?: string; messageId?: string; message_id?: string; durationMs?: number };
this.patchThinking(data, (thinking) => ({
...thinking,
active: false,
duration_ms: data.durationMs,
}));
});
this.ws.on('chat.tool.call', (payload) => {
const data = payload as { conversationId?: string; conversation_id?: string; messageId?: string; message_id?: string; call?: ToolCall };
const conversationID = data.conversation_id ?? data.conversationId ?? '';
const messageID = data.message_id ?? data.messageId ?? '';
if (!data.call) {
return;
}
this.patchMessage(conversationID, messageID, (message) => ({
...message,
tool_calls: [...(message.tool_calls ?? []), data.call!],
}));
});
this.ws.on('chat.tool.result', (payload) => {
const data = payload as { conversationId?: string; conversation_id?: string; messageId?: string; message_id?: string; result?: ToolResult };
const conversationID = data.conversation_id ?? data.conversationId ?? '';
const messageID = data.message_id ?? data.messageId ?? '';
if (!data.result) {
return;
}
this.patchMessage(conversationID, messageID, (message) => ({
...message,
tool_results: [...(message.tool_results ?? []), data.result!],
}));
});
this.ws.on('chat.image.queued', (payload) => {
const data = payload as { conversationId?: string; conversation_id?: string; attachment?: ImageAttachment };
const conversationID = data.conversation_id ?? data.conversationId ?? '';
const activeID = this.activeConversation()?.id ?? 'draft';
if (!data.attachment || conversationID !== activeID && !(conversationID === 'draft' && !this.activeConversation()?.messages.length)) {
return;
}
this.queuedAttachments.update((items) => [...items, data.attachment!]);
});
}
private mergeConversation(conversation: Conversation): void {
const summary: ConversationSummary = {
this.upsertSummary(this.toSummary(conversation));
if (this.activeConversation()?.id === conversation.id || !this.activeConversation()) {
this.activeConversation.set(conversation);
}
}
private upsertSummary(summary: ConversationSummary): void {
this.conversations.update((items) => {
const next = [summary, ...items.filter((item) => item.id !== summary.id)];
return next.sort((left, right) => Date.parse(right.updated_at) - Date.parse(left.updated_at));
});
}
private removeSummary(id: string): void {
this.conversations.update((items) => items.filter((item) => item.id !== id));
}
private upsertMessage(conversationID: string, message: ChatMessage): void {
this.activeConversation.update((conversation) => {
if (!conversation || conversation.id !== conversationID) {
return conversation;
}
const existingIndex = conversation.messages.findIndex((item) => item.id === message.id);
const messages = [...conversation.messages];
if (existingIndex >= 0) {
messages[existingIndex] = { ...messages[existingIndex], ...message };
} else {
messages.push(message);
}
return { ...conversation, messages, updated_at: message.created_at || conversation.updated_at };
});
}
private patchMessage(conversationID: string, messageID: string, update: (message: ChatMessage) => ChatMessage): void {
if (!conversationID || !messageID || this.activeConversation()?.id !== conversationID) {
return;
}
this.activeConversation.update((conversation) => {
if (!conversation) {
return conversation;
}
return {
...conversation,
messages: conversation.messages.map((message) => (message.id === messageID ? update(message) : message)),
};
});
}
private patchThinking(
payload: { conversationId?: string; conversation_id?: string; messageId?: string; message_id?: string },
update: (thinking: ThinkingState) => ThinkingState,
): void {
const conversationID = payload.conversation_id ?? payload.conversationId ?? '';
const messageID = payload.message_id ?? payload.messageId ?? '';
this.patchMessage(conversationID, messageID, (message) => ({
...message,
thinking: update(message.thinking ?? { active: false, content: '' }),
}));
}
private toSummary(conversation: Conversation): ConversationSummary {
return {
id: conversation.id,
title: conversation.title,
model: conversation.model,
created_at: conversation.created_at,
updated_at: conversation.updated_at,
message_count: conversation.messages?.length ?? conversation.message_count ?? 0,
message_count: conversation.messages?.length ?? 0,
};
this.conversations.update((items) => [summary, ...items.filter((item) => item.id !== summary.id)]);
if (this.activeConversation()?.id === conversation.id || !this.activeConversation()) {
this.activeConversation.set(conversation);
}
}
private async fileToAttachment(file: File): Promise<ImageAttachment> {
const data = await this.readFileAsDataURL(file);
const dimensions = await this.readImageDimensions(data);
return {
filename: file.name,
mime_type: file.type || 'image/png',
data: data.split(',', 2)[1] ?? data,
width: dimensions.width,
height: dimensions.height,
};
}
private readFileAsDataURL(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onerror = () => reject(reader.error);
reader.onload = () => resolve(String(reader.result ?? ''));
reader.readAsDataURL(file);
});
}
private readImageDimensions(source: string): Promise<{ width: number; height: number }> {
return new Promise((resolve) => {
const image = new Image();
image.onload = () => resolve({ width: image.width, height: image.height });
image.onerror = () => resolve({ width: 0, height: 0 });
image.src = source;
});
}
private async invoke<T>(route: string, payload?: unknown): Promise<T> {
@ -221,11 +457,23 @@ export class ChatStateService {
{ name: 'lemma', architecture: 'qwen3', quant_bits: 8, size_bytes: 3200000000, loaded: false, backend: 'ollama' },
] as T;
}
if (route === 'gui.chat.settings.load' || route === 'gui.chat.settings.save') {
if (route === 'gui.chat.settings.load' || route === 'gui.chat.settings.save' || route === 'gui.chat.settings.reset') {
return (payload ?? this.settings()) as T;
}
if (route === 'gui.chat.conversations.list') {
return [] as T;
if (route === 'gui.chat.selectModel') {
return {
...this.settings(),
default_model: (payload as { model?: string })?.model ?? this.settings().default_model,
} as T;
}
if (route === 'gui.chat.conversations.list' || route === 'gui.chat.conversations.search') {
return this.conversations() as T;
}
if (route === 'gui.chat.conversations.export') {
return '# Exported Conversation\n' as T;
}
if (route === 'gui.chat.attachImage') {
return payload as T;
}
if (route === 'gui.chat.conversations.new') {
const now = new Date().toISOString();
@ -243,23 +491,22 @@ export class ChatStateService {
const conversation = this.activeConversation() ?? ((await this.mockInvoke('gui.chat.conversations.new')) as Conversation);
const content = (payload as { content?: string })?.content ?? '';
const now = new Date().toISOString();
const response: Conversation = {
return {
...conversation,
updated_at: now,
title: conversation.title === 'New Chat' ? content.slice(0, 48) || 'New Chat' : conversation.title,
messages: [
...conversation.messages,
{ id: `user-${Date.now()}`, role: 'user', content, created_at: now, model: this.selectedModel() },
{ id: `user-${Date.now()}`, role: 'user', content, created_at: now, model: this.selectedModel(), attachments: this.queuedAttachments() },
{
id: `assistant-${Date.now() + 1}`,
role: 'assistant',
content: `Local mock response for: ${content}`,
content: `Local mock response for: ${content || 'image input'}`,
created_at: now,
model: this.selectedModel(),
},
],
};
return response as T;
} as T;
}
return {} as T;
}

40
ui/src/chat/chat.types.ts
View file

@ -1,3 +1,30 @@
export interface ThinkingState {
active: boolean;
content: string;
started_at?: string;
ended_at?: string;
duration_ms?: number;
}
export interface ToolCall {
id: string;
name: string;
arguments: Record<string, unknown>;
}
export interface ToolResult {
tool_call_id: string;
content: string;
}
export interface ImageAttachment {
filename: string;
mime_type: string;
data: string;
width: number;
height: number;
}
export interface ChatMessage {
id: string;
role: string;
@ -5,14 +32,10 @@ export interface ChatMessage {
created_at: string;
model?: string;
finish_reason?: string;
thinking?: {
active: boolean;
content: string;
duration_ms?: number;
};
tool_calls?: Array<{ id: string; name: string; arguments: Record<string, unknown> }>;
tool_results?: Array<{ tool_call_id: string; content: string }>;
attachments?: Array<{ filename: string; mime_type: string; data: string; width: number; height: number }>;
thinking?: ThinkingState;
tool_calls?: ToolCall[];
tool_results?: ToolResult[];
attachments?: ImageAttachment[];
}
export interface ConversationSummary {
@ -26,6 +49,7 @@ export interface ConversationSummary {
export interface Conversation extends ConversationSummary {
messages: ChatMessage[];
settings?: ChatSettings | null;
}
export interface ModelEntry {

88
ui/src/chat/conversation-sidebar.component.ts
View file

@ -1,29 +1,39 @@
import { CommonModule } from '@angular/common';
import { CommonModule, DatePipe } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ConversationSummary } from './chat.types';
type ConversationGroup = { label: string; items: ConversationSummary[] };
@Component({
selector: 'chat-conversation-sidebar',
standalone: true,
imports: [CommonModule, FormsModule],
imports: [CommonModule, FormsModule, DatePipe],
template: `
<aside class="sidebar">
<div class="sidebar__head">
<button type="button" class="ghost" (click)="create.emit()">New chat</button>
<input [(ngModel)]="query" (ngModelChange)="queryChange.emit($event)" placeholder="Search history" />
<input [ngModel]="query" (ngModelChange)="queryChange.emit($event)" placeholder="Search history" />
</div>
<div class="sidebar__list">
<button
*ngFor="let item of conversations"
type="button"
class="conversation"
[class.conversation--active]="item.id === activeId"
(click)="select.emit(item.id)"
>
<span class="conversation__title">{{ item.title }}</span>
<span class="conversation__meta">{{ item.model }} · {{ item.message_count }} msgs</span>
</button>
<section *ngFor="let group of groupedConversations" class="group">
<p class="group__label">{{ group.label }}</p>
<button
*ngFor="let item of group.items"
type="button"
class="conversation"
[class.conversation--active]="item.id === activeId"
(click)="select.emit(item.id)"
>
<span class="conversation__title">{{ item.title }}</span>
<span class="conversation__meta">{{ item.model }} · {{ item.updated_at | date: 'MMM d, HH:mm' }}</span>
<span class="conversation__actions" (click)="$event.stopPropagation()">
<button type="button" (click)="renameConversation(item)">Rename</button>
<button type="button" (click)="export.emit(item.id)">Export</button>
<button type="button" class="danger" (click)="removeConversation(item)">Delete</button>
</span>
</button>
</section>
</div>
</aside>
`,
@ -31,13 +41,18 @@ import { ConversationSummary } from './chat.types';
`
.sidebar { display: grid; gap: 1rem; padding: 1rem; background: rgba(9, 20, 34, 0.72); border-right: 1px solid rgba(124, 156, 191, 0.16); }
.sidebar__head { display: grid; gap: 0.75rem; }
.sidebar__list { display: grid; gap: 0.5rem; align-content: start; overflow: auto; }
.ghost, input { width: 100%; border-radius: 0.9rem; border: 1px solid rgba(124, 156, 191, 0.2); background: rgba(11, 27, 44, 0.7); color: #eaf4ff; padding: 0.8rem 0.9rem; }
.sidebar__list { display: grid; gap: 1rem; align-content: start; overflow: auto; }
.group { display: grid; gap: 0.5rem; }
.group__label { margin: 0; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; }
.ghost, input, .conversation__actions button { border-radius: 0.9rem; border: 1px solid rgba(124, 156, 191, 0.2); background: rgba(11, 27, 44, 0.7); color: #eaf4ff; padding: 0.8rem 0.9rem; }
.ghost { cursor: pointer; text-align: left; font-weight: 700; }
.conversation { display: grid; gap: 0.2rem; padding: 0.9rem; border: 0; border-radius: 1rem; background: rgba(8, 21, 35, 0.55); color: #dbeafe; text-align: left; cursor: pointer; }
.conversation { display: grid; gap: 0.35rem; padding: 0.9rem; border: 0; border-radius: 1rem; background: rgba(8, 21, 35, 0.55); color: #dbeafe; text-align: left; cursor: pointer; }
.conversation--active { background: linear-gradient(135deg, rgba(14, 116, 144, 0.55), rgba(8, 47, 73, 0.82)); box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.28); }
.conversation__title { font-weight: 700; }
.conversation__meta { color: #94a3b8; font-size: 0.8rem; }
.conversation__actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.conversation__actions button { padding: 0.35rem 0.6rem; font-size: 0.72rem; }
.danger { color: #fecaca; border-color: rgba(248, 113, 113, 0.28); }
`,
],
})
@ -48,4 +63,45 @@ export class ConversationSidebarComponent {
@Output() queryChange = new EventEmitter<string>();
@Output() select = new EventEmitter<string>();
@Output() create = new EventEmitter<void>();
@Output() rename = new EventEmitter<{ id: string; title: string }>();
@Output() delete = new EventEmitter<string>();
@Output() export = new EventEmitter<string>();
get groupedConversations(): ConversationGroup[] {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
const yesterday = today - 24 * 60 * 60 * 1000;
const lastWeek = today - 7 * 24 * 60 * 60 * 1000;
const groups = new Map<string, ConversationSummary[]>();
for (const conversation of this.conversations) {
const updatedAt = Date.parse(conversation.updated_at);
let label = 'Older';
if (updatedAt >= today) {
label = 'Today';
} else if (updatedAt >= yesterday) {
label = 'Yesterday';
} else if (updatedAt >= lastWeek) {
label = 'Previous 7 Days';
}
groups.set(label, [...(groups.get(label) ?? []), conversation]);
}
return ['Today', 'Yesterday', 'Previous 7 Days', 'Older']
.filter((label) => groups.has(label))
.map((label) => ({ label, items: groups.get(label) ?? [] }));
}
renameConversation(item: ConversationSummary): void {
const title = window.prompt('Rename conversation', item.title)?.trim();
if (title) {
this.rename.emit({ id: item.id, title });
}
}
removeConversation(item: ConversationSummary): void {
if (window.confirm(`Delete "${item.title}"?`)) {
this.delete.emit(item.id);
}
}
}

89
ui/src/chat/input-area.component.ts
View file

@ -1,41 +1,75 @@
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ImageAttachment } from './chat.types';
@Component({
selector: 'chat-input-area',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<div class="composer">
<div class="composer" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
<input #filePicker type="file" accept="image/*" multiple hidden (change)="onFileSelection($event)" />
<div class="composer__attachments" *ngIf="attachments.length">
<figure *ngFor="let attachment of attachments; let index = index" class="attachment">
<img [src]="attachmentSource(attachment)" [alt]="attachment.filename" />
<figcaption>{{ attachment.filename }}</figcaption>
<button type="button" (click)="removeAttachment.emit(index)">Remove</button>
</figure>
</div>
<textarea
#textarea
[ngModel]="value"
(ngModelChange)="valueChange.emit($event)"
(ngModelChange)="onValueChange($event)"
(keydown.enter)="submitOnEnter($event)"
(paste)="onPaste($event)"
placeholder="Ask the local model something useful"
></textarea>
<div class="composer__meta">
<span>{{ value.length }} chars</span>
<button type="button" [disabled]="disabled" (click)="submit.emit()">Send</button>
<span>{{ value.length }} chars · {{ attachments.length }} image(s)</span>
<div class="composer__actions">
<button type="button" class="ghost" (click)="filePicker.click()">Attach</button>
<button type="button" [disabled]="disabled" (click)="submit.emit()">Send</button>
</div>
</div>
</div>
`,
styles: [
`
.composer { display: grid; gap: 0.75rem; padding: 1rem; border-radius: 1.35rem; background: rgba(8, 21, 35, 0.86); border: 1px solid rgba(125, 211, 252, 0.12); }
textarea { width: 100%; min-height: 7rem; resize: vertical; border: 0; background: transparent; color: #f8fafc; font: inherit; outline: 0; }
.composer__meta { display: flex; justify-content: space-between; align-items: center; color: #94a3b8; font-size: 0.82rem; }
.composer__attachments { display: flex; gap: 0.75rem; overflow: auto; }
.attachment { min-width: 8rem; margin: 0; display: grid; gap: 0.45rem; padding: 0.6rem; border-radius: 1rem; background: rgba(2, 6, 23, 0.76); }
.attachment img { width: 100%; aspect-ratio: 1.3; object-fit: cover; border-radius: 0.8rem; }
.attachment figcaption { color: #cbd5e1; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
textarea { width: 100%; min-height: 3.5rem; max-height: 10.5rem; resize: none; border: 0; background: transparent; color: #f8fafc; font: inherit; outline: 0; line-height: 1.6; }
.composer__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #94a3b8; font-size: 0.82rem; }
.composer__actions { display: flex; gap: 0.6rem; }
button { border: 0; border-radius: 999px; padding: 0.8rem 1.2rem; background: linear-gradient(135deg, #f59e0b, #fb7185); color: #111827; font-weight: 800; cursor: pointer; }
.ghost { background: rgba(15, 23, 42, 0.8); color: #e2e8f0; border: 1px solid rgba(148, 163, 184, 0.22); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
`,
],
})
export class InputAreaComponent {
export class InputAreaComponent implements AfterViewInit {
@ViewChild('textarea') private readonly textarea?: ElementRef<HTMLTextAreaElement>;
@Input() value = '';
@Input() disabled = false;
@Input() attachments: ImageAttachment[] = [];
@Output() valueChange = new EventEmitter<string>();
@Output() attachFiles = new EventEmitter<FileList | File[]>();
@Output() removeAttachment = new EventEmitter<number>();
@Output() submit = new EventEmitter<void>();
ngAfterViewInit(): void {
this.resizeTextarea();
}
onValueChange(value: string): void {
this.valueChange.emit(value);
queueMicrotask(() => this.resizeTextarea());
}
submitOnEnter(event: Event): void {
const keyboard = event as KeyboardEvent;
if (!keyboard.shiftKey) {
@ -43,4 +77,43 @@ export class InputAreaComponent {
this.submit.emit();
}
}
onDragOver(event: DragEvent): void {
event.preventDefault();
}
onDrop(event: DragEvent): void {
event.preventDefault();
if (event.dataTransfer?.files?.length) {
this.attachFiles.emit(event.dataTransfer.files);
}
}
onPaste(event: ClipboardEvent): void {
const files = Array.from(event.clipboardData?.files ?? []);
if (files.length > 0) {
this.attachFiles.emit(files);
}
}
onFileSelection(event: Event): void {
const input = event.target as HTMLInputElement;
if (input.files?.length) {
this.attachFiles.emit(input.files);
input.value = '';
}
}
attachmentSource(attachment: ImageAttachment): string {
return `data:${attachment.mime_type};base64,${attachment.data}`;
}
private resizeTextarea(): void {
const element = this.textarea?.nativeElement;
if (!element) {
return;
}
element.style.height = 'auto';
element.style.height = `${Math.min(element.scrollHeight, 168)}px`;
}
}

82
ui/src/chat/message-list.component.ts
View file

@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common';
import { CommonModule, DatePipe } from '@angular/common';
import { Component, Input } from '@angular/core';
import { ChatMessage } from './chat.types';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ChatMessage, ImageAttachment } from './chat.types';
@Component({
selector: 'chat-message-list',
standalone: true,
imports: [CommonModule],
imports: [CommonModule, DatePipe],
template: `
<div class="thread">
<article *ngFor="let message of messages" class="bubble" [class.bubble--user]="message.role === 'user'">
@ -13,19 +14,32 @@ import { ChatMessage } from './chat.types';
<strong>{{ message.role }}</strong>
<span>{{ message.model || 'local' }}</span>
</header>
<p>{{ message.content }}</p>
<section *ngIf="message.thinking?.content" class="thinking">
<strong>Thinking</strong>
<p>{{ message.thinking?.content }}</p>
<section class="content" [innerHTML]="renderMarkdown(message.content)"></section>
<section *ngIf="message.attachments?.length" class="attachments">
<figure *ngFor="let attachment of message.attachments" class="attachment">
<img [src]="attachmentSource(attachment)" [alt]="attachment.filename" />
<figcaption>{{ attachment.filename }} · {{ attachment.width }}×{{ attachment.height }}</figcaption>
</figure>
</section>
<details *ngIf="message.thinking?.content" class="thinking">
<summary>Thinking · {{ thinkingDuration(message) }}</summary>
<p>{{ message.thinking?.content }}</p>
</details>
<section *ngIf="message.tool_calls?.length" class="tool">
<strong>Tool calls</strong>
<pre>{{ message.tool_calls | json }}</pre>
<div *ngFor="let call of message.tool_calls" class="tool__block">
<div class="tool__title">{{ call.name }}</div>
<pre>{{ call.arguments | json }}</pre>
</div>
</section>
<section *ngIf="message.tool_results?.length" class="tool">
<strong>Tool results</strong>
<pre>{{ message.tool_results | json }}</pre>
<div *ngFor="let result of message.tool_results" class="tool__block">
<div class="tool__title">{{ result.tool_call_id }}</div>
<pre>{{ result.content }}</pre>
</div>
</section>
<footer>{{ message.created_at | date: 'MMM d, HH:mm:ss' }}</footer>
</article>
</div>
`,
@ -34,13 +48,57 @@ import { ChatMessage } from './chat.types';
.thread { display: grid; gap: 1rem; align-content: start; }
.bubble { max-width: 54rem; padding: 1rem 1.1rem; border-radius: 1.25rem; background: rgba(11, 27, 44, 0.88); border: 1px solid rgba(125, 211, 252, 0.12); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
.bubble--user { margin-left: auto; background: linear-gradient(135deg, rgba(8, 47, 73, 0.95), rgba(14, 116, 144, 0.7)); }
header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; color: #7dd3fc; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }
p { margin: 0; white-space: pre-wrap; line-height: 1.6; color: #ecfeff; }
header, footer { display: flex; justify-content: space-between; gap: 1rem; color: #7dd3fc; font-size: 0.72rem; }
header { margin-bottom: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
footer { margin-top: 0.9rem; color: #94a3b8; }
.content { color: #ecfeff; line-height: 1.6; }
.attachments { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.9rem; }
.attachment { width: min(16rem, 100%); margin: 0; display: grid; gap: 0.4rem; }
.attachment img { width: 100%; border-radius: 1rem; }
.attachment figcaption { color: #cbd5e1; font-size: 0.76rem; }
.thinking, .tool { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid rgba(125, 211, 252, 0.12); color: #cbd5e1; }
pre { margin: 0.35rem 0 0; overflow: auto; background: rgba(2, 6, 23, 0.6); padding: 0.85rem; border-radius: 0.8rem; }
.tool { display: grid; gap: 0.65rem; }
.tool__block { display: grid; gap: 0.35rem; }
.tool__title { color: #f8fafc; font-weight: 700; }
pre { margin: 0; overflow: auto; background: rgba(2, 6, 23, 0.6); padding: 0.85rem; border-radius: 0.8rem; white-space: pre-wrap; }
`,
],
})
export class MessageListComponent {
@Input() messages: ChatMessage[] = [];
constructor(private readonly sanitizer: DomSanitizer) {}
attachmentSource(attachment: ImageAttachment): string {
return `data:${attachment.mime_type};base64,${attachment.data}`;
}
thinkingDuration(message: ChatMessage): string {
const duration = message.thinking?.duration_ms ?? 0;
return duration > 0 ? `${(duration / 1000).toFixed(1)}s` : 'in progress';
}
renderMarkdown(content: string): SafeHtml {
const escaped = this.escapeHTML(content ?? '');
const blocks = escaped.replace(/```([\w-]+)?\n([\s\S]*?)```/g, (_, language, code) => {
const label = language ? `<div class="code-lang">${language}</div>` : '';
return `${label}<pre><code>${code.trim()}</code></pre>`;
});
const inline = blocks
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
.replace(/\*(.+?)\*/g, '<em>$1</em>')
.replace(/`([^`]+)`/g, '<code>$1</code>')
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>')
.replace(/\n/g, '<br>');
return this.sanitizer.bypassSecurityTrustHtml(inline);
}
private escapeHTML(value: string): string {
return value
.replaceAll('&', '&amp;')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;')
.replaceAll("'", '&#39;');
}
}

4
ui/src/chat/model-selector.component.ts
View file

@ -12,7 +12,7 @@ import { ModelEntry } from './chat.types';
<span>Model</span>
<select [ngModel]="value" (ngModelChange)="valueChange.emit($event)">
<option *ngFor="let model of models" [ngValue]="model.name">
{{ model.name }} · {{ model.architecture }} · {{ model.backend }}
{{ model.loaded ? '● ' : '' }}{{ model.name }} · {{ model.architecture }} · {{ model.backend }}
</option>
</select>
</label>
@ -20,7 +20,7 @@ import { ModelEntry } from './chat.types';
styles: [
`
.selector { display: grid; gap: 0.35rem; color: #cbd5e1; font-size: 0.82rem; }
select { min-width: 16rem; border-radius: 0.8rem; border: 1px solid rgba(124, 156, 191, 0.2); background: rgba(8, 21, 35, 0.8); color: #e2e8f0; padding: 0.72rem 0.9rem; }
select { min-width: 18rem; border-radius: 0.8rem; border: 1px solid rgba(124, 156, 191, 0.2); background: rgba(8, 21, 35, 0.8); color: #e2e8f0; padding: 0.72rem 0.9rem; }
`,
],
})

34
ui/src/chat/settings-panel.component.ts
View file

@ -11,13 +11,29 @@ import { ChatSettings, ModelEntry } from './chat.types';
<section class="panel" *ngIf="open">
<header>
<strong>Inference settings</strong>
<button type="button" (click)="closed.emit()">Close</button>
<div class="actions">
<button type="button" (click)="reset.emit()">Reset</button>
<button type="button" (click)="closed.emit()">Close</button>
</div>
</header>
<label>Temperature <input type="number" step="0.1" [(ngModel)]="draft.temperature" /></label>
<label>Top P <input type="number" step="0.05" [(ngModel)]="draft.top_p" /></label>
<label>Top K <input type="number" [(ngModel)]="draft.top_k" /></label>
<label>Max tokens <input type="number" [(ngModel)]="draft.max_tokens" /></label>
<label>Context window <input type="number" [(ngModel)]="draft.context_window" /></label>
<label>
Temperature
<input type="range" min="0" max="2" step="0.1" [(ngModel)]="draft.temperature" />
<span>{{ draft.temperature | number: '1.1-1' }}</span>
</label>
<label>
Top P
<input type="range" min="0" max="1" step="0.05" [(ngModel)]="draft.top_p" />
<span>{{ draft.top_p | number: '1.2-2' }}</span>
</label>
<label>Top K <input type="number" min="0" max="200" [(ngModel)]="draft.top_k" /></label>
<label>Max tokens <input type="number" min="64" max="32768" [(ngModel)]="draft.max_tokens" /></label>
<label>
Context window
<select [(ngModel)]="draft.context_window">
<option *ngFor="let option of contextWindows" [ngValue]="option">{{ option }}</option>
</select>
</label>
<label>System prompt <textarea [(ngModel)]="draft.system_prompt"></textarea></label>
<label>
Default model
@ -31,7 +47,8 @@ import { ChatSettings, ModelEntry } from './chat.types';
styles: [
`
.panel { display: grid; gap: 0.8rem; padding: 1rem; border-radius: 1.2rem; background: rgba(10, 18, 29, 0.95); border: 1px solid rgba(244, 114, 182, 0.18); }
header { display: flex; justify-content: space-between; align-items: center; color: #f9a8d4; }
header, .actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
header { color: #f9a8d4; }
label { display: grid; gap: 0.35rem; color: #cbd5e1; font-size: 0.86rem; }
input, textarea, select, button { border-radius: 0.8rem; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.8); color: #f8fafc; padding: 0.72rem 0.85rem; }
textarea { min-height: 7rem; resize: vertical; }
@ -40,12 +57,15 @@ import { ChatSettings, ModelEntry } from './chat.types';
],
})
export class SettingsPanelComponent {
readonly contextWindows = [2048, 4096, 8192, 16384, 32768];
@Input() open = false;
@Input() models: ModelEntry[] = [];
@Input() set settings(value: ChatSettings) {
this.draft = { ...value };
}
@Output() saved = new EventEmitter<ChatSettings>();
@Output() reset = new EventEmitter<void>();
@Output() closed = new EventEmitter<void>();
draft: ChatSettings = {