mirror of https://github.com/ghostfolio/ghostfolio
Browse Source
Add new /chat route with full-page chat interface featuring: - Conversation list sidebar with delete functionality - Newest-first message ordering - Auto-scroll to latest message - Starter prompt buttons - Response details with confidence/citations/verification - Feedback system (helpful/needs work) LocalStorage persistence: - Conversations sorted by updatedAt - Max 50 conversations, 200 messages each - Active conversation tracking Frontend fixes: - Messages display newest on top (reverse chronological) - Auto-scroll to top when new messages arrive - Template ref for scroll control Related issue: Fix chat page UI/UX for natural conversation flowpull/6395/head
Max P
1 month ago
7 changed files with 1806 additions and 0 deletions
@ -0,0 +1,238 @@ |
|||
<div class="container"> |
|||
<h1 class="h3 mb-3 text-center" i18n>AI Chat</h1> |
|||
|
|||
<div class="row"> |
|||
<div class="col-lg-4 mb-3 mb-lg-0"> |
|||
<mat-card appearance="outlined" class="h-100"> |
|||
<mat-card-content> |
|||
<button |
|||
class="w-100" |
|||
color="primary" |
|||
mat-flat-button |
|||
type="button" |
|||
(click)="onNewChat()" |
|||
> |
|||
<span class="align-items-center d-inline-flex"> |
|||
<mat-icon aria-hidden="true" class="mr-1">add</mat-icon> |
|||
<span i18n>New chat</span> |
|||
</span> |
|||
</button> |
|||
|
|||
<div class="conversation-list mt-3"> |
|||
@for ( |
|||
conversation of conversations; |
|||
track trackConversationById($index, conversation) |
|||
) { |
|||
<div class="align-items-center conversation-row d-flex mb-2"> |
|||
<button |
|||
class="conversation-select flex-grow-1 text-left" |
|||
mat-stroked-button |
|||
type="button" |
|||
[class.active]="currentConversation?.id === conversation.id" |
|||
(click)="onSelectConversation(conversation.id)" |
|||
> |
|||
<div class="conversation-title text-truncate">{{ conversation.title }}</div> |
|||
<div class="conversation-meta text-muted"> |
|||
{{ conversation.updatedAt | date: 'short' }} |
|||
</div> |
|||
</button> |
|||
|
|||
<button |
|||
aria-label="Delete conversation" |
|||
class="conversation-delete ml-1" |
|||
i18n-aria-label |
|||
mat-icon-button |
|||
type="button" |
|||
(click)="onDeleteConversation($event, conversation.id)" |
|||
> |
|||
<mat-icon aria-hidden="true">delete</mat-icon> |
|||
</button> |
|||
</div> |
|||
} |
|||
</div> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
|
|||
<div class="col-lg-8"> |
|||
<mat-card appearance="outlined"> |
|||
<mat-card-content> |
|||
@if (!hasPermissionToReadAiPrompt) { |
|||
<div class="alert alert-warning mb-0" role="alert" i18n> |
|||
You need AI prompt permission to use this assistant. |
|||
</div> |
|||
} @else { |
|||
<div class="d-flex flex-wrap mb-3 prompt-list"> |
|||
@for (prompt of starterPrompts; track prompt) { |
|||
<button |
|||
class="mr-2 mb-2" |
|||
mat-stroked-button |
|||
type="button" |
|||
(click)="onSelectStarterPrompt(prompt)" |
|||
> |
|||
{{ prompt }} |
|||
</button> |
|||
} |
|||
</div> |
|||
|
|||
<mat-form-field class="w-100"> |
|||
<mat-label i18n>Ask about your portfolio</mat-label> |
|||
<textarea |
|||
aria-label="Ask about your portfolio" |
|||
i18n-aria-label |
|||
matInput |
|||
rows="3" |
|||
[(ngModel)]="query" |
|||
[disabled]="isSubmitting" |
|||
(keydown.enter)="onSubmitFromKeyboard($event)" |
|||
></textarea> |
|||
</mat-form-field> |
|||
|
|||
<div class="align-items-center d-flex mb-3"> |
|||
<button |
|||
color="primary" |
|||
mat-flat-button |
|||
type="button" |
|||
[disabled]="isSubmitting || !query?.trim()" |
|||
(click)="onSubmit()" |
|||
> |
|||
<ng-container i18n>Send</ng-container> |
|||
</button> |
|||
@if (isSubmitting) { |
|||
<mat-spinner class="ml-3" color="accent" [diameter]="20" /> |
|||
} |
|||
</div> |
|||
|
|||
@if (errorMessage) { |
|||
<div class="alert alert-danger mb-3" role="alert"> |
|||
{{ errorMessage }} |
|||
</div> |
|||
} |
|||
|
|||
<div #chatLogContainer aria-live="polite" aria-relevant="additions text" class="chat-log" role="log"> |
|||
@for (message of visibleMessages; track message.id) { |
|||
<div |
|||
class="chat-message mb-3 p-3 rounded" |
|||
[class.assistant]="message.role === 'assistant'" |
|||
[class.user]="message.role === 'user'" |
|||
> |
|||
<div class="chat-message-header mb-1 text-muted"> |
|||
<span class="role-label text-uppercase">{{ getRoleLabel(message.role) }}</span> |
|||
<span class="ml-2 timestamp">{{ |
|||
message.createdAt | date: 'shortTime' |
|||
}}</span> |
|||
|
|||
@if (message.role === 'assistant' && message.response) { |
|||
<button |
|||
aria-label="Show response details" |
|||
class="chat-details-trigger ml-2" |
|||
i18n-aria-label |
|||
mat-stroked-button |
|||
type="button" |
|||
[matMenuTriggerFor]="responseDetailsMenu" |
|||
(click)="onOpenResponseDetails(message.response)" |
|||
> |
|||
<mat-icon aria-hidden="true">info</mat-icon> |
|||
<span i18n>Info</span> |
|||
</button> |
|||
} |
|||
</div> |
|||
<div class="chat-message-content">{{ message.content }}</div> |
|||
|
|||
@if (message.feedback) { |
|||
<div class="align-items-center d-flex feedback-controls mt-2"> |
|||
<button |
|||
class="mr-2" |
|||
mat-stroked-button |
|||
type="button" |
|||
[disabled]=" |
|||
message.feedback.isSubmitting || !!message.feedback.rating |
|||
" |
|||
(click)="onRateResponse({ messageId: message.id, rating: 'up' })" |
|||
> |
|||
<ng-container i18n>Helpful</ng-container> |
|||
</button> |
|||
<button |
|||
mat-stroked-button |
|||
type="button" |
|||
[disabled]=" |
|||
message.feedback.isSubmitting || !!message.feedback.rating |
|||
" |
|||
(click)="onRateResponse({ messageId: message.id, rating: 'down' })" |
|||
> |
|||
<ng-container i18n>Needs work</ng-container> |
|||
</button> |
|||
|
|||
@if (message.feedback.isSubmitting) { |
|||
<span class="ml-2 text-muted" i18n>Saving feedback...</span> |
|||
} @else if (message.feedback.feedbackId) { |
|||
<span class="ml-2 text-muted" i18n>Feedback saved</span> |
|||
} |
|||
</div> |
|||
} |
|||
</div> |
|||
} |
|||
</div> |
|||
|
|||
<mat-menu #responseDetailsMenu="matMenu" class="no-max-width" xPosition="before"> |
|||
<div class="response-details-panel p-3" (click)="$event.stopPropagation()"> |
|||
@if (activeResponseDetails; as details) { |
|||
<div class="response-details-section"> |
|||
<strong i18n>Confidence</strong>: |
|||
{{ details.confidence.score * 100 | number: '1.0-0' }}% |
|||
({{ details.confidence.band }}) |
|||
</div> |
|||
|
|||
@if (details.citations.length > 0) { |
|||
<div class="response-details-section"> |
|||
<strong i18n>Citations</strong> |
|||
<ul class="mb-0 pl-3 response-details-list"> |
|||
@for (citation of details.citations; track $index) { |
|||
<li> |
|||
<span class="font-weight-bold">{{ citation.source }}</span> |
|||
- |
|||
{{ citation.snippet }} |
|||
</li> |
|||
} |
|||
</ul> |
|||
</div> |
|||
} |
|||
|
|||
@if (details.verification.length > 0) { |
|||
<div class="response-details-section"> |
|||
<strong i18n>Verification</strong> |
|||
<ul class="mb-0 pl-3 response-details-list"> |
|||
@for (check of details.verification; track $index) { |
|||
<li> |
|||
<span class="text-capitalize">{{ check.status }}</span> |
|||
- |
|||
{{ check.check }}: |
|||
{{ check.details }} |
|||
</li> |
|||
} |
|||
</ul> |
|||
</div> |
|||
} |
|||
|
|||
@if (details.observability) { |
|||
<div class="response-details-section"> |
|||
<strong i18n>Observability</strong>: |
|||
<span class="ml-1" |
|||
>{{ details.observability.latencyInMs }}ms, ~{{ |
|||
details.observability.tokenEstimate.total |
|||
}} |
|||
tokens</span |
|||
> |
|||
</div> |
|||
} |
|||
} @else { |
|||
<span class="text-muted" i18n>No response details available.</span> |
|||
} |
|||
</div> |
|||
</mat-menu> |
|||
} |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,161 @@ |
|||
:host { |
|||
--ai-chat-assistant-background: rgba(var(--dark-primary-text), 0.03); |
|||
--ai-chat-border-color: rgba(var(--dark-primary-text), 0.14); |
|||
--ai-chat-message-text: rgb(var(--dark-primary-text)); |
|||
--ai-chat-muted-text: rgba(var(--dark-primary-text), 0.7); |
|||
--ai-chat-selection-background: rgba(var(--palette-primary-500), 0.45); |
|||
--ai-chat-selection-text: rgb(var(--dark-primary-text)); |
|||
--ai-chat-user-background: rgba(var(--palette-primary-500), 0.1); |
|||
--ai-chat-user-border: rgba(var(--palette-primary-500), 0.3); |
|||
display: block; |
|||
} |
|||
|
|||
:host-context(.theme-dark) { |
|||
--ai-chat-assistant-background: rgba(var(--light-primary-text), 0.06); |
|||
--ai-chat-border-color: rgba(var(--light-primary-text), 0.2); |
|||
--ai-chat-message-text: rgb(var(--light-primary-text)); |
|||
--ai-chat-muted-text: rgba(var(--light-primary-text), 0.72); |
|||
--ai-chat-selection-background: rgba(var(--palette-primary-300), 0.4); |
|||
--ai-chat-selection-text: rgb(var(--light-primary-text)); |
|||
--ai-chat-user-background: rgba(var(--palette-primary-500), 0.18); |
|||
--ai-chat-user-border: rgba(var(--palette-primary-300), 0.45); |
|||
} |
|||
|
|||
.chat-log { |
|||
max-height: 36rem; |
|||
overflow-y: auto; |
|||
padding-right: 0.25rem; |
|||
} |
|||
|
|||
.chat-message { |
|||
border: 1px solid var(--ai-chat-border-color); |
|||
color: var(--ai-chat-message-text); |
|||
} |
|||
|
|||
.chat-message.assistant { |
|||
background: var(--ai-chat-assistant-background); |
|||
} |
|||
|
|||
.chat-message.user { |
|||
background: var(--ai-chat-user-background); |
|||
border-color: var(--ai-chat-user-border); |
|||
} |
|||
|
|||
.chat-message-content { |
|||
color: var(--ai-chat-message-text); |
|||
margin-top: 0.25rem; |
|||
white-space: pre-wrap; |
|||
word-break: break-word; |
|||
} |
|||
|
|||
.chat-message-content::selection, |
|||
.chat-message-header::selection, |
|||
.response-details-panel::selection, |
|||
.response-details-panel li::selection, |
|||
.response-details-panel strong::selection, |
|||
textarea::selection { |
|||
background: var(--ai-chat-selection-background); |
|||
color: var(--ai-chat-selection-text); |
|||
} |
|||
|
|||
.chat-message-header { |
|||
align-items: center; |
|||
color: var(--ai-chat-muted-text) !important; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.chat-details-trigger { |
|||
align-items: center; |
|||
color: var(--ai-chat-muted-text); |
|||
display: inline-flex; |
|||
gap: 0.2rem; |
|||
height: 1.75rem; |
|||
line-height: 1; |
|||
min-width: 0; |
|||
padding: 0 0.4rem; |
|||
} |
|||
|
|||
.chat-details-trigger mat-icon { |
|||
font-size: 0.95rem; |
|||
height: 0.95rem; |
|||
width: 0.95rem; |
|||
} |
|||
|
|||
.conversation-list { |
|||
max-height: 42rem; |
|||
overflow-y: auto; |
|||
padding-right: 0.25rem; |
|||
} |
|||
|
|||
.conversation-select { |
|||
border-color: var(--ai-chat-border-color); |
|||
min-height: 3.5rem; |
|||
} |
|||
|
|||
.conversation-select.active { |
|||
background: rgba(var(--palette-primary-500), 0.12); |
|||
border-color: var(--ai-chat-user-border); |
|||
} |
|||
|
|||
.conversation-title { |
|||
color: var(--ai-chat-message-text); |
|||
font-size: 0.95rem; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.conversation-meta { |
|||
color: var(--ai-chat-muted-text) !important; |
|||
font-size: 0.75rem; |
|||
} |
|||
|
|||
.conversation-delete { |
|||
color: var(--ai-chat-muted-text); |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.prompt-list { |
|||
gap: 0.25rem; |
|||
} |
|||
|
|||
.role-label { |
|||
letter-spacing: 0.03em; |
|||
} |
|||
|
|||
.feedback-controls { |
|||
gap: 0.25rem; |
|||
} |
|||
|
|||
.response-details-panel { |
|||
color: var(--ai-chat-message-text); |
|||
max-height: min(24rem, calc(100vh - 8rem)); |
|||
max-width: min(26rem, calc(100vw - 2rem)); |
|||
min-width: min(18rem, calc(100vw - 2rem)); |
|||
overflow-y: auto; |
|||
white-space: normal; |
|||
} |
|||
|
|||
.response-details-section { |
|||
color: var(--ai-chat-muted-text); |
|||
font-size: 0.85rem; |
|||
} |
|||
|
|||
.response-details-section + .response-details-section { |
|||
border-top: 1px solid var(--ai-chat-border-color); |
|||
margin-top: 0.75rem; |
|||
padding-top: 0.75rem; |
|||
} |
|||
|
|||
.response-details-list { |
|||
margin-top: 0.25rem; |
|||
} |
|||
|
|||
.response-details-list li + li { |
|||
margin-top: 0.25rem; |
|||
} |
|||
|
|||
@media (max-width: 991.98px) { |
|||
.conversation-list { |
|||
max-height: 16rem; |
|||
} |
|||
} |
|||
@ -0,0 +1,304 @@ |
|||
import { |
|||
AiChatConversation, |
|||
AiChatConversationsService, |
|||
AiChatMessage |
|||
} from '@ghostfolio/client/services/ai-chat-conversations.service'; |
|||
import { UserService } from '@ghostfolio/client/services/user/user.service'; |
|||
import { AiAgentChatResponse } from '@ghostfolio/common/interfaces'; |
|||
import { hasPermission, permissions } from '@ghostfolio/common/permissions'; |
|||
import { DataService } from '@ghostfolio/ui/services'; |
|||
|
|||
import { CommonModule } from '@angular/common'; |
|||
import { Component, OnDestroy, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core'; |
|||
import { FormsModule } from '@angular/forms'; |
|||
import { MatButtonModule } from '@angular/material/button'; |
|||
import { MatCardModule } from '@angular/material/card'; |
|||
import { MatFormFieldModule } from '@angular/material/form-field'; |
|||
import { MatIconModule } from '@angular/material/icon'; |
|||
import { MatInputModule } from '@angular/material/input'; |
|||
import { MatMenuModule } from '@angular/material/menu'; |
|||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; |
|||
import { Subject } from 'rxjs'; |
|||
import { finalize, takeUntil } from 'rxjs/operators'; |
|||
|
|||
@Component({ |
|||
imports: [ |
|||
CommonModule, |
|||
FormsModule, |
|||
MatButtonModule, |
|||
MatCardModule, |
|||
MatFormFieldModule, |
|||
MatIconModule, |
|||
MatInputModule, |
|||
MatMenuModule, |
|||
MatProgressSpinnerModule |
|||
], |
|||
selector: 'gf-chat-page', |
|||
styleUrls: ['./chat-page.component.scss'], |
|||
templateUrl: './chat-page.component.html' |
|||
}) |
|||
export class GfChatPageComponent implements AfterViewInit, OnDestroy, OnInit { |
|||
@ViewChild('chatLogContainer', { static: false }) |
|||
chatLogContainer: ElementRef<HTMLElement>; |
|||
public readonly assistantRoleLabel = $localize`Assistant`; |
|||
public activeResponseDetails: AiAgentChatResponse | undefined; |
|||
public conversations: AiChatConversation[] = []; |
|||
public currentConversation: AiChatConversation | undefined; |
|||
public errorMessage: string; |
|||
public hasPermissionToReadAiPrompt = false; |
|||
public isSubmitting = false; |
|||
public query = ''; |
|||
public readonly starterPrompts = [ |
|||
$localize`Give me a portfolio risk summary.`, |
|||
$localize`What are my top concentration risks right now?`, |
|||
$localize`Show me the latest market prices for my top holdings.` |
|||
]; |
|||
public readonly userRoleLabel = $localize`You`; |
|||
|
|||
private unsubscribeSubject = new Subject<void>(); |
|||
|
|||
public constructor( |
|||
private readonly aiChatConversationsService: AiChatConversationsService, |
|||
private readonly dataService: DataService, |
|||
private readonly userService: UserService |
|||
) {} |
|||
|
|||
public ngOnInit() { |
|||
this.userService.stateChanged |
|||
.pipe(takeUntil(this.unsubscribeSubject)) |
|||
.subscribe((state) => { |
|||
this.hasPermissionToReadAiPrompt = hasPermission( |
|||
state?.user?.permissions, |
|||
permissions.readAiPrompt |
|||
); |
|||
}); |
|||
|
|||
this.aiChatConversationsService |
|||
.getConversations() |
|||
.pipe(takeUntil(this.unsubscribeSubject)) |
|||
.subscribe((conversations) => { |
|||
this.conversations = conversations; |
|||
}); |
|||
|
|||
this.aiChatConversationsService |
|||
.getCurrentConversation() |
|||
.pipe(takeUntil(this.unsubscribeSubject)) |
|||
.subscribe((conversation) => { |
|||
this.currentConversation = conversation; |
|||
this.activeResponseDetails = undefined; |
|||
this.scrollToTop(); |
|||
}); |
|||
|
|||
if (this.aiChatConversationsService.getConversationsSnapshot().length === 0) { |
|||
this.aiChatConversationsService.createConversation(); |
|||
} |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
this.scrollToTop(); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.unsubscribeSubject.next(); |
|||
this.unsubscribeSubject.complete(); |
|||
} |
|||
|
|||
private scrollToTop() { |
|||
if (this.chatLogContainer) { |
|||
this.chatLogContainer.nativeElement.scrollTop = 0; |
|||
} |
|||
} |
|||
|
|||
public get visibleMessages() { |
|||
const messages = this.currentConversation?.messages ?? []; |
|||
return [...messages].reverse(); |
|||
} |
|||
|
|||
public getRoleLabel(role: AiChatMessage['role']) { |
|||
return role === 'assistant' ? this.assistantRoleLabel : this.userRoleLabel; |
|||
} |
|||
|
|||
public onDeleteConversation(event: Event, conversationId: string) { |
|||
event.stopPropagation(); |
|||
|
|||
this.aiChatConversationsService.deleteConversation(conversationId); |
|||
|
|||
if (this.aiChatConversationsService.getConversationsSnapshot().length === 0) { |
|||
this.aiChatConversationsService.createConversation(); |
|||
} |
|||
} |
|||
|
|||
public onNewChat() { |
|||
this.errorMessage = undefined; |
|||
this.query = ''; |
|||
this.aiChatConversationsService.createConversation(); |
|||
} |
|||
|
|||
public onOpenResponseDetails(response?: AiAgentChatResponse) { |
|||
this.activeResponseDetails = response; |
|||
} |
|||
|
|||
public onRateResponse({ |
|||
messageId, |
|||
rating |
|||
}: { |
|||
messageId: number; |
|||
rating: 'down' | 'up'; |
|||
}) { |
|||
const conversation = this.currentConversation; |
|||
|
|||
if (!conversation) { |
|||
return; |
|||
} |
|||
|
|||
const message = conversation.messages.find(({ id }) => { |
|||
return id === messageId; |
|||
}); |
|||
|
|||
if (!message?.response?.memory?.sessionId) { |
|||
return; |
|||
} |
|||
|
|||
if (message.feedback?.isSubmitting || message.feedback?.rating) { |
|||
return; |
|||
} |
|||
|
|||
this.aiChatConversationsService.updateMessage({ |
|||
conversationId: conversation.id, |
|||
messageId, |
|||
updater: (currentMessage) => { |
|||
return { |
|||
...currentMessage, |
|||
feedback: { |
|||
...currentMessage.feedback, |
|||
isSubmitting: true |
|||
} |
|||
}; |
|||
} |
|||
}); |
|||
|
|||
this.dataService |
|||
.postAiChatFeedback({ |
|||
rating, |
|||
sessionId: message.response.memory.sessionId |
|||
}) |
|||
.pipe(takeUntil(this.unsubscribeSubject)) |
|||
.subscribe({ |
|||
next: ({ feedbackId }) => { |
|||
this.aiChatConversationsService.updateMessage({ |
|||
conversationId: conversation.id, |
|||
messageId, |
|||
updater: (currentMessage) => { |
|||
return { |
|||
...currentMessage, |
|||
feedback: { |
|||
feedbackId, |
|||
isSubmitting: false, |
|||
rating |
|||
} |
|||
}; |
|||
} |
|||
}); |
|||
}, |
|||
error: () => { |
|||
this.aiChatConversationsService.updateMessage({ |
|||
conversationId: conversation.id, |
|||
messageId, |
|||
updater: (currentMessage) => { |
|||
return { |
|||
...currentMessage, |
|||
feedback: { |
|||
...currentMessage.feedback, |
|||
isSubmitting: false |
|||
} |
|||
}; |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
public onSelectConversation(conversationId: string) { |
|||
this.errorMessage = undefined; |
|||
this.query = ''; |
|||
this.aiChatConversationsService.selectConversation(conversationId); |
|||
} |
|||
|
|||
public onSelectStarterPrompt(prompt: string) { |
|||
this.query = prompt; |
|||
} |
|||
|
|||
public onSubmit() { |
|||
const normalizedQuery = this.query?.trim(); |
|||
|
|||
if ( |
|||
!this.hasPermissionToReadAiPrompt || |
|||
this.isSubmitting || |
|||
!normalizedQuery |
|||
) { |
|||
return; |
|||
} |
|||
|
|||
const conversation = |
|||
this.currentConversation ?? this.aiChatConversationsService.createConversation(); |
|||
|
|||
this.aiChatConversationsService.appendUserMessage({ |
|||
content: normalizedQuery, |
|||
conversationId: conversation.id |
|||
}); |
|||
|
|||
this.errorMessage = undefined; |
|||
this.isSubmitting = true; |
|||
this.query = ''; |
|||
|
|||
this.dataService |
|||
.postAiChat({ |
|||
query: normalizedQuery, |
|||
sessionId: conversation.sessionId |
|||
}) |
|||
.pipe( |
|||
finalize(() => { |
|||
this.isSubmitting = false; |
|||
}), |
|||
takeUntil(this.unsubscribeSubject) |
|||
) |
|||
.subscribe({ |
|||
next: (response) => { |
|||
this.aiChatConversationsService.setConversationSessionId({ |
|||
conversationId: conversation.id, |
|||
sessionId: response.memory.sessionId |
|||
}); |
|||
this.aiChatConversationsService.appendAssistantMessage({ |
|||
content: response.answer, |
|||
conversationId: conversation.id, |
|||
feedback: { |
|||
isSubmitting: false |
|||
}, |
|||
response |
|||
}); |
|||
}, |
|||
error: () => { |
|||
this.errorMessage = $localize`AI request failed. Check your model quota and permissions.`; |
|||
|
|||
this.aiChatConversationsService.appendAssistantMessage({ |
|||
content: $localize`Request failed. Please retry.`, |
|||
conversationId: conversation.id |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
public onSubmitFromKeyboard(event: KeyboardEvent) { |
|||
if (!event.shiftKey) { |
|||
this.onSubmit(); |
|||
event.preventDefault(); |
|||
} |
|||
} |
|||
|
|||
public trackConversationById( |
|||
_index: number, |
|||
conversation: AiChatConversation |
|||
) { |
|||
return conversation.id; |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; |
|||
import { internalRoutes } from '@ghostfolio/common/routes/routes'; |
|||
|
|||
import { Routes } from '@angular/router'; |
|||
|
|||
import { GfChatPageComponent } from './chat-page.component'; |
|||
|
|||
export const routes: Routes = [ |
|||
{ |
|||
canActivate: [AuthGuard], |
|||
component: GfChatPageComponent, |
|||
path: '', |
|||
title: internalRoutes.chat.title |
|||
} |
|||
]; |
|||
@ -0,0 +1,96 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
import { AiChatConversationsService } from './ai-chat-conversations.service'; |
|||
|
|||
describe('AiChatConversationsService', () => { |
|||
let service: AiChatConversationsService; |
|||
|
|||
beforeEach(() => { |
|||
localStorage.clear(); |
|||
|
|||
TestBed.configureTestingModule({}); |
|||
service = TestBed.inject(AiChatConversationsService); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
localStorage.clear(); |
|||
}); |
|||
|
|||
it('creates and selects a new conversation', () => { |
|||
const createdConversation = service.createConversation(); |
|||
|
|||
expect(service.getConversationsSnapshot()).toHaveLength(1); |
|||
expect(service.getCurrentConversationSnapshot()?.id).toBe(createdConversation.id); |
|||
expect(createdConversation.title).toBe('New Chat'); |
|||
}); |
|||
|
|||
it('derives title from first user message and falls back for generic prompts', () => { |
|||
const detailedConversation = service.createConversation(); |
|||
service.appendUserMessage({ |
|||
content: 'Help me rebalance my holdings for lower concentration risk.', |
|||
conversationId: detailedConversation.id |
|||
}); |
|||
|
|||
const updatedDetailedConversation = service.getCurrentConversationSnapshot(); |
|||
|
|||
expect(updatedDetailedConversation?.title).toBe( |
|||
'Help me rebalance my holdings for lower concentr...' |
|||
); |
|||
|
|||
const genericConversation = service.createConversation(); |
|||
service.appendUserMessage({ |
|||
content: 'hi', |
|||
conversationId: genericConversation.id |
|||
}); |
|||
|
|||
expect(service.getCurrentConversationSnapshot()?.title).toBe('New Chat'); |
|||
}); |
|||
|
|||
it('starts new chats with fresh context and keeps per-conversation session memory', () => { |
|||
const firstConversation = service.createConversation(); |
|||
service.setConversationSessionId({ |
|||
conversationId: firstConversation.id, |
|||
sessionId: 'session-1' |
|||
}); |
|||
|
|||
const secondConversation = service.createConversation(); |
|||
|
|||
expect(service.getCurrentConversationSnapshot()?.id).toBe(secondConversation.id); |
|||
expect(service.getCurrentConversationSnapshot()?.sessionId).toBeUndefined(); |
|||
|
|||
service.selectConversation(firstConversation.id); |
|||
|
|||
expect(service.getCurrentConversationSnapshot()?.sessionId).toBe('session-1'); |
|||
}); |
|||
|
|||
it('restores conversations and active selection from local storage', () => { |
|||
const firstConversation = service.createConversation(); |
|||
service.appendUserMessage({ |
|||
content: 'first chat message', |
|||
conversationId: firstConversation.id |
|||
}); |
|||
service.setConversationSessionId({ |
|||
conversationId: firstConversation.id, |
|||
sessionId: 'session-first' |
|||
}); |
|||
|
|||
const secondConversation = service.createConversation(); |
|||
service.appendUserMessage({ |
|||
content: 'second chat message', |
|||
conversationId: secondConversation.id |
|||
}); |
|||
|
|||
const restoredService = new AiChatConversationsService(); |
|||
|
|||
expect(restoredService.getConversationsSnapshot()).toHaveLength(2); |
|||
expect(restoredService.getCurrentConversationSnapshot()?.id).toBe( |
|||
secondConversation.id |
|||
); |
|||
|
|||
restoredService.selectConversation(firstConversation.id); |
|||
|
|||
expect(restoredService.getCurrentConversationSnapshot()?.sessionId).toBe( |
|||
'session-first' |
|||
); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,590 @@ |
|||
import { AiAgentChatResponse } from '@ghostfolio/common/interfaces'; |
|||
|
|||
import { Injectable } from '@angular/core'; |
|||
import { BehaviorSubject, combineLatest } from 'rxjs'; |
|||
import { map } from 'rxjs/operators'; |
|||
|
|||
export interface AiChatFeedbackState { |
|||
feedbackId?: string; |
|||
isSubmitting: boolean; |
|||
rating?: 'down' | 'up'; |
|||
} |
|||
|
|||
export interface AiChatMessage { |
|||
content: string; |
|||
createdAt: Date; |
|||
feedback?: AiChatFeedbackState; |
|||
id: number; |
|||
response?: AiAgentChatResponse; |
|||
role: 'assistant' | 'user'; |
|||
} |
|||
|
|||
export interface AiChatConversation { |
|||
createdAt: Date; |
|||
id: string; |
|||
messages: AiChatMessage[]; |
|||
nextMessageId: number; |
|||
sessionId?: string; |
|||
title: string; |
|||
updatedAt: Date; |
|||
} |
|||
|
|||
type StoredAiChatMessage = Omit<AiChatMessage, 'createdAt'> & { |
|||
createdAt: string; |
|||
}; |
|||
|
|||
type StoredAiChatConversation = Omit< |
|||
AiChatConversation, |
|||
'createdAt' | 'messages' | 'updatedAt' |
|||
> & { |
|||
createdAt: string; |
|||
messages: StoredAiChatMessage[]; |
|||
updatedAt: string; |
|||
}; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class AiChatConversationsService { |
|||
private readonly STORAGE_KEY_ACTIVE_CONVERSATION_ID = |
|||
'gf_ai_chat_active_conversation_id_v1'; |
|||
private readonly STORAGE_KEY_CONVERSATIONS = 'gf_ai_chat_conversations_v1'; |
|||
private readonly DEFAULT_CONVERSATION_TITLE = 'New Chat'; |
|||
private readonly GENERIC_FIRST_MESSAGE_PATTERN = |
|||
/^(hi|hello|hey|yo|hola|new chat|start)$/i; |
|||
private readonly MAX_STORED_CONVERSATIONS = 50; |
|||
private readonly MAX_STORED_MESSAGES = 200; |
|||
|
|||
private activeConversationIdSubject = new BehaviorSubject<string | undefined>( |
|||
undefined |
|||
); |
|||
private conversationsSubject = new BehaviorSubject<AiChatConversation[]>([]); |
|||
|
|||
public constructor() { |
|||
this.restoreState(); |
|||
} |
|||
|
|||
public appendAssistantMessage({ |
|||
content, |
|||
conversationId, |
|||
feedback, |
|||
response |
|||
}: { |
|||
content: string; |
|||
conversationId: string; |
|||
feedback?: AiChatFeedbackState; |
|||
response?: AiAgentChatResponse; |
|||
}) { |
|||
return this.appendMessage({ |
|||
content, |
|||
conversationId, |
|||
feedback, |
|||
response, |
|||
role: 'assistant' |
|||
}); |
|||
} |
|||
|
|||
public appendUserMessage({ |
|||
content, |
|||
conversationId |
|||
}: { |
|||
content: string; |
|||
conversationId: string; |
|||
}) { |
|||
return this.appendMessage({ |
|||
content, |
|||
conversationId, |
|||
role: 'user' |
|||
}); |
|||
} |
|||
|
|||
public createConversation({ |
|||
select = true, |
|||
title |
|||
}: { |
|||
select?: boolean; |
|||
title?: string; |
|||
} = {}): AiChatConversation { |
|||
const now = new Date(); |
|||
const conversation: AiChatConversation = { |
|||
createdAt: now, |
|||
id: this.getConversationId(), |
|||
messages: [], |
|||
nextMessageId: 0, |
|||
title: title?.trim() || this.DEFAULT_CONVERSATION_TITLE, |
|||
updatedAt: now |
|||
}; |
|||
|
|||
const conversations = this.conversationsSubject.getValue(); |
|||
this.setState({ |
|||
activeConversationId: |
|||
select || !this.activeConversationIdSubject.getValue() |
|||
? conversation.id |
|||
: this.activeConversationIdSubject.getValue(), |
|||
conversations: [conversation, ...conversations] |
|||
}); |
|||
|
|||
return conversation; |
|||
} |
|||
|
|||
public deleteConversation(id: string) { |
|||
const conversations = this.conversationsSubject |
|||
.getValue() |
|||
.filter((conversation) => { |
|||
return conversation.id !== id; |
|||
}); |
|||
|
|||
const activeConversationId = this.activeConversationIdSubject.getValue(); |
|||
|
|||
this.setState({ |
|||
activeConversationId: |
|||
activeConversationId === id ? conversations[0]?.id : activeConversationId, |
|||
conversations |
|||
}); |
|||
} |
|||
|
|||
public getActiveConversationId() { |
|||
return this.activeConversationIdSubject.asObservable(); |
|||
} |
|||
|
|||
public getConversations() { |
|||
return this.conversationsSubject.asObservable(); |
|||
} |
|||
|
|||
public getConversationsSnapshot() { |
|||
return this.conversationsSubject.getValue(); |
|||
} |
|||
|
|||
public getCurrentConversation() { |
|||
return combineLatest([ |
|||
this.conversationsSubject, |
|||
this.activeConversationIdSubject |
|||
]).pipe( |
|||
map(([conversations, activeConversationId]) => { |
|||
return conversations.find(({ id }) => { |
|||
return id === activeConversationId; |
|||
}); |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public getCurrentConversationSnapshot() { |
|||
const activeConversationId = this.activeConversationIdSubject.getValue(); |
|||
|
|||
return this.conversationsSubject.getValue().find(({ id }) => { |
|||
return id === activeConversationId; |
|||
}); |
|||
} |
|||
|
|||
public renameConversation({ id, title }: { id: string; title: string }) { |
|||
return this.updateConversation(id, (conversation) => { |
|||
return { |
|||
...conversation, |
|||
title: title.trim() || this.DEFAULT_CONVERSATION_TITLE, |
|||
updatedAt: new Date() |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
public selectConversation(id: string) { |
|||
const hasConversation = this.conversationsSubject.getValue().some((conversation) => { |
|||
return conversation.id === id; |
|||
}); |
|||
|
|||
if (!hasConversation) { |
|||
return false; |
|||
} |
|||
|
|||
this.setState({ |
|||
activeConversationId: id, |
|||
conversations: this.conversationsSubject.getValue() |
|||
}); |
|||
|
|||
return true; |
|||
} |
|||
|
|||
public setConversationSessionId({ |
|||
conversationId, |
|||
sessionId |
|||
}: { |
|||
conversationId: string; |
|||
sessionId: string; |
|||
}) { |
|||
return this.updateConversation(conversationId, (conversation) => { |
|||
return { |
|||
...conversation, |
|||
sessionId, |
|||
updatedAt: new Date() |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
public updateMessage({ |
|||
conversationId, |
|||
messageId, |
|||
updater |
|||
}: { |
|||
conversationId: string; |
|||
messageId: number; |
|||
updater: (message: AiChatMessage) => AiChatMessage; |
|||
}) { |
|||
return this.updateConversation(conversationId, (conversation) => { |
|||
const messageIndex = conversation.messages.findIndex(({ id }) => { |
|||
return id === messageId; |
|||
}); |
|||
|
|||
if (messageIndex < 0) { |
|||
return conversation; |
|||
} |
|||
|
|||
const updatedMessages = conversation.messages.map((message, index) => { |
|||
return index === messageIndex ? updater(message) : message; |
|||
}); |
|||
|
|||
return { |
|||
...conversation, |
|||
messages: updatedMessages |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
private appendMessage({ |
|||
content, |
|||
conversationId, |
|||
feedback, |
|||
response, |
|||
role |
|||
}: { |
|||
content: string; |
|||
conversationId: string; |
|||
feedback?: AiChatFeedbackState; |
|||
response?: AiAgentChatResponse; |
|||
role: AiChatMessage['role']; |
|||
}) { |
|||
let appendedMessage: AiChatMessage | undefined; |
|||
|
|||
this.updateConversation(conversationId, (conversation) => { |
|||
const now = new Date(); |
|||
appendedMessage = { |
|||
content, |
|||
createdAt: now, |
|||
feedback, |
|||
id: conversation.nextMessageId, |
|||
response, |
|||
role |
|||
}; |
|||
|
|||
const hasExistingUserMessage = conversation.messages.some((message) => { |
|||
return message.role === 'user'; |
|||
}); |
|||
|
|||
return { |
|||
...conversation, |
|||
messages: [...conversation.messages, appendedMessage].slice( |
|||
-this.MAX_STORED_MESSAGES |
|||
), |
|||
nextMessageId: conversation.nextMessageId + 1, |
|||
title: |
|||
role === 'user' && !hasExistingUserMessage |
|||
? this.getConversationTitleFromFirstMessage(content) |
|||
: conversation.title, |
|||
updatedAt: now |
|||
}; |
|||
}); |
|||
|
|||
return appendedMessage; |
|||
} |
|||
|
|||
private getConversationId() { |
|||
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') { |
|||
return crypto.randomUUID(); |
|||
} |
|||
|
|||
return `conversation-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`; |
|||
} |
|||
|
|||
private getConversationTitleFromFirstMessage(content: string) { |
|||
const normalized = this.stripMarkdown(content) |
|||
.replace(/\s+/g, ' ') |
|||
.trim(); |
|||
|
|||
if ( |
|||
normalized.length < 10 || |
|||
this.GENERIC_FIRST_MESSAGE_PATTERN.test(normalized) || |
|||
this.isEmojiOnly(normalized) |
|||
) { |
|||
return this.DEFAULT_CONVERSATION_TITLE; |
|||
} |
|||
|
|||
if (normalized.length > 48) { |
|||
return `${normalized.slice(0, 48).trimEnd()}...`; |
|||
} |
|||
|
|||
return normalized; |
|||
} |
|||
|
|||
private getStorage() { |
|||
try { |
|||
return globalThis.localStorage; |
|||
} catch { |
|||
return undefined; |
|||
} |
|||
} |
|||
|
|||
private isEmojiOnly(content: string) { |
|||
return /^\p{Emoji}+$/u.test(content.replace(/\s+/g, '')); |
|||
} |
|||
|
|||
private persistState() { |
|||
const storage = this.getStorage(); |
|||
|
|||
if (!storage) { |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
storage.setItem( |
|||
this.STORAGE_KEY_CONVERSATIONS, |
|||
JSON.stringify( |
|||
this.conversationsSubject.getValue().map((conversation) => { |
|||
return this.toStoredConversation(conversation); |
|||
}) |
|||
) |
|||
); |
|||
|
|||
const activeConversationId = this.activeConversationIdSubject.getValue(); |
|||
|
|||
if (activeConversationId) { |
|||
storage.setItem(this.STORAGE_KEY_ACTIVE_CONVERSATION_ID, activeConversationId); |
|||
} else { |
|||
storage.removeItem(this.STORAGE_KEY_ACTIVE_CONVERSATION_ID); |
|||
} |
|||
} catch { |
|||
// Keep chat usable when browser storage is unavailable or full.
|
|||
} |
|||
} |
|||
|
|||
private restoreState() { |
|||
const storage = this.getStorage(); |
|||
|
|||
if (!storage) { |
|||
return; |
|||
} |
|||
|
|||
const rawConversations = storage.getItem(this.STORAGE_KEY_CONVERSATIONS); |
|||
|
|||
if (!rawConversations) { |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
const parsed = JSON.parse(rawConversations) as unknown; |
|||
|
|||
if (!Array.isArray(parsed)) { |
|||
return; |
|||
} |
|||
|
|||
const conversations = parsed |
|||
.map((conversation) => { |
|||
return this.toConversation(conversation); |
|||
}) |
|||
.filter((conversation): conversation is AiChatConversation => { |
|||
return Boolean(conversation); |
|||
}); |
|||
|
|||
const sortedConversations = this.sortConversations(conversations).slice( |
|||
0, |
|||
this.MAX_STORED_CONVERSATIONS |
|||
); |
|||
|
|||
const activeConversationId = storage.getItem( |
|||
this.STORAGE_KEY_ACTIVE_CONVERSATION_ID |
|||
); |
|||
const hasActiveConversation = sortedConversations.some((conversation) => { |
|||
return conversation.id === activeConversationId; |
|||
}); |
|||
|
|||
this.conversationsSubject.next(sortedConversations); |
|||
this.activeConversationIdSubject.next( |
|||
hasActiveConversation ? activeConversationId : sortedConversations[0]?.id |
|||
); |
|||
} catch { |
|||
storage.removeItem(this.STORAGE_KEY_ACTIVE_CONVERSATION_ID); |
|||
storage.removeItem(this.STORAGE_KEY_CONVERSATIONS); |
|||
} |
|||
} |
|||
|
|||
private setState({ |
|||
activeConversationId, |
|||
conversations |
|||
}: { |
|||
activeConversationId?: string; |
|||
conversations: AiChatConversation[]; |
|||
}) { |
|||
const sortedConversations = this.sortConversations(conversations).slice( |
|||
0, |
|||
this.MAX_STORED_CONVERSATIONS |
|||
); |
|||
|
|||
const hasActiveConversation = sortedConversations.some((conversation) => { |
|||
return conversation.id === activeConversationId; |
|||
}); |
|||
|
|||
this.conversationsSubject.next(sortedConversations); |
|||
this.activeConversationIdSubject.next( |
|||
hasActiveConversation ? activeConversationId : sortedConversations[0]?.id |
|||
); |
|||
this.persistState(); |
|||
} |
|||
|
|||
private sortConversations(conversations: AiChatConversation[]) { |
|||
return [...conversations].sort((a, b) => { |
|||
return b.updatedAt.getTime() - a.updatedAt.getTime(); |
|||
}); |
|||
} |
|||
|
|||
private stripMarkdown(content: string) { |
|||
return content |
|||
.replace(/```[\s\S]*?```/g, ' ') |
|||
.replace(/`([^`]*)`/g, '$1') |
|||
.replace(/(\[|\]|_|#|>|~|\*)/g, ' ') |
|||
.trim(); |
|||
} |
|||
|
|||
private toConversation( |
|||
conversation: unknown |
|||
): AiChatConversation | undefined { |
|||
if (!conversation || typeof conversation !== 'object') { |
|||
return undefined; |
|||
} |
|||
|
|||
const storedConversation = conversation as Partial<StoredAiChatConversation>; |
|||
|
|||
if ( |
|||
typeof storedConversation.id !== 'string' || |
|||
typeof storedConversation.title !== 'string' || |
|||
typeof storedConversation.createdAt !== 'string' || |
|||
typeof storedConversation.updatedAt !== 'string' || |
|||
!Array.isArray(storedConversation.messages) |
|||
) { |
|||
return undefined; |
|||
} |
|||
|
|||
const createdAt = new Date(storedConversation.createdAt); |
|||
const updatedAt = new Date(storedConversation.updatedAt); |
|||
|
|||
if ( |
|||
Number.isNaN(createdAt.getTime()) || |
|||
Number.isNaN(updatedAt.getTime()) || |
|||
(storedConversation.sessionId && |
|||
typeof storedConversation.sessionId !== 'string') |
|||
) { |
|||
return undefined; |
|||
} |
|||
|
|||
const messages = storedConversation.messages |
|||
.map((message) => { |
|||
return this.toMessage(message); |
|||
}) |
|||
.filter((message): message is AiChatMessage => { |
|||
return Boolean(message); |
|||
}) |
|||
.slice(-this.MAX_STORED_MESSAGES); |
|||
|
|||
const nextMessageId = |
|||
Math.max( |
|||
typeof storedConversation.nextMessageId === 'number' |
|||
? storedConversation.nextMessageId |
|||
: -1, |
|||
messages.reduce((maxId, message) => { |
|||
return Math.max(maxId, message.id); |
|||
}, -1) + 1 |
|||
) || 0; |
|||
|
|||
return { |
|||
createdAt, |
|||
id: storedConversation.id, |
|||
messages, |
|||
nextMessageId, |
|||
sessionId: storedConversation.sessionId?.trim() || undefined, |
|||
title: storedConversation.title.trim() || this.DEFAULT_CONVERSATION_TITLE, |
|||
updatedAt |
|||
}; |
|||
} |
|||
|
|||
private toMessage(message: unknown): AiChatMessage | undefined { |
|||
if (!message || typeof message !== 'object') { |
|||
return undefined; |
|||
} |
|||
|
|||
const storedMessage = message as Partial<StoredAiChatMessage>; |
|||
|
|||
if ( |
|||
typeof storedMessage.content !== 'string' || |
|||
typeof storedMessage.id !== 'number' || |
|||
typeof storedMessage.createdAt !== 'string' || |
|||
(storedMessage.role !== 'assistant' && storedMessage.role !== 'user') |
|||
) { |
|||
return undefined; |
|||
} |
|||
|
|||
const createdAt = new Date(storedMessage.createdAt); |
|||
|
|||
if (Number.isNaN(createdAt.getTime())) { |
|||
return undefined; |
|||
} |
|||
|
|||
return { |
|||
content: storedMessage.content, |
|||
createdAt, |
|||
feedback: storedMessage.feedback, |
|||
id: storedMessage.id, |
|||
response: storedMessage.response, |
|||
role: storedMessage.role |
|||
}; |
|||
} |
|||
|
|||
private toStoredConversation( |
|||
conversation: AiChatConversation |
|||
): StoredAiChatConversation { |
|||
return { |
|||
...conversation, |
|||
createdAt: conversation.createdAt.toISOString(), |
|||
messages: conversation.messages.map((message) => { |
|||
return { |
|||
...message, |
|||
createdAt: message.createdAt.toISOString() |
|||
}; |
|||
}), |
|||
updatedAt: conversation.updatedAt.toISOString() |
|||
}; |
|||
} |
|||
|
|||
private updateConversation( |
|||
id: string, |
|||
updater: (conversation: AiChatConversation) => AiChatConversation |
|||
) { |
|||
let hasUpdatedConversation = false; |
|||
|
|||
const conversations = this.conversationsSubject.getValue().map((conversation) => { |
|||
if (conversation.id !== id) { |
|||
return conversation; |
|||
} |
|||
|
|||
hasUpdatedConversation = true; |
|||
|
|||
return updater(conversation); |
|||
}); |
|||
|
|||
if (!hasUpdatedConversation) { |
|||
return false; |
|||
} |
|||
|
|||
this.setState({ |
|||
activeConversationId: this.activeConversationIdSubject.getValue(), |
|||
conversations |
|||
}); |
|||
|
|||
return true; |
|||
} |
|||
} |
|||
@ -0,0 +1,402 @@ |
|||
# Chat Page UI/UX Fixes - Implementation Plan |
|||
|
|||
## Problem Statement |
|||
|
|||
The newly implemented dedicated chat page (`/chat`) has two critical UX issues that make it feel unnatural and hard to use: |
|||
|
|||
### Issue 1: Message Ordering |
|||
**Current behavior:** Messages appear with oldest on top, newest on bottom (standard chat log order). |
|||
**Expected behavior:** Newest messages should appear on top, oldest on bottom (reverse chronological). |
|||
**Impact:** Users have to scroll to see the latest response, which is the opposite of what they expect in a conversation view. |
|||
|
|||
### Issue 2: Robotic System Prompts |
|||
**Current behavior:** Generic queries like "hi", "hello", or "remember my name is Max" trigger canned, robotic responses like: |
|||
``` |
|||
I am Ghostfolio AI. I can help with portfolio analysis, concentration risk, market prices, diversification options, and stress scenarios. |
|||
Try one of these: |
|||
- "Show my top holdings" |
|||
- "What is my concentration risk?" |
|||
- "Help me diversify with actionable options" |
|||
``` |
|||
|
|||
**Expected behavior:** Natural, conversational responses that acknowledge the user's input in a friendly way. For example: |
|||
- User: "remember my name is Max" → Assistant: "Got it, Max! I'll remember that. What would you like to know about your portfolio?" |
|||
- User: "hi" → Assistant: "Hello! I'm here to help with your portfolio. What's on your mind today?" |
|||
|
|||
**Impact:** The current responses feel impersonal and automated, breaking the conversational flow and making users feel like they're interacting with a script rather than an assistant. |
|||
|
|||
## Root Cause Analysis |
|||
|
|||
### Message Ordering |
|||
|
|||
**Location:** `apps/client/src/app/pages/chat/chat-page.component.ts:99-101` |
|||
|
|||
```typescript |
|||
public get visibleMessages() { |
|||
return [...(this.currentConversation?.messages ?? [])].reverse(); |
|||
} |
|||
``` |
|||
|
|||
The code already reverses messages, but this is being applied to the message array **before** it's displayed. The issue is that `.reverse()` reverses the array in place and returns the same array reference, which can cause issues with Angular's change detection. Additionally, the CSS or layout may be positioning messages incorrectly. |
|||
|
|||
**Verification needed:** |
|||
1. Confirm the actual order of messages in the DOM |
|||
2. Check if CSS is affecting visual order vs DOM order |
|||
3. Verify Angular's trackBy function is working correctly with reversed arrays |
|||
|
|||
### Robotic System Prompts |
|||
|
|||
**Location:** `apps/api/src/app/endpoints/ai/ai-agent.policy.utils.ts:336-342, 466` |
|||
|
|||
The `createNoToolDirectResponse()` function returns canned responses for queries that don't require tools. This is triggered when: |
|||
1. User sends a greeting or generic message |
|||
2. No tools are planned (`plannedTools.length === 0`) |
|||
3. Policy route is `'direct'` with `blockReason: 'no_tool_query'` |
|||
|
|||
The responses are intentionally generic and informative, but they don't feel conversational or acknowledge the user's specific input. |
|||
|
|||
## Solution Architecture |
|||
|
|||
### Phase 1: Fix Message Ordering (Quick Win) |
|||
|
|||
#### 1.1 Update Message Display Logic |
|||
|
|||
**File:** `apps/client/src/app/pages/chat/chat-page.component.ts` |
|||
|
|||
Change: |
|||
```typescript |
|||
public get visibleMessages() { |
|||
return [...(this.currentConversation?.messages ?? [])].reverse(); |
|||
} |
|||
``` |
|||
|
|||
To: |
|||
```typescript |
|||
public get visibleMessages() { |
|||
// Create a copy and reverse for newest-first display |
|||
const messages = this.currentConversation?.messages ?? []; |
|||
return [...messages].reverse(); |
|||
} |
|||
``` |
|||
|
|||
**Verification:** |
|||
1. Test with 1, 5, 10+ messages |
|||
2. Verify new messages appear at top immediately after submission |
|||
3. Confirm scroll position behavior (should stay at top or auto-scroll to newest) |
|||
4. Check that trackBy function still works correctly |
|||
|
|||
#### 1.2 Add Auto-Scroll to Newest Message |
|||
|
|||
**File:** `apps/client/src/app/pages/chat/chat-page.component.ts` |
|||
|
|||
```typescript |
|||
import { ElementRef, ViewChild, AfterViewInit } from '@angular/core'; |
|||
|
|||
export class GfChatPageComponent implements OnDestroy, OnInit, AfterViewInit { |
|||
@ViewChild('chatLogContainer', { static: false }) |
|||
chatLogContainer: ElementRef<HTMLElement>; |
|||
|
|||
// ... existing code ... |
|||
|
|||
ngAfterViewInit() { |
|||
// Scroll to top (newest message) when messages change |
|||
this.visibleMessages; // Trigger change detection |
|||
} |
|||
|
|||
private scrollToTop() { |
|||
if (this.chatLogContainer) { |
|||
this.chatLogContainer.nativeElement.scrollTop = 0; |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
**Template update:** `apps/client/src/app/pages/chat/chat-page.component.html` |
|||
|
|||
```html |
|||
<div aria-live="polite" #chatLogContainer class="chat-log" role="log"> |
|||
<!-- messages --> |
|||
</div> |
|||
``` |
|||
|
|||
### Phase 2: Natural Language Responses for Non-Tool Queries |
|||
|
|||
#### 2.1 Update Backend Response Generation |
|||
|
|||
**File:** `apps/api/src/app/endpoints/ai/ai-agent.policy.utils.ts` |
|||
|
|||
Replace the `createNoToolDirectResponse()` function to generate more natural, contextual responses: |
|||
|
|||
```typescript |
|||
export function createNoToolDirectResponse(query: string): string { |
|||
const normalizedQuery = query.toLowerCase().trim(); |
|||
|
|||
// Greeting patterns |
|||
const greetingPatterns = [ |
|||
/^(hi|hello|hey|hiya|greetings)/i, |
|||
/^(good (morning|afternoon|evening))/i, |
|||
/^(how are you|how's it going|what's up)/i |
|||
]; |
|||
|
|||
// Name introduction patterns |
|||
const nameIntroductionPatterns = [ |
|||
/(?:my name is|i'm|i am|call me)\s+(\w+)/i, |
|||
/remember (?:that )?my name is\s+(\w+)/i |
|||
]; |
|||
|
|||
// Check for greeting |
|||
if (greetingPatterns.some(pattern => pattern.test(normalizedQuery))) { |
|||
const greetings = [ |
|||
"Hello! I'm here to help with your portfolio analysis. What would you like to know?", |
|||
"Hi! I can help you understand your portfolio better. What's on your mind?", |
|||
"Hey there! Ready to dive into your portfolio? Just ask!" |
|||
]; |
|||
return greetings[Math.floor(Math.random() * greetings.length)]; |
|||
} |
|||
|
|||
// Check for name introduction |
|||
const nameMatch = nameIntroductionPatterns.find(pattern => |
|||
pattern.test(normalizedQuery) |
|||
); |
|||
if (nameMatch) { |
|||
const match = normalizedQuery.match(nameMatch); |
|||
const name = match?.[1]; |
|||
if (name) { |
|||
return `Nice to meet you, ${name.charAt(0).toUpperCase() + name.slice(1)}! I've got that saved. What would you like to know about your portfolio today?`; |
|||
} |
|||
} |
|||
|
|||
// Default helpful response (more conversational) |
|||
const defaults = [ |
|||
"I'm here to help with your portfolio! You can ask me things like 'Show my top holdings' or 'What's my concentration risk?'", |
|||
"Sure! I can analyze your portfolio, check concentration risks, look up market prices, and more. What would you like to explore?", |
|||
"I'd be happy to help! Try asking about your holdings, risk analysis, or market data for your investments." |
|||
]; |
|||
|
|||
return defaults[Math.floor(Math.random() * defaults.length)]; |
|||
} |
|||
``` |
|||
|
|||
#### 2.2 Add Context Awareness for Follow-up Queries |
|||
|
|||
For users who say "thanks" or "ok" after a previous interaction, acknowledge it conversationally: |
|||
|
|||
```typescript |
|||
// Add to createNoToolDirectResponse |
|||
const acknowledgmentPatterns = [ |
|||
/^(thanks|thank you|thx|ty|ok|okay|great|awesome)/i |
|||
]; |
|||
|
|||
if (acknowledgmentPatterns.some(pattern => pattern.test(normalizedQuery))) { |
|||
const acknowledgments = [ |
|||
"You're welcome! Let me know if you need anything else.", |
|||
"Happy to help! What else would you like to know?", |
|||
"Anytime! Feel free to ask if you have more questions." |
|||
]; |
|||
return acknowledgments[Math.floor(Math.random() * acknowledgments.length)]; |
|||
} |
|||
``` |
|||
|
|||
#### 2.3 Update Memory to Track User Name |
|||
|
|||
When a user introduces themselves, store this in user preferences so it can be used in future responses: |
|||
|
|||
**File:** `apps/api/src/app/endpoints/ai/ai-agent.chat.helpers.ts` |
|||
|
|||
Extend the `AiAgentUserPreferenceState` interface: |
|||
|
|||
```typescript |
|||
export interface AiAgentUserPreferenceState { |
|||
name?: string; // Add this |
|||
responseStyle?: 'concise' | 'detailed'; |
|||
updatedAt?: string; |
|||
} |
|||
``` |
|||
|
|||
Update `resolvePreferenceUpdate()` to extract and store user names: |
|||
|
|||
```typescript |
|||
export function resolvePreferenceUpdate({ |
|||
query, |
|||
userPreferences |
|||
}: { |
|||
query: string; |
|||
userPreferences?: AiAgentUserPreferenceState; |
|||
}): { |
|||
acknowledgement?: string; |
|||
userPreferences: AiAgentUserPreferenceState; |
|||
} { |
|||
const normalizedQuery = query.toLowerCase().trim(); |
|||
const nameMatch = normalizedQuery.match(/(?:my name is|i'm|i am|call me)\s+(\w+)/i); |
|||
|
|||
let name = userPreferences?.name; |
|||
if (nameMatch && nameMatch[1]) { |
|||
name = nameMatch[1]; |
|||
} |
|||
|
|||
return { |
|||
userPreferences: { |
|||
...userPreferences, |
|||
name, |
|||
responseStyle: userPreferences?.responseStyle, |
|||
updatedAt: new Date().toISOString() |
|||
} |
|||
}; |
|||
} |
|||
``` |
|||
|
|||
Then personalize responses when we know the user's name: |
|||
|
|||
```typescript |
|||
// In createNoToolDirectResponse or buildAnswer |
|||
if (userPreferences?.name) { |
|||
return `Hi ${userPreferences.name}! ${restOfResponse}`; |
|||
} |
|||
``` |
|||
|
|||
## Implementation Steps |
|||
|
|||
### Step 1: Message Ordering Fix (Frontend) |
|||
1. Update `chat-page.component.ts` to properly reverse message array |
|||
2. Add `AfterViewInit` hook and scroll-to-top logic |
|||
3. Update template with `#chatLogContainer` reference |
|||
4. Test with various message counts |
|||
5. Verify accessibility (aria-live still works correctly) |
|||
|
|||
### Step 2: Natural Language Responses (Backend) |
|||
1. Refactor `createNoToolDirectResponse()` in `ai-agent.policy.utils.ts` |
|||
2. Add greeting, acknowledgment, and name-introduction pattern matching |
|||
3. Add randomness to responses for variety |
|||
4. Write unit tests for new response patterns |
|||
5. Test with user queries from evals dataset |
|||
|
|||
### Step 3: User Name Memory (Backend) |
|||
1. Extend `AiAgentUserPreferenceState` interface with `name` field |
|||
2. Update `resolvePreferenceUpdate()` to extract names |
|||
3. Update `setUserPreferences()` to store names in Redis |
|||
4. Personalize responses when name is available |
|||
5. Add tests for name extraction and storage |
|||
|
|||
### Step 4: Integration Testing |
|||
1. End-to-end test: full conversation flow with greetings |
|||
2. Verify message ordering works correctly |
|||
3. Test name memory across multiple queries |
|||
4. Test with existing evals dataset (ensure no regressions) |
|||
5. Manual QA: test natural language feels conversational |
|||
|
|||
## Success Criteria |
|||
|
|||
### Message Ordering |
|||
- [ ] Newest messages appear at top of chat log |
|||
- [ ] New messages immediately appear at top after submission |
|||
- [ ] Scroll position stays at top (or auto-scrolls to newest) |
|||
- [ ] Works correctly with 1, 5, 10, 50+ messages |
|||
- [ ] Angular change detection works efficiently |
|||
- [ ] Accessibility (screen readers) still function correctly |
|||
|
|||
### Natural Language Responses |
|||
- [ ] Greetings ("hi", "hello") return friendly, varied responses |
|||
- [ ] Name introduction ("my name is Max") acknowledges the name |
|||
- [ ] Acknowledgments ("thanks", "ok") return polite follow-ups |
|||
- [ ] Default non-tool queries are more conversational |
|||
- [ ] User name is remembered across session |
|||
- [ ] Responses use name when available ("Hi Max!") |
|||
- [ ] No regressions in existing functionality |
|||
|
|||
### Code Quality |
|||
- [ ] All changes pass existing tests |
|||
- [ ] New unit tests for response patterns |
|||
- [ ] No TypeScript errors |
|||
- [ ] Code follows existing patterns |
|||
- [ ] Documentation updated if needed |
|||
|
|||
## Risks & Mitigations |
|||
|
|||
### Risk 1: Breaking Change in Message Display |
|||
**Risk:** Reversing message order could confuse existing users or break other components. |
|||
**Mitigation:** |
|||
- Test thoroughly in staging before deploying |
|||
- Consider adding a user preference for message order if feedback is negative |
|||
- Monitor for bug reports after deploy |
|||
|
|||
### Risk 2: Overly Casual Tone |
|||
**Risk:** Making responses too casual could reduce perceived professionalism. |
|||
**Mitigation:** |
|||
- Keep responses friendly but not slangy |
|||
- Avoid emojis (per project guidelines) |
|||
- Maintain focus on portfolio/finance context |
|||
- A/B test if unsure |
|||
|
|||
### Risk 3: Name Extraction False Positives |
|||
**Risk:** Pattern matching could incorrectly extract names from non-name sentences. |
|||
**Mitigation:** |
|||
- Use specific patterns (require "my name is", "call me", etc.) |
|||
- Only capitalize first letter of extracted name |
|||
- Don't persist name without confidence |
|||
- Add tests for edge cases |
|||
|
|||
### Risk 4: Performance Impact |
|||
**Risk:** Adding pattern matching for every query could slow response times. |
|||
**Mitigation:** |
|||
- Patterns are simple regex (should be fast) |
|||
- Only runs for non-tool queries (minority of cases) |
|||
- Profile before and after if concerned |
|||
- Could cache compiled regex patterns if needed |
|||
|
|||
## Testing Strategy |
|||
|
|||
### Unit Tests |
|||
1. Test `visibleMessages` getter returns correct order |
|||
2. Test `createNoToolDirectResponse()` with various inputs |
|||
3. Test name extraction patterns |
|||
4. Test user preferences update logic |
|||
|
|||
### Integration Tests |
|||
1. Test full chat flow with greeting → name → follow-up |
|||
2. Test message ordering with many messages |
|||
3. Test scrolling behavior |
|||
4. Test that tool-based queries still work correctly |
|||
|
|||
### Manual QA Checklist |
|||
- [ ] Send "hi" → get friendly greeting |
|||
- [ ] Send "my name is Max" → response acknowledges Max |
|||
- [ ] Send another query → response uses "Max" |
|||
- [ ] Send 5 messages → newest appears at top |
|||
- [ ] Refresh page → order preserved |
|||
- [ ] Ask portfolio question → still works |
|||
- [ ] Send "thanks" → get polite acknowledgment |
|||
|
|||
## Rollout Plan |
|||
|
|||
### Phase 1: Frontend Message Ordering (Low Risk) |
|||
- Deploy to staging |
|||
- QA team tests |
|||
- Deploy to production |
|||
- Monitor for 24 hours |
|||
|
|||
### Phase 2: Natural Language Backend (Medium Risk) |
|||
- Deploy to staging |
|||
- QA team tests with various queries |
|||
- Run evals dataset to check for regressions |
|||
- Deploy to production with feature flag if needed |
|||
- Monitor user feedback |
|||
|
|||
### Phase 3: Name Memory (Low Risk) |
|||
- Deploy after Phase 2 is stable |
|||
- Test name persistence across sessions |
|||
- Deploy to production |
|||
|
|||
## Documentation Updates |
|||
|
|||
- [ ] Update AI service documentation with new response patterns |
|||
- [ ] Add examples of natural language responses to docs |
|||
- [ ] Document user preferences schema changes |
|||
- [ ] Update any API documentation if relevant |
|||
|
|||
## Future Enhancements (Out of Scope) |
|||
|
|||
- More sophisticated NLP for intent detection |
|||
- Sentiment analysis to adjust response tone |
|||
- Multi-language support for greetings |
|||
- User customization of response style |
|||
- Quick suggestions based on conversation context |
|||
Loading…
Reference in new issue