@aslaluroba/help-center 1.0.0

package/src/app/services/help-center-config.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HelpCenterConfigService {
+  private _apiBaseUrl: string = 'https://babylai.net/api'
+
+  setApiBaseUrl(url: string) {
+    this._apiBaseUrl = url
+  }
+
+  getApiBaseUrl(): string {
+    return this._apiBaseUrl
+  }
+}

package/src/app/services/signalrService.service.ts

@@ -0,0 +1,104 @@
+import { Injectable } from '@angular/core';
+import * as signalR from '@microsoft/signalr';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SignalRService {
+  private connection: signalR.HubConnection | null = null;
+  private isConnected = false;
+  private baseURL = 'http://localhost:5086'; // Replace with your API URL
+  private hubUrl = 'https://babylai.net'; // Replace with your SignalR hub URL
+
+  async startConnection(
+    sessionId: string,
+    apiKey: string,
+    onMessageReceived: (
+      message: string,
+      senderType: string,
+      needsAgent: boolean
+    ) => void
+  ): Promise<void> {
+    console.log('sessionId:', sessionId);
+
+    if (this.isConnected) return;
+
+    this.connection = new signalR.HubConnectionBuilder()
+      .withUrl(
+        `${this.hubUrl}/clientHub?access_token=${encodeURIComponent(apiKey)}`,
+        {
+          withCredentials: true,
+          transport:
+            signalR.HttpTransportType.WebSockets |
+            signalR.HttpTransportType.LongPolling,
+          headers: {
+            Authorization: `Bearer ${apiKey}`,
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-SignalR-User-Agent':
+              'Microsoft SignalR/8.0 (8.0.7; Unknown OS; Browser; Unknown Runtime Version)',
+          },
+          skipNegotiation: false,
+          accessTokenFactory: () => apiKey,
+        }
+      )
+      .withAutomaticReconnect()
+      .configureLogging(signalR.LogLevel.Information)
+      .build();
+
+    this.connection.on(
+      'ReceiveMessage',
+      (message: string, senderType: string, needsAgent: boolean) => {
+        console.log(
+          'Received message from SignalR:',
+          message,
+          senderType,
+          needsAgent
+        );
+        onMessageReceived(message, senderType, needsAgent);
+      }
+    );
+
+    try {
+      await this.connection.start();
+      console.log('SignalR connection started successfully.');
+
+      this.isConnected = true;
+      await this.joinGroup(sessionId);
+      console.log('SignalR group joined.');
+    } catch (error) {
+      console.error('Error connecting to SignalR', error);
+      this.isConnected = false;
+    }
+  }
+
+  async joinGroup(sessionId: string): Promise<void> {
+    if (this.connection) {
+      try {
+        console.log(`Attempting to join group with session ID: ${sessionId}`);
+        await this.connection.invoke('JoinGroup', sessionId);
+        console.log(`Joined group with session ID: ${sessionId}`);
+      } catch (error) {
+        console.error('Error joining SignalR group:', error);
+      }
+    }
+  }
+
+  async leaveGroup(sessionId: string): Promise<void> {
+    if (this.connection && this.isConnected) {
+      try {
+        await this.connection.invoke('LeaveGroup', sessionId);
+        console.log(`Left group with session ID: ${sessionId}`);
+      } catch (error) {
+        console.error('Error leaving SignalR group:', error);
+      }
+    }
+  }
+
+  async stopConnection(): Promise<void> {
+    if (this.connection && this.isConnected) {
+      await this.connection.stop();
+      this.isConnected = false;
+      console.log('SignalR disconnected.');
+    }
+  }
+}

