@aslaluroba/help-center 1.0.0

package/src/app/chat/chat.component.html

@@ -0,0 +1,102 @@
+<div class="babylai-flex babylai-flex-col babylai-h-full babylai-overflow-hidden">
+  <div class="babylai-flex-1 babylai-overflow-y-auto babylai-pb-4 babylai-flex babylai-flex-col babylai-gap-2" #chatMessagesContainer>
+    <div *ngFor="let message of messages; let i = index" class="babylai-flex babylai-flex-col babylai-gap-2">
+      <div class="babylai-w-full" *ngIf="i === firstAgentMessageIndex && message.senderType === 2">
+        <img src="/images/seperator.svg" class="babylai-w-full" />
+      </div>
+      <div class="babylai-flex babylai-items-start babylai-gap-2" [class.babylai-flex-row-reverse]="message.senderType === 1">
+        <div
+          class="babylai-messageIcon babylai-mt-2"
+          [class.babylai-invisible]="i > 0 && messages[i - 1].senderType === message.senderType"
+        >
+          @if (message.senderType === 3) {
+            <span
+              class="babylai-flex babylai-items-center babylai-justify-center babylai-w-10 babylai-h-10 babylai-rounded-full babylai-bg-primary babylai-p-[10px]"
+            >
+              <img src="/logo-white.svg" alt="robot" class="babylai-w-full" />
+            </span>
+          } @else if (needsAgent || message.senderType === 2) {
+            <span
+              class="babylai-flex babylai-items-center babylai-justify-center babylai-w-10 babylai-h-10 babylai-rounded-full babylai-bg-black-white-50 babylai-p-[10px]"
+            >
+              <img src="/icons/person.svg" alt="robot" class="babylai-w-full" />
+            </span>
+          }
+        </div>
+        <app-card
+          variant="rounded"
+          [class]="
+            'babylai-max-w-[80%] babylai-relative ' +
+            (message.senderType === 1
+              ? 'babylai-self-start babylai-bg-primary babylai-text-white babylai-rtl'
+              : 'babylai-self-end babylai-bg-black-white-100 babylai-text-black babylai-rtl')
+          "
+        >
+          <app-card-content>
+            <div class="babylai-messageContent babylai-whitespace-pre-wrap">
+              <markdown
+                [data]="cleanMessageContent(message.messageContent)"
+                ngPreserveWhitespaces
+                [inline]="false"
+                class="babylai-prose babylai-max-w-none babylai-break-words [&>*:first-child]:babylai-mt-0 [&>*:last-child]:babylai-mb-0 [&>p]:babylai-my-2 [&>ul]:babylai-my-2 [&>ol]:babylai-my-2 [&>blockquote]:babylai-my-2"
+                [class.babylai-prose-invert]="message.senderType === 1"
+              >
+              </markdown>
+            </div>
+          </app-card-content>
+        </app-card>
+      </div>
+    </div>
+
+    <div *ngIf="assistantStatus === 'typing' && firstAgentMessageIndex === -1" class="babylai-flex babylai-items-start babylai-gap-2">
+      <div class="babylai-messageIcon babylai-mt-2">
+        <span
+          class="babylai-flex babylai-items-center babylai-justify-center babylai-w-10 babylai-h-10 babylai-rounded-full babylai-bg-black-white-50 babylai-p-[10px]"
+        >
+          <img src="/images/animatedLogo.gif" alt="Loading" class="babylai-w-full" />
+        </span>
+      </div>
+      <app-card
+        variant="rounded"
+        class="babylai-max-w-[80%] babylai-relative babylai-self-end babylai-bg-black-white-100 babylai-text-black"
+      >
+        <app-card-content>
+          <div id="wave">
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+        </app-card-content>
+      </app-card>
+    </div>
+    <div *ngIf="loading" class="babylai-flex babylai-items-center babylai-justify-center babylai-h-full">
+      <app-loading />
+    </div>
+  </div>
+
+  <form (ngSubmit)="sendMessage()" class="babylai-relative">
+    <div class="babylai-relative babylai-w-full">
+      <input
+        type="text"
+        [(ngModel)]="messageText"
+        name="messageText"
+        [placeholder]="'ChatPlaceholder' | transloco"
+        [disabled]="isChatClosed"
+        class="babylai-flex-1 babylai-min-h-16 babylai-w-full babylai-ps-3 babylai-pe-12 babylai-rounded-full focus:babylai-outline-none babylai-px-0 babylai-py-2 disabled:babylai-bg-black-white-200"
+      />
+      <app-button
+        type="submit"
+        [disabled]="!messageText.trim() || !isSignalRConnected || isChatClosed"
+        variant="icon-bg"
+        className="babylai-absolute babylai-end-1 babylai-top-1/2 babylai-transform -babylai-translate-y-1/2 babylai-w-10 babylai-h-10 babylai-opacity-100 babylai-py-0 babylai-px-0 !babylai-p-3 babylai-inline-flex babylai-items-center babylai-justify-center disabled:babylai-opacity-50 disabled:babylai-cursor-not-allowed"
+      >
+        <img
+          src="/icons/send.svg"
+          alt="send-message"
+          class="babylai-w-full"
+          [ngClass]="currentLang === 'ar' ? 'babylai-rotate-[270deg]' : ''"
+        />
+      </app-button>
+    </div>
+  </form>
+</div>

