livechat-assistant 0.0.9 → 0.1.0

package/src/lib/components/chat-history/chat-history.component.ts

@@ -1,97 +0,0 @@
-import { Component, ChangeDetectionStrategy, EventEmitter, Output, } from '@angular/core';
-
-@Component({
-  selector: 'app-chat-history',
-  imports: [],
-  templateUrl: './chat-history.component.html',
-  styleUrl: './chat-history.component.scss',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ChatHistoryComponent {
-  @Output() navigate= new EventEmitter<number>();
-
-  conversations = [
-    {
-      id: 1,
-      name: 'Costa Quinn',
-      avatar: true,
-      lastMessage: 'Yes, you can!',
-      time: '11M',
-      status: 'read',
-      color: 'bg-red-600',
-      online: true,
-      initials: ''
-    },
-    {
-      id: 2,
-      name: 'Rachel Doe',
-      initials: 'R',
-      color: 'bg-blue-600',
-      lastMessage: 'When using open method, const select = n...',
-      time: '14M',
-      unreadCount: 1,
-      online: false,
-      avatar:false
-    },
-    {
-      id: 3,
-      name: 'Lewis Clarke',
-      avatar: true,
-      lastMessage: 'Have a great all free! 😊',
-      time: '15M',
-      online: true,
-      status: 'read',
-      color: 'bg-blue-400'
-    },
-    {
-      id: 4,
-      name: 'Technical issues',
-      initials: 'T',
-      color: 'bg-orange-500',
-      lastMessage: 'Great!',
-      time: '35M',
-      status: 'read',
-      hasAttachment: true,
-      online:false
-    },
-    {
-      id: 5,
-      name: 'Bob Dean',
-      initials: 'B',
-      color: 'bg-pink-500',
-      lastMessage: 'Hey Preline team, I got an p3p48 while using...',
-      time: '1H',
-      unreadCount: 1,
-      online:true
-    },
-    {
-      id: 6,
-      name: 'Mark Colbert',
-      initials: 'M',
-      color: 'bg-teal-500',
-      lastMessage: 'Voice message',
-      time: '6DM',
-      status: 'delivered',
-      online: false
-    },
-    {
-      id: 7,
-      name: 'Ella Lauda',
-      avatar: true,
-      lastMessage: 'I am really impressed! Can\'t wait...',
-      time: '37M',
-      online: false
-    }
-  ];
-
-  selectConversation(id: number, tabIndex:number) {
-    console.log('Selected conversation:', id);
-    this.navigate.emit(tabIndex);
-  }
-  
-  navigateToTab(tabIndex:number) {
-    this.navigate.emit(tabIndex);
-  }
-
-}

package/src/lib/components/chat-widget/chat-widget.component.html

@@ -1,87 +0,0 @@
-<div class="chatbot bg-white dark:bg-neutral-900 ">
-
-    <div>
-        @if (activeTab === 1) {
-        <div role="tabpanel">
-            <app-home (navigate)="navigateToTab($event)" />
-        </div>
-        }
-
-        @if (activeTab === 2) {
-        <div role="tabpanel">
-            <app-message [messages]="messages" [isTyping]="isTyping" (sendMessage)="sendMessage($event)" (navigate)="navigateToTab($event)"/>
-        </div>
-        }
-
-        @if (activeTab === 3) {
-        <div role="tabpanel">
-            <app-help-support (navigate)="navigateToTab($event)"/>
-        </div>
-        }
-
-        @if (activeTab === 4) {
-        <div role="tabpanel">
-            <app-chat-history (navigate)="navigateToTab($event)"/>
-        </div>
-        }
-
-        @if (activeTab === 5) {
-        <div role="tabpanel">
-            <app-success-message (navigate)="navigateToTab($event)" /> 
-        </div>
-        }
-
-    </div>
-
-    <div class="">        
-        <nav class="flex justify-evenly" aria-label="Tabs" role="tablist">
-            <button type="button" (click)="setActiveTab(1)" 
-            [class.text-blue-500]="activeTab === 1" 
-            [class.text-neutral-300]="activeTab !== 1"
-            class="py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap transition-colors  focus:outline-none flex flex-col gap-2">
-
-                <div [ngClass]="activeTab === 1 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'" class="px-4 py-2.5">
-                    <svg class="shrink-0 size-5" [class.text-black]="activeTab === 1"   xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                        stroke-linejoin="round">
-                        <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
-                    </svg>
-                </div>
-
-                <span class="text-lg fw-4 hover:text-blue-200">Home</span>
-            </button>
-
-            <button type="button" (click)="setActiveTab(2)" [class.font-bold]="activeTab === 2"
-                [class.text-blue-500]="activeTab === 2" [class.text-neutral-300]="activeTab !== 2"
-                class="py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap hover:text-blue-200 focus:outline-none  flex flex-col gap-2">
-                <div [ngClass]="activeTab === 2 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'" class="px-4 py-2.5">
-                <svg class="shrink-0 size-5" [class.text-black]="activeTab === 2" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                    stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="10"></circle>
-                    <circle cx="12" cy="10" r="3"></circle>
-                    <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"></path>
-                </svg>
-                </div>
-                <span class="text-lg fw-6 hover:text-blue-200">Message</span>
-            </button>
-
-            <button type="button" (click)="setActiveTab(3)" [class.font-bold]="activeTab === 3"
-                [class.text-blue-500]="activeTab === 3" [class.text-neutral-300]="activeTab !== 3"
-                class="py-2 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap hover:text-blue-200 focus:outline-none  flex flex-col gap-2">
-                <div [ngClass]="activeTab === 3 ? 'bg-blue-100 rounded-full dark:font-semibold transition-colors' : 'bg-transparent'" class="px-4 py-2.5">
-                <svg class="shrink-0 size-5"  [class.text-black]="activeTab === 3" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                    stroke-linejoin="round">
-                    <path
-                        d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z">
-                    </path>
-                    <circle cx="12" cy="12" r="3"></circle>
-                </svg>
-                </div>
-                <span class="text-lg fw-6 hover:text-blue-200">Help</span>
-            </button>
-        </nav>
-    </div>
-</div>

package/src/lib/components/chat-widget/chat-widget.component.scss

@@ -1,77 +0,0 @@
-:host {
-    
-    .chat-container {
-        width: 400px !important; 
-    }
-    .btn-round {
-        border-radius: 100% !important;
-        width: 40px !important;
-        height: 40px !important;
-        &.btn-fab {
-            position: fixed !important;
-            bottom: 20px !important;
-            right: 30px !important;
-            width: 60px !important;
-            height: 60px !important;
-            border-radius: 100%;
-            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
-            i {
-                position: relative !important;
-                top: 0px !important;
-                right: -18px !important;
-                // margin: 10px auto !important;
-            }
-        }
-    }
-    #send-btn {
-        margin-bottom: 10px !important;
-        margin-right: 0px !important;
-    }
-
-    .chatbot header {
-        padding: 10px 10px !important;
-        position: relative;
-        text-align: center;
-    }
-
-    .chatbot .chatbox {
-        overflow-y: auto;
-        height: 550px;
-        margin-bottom: 40px !important;
-    }
-
-    .chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
-        border-radius: 25px;
-    }
-
-    .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
-        border-radius: 25px;
-    }
-    @media (max-width: 490px) {
-        .chatbot-toggler {
-            right: 20px;
-            bottom: 20px;
-        }
-
-        .chatbot {
-            right: 0;
-            bottom: 0;
-            height: 100%;
-            border-radius: 0;
-            width: 100%;
-        }
-
-        .chatbot .chatbox {
-            height: 90%;
-            padding: 25px 15px 100px;
-        }
-
-        .chatbot header span {
-            display: block;
-        }
-    }
-}

