@aslaluroba/help-center-react 3.0.3 → 3.0.5

package/src/ui/chatbot-popup/error-screen/index.tsx

@@ -1,5 +1,4 @@
 import { Header } from '@/components/ui/header'
-import React from 'react'
 
 interface ChatBotErrorScreenProps {
   onClose: () => void

package/src/ui/chatbot-popup/home-screen/card.tsx

@@ -1,34 +1,34 @@
-import React from 'react';
-
 import { Button } from '@/components/shared';
 import ArrowRight from '../../../assets/icons/arrowRight.svg';
 import { useLocalTranslation } from '../../../useLocalTranslation'
 
 interface CardProps {
-    text: string;
-    handleClick: () => void
+  text: string;
+  handleClick: () => void;
 }
 
 const Card: React.FC<CardProps> = (props) => {
-    const { i18n } = useLocalTranslation();
-    const isLTR = i18n.dir() === 'ltr';
-    return (
-        <div className="babylai-flex  babylai-items-center babylai-justify-between babylai-gap-4 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-6" >
-            <p className="babylai-text-base md:babylai-text-lg babylai-font-medium babylai-text-black-white-800">{props.text}</p>
-            <Button
-                variant="rounded-icon"
-                size="icon"
-                className="babylai-bg-primary-500 babylai-text-black-white-50 hover:babylai-bg-primary-600 md:!babylai-w-10 md:!babylai-h-10"
-                onClick={() => props.handleClick()}
-            >
-                <ArrowRight
-                    className={`babylai-w-4 babylai-h-4   ${isLTR ? '' : 'babylai-rotate-180'
-                        }`}
-                />
-
-            </Button>
-        </div>
-    )
-}
+  const { dir } = useLocalTranslation();
+  const isLTR = dir === "ltr";
+  return (
+    <div className="babylai-flex  babylai-items-center babylai-justify-between babylai-gap-4 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-6">
+      <p className="babylai-text-base md:babylai-text-lg babylai-font-medium babylai-text-black-white-800">
+        {props.text}
+      </p>
+      <Button
+        variant="rounded-icon"
+        size="icon"
+        className="babylai-bg-primary-500 babylai-text-black-white-50 hover:babylai-bg-primary-600 md:!babylai-w-10 md:!babylai-h-10"
+        onClick={() => props.handleClick()}
+      >
+        <ArrowRight
+          className={`babylai-w-4 babylai-h-4   ${
+            isLTR ? "" : "babylai-rotate-180"
+          }`}
+        />
+      </Button>
+    </div>
+  );
+};
 
-export default Card
+export default Card;

package/src/ui/chatbot-popup/home-screen/chat-now-card.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Button } from '@/components/shared'
 import Logo from '../../../assets/logo.svg'
 import { useLocalTranslation } from '../../../useLocalTranslation'

package/src/ui/chatbot-popup/home-screen/index.tsx

@@ -1,7 +1,6 @@
 import { Header } from '@/components/ui/header'
 import Card from '@/ui/chatbot-popup/home-screen/card'
 import ChatNowCard from '@/ui/chatbot-popup/home-screen/chat-now-card'
-import React from 'react'
 import { useLocalTranslation } from '../../../useLocalTranslation'
 
 interface HomeScreenProps {

package/src/ui/chatbot-popup/loading-screen/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Header } from '@/components/ui/header'
 import { cn } from '@/lib'
 import animatedLogo from '../../../assets/animatedLogo.gif'

package/src/ui/chatbot-popup/options-list-screen/expanded-option.tsx

@@ -1,6 +1,5 @@
 import { Button, CardContent, CardFooter } from '@/components'
 import { Option } from '@/lib/types'
