Skip to content

Commit a61f454

Browse files
nohe427nohe427
authored
Merge pull request #8 from FirebaseExtended/decaf-css
decaf css update
2 parents 7001599 + 4e45d2a commit a61f454

17 files changed

+1054
-308
lines changed

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

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,17 @@
2020
"outputPath": "dist/angular-customer-app",
2121
"index": "src/index.html",
2222
"browser": "src/main.ts",
23-
"polyfills": [
24-
"zone.js"
25-
],
23+
"polyfills": ["zone.js"],
2624
"tsConfig": "tsconfig.app.json",
2725
"inlineStyleLanguage": "scss",
2826
"assets": [
27+
"src/app/assets",
2928
{
3029
"glob": "**/*",
3130
"input": "public"
3231
}
3332
],
34-
"styles": [
35-
"src/styles.scss"
36-
],
33+
"styles": ["src/styles.scss"],
3734
"scripts": []
3835
},
3936
"configurations": {
@@ -85,10 +82,7 @@
8582
"test": {
8683
"builder": "@angular-devkit/build-angular:karma",
8784
"options": {
88-
"polyfills": [
89-
"zone.js",
90-
"zone.js/testing"
91-
],
85+
"polyfills": ["zone.js", "zone.js/testing"],
9286
"tsConfig": "tsconfig.spec.json",
9387
"inlineStyleLanguage": "scss",
9488
"assets": [
@@ -97,9 +91,7 @@
9791
"input": "public"
9892
}
9993
],
100-
"styles": [
101-
"src/styles.scss"
102-
],
94+
"styles": ["src/styles.scss"],
10395
"scripts": []
10496
}
10597
}

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,22 @@
1313
See the License for the specific language governing permissions and
1414
limitations under the License.
1515
-->
16-
1716
<div class="wrapper">
18-
<mat-toolbar color="secondary">
19-
<h1>Google Solutions</h1>
17+
<mat-toolbar class="custom-toolbar">
18+
<div class="toolbar-title-container">
19+
<span class="css-title-icon"></span>
20+
<h1>Coffee Spark</h1>
21+
</div>
2022
<span class="spacer"></span>
21-
<a
22-
mat-icon-button
23-
href="https://developers.google.com/solutions/catalog"
24-
matTooltip="Docs"
25-
target="_blank">
26-
<mat-icon>description</mat-icon>
27-
</a>
28-
<app-login/>
23+
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Toggle menu">
24+
<mat-icon>more_vert</mat-icon>
25+
</button>
26+
<mat-menu #menu="matMenu">
27+
<app-login />
28+
</mat-menu>
2929
</mat-toolbar>
3030

3131
<article>
3232
<router-outlet></router-outlet>
3333
</article>
34-
</div>
34+
</div>

‎client/web/angular-customer-app/src/app/app.component.scss

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,47 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16-
17-
.wrapper {
16+
.wrapper {
1817
display: grid;
1918
grid-template:
2019
'header' auto
2120
'content' 1fr
2221
/ 1fr;
2322
height: 100vh;
23+
background-color: #FCF8F8;
24+
}
25+
26+
.custom-toolbar {
27+
background-color: #FCF8F8 !important;
28+
color: #333;
29+
box-shadow: none;
30+
}
31+
32+
.toolbar-title-container {
33+
display: flex;
34+
align-items: center;
35+
}
36+
37+
.css-title-icon {
38+
display: inline-block;
39+
width: 16px;
40+
height: 16px;
41+
background-color: #FBBC04;
42+
border-radius: 50%;
43+
margin-right: 10px;
44+
}
45+
46+
.toolbar-title-container h1 {
47+
font-size: 1.25rem;
48+
font-weight: 500;
49+
color: #3c4043;
50+
line-height: 1;
2451
}
2552

2653
.spacer {
2754
flex: 1 1 auto;
28-
}
55+
}
56+
57+
.custom-toolbar button[mat-icon-button] mat-icon {
58+
color: #5f6368;
59+
}

