mirror of https://github.com/ghostfolio/ghostfolio
Ross Kuehl
1 month ago
7 changed files with 1513 additions and 4 deletions
@ -0,0 +1,262 @@ |
|||
<mat-card |
|||
appearance="outlined" |
|||
aria-labelledby="ai-portfolio-chat-heading" |
|||
class="ai-chat-card" |
|||
id="ai-portfolio-chat-panel" |
|||
role="region" |
|||
> |
|||
<mat-card-header> |
|||
<mat-card-title class="align-items-center d-flex"> |
|||
<span class="flex-grow-1" i18n id="ai-portfolio-chat-heading" |
|||
>AI portfolio chat</span |
|||
> |
|||
<button |
|||
aria-label="Close AI portfolio chat" |
|||
i18n-aria-label |
|||
mat-icon-button |
|||
type="button" |
|||
(click)="onClose()" |
|||
> |
|||
<ion-icon name="close-outline" /> |
|||
</button> |
|||
</mat-card-title> |
|||
</mat-card-header> |
|||
|
|||
<mat-card-content> |
|||
<div |
|||
aria-label="Portfolio scope" |
|||
class="ai-scope align-items-center d-flex flex-wrap mb-3" |
|||
i18n-aria-label |
|||
> |
|||
<span class="ai-scope-label mr-2" i18n>Scope</span> |
|||
@for (chip of scopeChips(); track chip) { |
|||
<span class="ai-scope-chip">{{ chip }}</span> |
|||
} |
|||
</div> |
|||
|
|||
@if (!hasConsent()) { |
|||
<div class="ai-consent"> |
|||
<h2 class="h5" i18n>Before you start</h2> |
|||
<p i18n> |
|||
Your question and the scoped portfolio data needed to answer it will |
|||
be sent through OpenRouter to model |
|||
<code>{{ model() }}</code |
|||
>. |
|||
</p> |
|||
<p i18n> |
|||
Ghostfolio keeps this conversation only in memory for this open panel |
|||
in this browser tab. Closing the panel, leaving the page, refreshing |
|||
the tab, or changing the portfolio scope clears it. |
|||
</p> |
|||
<p class="mb-4" i18n> |
|||
OpenRouter and upstream model providers may process or retain |
|||
submitted data under their own privacy and data-retention policies. |
|||
</p> |
|||
<div class="d-flex flex-wrap justify-content-end"> |
|||
<button |
|||
class="mb-2 mr-2" |
|||
mat-button |
|||
type="button" |
|||
(click)="onClose()" |
|||
> |
|||
<ng-container i18n>Not now</ng-container> |
|||
</button> |
|||
<button |
|||
class="mb-2" |
|||
color="primary" |
|||
mat-flat-button |
|||
type="button" |
|||
(click)="onAcceptConsent()" |
|||
> |
|||
<ng-container i18n>Continue to AI chat</ng-container> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
} @else { |
|||
<div |
|||
aria-label="AI chat messages" |
|||
class="ai-messages mb-3" |
|||
i18n-aria-label |
|||
> |
|||
@if (chat.messages.length === 0) { |
|||
<div class="ai-empty-state py-4 text-center"> |
|||
<p class="mb-1" i18n>Ask about the portfolio shown above.</p> |
|||
<small class="text-muted" i18n |
|||
>The assistant can use portfolio summary, holdings, and |
|||
performance data.</small |
|||
> |
|||
</div> |
|||
} |
|||
|
|||
@for (message of chat.messages; track message.id) { |
|||
@if (getMessageText(message)) { |
|||
<article |
|||
class="ai-message" |
|||
[class.ai-message-assistant]="message.role === 'assistant'" |
|||
[class.ai-message-user]="message.role === 'user'" |
|||
> |
|||
<div class="ai-message-label"> |
|||
@if (message.role === 'user') { |
|||
<ng-container i18n>You</ng-container> |
|||
} @else { |
|||
<ng-container i18n>AI</ng-container> |
|||
} |
|||
</div> |
|||
|
|||
@if (message.role === 'assistant') { |
|||
<div class="ai-markdown"> |
|||
@for (block of getSafeMarkdownBlocks(message); track $index) { |
|||
@switch (block.type) { |
|||
@case ('heading') { |
|||
<h3 class="h6"> |
|||
<gf-ai-chat-inline [parts]="block.parts" /> |
|||
</h3> |
|||
} |
|||
@case ('ordered-list') { |
|||
<ol> |
|||
@for (item of block.items; track $index) { |
|||
<li> |
|||
<gf-ai-chat-inline [parts]="item" /> |
|||
</li> |
|||
} |
|||
</ol> |
|||
} |
|||
@case ('unordered-list') { |
|||
<ul> |
|||
@for (item of block.items; track $index) { |
|||
<li> |
|||
<gf-ai-chat-inline [parts]="item" /> |
|||
</li> |
|||
} |
|||
</ul> |
|||
} |
|||
@default { |
|||
<p> |
|||
<gf-ai-chat-inline [parts]="block.parts" /> |
|||
</p> |
|||
} |
|||
} |
|||
} |
|||
</div> |
|||
} @else { |
|||
<div class="ai-user-text">{{ getMessageText(message) }}</div> |
|||
} |
|||
|
|||
@if (getSourceLabels(message).length > 0) { |
|||
<div |
|||
class="ai-sources align-items-center d-flex flex-wrap mt-2" |
|||
> |
|||
<span class="mr-2" i18n>Sources</span> |
|||
@for (source of getSourceLabels(message); track source) { |
|||
<span class="ai-source-chip">{{ source }}</span> |
|||
} |
|||
</div> |
|||
} |
|||
</article> |
|||
} |
|||
} |
|||
|
|||
@if (chat.status === 'submitted') { |
|||
<div |
|||
aria-live="polite" |
|||
class="ai-thinking align-items-center d-flex" |
|||
role="status" |
|||
> |
|||
<mat-spinner class="mr-2" color="accent" [diameter]="16" /> |
|||
<span i18n>Reviewing the portfolio data...</span> |
|||
</div> |
|||
} |
|||
|
|||
@if (chat.status === 'streaming') { |
|||
<span |
|||
aria-live="polite" |
|||
class="cdk-visually-hidden" |
|||
i18n |
|||
role="status" |
|||
>The AI response is being generated.</span |
|||
> |
|||
} @else if ( |
|||
chat.status === 'ready' && |
|||
chat.messages.length > 0 && |
|||
chat.messages.at(-1)?.role === 'assistant' |
|||
) { |
|||
<span |
|||
aria-live="polite" |
|||
class="cdk-visually-hidden" |
|||
i18n |
|||
role="status" |
|||
>The AI response is complete.</span |
|||
> |
|||
} |
|||
</div> |
|||
|
|||
@if (chat.status === 'error') { |
|||
<div aria-live="assertive" class="ai-error mb-3" role="alert"> |
|||
<span i18n |
|||
>The AI response could not be completed. Please try again.</span |
|||
> |
|||
<button mat-button type="button" (click)="onRetry()"> |
|||
<ion-icon class="mr-1" name="refresh-outline" /> |
|||
<ng-container i18n>Retry</ng-container> |
|||
</button> |
|||
</div> |
|||
} |
|||
|
|||
<form (submit)="onSubmit($event)"> |
|||
<mat-form-field appearance="outline" class="ai-prompt w-100"> |
|||
<mat-label i18n>Ask about this portfolio</mat-label> |
|||
<textarea |
|||
#promptInput |
|||
aria-describedby="ai-chat-keyboard-hint ai-chat-advice-notice" |
|||
matInput |
|||
maxlength="2000" |
|||
rows="3" |
|||
[disabled]="isBusy()" |
|||
[value]="prompt()" |
|||
(input)="onInput($event)" |
|||
(keydown)="onKeydown($event)" |
|||
></textarea> |
|||
<mat-hint i18n id="ai-chat-keyboard-hint" |
|||
>Enter to send, Shift+Enter for a new line</mat-hint |
|||
> |
|||
</mat-form-field> |
|||
|
|||
<div class="ai-actions align-items-center d-flex flex-wrap"> |
|||
<button |
|||
aria-label="Clear AI chat" |
|||
i18n-aria-label |
|||
mat-button |
|||
type="button" |
|||
[disabled]="chat.messages.length === 0 && !isBusy()" |
|||
(click)="onClear()" |
|||
> |
|||
<ion-icon class="mr-1" name="trash-outline" /> |
|||
<ng-container i18n>Clear</ng-container> |
|||
</button> |
|||
<span class="flex-grow-1"></span> |
|||
@if (isBusy()) { |
|||
<button mat-stroked-button type="button" (click)="onStop()"> |
|||
<ion-icon class="mr-1" name="stop-circle-outline" /> |
|||
<ng-container i18n>Stop</ng-container> |
|||
</button> |
|||
} @else { |
|||
<button |
|||
color="primary" |
|||
mat-flat-button |
|||
type="submit" |
|||
[disabled]="!prompt().trim()" |
|||
> |
|||
<ion-icon class="mr-1" name="send-outline" /> |
|||
<ng-container i18n>Send</ng-container> |
|||
</button> |
|||
} |
|||
</div> |
|||
</form> |
|||
} |
|||
|
|||
<p class="ai-notice mb-0 mt-3 text-muted" i18n id="ai-chat-advice-notice"> |
|||
AI-generated information may be inaccurate and is not financial, tax, or |
|||
legal advice. |
|||
</p> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
@ -0,0 +1,145 @@ |
|||
:host { |
|||
display: block; |
|||
|
|||
.ai-chat-card { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
mat-card-title { |
|||
min-height: 2.5rem; |
|||
width: 100%; |
|||
} |
|||
|
|||
.ai-scope { |
|||
gap: 0.375rem; |
|||
} |
|||
|
|||
.ai-scope-label { |
|||
font-size: 0.75rem; |
|||
font-weight: 600; |
|||
letter-spacing: 0.04em; |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
.ai-scope-chip, |
|||
.ai-source-chip { |
|||
background-color: rgba(var(--palette-foreground-base), 0.08); |
|||
border-radius: 1rem; |
|||
display: inline-flex; |
|||
font-size: 0.75rem; |
|||
line-height: 1.5; |
|||
padding: 0.125rem 0.625rem; |
|||
} |
|||
|
|||
.ai-consent { |
|||
margin: 0 auto; |
|||
max-width: 44rem; |
|||
} |
|||
|
|||
.ai-messages { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 1rem; |
|||
max-height: min(32rem, 55vh); |
|||
overflow-y: auto; |
|||
padding: 0.25rem; |
|||
} |
|||
|
|||
.ai-empty-state { |
|||
border: 1px dashed rgba(var(--palette-foreground-base), 0.2); |
|||
border-radius: 0.5rem; |
|||
} |
|||
|
|||
.ai-message { |
|||
border-radius: 0.75rem; |
|||
max-width: min(90%, 48rem); |
|||
padding: 0.75rem 1rem; |
|||
white-space: pre-wrap; |
|||
} |
|||
|
|||
.ai-message-user { |
|||
align-self: flex-end; |
|||
background-color: rgba(var(--palette-primary-500), 0.12); |
|||
} |
|||
|
|||
.ai-message-assistant { |
|||
align-self: flex-start; |
|||
background-color: rgba(var(--palette-foreground-base), 0.06); |
|||
} |
|||
|
|||
.ai-message-label { |
|||
font-size: 0.75rem; |
|||
font-weight: 600; |
|||
margin-bottom: 0.25rem; |
|||
} |
|||
|
|||
.ai-markdown { |
|||
white-space: normal; |
|||
|
|||
> :last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.ai-user-text { |
|||
overflow-wrap: anywhere; |
|||
white-space: pre-wrap; |
|||
} |
|||
|
|||
.ai-sources { |
|||
font-size: 0.75rem; |
|||
gap: 0.375rem; |
|||
} |
|||
|
|||
.ai-source-chip { |
|||
background-color: rgba(var(--palette-accent-500), 0.12); |
|||
} |
|||
|
|||
.ai-thinking, |
|||
.ai-error { |
|||
border-radius: 0.5rem; |
|||
padding: 0.75rem; |
|||
} |
|||
|
|||
.ai-thinking { |
|||
align-self: flex-start; |
|||
background-color: rgba(var(--palette-foreground-base), 0.05); |
|||
} |
|||
|
|||
.ai-error { |
|||
background-color: rgba(var(--palette-warn-500), 0.1); |
|||
} |
|||
|
|||
.ai-prompt { |
|||
margin-bottom: -0.5rem; |
|||
} |
|||
|
|||
.ai-actions { |
|||
gap: 0.5rem; |
|||
} |
|||
|
|||
.ai-notice { |
|||
font-size: 0.75rem; |
|||
} |
|||
|
|||
@media (max-width: 575.98px) { |
|||
.ai-message { |
|||
max-width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host-context(.theme-dark) { |
|||
.ai-scope-chip { |
|||
background-color: rgba(var(--palette-foreground-base-dark), 0.1); |
|||
} |
|||
|
|||
.ai-empty-state { |
|||
border-color: rgba(var(--palette-foreground-base-dark), 0.2); |
|||
} |
|||
|
|||
.ai-message-assistant, |
|||
.ai-thinking { |
|||
background-color: rgba(var(--palette-foreground-base-dark), 0.08); |
|||
} |
|||
} |
|||
@ -0,0 +1,329 @@ |
|||
import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service'; |
|||
import { Filter } from '@ghostfolio/common/interfaces'; |
|||
import { DataService } from '@ghostfolio/ui/services'; |
|||
|
|||
import { HttpParams } from '@angular/common/http'; |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
import '@angular/localize/init'; |
|||
import { provideNoopAnimations } from '@angular/platform-browser/animations'; |
|||
import type { UIMessage } from 'ai'; |
|||
|
|||
import { |
|||
buildAiChatRequestMessages, |
|||
getAiChatSourceLabels, |
|||
GfAiChatComponent |
|||
} from './ai-chat.component'; |
|||
|
|||
jest.mock('@ai-sdk/angular', () => { |
|||
const { signal } = |
|||
jest.requireActual<typeof import('@angular/core')>('@angular/core'); |
|||
|
|||
class ChatMock { |
|||
public error: Error | undefined; |
|||
public status = 'ready'; |
|||
public stopCallCount = 0; |
|||
private readonly messagesSignal = signal<UIMessage[]>([]); |
|||
|
|||
public get messages() { |
|||
return this.messagesSignal(); |
|||
} |
|||
|
|||
public set messages(messages: UIMessage[]) { |
|||
this.messagesSignal.set(messages); |
|||
} |
|||
|
|||
public clearError() { |
|||
this.error = undefined; |
|||
this.status = 'ready'; |
|||
} |
|||
|
|||
public regenerate() { |
|||
return Promise.resolve(); |
|||
} |
|||
|
|||
public sendMessage() { |
|||
return Promise.resolve(); |
|||
} |
|||
|
|||
public stop() { |
|||
this.stopCallCount += 1; |
|||
|
|||
return Promise.resolve(); |
|||
} |
|||
} |
|||
|
|||
return { Chat: ChatMock }; |
|||
}); |
|||
|
|||
jest.mock('@ionic/angular/standalone', () => { |
|||
const { Component } = |
|||
jest.requireActual<typeof import('@angular/core')>('@angular/core'); |
|||
|
|||
class IonIconMock {} |
|||
|
|||
Component({ |
|||
inputs: ['name'], |
|||
selector: 'ion-icon', |
|||
standalone: true, |
|||
template: '' |
|||
})(IonIconMock); |
|||
|
|||
return { IonIcon: IonIconMock }; |
|||
}); |
|||
|
|||
jest.mock('ai', () => { |
|||
class DefaultChatTransportMock {} |
|||
|
|||
return { |
|||
DefaultChatTransport: DefaultChatTransportMock, |
|||
isTextUIPart: (part: { type: string }) => part.type === 'text' |
|||
}; |
|||
}); |
|||
|
|||
jest.mock('ionicons', () => { |
|||
return { addIcons: () => undefined }; |
|||
}); |
|||
|
|||
jest.mock('ionicons/icons', () => { |
|||
return { |
|||
closeOutline: '', |
|||
refreshOutline: '', |
|||
sendOutline: '', |
|||
stopCircleOutline: '', |
|||
trashOutline: '' |
|||
}; |
|||
}); |
|||
|
|||
describe('GfAiChatComponent', () => { |
|||
let component: GfAiChatComponent; |
|||
let fixture: ComponentFixture<GfAiChatComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
window.sessionStorage.clear(); |
|||
|
|||
await TestBed.configureTestingModule({ |
|||
imports: [GfAiChatComponent], |
|||
providers: [ |
|||
provideNoopAnimations(), |
|||
{ |
|||
provide: DataService, |
|||
useValue: { |
|||
buildFiltersAsQueryParams: ({ |
|||
filters |
|||
}: { |
|||
filters?: Filter[]; |
|||
}) => { |
|||
let queryParams = new HttpParams(); |
|||
|
|||
for (const filter of filters ?? []) { |
|||
if (filter.type === 'ACCOUNT') { |
|||
queryParams = queryParams.append('accounts', filter.id); |
|||
} else if (filter.type === 'TAG') { |
|||
queryParams = queryParams.append('tags', filter.id); |
|||
} |
|||
} |
|||
|
|||
return queryParams; |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
provide: TokenStorageService, |
|||
useValue: { getToken: () => 'test-token' } |
|||
} |
|||
] |
|||
}).compileComponents(); |
|||
|
|||
fixture = TestBed.createComponent(GfAiChatComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.componentRef.setInput('model', 'openai/test-model'); |
|||
fixture.componentRef.setInput('range', 'ytd'); |
|||
fixture.detectChanges(); |
|||
TestBed.flushEffects(); |
|||
}); |
|||
|
|||
it('stores only the model-specific session consent marker', () => { |
|||
expect(fixture.nativeElement.textContent).toContain('Before you start'); |
|||
expect(fixture.nativeElement.textContent).toContain('OpenRouter'); |
|||
expect(fixture.nativeElement.textContent).toContain( |
|||
'may process or retain submitted data' |
|||
); |
|||
|
|||
const continueButton = [ |
|||
...fixture.nativeElement.querySelectorAll('button') |
|||
].find((button: HTMLButtonElement) => { |
|||
return button.textContent?.includes('Continue to AI chat'); |
|||
}); |
|||
|
|||
continueButton?.click(); |
|||
fixture.detectChanges(); |
|||
|
|||
expect( |
|||
window.sessionStorage.getItem( |
|||
'ghostfolio.ai-chat.consent:openai/test-model' |
|||
) |
|||
).toBe('true'); |
|||
expect(window.sessionStorage.length).toBe(1); |
|||
}); |
|||
|
|||
it('does not render remote images or raw HTML as active content', () => { |
|||
const continueButton = [ |
|||
...fixture.nativeElement.querySelectorAll('button') |
|||
].find((button: HTMLButtonElement) => { |
|||
return button.textContent?.includes('Continue to AI chat'); |
|||
}); |
|||
|
|||
continueButton?.click(); |
|||
fixture.detectChanges(); |
|||
|
|||
const componentInternals = component as unknown as { |
|||
chat: { messages: UIMessage[] }; |
|||
}; |
|||
|
|||
componentInternals.chat.messages = [ |
|||
{ |
|||
id: 'assistant-message', |
|||
parts: [ |
|||
{ |
|||
text: [ |
|||
'', |
|||
'<em id="raw-html">raw html</em>', |
|||
'*Safe emphasis* and [Safe link](https://example.com)' |
|||
].join('\n\n'), |
|||
type: 'text' |
|||
} |
|||
], |
|||
role: 'assistant' |
|||
} |
|||
]; |
|||
fixture.changeDetectorRef.markForCheck(); |
|||
fixture.detectChanges(); |
|||
|
|||
expect(fixture.nativeElement.querySelector('img')).toBeNull(); |
|||
expect(fixture.nativeElement.querySelector('#raw-html')).toBeNull(); |
|||
expect(fixture.nativeElement.textContent).toContain( |
|||
'<em id="raw-html">raw html</em>' |
|||
); |
|||
expect( |
|||
fixture.nativeElement.querySelector('a[href="https://example.com/"]') |
|||
).not.toBeNull(); |
|||
}); |
|||
|
|||
it('uses the active range and filters in the API request URL', () => { |
|||
fixture.componentRef.setInput('filters', [ |
|||
{ id: 'account-1', type: 'ACCOUNT' }, |
|||
{ id: 'tag-1', type: 'TAG' } |
|||
]); |
|||
fixture.detectChanges(); |
|||
|
|||
const componentInternals = component as unknown as { |
|||
getApiUrl: () => string; |
|||
}; |
|||
|
|||
expect(componentInternals.getApiUrl()).toBe( |
|||
'/api/v1/ai/chat?accounts=account-1&tags=tag-1&range=ytd' |
|||
); |
|||
}); |
|||
|
|||
it('clears the in-memory conversation when the scope changes', () => { |
|||
const componentInternals = component as unknown as { |
|||
chat: { messages: UIMessage[] }; |
|||
}; |
|||
|
|||
componentInternals.chat.messages = [ |
|||
{ |
|||
id: 'message-1', |
|||
parts: [{ text: 'How am I doing?', type: 'text' }], |
|||
role: 'user' |
|||
} |
|||
]; |
|||
|
|||
fixture.componentRef.setInput('range', '1y'); |
|||
fixture.detectChanges(); |
|||
TestBed.flushEffects(); |
|||
|
|||
expect(componentInternals.chat.messages).toEqual([]); |
|||
}); |
|||
|
|||
it('stops the active stream and clears messages when destroyed', () => { |
|||
const componentInternals = component as unknown as { |
|||
chat: { messages: UIMessage[]; stopCallCount: number }; |
|||
}; |
|||
|
|||
componentInternals.chat.messages = [ |
|||
{ |
|||
id: 'message-1', |
|||
parts: [{ text: 'Streaming response', type: 'text' }], |
|||
role: 'assistant' |
|||
} |
|||
]; |
|||
const stopCallCount = componentInternals.chat.stopCallCount; |
|||
|
|||
fixture.destroy(); |
|||
|
|||
expect(componentInternals.chat.stopCallCount).toBe(stopCallCount + 1); |
|||
expect(componentInternals.chat.messages).toEqual([]); |
|||
}); |
|||
}); |
|||
|
|||
describe('AI chat request messages', () => { |
|||
it('sends only text messages and keeps the most recent twelve', () => { |
|||
const messages: UIMessage[] = Array.from({ length: 13 }, (_, index) => ({ |
|||
id: `message-${index}`, |
|||
parts: [ |
|||
{ text: `Question ${index}`, type: 'text' }, |
|||
{ text: 'private reasoning', type: 'reasoning' } |
|||
], |
|||
role: 'user' |
|||
})); |
|||
|
|||
const requestMessages = buildAiChatRequestMessages(messages); |
|||
|
|||
expect(requestMessages).toHaveLength(12); |
|||
expect(requestMessages[0]).toEqual({ |
|||
content: 'Question 1', |
|||
role: 'user' |
|||
}); |
|||
expect(requestMessages.at(-1)).toEqual({ |
|||
content: 'Question 12', |
|||
role: 'user' |
|||
}); |
|||
expect(JSON.stringify(requestMessages)).not.toContain('private reasoning'); |
|||
}); |
|||
}); |
|||
|
|||
describe('AI chat source labels', () => { |
|||
it('labels only tools that returned portfolio data', () => { |
|||
const message = { |
|||
id: 'assistant-message', |
|||
parts: [ |
|||
{ |
|||
input: {}, |
|||
state: 'output-available', |
|||
toolCallId: 'summary-call', |
|||
type: 'tool-getPortfolioSummary', |
|||
output: { privatePayload: true } |
|||
}, |
|||
{ |
|||
input: {}, |
|||
state: 'input-available', |
|||
toolCallId: 'holdings-call', |
|||
type: 'tool-getPortfolioHoldings' |
|||
}, |
|||
{ |
|||
input: {}, |
|||
state: 'output-available', |
|||
toolCallId: 'performance-call', |
|||
type: 'tool-getPortfolioPerformance', |
|||
output: { privatePayload: true } |
|||
} |
|||
], |
|||
role: 'assistant' |
|||
} as unknown as UIMessage; |
|||
|
|||
expect(getAiChatSourceLabels(message)).toEqual([ |
|||
'Portfolio summary', |
|||
'Performance' |
|||
]); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,580 @@ |
|||
import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service'; |
|||
import { |
|||
DEFAULT_DATE_RANGE, |
|||
HEADER_KEY_TIMEZONE, |
|||
HEADER_KEY_TOKEN |
|||
} from '@ghostfolio/common/config'; |
|||
import { Filter } from '@ghostfolio/common/interfaces'; |
|||
import { DateRange } from '@ghostfolio/common/types'; |
|||
import { DataService } from '@ghostfolio/ui/services'; |
|||
|
|||
import { Chat } from '@ai-sdk/angular'; |
|||
import { |
|||
ChangeDetectionStrategy, |
|||
Component, |
|||
computed, |
|||
ElementRef, |
|||
effect, |
|||
inject, |
|||
input, |
|||
OnDestroy, |
|||
output, |
|||
signal, |
|||
untracked, |
|||
viewChild |
|||
} from '@angular/core'; |
|||
import { MatButtonModule } from '@angular/material/button'; |
|||
import { MatCardModule } from '@angular/material/card'; |
|||
import { MatFormFieldModule } from '@angular/material/form-field'; |
|||
import { MatInputModule } from '@angular/material/input'; |
|||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; |
|||
import { IonIcon } from '@ionic/angular/standalone'; |
|||
import { DefaultChatTransport, isTextUIPart, UIMessage } from 'ai'; |
|||
import { addIcons } from 'ionicons'; |
|||
import { |
|||
closeOutline, |
|||
refreshOutline, |
|||
sendOutline, |
|||
stopCircleOutline, |
|||
trashOutline |
|||
} from 'ionicons/icons'; |
|||
|
|||
const AI_CHAT_CONSENT_KEY_PREFIX = 'ghostfolio.ai-chat.consent'; |
|||
const AI_CHAT_MAX_MESSAGE_LENGTH = 2000; |
|||
const AI_CHAT_MAX_MESSAGES = 12; |
|||
|
|||
interface AiChatRequestMessage { |
|||
content: string; |
|||
role: 'assistant' | 'user'; |
|||
} |
|||
|
|||
interface SafeMarkdownInlinePart { |
|||
href?: string; |
|||
text: string; |
|||
type: 'code' | 'emphasis' | 'link' | 'strong' | 'text'; |
|||
} |
|||
|
|||
interface SafeMarkdownListBlock { |
|||
items: SafeMarkdownInlinePart[][]; |
|||
type: 'ordered-list' | 'unordered-list'; |
|||
} |
|||
|
|||
interface SafeMarkdownTextBlock { |
|||
parts: SafeMarkdownInlinePart[]; |
|||
type: 'heading' | 'paragraph'; |
|||
} |
|||
|
|||
type AiChatToolName = |
|||
'getPortfolioHoldings' | 'getPortfolioPerformance' | 'getPortfolioSummary'; |
|||
|
|||
type SafeMarkdownBlock = SafeMarkdownListBlock | SafeMarkdownTextBlock; |
|||
|
|||
const filterTypeLabels: Record<Filter['type'], string> = { |
|||
ACCOUNT: $localize`Account`, |
|||
ASSET_CLASS: $localize`Asset class`, |
|||
ASSET_SUB_CLASS: $localize`Asset subclass`, |
|||
DATA_SOURCE: $localize`Data source`, |
|||
HOLDING_TYPE: $localize`Holding type`, |
|||
PRESET_ID: $localize`Preset`, |
|||
SEARCH_QUERY: $localize`Search`, |
|||
SYMBOL: $localize`Symbol`, |
|||
TAG: $localize`Tag` |
|||
}; |
|||
|
|||
const sourceLabelsByToolName: Record<AiChatToolName, string> = { |
|||
getPortfolioHoldings: $localize`Holdings`, |
|||
getPortfolioPerformance: $localize`Performance`, |
|||
getPortfolioSummary: $localize`Portfolio summary` |
|||
}; |
|||
|
|||
export function buildAiChatRequestMessages( |
|||
messages: UIMessage[] |
|||
): AiChatRequestMessage[] { |
|||
const requestMessages: AiChatRequestMessage[] = []; |
|||
|
|||
for (const message of messages) { |
|||
if (message.role !== 'assistant' && message.role !== 'user') { |
|||
continue; |
|||
} |
|||
|
|||
const content = message.parts |
|||
.filter(isTextUIPart) |
|||
.map((part) => part.text) |
|||
.join('\n\n') |
|||
.trim() |
|||
.slice(0, AI_CHAT_MAX_MESSAGE_LENGTH); |
|||
|
|||
if (content) { |
|||
requestMessages.push({ |
|||
content, |
|||
role: message.role |
|||
}); |
|||
} |
|||
} |
|||
|
|||
return requestMessages.slice(-AI_CHAT_MAX_MESSAGES); |
|||
} |
|||
|
|||
export function getAiChatSourceLabels(message: UIMessage): string[] { |
|||
const sourceLabels = new Set<string>(); |
|||
|
|||
for (const part of message.parts) { |
|||
if (!('state' in part) || part.state !== 'output-available') { |
|||
continue; |
|||
} |
|||
|
|||
const toolName = |
|||
part.type === 'dynamic-tool' |
|||
? part.toolName |
|||
: part.type.startsWith('tool-') |
|||
? part.type.slice('tool-'.length) |
|||
: undefined; |
|||
|
|||
if (toolName && toolName in sourceLabelsByToolName) { |
|||
sourceLabels.add(sourceLabelsByToolName[toolName as AiChatToolName]); |
|||
} |
|||
} |
|||
|
|||
return [...sourceLabels]; |
|||
} |
|||
|
|||
function getSafeLink(value: string) { |
|||
try { |
|||
const url = new URL(value); |
|||
|
|||
if (url.protocol === 'http:' || url.protocol === 'https:') { |
|||
return url.toString(); |
|||
} |
|||
} catch { |
|||
return undefined; |
|||
} |
|||
|
|||
return undefined; |
|||
} |
|||
|
|||
function parseSafeMarkdownInline(value: string) { |
|||
const parts: SafeMarkdownInlinePart[] = []; |
|||
let remainingValue = value; |
|||
|
|||
const appendText = (text: string) => { |
|||
const previousPart = parts.at(-1); |
|||
|
|||
if (previousPart?.type === 'text') { |
|||
previousPart.text += text; |
|||
} else { |
|||
parts.push({ text, type: 'text' }); |
|||
} |
|||
}; |
|||
|
|||
while (remainingValue) { |
|||
const imageMatch = |
|||
/^!\[([^\]]*)\]\(([^)\s]+)(?:\s+(?:"[^"]*"|'[^']*'))?\)/.exec( |
|||
remainingValue |
|||
); |
|||
|
|||
if (imageMatch) { |
|||
const href = getSafeLink(imageMatch[2]); |
|||
const text = `${$localize`Image`}: ${imageMatch[1] || $localize`Untitled`}`; |
|||
|
|||
parts.push(href ? { href, text, type: 'link' } : { text, type: 'text' }); |
|||
remainingValue = remainingValue.slice(imageMatch[0].length); |
|||
continue; |
|||
} |
|||
|
|||
const linkMatch = |
|||
/^\[([^\]]+)\]\(([^)\s]+)(?:\s+(?:"[^"]*"|'[^']*'))?\)/.exec( |
|||
remainingValue |
|||
); |
|||
|
|||
if (linkMatch) { |
|||
const href = getSafeLink(linkMatch[2]); |
|||
|
|||
parts.push( |
|||
href |
|||
? { href, text: linkMatch[1], type: 'link' } |
|||
: { text: linkMatch[1], type: 'text' } |
|||
); |
|||
remainingValue = remainingValue.slice(linkMatch[0].length); |
|||
continue; |
|||
} |
|||
|
|||
const strongMatch = |
|||
/^\*\*([^*\n]+)\*\*/.exec(remainingValue) ?? |
|||
/^__([^_\n]+)__/.exec(remainingValue); |
|||
|
|||
if (strongMatch) { |
|||
parts.push({ text: strongMatch[1], type: 'strong' }); |
|||
remainingValue = remainingValue.slice(strongMatch[0].length); |
|||
continue; |
|||
} |
|||
|
|||
const emphasisMatch = |
|||
/^\*([^*\n]+)\*/.exec(remainingValue) ?? |
|||
/^_([^_\n]+)_/.exec(remainingValue); |
|||
|
|||
if (emphasisMatch) { |
|||
parts.push({ text: emphasisMatch[1], type: 'emphasis' }); |
|||
remainingValue = remainingValue.slice(emphasisMatch[0].length); |
|||
continue; |
|||
} |
|||
|
|||
const codeMatch = /^`([^`\n]+)`/.exec(remainingValue); |
|||
|
|||
if (codeMatch) { |
|||
parts.push({ text: codeMatch[1], type: 'code' }); |
|||
remainingValue = remainingValue.slice(codeMatch[0].length); |
|||
continue; |
|||
} |
|||
|
|||
appendText(remainingValue[0]); |
|||
remainingValue = remainingValue.slice(1); |
|||
} |
|||
|
|||
return parts; |
|||
} |
|||
|
|||
export function parseSafeMarkdown(value: string): SafeMarkdownBlock[] { |
|||
const blocks: SafeMarkdownBlock[] = []; |
|||
let paragraphLines: string[] = []; |
|||
|
|||
const flushParagraph = () => { |
|||
if (paragraphLines.length > 0) { |
|||
blocks.push({ |
|||
parts: parseSafeMarkdownInline(paragraphLines.join(' ')), |
|||
type: 'paragraph' |
|||
}); |
|||
paragraphLines = []; |
|||
} |
|||
}; |
|||
|
|||
for (const line of value.replace(/\r\n?/g, '\n').split('\n')) { |
|||
if (!line.trim()) { |
|||
flushParagraph(); |
|||
continue; |
|||
} |
|||
|
|||
const headingMatch = /^#{1,6}\s+(.+)$/.exec(line); |
|||
|
|||
if (headingMatch) { |
|||
flushParagraph(); |
|||
blocks.push({ |
|||
parts: parseSafeMarkdownInline(headingMatch[1]), |
|||
type: 'heading' |
|||
}); |
|||
continue; |
|||
} |
|||
|
|||
const unorderedListMatch = /^\s*[-+*]\s+(.+)$/.exec(line); |
|||
const orderedListMatch = /^\s*\d+[.)]\s+(.+)$/.exec(line); |
|||
const listMatch = unorderedListMatch ?? orderedListMatch; |
|||
|
|||
if (listMatch) { |
|||
flushParagraph(); |
|||
|
|||
const type = unorderedListMatch ? 'unordered-list' : 'ordered-list'; |
|||
const previousBlock = blocks.at(-1); |
|||
const item = parseSafeMarkdownInline(listMatch[1]); |
|||
|
|||
if (previousBlock?.type === type) { |
|||
previousBlock.items.push(item); |
|||
} else { |
|||
blocks.push({ items: [item], type }); |
|||
} |
|||
|
|||
continue; |
|||
} |
|||
|
|||
paragraphLines.push(line); |
|||
} |
|||
|
|||
flushParagraph(); |
|||
|
|||
return blocks; |
|||
} |
|||
|
|||
@Component({ |
|||
changeDetection: ChangeDetectionStrategy.OnPush, |
|||
selector: 'gf-ai-chat-inline', |
|||
standalone: true, |
|||
template: ` |
|||
@for (part of parts(); track $index) { |
|||
@switch (part.type) { |
|||
@case ('strong') { |
|||
<strong>{{ part.text }}</strong> |
|||
} |
|||
@case ('emphasis') { |
|||
<em>{{ part.text }}</em> |
|||
} |
|||
@case ('code') { |
|||
<code>{{ part.text }}</code> |
|||
} |
|||
@case ('link') { |
|||
<a |
|||
rel="nofollow noopener noreferrer" |
|||
target="_blank" |
|||
[href]="part.href" |
|||
>{{ part.text }}</a |
|||
> |
|||
} |
|||
@default { |
|||
{{ part.text }} |
|||
} |
|||
} |
|||
} |
|||
` |
|||
}) |
|||
class GfAiChatInlineComponent { |
|||
public readonly parts = input.required<SafeMarkdownInlinePart[]>(); |
|||
} |
|||
|
|||
@Component({ |
|||
changeDetection: ChangeDetectionStrategy.OnPush, |
|||
imports: [ |
|||
GfAiChatInlineComponent, |
|||
IonIcon, |
|||
MatButtonModule, |
|||
MatCardModule, |
|||
MatFormFieldModule, |
|||
MatInputModule, |
|||
MatProgressSpinnerModule |
|||
], |
|||
selector: 'gf-ai-chat', |
|||
styleUrls: ['./ai-chat.component.scss'], |
|||
templateUrl: './ai-chat.component.html' |
|||
}) |
|||
export class GfAiChatComponent implements OnDestroy { |
|||
public readonly filters = input<Filter[]>([]); |
|||
public readonly model = input(''); |
|||
public readonly range = input<DateRange>(DEFAULT_DATE_RANGE); |
|||
|
|||
public readonly closed = output<void>(); |
|||
|
|||
protected readonly chat = new Chat({ |
|||
transport: new DefaultChatTransport({ |
|||
api: '/api/v1/ai/chat', |
|||
credentials: 'same-origin', |
|||
headers: () => { |
|||
const headers: Record<string, string> = { |
|||
[HEADER_KEY_TIMEZONE]: |
|||
Intl?.DateTimeFormat().resolvedOptions().timeZone |
|||
}; |
|||
const token = this.tokenStorageService.getToken(); |
|||
|
|||
if (token) { |
|||
headers[HEADER_KEY_TOKEN] = `Bearer ${token}`; |
|||
} |
|||
|
|||
return headers; |
|||
}, |
|||
prepareSendMessagesRequest: ({ headers, messages }) => { |
|||
return { |
|||
api: this.getApiUrl(), |
|||
body: { |
|||
messages: buildAiChatRequestMessages(messages) |
|||
}, |
|||
credentials: 'same-origin', |
|||
headers |
|||
}; |
|||
} |
|||
}) |
|||
}); |
|||
protected readonly hasConsent = signal(false); |
|||
protected readonly isBusy = computed(() => { |
|||
return this.chat.status === 'streaming' || this.chat.status === 'submitted'; |
|||
}); |
|||
protected readonly prompt = signal(''); |
|||
protected readonly scopeChips = computed(() => { |
|||
const chips = [ |
|||
`${$localize`Date range`}: ${this.getDateRangeLabel(this.range())}` |
|||
]; |
|||
|
|||
for (const filter of this.filters()) { |
|||
chips.push( |
|||
`${filterTypeLabels[filter.type]}: ${filter.label ?? filter.id}` |
|||
); |
|||
} |
|||
|
|||
if (this.filters().length === 0) { |
|||
chips.push($localize`All portfolio data`); |
|||
} |
|||
|
|||
return chips; |
|||
}); |
|||
|
|||
private readonly promptElement = |
|||
viewChild<ElementRef<HTMLTextAreaElement>>('promptInput'); |
|||
private readonly shouldFocusPrompt = signal(true); |
|||
private readonly scopeSignature = computed(() => { |
|||
const filters = this.filters() |
|||
.map(({ id, type }) => ({ id, type })) |
|||
.sort((filterA, filterB) => { |
|||
return `${filterA.type}:${filterA.id}`.localeCompare( |
|||
`${filterB.type}:${filterB.id}` |
|||
); |
|||
}); |
|||
|
|||
return JSON.stringify({ |
|||
filters, |
|||
model: this.model(), |
|||
range: this.range() |
|||
}); |
|||
}); |
|||
private readonly tokenStorageService = inject(TokenStorageService); |
|||
private readonly dataService = inject(DataService); |
|||
|
|||
public constructor() { |
|||
let previousScopeSignature: string | undefined; |
|||
|
|||
effect(() => { |
|||
const model = this.model(); |
|||
const scopeSignature = this.scopeSignature(); |
|||
|
|||
untracked(() => { |
|||
this.hasConsent.set( |
|||
!!model && |
|||
window.sessionStorage.getItem(this.getConsentKey(model)) === 'true' |
|||
); |
|||
|
|||
if ( |
|||
previousScopeSignature !== undefined && |
|||
previousScopeSignature !== scopeSignature |
|||
) { |
|||
this.resetChat(); |
|||
} |
|||
|
|||
previousScopeSignature = scopeSignature; |
|||
}); |
|||
}); |
|||
|
|||
effect(() => { |
|||
const hasConsent = this.hasConsent(); |
|||
const promptElement = this.promptElement(); |
|||
const shouldFocusPrompt = this.shouldFocusPrompt(); |
|||
|
|||
if (hasConsent && promptElement && shouldFocusPrompt) { |
|||
queueMicrotask(() => { |
|||
promptElement.nativeElement.focus(); |
|||
untracked(() => { |
|||
this.shouldFocusPrompt.set(false); |
|||
}); |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
addIcons({ |
|||
closeOutline, |
|||
refreshOutline, |
|||
sendOutline, |
|||
stopCircleOutline, |
|||
trashOutline |
|||
}); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.resetChat(); |
|||
} |
|||
|
|||
protected getMessageText(message: UIMessage) { |
|||
return message.parts |
|||
.filter(isTextUIPart) |
|||
.map((part) => part.text) |
|||
.join('\n\n'); |
|||
} |
|||
|
|||
protected getSafeMarkdownBlocks(message: UIMessage) { |
|||
return parseSafeMarkdown(this.getMessageText(message)); |
|||
} |
|||
|
|||
protected getSourceLabels(message: UIMessage) { |
|||
return getAiChatSourceLabels(message); |
|||
} |
|||
|
|||
protected onAcceptConsent() { |
|||
window.sessionStorage.setItem(this.getConsentKey(this.model()), 'true'); |
|||
this.shouldFocusPrompt.set(true); |
|||
this.hasConsent.set(true); |
|||
} |
|||
|
|||
protected onClear() { |
|||
this.resetChat(); |
|||
} |
|||
|
|||
protected onClose() { |
|||
this.resetChat(); |
|||
this.closed.emit(); |
|||
} |
|||
|
|||
protected onInput(event: Event) { |
|||
this.prompt.set((event.target as HTMLTextAreaElement).value); |
|||
} |
|||
|
|||
protected onKeydown(event: KeyboardEvent) { |
|||
if ( |
|||
event.key === 'Enter' && |
|||
!event.shiftKey && |
|||
!event.isComposing && |
|||
!this.isBusy() |
|||
) { |
|||
event.preventDefault(); |
|||
this.sendMessage(); |
|||
} |
|||
} |
|||
|
|||
protected onRetry() { |
|||
this.chat.clearError(); |
|||
void this.chat.regenerate(); |
|||
} |
|||
|
|||
protected onStop() { |
|||
void this.chat.stop(); |
|||
} |
|||
|
|||
protected onSubmit(event: Event) { |
|||
event.preventDefault(); |
|||
this.sendMessage(); |
|||
} |
|||
|
|||
private getApiUrl() { |
|||
const queryParams = this.dataService |
|||
.buildFiltersAsQueryParams({ filters: this.filters() }) |
|||
.append('range', this.range()); |
|||
|
|||
return `/api/v1/ai/chat?${queryParams.toString()}`; |
|||
} |
|||
|
|||
private getConsentKey(model: string) { |
|||
return `${AI_CHAT_CONSENT_KEY_PREFIX}:${model}`; |
|||
} |
|||
|
|||
private getDateRangeLabel(range: DateRange) { |
|||
const labels: Record<string, string> = { |
|||
'1d': $localize`Today`, |
|||
'1y': $localize`1 year`, |
|||
'5y': $localize`5 years`, |
|||
max: $localize`Max`, |
|||
mtd: $localize`Month to date`, |
|||
wtd: $localize`Week to date`, |
|||
ytd: $localize`Year to date` |
|||
}; |
|||
|
|||
return labels[range] ?? range; |
|||
} |
|||
|
|||
private resetChat() { |
|||
void this.chat.stop(); |
|||
this.chat.messages = []; |
|||
this.chat.clearError(); |
|||
this.prompt.set(''); |
|||
} |
|||
|
|||
private sendMessage() { |
|||
const prompt = this.prompt().trim(); |
|||
|
|||
if (!this.hasConsent() || !prompt || this.isBusy()) { |
|||
return; |
|||
} |
|||
|
|||
this.prompt.set(''); |
|||
void this.chat.sendMessage({ text: prompt }); |
|||
} |
|||
} |
|||
@ -0,0 +1,102 @@ |
|||
import '@angular/localize/init'; |
|||
|
|||
import { GfAnalysisPageComponent } from './analysis-page.component'; |
|||
|
|||
jest.mock('@ionic/angular/standalone', () => { |
|||
const { Component } = |
|||
jest.requireActual<typeof import('@angular/core')>('@angular/core'); |
|||
|
|||
class IonIconMock {} |
|||
|
|||
Component({ |
|||
inputs: ['name'], |
|||
selector: 'ion-icon', |
|||
standalone: true, |
|||
template: '' |
|||
})(IonIconMock); |
|||
|
|||
return { IonIcon: IonIconMock }; |
|||
}); |
|||
|
|||
jest.mock('ionicons', () => { |
|||
return { addIcons: () => undefined }; |
|||
}); |
|||
|
|||
jest.mock('ionicons/icons', () => { |
|||
return { |
|||
copyOutline: '', |
|||
diamondOutline: '', |
|||
ellipsisVertical: '', |
|||
sparklesOutline: '' |
|||
}; |
|||
}); |
|||
|
|||
jest.mock('./ai-chat.component', () => { |
|||
const { Component } = |
|||
jest.requireActual<typeof import('@angular/core')>('@angular/core'); |
|||
|
|||
class GfAiChatComponentMock {} |
|||
|
|||
Component({ |
|||
selector: 'gf-ai-chat', |
|||
standalone: true, |
|||
template: '' |
|||
})(GfAiChatComponentMock); |
|||
|
|||
return { GfAiChatComponent: GfAiChatComponentMock }; |
|||
}); |
|||
|
|||
describe('GfAnalysisPageComponent AI chat eligibility', () => { |
|||
const canUseAiChat = ( |
|||
eligibility: { |
|||
hasGlobalPermission?: boolean; |
|||
hasImpersonationId?: boolean; |
|||
hasUserPermission?: boolean; |
|||
isExperimentalFeatures?: boolean; |
|||
model?: string; |
|||
} = {} |
|||
) => { |
|||
const { |
|||
hasGlobalPermission = true, |
|||
hasImpersonationId = false, |
|||
hasUserPermission = true, |
|||
isExperimentalFeatures = true |
|||
} = eligibility; |
|||
const model = Object.hasOwn(eligibility, 'model') |
|||
? eligibility.model |
|||
: 'openai/test-model'; |
|||
|
|||
const component = Object.create( |
|||
GfAnalysisPageComponent.prototype |
|||
) as unknown as { |
|||
aiChatModel?: string; |
|||
canUseAiChat: boolean; |
|||
hasImpersonationId: boolean; |
|||
hasPermissionToAccessAiChat: boolean; |
|||
hasPermissionToUseAiChat: boolean; |
|||
user: { settings: { isExperimentalFeatures: boolean } }; |
|||
}; |
|||
|
|||
component.aiChatModel = model; |
|||
component.hasImpersonationId = hasImpersonationId; |
|||
component.hasPermissionToAccessAiChat = hasUserPermission; |
|||
component.hasPermissionToUseAiChat = hasGlobalPermission; |
|||
component.user = { settings: { isExperimentalFeatures } }; |
|||
|
|||
return component.canUseAiChat; |
|||
}; |
|||
|
|||
it('allows a fully eligible user', () => { |
|||
expect(canUseAiChat({})).toBe(true); |
|||
}); |
|||
|
|||
it.each([ |
|||
{ model: undefined }, |
|||
{ hasGlobalPermission: false }, |
|||
{ hasUserPermission: false }, |
|||
{ isExperimentalFeatures: false }, |
|||
{ hasImpersonationId: true } |
|||
])('blocks an ineligible context (%o)', (eligibility) => { |
|||
expect(canUseAiChat(eligibility)).toBe(false); |
|||
}); |
|||
}); |
|||
Loading…
Reference in new issue