joydip.manna/neoban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate chat message form to signal based form

Browse Source
This commit is contained in:
kushal-saha 2026-05-04 12:00:13 +00:00
parent 98cef31ae2
commit 2cecc4aceb
2 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/chat/chat.html
View File

@ -64,15 +64,14 @@
<input <input
class="flex-1 bg-transparent border-none text-white text-base py-1 px-2 outline-none font-inherit placeholder-slate-500" class="flex-1 bg-transparent border-none text-white text-base py-1 px-2 outline-none font-inherit placeholder-slate-500"
type="text" type="text"
[formControl]="messageControl" [formField]="messageForm.message"
(keydown.enter)="sendMessage()" (keydown.enter)="sendMessage()"
placeholder="Type a message..." placeholder="Type a message..."
[disabled]="messageStore.isLoading()"
/> />
<button <button
class="bg-linear-to-br from-[#00f2fe] to-[#4facfe] border-none w-8 h-8 rounded-full flex items-center justify-center cursor-pointer text-white transition-all duration-200 hover:scale-105 hover:-translate-y-0.5 hover:shadow-[0_10px_20px_rgba(79,172,254,0.3)] active:scale-95 disabled:hover:scale-100 disabled:hover:translate-y-0 disabled:!bg-none disabled:bg-white/10 disabled:text-white/30 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none" class="bg-linear-to-br from-[#00f2fe] to-[#4facfe] border-none w-8 h-8 rounded-full flex items-center justify-center cursor-pointer text-white transition-all duration-200 hover:scale-105 hover:-translate-y-0.5 hover:shadow-[0_10px_20px_rgba(79,172,254,0.3)] active:scale-95 disabled:hover:scale-100 disabled:hover:translate-y-0 disabled:!bg-none disabled:bg-white/10 disabled:text-white/30 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none"
(click)="sendMessage()" (click)="sendMessage()"
[disabled]="!messageControl.value || messageStore.isLoading()" [disabled]="messageForm.message().invalid() || messageStore.isLoading()"
> >
<svg class="w-3 h-3 fill-current" viewBox="0 0 24 24"> <svg class="w-3 h-3 fill-current" viewBox="0 0 24 24">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" /> <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />

15
frontend/src/app/chat/chat.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, ViewChild, effect, inject } from '@angular/core'; import { Component, ElementRef, ViewChild, effect, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormControl, ReactiveFormsModule } from '@angular/forms'; import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { ChatStore, MessageStore } from './chat.store'; import { ChatStore, MessageStore } from './chat.store';
@ -7,21 +7,26 @@ import { Sidebar } from '../core/layout/sidebar/sidebar';
import { Loader } from '../shared/loader/loader'; import { Loader } from '../shared/loader/loader';
import { InfiniteScroll } from '../core/directives/infinite-scroll'; import { InfiniteScroll } from '../core/directives/infinite-scroll';
import { environment } from '../../environments/environment.development'; import { environment } from '../../environments/environment.development';
import { form, FormField, max, min, required } from '@angular/forms/signals';
@Component({ @Component({
selector: 'app-chat', selector: 'app-chat',
standalone: true, standalone: true,
imports: [CommonModule, ReactiveFormsModule, Sidebar, Loader, InfiniteScroll], imports: [CommonModule, Sidebar, Loader, InfiniteScroll, FormField],
templateUrl: './chat.html', templateUrl: './chat.html',
styleUrl: './chat.css', styleUrl: './chat.css',
}) })
export class Chat { export class Chat {
protected readonly messageStore = inject(MessageStore); protected readonly messageStore = inject(MessageStore);
private readonly route = inject(ActivatedRoute); private readonly route = inject(ActivatedRoute);
private messageModel = signal<{ message: string }>({ message: '' });
@ViewChild('scrollContainer') private scrollContainer!: ElementRef; @ViewChild('scrollContainer') private scrollContainer!: ElementRef;
messageControl = new FormControl(''); messageForm = form(this.messageModel, (schema) => {
required(schema.message, { message: 'Message is required' });
min(schema.message, 3, { message: 'Message must be minimum 3 letters' });
});
constructor() { constructor() {
// Scroll to bottom when messages change // Scroll to bottom when messages change
@ -48,7 +53,7 @@ export class Chat {
errorMessage = ''; errorMessage = '';
sendMessage() { sendMessage() {
const value = this.messageControl.value; const value = this.messageForm.message().value();
if (value && value.trim() && !this.messageStore.isLoading()) { if (value && value.trim() && !this.messageStore.isLoading()) {
const words = value.trim().split(/\s+/).length; const words = value.trim().split(/\s+/).length;
if (words > 400) { if (words > 400) {
@ -57,7 +62,7 @@ export class Chat {
} }
this.errorMessage = ''; this.errorMessage = '';
this.messageStore.sendMessage(value.trim()); this.messageStore.sendMessage(value.trim());
this.messageControl.setValue(''); this.messageForm.message().value.set('');
} }
} }