@aslaluroba/help-center-react 3.2.17 → 3.2.18

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

@@ -1,32 +0,0 @@
-import React from 'react';
-
-interface HelpscreenIntroProps {
-  title?: string | null;
-}
-
-const HelpscreenIntro: React.FC<HelpscreenIntroProps> = ({ title }) => {
-  return (
-    <section className="babylai:flex babylai:items-center babylai:justify-center babylai:gap-3 babylai:pb-5 babylai:border-b babylai:border-black-white-200">
-      <svg
-        className="babylai:w-8 babylai:h-8"
-        style={{ color: 'var(--babylai-color-primary)' }}
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 34 34"
-        fill="currentColor"
-      >
-        <path
-          d="M18.4785 1.12896C18.4758 1.11935 18.4745 1.11454 18.4739 1.11232C18.0509 -0.370772 15.9491 -0.370772 15.5261 1.11232C15.5255 1.11454 15.5242 1.11935 15.5215 1.12896C15.5143 1.15428 15.5107 1.16694 15.5074 1.17883C13.5422 8.11839 8.11839 13.5422 1.17883 15.5074C1.16694 15.5107 1.15428 15.5143 1.12895 15.5215C1.11934 15.5242 1.11454 15.5255 1.11232 15.5261C-0.370773 15.9491 -0.370773 18.0509 1.11232 18.4739C1.11454 18.4745 1.11934 18.4758 1.12896 18.4785C1.15428 18.4857 1.16694 18.4893 1.17883 18.4926C8.11839 20.4578 13.5422 25.8816 15.5074 32.8212C15.5107 32.8331 15.5143 32.8457 15.5215 32.871C15.5242 32.8807 15.5255 32.8855 15.5261 32.8877C15.9491 34.3708 18.0509 34.3708 18.4739 32.8877C18.4745 32.8855 18.4758 32.8807 18.4785 32.871C18.4857 32.8457 18.4893 32.8331 18.4926 32.8212C20.4578 25.8816 25.8816 20.4578 32.8212 18.4926C32.8331 18.4893 32.8457 18.4857 32.871 18.4785C32.8807 18.4758 32.8855 18.4745 32.8877 18.4739C34.3708 18.0509 34.3708 15.9491 32.8877 15.5261C32.8855 15.5255 32.8807 15.5242 32.871 15.5215C32.8457 15.5143 32.8331 15.5107 32.8212 15.5074C25.8816 13.5422 20.4578 8.11839 18.4926 1.17883C18.4893 1.16694 18.4857 1.15428 18.4785 1.12896Z"
-          fill="currentColor"
-        />
-      </svg>
-      <h1 className="babylai:text-2xl! babylai:font-semibold! babylai:text-card-foreground">
-        {title}
-      </h1>
-    </section>
-  );
-};
-
-HelpscreenIntro.displayName = 'HelpscreenIntro';
-
-export default HelpscreenIntro;
-

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

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Option } from '@/lib/types';
-import HelpscreenOption from '@/ui/chatbot-popup/options-list-screen/helpscreen-option';
-import { useLocalTranslation } from '@/useLocalTranslation';
-import { Button } from '@/components';
-import SolarPlain2BoldDuotone from '~icons/solar/plain-2-bold-duotone'
-
-interface HelpscreenListProps {
-  options: Option[] | undefined;
-  selectedOption: Option | null;
-  onToggleOption: (option: Option) => void;
-  onStartChat: () => void;
-  showChatNowButton?: boolean;
-  chatWithUs?: boolean;
-}
-
-const HelpscreenList: React.FC<HelpscreenListProps> = ({
-  options,
-  selectedOption,
-  onToggleOption,
-  onStartChat,
-  showChatNowButton = true,
-  chatWithUs = true,
-}) => {
-  const { t } = useLocalTranslation();
-
-  return (
-    <section className='babylai:flex babylai:flex-col babylai:flex-1 babylai:gap-4'>
-      <div className='babylai:grid babylai:grid-cols-1 babylai:gap-4'>
-        {options?.map((option) => (
-          <HelpscreenOption
-            key={option.id}
-            option={option}
-            isSelected={selectedOption?.id === option.id}
-            onClick={() => onToggleOption(option)}
-          />
-        ))}
-      </div>
-      {showChatNowButton && (
-        <div className="babylai:sticky babylai:bottom-0 babylai:z-10">
-          <Button
-            variant='default'
-            onClick={onStartChat}
-            disabled={!selectedOption || !chatWithUs}
-          >
-            {t('homeSdk.chatNow')}
-            <SolarPlain2BoldDuotone className="babylai:w-6 babylai:h-6" />
-          </Button>
-        </div>
-      )}
-    </section>
-  );
-};
-
-HelpscreenList.displayName = 'HelpscreenList';
-
-export default HelpscreenList;

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import { Option } from '@/lib/types';
-import { cn } from '@/lib/utils';
-
-interface HelpscreenOptionProps {
-  option: Option;
-  isSelected: boolean;
-  onClick: () => void;
-}
-
-const HelpscreenOption: React.FC<HelpscreenOptionProps> = ({
-  option,
-  isSelected,
-  onClick,
-}) => {
-  const chatWithUs = option.chatWithUs ?? true;
-
-  return (
-    <div
-      role={chatWithUs ? 'button' : undefined}
-      tabIndex={chatWithUs ? 0 : undefined}
-      className={cn(
-        'babylai:flex babylai:flex-col babylai:gap-2 babylai:p-6 babylai:rounded-3xl babylai:text-start babylai:border babylai:border-black-white-200 babylai:bg-card',
-        'babylai:transition-all babylai:duration-200 babylai:ease-out',
-        chatWithUs
-          ? 'babylai:cursor-pointer babylai:active:scale-[0.98] babylai:active:opacity-95'
-          : 'babylai:cursor-default',
-        isSelected && 'babylai:ring babylai:ring-primary-500 babylai:shadow-md'
-      )}
-      onClick={chatWithUs ? onClick : undefined}
-      onKeyDown={
-        chatWithUs
-          ? (e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onClick();
-              }
-            }
-          : undefined
-      }
-    >
-      <h2 className="babylai:text-base! babylai:font-semibold! babylai:text-card-foreground" dir="auto">
-        {option.title}
-      </h2>
-      {option.paragraphs.map((paragraph, index) => (
-        <p key={index} className="babylai:text-sm babylai:text-muted-foreground babylai:leading-snug" dir="auto">
-          {paragraph}
-        </p>
-      ))}
-    </div>
-  );
-};
-
-HelpscreenOption.displayName = 'HelpscreenOption';
-
-export default HelpscreenOption;

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

