@aslaluroba/help-center-react 1.0.1

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/locales/ar.json

@@ -0,0 +1,13 @@
+{  "homeSdk": {
+    "chatTitle": "تحدث مع",
+    "tryBabylAi": "جرّب Babyl AI مجانًا 🎉",
+    "contactSdk": "تواصل معنا، دعنا نتحدث!",
+    "welcomeMessage": "مرحبًا! 👋 أنا Babyl AI، هنا لمساعدتك.",
+    "chatNow": "ابدأ المحادثة",
+    "getstarted": "للبدء",
+    "pickTopic": "اختر موضوعًا",
+    "endChat": "إنهاء المحادثة",
+    "needAssistance": "هل تحتاج مساعدة؟ لاتردد في اخباري اضغط هنا",
+    "placeholder": "اكتب سؤالك هنا"
+  }
+}

package/src/locales/en.json

@@ -0,0 +1,15 @@
+{  
+  "homeSdk": {
+    "chatTitle": "Chat with",
+    "tryBabylAi": "Try Babyl AI for Free 🎉",
+    "contactSdk": "Contact us, Let's Talk!",
+    "welcomeMessage": "Hey there! 👋 I'm Babyl AI, here to assist you.",
+  "chatNow": "Chat Now",
+  "getstarted":"Get Started",
+  "pickTopic": "Pick a Topic to",
+  "endChat": "End Chat",
+  "needAssistance": "Need assistance Or You want to try the Product? Click here",
+  "placeholder":"write your message here..."
+
+  }
+}

package/src/styles/tailwind.css

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

package/src/types/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import React from 'react'
+  const SVG: React.FC<React.SVGProps<SVGSVGElement>>
+  export default SVG
+}

package/src/types.d.ts

@@ -0,0 +1,9 @@
+declare module '*.css' {
+  const content: { [className: string]: string }
+  export default content
+}
+
+declare module '*.gif' {
+  const src: string
+  export default src
+}

package/src/ui/chatbot-popup/chat-window-screen/footer.tsx

@@ -0,0 +1,42 @@
+import { Button } from '@/components';
+import React from 'react';
+import EnvelopeIcon from './../../../assets/icons/envelope.svg';
+import { useLocalTranslation  } from '../../../useLocalTranslation'
+
+interface ChatWindowFooterProps {
+    inputMessage: string;
+    setInputMessage: (e: string) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    handleSendMessage: () => void;
+}
+
+const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
+const { t , i18n} = useLocalTranslation();
+const isRTL = i18n.dir() === 'rtl';
+    return (
+        <footer className="babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white babylai-m-4 md:babylai-m-6 md:babylai-py-3 md:babylai-px-4">
+            <input
+                type="text"
+                value={props.inputMessage}
+                onChange={(e) => props.setInputMessage(e.target.value)}
+                onKeyDown={props.handleKeyDown}
+                placeholder={t('homeSdk.placeholder')}
+                className="babylai-flex-1 babylai-py-2 babylai-px-4 babylai-bg-transparent babylai-outline-none babylai-text-sm"
+            />
+            <Button
+                variant="default"
+                size="icon"
+                onClick={props.handleSendMessage}
+                className="babylai-rounded-full babylai-bg-purple-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8"
+            >
+                <EnvelopeIcon
+  className={`babylai-w-4 babylai-h-4 ${
+    isRTL ? 'babylai-rotate-270' : ''
+  }`}
+/>
+            </Button>
+        </footer>
+    )
+}
+
+export default ChatWindowFooter

package/src/ui/chatbot-popup/chat-window-screen/header.tsx

