updated

src/app/chat/chat.component.css

@@ -1,30 +1,37 @@
-.chat-container {
-  max-width: 600px;
-  margin: 30px auto;
+.chat-wrapper {
+  display: flex;
+  width: 100vw;
+  height: 80vh; /* full viewport height minus some margin */
+  gap: 12px;
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.panel {
+  flex: 1; /* each panel takes equal width */
   display: flex;
   flex-direction: column;
-  height: 500px;
   border-radius: 12px;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
   background-color: #fafafa;
+  overflow: hidden;
 }
 
 mat-card-title {
-  font-size: 1.6rem;
+  font-size: 1.4rem;
   font-weight: 600;
   text-align: center;
-  margin: 16px 0;
+  padding: 12px 0;
+  border-bottom: 1px solid #ddd;
 }
 
 mat-card-content {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px; /* space between messages */
+  padding: 12px;
 }
 
+/* Chat messages */
 .messages {
   display: flex;
   flex-direction: column;
@@ -34,26 +41,23 @@ mat-card-content {
 .message {
   padding: 10px 16px;
   border-radius: 20px;
-  max-width: 70%;
+  max-width: 80%;
   word-wrap: break-word;
-  overflow-wrap: break-word;
   white-space: pre-wrap;
   line-height: 1.4;
 }
 
-/* User messages */
 .user {
   background-color: #1976d2;
   color: white;
-  align-self: flex-end; /* pushes message to the right */
+  align-self: flex-end;
   text-align: right;
 }
 
-/* Bot messages */
 .bot {
   background-color: #e0e0e0;
   color: #333;
-  align-self: flex-start; /* pushes message to the left */
+  align-self: flex-start;
   text-align: left;
 }
 
@@ -62,11 +66,11 @@ mat-card-content {
   color: #666;
 }
 
-/* Chat input area */
+/* Chat input */
 .chat-input {
   display: flex;
   gap: 10px;
-  padding: 12px 16px;
+  padding: 12px;
   border-top: 1px solid #ddd;
   background-color: #f5f5f5;
 }
@@ -76,12 +80,14 @@ mat-card-content {
   margin: 0;
 }
 
-/* Scrollbar styling */
-mat-card-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-mat-card-content::-webkit-scrollbar-thumb {
-  background-color: rgba(0,0,0,0.2);
-  border-radius: 3px;
+/* JSON output pre blocks */
+pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 0.85rem;
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-radius: 8px;
+  max-height: 100%;
+  overflow: auto;
 }

src/app/chat/chat.component.html

@@ -1,18 +1,37 @@
-<mat-card class="chat-container">
-  <mat-card-title>Web Chat</mat-card-title>
-  <mat-card-content>
-    <div class="messages">
-      <div *ngFor="let msg of messages" [ngClass]="['message', msg.sender]">
-        <strong>{{ msg.sender === 'user' ? 'You' : 'Bot' }}:</strong>
-        <span>{{ msg.content }}</span>
+<div class="chat-wrapper">
+  <!-- Chat panel -->
+  <mat-card class="panel chat-panel">
+    <mat-card-title>Chat</mat-card-title>
+    <mat-card-content>
+      <div class="messages">
+        <div *ngFor="let msg of messages" [ngClass]="['message', msg.sender]">
+          <strong>{{ msg.sender === 'user' ? 'You' : 'Bot' }}:</strong>
+          <span>{{ msg.content }}</span>
+        </div>
       </div>
-    </div>
-    <div *ngIf="loading" class="bot-typing">Bot is typing...</div>
-  </mat-card-content>
-  <mat-card-actions class="chat-input">
-    <mat-form-field appearance="outline">
-      <input matInput placeholder="Type a message" [(ngModel)]="inputMessage" (keyup.enter)="sendMessage()" />
-    </mat-form-field>
-    <button mat-raised-button color="primary" (click)="sendMessage()">Send</button>
-  </mat-card-actions>
-</mat-card>
+      <div *ngIf="loading" class="bot-typing">Bot is typing...</div>
+    </mat-card-content>
+    <mat-card-actions class="chat-input">
+      <mat-form-field appearance="outline">
+        <input matInput placeholder="Type a message" [(ngModel)]="inputMessage" (keyup.enter)="sendMessage()" />
+      </mat-form-field>
+      <button mat-raised-button color="primary" (click)="sendMessage()">Send</button>
+    </mat-card-actions>
+  </mat-card>
+
+  <!-- Planner output panel -->
+  <mat-card class="panel planner-panel">
+    <mat-card-title>Planner Output</mat-card-title>
+    <mat-card-content>
+      <pre>{{ plannerOutput | json }}</pre>
+    </mat-card-content>
+  </mat-card>
+
+  <!-- Executor output panel -->
+  <mat-card class="panel executor-panel">
+    <mat-card-title>Executor Output</mat-card-title>
+    <mat-card-content>
+      <pre>{{ executorOutput | json }}</pre>
+    </mat-card-content>
+  </mat-card>
+</div>

src/app/chat/chat.component.ts

@@ -7,7 +7,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { webConfig } from '../config';
-
+import { io, Socket } from 'socket.io-client';
 interface ChatMessage {
   content: string;
   sender: 'user' | 'bot';
@@ -25,7 +25,30 @@ export class ChatComponent {
   inputMessage: string = '';
   loading = false;
 
-  constructor(private http: HttpClient) {}
+  plannerOutput: any = null;
+  executorOutput: any = null;
+
+  private socket: Socket;
+
+  constructor(private http: HttpClient) {
+    // Connect to FFB socket namespace
+    this.socket = io(`${webConfig.exposedUrl}/ffb`);
+
+    // Listen for planner output
+    this.socket.on('planner.output', (payload) => {
+      this.plannerOutput = payload;
+    });
+
+    // Listen for executor events
+    this.socket.on('executor.result', (payload) => {
+      this.executorOutput = { ...this.executorOutput, pipeline: payload.pipeline, results: payload.results, count: payload.count };
+    });
+
+    // Optional: handle errors
+    this.socket.on('error', (payload) => {
+      console.error('Socket error:', payload);
+    });
+  }
 
   sendMessage() {
     if (!this.inputMessage.trim()) return;