package/src/app/chat/chat.component.ts

@@ -0,0 +1,88 @@
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, OnInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { MarkdownComponent, MarkdownModule } from 'ngx-markdown'
+import { TranslocoModule } from '@jsverse/transloco'
+import { ButtonComponent } from '../shared/components/button'
+import { CardComponent, CardContentComponent } from '../shared/components/card'
+import { LoadingComponent } from '../shared/components/loading/loading.component'
+import 'prismjs'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-markdown'
+import 'prismjs/themes/prism-okaidia.css'
+
+interface Message {
+  id: string | number
+  sender: 'user' | 'assistant' | 'agent'
+  senderType: number
+  messageContent: string
+  sentAt: Date
+  isSeen: boolean
+}
+
+@Component({
+  selector: 'app-chat',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MarkdownComponent,
+    TranslocoModule,
+    ButtonComponent,
+    CardComponent,
+    CardContentComponent,
+    LoadingComponent
+  ],
+  templateUrl: './chat.component.html'
+})
+export class ChatComponent implements OnInit {
+  @Input() messages: Message[] = []
+  @Input() needsAgent: boolean = false
+  @Input() assistantStatus: string = 'idle'
+  @Input() isSignalRConnected: boolean = false
+  @Input() isChatClosed: boolean = false
+  @Output() sendMessageEvent = new EventEmitter<string>()
+  @ViewChild('chatMessagesContainer') chatMessagesContainer!: ElementRef
+  @Input() currentLang: string = 'en'
+  @Input() loading: boolean = false
+
+  messageText: string = ''
+
+  get firstAgentMessageIndex(): number {
+    return this.messages.findIndex((message) => message.senderType === 2)
+  }
+
+  cleanMessageContent(content: string): string {
+    // Remove excessive newlines (more than 2 consecutive newlines)
+    return content.replace(/\n{3,}/g, '\n\n').trim()
+  }
+
+  ngOnInit(): void {
+    // Initialize component
+  }
+
+  ngAfterViewChecked(): void {
+    this.scrollToBottom()
+  }
+
+  scrollToBottom(): void {
+    try {
+      this.chatMessagesContainer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollHeight
+    } catch (err) {
+      console.error('Error scrolling to bottom:', err)
+    }
+  }
+
+  sendMessage(): void {
+    if (!this.messageText.trim() || !this.isSignalRConnected || this.isChatClosed) return
+    this.sendMessageEvent.emit(this.messageText)
+    this.messageText = ''
+  }
+
+  hasAgentMessageBeenSent(messages: any[]): boolean {
+    return messages.some((message) => message.senderType === 2 || message.senderType === 3)
+  }
+}

package/src/app/help-center-widget/help-center-widget.component.html