-import React from 'react'
 import { useLocalTranslation } from '../../../useLocalTranslation'
 
 interface ExpandedOptionProps {

package/src/ui/chatbot-popup/options-list-screen/header.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@/components';
-import React from 'react';
 import ArrowRight from './../../../assets/icons/arrowRight.svg';
 import ThinkingLogo from './../../../assets/thinking-logo.svg';
 import { useLocalTranslation } from '../../../useLocalTranslation';
@@ -10,32 +9,35 @@ interface OptionsListHeaderProps {
   showHelpScreen: boolean;
 }
 
-const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({ handleBack, showHelpScreen }) => {
-  const { i18n } = useLocalTranslation();
-  const isRTL = i18n.dir() === 'rtl';
+const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({
+  handleBack,
+  showHelpScreen,
+}) => {
+  const { dir } = useLocalTranslation();
+  const isRTL = dir === "rtl";
 
   return (
     <header
-      dir={i18n.dir()}
+      dir={dir}
       className={`babylai-flex babylai-w-full babylai-items-center mb-2 ${
-        !showHelpScreen ? 'babylai-justify-end' : 'babylai-justify-between'
+        !showHelpScreen ? "babylai-justify-end" : "babylai-justify-between"
       }`}
     >
       <Button
-        variant='rounded-icon'
-        size='icon'
-        className='!babylai-w-12 !babylai-h-12  babylai-bg-black-white-50 dark:babylai-bg-storm-dust-900 babylai-relative babylai-z-10'
+        variant="rounded-icon"
+        size="icon"
+        className="!babylai-w-12 !babylai-h-12  babylai-bg-black-white-50 dark:babylai-bg-storm-dust-900 babylai-relative babylai-z-10"
         onClick={handleBack}
       >
         {showHelpScreen ? (
           <ArrowRight
-            className={`${isRTL ? '' : 'babylai-rotate-180'}  babylai-text-primary-500 babylai-w-full babylai-h-full`}
+            className={`${isRTL ? "" : "babylai-rotate-180"}  babylai-text-primary-500 babylai-w-full babylai-h-full`}
           />
         ) : (
-          <CloseCircle className='!babylai-w-full !babylai-h-full babylai-cursor-pointer' />
+          <CloseCircle className="!babylai-w-full !babylai-h-full babylai-cursor-pointer" />
         )}
       </Button>
-      <ThinkingLogo className='babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-end-1 babylai-overflow-hidden' />
+      <ThinkingLogo className="babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-end-1 babylai-overflow-hidden" />
     </header>
   );
 };

package/src/ui/chatbot-popup/options-list-screen/index.tsx

@@ -3,7 +3,6 @@ import { HelpScreenData, Option } from '@/lib/types';
 import ExpandedOption from '@/ui/chatbot-popup/options-list-screen/expanded-option';
 import OptionsListHeader from '@/ui/chatbot-popup/options-list-screen/header';
 import OptionCard from '@/ui/chatbot-popup/options-list-screen/option-card';
-import React from 'react';
 
 interface OptionsListScreenProps {
   helpScreen: HelpScreenData | null;

package/src/ui/chatbot-popup/options-list-screen/option-card.tsx

@@ -1,25 +1,32 @@
-import { Button } from '@/components';
-import React from 'react';
-import ArrowRight from '../../../assets/icons/arrowRight.svg';
-import { useTranslation  } from 'react-i18next'
+import { Button } from "@/components";
+import ArrowRight from "../../../assets/icons/arrowRight.svg";
+import { useLocalTranslation } from "@/useLocalTranslation";
 
 interface OptionCardProps {
-    title: string;
+  title: string;
 }
 
 const OptionCard: React.FC<OptionCardProps> = (props) => {
- const { i18n} = useTranslation();
-          const isLTR = i18n.dir() === 'ltr';
-    return (
-        <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-2">
-            <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white">{props.title}</p>
-            <Button variant="rounded-icon" size="icon" className="babylai-text-primary-500 hover:babylai-bg-primary-100">
-                <ArrowRight  className={`babylai-w-[12px] babylai-h-[12px] ${
-      isLTR ? '' : 'babylai-rotate-180'
-    } babylai-text-primary-500`}/>
-            </Button>
-        </div>
-    )
-}
+  const i18n = useLocalTranslation();
+  const isLTR = i18n.dir == "ltr";
+  return (
+    <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-2">
+      <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white">
+        {props.title}
+      </p>
+      <Button
+        variant="rounded-icon"
+        size="icon"
+        className="babylai-text-primary-500 hover:babylai-bg-primary-100"
+      >
+        <ArrowRight
+          className={`babylai-w-[12px] babylai-h-[12px] ${
+            isLTR ? "" : "babylai-rotate-180"
+          } babylai-text-primary-500`}
+        />
+      </Button>
+    </div>
+  );
+};
 
-export default OptionCard
+export default OptionCard;

package/src/ui/confirmation-modal/index.tsx

@@ -1,6 +1,5 @@
 import { Button } from "@/components";
 import { useLocalTranslation } from "@/useLocalTranslation";
-import React from "react";
 
 interface ConfirmationModalProps {
     title: string;

package/src/ui/floating-message.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import CloseIcon from '../assets/icons/close.svg'
 interface FloatingMessageProps {
   message: string

package/src/ui/help-button.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Logo from '../assets/logo.svg'
 
 interface HelpButtonProps {

package/src/ui/help-center.tsx

@@ -1,5 +1,5 @@
 import ReviewDialog from '@/ui/review-dialog';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { apiRequest } from '../core/api';
 import { ClientAblyService } from '../core/AblyService';
 import { useLocalTranslation } from '../useLocalTranslation';
@@ -98,7 +98,6 @@ export function HelpCenter({
       setMessages([]);
 
       setIsReviewDialogOpen(true);
-
     } catch (error) {
       console.error('Error ending chat:', error);
       setError('Failed to end chat session');
@@ -119,7 +118,7 @@ export function HelpCenter({
       const response = await apiRequest(`Client/ClientChatSession/${reviewSessionId}/review`, 'POST', payload);
       if (!response.ok) throw new Error('Failed to send chat review');
 
-      handleCloseChatReview()
+      handleCloseChatReview();
     } catch (error) {
       console.error('Error sending chat review:', error);
       setError('Failed to send chat review');
@@ -132,15 +131,23 @@ export function HelpCenter({
   };
 
   const handleStartChat = async (option: Option) => {
-    await startNewChatSession(option);
+    setMessages([
+      {
+        id: Date.now(),
+        senderType: 3,
+        messageContent: option?.assistant?.greeting || 'مرحباً! كيف يمكنني مساعدتك اليوم؟',
+        sentAt: new Date(),
+        isSeen: true,
+      },
+    ]);
+    setIsChatClosed(false);
+    setStatus('succeeded');
   };
 
-  const startNewChatSession = async (option: Option) => {
-
+  const startNewChatSession = async (option: Option): Promise<string> => {
     try {
       setStatus('loading');
       setError('');
-      setMessages([]);
 
       const chatSessionCreateDto = {
         helpScreenId: helpScreenId,
@@ -161,32 +168,12 @@ export function HelpCenter({
       }
 
       const responseData = await response.json();
-      setSessionId(responseData.chatSession.id);
-
-      if (responseData.chatSession.assistant?.greeting) {
-        setMessages([
-          {
-            id: Date.now(),
-            senderType: 3,
-            messageContent: responseData.chatSession.assistant.greeting,
-            sentAt: new Date(),
-            isSeen: true,
-          },
-        ]);
-      } else {
-        setMessages([
-          {
-            id: Date.now(),
-            senderType: 3,
-            messageContent: 'Hello! How can I assist you today?\nمرحباً! كيف يمكنني مساعدتك اليوم؟',
-            sentAt: new Date(),
-            isSeen: true,
-          },
-        ]);
-      }
+      const newSessionId = responseData.chatSession.id;
+
+      setSessionId(newSessionId);
 
       await ClientAblyService.startConnection(
-        responseData.chatSession.id,
+        newSessionId,
         responseData.ablyToken,
         handleReceiveMessage,
         responseData.chatSession.tenantId
@@ -200,21 +187,16 @@ export function HelpCenter({
       setIsAblyConnected(true);
       setIsChatClosed(false);
       setStatus('succeeded');
+
+      return newSessionId; // Return the session ID
     } catch (error) {
       setError(error instanceof Error ? error.message : 'Failed to start chat session');
       setStatus('failed');
+      throw error; // Re-throw to handle in calling function
     }
   };
 
   const handleSendMessage = async (message: string) => {
-    // Only send message if Ably is connected
-    if (!isAblyConnected) {
-      setError('Connection lost. Please try again.');
-      return;
-    }
-
-    let currentSessionId = sessionId;
-
     if (message.trim() !== '') {
       try {
         setAssistantStatus('typing');
@@ -229,35 +211,15 @@ export function HelpCenter({
 
         setMessages((prevMessages) => [...prevMessages, userMessage]);
 
+        // Handle session creation if needed
+        let currentSessionId = sessionId;
+
+        if (!isAblyConnected && selectedOption) {
+          currentSessionId = await startNewChatSession(selectedOption);
+        }
+
         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 responseData = await response.json();
-          setSessionId(responseData.chatSession.id);
-          currentSessionId = responseData.chatSession.id;
-
-          await ClientAblyService.startConnection(
-            responseData.chatSession.id,
-            responseData.ablyToken,
-            handleReceiveMessage,
-            responseData.chatSession.tenantId
-          );
-
-          setIsAblyConnected(true);
+          throw new Error('No active session available');
         }
 
         const messageDto = { messageContent: message };

package/src/ui/help-popup.tsx

@@ -5,7 +5,7 @@ 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, useCallback, useMemo } from 'react';
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import ChatIcon from '../assets/icons/chat.svg';
 import { Button } from '@/components';
 import { HelpScreenData, Message, Option } from '@/lib/types';
@@ -110,11 +110,11 @@ export function HelpPopup({
 
   const handleSendMessage = useCallback(
     (message: string) => {
-      if (message.trim() && isAblyConnected) {
+      if (message.trim()) {
         onSendMessage(message.trim());
       }
     },
-    [onSendMessage, isAblyConnected]
+    [onSendMessage]
   );
 
   const hideEndChatConfirmation = useCallback(() => {
@@ -133,7 +133,7 @@ export function HelpPopup({
         })
         .finally(() => {
           setTempSelectedOption(null);
-        })
+        });
     }
   };
 

package/src/ui/review-dialog/index.tsx

@@ -1,8 +1,8 @@
 import { ReviewProps } from '@/lib/types'
 import { Rating } from '@/ui/review-dialog/rating'
-import React from 'react'
 import { useLocalTranslation } from '../../useLocalTranslation'
 import CloseCircle from '../../assets/icons/closeCircle.svg'
+import { useState } from 'react';
 
 interface ReviewDialogProps {
     handleSubmit: ({ comment, rating }: ReviewProps) => void;
@@ -11,9 +11,9 @@ interface ReviewDialogProps {
 
 const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
     const { t } = useLocalTranslation()
-    const [comment, setComment] = React.useState<string>('')
-    const [rating, setRating] = React.useState<number>(0)
-    const [error, setError] = React.useState<{ comment?: string; rating?: string }>({})
+    const [comment, setComment] = useState<string>('')
+    const [rating, setRating] = useState<number>(0)
+    const [error, setError] = useState<{ comment?: string; rating?: string }>({})
 
     const isCommentValid = comment.length >= 10 && comment.length <= 500
     const isRatingValid = rating >= 1 && rating <= 5

package/src/useLocalTranslation.ts

@@ -1,14 +1,14 @@
-
-import { useMemo } from 'react';
-import { createHelpCenterI18n } from './i18n';
+import { useMemo } from "react";
+import { createHelpCenterI18n } from "./i18n";
 
 export const useLocalTranslation = (languageFromProps?: string) => {
-  const language = languageFromProps || localStorage.getItem('app-language') || 'en';
+  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 };
+  return { t, dir, i18n };
 };

package/tsconfig.json

@@ -22,23 +22,34 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
-    "jsx": "react",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
-     "paths": {
-      "@/*": ["src/*"],
-      "@/components/*": ["src/components/*"],
-      "@/ui/*": ["src/ui/*"],
-      "@/lib/*": ["src/lib/*"],
-      "@/assets/*": ["src/assets/*"]
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@/components/*": [
+        "src/components/*"
+      ],
+      "@/ui/*": [
+        "src/ui/*"
+      ],
+      "@/lib/*": [
+        "src/lib/*"
+      ],
+      "@/assets/*": [
+        "src/assets/*"
+      ]
     },
   },
   "include": [
     "src",
+    "src/types",
     "assets"
   ],
   "exclude": [

package/src/styles/tailwind.css

@@ -1,4 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;