@@ -0,0 +1,64 @@
+import Logo from '../../../assets/logo_ai.svg'
+import { Button } from '@/components';
+import React, { useState } from 'react';
+import ArrowRight from './../../../assets/icons/arrowRight.svg';
+import ThreeDots from './../../../assets/icons/threeDots.svg';
+import { useLocalTranslation } from '../../../useLocalTranslation'
+
+interface ChatWindowHeaderProps {
+    isShowList: boolean;
+    setIsShowList?: (isShowList: boolean) => void;
+    showChat: boolean;
+    onClose: () => void;
+    handleBack: () => void;
+    handleEndChat: () => void;
+}
+
+const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
+    const [showMenu, setShowMenu] = useState(false)
+      const { t , i18n} = useLocalTranslation();
+      const isRTL = i18n.dir() === 'rtl';
+
+    return (
+        <header className="babylai-flex babylai-w-full babylai-items-center babylai-py-[18px] babylai-px-[18px] babylai-justify-between babylai-relative babylai-bg-black-white-50 babylai-rounded-t-3xl">
+            <div className="babylai-flex babylai-items-center babylai-gap-2">
+                <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10" onClick={props.handleBack}>
+                <ArrowRight
+    className={`babylai-w-[12px] babylai-h-[12px] ${
+      isRTL ? '' : 'babylai-rotate-180'
+    } babylai-text-primary-500`}
+  />                </Button>
+                <div className="babylai-relative babylai-mr-2">
+                    <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10" onClick={() => setShowMenu(!showMenu)}>
+                        <ThreeDots className="babylai-w-[14px] babylai-h-[4px] babylai-text-primary-500" />
+                    </Button>
+
+                    {showMenu && (
+                        <div className="babylai-absolute babylai-top-10 babylai-left-0 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-10">
+                            <div className="babylai-py-1" role="menu" aria-orientation="vertical">
+                                <button
+                                    className="babylai-block babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 babylai-hover:babylai-bg-gray-100 babylai-w-full babylai-text-left"
+                                    role="menuitem"
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                        props.handleEndChat()
+                                        setShowMenu(false)
+                                    }}
+                                >
+                                          {t('homeSdk.endChat')}
+                                           
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+            <div className="babylai-flex babylai-items-center babylai-gap-2 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2">
+                <Logo className="babylai-w-[124px] babylai-h-auto" />
+                </div>
+
+        </header>
+    )
+
+}
+export default ChatWindowHeader

package/src/ui/chatbot-popup/chat-window-screen/index.tsx