@@ -0,0 +1,224 @@
+<div class="babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[9999]" [dir]="getDirection()">
+  <!-- Arrow Animation -->
+  <div
+    *ngIf="showArrowAnimation && !isPopupOpen"
+    class="babylai-fixed babylai-bottom-20 babylai-right-4 babylai-z-[1300] babylai-flex babylai-flex-col babylai-items-end babylai-animate-float"
+  >
+    <div
+      class="babylai-bg-primary babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative"
+    >
+      <p class="babylai-text-xs babylai-font-bold babylai-m-0">
+        {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}
+      </p>
+      <button
+        class="babylai-absolute babylai-top-[-8px] babylai-right-[-8px] babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black babylai-p-[3px] hover:babylai-bg-primary-700 hover:babylai-text-white"
+        (click)="handleCloseArrowAnimation()"
+      >
+        <svg width="12" height="12" viewBox="0 0 12 12">
+          <path d="M1 1L11 11M1 11L11 1" stroke="currentColor" strokeWidth="2" />
+        </svg>
+      </button>
+      <div
+        class="babylai-absolute babylai-bottom-[-10px] babylai-right-5 babylai-w-0 babylai-h-0 babylai-border-l-[10px] babylai-border-r-[10px] babylai-border-t-[10px] babylai-border-l-transparent babylai-border-r-transparent babylai-border-t-primary"
+      ></div>
+    </div>
+  </div>
+
+  <!-- Help Button -->
+  <button
+    class="babylai-w-14 babylai-h-14 babylai-rounded-full babylai-bg-primary babylai-text-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-shadow-md babylai-transition-transform babylai-duration-200 babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[1000] hover:babylai-bg-primary-700 hover:babylai-scale-105 active:babylai-scale-95"
+    (click)="handleTogglePopup()"
+  >
+    <span class="babylai-flex babylai-items-center babylai-justify-center">
+      <img src="/logo-white.svg" alt="BabylAI Logo" class="babylai-w-6 babylai-h-6" />
+    </span>
+  </button>
+
+  <!-- Help Popup -->
+  <div
+    *ngIf="isPopupOpen"
+    [ngClass]="{
+      'babylai-fixed babylai-bottom-20 babylai-right-5 babylai-w-[360px]  babylai-h-[684px] babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col babylai-z-[1000] babylai-bg-black-white-100': true,
+      'babylai-w-[360px]': isPopupOpen,
+      'babylai-w-[60px]': !isPopupOpen,
+      'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': isPopupOpen && !showHelpScreenData && !showChat
+    }"
+  >
+    <app-confirmation-dialog
+      *ngIf="showEndChatConfirmation"
+      [title]="'LeavingDialogTitle' | transloco"
+      [body]="'LeavingDialogBody' | transloco"
+      [confirmText]="'Confirm' | transloco"
+      [cancelText]="'Cancel' | transloco"
+      (onConfirm)="confirmEndChat()"
+      (onCancel)="cancelEndChat()"
+    ></app-confirmation-dialog>
+    <!-- Loading State -->
+    <div *ngIf="status === 'loading'">
+      <!-- Using existing header -->
+      <ng-container *ngIf="!showHelpScreenData">
+        <app-header
+          [showBackButton]="!!selectedOption || !!selectedNestedOption"
+          [showLogo]="true"
+          (onBack)="handleBack()"
+          (onClose)="handleClosePopup()"
+        >
+        </app-header>
+      </ng-container>
+      <ng-container *ngIf="showHelpScreenData">
+        <app-header [showLogo]="false" (onClose)="handleHideHelpScreenData()"> </app-header>
+      </ng-container>
+
+      <!-- Animated Logo -->
+      <app-loading></app-loading>
+    </div>
+
+    <!-- Error State -->
+    <div
+      *ngIf="status === 'failed'"
+      class="babylai-fixed babylai-bottom-[90px] babylai-right-5 babylai-p-4 babylai-bg-white babylai-rounded-xl babylai-shadow-lg"
+    >
+      <span>Error: {{ error }}</span>
+    </div>
+
+    <!-- Content -->
+    <ng-container *ngIf="status === 'succeeded'">
+      <!-- Header -->
+      <ng-container *ngIf="!showHelpScreenData && !showChat">
+        <app-header
+          [showBackButton]="!!selectedOption || !!selectedNestedOption"
+          [showLogo]="true"
+          (onBack)="handleBack()"
+          (onClose)="handleClosePopup()"
+        >
+        </app-header>
+      </ng-container>
+      <ng-container *ngIf="showHelpScreenData && !showChat">
+        <app-header
+          [showBackButton]="showHelpScreenData"
+          [showLogo]="false"
+          (onClose)="handleHideHelpScreenData()"
+          (onBack)="handleBack()"
+          [language]="currentLang"
+        >
+        </app-header>
+
+        <ng-container *ngIf="showHelpScreenData && sessionId">
+          <app-button
+            variant="icon-bg"
+            (click)="handleShowChat()"
+            className="babylai-absolute babylai-bottom-5 babylai-right-5 !babylai-p-3"
+          >
+            <img src="/icons/chat.svg" alt="Close" class="babylai-w-full" />
+          </app-button>
+        </ng-container>
+      </ng-container>
+      <ng-container *ngIf="showChat">
+        <app-chat-header
+          [showBackButton]="showChat"
+          [showLogo]="false"
+          (onClose)="handleEndChat()"
+          (onBack)="handleBack()"
+          [language]="currentLang"
+        >
+        </app-chat-header>
+
+        <app-chat
+          class="babylai-h-full babylai-mt-2 babylai-p-2 babylai-max-h-[85%]"
+          [messages]="messages"
+          [needsAgent]="needsAgent"
+          [assistantStatus]="assistantStatus"
+          [isSignalRConnected]="isSignalRConnected"
+          [isChatClosed]="isChatClosed"
+          (sendMessageEvent)="sendMessage($event)"
+          [currentLang]="currentLang"
+          [loading]="chatIsLoading"
+        >
+        </app-chat>
+      </ng-container>
+
+      <!-- Content -->
+      <div class="babylai-flex-1 babylai-flex babylai-flex-col babylai-gap-4 babylai-overflow-y-auto babylai-p-4" *ngIf="!showChat">
+        <ng-container *ngIf="!showHelpScreenData">
+          <div class="babylai-flex babylai-flex-col babylai-gap-4">
+            <h1 class="babylai-text-6xl babylai-font-bold babylai-text-black-white-50">{{ 'ChatIntroMessage' | transloco }}</h1>
+          </div>
+
+          <div class="babylai-flex babylai-flex-col babylai-gap-4 babylai-mt-8">
+            <app-card variant="rounded">
+              <app-card-content>
+                <div class="babylai-flex babylai-flex-col babylai-gap-4">
+                  <div class="babylai-flex babylai-items-center babylai-justify-start babylai-gap-3">
+                    <div
+                      class="babylai-flex babylai-items-center babylai-justify-center babylai-max-w-12 babylai-min-w-12 babylai-w-12 babylai-h-12 babylai-rounded-full babylai-bg-primary"
+                    >
+                      <img src="/logo-white.svg" alt="Chat" class="babylai-w-5 babylai-h-5" />
+                    </div>
+                    <div class="babylai-flex babylai-flex-col babylai-items-start babylai-justify-start babylai-gap-0">
+                      <h4 class="babylai-text-base babylai-text-black-white-400 babylai-font-semibold">
+                        {{ 'BabylaiTitle' | transloco }}
+                      </h4>
+                      <p class="babylai-text-base babylai-text-black-white-800">{{ 'BabylaiDescription' | transloco }}</p>
+                    </div>
+                  </div>
+                  <app-button variant="default" [fullWidth]="true" (click)="handleShowHelpScreenData()">
+                    {{ 'ChatNow' | transloco }}
+                  </app-button>
+                </div>
+              </app-card-content>
+            </app-card>
+
+            <app-card variant="rounded">
+              <app-card-content>
+                <div class="babylai-flex babylai-items-center babylai-justify-between babylai-gap-4">
+                  <p class="babylai-text-base babylai-text-black-white-800">{{ 'TryBableAI' | transloco }}</p>
+                  <app-button variant="icon-bg" (click)="navigateToUrl('https://babylai.net/signup')">
+                    <img
+                      src="/icons/arrow-stripped.svg"
+                      alt="Arrow Right"
+                      [ngClass]="{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }"
+                    />
+                  </app-button>
+                </div>
+              </app-card-content>
+            </app-card>
+
+            <app-card variant="rounded">
+              <app-card-content>
+                <div class="babylai-flex babylai-items-center babylai-justify-between babylai-gap-4">
+                  <p class="babylai-text-base babylai-text-black-white-800">{{ 'ContactUs' | transloco }}</p>
+                  <app-button variant="icon-bg" (click)="navigateToUrl('https://babylai.net')">
+                    <img
+                      src="/icons/arrow-stripped.svg"
+                      alt="Arrow Right"
+                      [ngClass]="{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }"
+                    />
+                  </app-button>
+                </div>
+              </app-card-content>
+            </app-card>
+          </div>
+        </ng-container>
+        <ng-container *ngIf="showHelpScreenData">
+          <app-help-screen-data
+            [helpScreenData]="helpScreenData"
+            title="PickTopicTitle"
+            (handleStartNewChat)="handleStartNewChat($event)"
+          ></app-help-screen-data>
+        </ng-container>
+      </div>
+
+      <!-- Footer -->
+      <div class="babylai-flex babylai-justify-between babylai-items-center babylai-px-5 babylai-py-2.5">
+        <a
+          href="https://babylai.net"
+          target="_blank"
+          class="babylai-text-xs babylai-text-black-white-300 babylai-w-full babylai-text-center"
+          [ngClass]="!showHelpScreenData && !showChat ? 'babylai-text-black-white-50' : ''"
+        >
+          {{ 'PoweredByBabylAI' | transloco }}
+        </a>
+      </div>
+    </ng-container>
+  </div>
+</div>