‎client/web/angular-customer-app/src/app/app.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
import { Component } from '@angular/core';
1919
import { MatButtonModule } from '@angular/material/button';
2020
import { MatIconModule } from '@angular/material/icon';
21+
import { MatMenuModule} from '@angular/material/menu';
2122
import { MatToolbarModule } from '@angular/material/toolbar';
2223
import { MatTooltipModule } from '@angular/material/tooltip';
2324
import { RouterOutlet } from '@angular/router';
@@ -28,6 +29,7 @@ import { LoginComponent } from "./login/login.component";
2829
standalone: true,
2930
imports: [
3031
MatToolbarModule,
32+
MatMenuModule,
3133
RouterOutlet,
3234
MatIconModule,
3335
MatButtonModule,

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,18 @@
1616

1717
import { Routes } from '@angular/router';
1818
import { ChatbotComponent } from './chatbot/chatbot.component';
19+
import { OrderpageComponent } from './orderpage/orderpage.component';
1920

2021
export const routes: Routes = [
2122
{
2223
path: 'chat',
2324
component: ChatbotComponent,
2425
},
26+
// {
27+
// path: 'order',
28+
// component: OrderpageComponent,
29+
// },
2530
// { path: '/config.html', redirectTo: '/config.html'},
2631
// { path: '/config', redirectTo: '/config.html'},
2732
{ path: '**', redirectTo: '/chat' },
28-
];
33+
];

‎client/web/angular-customer-app/src/app/assets/barista-icon.png

5 KB
Loading

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

Lines changed: 113 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!--
1+
<!--
22
Copyright 2025 Google LLC
33
44
Licensed under the Apache License, Version 2.0 (the "License");
@@ -13,69 +13,132 @@
1313
See the License for the specific language governing permissions and
1414
limitations under the License.
1515
-->
16+
<div class="coffee-chat-page">
17+
<div class="centered-chat-column">
18+
<div class="order-bar">
19+
<mat-expansion-panel
20+
class="order-expansion-panel"
21+
[expanded]="chatService.order().length > 0"
22+
>
23+
<mat-expansion-panel-header class="order-panel-header">
24+
<mat-panel-title class="order-title-in-header">
25+
Your order @if (chatService.order().length > 0) {
26+
<span
27+
>({{ chatService.order().length }} item{{
28+
chatService.order().length === 1 ? "" : "s"
29+
}})</span
30+
>
31+
}
32+
</mat-panel-title>
33+
</mat-expansion-panel-header>
1634