package/src/app/services/token.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core'
+
+export interface TokenResponse {
+  token: string
+  expiresIn: number
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TokenService {
+  private baseUrl: string | null = null
+
+  initializeService(baseUrl: string) {
+    this.baseUrl = baseUrl
+  }
+
+  async getToken(): Promise<TokenResponse> {
+    if (!this.baseUrl) {
+      throw new Error('Token service not initialized. Call initializeService first.')
+    }
+
+    try {
+      const response = await fetch(`${this.baseUrl}/Auth/client/get-babylai-token`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch token')
+      }
+
+      const data = await response.json()
+      return {
+        token: data.token,
+        expiresIn: data.expiresIn || 3600 // Default to 1 hour if not provided
+      }
+    } catch (error) {
+      throw new Error('Failed to get authentication token')
+    }
+  }
+}

package/src/app/shared/components/button/button.component.ts

@@ -0,0 +1,81 @@
+import { CommonModule } from '@angular/common'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { TranslocoModule } from '@jsverse/transloco'
+
+type ButtonVariant = 'default' | 'icon-bg' | 'icon-only'
+type ButtonType = 'button' | 'submit' | 'reset'
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [CommonModule, TranslocoModule],
+  template: `
+    <button [type]="type" [disabled]="disabled" [ngClass]="getButtonClasses()" (click)="onClick.emit($event)">
+      <ng-content></ng-content>
+    </button>
+  `
+})
+export class ButtonComponent {
+  @Input() variant: ButtonVariant = 'default'
+  @Input() type: ButtonType = 'button'
+  @Input() disabled = false
+  @Input() fullWidth = false
+  @Input() className = ''
+  @Output() onClick = new EventEmitter<MouseEvent>()
+
+  getButtonClasses(): string {
+    const baseClasses = 'babylai-cursor-pointer babylai-transition-all babylai-duration-200 '
+
+    const variantClasses = {
+      default: 'babylai-bg-primary babylai-text-white babylai-py-2 babylai-px-4 babylai-rounded-full hover:babylai-bg-primary-700',
+      'icon-bg':
+        'babylai-bg-primary babylai-text-white babylai-py-2 babylai-px-4 babylai-rounded-full babylai-w-12 babylai-h-12 babylai-flex babylai-items-center babylai-justify-center hover:babylai-bg-primary-700',
+      'icon-only': 'babylai-bg-transparent babylai-border-none babylai-p-1 babylai-flex babylai-items-center babylai-justify-center'
+    }
+
+    const widthClass = this.fullWidth ? 'babylai-w-full' : ''
+    const disabledClass = this.disabled ? 'babylai-opacity-50 babylai-cursor-not-allowed' : ''
+
+    return `${baseClasses} ${variantClasses[this.variant]} ${widthClass} ${disabledClass} ${this.className}`
+  }
+}
+
+@Component({
+  selector: 'app-button-content',
+  standalone: true,
+  imports: [CommonModule],
+  template: ` <ng-content></ng-content> `
+})
+export class ButtonContentComponent {}
+
+@Component({
+  selector: 'app-icon-button',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  template: `
+    <app-button [variant]="'icon-bg'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
+      <ng-content></ng-content>
+    </app-button>
+  `
+})
+export class IconButtonComponent {
+  @Input() className = ''
+  @Input() disabled = false
+  @Output() onClick = new EventEmitter<MouseEvent>()
+}
+
+@Component({
+  selector: 'app-transparent-icon-button',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  template: `
+    <app-button [variant]="'icon-only'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
+      <ng-content></ng-content>
+    </app-button>
+  `
+})
+export class TransparentIconButtonComponent {
+  @Input() className = ''
+  @Input() disabled = false
+  @Output() onClick = new EventEmitter<MouseEvent>()
+}

package/src/app/shared/components/button/index.ts

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

package/src/app/shared/components/card/card.component.ts

