feat: user input more responsive

arai-frontend/src/app/backend.service.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, Injectable } from '@angular/core';
 import { GenericRequest, GenericResponse, RecommendedMediatorsResponse, StatisticsOutputResponse, UserInputRequest } from './requests-responses';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
@@ -32,16 +32,19 @@ export class BackendService {
     }
   }
 
-  public sendMessage(message: GenericRequest): Promise<GenericResponse> {
+  public sendMessage(message: UserInputRequest): Promise<GenericResponse> {
     return new Promise((resolve, reject) => {
       if (message.request_type === "user_input") {
         this.userInputArray.push(message as UserInputRequest);
       }
-      const headers = new HttpHeaders().set("Content-Type", "application/json");
       
-      console.log(`request: `, JSON.stringify(message));
+      // Assuming `serializeToQueryParams` is a method that converts your message object into HttpParams.
+      // You will need to implement this conversion based on your `GenericRequest` structure.
+      const params = this.serializeToQueryParams(message);
 
-      this.http.post<GenericResponse>(this.address, JSON.stringify(message), { headers }).subscribe({
+      console.log(`request: `, params.toString());
+
+      this.http.get<GenericResponse>(`${this.address}`, { params }).subscribe({
         next: (response) => {
           console.log(`response: `, response);
           resolve(response);
@@ -53,4 +56,19 @@ export class BackendService {
       });
     });
   }
+
+  private serializeToQueryParams(message: GenericRequest): HttpParams {
+    let params = new HttpParams();
+    // Use a type assertion here to let TypeScript know the real type of the keys
+    (Object.keys(message) as Array<keyof GenericRequest>).forEach(key => {
+      const value = message[key];
+      if (value !== undefined) {
+        // Assuming all values are either string or can be converted to string
+        params = params.append(key, String(value));
+      }
+    });
+    return params;
+  }
+  
+  
 }

arai-frontend/src/app/case-input/case-input.component.scss

@@ -41,3 +41,15 @@ body, html {
     }
   }
   
+
+  @media (max-width: 768px) {
+    .lawyering-form {
+      max-width: 90%; /* Allows more margin on smaller devices */
+    }
+    
+    .submit-button {
+      width: 100%; /* Makes the submit button full width on smaller screens */
+      align-self: center; /* Center align if preferred */
+    }
+  }
+  

arai-frontend/src/app/case-input/case-input.component.ts

@@ -36,8 +36,6 @@ export class CaseInputComponent {
   async onSubmit() {
     this.userInput = this.userInputForm.value;
     if(this.userInput !== null) {
-    const newRequest = new UserInputRequest(this.userInput);
-    this.backendService.sendMessage(newRequest);
     const result = await this.backendService.sendMessage(new UserInputRequest(this.userInput));
     console.log(`result: `, result);
   } else {