17-
<div class="chat center">
18-
<div class="contact bar">
19-
<div class="pic coffee"></div>
20-
<div class="name">Chat with your AI Barista</div>
21-
<div class="seen">Today at 11:11am</div>
22-
</div>
23-
<div id="chat" class="messages">
24-
@if (chatService.loading()) {
25-
<div class="message barista">
26-
<div class="typing typing-1"></div>
27-
<div class="typing typing-2"></div>
28-
<div class="typing typing-3"></div>
29-
</div>
30-
}
31-
@for (entry of chatService.history(); track entry; let i = $index) {
35+
<div class="order-details-content">
36+
<div class="order-text-actual">
37+
{{ currentOrder() }}
38+
</div>
39+
</div>
40+
</mat-expansion-panel>
41+
</div>
42+
43+
<div class="chat-content-area">
44+
<div id="chat" class="messages">
45+
@if (chatService.loading()) {
46+
<div class="message barista">
47+
<div class="message-icon-container">
48+
<mat-icon class="barista-icon">coffee</mat-icon>
49+
</div>
50+
<div class="message-text-container typing-indicator">
51+
<div class="typing typing-1"></div>
52+
<div class="typing typing-2"></div>
53+
<div class="typing typing-3"></div>
54+
</div>
55+
</div>
56+
} @for (entry of chatService.history(); track entry; let i = $index) {
3257
@if (entry.role === 'user') {
33-
<div class="message user">
58+
<div class="message user">
59+
<div class="message-text-container">
3460
{{ entry.text }}
3561
@if (entry.media && entry.media.downloadUrl) {
36-
<img [src]="entry.media.downloadUrl">
62+
<img [src]="entry.media.downloadUrl" alt="User media" />
3763
}
3864
</div>
39-
}
40-
@if (entry.role === 'agent') {
41-
<div class="message barista">
65+
</div>
66+
} @if (entry.role === 'agent') {
67+
<div class="message barista">
68+
<div class="message-icon-container">
69+
<mat-icon class="barista-icon">coffee</mat-icon>
70+
</div>
71+
<div class="message-text-container">
4272
{{ entry.text }}
4373
</div>
74+
</div>
75+
} }
76+
</div>
77+
</div>
78+
<div class="suggestions-container">
79+
<div class="quick-replies">
80+
@for (response of chatService.suggestedResponses(); track response; let
81+
index = $index) {
82+
<button
83+
mat-stroked-button
84+
class="quick-reply-chip"
85+
(click)="ask(response)"
86+
>
87+
<mat-icon fontSet="material-symbols-outlined"
88+
>prompt_suggestion</mat-icon
89+
>{{ response }}
90+
</button>
4491
}
45-
}
46-
<div class="time">Today at 11:11am</div>
47-
</div>
48-
<form class="input">
49-
<div class="help">
92+
</div>
93+
</div>
94+
<form class="chat-input-bar" (ngSubmit)="ask()">
5095
@if (chatService.error()) {
51-
<pre class="error">{{ chatService.error()?.text }}</pre>
96+
<pre class="error-message">{{ chatService.error()?.text }}</pre>
5297
}
53-
@for (response of chatService.suggestedResponses(); track response; let index = $index) {
54-
<button (click)="ask(response)" mat-flat-button>{{ response }}</button>
55-
}
56-
</div>
57-
<div class="forms">
58-
<mat-form-field class="form-field" appearance="outline">
59-
<mat-label>Chat with our agent</mat-label>
60-
<textarea
98+
99+
<mat-form-field appearance="outline" class="chat-input-field">
100+
<input
61101
matInput
62102
(keypress)="keyPress($event)"
63103
[formControl]="chatFormControl"
64-
placeholder="Type a message...">
65-
</textarea>
104+
placeholder="Anything else?"
105+
/>
66106
@if (mediaStorageService.media()) {
67-
<img [src]="mediaStorageService.media()?.downloadUrl" class="media-preview">
107+
<img
108+
[src]="mediaStorageService.media()?.downloadUrl"
109+
class="media-preview-small"
110+
alt="Media preview"
111+
/>
68112
}
69113
</mat-form-field>
70-
<div class="action-grid">
71-
<button mat-icon-button (click)="ask()" [disabled]="chatService.loading() || !chatFormControl.value"><mat-icon>send</mat-icon></button>
72-
<div></div>
73-
<button mat-icon-button (click)="confirmOrder()" [disabled]="chatService.loading()"><mat-icon>coffee</mat-icon></button>
74-
<button mat-icon-button (click)="file_input.click()" [disabled]="chatService.loading()">
75-
<mat-icon>add_a_photo</mat-icon>
76-
<input #file_input type="file" accept="image/*" style="display:none" (change)="setFileData($event)">
77-
</button>
78-
</div>
79-
</div>
80-
</form>
81-
</div>
114+
115+
<button
116+
mat-icon-button
117+
class="action-button add-btn"
118+
type="button"
119+
(click)="file_input.click()"
120+
[disabled]="chatService.loading()"
121+
matTooltip="Add attachment"
122+
>
123+
<mat-icon>add</mat-icon>
124+
<input
125+
#file_input
126+
type="file"
127+
accept="image/*"
128+
style="display: none"
129+
(change)="setFileData($event)"
130+
/>
131+
</button>
132+
133+
<button
134+
mat-icon-button
135+
class="action-button send-btn"
136+
type="submit"
137+
[disabled]="chatService.loading() || !chatFormControl.value"
138+
matTooltip="Send message"
139+
>
140+
<mat-icon>chevron_right</mat-icon>
141+
</button>
142+
</form>
143+
</div>
144+
</div>

0 commit comments

Comments
 (0)