From 848eb94406b054f7dd4e2ddb669440d75752aed1 Mon Sep 17 00:00:00 2001
From: mutugiii <mutugimutuma@gmail.com>
Date: Tue, 29 Aug 2023 20:48:31 +0300
Subject: [PATCH] Add fullscreen view for the chat interface

---
 src/app/chat/chat.component.html |  5 ++++-
 src/app/chat/chat.component.scss | 22 ++++++++++++++++++++++
 src/app/chat/chat.component.ts   | 27 ++++++++++++++++-----------
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/app/chat/chat.component.html b/src/app/chat/chat.component.html
index 0e80936322..81dcd86d56 100644
--- a/src/app/chat/chat.component.html
+++ b/src/app/chat/chat.component.html
@@ -2,9 +2,12 @@
   <button mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
   <span i18n>Chat Prompts</span>
   <span class="toolbar-fill"></span>
+  <button mat-icon-button (click)="toggleFullScreen()">
+    <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+  </button>
 </mat-toolbar>
 
-<div class="space-container">
+<div class="space-container" [ngClass]="{'fullscreen': isFullscreen}">
   <div class="chat-container" #chat>
     <div *ngFor="let conversation of conversations">
       <div class="conversation">
diff --git a/src/app/chat/chat.component.scss b/src/app/chat/chat.component.scss
index e243b9851d..329e2080bc 100644
--- a/src/app/chat/chat.component.scss
+++ b/src/app/chat/chat.component.scss
@@ -53,3 +53,25 @@ textarea:focus {
   border-color: #007bff;
   box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
 }
+
+.fullscreen {
+  .space-container {
+    height: 100vh;
+  }
+
+  .form-container {
+    display: none;
+  }
+
+  .chat-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    margin: 0;
+  }
+
+  textarea {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: none;
+  }
+}
diff --git a/src/app/chat/chat.component.ts b/src/app/chat/chat.component.ts
index cc7eb4b7e7..2fa762ad92 100644
--- a/src/app/chat/chat.component.ts
+++ b/src/app/chat/chat.component.ts
@@ -13,6 +13,7 @@ import { ChatService } from '../shared/chat.service';
 })
 export class ChatComponent implements OnInit {
   spinnerOn = true;
+  isFullscreen = false;
   promptForm: FormGroup;
   messages: any[] = [];
   conversations: any[] = [];
@@ -83,17 +84,21 @@ export class ChatComponent implements OnInit {
     );
   }
 
-sanitizeText(text: string): string {
-  // Replace newline characters with <br> tags
-  const textWithLineBreaks = text.replace(/\n/g, '<br>');
+  sanitizeText(text: string): string {
+    // Replace newline characters with <br> tags
+    const textWithLineBreaks = text.replace(/\n/g, '<br>');
 
-  // Replace code block markers with <code> tags
-  const codeBlockStart = /```/g;
-  const codeBlockEnd = /```/g;
-  const textWithCodeBlocks = textWithLineBreaks
-    .replace(codeBlockStart, '<code>')
-    .replace(codeBlockEnd, '</code>');
+    // Replace code block markers with <code> tags
+    const codeBlockStart = /```/g;
+    const codeBlockEnd = /```/g;
+    const textWithCodeBlocks = textWithLineBreaks
+      .replace(codeBlockStart, '<code>')
+      .replace(codeBlockEnd, '</code>');
 
-  return textWithCodeBlocks;
-}
+    return textWithCodeBlocks;
+  }
+
+  toggleFullScreen() {
+    this.isFullscreen = !this.isFullscreen;
+  }
 }