This commit is contained in:
Bastian Wagner
2026-06-24 10:37:14 +02:00
parent fc61ef5ba9
commit cbf1451255
12 changed files with 608 additions and 28 deletions

View File

@@ -1,6 +1,7 @@
import {
Body,
Controller,
Get,
Post,
Req,
UnauthorizedException,
@@ -16,6 +17,17 @@ import type { AssistantChatRequest } from './assistant.types';
export class AssistantController {
constructor(private readonly assistantService: AssistantService) {}
@Get('chat/logs')
listChatLogs(@Req() request: AuthenticatedRequest) {
const userId = request.user?.sub;
if (!userId) {
throw new UnauthorizedException('Authenticated user is required.');
}
return this.assistantService.listChatLogs(userId);
}
@Post('chat')
chat(
@Req() request: AuthenticatedRequest,

View File

@@ -12,6 +12,7 @@ describe('AssistantService', () => {
const originalAgentId = process.env.MISTRAL_AGENT_ID;
let chatLogsRepository: {
create: jest.Mock;
find: jest.Mock;
save: jest.Mock;
};
let listRealtimeService: {
@@ -29,6 +30,7 @@ describe('AssistantService', () => {
global.fetch = jest.fn();
chatLogsRepository = {
create: jest.fn((input) => input),
find: jest.fn(),
save: jest.fn(async (input) => input),
};
listRealtimeService = {
@@ -605,6 +607,15 @@ describe('AssistantService', () => {
messages: [{ role: 'user', content: 'Hallo' }],
}),
).rejects.toThrow(ServiceUnavailableException);
expect(chatLogsRepository.save).toHaveBeenCalledWith(
expect.objectContaining({
userId: 'user-1',
statusCode: null,
responsePayload: null,
assistantContent: null,
errorMessage: 'Mistral API key is not configured.',
}),
);
});
it('fails clearly when the agent id is missing', async () => {
@@ -615,14 +626,62 @@ describe('AssistantService', () => {
messages: [{ role: 'user', content: 'Hallo' }],
}),
).rejects.toThrow(ServiceUnavailableException);
expect(chatLogsRepository.save).toHaveBeenCalledWith(
expect.objectContaining({
userId: 'user-1',
agentId: null,
statusCode: null,
responsePayload: null,
assistantContent: null,
errorMessage: 'Mistral agent id is not configured.',
}),
);
});
it('lists the latest chat logs for the current user', async () => {
chatLogsRepository.find.mockResolvedValue([
{
id: 'log-1',
userId: 'user-1',
provider: 'mistral',
endpoint: 'https://api.mistral.ai/v1/agents/completions',
agentId: 'agent-listify',
statusCode: 502,
durationMs: 123,
requestPayload: { messages: [] },
responsePayload: { message: 'connector failed' },
assistantContent: null,
errorMessage: 'Mistral agent request failed.',
createdAt: new Date('2026-06-24T08:00:00.000Z'),
},
]);
const logs = await service.listChatLogs('user-1');
expect(chatLogsRepository.find).toHaveBeenCalledWith({
where: { userId: 'user-1' },
order: { createdAt: 'DESC' },
take: 50,
});
expect(logs).toEqual([
{
id: 'log-1',
provider: 'mistral',
endpoint: 'https://api.mistral.ai/v1/agents/completions',
agentId: 'agent-listify',
statusCode: 502,
durationMs: 123,
requestPayload: { messages: [] },
responsePayload: { message: 'connector failed' },
assistantContent: null,
errorMessage: 'Mistral agent request failed.',
createdAt: '2026-06-24T08:00:00.000Z',
},
]);
});
});
function mockMistralResponse(
response: object,
ok = true,
status = 200,
): void {
function mockMistralResponse(response: object, ok = true, status = 200): void {
jest.mocked(global.fetch).mockResolvedValue({
ok,
status,

View File

@@ -17,12 +17,15 @@ import { AssistantChatLogEntity } from './assistant-chat-log.entity';
import {
AssistantAction,
AssistantChatMessage,
AssistantChatLog,
AssistantPageContext,
AssistantChatRequest,
AssistantChatResponse,
} from './assistant.types';
type MistralMessage = AssistantChatMessage | { role: 'system'; content: string };
type MistralMessage =
| AssistantChatMessage
| { role: 'system'; content: string };
interface NormalizedContextItem {
id: string;
@@ -122,7 +125,8 @@ export class AssistantService {
const response = await this.callMistralAgent(userId, messages, context);
const actions = this.extractActions(response);
const content =
this.extractAssistantContent(response) ?? this.createActionContent(actions);
this.extractAssistantContent(response) ??
this.createActionContent(actions);
const latestUserMessage = this.latestUserMessage(messages);
actions.forEach((action) => {
@@ -144,6 +148,21 @@ export class AssistantService {
}
if (!content) {
await this.recordChatLog({
userId,
provider: 'listify',
endpoint: 'assistant:emptyResponse',
agentId: null,
requestPayload: {
latestUserMessage: latestUserMessage?.content,
actionCount: actions.length,
},
responsePayload: { actions },
statusCode: null,
durationMs: 0,
assistantContent: null,
errorMessage: 'Mistral response was empty.',
});
throw new ServiceUnavailableException('Mistral response was empty.');
}
@@ -156,6 +175,28 @@ export class AssistantService {
};
}
async listChatLogs(userId: string): Promise<AssistantChatLog[]> {
const logs = await this.chatLogsRepository.find({
where: { userId },
order: { createdAt: 'DESC' },
take: 50,
});
return logs.slice(0, 50).map((log) => ({
id: log.id,
provider: log.provider,
endpoint: log.endpoint,
agentId: log.agentId,
statusCode: log.statusCode,
durationMs: log.durationMs,
requestPayload: log.requestPayload,
responsePayload: log.responsePayload,
assistantContent: log.assistantContent,
errorMessage: log.errorMessage,
createdAt: log.createdAt.toISOString(),
}));
}
private async tryHandleLocalListQuery(
userId: string,
messages: AssistantChatMessage[],
@@ -173,7 +214,10 @@ export class AssistantService {
const visibleLists = wantsOpenLists
? lists.filter((list) => !this.isCompletedList(list))
: lists;
const assistantContent = this.formatListsAnswer(visibleLists, wantsOpenLists);
const assistantContent = this.formatListsAnswer(
visibleLists,
wantsOpenLists,
);
await this.recordChatLog({
userId,
@@ -210,7 +254,9 @@ export class AssistantService {
}
const latestUserMessage = this.latestUserMessage(messages);
const itemTitle = this.extractItemTitleToAdd(latestUserMessage?.content ?? '');
const itemTitle = this.extractItemTitleToAdd(
latestUserMessage?.content ?? '',
);
if (!itemTitle) {
return null;
@@ -384,15 +430,6 @@ export class AssistantService {
): Promise<MistralAgentCompletionResponse> {
const apiKey = process.env.MISTRAL_API_KEY;
const agentId = process.env.MISTRAL_AGENT_ID;
if (!apiKey) {
throw new ServiceUnavailableException('Mistral API key is not configured.');
}
if (!agentId) {
throw new ServiceUnavailableException('Mistral agent id is not configured.');
}
const contextMessage = this.createContextSystemMessage(context);
const requestPayload = {
agent_id: agentId,
@@ -419,6 +456,39 @@ export class AssistantService {
type: 'text',
},
};
if (!apiKey) {
await this.recordChatLog({
userId,
agentId: agentId ?? null,
requestPayload,
responsePayload: null,
statusCode: null,
durationMs: 0,
assistantContent: null,
errorMessage: 'Mistral API key is not configured.',
});
throw new ServiceUnavailableException(
'Mistral API key is not configured.',
);
}
if (!agentId) {
await this.recordChatLog({
userId,
agentId: null,
requestPayload,
responsePayload: null,
statusCode: null,
durationMs: 0,
assistantContent: null,
errorMessage: 'Mistral agent id is not configured.',
});
throw new ServiceUnavailableException(
'Mistral agent id is not configured.',
);
}
const startedAt = Date.now();
let statusCode: number | null = null;
let responsePayload: unknown = null;
@@ -658,13 +728,17 @@ export class AssistantService {
}
private createActionContent(actions: AssistantAction[]): string | null {
const createdList = actions.find((action) => action.type === 'list.created');
const createdList = actions.find(
(action) => action.type === 'list.created',
);
if (createdList) {
return `Ich habe die Liste **${createdList.list.name}** angelegt.`;
}
const addedItem = actions.find((action) => action.type === 'list.item_added');
const addedItem = actions.find(
(action) => action.type === 'list.item_added',
);
if (addedItem) {
return `Ich habe **${addedItem.itemTitle}** zu **${addedItem.list.name}** hinzugefuegt.`;

View File

@@ -41,6 +41,20 @@ export interface AssistantChatResponse {
actions: AssistantAction[];
}
export interface AssistantChatLog {
id: string;
provider: string;
endpoint: string;
agentId?: string | null;
statusCode?: number | null;
durationMs?: number | null;
requestPayload: Record<string, unknown>;
responsePayload?: unknown;
assistantContent?: string | null;
errorMessage?: string | null;
createdAt: string;
}
export interface CreateListToolInput {
name?: string;
description?: string;

View File

@@ -0,0 +1,37 @@
import { MigrationInterface, QueryRunner } from 'typeorm';
export class CreateAssistantChatLogs1781700000000 implements MigrationInterface {
name = 'CreateAssistantChatLogs1781700000000';
public async up(queryRunner: QueryRunner): Promise<void> {
if (await queryRunner.hasTable('assistant_chat_logs')) {
return;
}
await queryRunner.query(`
CREATE TABLE \`assistant_chat_logs\` (
\`id\` varchar(36) NOT NULL,
\`userId\` varchar(36) NOT NULL,
\`provider\` varchar(120) NOT NULL,
\`endpoint\` varchar(255) NOT NULL,
\`agentId\` varchar(255) NULL,
\`statusCode\` int NULL,
\`durationMs\` int NULL,
\`requestPayload\` json NOT NULL,
\`responsePayload\` json NULL,
\`assistantContent\` text NULL,
\`errorMessage\` text NULL,
\`createdAt\` datetime(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
INDEX \`IDX_assistant_chat_logs_user_id\` (\`userId\`),
INDEX \`IDX_assistant_chat_logs_created_at\` (\`createdAt\`),
PRIMARY KEY (\`id\`)
) ENGINE=InnoDB
`);
}
public async down(queryRunner: QueryRunner): Promise<void> {
if (await queryRunner.hasTable('assistant_chat_logs')) {
await queryRunner.query('DROP TABLE `assistant_chat_logs`');
}
}
}

View File

@@ -11,7 +11,11 @@
</button>
}
<a class="brand" [routerLink]="auth.isAuthenticated() ? '/lists' : '/login'" aria-label="Listify Startseite">
<a
class="brand"
[routerLink]="auth.isAuthenticated() ? '/lists' : '/login'"
aria-label="Listify Startseite"
>
<mat-icon aria-hidden="true">checklist</mat-icon>
<span>Listify</span>
</a>
@@ -33,12 +37,7 @@
</span>
<span class="toolbar-user">{{ auth.user()?.name || auth.user()?.email }}</span>
} @else {
<a
mat-button
routerLink="/login"
routerLinkActive="active-link"
ariaCurrentWhenActive="page"
>
<a mat-button routerLink="/login" routerLinkActive="active-link" ariaCurrentWhenActive="page">
<mat-icon aria-hidden="true">login</mat-icon>
Login
</a>
@@ -95,6 +94,16 @@
<mat-icon matListItemIcon aria-hidden="true">account_circle</mat-icon>
<span matListItemTitle>Account</span>
</a>
<a
mat-list-item
routerLink="/assistant/logs"
routerLinkActive="active-nav-link"
ariaCurrentWhenActive="page"
(click)="closeSidebarOnCompact()"
>
<mat-icon matListItemIcon aria-hidden="true">manage_search</mat-icon>
<span matListItemTitle>Assistant Logs</span>
</a>
</mat-nav-list>
</nav>
</mat-sidenav>

View File

@@ -34,6 +34,14 @@ export const routes: Routes = [
{ path: 'lists/new', component: ListDetailComponent, canActivate: [authGuard] },
{ path: 'lists/:listId', component: ListDetailComponent, canActivate: [authGuard] },
{ path: 'listen', redirectTo: 'lists' },
{
path: 'assistant/logs',
loadComponent: () =>
import('./assistant/assistant-logs.component').then(
(module) => module.AssistantLogsComponent,
),
canActivate: [authGuard],
},
{ path: 'account', component: AccountComponent, canActivate: [authGuard] },
{ path: '**', redirectTo: 'login' },
];

View File

@@ -0,0 +1,96 @@
<section class="assistant-logs-page">
<header class="page-header">
<div>
<h1>Assistant Logs</h1>
<p>Neueste Chat-Requests und Provider-Antworten</p>
</div>
<button mat-stroked-button type="button" [disabled]="loading()" (click)="loadLogs()">
@if (loading()) {
<mat-progress-spinner mode="indeterminate" diameter="18" />
} @else {
<mat-icon aria-hidden="true">refresh</mat-icon>
}
Aktualisieren
</button>
</header>
@if (errorMessage()) {
<p class="error-message">
<mat-icon aria-hidden="true">error</mat-icon>
{{ errorMessage() }}
</p>
}
@if (loading() && logs().length === 0) {
<div class="loading-state">
<mat-progress-spinner mode="indeterminate" diameter="28" />
<span>Logs werden geladen</span>
</div>
} @else if (logs().length === 0) {
<mat-card class="empty-state" appearance="outlined">
<mat-card-content>
<mat-icon aria-hidden="true">chat_bubble_outline</mat-icon>
<p>Noch keine Chat-Logs vorhanden.</p>
</mat-card-content>
</mat-card>
} @else {
<div class="log-list">
@for (log of logs(); track log.id) {
<mat-card class="log-card" appearance="outlined" [class.failed]="log.errorMessage">
<mat-card-header>
<mat-card-title>
<span class="status-pill">{{ statusLabel(log) }}</span>
<span>{{ log.provider }}</span>
</mat-card-title>
<mat-card-subtitle>
{{ formatDate(log.createdAt) }}
@if (log.durationMs !== null && log.durationMs !== undefined) {
· {{ log.durationMs }} ms
}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div class="metadata-grid">
<span>Endpoint</span>
<code>{{ log.endpoint }}</code>
<span>Agent</span>
<code>{{ log.agentId || 'n/a' }}</code>
</div>
@if (log.errorMessage) {
<p class="log-error">
<mat-icon aria-hidden="true">warning</mat-icon>
{{ log.errorMessage }}
</p>
}
@if (log.assistantContent) {
<div class="assistant-content">
<span>Assistant</span>
<p>{{ log.assistantContent }}</p>
</div>
}
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Request</mat-panel-title>
</mat-expansion-panel-header>
<pre>{{ formatJson(log.requestPayload) }}</pre>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Response</mat-panel-title>
</mat-expansion-panel-header>
<pre>{{ formatJson(log.responsePayload) }}</pre>
</mat-expansion-panel>
</mat-accordion>
</mat-card-content>
</mat-card>
}
</div>
}
</section>

View File

@@ -0,0 +1,181 @@
.assistant-logs-page {
display: grid;
gap: 1rem;
padding: 1rem;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.page-header h1,
.page-header p {
margin: 0;
}
.page-header h1 {
font-size: 1.35rem;
font-weight: 650;
line-height: 1.25;
}
.page-header p {
margin-top: 0.2rem;
color: var(--mat-sys-on-surface-variant);
font-size: 0.9rem;
}
.page-header button,
.loading-state,
.error-message,
.log-error {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.page-header mat-progress-spinner {
display: inline-flex;
margin-right: 0.5rem;
}
.error-message,
.log-error {
margin: 0;
color: var(--mat-sys-error);
}
.loading-state {
justify-content: center;
padding: 2rem;
color: var(--mat-sys-on-surface-variant);
}
.empty-state {
border-radius: 8px;
}
.empty-state mat-card-content {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--mat-sys-on-surface-variant);
}
.empty-state p {
margin: 0;
}
.log-list {
display: grid;
gap: 0.85rem;
}
.log-card {
border-radius: 8px;
}
.log-card.failed {
border-color: color-mix(in srgb, var(--mat-sys-error) 52%, transparent);
}
mat-card-title {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
font-size: 1rem;
}
.status-pill {
display: inline-flex;
align-items: center;
min-height: 1.35rem;
padding: 0 0.45rem;
border-radius: 999px;
background: color-mix(in srgb, var(--mat-sys-primary) 14%, var(--mat-sys-surface));
color: var(--mat-sys-primary);
font-size: 0.75rem;
font-weight: 650;
}
.failed .status-pill {
background: color-mix(in srgb, var(--mat-sys-error) 14%, var(--mat-sys-surface));
color: var(--mat-sys-error);
}
.metadata-grid {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 0.45rem 0.75rem;
margin: 0.75rem 0;
color: var(--mat-sys-on-surface-variant);
font-size: 0.85rem;
}
.metadata-grid code {
min-width: 0;
overflow-wrap: anywhere;
color: var(--mat-sys-on-surface);
}
.assistant-content {
display: grid;
gap: 0.35rem;
margin: 0.75rem 0;
}
.assistant-content span {
color: var(--mat-sys-on-surface-variant);
font-size: 0.8rem;
font-weight: 650;
}
.assistant-content p {
margin: 0;
overflow-wrap: anywhere;
line-height: 1.45;
}
mat-accordion {
display: grid;
gap: 0.5rem;
margin-top: 0.75rem;
}
pre {
max-height: 420px;
margin: 0;
overflow: auto;
padding: 0.75rem;
border-radius: 8px;
background: color-mix(in srgb, var(--mat-sys-surface-container-high) 72%, var(--mat-sys-surface));
color: var(--mat-sys-on-surface);
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
font-size: 0.78rem;
line-height: 1.45;
}
@media (min-width: 760px) {
.assistant-logs-page {
padding: 1.5rem;
}
}
@media (max-width: 620px) {
.page-header {
align-items: stretch;
flex-direction: column;
}
.page-header button {
justify-content: center;
}
.metadata-grid {
grid-template-columns: 1fr;
}
}

View File

@@ -0,0 +1,72 @@
import { Component, inject, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { finalize } from 'rxjs';
import { getAuthErrorMessage } from '../auth/error-message';
import { AssistantChatLog } from './assistant.models';
import { AssistantService } from './assistant.service';
@Component({
selector: 'app-assistant-logs',
imports: [
MatButtonModule,
MatCardModule,
MatExpansionModule,
MatIconModule,
MatProgressSpinnerModule,
],
templateUrl: './assistant-logs.component.html',
styleUrl: './assistant-logs.component.scss',
})
export class AssistantLogsComponent {
private readonly assistantService = inject(AssistantService);
protected readonly logs = signal<AssistantChatLog[]>([]);
protected readonly loading = signal(false);
protected readonly errorMessage = signal<string | null>(null);
constructor() {
this.loadLogs();
}
protected loadLogs(): void {
this.loading.set(true);
this.errorMessage.set(null);
this.assistantService
.listChatLogs()
.pipe(finalize(() => this.loading.set(false)))
.subscribe({
next: (logs) => this.logs.set(logs),
error: (error: unknown) => {
this.errorMessage.set(getAuthErrorMessage(error));
},
});
}
protected statusLabel(log: AssistantChatLog): string {
if (log.errorMessage) {
return 'Fehler';
}
if (typeof log.statusCode === 'number') {
return `${log.statusCode}`;
}
return 'Lokal';
}
protected formatDate(value: string): string {
return new Date(value).toLocaleString('de-DE', {
dateStyle: 'medium',
timeStyle: 'medium',
});
}
protected formatJson(value: unknown): string {
return JSON.stringify(value ?? null, null, 2);
}
}

View File

@@ -41,3 +41,17 @@ export interface AssistantChatResponse {
export interface AssistantConversationMessage extends AssistantChatMessage {
actions?: AssistantAction[];
}
export interface AssistantChatLog {
id: string;
provider: string;
endpoint: string;
agentId?: string | null;
statusCode?: number | null;
durationMs?: number | null;
requestPayload: Record<string, unknown>;
responsePayload?: unknown;
assistantContent?: string | null;
errorMessage?: string | null;
createdAt: string;
}

View File

@@ -1,7 +1,7 @@
import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { Observable } from 'rxjs';
import { AssistantChatRequest, AssistantChatResponse } from './assistant.models';
import { AssistantChatLog, AssistantChatRequest, AssistantChatResponse } from './assistant.models';
@Injectable({ providedIn: 'root' })
export class AssistantService {
@@ -11,4 +11,8 @@ export class AssistantService {
chat(request: AssistantChatRequest): Observable<AssistantChatResponse> {
return this.http.post<AssistantChatResponse>(`${this.apiUrl}/chat`, request);
}
listChatLogs(): Observable<AssistantChatLog[]> {
return this.http.get<AssistantChatLog[]>(`${this.apiUrl}/chat/logs`);
}
}