@@ -0,0 +1,106 @@
+import { Component, Input, HostBinding, ViewEncapsulation, inject } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { cn } from '../../utils/class-utils'
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<ng-content></ng-content>`,
+  encapsulation: ViewEncapsulation.None
+})
+export class CardComponent {
+  @Input() variant: 'default' | 'rounded' | 'shadowed' = 'default'
+  @Input() class = ''
+
+  @HostBinding('class')
+  get hostClasses(): string {
+    const variantStyles = {
+      default: 'babylai-rounded-xl babylai-border babylai-bg-card babylai-text-card-foreground babylai-shadow',
+      rounded: 'babylai-rounded-3xl babylai-bg-black-white-50 babylai-py-4 babylai-px-[24px] babylai-w-full babylai-block',
+      shadowed: 'babylai-rounded-xl babylai-border babylai-bg-card babylai-text-card-foreground babylai-shadow-lg'
+    }
+
+    return cn(variantStyles[this.variant], this.class)
+  }
+}
+
+@Component({
+  selector: 'app-card-header',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<ng-content></ng-content>`,
+  encapsulation: ViewEncapsulation.None
+})
+export class CardHeaderComponent {
+  @Input() class = ''
+
+  @HostBinding('class')
+  get hostClasses(): string {
+    return cn('babylai-flex babylai-flex-col babylai-space-y-1.5 babylai-p-6', this.class)
+  }
+}
+
+@Component({
+  selector: 'app-card-title',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<ng-content></ng-content>`,
+  encapsulation: ViewEncapsulation.None
+})
+export class CardTitleComponent {
+  @Input() class = ''
+
+  @HostBinding('class')
+  get hostClasses(): string {
+    return cn('babylai-font-semibold babylai-leading-none babylai-tracking-tight', this.class)
+  }
+}
+
+@Component({
+  selector: 'app-card-description',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<ng-content></ng-content>`,
+  encapsulation: ViewEncapsulation.None
+})
+export class CardDescriptionComponent {
+  @Input() class = ''
+
+  @HostBinding('class')
+  get hostClasses(): string {
+    return cn('babylai-text-sm babylai-text-muted-foreground', this.class)
+  }
+}
+
+@Component({
+  selector: 'app-card-content',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<ng-content></ng-content>`,
+  encapsulation: ViewEncapsulation.None
+})
+export class CardContentComponent {
+  @Input() class = ''
+
+  @HostBinding('class')
+  get hostClasses(): string {
+    return cn('babylai-p-0 babylai-pt-0', this.class)
+  }
+}
+
+@Component({
+  selector: 'app-card-footer',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<ng-content></ng-content>`,
+  encapsulation: ViewEncapsulation.None
+})
+export class CardFooterComponent {
+  @Input() class = ''
+
+  @HostBinding('class')
+  get hostClasses(): string {
+    return cn('babylai-flex babylai-items-center babylai-p-6 babylai-pt-0', this.class)
+  }
+}

package/src/app/shared/components/card/index.ts

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