@@ -1,70 +0,0 @@
-import { HelpScreenData, Option } from '@/lib/types';
-import OptionsListHeader from '@/ui/chatbot-popup/options-list-screen/header';
-import CompanyCard from '@/ui/chatbot-popup/options-list-screen/company-card';
-import HelpscreenIntro from '@/ui/chatbot-popup/options-list-screen/helpscreen-intro';
-import HelpscreenList from '@/ui/chatbot-popup/options-list-screen/helpscreen-list';
-import PoweredBy from '@/ui/powered-by';
-import { useState, useEffect } from 'react';
-
-interface OptionsListScreenProps {
-  helpScreen: HelpScreenData | null;
-  handleStartChat: (option: Option) => void;
-  handleMinimize: () => void;
-  hasActiveSession?: boolean;
-}
-
-const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
-  helpScreen,
-  handleStartChat,
-  handleMinimize,
-  hasActiveSession = false,
-}) => {
-  const [selectedOption, setSelectedOption] = useState<Option | null>(null);
-
-  useEffect(() => {
-    // Reset selected option when helpScreen changes
-    setSelectedOption(null);
-  }, [helpScreen?.id]);
-
-  const handleToggleExpandOption = (option: Option) => {
-    if (selectedOption?.id === option.id) {
-      setSelectedOption(null);
-    } else {
-      setSelectedOption(option);
-    }
-  };
-
-  const handleStartChatWithSelected = () => {
-    if (selectedOption) {
-      handleStartChat(selectedOption);
-    }
-  };
-
-  return (
-    <div className='babylai:flex babylai:flex-col babylai:max-h-full'>
-      <OptionsListHeader onMinimize={handleMinimize} />
-      <div className='babylai:flex babylai:flex-col babylai:flex-1 babylai:overflow-y-auto babylai:px-6 babylai:pt-6 babylai:pb-4 babylai:gap-6'>
-        <HelpscreenIntro title={helpScreen?.title} />
-
-        <CompanyCard
-          logoUrl={helpScreen?.tenant?.logoUrl}
-          name={helpScreen?.tenant?.name}
-          description={helpScreen?.tenant?.settings?.description}
-          title={helpScreen?.title}
-        />
-
-        <HelpscreenList
-          options={helpScreen?.options}
-          selectedOption={selectedOption}
-          onToggleOption={handleToggleExpandOption}
-          onStartChat={handleStartChatWithSelected}
-          showChatNowButton={!hasActiveSession}
-          chatWithUs={helpScreen?.chatWithUs ?? true}
-        />
-      </div >
-      <PoweredBy />
-    </div >
-  );
-};
-
-export default OptionsListScreen;

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

