@aslaluroba/help-center-react 3.2.17 → 3.2.18

package/src/ui/help-popup.tsx

@@ -1,367 +0,0 @@
-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 ChatBotLoadingScreen from '@/ui/chatbot-popup/loading-screen';
-import OptionsListScreen from '@/ui/chatbot-popup/options-list-screen';
-import { ActiveChatActions } from '@/ui/chatbot-popup/active-chat-actions';
-import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { HelpScreenData, Message, Option, ReviewProps } from '@/lib/types';
-import { cn } from '@/lib/utils';
-import { useLocalTranslation } from '../useLocalTranslation';
-import ConfirmationModal from './confirmation-modal';
-import ReviewDialog from './review-dialog';
-
-const POPUP_ANIMATION_DURATION_MS = 250;
-
-type HelpPopupProps = {
-  isOpen: boolean;
-  isClosing?: boolean;
-  onClose: () => void;
-  onCloseAnimationEnd?: () => void;
-  helpScreen: HelpScreenData | null;
-  status: string;
-  error: string | null;
-  user: unknown;
-  onStartChat: (option: Option) => void;
-  onSendMessage: (message: string, attachmentIds: string[]) => void;
-  onEnsureSession: () => Promise<string>;
-  onEndChat: (options?: { fromChatScreen?: boolean; sessionClosedByServer?: boolean }) => void | Promise<void>;
-  messages: Message[];
-  needsAgent: boolean;
-  assistantStatus: string;
-  sessionId: string | null;
-  isChatClosed: boolean;
-  selectedOption: Option | null;
-  setSelectedOption: (option: Option | null) => void;
-  inChatReviewSessionId?: string | null;
-  onInChatReviewSubmit?: (payload: ReviewProps) => void | Promise<void>;
-  onInChatReviewDone?: () => void;
-  navigateToOptionsListAfterReview?: boolean;
-  onNavigatedToOptionsList?: () => void;
-  isReviewDialogOpen?: boolean;
-  reviewSessionId?: string | null;
-  isSubmittingReview?: boolean;
-  onReviewDialogSubmit?: (payload: ReviewProps) => void | Promise<void>;
-  onReviewDialogClose?: () => void;
-};
-
-const HelpPopup = ({
-  isOpen,
-  isClosing = false,
-  onClose,
-  onCloseAnimationEnd,
-  helpScreen,
-  status,
-  error,
-  onStartChat,
-  onSendMessage,
-  onEnsureSession,
-  onEndChat,
-  messages,
-  assistantStatus,
-  needsAgent,
-  sessionId,
-  isChatClosed,
-  selectedOption,
-  setSelectedOption,
-  inChatReviewSessionId = null,
-  onInChatReviewSubmit,
-  onInChatReviewDone,
-  navigateToOptionsListAfterReview = false,
-  onNavigatedToOptionsList,
-  isReviewDialogOpen = false,
-  reviewSessionId = null,
-  isSubmittingReview = false,
-  onReviewDialogSubmit,
-  onReviewDialogClose,
-}: HelpPopupProps) => {
-  // ALL HOOKS MUST BE CALLED FIRST - BEFORE ANY EARLY RETURNS
-  const [showChat, setShowChat] = useState(false);
-  const [endChatConfirmation, setEndChatConfirmation] = useState<boolean>(false);
-  const [startNewChatConfirmation, setStartNewChatConfirmation] = useState<boolean>(false);
-  const [tempSelectedOption, setTempSelectedOption] = useState<Option | null>(null);
-  const [isEntering, setIsEntering] = useState(true);
-
-  const chatBoxRef = useRef<HTMLDivElement>(null);
-  const prevIsOpenRef = useRef(false);
-  const { t } = useLocalTranslation();
-  const messagesRef = useRef<Message[]>([]);
-
-  // Enter animation: transition from initial state to visible
-  useEffect(() => {
-    const id = requestAnimationFrame(() => {
-      requestAnimationFrame(() => setIsEntering(false));
-    });
-    return () => cancelAnimationFrame(id);
-  }, []);
-
-  // Exit animation: notify parent to unmount after transition
-  useEffect(() => {
-    if (!isClosing || !onCloseAnimationEnd) return;
-    const tId = setTimeout(onCloseAnimationEnd, POPUP_ANIMATION_DURATION_MS);
-    return () => clearTimeout(tId);
-  }, [isClosing, onCloseAnimationEnd]);
-
-  // Memoize the current messages to prevent unnecessary re-renders
-  const memoizedMessages = useMemo(() => {
-    return messages;
-  }, [messages]);
-
-  // Add this function to show the end chat confirmation modal
-  const showEndChatConfirmation = useCallback(() => setEndChatConfirmation(true), []);
-
-  // Optimize scroll to bottom with debouncing
-  const scrollToBottom = useCallback(() => {
-    if (chatBoxRef.current) {
-      requestAnimationFrame(() => {
-        if (chatBoxRef.current) {
-          chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight;
-        }
-      });
-    }
-  }, []);
-
-  const handleBack = useCallback(() => {
-    if (showChat) {
-      setShowChat(false);
-      // onEndChat()
-    } else if (selectedOption) {
-      setSelectedOption(null);
-    }
-  }, [showChat, selectedOption, setSelectedOption]);
-
-  const handleStartChat = useCallback(
-    (option: Option) => {
-      if (option) {
-        if (sessionId) {
-          setStartNewChatConfirmation(true);
-          setTempSelectedOption(option);
-        } else {
-          setShowChat(true);
-          onStartChat(option);
-          setSelectedOption(option);
-        }
-      }
-    },
-    [onStartChat, setSelectedOption, sessionId, setStartNewChatConfirmation, setTempSelectedOption]
-  );
-
-  const handleSendMessage = useCallback(
-    (message: string, attachmentIds: string[]) => {
-      // Allow sending if there's text OR attachments
-      if (message.trim() || attachmentIds.length > 0) {
-        onSendMessage(message.trim(), attachmentIds);
-      }
-    },
-    [onSendMessage]
-  );
-
-  const hideEndChatConfirmation = useCallback(() => {
-    setEndChatConfirmation(false);
-  }, []);
-
-  const handleEndAndStartNewChat = async () => {
-    if (tempSelectedOption) {
-      setStartNewChatConfirmation(false);
-
-      await onEndChat();
-      setShowChat(true);
-      onStartChat(tempSelectedOption);
-      setSelectedOption(tempSelectedOption);
-      setTempSelectedOption(null);
-    }
-  };
-
-  const handleEndChatFromChatScreen = useCallback(async () => {
-    setEndChatConfirmation(false);
-    if (!sessionId) {
-      setShowChat(false);
-      setSelectedOption(null);
-      return;
-    }
-    await onEndChat({ fromChatScreen: true });
-  }, [onEndChat, sessionId, setSelectedOption]);
-
-  const handleMinimize = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
-  const handleShowActiveChat = useCallback(() => {
-    setShowChat(true);
-  }, []);
-
-  const handleEndChatFromActiveActions = useCallback(async () => {
-    await onEndChat();
-    setShowChat(false);
-    setSelectedOption(null);
-  }, [onEndChat, setSelectedOption]);
-
-  // Memoize render content function
-  const renderContent = useCallback(() => {
-    if (showChat && selectedOption) {
-      return (
-        <>
-          <ChatWindowHeader
-            handleBack={handleBack}
-            handleEndChat={showEndChatConfirmation}
-            handleMinimize={handleMinimize}
-            optionTitle={selectedOption?.title}
-          />
-          <ChatWindow
-            onSendMessage={handleSendMessage}
-            onEnsureSession={onEnsureSession}
-            messages={memoizedMessages}
-            assistantStatus={assistantStatus}
-            needsAgent={needsAgent}
-            sessionId={sessionId}
-            isChatClosed={isChatClosed}
-            inChatReviewSessionId={inChatReviewSessionId ?? undefined}
-            isSubmittingReview={isSubmittingReview}
-            onInChatReviewSubmit={onInChatReviewSubmit}
-            onInChatReviewDone={onInChatReviewDone}
-          />
-        </>
-      );
-    }
-
-    return (
-      <OptionsListScreen
-        helpScreen={helpScreen}
-        handleStartChat={handleStartChat}
-        handleMinimize={handleMinimize}
-        hasActiveSession={!!sessionId}
-      />
-    );
-  }, [
-    showChat,
-    selectedOption,
-    handleBack,
-    showEndChatConfirmation,
-    handleSendMessage,
-    onEnsureSession,
-    memoizedMessages,
-    assistantStatus,
-    needsAgent,
-    helpScreen,
-    handleStartChat,
-    handleMinimize,
-    sessionId,
-    isChatClosed,
-    inChatReviewSessionId,
-    isSubmittingReview,
-    onInChatReviewSubmit,
-    onInChatReviewDone,
-  ]);
-
-  // Memoize confirmation modal (End Chat from chat screen → keep chat open, show in-chat review)
-  const confirmationModal = useMemo(() => {
-    if (!endChatConfirmation) return null;
-
-    return (
-      <ConfirmationModal
-        title={t('homeSdk.ConfirmationModal.title')}
-        message={t('homeSdk.ConfirmationModal.message')}
-        onCancel={hideEndChatConfirmation}
-        onConfirm={handleEndChatFromChatScreen}
-      />
-    );
-  }, [endChatConfirmation, t, hideEndChatConfirmation, handleEndChatFromChatScreen]);
-
-  // Memoize active chat button
-  const activeChatButton = useMemo(() => {
-    if (!sessionId || showChat) return null;
-
-    return (
-      <ActiveChatActions
-        onConfirm={handleEndChatFromActiveActions}
-        onCancel={handleShowActiveChat}
-      />
-    );
-  }, [sessionId, showChat, handleShowActiveChat, handleEndChatFromActiveActions]);
-
-  // Restore chat view only when popup reopens (not when user clicks back)
-  useEffect(() => {
-    const justOpened = isOpen && !prevIsOpenRef.current;
-    prevIsOpenRef.current = isOpen;
-    if (justOpened && sessionId && selectedOption && !showChat) {
-      setShowChat(true);
-    }
-  }, [isOpen, sessionId, selectedOption, showChat]);
-
-  // After submitting in-chat review, navigate to options list
-  useEffect(() => {
-    if (navigateToOptionsListAfterReview) {
-      setShowChat(false);
-      setSelectedOption(null);
-      onNavigatedToOptionsList?.();
-    }
-  }, [navigateToOptionsListAfterReview, onNavigatedToOptionsList, setSelectedOption]);
-
-  // Scroll to bottom when new messages arrive - optimize with ref comparison
-  useEffect(() => {
-    if (messagesRef.current !== messages) {
-      messagesRef.current = messages;
-      scrollToBottom();
-    }
-  }, [messages, scrollToBottom]);
-
-  const popupBaseClasses =
-    'babylai:fixed babylai:inset-auto babylai:max-w-sm babylai:h-[calc(100vh-220px)] babylai:max-h-[800px] babylai:overflow-auto babylai:w-full babylai:bg-secondary babylai:mb-4 babylai:bottom-24 babylai:right-4 babylai:rounded-3xl babylai:shadow-lg babylai:z-50 babylai:flex babylai:flex-col';
-  const popupAnimationClasses = cn(
-    'babylai:transition-all babylai:duration-[250ms] babylai:ease-out',
-    (isEntering || isClosing) && 'babylai:opacity-0 babylai:scale-[0.96] babylai:translate-y-2',
-    !isEntering && !isClosing && 'babylai:opacity-100 babylai:scale-100 babylai:translate-y-0'
-  );
-
-  // EARLY RETURNS MUST COME AFTER ALL HOOKS
-  // Early returns for performance - moved after all hooks
-  if (status === 'loading' && !helpScreen) {
-    return (
-      <div className={cn(popupBaseClasses, popupAnimationClasses)}>
-        <ChatBotLoadingScreen onClose={onClose} />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className={cn(popupBaseClasses, popupAnimationClasses)}>
-        <ChatBotErrorScreen onClose={onClose} error={error || ''} />
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn(popupBaseClasses, popupAnimationClasses)}>
-      <div className='babylai:h-full babylai:rounded-3xl babylai:flex babylai:flex-col babylai:relative'
-      >
-        {activeChatButton}
-
-        {/* Content */}
-        {renderContent()}
-
-        {/* End Chat Confirmation Modal */}
-        {confirmationModal}
-
-        {startNewChatConfirmation && (
-          <ConfirmationModal
-            title={t('homeSdk.ConfirmationModal.endAndStartNewChatTitle')}
-            message={t('homeSdk.ConfirmationModal.endAndStartNewChatMessage')}
-            onCancel={() => setStartNewChatConfirmation(false)}
-            onConfirm={handleEndAndStartNewChat}
-          />
-        )}
-
-        {!!isReviewDialogOpen && !!reviewSessionId && onReviewDialogSubmit && onReviewDialogClose && (
-          <ReviewDialog
-            handleSubmit={onReviewDialogSubmit}
-            onClose={onReviewDialogClose}
-            isSubmitting={isSubmittingReview}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default HelpPopup;

package/src/ui/powered-by.tsx

@@ -1,62 +0,0 @@
-import { useLocalTranslation } from '@/useLocalTranslation';
-
-const PoweredBy: React.FC = () => {
-  const { t } = useLocalTranslation();
-
-  return (
-    <footer className="babylai:flex babylai:items-center babylai:justify-center babylai:p-3 babylai:border-t babylai:border-border">
-      <a
-        href="https://babylai.net"
-        target="_blank"
-        dir="auto"
-        className="babylai:flex babylai:items-center babylai:justify-center babylai:gap-2 babylai:text-sm babylai:text-card-foreground babylai:no-underline babylai:transition-opacity babylai:duration-200 babylai:hover:opacity-80"
-      >
-        <span>
-          {t('homeSdk.poweredBy')}
-        </span>
-        <span>|</span>
-        <svg viewBox="0 0 54 19" fill="none" className="babylai:w-15">
-          <path
-            d="M0 4.97873C0 2.22905 2.22908 0 4.97879 0H13.2768C16.0265 0 18.2556 2.22905 18.2556 4.97873V13.2766C18.2556 16.0263 16.0265 18.2554 13.2768 18.2554H0V4.97873Z"
-            fill="#606060"
-          />
-          <path
-            d="M5.76107 6.10571C5.76153 6.10407 5.76177 6.10325 5.76187 6.10287C5.83413 5.8495 6.19321 5.8495 6.26546 6.10287C6.26557 6.10325 6.2658 6.10407 6.26627 6.10571C6.26749 6.11004 6.26809 6.1122 6.26867 6.11423C6.60441 7.29978 7.53101 8.22637 8.71657 8.5621C8.7186 8.56268 8.72076 8.56329 8.72509 8.56451C8.72673 8.56497 8.72755 8.5652 8.72793 8.56531C8.98131 8.63756 8.98131 8.99664 8.72793 9.06889C8.72755 9.069 8.72673 9.06923 8.72509 9.0697C8.72076 9.07092 8.7186 9.07153 8.71657 9.0721C7.53101 9.40783 6.60441 10.3344 6.26867 11.52C6.26809 11.522 6.26749 11.5242 6.26627 11.5285C6.2658 11.5301 6.26557 11.531 6.26546 11.5313C6.19321 11.7847 5.83413 11.7847 5.76187 11.5313C5.76177 11.531 5.76153 11.5301 5.76107 11.5285C5.75985 11.5242 5.75924 11.522 5.75867 11.52C5.42293 10.3344 4.49633 9.40783 3.31077 9.0721C3.30874 9.07153 3.30657 9.07092 3.30225 9.0697C3.3006 9.06923 3.29978 9.069 3.2994 9.06889C3.04603 8.99664 3.04603 8.63756 3.2994 8.56531C3.29978 8.5652 3.3006 8.56497 3.30225 8.56451C3.30657 8.56329 3.30874 8.56268 3.31077 8.5621C4.49633 8.22637 5.42293 7.29978 5.75867 6.11423C5.75924 6.1122 5.75985 6.11004 5.76107 6.10571Z"
-            fill="white"
-          />
-          <path
-            d="M14.7275 8.76473C14.7275 9.99635 13.7523 10.9948 12.5493 10.9948C11.3463 10.9948 10.3711 9.99635 10.3711 8.76473C10.3711 7.5331 11.3463 6.53467 12.5493 6.53467C13.7523 6.53467 14.7275 7.5331 14.7275 8.76473Z"
-            fill="white"
-          />
-          <path
-            d="M51.6133 13.0924V5.27515H53.1931V13.0924H51.6133Z"
-            fill="#606060"
-          />
-          <path
-            d="M44.5938 13.0924L46.5857 5.27515H49.3446L51.325 13.0924H49.7452L49.3102 11.513H46.5742L46.1621 13.0924H44.5938ZM46.8261 10.2425H49.0813L48.1998 6.55705H47.719L46.8261 10.2425Z"
-            fill="#606060"
-          />
-          <path d="M42.5703 13.092V5H44.0929V13.092H42.5703Z" fill="#919191" />
-          <path
-            d="M38.6905 15.5069L39.4231 13.0919H38.1982L36.8359 7.34619H38.4272L39.446 11.7985H39.7437L40.7625 7.34619H42.2965L40.3161 15.5069H38.6905Z"
-            fill="#919191"
-          />
-          <path
-            d="M34.008 13.2179C33.8172 13.2179 33.5845 13.2103 33.3097 13.195C33.035 13.1797 32.7526 13.1569 32.4626 13.1263C32.1802 13.0958 31.9284 13.0691 31.707 13.0462V5H33.241V7.52946C33.3555 7.48368 33.4967 7.4379 33.6646 7.39212C33.8325 7.34633 34.008 7.30818 34.1912 7.27766C34.382 7.23951 34.5575 7.22043 34.7178 7.22043C35.252 7.22043 35.6756 7.33107 35.9885 7.55235C36.309 7.766 36.538 8.08648 36.6754 8.51378C36.8127 8.94108 36.8814 9.47902 36.8814 10.1276C36.8814 10.8906 36.7937 11.5011 36.6181 11.9589C36.4502 12.4091 36.1564 12.7334 35.7366 12.9318C35.3169 13.1225 34.7407 13.2179 34.008 13.2179ZM34.0195 11.936C34.3934 11.936 34.672 11.8711 34.8552 11.7414C35.0383 11.6041 35.1604 11.4019 35.2215 11.1348C35.2902 10.8677 35.3245 10.5396 35.3245 10.1505C35.3245 9.75371 35.294 9.43705 35.2329 9.20051C35.1719 8.95634 35.0689 8.78084 34.9238 8.67402C34.7865 8.55956 34.5919 8.50233 34.34 8.50233C34.2179 8.50233 34.0882 8.51759 33.9508 8.54812C33.8134 8.57101 33.6799 8.60153 33.5501 8.63968C33.428 8.6702 33.325 8.70072 33.241 8.73124V11.8902C33.3555 11.8978 33.4891 11.9093 33.6417 11.9245C33.7943 11.9322 33.9203 11.936 34.0195 11.936Z"
-            fill="#919191"
-          />
-          <path
-            d="M27.8012 13.2177C27.2059 13.2177 26.7556 13.0689 26.4504 12.7713C26.1527 12.4661 26.0039 12.0083 26.0039 11.3978C26.0039 10.9705 26.0802 10.6386 26.2329 10.4021C26.3855 10.1579 26.6106 9.9824 26.9083 9.87558C27.2136 9.76112 27.5837 9.69245 28.0187 9.66956L29.4153 9.54366V9.20029C29.4153 8.9256 29.3467 8.73484 29.2093 8.62802C29.0719 8.51356 28.8697 8.45633 28.6025 8.45633C28.3889 8.45633 28.1408 8.46396 27.8584 8.47922C27.5837 8.49448 27.309 8.51356 27.0342 8.53645C26.7671 8.55934 26.5343 8.58223 26.3359 8.60512L26.2901 7.52924C26.4885 7.48346 26.7251 7.43768 26.9999 7.3919C27.2822 7.33849 27.5761 7.29652 27.8813 7.266C28.1866 7.23548 28.469 7.22021 28.7285 7.22021C29.2169 7.22021 29.6252 7.28126 29.9534 7.40334C30.2816 7.52543 30.5296 7.72763 30.6975 8.00996C30.8654 8.28465 30.9493 8.65854 30.9493 9.13162V11.7526C30.9646 11.8595 31.0218 11.9434 31.1211 12.0044C31.2203 12.0579 31.3347 12.096 31.4645 12.1189L31.4301 13.1719C31.308 13.1719 31.1859 13.1719 31.0638 13.1719C30.9493 13.1795 30.8387 13.1795 30.7318 13.1719C30.625 13.1719 30.5296 13.1643 30.4456 13.149C30.2701 13.1261 30.1175 13.0803 29.9877 13.0117C29.8656 12.943 29.7664 12.8705 29.6901 12.7942C29.568 12.8476 29.4039 12.9086 29.1978 12.9773C28.9918 13.046 28.7666 13.1032 28.5224 13.149C28.2858 13.1948 28.0454 13.2177 27.8012 13.2177ZM28.1675 12.0846C28.3125 12.0846 28.4652 12.0693 28.6254 12.0388C28.7857 12.0083 28.9345 11.9739 29.0719 11.9358C29.2169 11.89 29.3314 11.848 29.4153 11.8099V10.4936L28.2477 10.5966C27.9958 10.6195 27.8127 10.6958 27.6982 10.8256C27.5913 10.9476 27.5379 11.1231 27.5379 11.3521C27.5379 11.581 27.5875 11.7603 27.6867 11.89C27.7936 12.0197 27.9538 12.0846 28.1675 12.0846Z"
-            fill="#919191"
-          />
-          <path
-            d="M19.9531 13.0924V5.27515H23.0669C23.5859 5.27515 24.0323 5.34 24.4063 5.46972C24.7803 5.59944 25.0703 5.80927 25.2763 6.09923C25.49 6.38155 25.5969 6.76307 25.5969 7.24378C25.5969 7.57188 25.5625 7.85039 25.4938 8.0793C25.4328 8.30058 25.3336 8.49134 25.1962 8.65158C25.0665 8.80419 24.8947 8.94535 24.681 9.07506C24.91 9.159 25.1084 9.27345 25.2763 9.41843C25.4519 9.55578 25.5854 9.74272 25.677 9.97926C25.7686 10.2082 25.8144 10.5134 25.8144 10.8949C25.8144 11.3146 25.7495 11.6656 25.6198 11.9479C25.49 12.2302 25.303 12.4553 25.0588 12.6232C24.8222 12.791 24.5437 12.9131 24.2231 12.9894C23.9026 13.0581 23.5515 13.0924 23.1699 13.0924H19.9531ZM21.5329 11.925H23.0555C23.3226 11.925 23.5439 11.8945 23.7194 11.8334C23.9026 11.7648 24.04 11.6465 24.1316 11.4786C24.2308 11.3108 24.2804 11.078 24.2804 10.7804C24.2804 10.5515 24.2422 10.3646 24.1659 10.2196C24.0896 10.0746 23.9904 9.96782 23.8683 9.89914C23.7461 9.82284 23.6088 9.76943 23.4561 9.7389C23.3111 9.70838 23.1661 9.69312 23.0211 9.69312H21.5329V11.925ZM21.5329 8.57146H23.0097C23.2692 8.57146 23.479 8.53331 23.6393 8.457C23.7996 8.37307 23.9179 8.25099 23.9942 8.09075C24.0705 7.92288 24.1087 7.71304 24.1087 7.46124C24.1087 7.10262 24.0133 6.84318 23.8225 6.68295C23.6393 6.52271 23.3493 6.44259 22.9524 6.44259H21.5329V8.57146Z"
-            fill="#919191"
-          />
-        </svg>
-      </a>
-    </footer>
-  );
-};
-
-export default PoweredBy;

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

@@ -1,149 +0,0 @@
-import { ReviewProps } from '@/lib/types'
-import { cn } from '@/lib/utils'
-import { Rating } from '@/ui/review-dialog/rating'
-import { useLocalTranslation } from '../../useLocalTranslation'
-import { useState } from 'react';
-import SolarCloseCircleLineDuotone from '~icons/solar/close-circle-line-duotone'
-import { Button } from '@/components';
-import PoweredBy from '../powered-by';
-
-const COMMENT_MAX_LENGTH = 500;
-
-interface ReviewDialogProps {
-    handleSubmit: ({ rating }: ReviewProps) => void;
-    onClose: () => void;
-    isSubmitting?: boolean;
-}
-
-const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
-    const { t } = useLocalTranslation()
-    const [rating, setRating] = useState<number>(0)
-    const [comment, setComment] = useState<string>('');
-    const [error, setError] = useState<{ comment?: string; rating?: string }>({})
-
-    const hasRating = rating >= 1 && rating <= 5;
-    const isRatingValid = rating >= 1 && rating <= 5
-
-    const validateAndSubmit = () => {
-        const newError: typeof error = {}
-        const trimmedComment = comment.trim()
-
-        if (!isRatingValid) {
-            newError.rating = t('homeSdk.ReviewDialog.rating_error') || 'Rating must be between 1 and 5.'
-        }
-
-        if (trimmedComment.length > COMMENT_MAX_LENGTH) {
-            newError.comment = t('homeSdk.ReviewDialog.comment_error') || 'The field Comment must be a string with a maximum length of 500.'
-        }
-
-        if (Object.keys(newError).length > 0) {
-            setError(newError)
-            return
-        }
-
-        setError({})
-        props.handleSubmit({ rating, comment: trimmedComment })
-    }
-
-    const handleRatingChange = (val: number) => {
-        setRating(val)
-        if (error.rating && val >= 1 && val <= 5) {
-            setError((prev) => ({ ...prev, rating: undefined }))
-        }
-    }
-
-    const handleCommentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        const value = e.target.value
-        setComment(value)
-        if (error.comment && value.length <= COMMENT_MAX_LENGTH) {
-            setError((prev) => ({ ...prev, comment: undefined }))
-        }
-    }
-
-    return (
-        <section className="babylai:absolute babylai:inset-0 babylai:z-50 babylai:flex babylai:items-end babylai:rounded-3xl babylai:overflow-hidden">
-            <div className='babylai:absolute babylai:inset-0 babylai:bg-black/60' onClick={props.onClose}></div>
-            <div className='babylai:flex babylai:flex-col babylai:bg-card babylai:rounded-2xl babylai:w-full babylai:z-50 babylai:shadow-lg'>
-                <div className='babylai:flex babylai:flex-col babylai:p-6 babylai:pb-5 babylai:w-full'>
-                    <button className="babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground"
-                        type='button'
-                        onClick={props.onClose}
-                    >
-                        <SolarCloseCircleLineDuotone className="babylai:w-7 babylai:h-7" />
-                    </button>
-
-                    <section className='babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6'>
-                        <Rating value={rating} onChange={handleRatingChange} size='lg' />
-                    </section>
-
-                    <h2 className="babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground">{t('homeSdk.ReviewDialog.title')}</h2>
-
-                    <p className="babylai:text-xs babylai:text-center babylai:text-muted-foreground babylai:mb-4 babylai:leading-snug">
-                        {t('homeSdk.ReviewDialog.description')}
-                    </p>
-
-                    {hasRating && (
-                        <div className='babylai:flex babylai:flex-col babylai:gap-6 babylai:mt-6'>
-                            <p className="babylai:text-sm babylai:text-card-foreground babylai:leading-snug">{t('homeSdk.InChatReview.follow_up')}</p>
-
-                            <div className='babylai:flex babylai:flex-col babylai:gap-2'>
-                                <textarea
-                                    className={cn(
-                                        "babylai:resize-none babylai:w-full babylai:bg-secondary babylai:border babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:resize-vertical babylai:min-h-20 babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed babylai:disabled:bg-secondary",
-                                        error.comment ? "babylai:border-destructive" : "babylai:border-black-white-200"
-                                    )}
-                                    rows={4}
-                                    maxLength={COMMENT_MAX_LENGTH}
-                                    placeholder={t('homeSdk.InChatReview.note_placeholder')}
-                                    value={comment}
-                                    onChange={handleCommentChange}
-                                    aria-label={t('homeSdk.InChatReview.note_placeholder')}
-                                    aria-invalid={!!error.comment}
-                                    aria-describedby={error.comment ? 'review-comment-error' : undefined}
-                                />
-                                {error.comment && (
-                                    <p id="review-comment-error" className="babylai:text-sm babylai:text-destructive" role="alert">
-                                        {error.comment}
-                                    </p>
-                                )}
-                                <p className="babylai:text-xs babylai:text-muted-foreground">
-                                    {comment.length}/{COMMENT_MAX_LENGTH}
-                                </p>
-                            </div>
-                        </div>
-                    )}
-
-                    <footer className="babylai:flex babylai:justify-between babylai:gap-3 babylai:mt-6">
-                        <Button
-                            onClick={props.onClose}
-                            variant='secondary'
-                            disabled={props.isSubmitting}
-                        >
-                            {t('homeSdk.ReviewDialog.skip_button')}
-                        </Button>
-                        <Button
-                            onClick={validateAndSubmit}
-                            variant='default'
-                            disabled={props.isSubmitting || !hasRating}
-                        >
-                            {props.isSubmitting ? (
-                                <span className="babylai:inline-flex babylai:items-center babylai:gap-2">
-                                    <span
-                                        className="babylai:inline-block babylai:animate-spin babylai:rounded-full babylai:h-4 babylai:w-4 babylai:border-2 babylai:border-white babylai:border-t-transparent babylai:box-border"
-                                        aria-hidden
-                                    />
-                                    {t('homeSdk.ReviewDialog.submit_button')}
-                                </span>
-                            ) : (
-                                t('homeSdk.ReviewDialog.submit_button')
-                            )}
-                        </Button>
-                    </footer>
-                </div>
-                <PoweredBy />
-            </div>
-        </section>
-    )
-}
-
-export default ReviewDialog

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

@@ -1,79 +0,0 @@
-import { cn } from '@/lib'
-import { IconHeart as Heart, IconThumbUp as ThumbsUp } from '@tabler/icons-react'
-import SolarStarBold from '~icons/solar/star-bold'
-import * as React from 'react'
-
-export interface RatingProps {
-  value: number
-  onChange?: (value: number) => void
-  max?: number
-  icon?: 'star' | 'heart' | 'thumbsUp'
-  size?: 'sm' | 'md' | 'lg'
-  readOnly?: boolean
-  className?: string
-  style?: React.CSSProperties
-}
-
-const iconMap = {
-  star: SolarStarBold,
-  heart: Heart,
-  thumbsUp: ThumbsUp
-}
-
-const sizeMap = {
-  sm: 'babylai:w-4 babylai:h-4',
-  md: 'babylai:w-7 babylai:h-7',
-  lg: 'babylai:w-13 babylai:h-13'
-}
-
-export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
-  ({ value, onChange, max = 5, icon = 'star', size = 'md', readOnly = false, className, ...props }, ref) => {
-    const [hoverValue, setHoverValue] = React.useState<number | null>(null)
-    const Icon = iconMap[icon]
-
-    const handleMouseEnter = (index: number) => {
-      if (!readOnly) {
-        setHoverValue(index)
-      }
-    }
-
-    const handleMouseLeave = () => {
-      setHoverValue(null)
-    }
-
-    const handleClick = (index: number) => {
-      if (!readOnly && onChange) {
-        onChange(index)
-      }
-    }
-
-    return (
-      <div ref={ref} className={cn('babylai:inline-flex babylai:gap-2', className)} {...props}>
-        {[...Array(max)].map((_, index) => {
-          const filled = (hoverValue !== null ? hoverValue : value) > index
-
-          return (
-            <Icon
-              key={index}
-              className={cn(
-                sizeMap[size],
-                'babylai:cursor-pointer babylai:transition-colors',
-                filled ? 'babylai:text-[#F49E00] babylai:fill-[#F49E00]' : 'babylai:text-gray-300',
-                readOnly && 'babylai:cursor-default'
-              )}
-              onMouseEnter={() => handleMouseEnter(index + 1)}
-              onMouseLeave={handleMouseLeave}
-              onClick={() => handleClick(index + 1)}
-              aria-hidden={readOnly}
-              role={readOnly ? undefined : 'button'}
-              tabIndex={readOnly ? -1 : 0}
-              aria-label={`Rate ${index + 1} out of ${max}`}
-            />
-          )
-        })}
-      </div>
-    )
-  }
-)
-
-Rating.displayName = 'Rating'

package/src/useLocalTranslation.ts

@@ -1,15 +0,0 @@
-import { useMemo } from "react";
-import { createHelpCenterI18n, defaultLanguage } from "@/i18n";
-import { useLanguage } from "@/lib/LanguageContext";
-
-export const useLocalTranslation = () => {
-  // Get language from context, fallback to default if not available
-  const context = useLanguage();
-  const language = context?.language || defaultLanguage;
-
-  const i18n = useMemo(() => createHelpCenterI18n(language), [language]);
-  const t = (key: string) => i18n.t(key);
-  const dir = i18n.dir();
-
-  return { t, dir, i18n };
-};