@@ -0,0 +1,103 @@
+import AgentResponse from '@/components/ui/agent-response/agent-response'
+import { Message } from '@/lib/types'
+import ChatWindowFooter from '@/ui/chatbot-popup/chat-window-screen/footer'
+import React, { useEffect, useRef, useState } from 'react'
+import LoadingGif from './../../../assets/animatedLogo.gif'
+import Seperator from './../../../assets/icons/seperator.svg'
+import LogoIcon from './../../../assets/logo.svg'
+
+interface ChatWindowProps {
+    onSendMessage: (message: string) => void
+    messages: Message[]
+    assistantStatus: string
+    needsAgent: boolean
+}
+
+export function ChatWindow({ onSendMessage, messages, assistantStatus = 'loading' }: ChatWindowProps) {
+    const [inputMessage, setInputMessage] = useState('')
+    const messagesEndRef = useRef<HTMLDivElement>(null)
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+    }
+
+    useEffect(() => {
+        scrollToBottom()
+    }, [messages, assistantStatus])
+
+    const handleSendMessage = () => {
+        if (inputMessage.trim()) {
+            onSendMessage(inputMessage)
+            setInputMessage('')
+        }
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            onSendMessage(inputMessage)
+            setInputMessage('')
+        }
+    }
+
+    // Find the first human agent message
+    const firstHumanAgentIndex = messages.findIndex((message) => message.senderType === 2)
+
+    return (
+        <>
+            <div className="babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full">
+                {messages.map((message, index) => {
+                    const isFirstInSequence = index === 0 || messages[index - 1].senderType !== message.senderType
+                    const isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2
+                    const textDirection = message.senderType === 1 ? 'justify-end' : 'justify-start'
+
+                    return (
+                        <div key={message.id}>
+                            {isFirstHumanAgentMessage && (
+                                <div className="babylai-flex babylai-justify-center babylai-items-center babylai-my-4">
+                                    <Seperator className="babylai-w-full babylai-text-purple-500" />
+                                </div>
+                            )}
+                            <div className={`babylai-mb-4 babylai-flex ${textDirection}`}>
+                                {isFirstInSequence && message.senderType === 3 && (
+                                    <div className="babylai-flex-shrink-0 babylai-mr-3">
+                                        <div className="babylai-w-8 babylai-h-8 babylai-rounded-full babylai-bg-purple-500 babylai-flex babylai-items-center babylai-justify-center">
+                                            <LogoIcon className="babylai-w-4 babylai-h-4 babylai-text-white" />
+                                        </div>
+                                    </div>
+                                )}
+                                {!isFirstInSequence && <div className="babylai-flex-shrink-0 babylai-mr-3 babylai-w-8"></div>}
+
+                                <AgentResponse
+                                    messageContent={message.messageContent}
+                                    senderType={message.senderType}
+                                    messageId={message.id}
+                                    onType={scrollToBottom} />
+                            </div>
+                        </div>
+                    )
+                })}
+                {assistantStatus === 'typing' && firstHumanAgentIndex === -1 && (
+                    <div className="babylai-mb-4 babylai-flex">
+                        <div className="babylai-flex-shrink-0 babylai-mr-3">
+                            <div className="babylai-w-8 babylai-h-8 babylai-rounded-full babylai-flex babylai-items-center babylai-justify-center">
+                                <img src={LoadingGif} alt="Loading" className="babylai-w-8 babylai-h-8" />
+                            </div>
+                        </div>
+                        <div className="babylai-max-w-[80%] babylai-rounded-2xl babylai-p-4 babylai-bg-white">
+                            <p className="babylai-text-sm babylai-opacity-70">...</p>
+                        </div>
+                    </div>
+                )}
+                <div ref={messagesEndRef} />
+            </div>
+
+            <ChatWindowFooter
+                inputMessage={inputMessage}
+                handleKeyDown={(e) => handleKeyDown(e)}
+                handleSendMessage={handleSendMessage}
+                setInputMessage={setInputMessage}
+            />
+        </>
+    )
+}

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

@@ -0,0 +1,22 @@
+import { Header } from '@/components/ui/header'
+import React from 'react'
+
+interface ChatBotErrorScreenProps {
+  onClose: () => void
+  error: string
+}
+
+const ChatBotErrorScreen: React.FC<ChatBotErrorScreenProps> = (props) => {
+  return (
+    <div className="babylai-w-full babylai-h-full babylai-bg-black-white-50 babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col">
+      <div className="h-full  babylai-rounded-3xl babylai-flex babylai-flex-col babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60 babylai-py-6 md:babylai-py-8 babylai-px-6 gap-4 md:gap-8">
+        <Header onClose={props.onClose} />
+        <div className="babylai-flex babylai-flex-col babylai-items-center babylai-justify-center babylai-w-full babylai-h-full babylai-px-6 babylai-py-16 md:babylai-py-28">
+          <div className="babylai-text-white babylai-text-lg">Error: {props.error}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChatBotErrorScreen

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

@@ -0,0 +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
+}
+
+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>
+    )
+}
+
+export default Card

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

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { Button } from '@/components/shared'
+import Logo from '../../../assets/logo.svg'
+import { useLocalTranslation } from '../../../useLocalTranslation'
+
+
+interface ChatNowCardProps {
+    setIsShowList: (isShowList: boolean) => void
+}
+
+const ChatNowCard: React.FC<ChatNowCardProps> = (props) => {
+    const { t } = useLocalTranslation();
+
+    return (
+        <div className="babylai-flex babylai-flex-col babylai-gap-7 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-8">
+            <div className="babylai-flex babylai-gap-3 babylai-items-center babylai-justify-start">
+                <div className="babylai-p-4 babylai-bg-primary-500 babylai-rounded-full">
+                    <Logo className="babylai-w-12 babylai-h-12" />
+                </div>
+                <div className="babylai-flex babylai-flex-col babylai-gap-0 babylai-text-base">
+                    <p className="babylai-font-semibold  babylai-text-black-white-500">BabylAI</p>
+                    <p className="babylai-font-semibold babylai-text-black-white-800">
+                    {t('homeSdk.welcomeMessage')}
+
+                    </p>
+                </div>
+            </div>
+            <Button variant="default" onClick={() => props.setIsShowList(true)} className='md:!babylai-text-base md:!babylai-p-2 !babylai-h-auto !babylai-font-semibold'>
+            {t('homeSdk.chatNow')}
+            </Button>
+        </div>
+    )
+}
+
+export default ChatNowCard

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

