diff --git a/ChatBot-Frontend/angular.json b/ChatBot-Frontend/angular.json index 1dfe2ef..0c29f3f 100644 --- a/ChatBot-Frontend/angular.json +++ b/ChatBot-Frontend/angular.json @@ -96,5 +96,8 @@ } } } + }, + "cli": { + "analytics": "a03aa43f-820f-4ed4-bcfe-56adceb49573" } } diff --git a/ChatBot-Frontend/src/app/app.component.css b/ChatBot-Frontend/src/app/app.component.css index e69de29..3100179 100644 --- a/ChatBot-Frontend/src/app/app.component.css +++ b/ChatBot-Frontend/src/app/app.component.css @@ -0,0 +1,536 @@ +@font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url(https://penpot.techx.pt/internal/gfonts/font/poppins/v23/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); + unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; + } + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url(https://penpot.techx.pt/internal/gfonts/font/poppins/v23/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-display: block; + src: url(https://penpot.techx.pt/internal/gfonts/font/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + body, html { + height: 100%; + margin: 0; + padding: 0; + } + body { + min-height: 100vh; + min-width: 100vw; + display: flex; + align-items: center; + justify-content: center; + background: #fff; + } + .main { + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + } + * { + box-sizing: border-box; + } + .text-node { background-clip: text !important; -webkit-background-clip: text !important; } + .group-96e07eb27483 { + position: relative; + margin: 40px auto; + left: 0; + top: 0; + width: 100%; + min-height: 480px; + max-width: 420px; + min-width: 0; + height: auto; + background: #232329; + border-radius: 12px; + box-shadow: 0 2px 16px rgba(0,0,0,0.12); + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 24px 16px 80px 16px; + box-sizing: border-box; + } + @media (max-width: 480px) { + .group-96e07eb27483 { + max-width: 100vw; + margin: 0; + border-radius: 0; + min-height: 100vh; + height: 100vh; + padding: 8px 2px 72px 2px; + } + .chatbot-footer { + padding: 8px 2px; + } + } + .chatbot-footer { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + padding: 16px; + background: transparent; + display: flex; + align-items: center; + gap: 8px; + box-sizing: border-box; + } + .chatbot-input { + flex: 1; + padding: 12px 16px; + border-radius: 20px; + border: 1px solid #4567c8; + background: #242431; + color: #fff; + font-family: Poppins; + font-size: 14px; + outline: none; + } + .chatbot-send { + background: #3665e5; + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background 0.2s; + } + .chatbot-send:hover { + background: #274bb5; + } + .group-960966d81066 { + position: absolute; + right: 24px; + bottom: 24px; + } + .majesticon-96090a0d56c6 > svg { + position: absolute; + top: 0px; + left: 0px; + transform: translate(0px,0px); + } + .majesticon-96090a0d56c6 { + position: absolute; + left: 6px; + top: 6px; + width: 24px; + height: 24px; + } + .svgg-96090a0ec27b > svg { + position: absolute; + top: 0px; + left: 0px; + transform: translate(0px,0px); + } + .svgg-96090a0ec27b { + position: absolute; + left: 2px; + top: 1px; + width: 20px; + height: 20px; + } + .svgpath-28b572d45adb > svg { + position: absolute; + top: 0px; + left: 0px; + transform: translate(0px,0px); + } + .svgpath-28b572d45adb { + position: absolute; + left: 0px; + top: 0px; + width: 20px; + height: 20px; + } + .basebackg-96090a0e90ae > svg { + position: absolute; + top: 0px; + left: 0px; + transform: translate(0px,0px); + } + .basebackg-96090a0e90ae { + position: absolute; + left: 0px; + top: 0px; + width: 24px; + height: 24px; + border-radius: 0px; + display: none; + } + .ellipse-960912454190 > svg { + position: absolute; + top: 0px; + left: 0px; + transform: translate(0px,0px); + } + .ellipse-960912454190 { + position: absolute; + left: 0px; + top: 0px; + width: 36px; + height: 36px; + } + .fluent-add-9606a9926cc1 > svg { + position: absolute; + top: 0px; + left: 0px; + transform: translate(-5.798989873223036px,-5.798989873223377px); + } + .fluent-add-9606a9926cc1 { + position: absolute; + left: 20.8px; + top: 16.8px; + width: 28px; + height: 28px; + } + .svgpath-9606a9926cc3 > svg { + position: absolute; + top: 0px; + left: 0px; + transform: translate(-4.556349186103944px,-4.556349186104285px); + } + .svgpath-9606a9926cc3 { + position: absolute; + left: 3px; + top: 3px; + width: 22px; + height: 22px; + transform: matrix(0.71, -0.71, 0.71, 0.71, -0.00, -0.00); + } + .basebackg-9606a9926cc2 > svg { + position: absolute; + top: 0px; + left: 0px; + transform: translate(-5.798989873223036px,-5.798989873223377px); + } + .basebackg-9606a9926cc2 { + position: absolute; + left: 0px; + top: 0px; + width: 28px; + height: 28px; + transform: matrix(0.71, -0.71, 0.71, 0.71, -0.00, -0.00); + border-radius: 0px; + display: none; + } + .como-posso-96076e6f2b0e { + position: absolute; + left: 40px; + top: 144px; + width: 147px; + height: 17px; + } + .como-posso-96076e6f2b0e .root-0 { + display: flex; + white-space: break-spaces; + align-items: flex-start; + } + .como-posso-96076e6f2b0e .root-0-paragraph-set-0 { + display: inline-flex; + flex-direction: column; + justify-content: inherit; + margin-right: 1px; + vertical-align: top; + } + .como-posso-96076e6f2b0e .root-0-paragraph-set-0-paragraph-0 { + font-size: 0; + line-height: 1.2; + margin: 0; + text-align: left; + } + .como-posso-96076e6f2b0e .root-0-paragraph-set-0-paragraph-0-text-0 { + color: rgba(255, 255, 255, 1); + text-transform: none; + line-break: auto; + overflow-wrap: initial; + white-space: pre; + font-size: 14px; + text-rendering: geometricPrecision; + caret-color: rgba(255, 255, 255, 1); + text-decoration: none; + letter-spacing: 0px; + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + } + .ol-ricar-9606a9922bc3 { + position: absolute; + left: 40px; + top: 105px; + width: 84px; + height: 17px; + } + .ol-ricar-9606a9922bc3 .root-0 { + display: flex; + white-space: break-spaces; + align-items: flex-start; + } + .ol-ricar-9606a9922bc3 .root-0-paragraph-set-0 { + display: inline-flex; + flex-direction: column; + justify-content: inherit; + margin-right: 1px; + vertical-align: top; + } + .ol-ricar-9606a9922bc3 .root-0-paragraph-set-0-paragraph-0 { + font-size: 0; + line-height: 1.2; + margin: 0; + text-align: left; + } + .ol-ricar-9606a9922bc3 .root-0-paragraph-set-0-paragraph-0-text-0 { + color: rgba(255, 255, 255, 1); + text-transform: none; + line-break: auto; + overflow-wrap: initial; + white-space: pre; + font-size: 14px; + text-rendering: geometricPrecision; + caret-color: rgba(255, 255, 255, 1); + text-decoration: none; + letter-spacing: 0px; + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + } + .escrever-96087303180b { + width: 100%; + min-width: 0; + max-width: 100%; + margin-top: 24px; + box-sizing: border-box; + } + .escrever-m-96087303180c { + width: 109px; + height: 14px; + flex-shrink: 0; + } + .escrever-m-96087303180c .root-0 { + display: flex; + white-space: break-spaces; + align-items: flex-start; + } + .escrever-m-96087303180c .root-0-paragraph-set-0 { + display: inline-flex; + flex-direction: column; + justify-content: inherit; + margin-right: 1px; + vertical-align: top; + } + .escrever-m-96087303180c .root-0-paragraph-set-0-paragraph-0 { + font-size: 0; + line-height: 1.399999976158142; + margin: 0; + text-align: left; + } + .escrever-m-96087303180c .root-0-paragraph-set-0-paragraph-0-text-0 { + color: rgba(250, 250, 250, 1); + text-transform: none; + line-break: auto; + overflow-wrap: initial; + white-space: pre; + font-size: 10px; + text-rendering: geometricPrecision; + caret-color: rgba(250, 250, 250, 1); + text-decoration: none; + letter-spacing: 0px; + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + } + .group-960a79ab28ed { + position: absolute; + left: 40px; + top: 187px; + width: 178px; + height: 196px; + } + .messsage-960a1c58fff8, + .messsage-9609b70bc8d5, + .messsage-9609aa192b77, + .messsage-96082a7c27ce { + position: relative; + width: auto; + height: auto; + background: #3d4764FF; + border-radius: 20px; + display: flex; + align-items: start; + align-content: stretch; + justify-content: start; + padding: 10px 20px 10px 20px; + z-index: 0; + flex-direction: row; + flex-wrap: nowrap; + } + .ver-relat-960a1c58fff9, + .ver-relat-9609b70bc8d6, + .visualizar-9609aa192b78, + .consultar-96082a7c27cf { + height: 14px; + flex-shrink: 0; + } + .ver-relat-960a1c58fff9 .root-0, + .ver-relat-9609b70bc8d6 .root-0, + .visualizar-9609aa192b78 .root-0, + .consultar-96082a7c27cf .root-0 { + display: flex; + white-space: break-spaces; + align-items: flex-start; + } + .ver-relat-960a1c58fff9 .root-0-paragraph-set-0, + .ver-relat-9609b70bc8d6 .root-0-paragraph-set-0, + .visualizar-9609aa192b78 .root-0-paragraph-set-0, + .consultar-96082a7c27cf .root-0-paragraph-set-0 { + display: inline-flex; + flex-direction: column; + justify-content: inherit; + margin-right: 1px; + vertical-align: top; + } + .ver-relat-960a1c58fff9 .root-0-paragraph-set-0-paragraph-0, + .ver-relat-9609b70bc8d6 .root-0-paragraph-set-0-paragraph-0, + .visualizar-9609aa192b78 .root-0-paragraph-set-0-paragraph-0, + .consultar-96082a7c27cf .root-0-paragraph-set-0-paragraph-0 { + font-size: 0; + line-height: 1.399999976158142; + margin: 0; + text-align: left; + } + .ver-relat-960a1c58fff9 .root-0-paragraph-set-0-paragraph-0-text-0, + .ver-relat-9609b70bc8d6 .root-0-paragraph-set-0-paragraph-0-text-0, + .visualizar-9609aa192b78 .root-0-paragraph-set-0-paragraph-0-text-0, + .consultar-96082a7c27cf .root-0-paragraph-set-0-paragraph-0-text-0 { + color: rgba(250, 250, 250, 1); + text-transform: none; + line-break: auto; + overflow-wrap: initial; + white-space: pre; + font-size: 10px; + text-rendering: geometricPrecision; + caret-color: rgba(250, 250, 250, 1); + text-decoration: none; + letter-spacing: 0px; + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + } + .vamos-a-is-960a62b1bab0 { + position: absolute; + left: 48.19px; + top: 441px; + width: 101px; + height: 17px; + } + .vamos-a-is-960a62b1bab0 .root-0 { + display: flex; + white-space: break-spaces; + align-items: flex-start; + } + .vamos-a-is-960a62b1bab0 .root-0-paragraph-set-0 { + display: inline-flex; + flex-direction: column; + justify-content: inherit; + margin-right: 1px; + vertical-align: top; + } + .vamos-a-is-960a62b1bab0 .root-0-paragraph-set-0-paragraph-0 { + font-size: 0; + line-height: 1.2; + margin: 0; + text-align: left; + } + .vamos-a-is-960a62b1bab0 .root-0-paragraph-set-0-paragraph-0-text-0 { + color: rgba(255, 255, 255, 1); + text-transform: none; + line-break: auto; + overflow-wrap: initial; + white-space: pre; + font-size: 14px; + text-rendering: geometricPrecision; + caret-color: rgba(255, 255, 255, 1); + text-decoration: none; + letter-spacing: 0px; + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + } + .pode-falar-960a50fa2a15 { + position: absolute; + left: 48.19px; + top: 406.83px; + width: 160px; + height: 17px; + } + .pode-falar-960a50fa2a15 .root-0 { + display: flex; + white-space: break-spaces; + align-items: flex-start; + } + .pode-falar-960a50fa2a15 .root-0-paragraph-set-0 { + display: inline-flex; + flex-direction: column; + justify-content: inherit; + margin-right: 1px; + vertical-align: top; + } + .pode-falar-960a50fa2a15 .root-0-paragraph-set-0-paragraph-0 { + font-size: 0; + line-height: 1.2; + margin: 0; + text-align: left; + } + .pode-falar-960a50fa2a15 .root-0-paragraph-set-0-paragraph-0-text-0 { + color: rgba(255, 255, 255, 1); + text-transform: none; + line-break: auto; + overflow-wrap: initial; + white-space: pre; + font-size: 14px; + text-rendering: geometricPrecision; + caret-color: rgba(255, 255, 255, 1); + text-decoration: none; + letter-spacing: 0px; + font-family: "Poppins"; + font-style: normal; + font-weight: 400; + } + .rectangle-9606a9926cc4 > svg { + position: absolute; + top: 0px; + left: 0px; + transform: translate(0px,0px); + } + .rectangle-9606a9926cc4 { + position: absolute; + left: 0px; + top: 0px; + width: 535px; + height: 588px; + } + .frame { + width: 100%; + min-width: 0; + margin-bottom: 12px; + } + .shape.text { + width: 100%; + } \ No newline at end of file diff --git a/ChatBot-Frontend/src/app/app.component.html b/ChatBot-Frontend/src/app/app.component.html index 36093e1..682a51d 100644 --- a/ChatBot-Frontend/src/app/app.component.html +++ b/ChatBot-Frontend/src/app/app.component.html @@ -1,336 +1,681 @@ - - - - - - - - - -
-
-
-
+
+ + + + + - - - - - - - - - - - - - - - -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

+ + + - -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- +
+
+
+
+

+ Pode falar ou escrever. +

+
-
- - - - - - - - - - - +
+
+
+
+

+ Vamos a isso? +

+
+
+
+
+
+
+
+
+
+
+

+ Consultar faturas +

+
+
+
+
+
+
+
+
+
+
+

+ Visualizar Dashboards +

+
+
+
+
+
+
+
+
+
+
+

+ Ver relatórios de faturação +

+
+
+
+
+
+
+
+
+
+
+

+ Ver relatórios de consumos +

+
+
+
+
+
+
+
+
+
+
+

+ Olá, Ricardo +

+
+
+
+
+
+
+
+
+

+ Como posso ajudar? +

+
+
+
+
+
+ + + + + + + + + + + + +
+ \ No newline at end of file diff --git a/ChatBot-Frontend/src/app/app.component.ts b/ChatBot-Frontend/src/app/app.component.ts index 52dd0c7..1c3e54c 100644 --- a/ChatBot-Frontend/src/app/app.component.ts +++ b/ChatBot-Frontend/src/app/app.component.ts @@ -1,13 +1,23 @@ import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { ChatService } from './chat.service'; @Component({ selector: 'app-root', - standalone: true, - imports: [RouterOutlet], - templateUrl: './app.component.html', - styleUrl: './app.component.css' + standalone: true, + imports: [CommonModule, FormsModule], + templateUrl: './app.component.html' }) export class AppComponent { - title = 'ChatBot'; -} + userMessage = ''; + resposta: string | null = null; + + constructor(private chatService: ChatService) {} + + enviarMensagem() { + this.chatService.sendMessage(this.userMessage).subscribe((res: any) => { + this.resposta = res?.reply || 'Sem resposta do servidor'; + }); + } +} \ No newline at end of file diff --git a/ChatBot-Frontend/src/app/app.config.ts b/ChatBot-Frontend/src/app/app.config.ts index e5a3cf1..45e47cb 100644 --- a/ChatBot-Frontend/src/app/app.config.ts +++ b/ChatBot-Frontend/src/app/app.config.ts @@ -1,9 +1,14 @@ -import { ApplicationConfig } from '@angular/core'; +import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; - -import { routes } from './app.routes'; +import { provideHttpClient } from '@angular/common/http'; import { provideClientHydration } from '@angular/platform-browser'; +import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes), provideClientHydration()] -}; + providers: [ + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes), + provideClientHydration(), + provideHttpClient() + ] +}; \ No newline at end of file diff --git a/ChatBot-Frontend/src/app/app.module.ts b/ChatBot-Frontend/src/app/app.module.ts new file mode 100644 index 0000000..eb940fe --- /dev/null +++ b/ChatBot-Frontend/src/app/app.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; +import { RouterModule } from '@angular/router'; +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + FormsModule, + HttpClientModule, + RouterModule.forRoot([]) + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } \ No newline at end of file diff --git a/ChatBot-Frontend/src/app/chat.service.ts b/ChatBot-Frontend/src/app/chat.service.ts new file mode 100644 index 0000000..231f97b --- /dev/null +++ b/ChatBot-Frontend/src/app/chat.service.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class ChatService { + constructor(private http: HttpClient) {} + + sendMessage(message: string): Observable { + return this.http.post('/api/chat', { message }); + } +} \ No newline at end of file diff --git a/ChatBot-Frontend/src/index.html b/ChatBot-Frontend/src/index.html index 10694e2..ddc8335 100644 --- a/ChatBot-Frontend/src/index.html +++ b/ChatBot-Frontend/src/index.html @@ -2,12 +2,13 @@ - ChatBot + ChatBotFrontend + diff --git a/ChatBot-Frontend/src/styles.css b/ChatBot-Frontend/src/styles.css index 90d4ee0..e69de29 100644 --- a/ChatBot-Frontend/src/styles.css +++ b/ChatBot-Frontend/src/styles.css @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */