@aslaluroba/help-center-react 1.0.1

package/src/ui/help-center.tsx

@@ -0,0 +1,303 @@
+import React, { useState, useEffect } from 'react'
+import { HelpButton } from './help-button'
+import { FloatingMessage } from './floating-message'
+import { HelpPopup } from './help-popup'
+import { apiRequest } from '../core/api'
+import { ClientSignalRService } from '../core/SignalRService'
+import { Message, HelpScreenData, Option } from '../lib/types'
+import { configService } from '../lib/config'
+import { useLocalTranslation } from '../useLocalTranslation'
+import '../globals.css'
+
+interface HelpCenterProps {
+  helpScreenId: string
+  language: string
+  user?: {
+    id?: string
+    name?: string
+    email?: string
+    avatar?: string
+  }
+  showArrow?: boolean
+  messageLabel?: string | null
+  showHelpScreen?: boolean
+}
+
+export function HelpCenter({
+  helpScreenId,
+  user,
+  showArrow = true,
+  language = 'en',
+  messageLabel = null,
+  showHelpScreen = false
+}: HelpCenterProps) {
+  const { t } = useLocalTranslation(language)
+  const [isOpen, setIsOpen] = useState(false)
+  const [showArrowAnimation, setShowArrowAnimation] = useState(showArrow)
+  const [helpScreenData, setHelpScreenData] = useState<HelpScreenData | null>(null)
+  const [status, setStatus] = useState('idle')
+  const [error, setError] = useState('')
+  const [selectedOption, setSelectedOption] = useState<Option | null>(null)
+
+  const [sessionId, setSessionId] = useState<string | null>(null)
+  const [isSignalRConnected, setIsSignalRConnected] = useState(false)
+  const [isChatClosed, setIsChatClosed] = useState(false)
+  const [messages, setMessages] = useState<Message[]>([])
+  const [needsAgent, setNeedsAgent] = useState(false)
+  const [assistantStatus, setAssistantStatus] = useState('idle')
+
+  const handleTogglePopup = () => {
+    setIsOpen(!isOpen)
+    setShowArrowAnimation(isOpen)
+  }
+
+  const handleCloseArrowAnimation = () => {
+    setShowArrowAnimation(false)
+  }
+
+  const handleReceiveMessage = (message: string, senderType: number, needsAgent: boolean) => {
+    // Update agent status if needed
+    if (needsAgent) {
+      setNeedsAgent(true)
+    }
+
+    // Add the received message to the chat
+    setMessages((prevMessages) => [
+      ...prevMessages,
+      {
+        id: Date.now(),
+        senderType: senderType,
+        messageContent: message,
+        sentAt: new Date(),
+        isSeen: true
+      }
+    ])
+
+    // Reset assistant status after receiving message
+    setAssistantStatus('idle')
+  }
+
+  const handleEndChat = async () => {
+    if (!sessionId || !selectedOption) return
+
+    try {
+      // Disconnect SignalR
+      await ClientSignalRService.stopConnection()
+      setIsSignalRConnected(false)
+
+      // Close chat session
+      const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST')
+      if (!response.ok) {
+        throw new Error('Failed to close chat session')
+      }
+
+      setSessionId(null)
+      setIsChatClosed(true)
+
+      // Clear messages after a delay
+      setTimeout(() => {
+        setMessages([])
+        setSelectedOption(null)
+      }, 3000)
+    } catch (error) {
+      console.error('Error ending chat:', error)
+      setError('Failed to end chat session')
+    }
+  }
+
+  const handleStartChat = async (option: Option) => {
+    await startNewChatSession(option)
+  }
+
+  const startNewChatSession = async (option: Option) => {
+    try {
+      setStatus('loading')
+      setError('')
+      setMessages([])
+
+      const tokenResponse = await configService.getToken()
+      const chatSessionCreateDto = {
+        helpScreenId: helpScreenId,
+        optionId: option.id,
+        ...(user && {
+          user: {
+            id: user.id,
+            name: user.name,
+            email: user.email
+          }
+        })
+      }
+
+      const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto)
+
+      if (!response.ok) {
+        throw new Error('Failed to create chat session')
+      }
+
+      const createdSession = await response.json()
+
+      setSessionId(createdSession.id)
+
+      // Add greeting message if available
+      if (option.assistant?.greeting) {
+        setMessages([
+          {
+            id: Date.now(),
+            senderType: 3, // AI
+            messageContent: option.assistant.greeting,
+            sentAt: new Date(),
+            isSeen: true
+          }
+        ])
+      } else {
+        // Default greeting if none provided
+        setMessages([
+          {
+            id: Date.now(),
+            senderType: 3,
+            messageContent: 'Hello! How can I assist you today?\nمرحباً! كيف يمكنني مساعدتك اليوم؟',
+            sentAt: new Date(),
+            isSeen: true
+          }
+        ])
+      }
+
+      // Connect to SignalR
+      await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage)
+
+      setIsSignalRConnected(true)
+      setIsChatClosed(false)
+      setStatus('succeeded')
+    } catch (error) {
+      console.error('Chat start error:', error)
+      setError(error instanceof Error ? error.message : 'Failed to start chat session')
+      setStatus('failed')
+    }
+  }
+
+  const handleSendMessage = async (message: string) => {
+    let currentSessionId = sessionId
+
+    if (message.trim() !== '') {
+      try {
+        // Set loading state
+        setAssistantStatus('typing')
+
+        // Add user message to the chat immediately
+        setMessages((prevMessages) => [
+          ...prevMessages,
+          {
+            id: Date.now(),
+            senderType: 1, // Customer
+            messageContent: message,
+            sentAt: new Date(),
+            isSeen: false
+          }
+        ])
+
+        // Create a new chat session if not started yet
+        if (!currentSessionId) {
+          const chatSessionCreateDto = {
+            helpScreenId: helpScreenId,
+            optionId: selectedOption?.id,
+            user: {
+              id: user?.id,
+              name: user?.name,
+              email: user?.email
+            }
+          }
+
+          const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto)
+
+          if (!response.ok) {
+            throw new Error('Failed to create chat session')
+          }
+
+          const createdSession = await response.json()
+          setSessionId(createdSession.id)
+          currentSessionId = createdSession.id
+
+          // Connect to SignalR with the new session
+          const tokenResponse = await configService.getToken()
+          await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage)
+          setIsSignalRConnected(true)
+        }
+
+        // Send the message
+        const messageDto = { messageContent: message }
+        const response = await apiRequest(`Client/ClientChatSession/${currentSessionId}/send-message`, 'POST', messageDto)
+
+        if (!response.ok) {
+          throw new Error('Failed to send message')
+        }
+
+        // Update the sent message as seen
+        setMessages((prevMessages) => prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg)))
+      } catch (error) {
+        console.error('Error in message handling:', error)
+        setAssistantStatus('idle')
+        setMessages((prevMessages) => [
+          ...prevMessages,
+          {
+            id: Date.now(),
+            senderType: 3, // System
+            messageContent: 'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
+            sentAt: new Date(),
+            isSeen: true
+          }
+        ])
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen && helpScreenId) {
+      setStatus('loading')
+
+      apiRequest(`client/clientHelpScreen/${helpScreenId}`)
+        .then((res) => res.json())
+        .then((data) => {
+          setHelpScreenData(data)
+          setStatus('succeeded')
+          setError('')
+        })
+        .catch((err) => {
+          setError(err.message)
+          setStatus('failed')
+        })
+    }
+  }, [isOpen, helpScreenId])
+
+  return (
+    <div className="babylai-help-center-container mb-4">
+      {showArrowAnimation && !isOpen && (
+        <FloatingMessage onClose={handleCloseArrowAnimation} message={messageLabel || t('homeSdk.needAssistance')} />
+      )}
+
+      <HelpButton onClick={handleTogglePopup} />
+
+      {isOpen && (
+        <HelpPopup
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          helpScreen={helpScreenData}
+          status={status}
+          error={error}
+          user={user}
+          onStartChat={handleStartChat}
+          onSendMessage={handleSendMessage}
+          onEndChat={handleEndChat}
+          messages={messages}
+          needsAgent={needsAgent}
+          assistantStatus={assistantStatus}
+          sessionId={sessionId}
+          isChatClosed={isChatClosed}
+          isSignalRConnected={isSignalRConnected}
+          selectedOption={selectedOption}
+          setSelectedOption={setSelectedOption}
+          showHelpScreen={showHelpScreen}
+        />
+      )}
+    </div>
+  )
+}

