From 723d3d358196317840ed34fbe088fbcf70b87b66 Mon Sep 17 00:00:00 2001 From: milenasrb Date: Tue, 19 Nov 2024 09:53:06 +0100 Subject: [PATCH 01/29] Add mocked chat interface --- webapp/angular.json | 3 ++ webapp/src/app/app.routes.ts | 7 ++- webapp/src/app/chat/chat/chat.component.html | 46 +++++++++++++++++++ webapp/src/app/chat/chat/chat.component.ts | 25 ++++++++++ .../header/ai-mentor/ai-mentor.component.html | 21 +++++++++ .../header/ai-mentor/ai-mentor.component.ts | 19 ++++++++ .../src/app/core/header/header.component.html | 3 ++ .../src/app/core/header/header.component.ts | 4 +- 8 files changed, 126 insertions(+), 2 deletions(-) create mode 100644 webapp/src/app/chat/chat/chat.component.html create mode 100644 webapp/src/app/chat/chat/chat.component.ts create mode 100644 webapp/src/app/core/header/ai-mentor/ai-mentor.component.html create mode 100644 webapp/src/app/core/header/ai-mentor/ai-mentor.component.ts diff --git a/webapp/angular.json b/webapp/angular.json index 57a14b27..60a03122 100644 --- a/webapp/angular.json +++ b/webapp/angular.json @@ -145,5 +145,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/webapp/src/app/app.routes.ts b/webapp/src/app/app.routes.ts index 905e9a4f..e4fe0c91 100644 --- a/webapp/src/app/app.routes.ts +++ b/webapp/src/app/app.routes.ts @@ -1,6 +1,7 @@ import { Routes } from '@angular/router'; import { AboutComponent } from '@app/about/about.component'; import { HomeComponent } from '@app/home/home.component'; +import { ChatComponent } from '@app/chat/chat/chat.component'; import { AdminComponent } from '@app/admin/admin.component'; import { AdminGuard } from '@app/core/security/admin.guard'; import { UserProfileComponent } from '@app/user/user-profile.component'; @@ -13,5 +14,9 @@ export const routes: Routes = [ component: AdminComponent, canActivate: [AdminGuard] }, - { path: 'user/:id', component: UserProfileComponent } + { path: 'user/:id', component: UserProfileComponent }, + { + path: 'chat', + component: ChatComponent, + } ]; diff --git a/webapp/src/app/chat/chat/chat.component.html b/webapp/src/app/chat/chat/chat.component.html new file mode 100644 index 00000000..42047d6b --- /dev/null +++ b/webapp/src/app/chat/chat/chat.component.html @@ -0,0 +1,46 @@ +
+ +
+ +
+
+ +
+
+
+

Hello! How can I help you today?

+
+ AI Mentor · 2 mins ago +
+
+ +
+
+
+

What are your features?

+
+ You · 1 min ago +
+ + + + {{ user()?.name?.slice(0, 2)?.toUpperCase() ?? '?' }} + + +
+
+ + +
+
+ + +
+
+
\ No newline at end of file diff --git a/webapp/src/app/chat/chat/chat.component.ts b/webapp/src/app/chat/chat/chat.component.ts new file mode 100644 index 00000000..6eea9a13 --- /dev/null +++ b/webapp/src/app/chat/chat/chat.component.ts @@ -0,0 +1,25 @@ +import { Component, inject } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; +import { SecurityStore } from '@app/core/security/security-store.service'; +import { HlmAvatarModule } from '@spartan-ng/ui-avatar-helm'; + +import { Send, Hammer, LucideAngularModule } from 'lucide-angular'; + +@Component({ + selector: 'app-chat', + templateUrl: './chat.component.html', + standalone: true, + imports: [ + FormsModule, + CommonModule, + LucideAngularModule, + HlmAvatarModule], +}) +export class ChatComponent { + protected Send = Send; + protected Hammer = Hammer; + + securityStore = inject(SecurityStore); + user = this.securityStore.loadedUser; +} \ No newline at end of file diff --git a/webapp/src/app/core/header/ai-mentor/ai-mentor.component.html b/webapp/src/app/core/header/ai-mentor/ai-mentor.component.html new file mode 100644 index 00000000..3e66b342 --- /dev/null +++ b/webapp/src/app/core/header/ai-mentor/ai-mentor.component.html @@ -0,0 +1,21 @@ + + + + @if (!iconOnly()) { + AI Mentor + } + + @if (iconOnly()) { + AI Mentor + } + \ No newline at end of file diff --git a/webapp/src/app/core/header/ai-mentor/ai-mentor.component.ts b/webapp/src/app/core/header/ai-mentor/ai-mentor.component.ts new file mode 100644 index 00000000..465d2e36 --- /dev/null +++ b/webapp/src/app/core/header/ai-mentor/ai-mentor.component.ts @@ -0,0 +1,19 @@ +import { booleanAttribute, Component, input } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { HlmButtonModule } from '@spartan-ng/ui-button-helm'; +import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain'; +import { HlmTooltipComponent, HlmTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-helm'; +import { LucideAngularModule, BotMessageSquare } from 'lucide-angular'; + + +@Component({ + selector: 'app-ai-mentor', + standalone: true, + imports: [LucideAngularModule, HlmButtonModule, HlmTooltipComponent, HlmTooltipTriggerDirective, BrnTooltipContentDirective, RouterModule], + templateUrl: './ai-mentor.component.html' +}) +export class AiMentorComponent { + protected BotMessageSquare = BotMessageSquare; + + iconOnly = input(false, { transform: booleanAttribute }); +} \ No newline at end of file diff --git a/webapp/src/app/core/header/header.component.html b/webapp/src/app/core/header/header.component.html index 8be8e399..31376137 100644 --- a/webapp/src/app/core/header/header.component.html +++ b/webapp/src/app/core/header/header.component.html @@ -5,6 +5,9 @@