package/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../button'
+import { TranslocoModule } from '@jsverse/transloco'
+
+@Component({
+  selector: 'app-confirmation-dialog',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, TranslocoModule],
+  template: `
+    <div
+      class="babylai-absolute babylai-inset-0 babylai-bg-black/50 babylai-z-[10] babylai-flex babylai-items-center babylai-justify-center babylai-rounded-3xl"
+    >
+      <div class="babylai-bg-white babylai-rounded-2xl babylai-p-6 babylai-max-w-sm babylai-w-full babylai-mx-4">
+        <h3 class="babylai-text-xl babylai-font-bold babylai-mb-2">{{ title }}</h3>
+        <p class="babylai-text-gray-600 babylai-mb-6">{{ body }}</p>
+        <div class="babylai-flex babylai-gap-3 babylai-justify-end">
+          <app-button
+            variant="default"
+            className="!babylai-bg-transparent !babylai-text-primary !babylai-border !babylai-border-primary hover:!babylai-bg-primary/10"
+            (click)="onCancel.emit()"
+          >
+            {{ cancelText }}
+          </app-button>
+          <app-button variant="default" (click)="onConfirm.emit()">
+            {{ confirmText }}
+          </app-button>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class ConfirmationDialogComponent {
+  @Input() title: string = ''
+  @Input() body: string = ''
+  @Input() confirmText: string = 'Confirm'
+  @Input() cancelText: string = 'Cancel'
+  @Output() onConfirm = new EventEmitter<void>()
+  @Output() onCancel = new EventEmitter<void>()
+}

package/src/app/shared/components/header/header.component.ts

@@ -0,0 +1,119 @@
+import { CommonModule } from '@angular/common'
+import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core'
+import { TranslocoModule } from '@jsverse/transloco'
+import { ButtonComponent } from '../button'
+
+type HeaderType = 'standard' | 'minimal'
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [CommonModule, TranslocoModule, ButtonComponent],
+  template: `
+    <div class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between">
+      <app-button *ngIf="showBackButton" variant="icon-bg" className="!babylai-bg-black-white-50" (click)="onBack.emit()">
+        <img
+          src="/icons/arrow-stripped-colored.svg"
+          alt="Back"
+          class="babylai-w-6 babylai-h-6"
+          [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
+        />
+      </app-button>
+      <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
+      <app-button *ngIf="!showBackButton" variant="icon-only" (click)="onClose.emit()">
+        <img src="/icons/close-circle.svg" alt="Close" class="babylai-w-10 babylai-h-10" />
+      </app-button>
+    </div>
+  `
+})
+export class HeaderComponent {
+  @Input() headerType: HeaderType = 'standard'
+  @Input() showBackButton = false
+  @Input() showLogo = true
+  @Input() logoSrc = '/logo-white.svg'
+  @Input() logoAlt = 'BabylAI Logo'
+  @Input() language = 'en'
+  @Output() onBack = new EventEmitter<void>()
+  @Output() onClose = new EventEmitter<void>()
+}
+
+@Component({
+  selector: 'app-chat-header',
+  standalone: true,
+  imports: [CommonModule, TranslocoModule, ButtonComponent],
+  template: `
+    <div
+      class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between babylai-bg-black-white-50 babylai-rounded-t-3xl babylai-relative"
+    >
+      <div class="babylai-flex babylai-items-center babylai-gap-2">
+        <app-button
+          variant="icon-bg"
+          className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
+          (click)="onBack.emit()"
+        >
+          <img
+            src="/icons/arrow-stripped-colored.svg"
+            alt="Back"
+            class="babylai-w-full babylai-h-full"
+            [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
+          />
+        </app-button>
+        <div class="babylai-relative" data-menu-container>
+          <app-button
+            variant="icon-bg"
+            className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
+            (click)="$event.stopPropagation(); isMenuOpen = !isMenuOpen"
+          >
+            <img
+              src="/icons/menu.svg"
+              alt="Menu"
+              class="babylai-w-full babylai-h-full"
+              [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
+            />
+          </app-button>
+          <div
+            *ngIf="isMenuOpen"
+            class="babylai-absolute babylai-mt-2 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-50"
+            [ngClass]="{ 'babylai-right-0': language === 'ar', 'babylai-left-0': language === 'en' }"
+          >
+            <div class="babylai-py-1">
+              <button
+                (click)="onClose.emit(); isMenuOpen = false"
+                class="babylai-block babylai-w-full babylai-text-left babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 hover:babylai-bg-gray-100"
+                [ngClass]="{ 'babylai-text-left': language === 'en', 'babylai-text-right': language === 'ar' }"
+              >
+                {{ 'EndChat' | transloco }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="babylai-flex babylai-items-center babylai-gap-1 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2"
+      >
+        <img src="/logo-primary.svg" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
+        <p class="babylai-text-base babylai-font-bold babylai-text-black-white-600">{{ 'BabylAI' | transloco }}</p>
+      </div>
+    </div>
+  `
+})
+export class ChatHeaderComponent {
+  isMenuOpen = false
+  @Input() showBackButton = false
+  @Input() showLogo = true
+  @Input() logoSrc = '/logo-white.svg'
+  @Input() logoAlt = 'BabylAI Logo'
+  @Input() language = 'en'
+  @Output() onBack = new EventEmitter<void>()
+  @Output() onClose = new EventEmitter<void>()
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    const target = event.target as HTMLElement
+    // Check if the click target is either the menu button or inside the menu
+    const menuContainer = target.closest('[data-menu-container]')
+    if (!menuContainer && this.isMenuOpen) {
+      this.isMenuOpen = false
+    }
+  }
+}

package/src/app/shared/components/header/index.ts

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

package/src/app/shared/components/loading/loading.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-loading',
+  template: `
+    <div
+      class="babylai-flex babylai-flex-col babylai-items-center babylai-justify-center babylai-w-full babylai-h-full babylai-py-16 md:babylai-py-28"
+    >
+      <img src="/images/animatedLogo.gif" alt="Animated Logo" class="babylai-w-20 babylai-h-20" />
+    </div>
+  `,
+  standalone: true
+})
+export class LoadingComponent {}

package/src/app/shared/utils/class-utils.ts

@@ -0,0 +1,9 @@
+/**
+ * Utility function to conditionally join CSS class names
+ */
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/app/transloco-loader.ts

@@ -0,0 +1,12 @@
+import { inject, Injectable } from '@angular/core'
+import { Translation, TranslocoLoader } from '@jsverse/transloco'
+import { HttpClient } from '@angular/common/http'
+
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
+  private http = inject(HttpClient)
+
+  getTranslation(lang: string) {
+    return this.http.get<Translation>(`/i18n/${lang}.json`)
+  }
+}

package/src/assets/i18n/ar.json

@@ -0,0 +1,17 @@
+{
+  "ChatIntroMessage": "دردش مع BabylAI 🚀",
+  "BabylaiTitle": "BabylAI",
+  "BabylaiDescription": "مرحبا! 👋 أنا BabylAI، هنا لتساعدك.",
+  "ChatNow": "دردش الآن",
+  "TryBableAI": "جرب BabylAI مجانا 🎉",
+  "ContactUs": "تواصل معنا, دعنا نتحدث! 💬",
+  "PickTopicTitle": "اختر موضوع للبدء",
+  "BabylAI": "BabylAI",
+  "ChatPlaceholder": "اكتب رسالتك...",
+  "PoweredByBabylAI": "مدعوم من BabylAI",
+  "EndChat": "إنهاء الدردشة",
+  "LeavingDialogTitle": "هل تغادر بالفعل؟ 👋",
+  "LeavingDialogBody": "لا تقلق، يمكنك العودة في أي وقت. نحن دائماً هنا إذا كنت بحاجة إلى مساعدة أو لديك أسئلة.",
+  "Confirm": "تأكيد",
+  "Cancel": "إلغاء"
+}

package/src/assets/i18n/en.json

@@ -0,0 +1,17 @@
+{
+  "ChatIntroMessage": "Chat with BabylAI 🚀",
+  "BabylaiTitle": "BabylAI",
+  "BabylaiDescription": "Hey there! 👋 I'm BabylAI, here to assist you.",
+  "ChatNow": "Chat Now",
+  "TryBableAI": "Try BabylAI for Free 🎉",
+  "ContactUs": "Contact us, Let's Talk! 💬",
+  "PickTopicTitle": "Pick a Topic to Get Started",
+  "BabylAI": "BabylAI",
+  "ChatPlaceholder": "Type your message...",
+  "PoweredByBabylAI": "Powered by BabylAI",
+  "EndChat": "End Chat",
+  "LeavingDialogTitle": "Leaving so soon? 👋",
+  "LeavingDialogBody": "Don't worry, you can come back anytime. We're always here if you need help or have questions.",
+  "Confirm": "Confirm",
+  "Cancel": "Cancel"
+}

package/src/assets/icons/arrow-stripped-colored.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 15L1 8L2.5 6.25M7 1L5 3.333" stroke="#7A1CAC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/arrow-stripped.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/chat.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 3.83801C15.9806 2.95874 14.2555 2.49712 12.5 2.50001C6.977 2.50001 2.5 6.97701 2.5 12.5C2.5 14.1 2.876 15.612 3.543 16.953C3.721 17.309 3.78 17.716 3.677 18.101L3.082 20.327C3.02307 20.5473 3.02312 20.7792 3.08216 20.9995C3.14119 21.2198 3.25712 21.4206 3.41831 21.5819C3.57951 21.7432 3.7803 21.8593 4.00053 21.9184C4.22075 21.9776 4.45267 21.9778 4.673 21.919L6.899 21.323C7.28538 21.2254 7.69414 21.2727 8.048 21.456C9.43095 22.1446 10.9551 22.502 12.5 22.5C18.023 22.5 22.5 18.023 22.5 12.5C22.5 10.679 22.013 8.97001 21.162 7.50001" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path d="M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5" stroke="white" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/close-circle.svg

@@ -0,0 +1,3 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.8568 21.1458L21.1484 33.8541M21.1484 21.1458L33.8568 33.8541M14.7943 5.48404C18.6562 3.24921 23.0407 2.07593 27.5026 2.08329C41.5402 2.08329 52.9193 13.4623 52.9193 27.5C52.9193 41.5376 41.5402 52.9166 27.5026 52.9166C13.465 52.9166 2.08594 41.5376 2.08594 27.5C2.08594 22.8716 3.32373 18.5279 5.48669 14.7916" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>

package/src/assets/icons/menu.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="4" viewBox="0 0 14 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.25 1.8269C3.25 2.22473 3.09196 2.60626 2.81066 2.88756C2.52936 3.16887 2.14782 3.3269 1.75 3.3269C1.35218 3.3269 0.970644 3.16887 0.68934 2.88756C0.408035 2.60626 0.25 2.22473 0.25 1.8269C0.25 1.42908 0.408035 1.04755 0.68934 0.766244C0.970644 0.48494 1.35218 0.326904 1.75 0.326904C2.14782 0.326904 2.52936 0.48494 2.81066 0.766244C3.09196 1.04755 3.25 1.42908 3.25 1.8269ZM8.5 1.8269C8.5 2.22473 8.34196 2.60626 8.06066 2.88756C7.77936 3.16887 7.39782 3.3269 7 3.3269C6.60218 3.3269 6.22064 3.16887 5.93934 2.88756C5.65804 2.60626 5.5 2.22473 5.5 1.8269C5.5 1.42908 5.65804 1.04755 5.93934 0.766244C6.22064 0.48494 6.60218 0.326904 7 0.326904C7.39782 0.326904 7.77936 0.48494 8.06066 0.766244C8.34196 1.04755 8.5 1.42908 8.5 1.8269ZM13.75 1.8269C13.75 2.22473 13.592 2.60626 13.3107 2.88756C13.0294 3.16887 12.6478 3.3269 12.25 3.3269C11.8522 3.3269 11.4706 3.16887 11.1893 2.88756C10.908 2.60626 10.75 2.22473 10.75 1.8269C10.75 1.42908 10.908 1.04755 11.1893 0.766244C11.4706 0.48494 11.8522 0.326904 12.25 0.326904C12.6478 0.326904 13.0294 0.48494 13.3107 0.766244C13.592 1.04755 13.75 1.42908 13.75 1.8269Z" fill="#AD49E1"/>
+</svg>

package/src/assets/icons/person.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.99479 5.66658C7.46755 5.66658 8.66146 4.47268 8.66146 2.99992C8.66146 1.52716 7.46755 0.333252 5.99479 0.333252C4.52203 0.333252 3.32812 1.52716 3.32812 2.99992C3.32812 4.47268 4.52203 5.66658 5.99479 5.66658Z" fill="#AD49E1"/>
+<path d="M11.3307 10.6665C11.3307 12.3232 11.3307 13.6665 5.9974 13.6665C0.664062 13.6665 0.664062 12.3232 0.664062 10.6665C0.664062 9.00984 3.05206 7.6665 5.9974 7.6665C8.94273 7.6665 11.3307 9.00984 11.3307 10.6665Z" fill="#AD49E1"/>
+</svg>

package/src/assets/icons/send.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2346 2.68609C18.6666 1.49109 17.5086 0.33309 16.3136 0.76609L1.70855 6.04809C0.509554 6.48209 0.364554 8.11809 1.46755 8.75709L6.12955 11.4561L10.2926 7.29309C10.4812 7.11093 10.7338 7.01014 10.996 7.01242C11.2582 7.01469 11.509 7.11986 11.6944 7.30527C11.8798 7.49068 11.9849 7.74149 11.9872 8.00369C11.9895 8.26589 11.8887 8.51849 11.7066 8.70709L7.54355 12.8701L10.2436 17.5321C10.8816 18.6351 12.5176 18.4891 12.9516 17.2911L18.2346 2.68609Z" fill="white"/>
+</svg>

package/src/assets/images/seperator.svg

@@ -0,0 +1,5 @@
+<svg width="327" height="14" viewBox="0 0 327 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="132.5" y1="7.5" y2="7.5" stroke="#AD49E1"/>
+<path d="M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z" fill="#AD49E1"/>
+<line x1="327" y1="7.5" x2="194.5" y2="7.5" stroke="#AD49E1"/>
+</svg>