get barista to return some images in conversation

client/web/angular-customer-app/angular.json

@@ -44,7 +44,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumError": "9kB"
                 }
               ],
               "outputHashing": "all"

client/web/angular-customer-app/package.json

@@ -10,38 +10,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.6",
-    "@angular/cdk": "^19.2.9",
-    "@angular/common": "^19.2.6",
-    "@angular/compiler": "^19.2.6",
-    "@angular/core": "^19.2.6",
-    "@angular/fire": "^19.1.0-canary.20bee94",
-    "@angular/forms": "^19.2.6",
-    "@angular/material": "^19.2.9",
-    "@angular/platform-browser": "^19.2.6",
-    "@angular/platform-browser-dynamic": "^19.2.6",
-    "@angular/router": "^19.2.6",
-    "@google/generative-ai": "^0.24.0",
-    "marked": "^15.0.8",
+    "@angular/animations": "^19.2.11",
+    "@angular/cdk": "^19.2.16",
+    "@angular/common": "^19.2.11",
+    "@angular/compiler": "^19.2.11",
+    "@angular/core": "^19.2.11",
+    "@angular/fire": "^19.2.0",
+    "@angular/forms": "^19.2.11",
+    "@angular/material": "^19.2.16",
+    "@angular/platform-browser": "^19.2.11",
+    "@angular/platform-browser-dynamic": "^19.2.11",
+    "@angular/router": "^19.2.11",
+    "@google/generative-ai": "^0.24.1",
+    "marked": "^15.0.12",
     "ngx-markdown": "^19.1.1",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.7",
-    "@angular/cli": "^19.2.7",
-    "@angular/compiler-cli": "^19.2.6",
-    "@types/jasmine": "~5.1.7",
-    "jasmine-core": "~5.6.0",
+    "@angular-devkit/build-angular": "^19.2.12",
+    "@angular/cli": "^19.2.12",
+    "@angular/compiler-cli": "^19.2.11",
+    "@types/jasmine": "~5.1.8",
+    "jasmine-core": "~5.7.1",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.8.3"
-  },
-  "overrides": {
-    "firebase": "11.8.0-20250512211235"
   }
 }

client/web/angular-customer-app/src/app/app.routes.ts

@@ -16,7 +16,6 @@
 
 import { Routes } from '@angular/router';
 import { ChatbotComponent } from './chatbot/chatbot.component';
-import { OrderpageComponent } from './orderpage/orderpage.component';
 
 export const routes: Routes = [
   {

client/web/angular-customer-app/src/app/chatbot/chatbot.component.html

@@ -42,6 +42,21 @@
 
     <div class="chat-content-area">
       <div id="chat" class="messages">
+        <div class="message barista image-bubble">
+          <div class="message-icon-container">
+            <mat-icon class="barista-icon">coffee</mat-icon>
+          </div>
+          <!-- <div class="message-text-container image-only-container">
+            <div class="featured-item-image-container">
+              <img
+                src="https://storage.googleapis.com/vertex-ai-generative-ai-devrel-storage/coffee-shop-app/coffee-beans.jpg"
+                alt="Featured item"
+                class="featured-item-image"
+                (click)="openImageCropModal()"
+              />
+            </div>
+          </div> -->
+        </div>
         @if (chatService.loading()) {
         <div class="message barista">
           <div class="message-icon-container">
@@ -58,21 +73,38 @@
         <div class="message user">
           <div class="message-text-container">
             {{ entry.text }}
-            @if (entry.media && entry.media.downloadUrl) {
-            <img [src]="entry.media.downloadUrl" alt="User media" />
+            @if (entry.media && entry.media.base64Data) {
+            <img [src]="'data:image/png;base64, ' + entry.media.base64Data" alt="User media" />
             }
           </div>
         </div>
-        } @if (entry.role === 'agent') {
-        <div class="message barista">
+        } @if (entry.role === 'agent') { 
+          @if (entry.featuredItemImage) {
+            <div class="message barista image-bubble">
+              <div class="message-icon-container">
+                <mat-icon class="barista-icon">coffee</mat-icon>
+              </div>
+              <div class="message-text-container image-only-container">
+                <div class="featured-item-image-container">
+                  <img
+                    [src]="entry.featuredItemImage"
+                    alt="Featured item"
+                    class="featured-item-image"
+                  />
+                </div>
+              </div>
+            </div>
+            }
+          @if (entry.text && entry.text.trim()!=='') {
+        <div class="message barista text-bubble">
           <div class="message-icon-container">
             <mat-icon class="barista-icon">coffee</mat-icon>
           </div>
           <div class="message-text-container">
             {{ entry.text }}
           </div>
         </div>
-        } }
+        }  } }
       </div>
     </div>
     <div class="suggestions-container">
@@ -104,30 +136,33 @@
           placeholder="Anything else?"
         />
         @if (mediaStorageService.media()) {
-        <img
-          [src]="mediaStorageService.media()?.downloadUrl"
-          class="media-preview-small"
-          alt="Media preview"
-        />
-        }
+          <div class="image-preview-container">
+            <img
+              [src]="'data:image/png;base64, ' + mediaStorageService.media()?.base64Data"
+              class="media-preview-in-bar"
+              alt="Preview"
+            />
+            <button
+              mat-icon-button
+              class="remove-preview-button"
+              type="button"
+              (click)="this.mediaStorageService.clearMedia()" 
+              matTooltip="Remove image">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
+          }
       </mat-form-field>
 
       <button
         mat-icon-button
         class="action-button add-btn"
         type="button"
-        (click)="file_input.click()"
+        (click)="openImageCropModal()"
         [disabled]="chatService.loading()"
         matTooltip="Add attachment"
       >
         <mat-icon>add</mat-icon>
-        <input
-          #file_input
-          type="file"
-          accept="image/*"
-          style="display: none"
-          (change)="setFileData($event)"
-        />
       </button>
 
       <button