package/src/lib/components/chat-widget/chat-widget.component.spec.ts

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

package/src/lib/components/chat-widget/chat-widget.component.ts

@@ -1,84 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { NgClass } from '@angular/common';
-import { ChatHistoryComponent } from '../chat-history/chat-history.component';
-import { HelpSupportComponent } from '../help-support/help-support.component';
-import { HomeComponent } from '../home/home.component';
-import { MessageComponent } from '../message/message.component';
-import { SuccessMessageComponent } from '../success-message/success-message.component';
-@Component({
-  selector: 'app-chat-widget',
-  standalone: true,
-  imports: [
-    FormsModule,
-    HomeComponent,
-    MessageComponent,
-    HelpSupportComponent,
-    FormsModule,
-    ChatHistoryComponent,
-    NgClass,
-    SuccessMessageComponent
-],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './chat-widget.component.html',
-  styleUrl: './chat-widget.component.scss',
-  encapsulation: ViewEncapsulation.None
-})
-export class ChatWidgetComponent {
-  isTyping = false;
-  @Input() isOpen = false;
-  activeTab = 1;
-
-  setActiveTab(tab: number) {
-    this.activeTab = tab;
-  }
-
-  navigateToTab(tab:number) {
-    this.setActiveTab(tab); 
-  }
-
-  messages = [
-    {
-      id: 1,
-      sender: 'agent',
-      text: 'Hi, I\'d like to ask some questions. Can I use Preline UI on a client project?',
-      time: '9:40 AM'
-    },
-    {
-      id: 2,
-      sender: 'agent',
-      text: 'https://preline.co/',
-      time: '9:41 AM',
-    },
-    {
-      id: 3,
-      sender: 'customer',
-      text: 'Hi, I\'d like to ask some questions. Can I use Preline UI on a client project?',
-      time: '11:27 AM'
-    },
-    {
-      id: 4,
-      sender: 'customer',
-      text: 'Yes, you can! 😊',
-      time: '11:28 AM'
-    }
-  ];
-
-  sendMessage(message: string) {
-    if (message.trim()) {
-      this.messages.push({
-        id: this.messages.length + 1,
-        sender: 'customer',
-        text: message,
-        time: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
-      }); 
-      console.log(message)     
-      // Simulate agent typing
-      this.isTyping = true;
-      setTimeout(() => {
-        this.isTyping = false;
-      }, 2000);
-    }
-  }
-
-}

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