package/src/ui/help-popup.tsx

@@ -0,0 +1,264 @@
+import { cn } from '@/lib'
+import { ChatWindow } from '@/ui/chatbot-popup/chat-window-screen'
+import ChatWindowHeader from '@/ui/chatbot-popup/chat-window-screen/header'
+import ChatBotErrorScreen from '@/ui/chatbot-popup/error-screen'
+import HomeScreen from '@/ui/chatbot-popup/home-screen'
+import ChatBotLoadingScreen from '@/ui/chatbot-popup/loading-screen'
+import OptionsListScreen from '@/ui/chatbot-popup/options-list-screen'
+import React, { useEffect, useRef, useState } from 'react'
+import ChatIcon from '../assets/icons/chat.svg'
+import { Button } from '../components'
+import { HelpScreenData, Message, Option } from '../lib/types'
+
+type HelpPopupProps = {
+  isOpen: boolean
+  onClose: () => void
+  helpScreen: HelpScreenData | null
+  status: string
+  error: string | null
+  user: any
+  onStartChat: (option: Option) => void
+  onSendMessage: (message: string) => void
+  onEndChat: () => void
+  messages: Message[]
+  needsAgent: boolean
+  assistantStatus: string
+  sessionId: string | null
+  isChatClosed: boolean
+  isSignalRConnected: boolean
+  selectedOption: Option | null
+  setSelectedOption: (option: Option | null) => void
+  showHelpScreen: boolean
+}
+
+// Confirmation Modal Component
+const ConfirmationModal = ({
+  title,
+  message,
+  onCancel,
+  onConfirm
+}: {
+  title: string
+  message: string
+  onCancel: () => void
+  onConfirm: () => void
+}) => {
+  return (
+    <div className="babylai-absolute babylai-inset-0 babylai-z-50 babylai-flex babylai-items-center babylai-justify-center babylai-rounded-3xl babylai-overflow-hidden">
+      <div className="babylai-absolute babylai-inset-0 babylai-bg-black/60" onClick={onCancel}></div>
+      <div className="babylai-bg-black-white-100 babylai-rounded-3xl babylai-p-4 babylai-w-[220px] babylai-z-50 babylai-shadow-lg">
+        <h3 className="babylai-text-black-white-900 babylai-font-bold babylai-mb-2 babylai-text-center">{title}</h3>
+        <p className="babylai-text-black-white-700 babylai-text-xs babylai-mb-4">{message}</p>
+        <div className="babylai-flex babylai-justify-end babylai-gap-2 babylai-w-full">
+          <Button variant="default" size="sm" onClick={onConfirm} className="babylai-text-sm babylai-w-full !babylai-font-bold">
+            Confirm
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onCancel}
+            className="babylai-text-sm babylai-w-full babylai-text-primary-500 !babylai-font-bold"
+          >
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function HelpPopup({
+  onClose,
+  helpScreen,
+  status,
+  error,
+  onStartChat,
+  onSendMessage,
+  onEndChat,
+  messages,
+  assistantStatus,
+  needsAgent,
+  sessionId,
+  isChatClosed,
+  isSignalRConnected,
+  selectedOption,
+  setSelectedOption,
+  showHelpScreen
+}: HelpPopupProps) {
+  const [showChat, setShowChat] = useState(false)
+  const [currentMessages, setCurrentMessages] = useState<Message[]>([])
+  const [isShowList, setIsShowList] = useState<boolean>(!showHelpScreen || false)
+  const [expandedOption, setExpandedOption] = useState<Option | null>(null)
+  const [endChatConfirmation, setEndChatConfirmation] = useState<boolean>(false)
+
+  const chatBoxRef = useRef<HTMLDivElement>(null)
+
+  // Scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (chatBoxRef.current) {
+      chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight
+    }
+    setCurrentMessages(messages)
+  }, [messages])
+
+  const handleBack = () => {
+    if (showChat) {
+      setShowChat(false)
+      // onEndChat()
+    } else if (selectedOption) {
+      setSelectedOption(null)
+    } else {
+      setIsShowList(false)
+    }
+  }
+
+  const handleStartChat = (option: Option) => {
+    if (option) {
+      setCurrentMessages([
+        {
+          id: 1,
+          senderType: 3,
+          messageContent: selectedOption?.assistant?.greeting || '',
+          sentAt: new Date(),
+          isSeen: true
+        }
+      ])
+      setShowChat(true)
+      onStartChat(option)
+      setSelectedOption(option)
+    }
+  }
+
+  const handleSendMessage = (message: string) => {
+    if (message.trim() && isSignalRConnected && !isChatClosed) {
+      onSendMessage(message.trim())
+    }
+  }
+
+  const hideEndChatConfirmation = () => {
+    setEndChatConfirmation(false)
+  }
+
+  const handleEndChat = () => {
+    setEndChatConfirmation(false)
+    setCurrentMessages((prev) => [
+      ...prev,
+      {
+        id: prev.length + 1,
+        senderType: 3,
+        messageContent: selectedOption?.assistant?.closing || '',
+        sentAt: new Date(),
+        isSeen: true
+      }
+    ])
+    // setTimeout to close the chat after 3 seconds
+    setTimeout(() => {
+      onEndChat()
+      setShowChat(false)
+      setSelectedOption(null)
+    }, 3000)
+  }
+
+  const handleShowActiveChat = () => {
+    setShowChat(true)
+  }
+
+  if (status === 'loading' && !helpScreen) {
+    return (
+      <div
+        className="babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
+     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
+md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col"
+      >
+        <ChatBotLoadingScreen isShowList={isShowList} onClose={onClose} />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div
+        className="babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
+     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
+md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col"
+      >
+        <ChatBotErrorScreen onClose={onClose} error={error} />
+      </div>
+    )
+  }
+
+  const renderContent = () => {
+    if (showChat && selectedOption) {
+      return (
+        <>
+          <ChatWindowHeader
+            handleBack={handleBack}
+            handleEndChat={handleEndChat}
+            onClose={onClose}
+            isShowList={isShowList}
+            showChat={showChat}
+            setIsShowList={setIsShowList}
+          />
+          <ChatWindow
+            onSendMessage={handleSendMessage}
+            messages={currentMessages}
+            assistantStatus={assistantStatus}
+            needsAgent={needsAgent}
+          />
+        </>
+      )
+    }
+
+    if (isShowList) {
+      return (
+        <OptionsListScreen
+          helpScreen={helpScreen}
+          expandedOption={expandedOption}
+          setExpandedOption={setExpandedOption}
+          handleStartChat={handleStartChat}
+          handleBack={showHelpScreen ? handleBack : onClose}
+          showHelpScreen={showHelpScreen}
+        />
+      )
+    }
+    return <HomeScreen setIsShowList={setIsShowList} onClose={onClose} />
+  }
+
+  return (
+    <div
+      className="babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
+     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
+md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col"
+    >
+      <div
+        className={cn('babylai-h-full babylai-rounded-none md:babylai-rounded-3xl babylai-flex babylai-flex-col babylai-relative', {
+          'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': !isShowList,
+          'babylai-bg-black-white-100': isShowList
+        })}
+      >
+        {sessionId && !showChat && (
+          <Button
+            variant="rounded-icon"
+            size="icon"
+            className="babylai-bg-primary-500 babylai-absolute babylai-bottom-4 babylai-right-3 babylai-z-20 !babylai-w-10 !babylai-h-10 babylai-p-2"
+            onClick={handleShowActiveChat}
+          >
+            <ChatIcon className="babylai-w-5 babylai-h-5 babylai-text-black-white-50" />
+          </Button>
+        )}
+        {/* Content */}
+        {renderContent()}
+
+        {/* End Chat Confirmation Modal */}
+        {endChatConfirmation && (
+          <ConfirmationModal
+            title="Leaving so soon? 👋"
+            message="Don't worry, you can come back anytime. We're always here if you need help or have questions."
+            onCancel={hideEndChatConfirmation}
+            onConfirm={handleEndChat}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/useLocalTranslation.ts

@@ -0,0 +1,14 @@
+
+import { useMemo } from 'react';
+import { createHelpCenterI18n } from './i18n';
+
+export const useLocalTranslation = (languageFromProps?: string) => {
+  const language = languageFromProps || localStorage.getItem('app-language') || 'en';
+
+  const i18n = useMemo(() => createHelpCenterI18n(language), [language]);
+
+  const t = (key: string) => i18n.t(key);
+  const dir = i18n.dir();
+
+  return { t, dir , i18n };
+};