update chatbot ui

src/app/app-module.ts

@@ -15,7 +15,7 @@ import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';     // Import mat-form-field module
 import { MatInputModule } from '@angular/material/input';
             // Import mat-input module
-
+import { MarkdownModule } from 'ngx-markdown';
 
 @NgModule({
   declarations: [
@@ -33,7 +33,8 @@ import { MatInputModule } from '@angular/material/input';
     HttpClientModule,
     FormsModule,
     MatFormFieldModule,
-    MatInputModule
+    MatInputModule,
+    MarkdownModule.forRoot() 
     
     //RouterModule.forRoot(routes, {
     //  scrollPositionRestoration: 'enabled',

src/app/chatbot/chatbot.html

@@ -21,7 +21,7 @@
             </div>
           </ng-container>
           <ng-template #botText>
-            <p>{{ message.bot }}</p>
+            <markdown [data]="message.bot"></markdown>
           </ng-template>
         </div>
         <div class="avatar">

src/app/chatbot/chatbot.scss

@@ -51,6 +51,13 @@
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
   width: 50%;
+
+  markdown {
+    font-family: 'Roboto', sans-serif;
+    color: #333;
+    font-size: 1vw;
+    line-height: 1.5;
+  }
 }
 
 .user-message .message-content {
@@ -99,15 +106,17 @@
 }
 
 .input-box button {
-  padding: 10px 15px;
+  padding: 1vw;
   background-color: #4e8fff;
   color: #fff;
   border: none;
   border-radius: 12px;
   cursor: pointer;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: background-color 0.3s ease;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
+  font-weight: bold;
+  font-size: 1vw;
 }
 
 .input-box button:hover {

src/app/chatbot/chatbot.ts

@@ -4,13 +4,14 @@ import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { ChatBotService } from './chatbot.service';
+import { MarkdownModule } from 'ngx-markdown';
 
 type ChatPair = { user: string; bot: string | null };
 
 @Component({
   selector: 'app-chatbot',
   standalone: true,
-  imports: [CommonModule, HttpClientModule, FormsModule],
+  imports: [CommonModule, HttpClientModule, FormsModule, MarkdownModule],
   templateUrl: './chatbot.html',
   styleUrls: ['./chatbot.scss'],
 })