livechat-assistant 0.0.7 → 0.0.9

package/src/lib/components/help-support/help-support.component.ts

@@ -0,0 +1,46 @@
+import { NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-help-support',
+  imports: [ReactiveFormsModule, NgIf],
+  templateUrl: './help-support.component.html',
+  styleUrl: './help-support.component.scss',  
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HelpSupportComponent {
+  showTooltip = false;
+  contactForm!: FormGroup;
+  @Output() navigate= new EventEmitter<number>();
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit() {
+    this.contactForm = this.fb.group({
+      name: ['', [Validators.required]],
+      email: ['', [Validators.required, Validators.email]],
+      subject: ['', [Validators.required]],
+      message: ['', [Validators.required]]
+    });
+  }
+
+  onSubmit() {
+    if (this.contactForm.valid) {
+      console.log('Form submitted:', this.contactForm.value);
+      
+      this.contactForm.reset();
+    } else {
+      // Mark all fields as touched to show validation errors
+      Object.keys(this.contactForm.controls).forEach(key => {
+        this.contactForm.get(key)?.markAsTouched();
+      });
+    }
+
+}
+
+navigateToTab(tabIndex:number) {
+  this.navigate.emit(tabIndex);
+}
+}

package/src/lib/components/home/home.component.html

@@ -0,0 +1,64 @@
+<div class="rounded-lg flex flex-col overflow-hidden max-h-[600px]">
+      <div class="relative h-32 bg-gradient-to-br from-cyan-300 via-blue-600 to-orange-400 overflow-hidden">
+      <div class="absolute inset-0">
+        <div class="absolute top-0 left-0 w-24 h-24 bg-blue-700 transform rotate-45 -translate-x-8 -translate-y-8"></div>
+        <div class="absolute top-4 right-0 w-32 h-32 bg-orange-400 transform rotate-12 translate-x-12"></div>
+        <div class="absolute bottom-0 left-8 w-28 h-28 bg-cyan-400 transform -rotate-12 translate-y-12"></div>
+      </div>
+      <button class="absolute top-3 right-3 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30">
+        ×
+      </button>
+      
+      <!-- Logo -->
+      <div class="absolute bottom-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg">
+        <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
+        </svg>
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-y-auto p-4 hideScroll">
+      <div>
+        <h2 class="text-lg font-semibold dark:text-neutral-200 text-gray-800 mt-4">Hi, Penny 👋</h2>
+        <p class="text-sm text-neutral-500  dark:text-neutral-200 mb-5">Preline support team is here to help.</p>
+        
+        <button (click)="navigateToTab(3)" class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mb-6">
+          Send us a message
+        </button>
+        
+        <div class="space-y-4">
+          <p class="text-sm font-semibold text-neutral-500  dark:text-neutral-200">Popular topics</p>
+          
+          <a href="#" class="flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group">
+            <div>
+              <h3 class="fs-16 fw-6 dark:text-neutral-200 text-neutral-800">Live Chat</h3>
+              <p class="text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800">Team, Invoices, Refunds, and Updates</p>
+            </div>
+            <svg class="w-5 h-5 text-neutral-400 group-hover:text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </a>
+          
+          <a href="#" class="flex items-center justify-between p-3 dark:bg-neutral-800 bg-neutral-50 hover:bg-neutral-800/50 rounded-lg transition group">
+            <div>
+                <h3 class="fs-16 fw-6 dark:text-neutral-200 text-neutral-800">AI Chat</h3>
+                <p class="text-sm text-neutral-500 dark:text-neutral-200/80 text-neutral-800">Team, Invoices, Refunds, and Updates</p>
+            </div>
+            <svg class="w-5 h-5 text-neutral-400 group-hover:text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </a>
+          
+          <a href="#" class="flex  mb-2 items-center justify-between p-3 dark:bg-neutral-800 bg-gray-50 hover:bg-neutral-800/50 rounded-lg transition group">
+            <div>
+                <h3 class="fs-16 fw-6 dark:text-neutral-200 text-neutral-800">Support Chat</h3>
+                <p class="text-sm text-gray-500 dark:text-neutral-200/80 text-neutral-800">Team, Invoices, Refunds, and Updates</p>
+            </div>
+            <svg class="w-5 h-5 text-gray-400 group-hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </a>
+        </div>
+      </div>
+      
+      <div class="border-t border-neutral-700"></div>

package/src/lib/components/home/home.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/home/home.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  imports: [],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class HomeComponent {
+  @Output() navigate= new EventEmitter<number>();
+
+  navigateToTab(tabIndex: number) {
+    this.navigate.emit(tabIndex);
+  }
+}

package/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './chat-widget/chat-widget.component'
+export * from './support-buttons/support-buttons.component'

package/src/lib/components/message/message.component.html

@@ -0,0 +1,119 @@
+<div class="flex flex-col rounded-xl" [class]="noMessage ? 'max-h-[600px]' : 'h-[600px]'">
+    <div
+        class="flex items-center justify-between px-4 py-3 dark:bg-neutral-700/20 shadow-xl bg-neutral-50 hover:bg-neutral-800/50 rounded-xl">
+        <div class="flex items-center gap-3">
+            <button class="cursor-pointer" (click)="return(4)">
+                <svg class="w-5 h-5 text-neutral-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                </svg>
+            </button>
+            <img src="https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff"
+                class="w-10 h-10 rounded-full" alt="Agent">
+            <div>
+                <h3 class="font-semibold text-neutral-800 dark:text-neutral-200 fs-16">AI Bot</h3>
+                <p class="text-green-300/80 fs-14">Online</p>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="text-center h-full flex flex-col justify-center items-center relative animate-scale-in">
+            <h2 class="text-2xl font-bold text-gray-800 mb-2 dark:text-neutral-200">Hey Penny!</h2>
+        <p class="text-gray-600 text-sm dark:text-neutral-200/80">
+            You can ask me anything.
+        </p>    
+      </div>
+
+      
+    @if(noMessage) {
+    <div class="flex-1 overflow-y-auto px-4 py-6 space-y-4 hideScroll">
+        @for (message of messages; track $index) {
+        <div [class.flex-row-reverse]="message.sender === 'customer'" class="flex gap-3 items-start">
+
+            @if (message.sender === 'agent') {
+            <img src="https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff"
+                class="w-8 h-8 rounded-full flex-shrink-0" alt="Avatar" />
+            }
+
+            <div [class.items-end]="message.sender === 'customer'" class="flex flex-col max-w-xs">
+
+                <div [class.bg-blue-600]="message.sender === 'customer'"
+                    [class.text-white]="message.sender === 'customer'" [class.bg-white]="message.sender === 'agent'"
+                    [class.text-gray-800]="message.sender === 'agent'" class="rounded-2xl px-4 py-2.5 shadow-sm">
+                    <p class="text-sm whitespace-pre-wrap fs-16 ">{{ message.text }}</p>
+                </div>
+                <span class="text-sm text-neutral-300 mt-1 px-1">{{ message.time }}</span>
+            </div>
+        </div>
+        }
+
+
+
+        @if (isTyping) {
+        <div class="flex gap-3 items-start">
+            <img src="https://ui-avatars.com/api/?name=Costa+Quinn&background=0D8ABC&color=fff"
+                class="w-8 h-8 rounded-full" alt="Agent">
+            <div class="bg-white rounded-2xl px-4 py-3 shadow-sm">
+                <div class="flex gap-1">
+                    <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></span>
+                    <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></span>
+                    <span class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></span>
+                </div>
+            </div>
+        </div>
+        }
+    </div>
+    }
+        <div>
+            <div class="flex flex-wrap justify-center gap-1.5 sm:gap-2 bg-transparent scroll-xcontainer">
+                @for (suggestion of suggestions; track $index) {
+                    <button (click)="newMessage = suggestion; onSendMessage()" class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm bg-linear-to-tl from-blue-500 to-blue-800 text-white rounded-lg focus:outline-hidden ">
+                        {{ suggestion }}
+                      </button>
+                }
+              </div>
+        </div>
+
+    <div class="px-4">
+
+        <div class="flex justify-between items-center w-full py-2.5">
+            <div class="flex gap-2 w-full">
+                <button (click)="fileInput.click()"
+                    class="text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                    </svg>
+                </button>
+                <input #fileInput type="file" class="hidden" (change)="onFileSelect($event)">
+
+                <button class="text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                </button>
+
+                <input [(ngModel)]="newMessage" (keyup.enter)="onSendMessage()" type="text"
+                    placeholder="Type a message..."
+                    class="flex-1 py-3 dark:text-white text-black rounded-md fs-16 focus:outline-none focus:ring-0 focus:ring-none w-full" />
+            </div>
+
+            <div class="flex gap-2 justify-end">
+                <button (click)="onSendMessage()" [disabled]="!newMessage.trim()"
+                    class="bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed p-2">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                    </svg>
+                </button>
+                <button class="text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/message/message.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessageComponent } from './message.component';
+
+describe('MessageComponent', () => {
+  let component: MessageComponent;
+  let fixture: ComponentFixture<MessageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MessageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/message/message.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-message',
+  imports: [FormsModule],
+  templateUrl: './message.component.html',
+  styleUrl: './message.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MessageComponent {
+  newMessage = '';
+  noMessage = false;
+  @Input() isTyping = false;
+  @Input() messages: any;
+  @Input() suggestions: string[] = ['Health', 'Learn', 'Technology', 'Science'];
+
+  @Output() sendMessage = new EventEmitter();
+  @Output() navigate= new EventEmitter<number>();
+
+  onSendMessage() {
+    if (this.newMessage.trim()) {
+      this.sendMessage.emit(this.newMessage);
+      this.newMessage = '';
+      this.noMessage = true
+    }
+  }
+
+  onFileSelect(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      console.log('File selected:', file.name);
+      // Handle file upload here
+    }
+  }
+
+  return(tabIndex:number) {
+    this.navigate.emit(tabIndex);
+  }
+
+    // private scrollToBottom(): void {
+  //   if (this.messagesContainer) {
+  //     const element = this.messagesContainer.nativeElement;
+  //     element.scrollTop = element.scrollHeight;
+  //   }
+  // }
+}

package/src/lib/components/success-message/success-message.component.html

@@ -0,0 +1,33 @@
+<div class="bg-white rounded-lg h-[600px]">
+<div class="confetti-container">
+    @for (confetti of confettiArray; track $index) {
+        <div
+             [style.left.%]="confetti.left"
+             [style.animation-delay.s]="confetti.delay"
+             [style.background-color]="confetti.color"
+             class="confetti">
+            </div>
+    }
+  </div>
+
+  <div class="p-4 text-center h-full flex flex-col justify-center items-center relative animate-scale-in">
+    <div class="mb-6 flex justify-center items-center">
+      <div class="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center animate-bounce-in">
+        <svg class="w-8 h-8 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
+        </svg>
+      </div>
+    </div>
+
+    <!-- Title -->
+    <h2 class="text-2xl font-bold text-gray-800 mb-4">Email Delivered!</h2>
+    <p class="text-gray-600 text-sm mb-2">
+      You're set on chatting with an online agent or ask your our AI robot your questions.
+    </p>
+
+    <button (click)="navigateToTab(2)" class="mt-6 bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition">
+      Start a new chat
+    </button>
+
+  </div>
+</div>

package/src/lib/components/success-message/success-message.component.scss

@@ -0,0 +1,65 @@
+.confetti-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    z-index: 51;
+  }
+
+  .confetti {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: -10%;
+    opacity: 0;
+    animation: confetti-fall 3s linear forwards;
+  }
+
+  @keyframes confetti-fall {
+    0% {
+      top: -10%;
+      opacity: 1;
+      transform: translateX(0) rotateZ(0deg);
+    }
+    100% {
+      top: 100%;
+      opacity: 0;
+      transform: translateX(100px) rotateZ(720deg);
+    }
+  }
+
+  @keyframes scale-in {
+    0% {
+      transform: scale(0.7);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes bounce-in {
+    0% {
+      transform: scale(0);
+    }
+    50% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  .animate-scale-in {
+    animation: scale-in 0.4s ease-out;
+  }
+
+  .animate-bounce-in {
+    animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    animation-delay: 0.2s;
+    animation-fill-mode: backwards;
+  }

package/src/lib/components/success-message/success-message.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SuccessMessageComponent } from './success-message.component';
+
+describe('SuccessMessageComponent', () => {
+  let component: SuccessMessageComponent;
+  let fixture: ComponentFixture<SuccessMessageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SuccessMessageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SuccessMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/success-message/success-message.component.ts

@@ -0,0 +1,34 @@
+import { Component, ChangeDetectionStrategy, EventEmitter, Output, } from '@angular/core';
+
+@Component({
+  selector: 'app-success-message',
+  imports: [],
+  templateUrl: './success-message.component.html',
+  styleUrl: './success-message.component.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SuccessMessageComponent {
+
+  @Output() navigate= new EventEmitter<number>();
+  confettiArray: Array<{left: number, delay: number, color: string}> = [];
+
+  ngOnInit() {
+    this.generateConfetti();
+  }
+
+  navigateToTab(tabIndex:number) {
+    this.navigate.emit(tabIndex);
+  }
+  generateConfetti() {
+    const colors = ['#10B981', '#3B82F6', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];
+    
+    for (let i = 0; i < 50; i++) {
+      this.confettiArray.push({
+        left: Math.random() * 100,
+        delay: Math.random() * 2,
+        color: colors[Math.floor(Math.random() * colors.length)]
+      });
+    }
+  }
+}

package/src/lib/components/support-buttons/support-buttons.component.html

@@ -0,0 +1,42 @@
+<ul class="fab-options z-90 fixed bottom-25 right-5" [class]="cssClass">
+  <!-- <li>
+    <span class="fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white">Chat with Aide on Whatsapp</span>
+    <a class=" bg-white text-green-600 dark:bg-neutral-800 dark:text-white btn-round btn-fab">
+      <div class="size-6">
+        <i class='fi fi-brands-whatsapp fs-20'></i>
+      </div>
+    </a>
+  </li>
+  <li>
+    <span class="fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white">Chat with Aide on Telegram</span>
+    <a class=" bg-white text-blue-400 dark:bg-neutral-800 dark:text-white btn-round btn-fab">
+      <div class="size-6">
+        <i class='fi fi-brands-telegram fs-20'></i>
+      </div>
+    </a>
+  </li> -->
+  <li>
+    <span class="fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white">Live Chat</span>
+    <a (click)="toggleLivechat()" class="bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab">
+      <div class="size-6">
+        <i class='fi fi-rr-robot fs-20'></i>
+      </div>
+    </a>
+  </li>
+  <!-- <li>
+    <span class="fab-label bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white">Send us a mail</span>
+    <a class="bg-white text-neutral-950 dark:bg-neutral-800 dark:text-white btn-round btn-fab">
+      <div class="size-6">
+        <i class='fi fi-rr-envelope fs-20'></i>
+      </div>
+    </a>
+  </li> -->
+</ul>
+
+<button class="fixed bottom-5 right-5 main z-90 animated fadeInUp fs-20 bg-linear-to-tl from-blue-500 to-blue-800 text-white btn-round btn-fab btn-fab-button dark:bg-dark" (click)="toggleFab()" (keydown)="toggleFab()">
+  <div class="size-6">
+    <i class='fi fi-rr-comment fs-30 relative'></i>
+  </div>
+</button>
+
+<app-chat-widget [isOpen]="isOpen || false" />

package/src/lib/components/support-buttons/support-buttons.component.scss

@@ -0,0 +1,49 @@
+:host {
+
+	.fadeIn {
+		opacity: 1 !important;
+		transform: scale(1) !important;
+	}
+	
+	.fadeOut {
+		opacity: 0 !important;
+		transform: scale(0) !important;
+	}
+
+	.fab-options {
+		list-style-type: none;
+		opacity: 0;
+		transition: all 0.3s ease;
+		transform: scale(0);
+		transform-origin: 85% bottom;
+		li {
+			display: flex;
+			justify-content: flex-end;
+			padding: 5px;
+
+			.btn-fab {
+				width: 50px !important;
+				height: 50px !important;
+				box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+				i {
+					position: relative !important;
+					top: 12px !important;
+					right: -15px !important;
+					// margin: 10px auto !important;
+				}
+			}
+
+			.fab-label {
+				padding: 2px 10px;
+				align-self: center;
+				user-select: none;
+				white-space: nowrap;
+				border-radius: 3px;
+				font-size: 13px;
+				font-weight: 400;
+				box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+				margin-right: 10px;
+			}
+		}
+	}
+}

package/src/lib/components/support-buttons/support-buttons.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SupportButtonsComponent } from './support-buttons.component';
+
+describe('SupportButtonsComponent', () => {
+  let component: SupportButtonsComponent;
+  let fixture: ComponentFixture<SupportButtonsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SupportButtonsComponent]
+    });
+    fixture = TestBed.createComponent(SupportButtonsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/support-buttons/support-buttons.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChatWidgetComponent } from '../chat-widget/chat-widget.component';
+import { closeChat, toggleLivechat } from '../../utilities';
+
+@Component({
+  selector: 'app-support-buttons',
+  templateUrl: './support-buttons.component.html',
+  styleUrls: ['./support-buttons.component.scss'],
+  standalone: true,
+  imports: [
+    ChatWidgetComponent
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SupportButtonsComponent implements OnInit {
+  cssClass: 'fadeIn' | 'fadeOut' = 'fadeOut';
+  isOpen = false;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    closeChat();
+  }
+
+  toggleFab() {
+    closeChat();
+    this.cssClass = this.cssClass === 'fadeIn' ? 'fadeOut' : 'fadeIn';
+  }
+
+  toggleLivechat() {
+    this.isOpen = toggleLivechat();
+  }
+}