livechat-assistant 0.0.8 → 0.0.9

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/livechat-assistant",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "preline"
+  ]
+}

package/package.json

@@ -1,23 +1,19 @@
-{
-  "name": "livechat-assistant",
-  "version": "0.0.8",
-  "peerDependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/core": "^19.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/livechat-assistant.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/livechat-assistant.mjs"
-    }
-  }
-}
+{
+  "name": "livechat-assistant",
+  "version": "0.0.9",
+  "description": "Angular AI live chat widget component",
+  "author": "sleekpenny",
+  "license": "MIT",
+  "main": "index.js",
+  "module": "fesm2022/ai-livechat-assistants.mjs",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "preline": "^4.0.1",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

@@ -0,0 +1,83 @@
+<div class="max-h-[600px] rounded-xl w-full flex flex-col justify-center items-center">
+  <div
+  class="flex items-center justify-between px-4 py-5 dark:bg-neutral-700/20 shadow-xl bg-neutral-50 hover:bg-neutral-800/50 rounded-xl w-full">
+          <h3 class="font-semibold text-neutral-800 dark:text-neutral-200 fs-16">Messages</h3> 
+  </div>
+
+    <!-- <div class="flex gap-2">      
+      <button (click)="navigateToTab(2)" class="mt-4 mb-2 bg-red-600 text-white rounded-md hover:bg-blue-700 transition w-fit">
+        <p class="text-center px-4 py-1.5 text-sm m-0">Ask AI question</p> 
+      </button>
+      <button (click)="navigateToTab(2)" class="mt-4 mb-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition w-fit">
+        <p class="text-center px-4 py-1.5 text-sm m-0">Chat with Live Agent</p> 
+      </button>
+    </div> -->
+
+  <div class="flex-1 overflow-y-auto hideScroll">
+    @for (conversation of conversations; track $index) {
+
+      <div  (click)="selectConversation(conversation.id, 2)"
+        class="flex items-center gap-3 px-4 py-3 hover:bg-neutral-800 cursor-pointer transition-colors">
+    
+        <!-- Avatar -->
+        <div class="relative flex-shrink-0">
+          @if (conversation.avatar) {
+            <div [class]="'w-12 h-12 flex items-center font-semibold justify-center rounded-full overflow-hidden' + conversation.color">
+              <h1 class="text-white text-xl">AI</h1>
+            </div>
+          }
+
+          @if (!conversation.avatar && conversation.initials) {
+            <div [class]="'w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold text-xl' + (conversation.color || 'bg-gray-500')">
+              {{ conversation.initials }}
+            </div>
+          }
+
+          @if (conversation.online) {
+            <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></span>
+          }
+        </div>
+    
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center justify-between mb-1">
+            <h3 class="font-semibold text-neutral-800 dark:text-white fs-16 truncate">{{ conversation.name }}</h3>
+            <span class="text-neutral-800 dark:text-neutral-400 text-xs">Date </span>
+           </div>
+          <div class="flex items-center justify-between">
+            <p class="text-sm text-neutral-400 truncate flex items-center gap-1">
+              @if (conversation.hasAttachment) {
+                <span class="text-neutral-400">📎</span>
+              }
+              {{ conversation.lastMessage }}
+            </p>
+            <div class="flex items-center gap-2 flex-shrink-0 ml-2">
+
+              @if (conversation.status === 'read') {
+                <svg class="w-4 h-4 text-green-400" fill="currentColor"
+                  viewBox="0 0 24 24">
+                  <path
+                    d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z" />
+                </svg>
+              }
+
+              @if (conversation.status === 'delivered') {
+                <svg class="w-4 h-4 text-blue-600" fill="currentColor"
+                  viewBox="0 0 24 24">
+                  <path
+                    d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z" />
+                </svg>
+              }
+
+              @if (conversation.unreadCount) {
+                <span
+                  class="bg-blue-600 text-white text-xs font-semibold rounded-full w-5 h-5 flex items-center justify-center">
+                  {{ conversation.unreadCount }}
+                </span>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+</div>

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

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

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

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

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

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

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

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

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

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