79 lines
3.6 KiB
HTML
79 lines
3.6 KiB
HTML
<div class="flex transition-all duration-300 h-screen">
|
|
<div class="h-full flex-1 flex flex-col backdrop-blur-[20px] relative">
|
|
<div
|
|
class="flex-1 overflow-y-auto p-8 flex flex-col gap-6 scroll-smooth custom-scrollbar"
|
|
#scrollContainer
|
|
>
|
|
@if(messageStore.isLoading()) {
|
|
<div class="w-full h-full flex items-center justify-center">
|
|
<app-loader class="w-8" />
|
|
</div>
|
|
} @else{ @for (msg of messageStore.messages(); track msg.id) {
|
|
<div
|
|
class="flex flex-col max-w-[80%] animate-[messageAppear_0.5s_cubic-bezier(0.16,1,0.3,1)]"
|
|
[ngClass]="msg.attributes.role === 'user' ? 'self-end items-end' : 'self-start items-start'"
|
|
>
|
|
<div
|
|
class="px-5 py-4 rounded-2xl text-sm leading-relaxed shadow-[0_4px_15px_rgba(0,0,0,0.1)] relative whitespace-pre-wrap"
|
|
[ngClass]="msg.attributes.role === 'user' ? 'bg-linear-to-br from-indigo-500 to-purple-600 text-white rounded-br-sm' : 'bg-white/10 border border-white/5 text-slate-200 rounded-bl-sm backdrop-blur-md'"
|
|
>
|
|
{{ msg.attributes.content }}
|
|
</div>
|
|
<div class="text-xs text-slate-500 mt-2 px-1">
|
|
{{ msg.attributes.createdAt | date:'shortTime' }}
|
|
</div>
|
|
</div>
|
|
}
|
|
<!--Agent thinking indicator-->
|
|
@if (messageStore.isAgentThinking()) {
|
|
<div
|
|
class="flex items-center gap-1.5 px-5 py-4 bg-white/5 rounded-2xl rounded-bl-sm self-start animate-[fadeIn_0.3s_ease-in-out]"
|
|
>
|
|
<div
|
|
class="w-2 h-2 bg-[#4facfe] rounded-full animate-[typing_1.4s_infinite_ease-in-out_both] delay-[-0.32s]"
|
|
></div>
|
|
<div
|
|
class="w-2 h-2 bg-[#4facfe] rounded-full animate-[typing_1.4s_infinite_ease-in-out_both] delay-[-0.16s]"
|
|
></div>
|
|
<div
|
|
class="w-2 h-2 bg-[#4facfe] rounded-full animate-[typing_1.4s_infinite_ease-in-out_both] delay-0"
|
|
></div>
|
|
</div>
|
|
} }
|
|
</div>
|
|
|
|
<div class="px-8 py-3">
|
|
@if (errorMessage) {
|
|
<div
|
|
class="text-[#ff6b6b] text-sm mb-3 px-4 py-2 bg-[#ff6b6b]/10 rounded-lg border border-[#ff6b6b]/20 animate-[fadeIn_0.3s_ease-in-out]"
|
|
>
|
|
{{ errorMessage }}
|
|
</div>
|
|
}
|
|
|
|
<div
|
|
class="w-full flex gap-4 bg-white/5 px-4 py-2 rounded-full border border-white/10 transition-all duration-300 focus-within:bg-white/10 focus-within:border-[#4facfe]/50 focus-within:shadow-[0_0_20px_rgba(79,172,254,0.2)]"
|
|
>
|
|
<input
|
|
class="flex-1 bg-transparent border-none text-white text-base py-1 px-2 outline-none font-inherit placeholder-slate-500"
|
|
type="text"
|
|
[formControl]="messageControl"
|
|
(keydown.enter)="sendMessage()"
|
|
placeholder="Type a message..."
|
|
[disabled]="messageStore.isLoading()"
|
|
/>
|
|
<button
|
|
class="bg-linear-to-br from-[#00f2fe] to-[#4facfe] border-none w-8 h-8 rounded-full flex items-center justify-center cursor-pointer text-white transition-all duration-200 hover:scale-105 hover:-translate-y-0.5 hover:shadow-[0_10px_20px_rgba(79,172,254,0.3)] active:scale-95 disabled:hover:scale-100 disabled:hover:translate-y-0 disabled:!bg-none disabled:bg-white/10 disabled:text-white/30 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none"
|
|
(click)="sendMessage()"
|
|
[disabled]="!messageControl.value || messageStore.isLoading()"
|
|
>
|
|
<svg class="w-3 h-3 fill-current" viewBox="0 0 24 24">
|
|
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<app-sidebar></app-sidebar>
|
|
</div>
|