@aslaluroba/help-center-react 3.2.4 → 3.2.6

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

@@ -1,28 +1,17 @@
-import Header from '@/components/ui/header'
-import { cn } from '@/lib'
 import animatedLogo from '../../../assets/animatedLogo.gif'
+import Header from '../options-list-screen/header'
 
 interface ChatBotLoadingScreenProps {
-  isShowList: boolean
   onClose: () => void
-  logoUrl?: string
 }
 
 const ChatBotLoadingScreen: React.FC<ChatBotLoadingScreenProps> = (props) => {
   return (
-    <div className="babylai-w-full babylai-h-full babylai-bg-black-white-50 dark:babylai-bg-storm-dust-950 babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col">
-      <div
-        className={cn(
-          'babylai-rounded-3xl babylai-h-full babylai-flex babylai-flex-col babylai-py-6 md:babylai-py-8 babylai-px-6 babylai-gap-4 md:babylai-gap-8',
-          {
-            'babylai-bg-linear-to-b': !props.isShowList,
-            'babylai-bg-black-white-100 dark:babylai-bg-storm-dust-950': props.isShowList
-          }
-        )}
-      >
-        <Header onClose={props.onClose} logoUrl={props.logoUrl} />
-        <div className="babylai-flex babylai-flex-col babylai-items-center babylai-justify-center babylai-w-full babylai-h-full babylai-py-16 md:babylai-py-28">
-          <img src={animatedLogo} alt="Animated Logo" className="babylai-w-20 babylai-h-20" />
+    <div className="babylai:w-full babylai:h-full babylai:bg-secondary babylai:rounded-3xl babylai:shadow-lg babylai:flex babylai:flex-col">
+      <div className="babylai:rounded-3xl babylai:h-full babylai:flex babylai:flex-col babylai:gap-4">
+        <Header onMinimize={props.onClose} />
+        <div className="babylai:flex babylai:flex-col babylai:items-center babylai:justify-center babylai:w-full babylai:h-full babylai:py-16 babylai:md:py-28">
+          <img src={animatedLogo} alt="Animated Logo" className="babylai:w-20 babylai:h-20" />
         </div>
       </div>
     </div>

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface CompanyCardProps {
+  logoUrl?: string;
+  name?: string;
+  description?: string;
+  title?: string;
+}
+
+const CompanyCard: React.FC<CompanyCardProps> = ({
+  logoUrl,
+  name,
+  description,
+  title,
+}) => {
+  return (
+    <section className='babylai:border-b babylai:border-black-white-200'>
+      <div className="babylai:flex babylai:items-center babylai:gap-3 babylai:p-6 babylai:mb-6 babylai:rounded-3xl babylai:border babylai:border-black-white-200 babylai:bg-card">
+        <div className="babylai:shrink-0 babylai:w-12 babylai:h-12 babylai:rounded-md babylai:overflow-hidden">
+          <img
+            src={logoUrl}
+            alt={title ? `${title} logo` : 'Company logo'}
+            className="babylai:w-full babylai:h-full babylai:object-contain"
+          />
+        </div>
+        <div className="babylai:flex-1 babylai:min-w-0 babylai:text-start">
+          <h3 className="babylai:text-lg babylai:font-semibold babylai:mb-1 babylai:text-card-foreground" dir="auto">{name}</h3>
+          <p className="babylai:text-sm babylai:text-muted-foreground" dir="auto">{description}</p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+CompanyCard.displayName = 'CompanyCard';
+
+export default CompanyCard;

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

@@ -1,42 +1,23 @@
-import { Button } from '@/components';
-import ArrowRight from './../../../assets/icons/arrowRight.svg';
-import ThinkingLogo from '@/assets/thinking-logo.svg';
-import { useLocalTranslation } from '../../../useLocalTranslation';
-import CloseCircle from '../../../assets/icons/closeCirclePrimary.svg';
+import ActionButton from '../chat-window-screen/action-button';
+import IcRoundMinus from '~icons/ic/round-minus'
 
 interface OptionsListHeaderProps {
-  handleBack: () => void;
-  showHelpScreen: boolean;
+  onMinimize: () => void;
 }
 
 const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({
-  handleBack,
-  showHelpScreen,
+  onMinimize,
 }) => {
-  const { dir } = useLocalTranslation();
-  const isRTL = String(dir) === "rtl";
 
   return (
-    <header
-      className={`babylai-flex babylai-w-full babylai-items-center babylai-mb-2 ${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"
-        onClick={handleBack}
-      >
-        {showHelpScreen ? (
-          <ArrowRight
-            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 babylai-text-primary-500" />
-        )}
-      </Button>
-      <ThinkingLogo className="babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-end-1 babylai-overflow-hidden" />
-    </header>
+    <header className="bg-header babylai:flex babylai:items-center babylai:justify-end babylai:p-6 babylai:border-b babylai:border-black-white-200">
+      <ActionButton
+          onClick={onMinimize}
+          icon={<IcRoundMinus />}
+          ariaLabel="Minimize"
+        />
+    </header >
   );
 };
+
 export default OptionsListHeader;

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Option } from '@/lib/types';
+import HelpscreenOption from '@/ui/chatbot-popup/options-list-screen/helpscreen-option';
+import { useLocalTranslation } from '@/useLocalTranslation';
+
+interface HelpscreenListProps {
+  options: Option[] | undefined;
+  selectedOption: Option | null;
+  onToggleOption: (option: Option) => void;
+  onStartChat: () => void;
+}
+
+const HelpscreenList: React.FC<HelpscreenListProps> = ({
+  options,
+  selectedOption,
+  onToggleOption,
+  onStartChat,
+}) => {
+  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>
+      <div className="babylai:sticky babylai:bottom-0 babylai:z-10">
+        <button
+          className="babylai:bg-primary babylai:border babylai:border-primary babylai:cursor-pointer babylai:disabled:bg-black-white-300 babylai:disabled:border-black-white-300 babylai:disabled:cursor-not-allowed babylai:disabled:text-white babylai:duration-200 babylai:ease-out babylai:flex babylai:gap-1 babylai:items-center babylai:justify-center babylai:p-3 babylai:relative babylai:rounded-2xl babylai:text-white babylai:text-xl babylai:transition-all babylai:w-full"
+          onClick={onStartChat}
+          disabled={!selectedOption}
+        >
+          {t('homeSdk.chatNow')}
+        </button>
+      </div>
+    </section>
+  );
+};
+
+HelpscreenList.displayName = 'HelpscreenList';
+
+export default HelpscreenList;

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

@@ -0,0 +1,38 @@
+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,
+}) => {
+  return (
+    <div
+      className={cn(
+        'babylai:flex babylai:flex-col babylai:p-6 babylai:rounded-3xl babylai:text-start babylai:border babylai:border-black-white-200 babylai:bg-card babylai:cursor-pointer',
+        isSelected && 'babylai:ring babylai:ring-primary-500 babylai:shadow-md'
+      )}
+      onClick={onClick}
+    >
+      <h2 className="babylai:text-base babylai:font-semibold babylai:mb-2 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" dir="auto">
+          {paragraph}
+        </p>
+      ))}
+    </div>
+  );
+};
+
+HelpscreenOption.displayName = 'HelpscreenOption';
+
+export default HelpscreenOption;

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

@@ -1,59 +1,65 @@
-import { Card } from '@/components';
 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 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;
-  expandedOption: Option | null;
-  setExpandedOption: (option: Option | null) => void;
   handleStartChat: (option: Option) => void;
-  handleBack: () => void;
-  showHelpScreen: boolean;
+  handleMinimize: () => void;
 }
 
 const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
   helpScreen,
-  expandedOption,
-  setExpandedOption,
   handleStartChat,
-  handleBack,
-  showHelpScreen,
+  handleMinimize,
 }) => {
+  const [selectedOption, setSelectedOption] = useState<Option | null>(null);
+
+  useEffect(() => {
+    // Reset selected option when helpScreen changes
+    setSelectedOption(null);
+  }, [helpScreen?.id]);
+
   const handleToggleExpandOption = (option: Option) => {
-    if (expandedOption?.id === option.id) {
-      setExpandedOption(null);
+    if (selectedOption?.id === option.id) {
+      setSelectedOption(null);
     } else {
-      setExpandedOption(option);
+      setSelectedOption(option);
+    }
+  };
+
+  const handleStartChatWithSelected = () => {
+    if (selectedOption) {
+      handleStartChat(selectedOption);
     }
   };
 
   return (
-    <div className='babylai-px-8 babylai-pb-12 babylai-pt-8 babylai-overflow-y-auto babylai-h-full'>
-      <OptionsListHeader handleBack={handleBack} showHelpScreen={showHelpScreen} />
-
-      <h1 className='babylai-text-4xl babylai-font-bold babylai-mb-4 babylai-text-black-white-800 dark:babylai-text-white babylai-mt-0'>
-        {helpScreen?.title}
-      </h1>
-
-      {helpScreen && (
-        <div className='babylai-flex babylai-flex-col babylai-gap-3 babylai-mt-3 babylai-mb-3'>
-          {helpScreen?.options?.map((option) => (
-            <Card
-              key={option.id}
-              variant='rounded'
-              className='babylai-cursor-pointer babylai-transition-all hover:babylai-shadow-md !babylai-px-2 !babylai-py-1 dark:!babylai-bg-storm-dust-900'
-              onClick={() => handleToggleExpandOption(option)}
-            >
-              <OptionCard title={option.title} />
-
-              {expandedOption?.id === option.id && <ExpandedOption option={option} handleStartChat={handleStartChat} />}
-            </Card>
-          ))}
-        </div>
-      )}
-    </div>
+    <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}
+        />
+      </div >
+      <PoweredBy />
+    </div >
   );
 };
 

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

@@ -1,5 +1,8 @@
 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'
 
 interface ConfirmationModalProps {
     title: string;
@@ -12,27 +15,39 @@ const ConfirmationModal = ({ title, message, onCancel, onConfirm }: Confirmation
     const { t } = useLocalTranslation();
 
     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 dark:babylai-bg-storm-dust-900 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-text-sm babylai-mb-2 babylai-text-center babylai-mt-0 dark:babylai-text-white'>{title}</h3>
-                <p className='babylai-text-black-white-700 babylai-text-xs babylai-mb-4 dark:babylai-text-white babylai-mt-0'>{message}</p>
-                <div className='babylai-flex babylai-justify-end babylai-gap-2 babylai-w-full'>
+        <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:p-6 babylai:pb-5 babylai:w-full babylai:z-50 babylai:shadow-lg'>
+                <button className="babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground"
+                    type='button'
+                    onClick={onCancel}
+                >
+                    <SolarCloseCircleLineDuotone className="babylai:w-6 babylai:h-6" />
+                </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
-                        variant='default'
-                        size='sm'
                         onClick={onConfirm}
-                        className='babylai-text-sm babylai-w-full !babylai-font-bold'
+                        variant='secondary'
                     >
                         {t('homeSdk.ConfirmationModal.confirmation_button')}
                     </Button>
                     <Button
-                        variant='outline'
-                        size='sm'
                         onClick={onCancel}
-                        className='babylai-text-sm babylai-w-full babylai-text-primary-500 !babylai-font-bold'
+                        variant='default'
                     >
                         {t('homeSdk.ConfirmationModal.cancel_button')}
+                        <SolarPlain2BoldDuotone className="babylai:w-6 babylai:h-6" />
                     </Button>
                 </div>
             </div>

package/src/ui/floating-message.tsx

@@ -1,4 +1,5 @@
-import CloseIcon from '@/assets/icons/close.svg'
+import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'
+
 interface FloatingMessageProps {
   message: string
   onClose: () => void
@@ -8,16 +9,16 @@ const FloatingMessage = ({ message, onClose }: FloatingMessageProps) => {
   return (
     <div
       className=" 
-    babylai-fixed babylai-bottom-[6rem] babylai-right-4
-    babylai-z-50 babylai-flex babylai-flex-col babylai-items-end babylai-animate-[float_2s_infinite_ease-in-out]"
+    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>
+      <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] hover:babylai-bg-primary-400 babylai-hover:text-white babylai-shadow-md"
+          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}
         >
-          <CloseIcon className="babylai-w-8 babylai-h-8" />
+          <MaterialSymbolsCloseSmallOutlineRounded className="babylai:w-8 babylai:h-8" />
         </button>
       </div>
     </div>

package/src/ui/help-button.tsx

@@ -9,14 +9,14 @@ const HelpButton = ({ onClick }: HelpButtonProps) => {
   return (
     <button
       className="
-      babylai-fixed babylai-z-50 babylai-bottom-4 babylai-right-4
-    babylai-w-[80px] babylai-h-[80px]
-    babylai-rounded-full babylai-bg-primary-500 babylai-flex babylai-items-center 
-    babylai-justify-center babylai-border-[0.5px] babylai-border-black-white-50 "
+      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-[60%] babylai-h-[60%] babylai-text-primary-500" />
+      <Logo className="babylai:w-8 babylai:h-8 babylai:text-primary-500" />
     </button>
   )
 }