@@ -1,106 +0,0 @@
-<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>
-    
-    
-    <!-- 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="p-4 overflow-y-auto hideScroll">
-    
-    <h2 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200 mb-1">Send a message</h2>
-    <p class="text-sm text-neutral-500 dark:text-neutral-200 mb-6">We'll get back to you in a few hours.</p>
-    
-    <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="space-y-4">
-      
-      <div>
-        <label for="name" class="block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1">Name</label>
-        <input 
-          type="text" 
-          id="name"
-          formControlName="name"
-          placeholder="John Doe"
-          class="w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          [class.border-red-500]="contactForm.get('name')?.invalid && contactForm.get('name')?.touched">
-        <p *ngIf="contactForm.get('name')?.invalid && contactForm.get('name')?.touched" 
-           class="text-xs text-red-500 mt-1">Name is required</p>
-      </div>
-      
-      <!-- Email Field -->
-      <div class="relative">
-        <label for="email" class="block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1">Email</label>
-        <input 
-          type="email" 
-          id="email"
-          formControlName="email"
-          placeholder="john@site.co"
-          (focus)="showTooltip = true"
-          (blur)="showTooltip = false"
-          class="w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          [class.border-red-500]="contactForm.get('email')?.invalid && contactForm.get('email')?.touched">
-        
-        <!-- Tooltip -->
-        <div *ngIf="showTooltip" 
-             class="absolute right-0 top-0 mt-1 mr-2 bg-neutral-900 dark:text-neutral-200 text-white text-xs px-3 py-2 rounded shadow-lg z-10 whitespace-nowrap">
-          Existing accounts should use <br>your account to access the <br>source code.
-          <div class="absolute top-1/2 -right-1 transform -translate-y-1/2 w-2 h-2 bg-neutral-900 dark:text-neutral-200 rotate-45"></div>
-        </div>
-        
-        <p *ngIf="contactForm.get('email')?.invalid && contactForm.get('email')?.touched" 
-           class="text-xs text-red-500 mt-1">
-          <span *ngIf="contactForm.get('email')?.errors?.['required']">Email is required</span>
-          <span *ngIf="contactForm.get('email')?.errors?.['email']">Invalid email format</span>
-        </p>
-      </div>
-      
-      <!-- Subject Field -->
-      <div>
-        <label for="subject" class="block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1">Subject</label>
-        <input 
-          type="text" 
-          id="subject"
-          formControlName="subject"
-          placeholder="Preline Pro"
-          class="w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          [class.border-red-500]="contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched">
-        <p *ngIf="contactForm.get('subject')?.invalid && contactForm.get('subject')?.touched" 
-           class="text-xs text-red-500 mt-1">Subject is required</p>
-      </div>
-      
-      <!-- Message Field -->
-      <div>
-        <label for="message" class="block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1">How can we help?</label>
-        <textarea 
-          id="message"
-          formControlName="message"
-          rows="4"
-          placeholder="Message..."
-          class="w-full px-4 py-2.5 border border-neutral-500 dark:text-neutral-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
-          [class.border-red-500]="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"></textarea>
-        <p *ngIf="contactForm.get('message')?.invalid && contactForm.get('message')?.touched" 
-           class="text-xs text-red-500 mt-1">Message is required</p>
-      </div>
-      
-      <!-- Submit Button -->
-      <button 
-        type="submit"
-        [disabled]="contactForm.invalid"
-        (click)="navigateToTab(5)"
-        class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
-        Send message
-      </button>
-      
-    </form>
-    
-  </div>
-  </div>
-

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

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,64 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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