mirror of https://github.com/ghostfolio/ghostfolio
Browse Source
- Add /agent route and full-page chat UI (suggestions, messages, send) - Add 'AI Agent' nav link in header (desktop + mobile) for users with readAiPrompt - Use session JWT for agent API (no security token prompt when logged in) - Add LangSmith tracing (wrapAISDK, createLangSmithProviderOptions) when LANGSMITH_API_KEY set - Document LANGSMITH_* in ENV_KEYS and agent README - Add TESTING.md for curl/browser agent testing - Add langsmith dep; internal route agent in routes.ts Co-authored-by: Cursor <cursoragent@cursor.com>pull/6386/head
Yash Kuceriya
1 month ago
14 changed files with 962 additions and 665 deletions
@ -0,0 +1,55 @@ |
|||||
|
# How to Test the Agent (Production / Railway) |
||||
|
|
||||
|
Base URL: `https://ghostfolio-production-1d0f.up.railway.app` (or your deployed URL) |
||||
|
|
||||
|
## 1. Health check |
||||
|
|
||||
|
```bash |
||||
|
curl -s https://ghostfolio-production-1d0f.up.railway.app/api/v1/health |
||||
|
# Expect: {"status":"OK"} |
||||
|
``` |
||||
|
|
||||
|
## 2. Get a JWT from your security token |
||||
|
|
||||
|
Use your Ghostfolio **security token** (Admin → your user → access token). |
||||
|
|
||||
|
```bash |
||||
|
export BASE=https://ghostfolio-production-1d0f.up.railway.app |
||||
|
export SECURITY_TOKEN="<paste your security token here>" |
||||
|
|
||||
|
curl -s -X POST "$BASE/api/v1/auth/anonymous" \ |
||||
|
-H "Content-Type: application/json" \ |
||||
|
-d "{\"accessToken\": \"$SECURITY_TOKEN\"}" |
||||
|
# Expect: {"authToken":"eyJhbGc..."} → save the authToken value |
||||
|
``` |
||||
|
|
||||
|
## 3. Chat with the agent (API) |
||||
|
|
||||
|
```bash |
||||
|
export JWT="<paste the authToken from step 2>" |
||||
|
|
||||
|
curl -s -X POST "$BASE/api/v1/agent/chat" \ |
||||
|
-H "Content-Type: application/json" \ |
||||
|
-H "Authorization: Bearer $JWT" \ |
||||
|
-d '{"messages":[{"role":"user","content":"What is my current portfolio allocation?"}]}' |
||||
|
# Expect: {"message":{"role":"assistant","content":"..."},"verification":{...}} |
||||
|
``` |
||||
|
|
||||
|
## 4. Chat in the browser (easiest) |
||||
|
|
||||
|
1. Open: **https://ghostfolio-production-1d0f.up.railway.app/api/v1/agent/chat** |
||||
|
2. When prompted, paste your **security token**. |
||||
|
3. The page exchanges it for a JWT and then you can chat in the UI. |
||||
|
|
||||
|
## 5. Example test questions |
||||
|
|
||||
|
- "What is my portfolio allocation?" |
||||
|
- "How did my portfolio perform this year?" |
||||
|
- "List my recent transactions." |
||||
|
- "What is the current price of AAPL?" |
||||
|
|
||||
|
## Troubleshooting |
||||
|
|
||||
|
- **403 on /auth/anonymous:** Security token is wrong or expired. Regenerate in Ghostfolio Admin. |
||||
|
- **403 on /agent/chat:** JWT expired or missing. Get a fresh JWT from step 2. |
||||
|
- **500 or empty response:** Check `OPENROUTER_API_KEY` and `OPENROUTER_MODEL` in Railway Variables. |
||||
@ -0,0 +1,81 @@ |
|||||
|
<div class="container h-100 d-flex flex-column agent-page"> |
||||
|
<h1 class="h3 line-height-1 mb-3 mt-3"> |
||||
|
<span i18n>AI Agent</span> |
||||
|
<small class="text-muted d-block mt-1" i18n>Ask questions about your portfolio in plain language.</small> |
||||
|
</h1> |
||||
|
|
||||
|
@if (messages.length === 0 && !isLoading) { |
||||
|
<div class="suggestions mb-3"> |
||||
|
<p class="text-muted mb-2" i18n>Try asking:</p> |
||||
|
<div class="d-flex flex-wrap gap-2"> |
||||
|
@for (s of suggestions; track s) { |
||||
|
<button |
||||
|
class="suggestion-chip" |
||||
|
mat-stroked-button |
||||
|
(click)="onSuggestionClick(s)" |
||||
|
> |
||||
|
{{ s }} |
||||
|
</button> |
||||
|
} |
||||
|
</div> |
||||
|
</div> |
||||
|
} |
||||
|
|
||||
|
<div |
||||
|
#messagesContainer |
||||
|
class="messages-container flex-grow-1 overflow-auto mb-2 p-2 rounded" |
||||
|
> |
||||
|
@for (msg of messages; track $index) { |
||||
|
<div |
||||
|
class="message-row d-flex gap-2 mb-3" |
||||
|
[class.user]="msg.role === 'user'" |
||||
|
[class.assistant]="msg.role === 'assistant'" |
||||
|
> |
||||
|
@if (msg.role === 'assistant') { |
||||
|
<div class="avatar assistant-avatar">G</div> |
||||
|
} |
||||
|
<div |
||||
|
class="message-bubble p-2 rounded" |
||||
|
[class.user-bubble]="msg.role === 'user'" |
||||
|
[class.assistant-bubble]="msg.role === 'assistant'" |
||||
|
> |
||||
|
<span class="message-content">{{ msg.content }}</span> |
||||
|
</div> |
||||
|
@if (msg.role === 'user') { |
||||
|
<div class="avatar user-avatar">U</div> |
||||
|
} |
||||
|
</div> |
||||
|
} |
||||
|
@if (isLoading) { |
||||
|
<div class="message-row d-flex gap-2 mb-3 assistant"> |
||||
|
<div class="avatar assistant-avatar">G</div> |
||||
|
<div class="message-bubble assistant-bubble p-2 rounded typing"> |
||||
|
<span class="typing-dots"> |
||||
|
<span></span><span></span><span></span> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
|
||||
|
<div class="input-bar d-flex gap-2 align-items-end p-2 rounded"> |
||||
|
<textarea |
||||
|
#inputEl |
||||
|
class="flex-grow-1 p-2 rounded border-0" |
||||
|
[placeholder]="'Ask about your portfolio...' | i18n" |
||||
|
[(ngModel)]="inputText" |
||||
|
[disabled]="isLoading" |
||||
|
rows="1" |
||||
|
(keydown.enter)="onInputKeydown($event)" |
||||
|
></textarea> |
||||
|
<button |
||||
|
class="send-btn" |
||||
|
mat-flat-button |
||||
|
color="primary" |
||||
|
[disabled]="isLoading || !inputText?.trim()" |
||||
|
(click)="send()" |
||||
|
> |
||||
|
<span i18n>Send</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,139 @@ |
|||||
|
import { internalRoutes } from '@ghostfolio/common/routes/routes'; |
||||
|
import { NotificationService } from '@ghostfolio/ui/notifications'; |
||||
|
|
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
OnDestroy, |
||||
|
OnInit, |
||||
|
ViewChild |
||||
|
} from '@angular/core'; |
||||
|
import { FormsModule } from '@angular/forms'; |
||||
|
import { HttpClient } from '@angular/common/http'; |
||||
|
import { MatButtonModule } from '@angular/material/button'; |
||||
|
import { RouterModule } from '@angular/router'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
|
||||
|
interface ChatMessage { |
||||
|
role: 'user' | 'assistant'; |
||||
|
content: string; |
||||
|
} |
||||
|
|
||||
|
interface AgentChatResponse { |
||||
|
message: { role: string; content: string }; |
||||
|
verification?: { passed: boolean; type: string; message?: string }; |
||||
|
error?: string; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
host: { class: 'page' }, |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
FormsModule, |
||||
|
MatButtonModule, |
||||
|
RouterModule |
||||
|
], |
||||
|
selector: 'gf-agent-page', |
||||
|
styleUrls: ['./agent-page.scss'], |
||||
|
templateUrl: './agent-page.html' |
||||
|
}) |
||||
|
export class GfAgentPageComponent implements OnDestroy, OnInit { |
||||
|
@ViewChild('messagesContainer') messagesContainer: ElementRef<HTMLElement>; |
||||
|
@ViewChild('inputEl') inputEl: ElementRef<HTMLTextAreaElement>; |
||||
|
|
||||
|
public inputText = ''; |
||||
|
public isLoading = false; |
||||
|
public messages: ChatMessage[] = []; |
||||
|
public routerLinkPortfolio = internalRoutes.portfolio.routerLink; |
||||
|
public suggestions = [ |
||||
|
$localize`What is my portfolio allocation?`, |
||||
|
$localize`How did my portfolio perform this year?`, |
||||
|
$localize`List my recent transactions.`, |
||||
|
$localize`What is the current price of AAPL?` |
||||
|
]; |
||||
|
|
||||
|
private unsubscribeSubject = new Subject<void>(); |
||||
|
|
||||
|
public constructor( |
||||
|
private changeDetectorRef: ChangeDetectorRef, |
||||
|
private http: HttpClient, |
||||
|
private notificationService: NotificationService |
||||
|
) {} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
// No auth needed here - AuthGuard ensures user is logged in; interceptor adds JWT
|
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.unsubscribeSubject.next(); |
||||
|
this.unsubscribeSubject.complete(); |
||||
|
} |
||||
|
|
||||
|
public onInputKeydown(event: KeyboardEvent) { |
||||
|
if (event.key !== 'Enter') return; |
||||
|
if (event.shiftKey) return; // allow newline with Shift+Enter
|
||||
|
event.preventDefault(); |
||||
|
this.send(); |
||||
|
} |
||||
|
|
||||
|
public onSuggestionClick(text: string) { |
||||
|
this.inputText = text; |
||||
|
this.send(); |
||||
|
} |
||||
|
|
||||
|
public send() { |
||||
|
const text = (this.inputText ?? '').trim(); |
||||
|
if (!text || this.isLoading) return; |
||||
|
|
||||
|
this.inputText = ''; |
||||
|
this.messages.push({ role: 'user', content: text }); |
||||
|
this.isLoading = true; |
||||
|
this.scrollToBottom(); |
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
|
||||
|
const body = { |
||||
|
messages: this.messages.map((m) => ({ role: m.role, content: m.content })) |
||||
|
}; |
||||
|
|
||||
|
this.http |
||||
|
.post<AgentChatResponse>('/api/v1/agent/chat', body) |
||||
|
.pipe(takeUntil(this.unsubscribeSubject)) |
||||
|
.subscribe({ |
||||
|
next: (res) => { |
||||
|
this.messages.push({ |
||||
|
role: 'assistant', |
||||
|
content: res.message?.content ?? $localize`No response.` |
||||
|
}); |
||||
|
this.isLoading = false; |
||||
|
this.scrollToBottom(); |
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
}, |
||||
|
error: (err) => { |
||||
|
const msg = |
||||
|
err?.error?.error ?? |
||||
|
err?.message ?? |
||||
|
$localize`Request failed. Check your connection and try again.`; |
||||
|
this.messages.push({ |
||||
|
role: 'assistant', |
||||
|
content: $localize`Error: ${msg}` |
||||
|
}); |
||||
|
this.isLoading = false; |
||||
|
this.scrollToBottom(); |
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
this.notificationService.alert({ title: $localize`Agent Error`, message: msg }); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private scrollToBottom() { |
||||
|
setTimeout(() => { |
||||
|
const el = this.messagesContainer?.nativeElement; |
||||
|
if (el) { |
||||
|
el.scrollTop = el.scrollHeight; |
||||
|
} |
||||
|
}, 50); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,112 @@ |
|||||
|
.agent-page { |
||||
|
max-width: 48rem; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
.messages-container { |
||||
|
min-height: 12rem; |
||||
|
background: var(--mat-sys-surface-container-low, #f5f5f5); |
||||
|
} |
||||
|
|
||||
|
:host-context(.dark-theme) .messages-container { |
||||
|
background: var(--mat-sys-surface-container-low, #1e1e1e); |
||||
|
} |
||||
|
|
||||
|
.message-row { |
||||
|
max-width: 90%; |
||||
|
&.user { |
||||
|
flex-direction: row-reverse; |
||||
|
margin-left: auto; |
||||
|
.user-bubble { |
||||
|
background: var(--mat-sys-primary-container, #d0bcff); |
||||
|
color: var(--mat-sys-on-primary-container, #1d1b20); |
||||
|
} |
||||
|
} |
||||
|
&.assistant { |
||||
|
margin-right: auto; |
||||
|
.assistant-bubble { |
||||
|
background: var(--mat-sys-surface-container-high, #e6e0e9); |
||||
|
color: var(--mat-sys-on-surface, #1c1b1f); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host-context(.dark-theme) .message-row.assistant .assistant-bubble { |
||||
|
background: var(--mat-sys-surface-container-high, #2d2a32); |
||||
|
color: var(--mat-sys-on-surface, #e6e1e5); |
||||
|
} |
||||
|
|
||||
|
.message-bubble { |
||||
|
max-width: 100%; |
||||
|
word-break: break-word; |
||||
|
white-space: pre-wrap; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 2rem; |
||||
|
height: 2rem; |
||||
|
border-radius: 50%; |
||||
|
flex-shrink: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 0.75rem; |
||||
|
font-weight: 700; |
||||
|
&.user-avatar { |
||||
|
background: var(--mat-sys-primary, #6750a4); |
||||
|
color: white; |
||||
|
} |
||||
|
&.assistant-avatar { |
||||
|
background: var(--mat-sys-secondary-container, #e8def8); |
||||
|
color: var(--mat-sys-on-secondary-container, #1d1b20); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.typing-dots { |
||||
|
display: flex; |
||||
|
gap: 0.25rem; |
||||
|
span { |
||||
|
width: 0.5rem; |
||||
|
height: 0.5rem; |
||||
|
border-radius: 50%; |
||||
|
background: currentColor; |
||||
|
opacity: 0.5; |
||||
|
animation: typing-blink 1.4s ease-in-out infinite both; |
||||
|
&:nth-child(2) { |
||||
|
animation-delay: 0.2s; |
||||
|
} |
||||
|
&:nth-child(3) { |
||||
|
animation-delay: 0.4s; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes typing-blink { |
||||
|
0%, |
||||
|
80%, |
||||
|
100% { |
||||
|
opacity: 0.3; |
||||
|
} |
||||
|
40% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.input-bar { |
||||
|
background: var(--mat-sys-surface-container, #f3edf7); |
||||
|
textarea { |
||||
|
min-height: 2.5rem; |
||||
|
resize: none; |
||||
|
font: inherit; |
||||
|
outline: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host-context(.dark-theme) .input-bar { |
||||
|
background: var(--mat-sys-surface-container, #2d2a32); |
||||
|
} |
||||
|
|
||||
|
.suggestion-chip { |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue