livechat-assistant 0.0.9 → 0.1.0

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

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

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

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

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

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

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

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

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

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

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

@@ -1,33 +0,0 @@
-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();
-  }
-}

package/src/lib/environment/environment.test.ts

@@ -1,15 +0,0 @@
-export const chat = {
-    url: 'https://backoffice.kreador.io',
-    db: "developer_odoodemo_db",
-    email: "info@kreador.io",
-    password: "admin",
-    payload: {
-        jsonrpc: "2.0", 
-        method: "call", 
-        params: {
-            service: "object", 
-            method: "execute_kw",
-            args: []
-        }
-    }
-}

package/src/lib/livechat-assistant.component.spec.ts

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

package/src/lib/livechat-assistant.component.ts

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'lib-livechat-assistant',
-  imports: [],
-  template: `
-    <p>
-      livechat-assistant works!
-    </p>
-  `,
-  styles: ``
-})
-export class LivechatAssistantComponent {
-
-}

package/src/lib/livechat-assistant.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { LivechatAssistantService } from './livechat-assistant.service';
-
-describe('LivechatAssistantService', () => {
-  let service: LivechatAssistantService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(LivechatAssistantService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/src/lib/livechat-assistant.service.ts

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class LivechatAssistantService {
-
-  constructor() { }
-}

package/src/lib/services/index.ts

@@ -1 +0,0 @@
-export * from './request';

package/src/lib/services/request.ts

@@ -1,58 +0,0 @@
-import { Injectable, OnInit, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { chat } from '../environment/environment.test';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class RequestService {
-  url: string = chat.url;
-  private http: HttpClient = inject(HttpClient)
-  headers: any = {
-    "content-type": "application/json"
-  };
-
-  async get(routes: string, custom_url: boolean = false) {
-    const url = custom_url ? routes : this.url + routes;
-    return await new Promise(async (resolve, reject) => {
-      this.http.get(url, this.headers).subscribe((res: any) => {
-        resolve(res)
-      }, (err: any) => {
-        reject(err);
-      })
-    });
-  }
-
-  async post(routes: string, data: any, custom_url: boolean = false) {
-    const url = routes;
-    return await new Promise((resolve, reject) => {
-      this.http.post(url, data, {
-        headers: this.headers,
-        withCredentials: true 
-      }).subscribe(
-        (response) => resolve(response),
-        (error) => reject(error)
-      );
-    });
-  }
-
-  async update(routes: string, data: any, custom_url: boolean = false) {
-    const url = custom_url ? routes : this.url + routes;
-    return await new Promise((resolve, reject) => {
-      this.http.put(url, data).subscribe(
-        (response) => resolve(response),
-        (error) => reject(error)
-      );
-    });
-  }
-
-  async delete(routes: string, data: any = {}, custom_url: boolean = false) {
-    const url = custom_url ? routes : this.url + routes;
-    return await new Promise((resolve, reject) => {
-      this.http.delete(url, data).subscribe(
-        (response) => resolve(response),
-        (error) => reject(error)
-      );
-    });
-  }
-}

package/src/lib/utilities/helper.ts

@@ -1,23 +0,0 @@
-export let isOpen: boolean;
-export let confettiArray: Array<{left: number, delay: number, color: string}> = [];
-
-export const isChatOpen = ()=> {
-  return isOpen;
-}
-
-export const closeChat=()=> {
-  document.body.classList.remove("show-chatbot");
-  isOpen = false;
-}
-
-export const toggleLivechat = () => {
-  if (isOpen) {
-    document.body.classList.remove("show-chatbot");
-    isOpen = false;
-  } else {
-    document.body.classList.toggle("show-chatbot");
-    isOpen = true;
-  }
-  return isOpen;
-}
-

package/src/lib/utilities/index.ts

@@ -1 +0,0 @@
-export * from './helper'