@@ -0,0 +1,44 @@
+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 {
+  setIsShowList: (isShowList: boolean) => void
+  onClose: () => void
+}
+
+const HomeScreen: React.FC<HomeScreenProps> = (props) => {
+  const { t } = useLocalTranslation()
+
+  const handleNavigateTo = () => {
+    // replace the current pathname with /features
+    const currentUrl = window.location.href
+    const url = new URL(currentUrl)
+    url.pathname = '/signUp'
+    window.location.href = url.toString()
+  }
+
+  return (
+    <div className="babylai-h-full babylai-flex babylai-flex-col babylai-overflow-y-auto babylai-py-6 md:babylai-py-8 babylai-px-6 gap-4 md:gap-8">
+      <Header onClose={props.onClose} />
+
+      <h1 className="babylai-text-2xl md:babylai-text-4xl babylai-font-bold babylai-text-white">
+        {t('homeSdk.chatTitle')}
+        <br />
+        BabylAI 🚀
+      </h1>
+
+      <div className="babylai-flex babylai-flex-col gap-3">
+        <ChatNowCard setIsShowList={props.setIsShowList} />
+
+        <Card handleClick={handleNavigateTo} text={t('homeSdk.tryBabylAi')} />
+
+        <Card handleClick={handleNavigateTo} text={t('homeSdk.contactSdk')} />
+      </div>
+    </div>
+  )
+}
+
+export default HomeScreen

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

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { Header } from '@/components/ui/header'
+import { cn } from '@/lib'
+import animatedLogo from '../../../assets/animatedLogo.gif'
+
+interface ChatBotLoadingScreenProps {
+  isShowList: boolean
+  onClose: () => void
+}
+
+const ChatBotLoadingScreen: React.FC<ChatBotLoadingScreenProps> = (props) => {
+  return (
+    <div className="babylai-w-full babylai-h-full babylai-bg-black-white-50 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 gap-4 md:gap-8',
+          {
+            'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': !props.isShowList,
+            'babylai-bg-black-white-100': props.isShowList
+          }
+        )}
+      >
+        <Header onClose={props.onClose} />
+        <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>
+      </div>
+    </div>
+  )
+}
+
+export default ChatBotLoadingScreen

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

@@ -0,0 +1,38 @@
+import { Button, CardContent, CardFooter } from '@/components'
+import { Option } from '@/lib/types'
+import React from 'react'
+import { useLocalTranslation } from '../../../useLocalTranslation'
+
+interface ExpandedOptionProps {
+  option: Option
+  handleStartChat: (option: Option) => void
+}
+
+const ExpandedOption: React.FC<ExpandedOptionProps> = ({ option, handleStartChat }) => {
+  const { t } = useLocalTranslation()
+
+  return (
+    <>
+      <CardContent className="babylai-transition-all babylai-duration-300 babylai-ease-in-out babylai-flex babylai-flex-col babylai-gap-1">
+        {option.paragraphs.map((paragraph, index) => (
+          <p key={index} className="babylai-font-semibold babylai-text-base babylai-text-black-white-800">
+            {paragraph}
+          </p>
+        ))}
+      </CardContent>
+      {option?.chatWithUs && (
+        <CardFooter>
+          <Button
+            variant="default"
+            className="babylai-w-full md:!babylai-p-2 !babylai-h-auto  babylai-font-semibold babylai-text-base"
+            onClick={() => handleStartChat(option)}
+          >
+            {t('homeSdk.chatNow')}
+          </Button>
+        </CardFooter>
+      )}
+    </>
+  )
+}
+
+export default ExpandedOption

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