@@ -1,62 +0,0 @@
-import { Button } from "@/components";
-import { useLocalTranslation } from "@/useLocalTranslation";
-import SolarChatRoundUnreadBoldDuotone from '~icons/solar/chat-round-unread-bold-duotone'
-import SolarCloseCircleLineDuotone from '~icons/solar/close-circle-line-duotone'
-import SolarPlain2BoldDuotone from '~icons/solar/plain-2-bold-duotone'
-import PoweredBy from "../powered-by";
-
-interface ConfirmationModalProps {
-    title: string;
-    message: string;
-    onCancel: () => void;
-    onConfirm: () => void;
-}
-
-const ConfirmationModal = ({ title, message, onCancel, onConfirm }: ConfirmationModalProps) => {
-    const { t } = useLocalTranslation();
-
-    return (
-        <div 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={onCancel}></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={onCancel}
-                    >
-                        <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">
-                        <div className="babylai:flex babylai:items-center babylai:justify-center babylai:w-20 babylai:h-20 babylai:rounded-full babylai:p-3 babylai:bg-primary/15 babylai:text-primary">
-                            <SolarChatRoundUnreadBoldDuotone className="babylai:w-16 babylai:h-16" />
-                        </div>
-                    </section>
-
-                    <h3 className='babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground'>{title}</h3>
-
-                    <p className='babylai:text-sm babylai:text-center babylai:text-muted-foreground'>{message}</p>
-
-                    <div className='babylai:flex babylai:justify-between babylai:gap-3 babylai:mt-6'>
-                        <Button
-                            onClick={onCancel}
-                            variant='secondary'
-                        >
-                            {t('homeSdk.ConfirmationModal.cancel_button')}
-                            <SolarPlain2BoldDuotone className="babylai:w-6 babylai:h-6" />
-                        </Button>
-                        <Button
-                            onClick={onConfirm}
-                            variant='default'
-                        >
-                            {t('homeSdk.ConfirmationModal.confirmation_button')}
-                        </Button>
-                    </div>
-                </div>
-                <PoweredBy />
-            </div>
-        </div>
-    );
-};
-
-export default ConfirmationModal;

package/src/ui/floating-message.tsx

@@ -1,29 +0,0 @@
-import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'
-
-interface FloatingMessageProps {
-  message: string
-  onClose: () => void
-}
-
-const FloatingMessage = ({ message, onClose }: FloatingMessageProps) => {
-  return (
-    <div
-      className=" 
-    babylai:fixed babylai:bottom-16 babylai:right-4
-    babylai:z-50 babylai:flex babylai:flex-col babylai:items-end babylai:animate-[float_2s_infinite_ease-in-out]"
-    >
-      <div className="babylai:bg-primary-500 babylai:text-white babylai:py-3 babylai:px-4 babylai:rounded-3xl babylai:shadow-lg babylai:mb-4 babylai:max-w-[200px] babylai:relative after:babylai:content-[''] after:babylai:absolute after:babylai:-bottom-[10px] after:babylai:right-5 after:babylai:w-0 after:babylai:h-0 after:babylai:border-l-[10px] after:babylai:border-r-[10px] after:babylai:border-t-[10px] after:babylai:border-l-transparent after:babylai:border-r-transparent after:babylai:border-t-primary-500">
-        <p className="babylai:text-xs babylai:font-bold babylai:m-0">{message}</p>
-        <button
-          className="babylai:absolute babylai:-top-2 babylai:-right-2 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-white-700 babylai:p-[3px] babylai:hover:bg-primary-400 babylai:hover:text-white babylai:shadow-md"
-          onClick={onClose}
-        >
-          <MaterialSymbolsCloseSmallOutlineRounded className="babylai:w-8 babylai:h-8" />
-          <span className="babylai:sr-only">Close</span>
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default FloatingMessage;

package/src/ui/help-button.tsx

@@ -1,25 +0,0 @@
-import Logo from '@/assets/logo.svg'
-
-interface HelpButtonProps {
-  onClick: () => void
-}
-
-const HelpButton = ({ onClick }: HelpButtonProps) => {
-
-  return (
-    <button
-      className="
-      babylai:fixed babylai:z-50 babylai:bottom-4 babylai:right-4
-    babylai:p-4 
-    babylai:rounded-full babylai:bg-primary-500 babylai:flex babylai:items-center 
-    babylai:justify-center babylai:border-[0.5px] babylai:border-black-white-50 "
-      onClick={onClick}
-      aria-label="Need Help?"
-    >
-      <Logo className="babylai:w-8 babylai:h-8 babylai:text-primary-500" />
-      <span className="babylai:sr-only">Need Help?</span>
-    </button>
-  )
-}
-
-export default HelpButton;