feat: add input

Author: Angular2Guy

frontend/src/angular/src/app/mcp-client/mcp-client.component.html

@@ -24,14 +24,16 @@
     </div>
   </div>
 </mat-toolbar>
+<form #userForm="ngForm" (ngSubmit)="submitForm()">
 <div class="my-input-container">
   <div class="my-textarea">
     <mat-form-field class="example-full-width">
       <mat-label>Query about books or movies</mat-label>
-      <textarea matInput placeholder="Ask about books or movies."></textarea>
+      <textarea matInput placeholder="Ask about books or movies." [(ngModel)]="query"></textarea>
     </mat-form-field>
   </div>
   <div class="my-button">
-    <button matButton="filled">Basic</button>    
+    <button matButton="filled" type="submit">Basic</button>    
   </div>
-</div>
+</div>
+</form>

frontend/src/angular/src/app/mcp-client/mcp-client.component.ts

@@ -12,6 +12,7 @@
  */
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import {MatInputModule} from '@angular/material/input';
@@ -25,18 +26,25 @@ import { Router } from '@angular/router';
 		MatToolbarModule,
 		MatButtonModule,
 		MatInputModule,
-		MatFormFieldModule
+		MatFormFieldModule,
+    FormsModule
 	],
   templateUrl: './mcp-client.component.html',
   styleUrl: './mcp-client.component.scss'
 })
 export class McpClientComponent {
+  protected query: string = '';
+
   constructor(private readonly router: Router) {}
 
   protected showList(): void {
     this.router.navigate(['/doclist']);
   }
 
+  protected submitForm(): void {
+    console.log(this.query);
+  }
+
   protected logout(): void {
   }
 }