@@ -0,0 +1,38 @@
+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'
+import CloseCircle from '../../../assets/icons/closeCirclePrimary.svg'
+
+interface OptionsListHeaderProps {
+  handleBack: () => void
+  showHelpScreen: boolean
+}
+
+const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({ handleBack, showHelpScreen }) => {
+  const { i18n } = useLocalTranslation()
+  const isRTL = i18n.dir() === 'rtl'
+
+  return (
+    <header
+      dir={i18n.dir()}
+      className={`babylai-flex babylai-w-full babylai-items-center 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 babylai-relative babylai-z-10"
+        onClick={handleBack}
+      >
+        {showHelpScreen ? (
+          <ArrowRight className={`${isRTL ? '' : 'babylai-rotate-180'}  babylai-text-primary-500`} />
+        ) : (
+          <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" />
+    </header>
+  )
+}
+export default OptionsListHeader

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

@@ -0,0 +1,59 @@
+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 React from 'react'
+
+interface OptionsListScreenProps {
+  helpScreen: HelpScreenData | null
+  expandedOption: Option | null
+  setExpandedOption: (option: Option | null) => void
+  handleStartChat: (option: Option) => void
+  handleBack: () => void
+  showHelpScreen: boolean
+}
+
+const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
+  helpScreen,
+  expandedOption,
+  setExpandedOption,
+  handleStartChat,
+  handleBack,
+  showHelpScreen
+}) => {
+  const handleToggleExpandOption = (option: Option) => {
+    if (expandedOption?.id === option.id) {
+      setExpandedOption(null)
+    } else {
+      setExpandedOption(option)
+    }
+  }
+
+  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-text-black-white-800 mb-4">{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 babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-1"
+              onClick={() => handleToggleExpandOption(option)}
+            >
+              <OptionCard title={option.title} />
+
+              {expandedOption?.id === option.id && <ExpandedOption option={option} handleStartChat={handleStartChat} />}
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default OptionsListScreen

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

@@ -0,0 +1,20 @@
+import { Button } from '@/components';
+import React from 'react';
+import ArrowRight from '../../../assets/icons/arrowRight.svg';
+
+interface OptionCardProps {
+    title: string;
+}
+
+const OptionCard: React.FC<OptionCardProps> = (props) => {
+    return (
+        <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-4">
+            <p className="babylai-text-base babylai-font-semibold babylai-text-black-white-800">{props.title}</p>
+            <Button variant="rounded-icon" size="icon" className="!babylai-w-12 !babylai-h-12 babylai-text-primary-500 hover:babylai-bg-primary-100">
+                <ArrowRight  className={` babylai-text-primary-500 babylai-rotate-90 `}/>
+            </Button>
+        </div>
+    )
+}
+
+export default OptionCard

package/src/ui/floating-message.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import CloseIcon from '../assets/icons/close.svg'
+interface FloatingMessageProps {
+  message: string
+  onClose: () => void
+}
+export function 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]"
+    >
+      <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 babylai-p-[3px] babylai-hover:bg-primary-400 babylai-hover:text-white shadow-md"
+          onClick={onClose}
+        >
+          <CloseIcon className="babylai-w-8 babylai-h-8" />
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/ui/help-button.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Logo from '../assets/logo.svg'
+
+interface HelpButtonProps {
+  onClick: () => void
+}
+
+export function 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 "
+      onClick={onClick}
+      aria-label="Need Help?"
+    >
+      <Logo className="babylai-w-[60%] babylai-h-[60%]" />
+    </button>
+  )
+}