Add temp, topK, topP etc settings for chat

Author: campers

frontend/src/app/core/user/user.service.ts

@@ -1,12 +1,12 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { User } from 'app/core/user/user.types';
-import { catchError, Observable, ReplaySubject, tap, throwError } from 'rxjs';
+import { catchError, Observable, BehaviorSubject, tap, throwError, mergeMap } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class UserService {
     private _httpClient = inject(HttpClient);
-    private _user: ReplaySubject<User> = new ReplaySubject<User>(1);
+    private _user: BehaviorSubject<User> = new BehaviorSubject<User>(null);
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -34,6 +34,13 @@ export class UserService {
      * Get the current signed-in user data
      */
     get(): Observable<User> {
+        // Return the current value if it exists
+        const currentUser = this._user.getValue();
+        if (currentUser) {
+            return this.user$;
+        }
+
+        // Fetch from server if no current value
         return this._httpClient.get<User>(`/api/profile/view`).pipe(
             tap((user) => {
                 user = (user as any).data
@@ -42,7 +49,8 @@ export class UserService {
             catchError(error => {
                 console.error('Error loading profile', error);
                 return throwError(() => new Error('Error loading profile'));
-            })
+            }),
+            mergeMap(value => this.user$)
         );
     }
 
@@ -51,10 +59,11 @@ export class UserService {
      *
      * @param user
      */
-    update(user: User): Observable<User> {
-        return this._httpClient.patch<User>('/api/profile/update', { user }).pipe(
+    update(user: Partial<User>): Observable<User> {
+        return this._httpClient.post<User>('/api/profile/update', { user }).pipe(
             tap((response) => {
-                this._user.next(response);
+                response = (response as any).data;
+                this._user.next({...response});
             })
         );
     }

frontend/src/app/core/user/user.types.ts

@@ -1,8 +1,24 @@
+export interface GenerateOptions {
+    /** Temperature controls randomness in token selection (0-2) */
+    temperature?: number;
+    /** Top P controls diversity via nucleus sampling (0-1) */
+    topP?: number;
+    topK?: number;
+    /** Presence penalty reduces repetition (-2.0 to 2.0) */
+    presencePenalty?: number;
+    /** Frequency penalty reduces repetition (-2.0 to 2.0) */
+    frequencyPenalty?: number;
+}
+
 export interface User {
     id: string;
     name: string;
     email: string;
     avatar?: string;
     status?: string;
-    defaultChatLlmId?: string;
+
+    chat?: GenerateOptions & {
+        enabledLLMs: Record<string, boolean>;
+        defaultLLM: string;
+    };
 }

frontend/src/app/modules/chat/chat-info/chat-info.component.html

@@ -6,68 +6,65 @@
         <button mat-icon-button (click)="drawer.close()">
             <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
         </button>
-        <div class="ml-2 text-lg font-medium">Chat info</div>
+        <div class="ml-2 text-lg font-medium">Chat Settings</div>
     </div>
 
-    <div class="overflow-y-auto">
-        <div class="px-7 py-10">
-            <!-- Media
-            <div class="text-lg font-medium">Media</div>
-            <div class="mt-4 grid grid-cols-4 gap-1">
-                @for (media of chat.contact.attachments.media; track media) {
-                    <img class="h-20 rounded object-cover" [src]="media" />
-                }
-            </div>
-            -->
-            <!-- Details
-            <div class="mt-10 space-y-4">
-                <div class="mb-3 text-lg font-medium">Details</div>
-                @if (chat.contact.details.emails.length) {
-                    <div>
-                        <div class="text-secondary font-medium">Email</div>
-                        <div class="">
-                            {{ chat.contact.details.emails[0].email }}
-                        </div>
-                    </div>
-                }
-                @if (chat.contact.details.phoneNumbers.length) {
+    <div class="overflow-y-auto" [class.opacity-50]="loading">
+        <div class="px-7 py-6">
+            <div class="mt-4 space-y-4">
+                <div class="mb-2 text-lg font-medium">Message Generation Settings</div>
+                
+                <div class="space-y-1">
                     <div>
-                        <div class="text-secondary font-medium">
-                            Phone number
-                        </div>
-                        <div class="">
-                            {{
-                                chat.contact.details.phoneNumbers[0].phoneNumber
-                            }}
-                        </div>
+                        <label class="text-secondary font-medium">Temperature</label>
+                        <span class="pl-2 font-bold text-secondary">{{settings.temperature}}</span>
+                        <mat-slider [min]="0" [max]="2" [step]="0.1">
+                            <input matSliderThumb [(ngModel)]="settings.temperature" (change)="onSettingChange()">
+                        </mat-slider>
                     </div>
-                }
-                @if (chat.contact.details.title) {
+
                     <div>
-                        <div class="text-secondary font-medium">Title</div>
-                        <div class="">{{ chat.contact.details.title }}</div>
+                        <label class="text-secondary font-medium">Top P</label>
+                        <span class="pl-2 font-bold text-secondary">{{settings.topP}}</span>
+                        <mat-slider [min]="0" [max]="1" [step]="0.05">
+                            <input matSliderThumb [(ngModel)]="settings.topP" (change)="onSettingChange()">
+                        </mat-slider>
                     </div>
-                }
-                @if (chat.contact.details.company) {
+
                     <div>
-                        <div class="text-secondary font-medium">Company</div>
-                        <div class="">{{ chat.contact.details.company }}</div>
+                        <label class="text-secondary font-medium">Top K</label>
+                        <span class="pl-2 font-bold text-secondary">{{settings.topK}}</span>
+                        <mat-slider [min]="1" [max]="60" [step]="1">
+                            <input matSliderThumb [(ngModel)]="settings.topK" (change)="onSettingChange()">
+                        </mat-slider>
                     </div>
-                }
-                @if (chat.contact.details.birthday) {
+
                     <div>
-                        <div class="text-secondary font-medium">Birthday</div>
-                        <div class="">{{ chat.contact.details.birthday }}</div>
+                        <label class="text-secondary font-medium">Presence Penalty</label>
+                        <span class="pl-2 font-bold text-secondary">{{settings.presencePenalty}}</span>
+                        <mat-slider [min]="0" [max]="2" [step]="0.1">
+                            <input matSliderThumb [(ngModel)]="settings.presencePenalty" (change)="onSettingChange()">
+                        </mat-slider>
                     </div>
-                }
-                @if (chat.contact.details.address) {
+
                     <div>
-                        <div class="text-secondary font-medium">Address</div>
-                        <div class="">{{ chat.contact.details.address }}</div>
+                        <label class="text-secondary font-medium">Frequency Penalty</label>
+                        <span class="pl-2 font-bold text-secondary">{{settings.frequencyPenalty}}</span>
+                        <mat-slider [min]="0" [max]="2" [step]="0.1">
+                            <input matSliderThumb [(ngModel)]="settings.frequencyPenalty" (change)="onSettingChange()">
+                        </mat-slider>
                     </div>
-                }
+                </div>
+            </div>
+            
+            <div *ngIf="error" class="mt-4 p-3 bg-red-100 text-red-700 rounded">
+                {{ error }}
+            </div>
+            
+            <div *ngIf="loading" class="mt-4 flex items-center justify-center">
+                <mat-spinner diameter="24"></mat-spinner>
+                <span class="ml-2">Saving settings...</span>
             </div>
-            -->
         </div>
     </div>
 </div>

frontend/src/app/modules/chat/chat-info/chat-info.component.spec.ts

@@ -0,0 +1,93 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChatInfoComponent } from './chat-info.component';
+import { UserService } from 'app/core/user/user.service';
+import { BehaviorSubject, of } from 'rxjs';
+import { User } from 'app/core/user/user.types';
+import { MatDrawer } from '@angular/material/sidenav';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatSliderHarness } from '@angular/material/slider/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ChatInfoComponent', () => {
+    let component: ChatInfoComponent;
+    let fixture: ComponentFixture<ChatInfoComponent>;
+    let loader: HarnessLoader;
+    let mockUserService: jasmine.SpyObj<UserService>;
+    let mockUser$: BehaviorSubject<User>;
+
+    beforeEach(async () => {
+        // Create mock user with default chat settings
+        const mockUser: User = {
+            id: '1',
+            name: 'Test User',
+            email: 'test@test.com',
+            chat: {
+                temperature: 0.7,
+                enabledLLMs: {},
+                defaultLLM: 'test-llm'
+            }
+        };
+
+        // Setup mock user service
+        mockUser$ = new BehaviorSubject<User>(mockUser);
+        mockUserService = jasmine.createSpyObj('UserService', ['update']);
+        mockUserService.user$ = mockUser$.asObservable();
+        mockUserService.update.and.returnValue(of(mockUser));
+
+        await TestBed.configureTestingModule({
+            imports: [
+                ChatInfoComponent,
+                NoopAnimationsModule
+            ],
+            providers: [
+                { provide: UserService, useValue: mockUserService },
+                { provide: MatDrawer, useValue: { close: () => {} } }
+            ]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ChatInfoComponent);
+        component = fixture.componentInstance;
+        loader = TestbedHarnessEnvironment.loader(fixture);
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should load initial settings from user service', async () => {
+        // Get all slider harnesses
+        const sliders = await loader.getAllHarnesses(MatSliderHarness);
+        
+        // Verify initial values match mock user settings
+        expect(await sliders[0].getValue()).toBe(0.7); // temperature
+        expect(await sliders[1].getValue()).toBe(0.9); // topP
+        expect(await sliders[2].getValue()).toBe(0.5); // presencePenalty
+        expect(await sliders[3].getValue()).toBe(0.5); // frequencyPenalty
+    });
+
+    it('should update settings when sliders change', async () => {
+        // Get temperature slider and change its value
+        const temperatureSlider = await loader.getHarness(MatSliderHarness);
+        await temperatureSlider.setValue(1.5);
+        
+        // Verify component state was updated
+        expect(component.settings.temperature).toBe(1.5);
+    });
+
+    it('should save settings on component destroy', () => {
+        // Modify settings
+        component.settings.temperature = 1.5;
+        
+        // Trigger component destruction
+        component.ngOnDestroy();
+        
+        // Verify settings were saved
+        expect(mockUserService.update).toHaveBeenCalledWith({
+            chat: jasmine.objectContaining({
+                temperature: 1.5
+            })
+        });
+    });
+});

frontend/src/app/modules/chat/chat-info/chat-info.component.ts

@@ -2,27 +2,94 @@ import {
     ChangeDetectionStrategy,
     Component,
     Input,
+    OnDestroy,
     ViewEncapsulation,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 import { MatDrawer } from '@angular/material/sidenav';
 import { Chat } from 'app/modules/chat/chat.types';
+import { User } from 'app/core/user/user.types';
+import { UserService } from 'app/core/user/user.service';
+import { EMPTY, Subject, catchError, takeUntil, finalize } from 'rxjs';
 
 @Component({
     selector: 'chat-info',
     templateUrl: './chat-info.component.html',
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [MatButtonModule, MatIconModule],
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        MatSliderModule,
+        MatProgressSpinnerModule,
+        FormsModule
+    ],
 })
-export class ChatInfoComponent {
+export class ChatInfoComponent implements OnDestroy {
     @Input() chat: Chat;
     @Input() drawer: MatDrawer;
+    
+    settings: User['chat'];
+    loading = false;
+    error: string | null = null;
+    private destroy$ = new Subject<void>();
+
+    constructor(private userService: UserService) {
+        this.userService.user$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(user => {
+                this.settings = { ...user.chat };
+            });
+    }
+
+    /**
+     * Saves the current chat settings to the user profile
+     * Handles loading state and error display
+     */
+    /**
+     * Saves the current chat settings to the user profile
+     * Handles loading state and error display
+     */
+    private saveSettings(): void {
+        if (!this.settings) {
+            return;
+        }
+
+        this.loading = true;
+        this.error = null;
+        
+        this.userService.update({
+            chat: this.settings
+        }).pipe(
+            takeUntil(this.destroy$),
+            catchError((error) => {
+                this.error = error.error?.error || 'Failed to save settings';
+                console.error('Failed to save chat settings:', error);
+                return EMPTY;
+            }),
+            finalize(() => {
+                this.loading = false;
+            })
+        ).subscribe();
+    }
 
     /**
-     * Constructor
+     * Handler for slider value changes
+     * Triggers immediate save of updated settings
      */
-    constructor() {}
+    onSettingChange(): void {
+        this.saveSettings();
+    }
+
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
 }