@aslaluroba/help-center-react 3.2.17 → 3.2.18

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

@@ -1,53 +0,0 @@
-import React from "react";
-import { useLocalTranslation } from "@/useLocalTranslation";
-import { cn } from "@/lib/utils";
-import ActionButton from "./action-button";
-import SolarAltArrowLeftLinear from '~icons/solar/alt-arrow-left-linear'
-import IcRoundMinus from '~icons/ic/round-minus'
-import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'
-
-interface ChatWindowHeaderProps {
-  handleBack: () => void;
-  handleEndChat: () => void;
-  handleMinimize: () => void;
-  optionTitle: string;
-}
-
-const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = ({
-  handleBack,
-  handleEndChat,
-  handleMinimize,
-  optionTitle,
-}) => {
-  const { i18n } = useLocalTranslation();
-
-  return (
-    <header className="bg-header babylai:flex babylai:items-center babylai:justify-between babylai:p-6 babylai:border-b babylai:border-black-white-200">
-      <div className="babylai:flex babylai:items-center babylai:gap-2">
-        <ActionButton
-          onClick={handleBack}
-          icon={<SolarAltArrowLeftLinear />}
-          ariaLabel="Back"
-          className={cn(i18n.language === 'ar' && 'babylai:rotate-180')}
-        />
-
-        <ActionButton
-          onClick={handleEndChat}
-          icon={<MaterialSymbolsCloseSmallOutlineRounded />}
-          ariaLabel="End Chat"
-        />
-      </div>
-
-      <h2 className="babylai:text-lg! babylai:font-semibold! babylai:text-card-foreground">
-        {optionTitle}
-      </h2>
-
-      <ActionButton
-        onClick={handleMinimize}
-        icon={<IcRoundMinus />}
-        ariaLabel="Minimize"
-      />
-    </header>
-  );
-};
-export default ChatWindowHeader;

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

@@ -1,116 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { ReviewProps } from '@/lib/types';
-import { cn } from '@/lib/utils';
-import { Rating } from '@/ui/review-dialog/rating';
-import { useLocalTranslation } from '@/useLocalTranslation';
-import LogoIcon from '@/assets/logo.svg';
-import { Button } from '@/components';
-
-const COMMENT_MAX_LENGTH = 500;
-
-interface InChatReviewProps {
-  onSubmit: (payload: ReviewProps) => void | Promise<void>;
-  onDone?: () => void;
-  isSubmitting?: boolean;
-}
-
-export const InChatReview: React.FC<InChatReviewProps> = ({ onSubmit, isSubmitting = false }) => {
-  const { t } = useLocalTranslation();
-  const [rating, setRating] = useState<number>(0);
-  const [comment, setComment] = useState<string>('');
-  const [commentError, setCommentError] = useState<string | null>(null);
-
-  const hasRating = rating >= 1 && rating <= 5;
-
-  const handleRatingChange = useCallback((val: number) => {
-    setRating(val);
-  }, []);
-
-  const handleCommentChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value;
-    setComment(value);
-    if (commentError && value.length <= COMMENT_MAX_LENGTH) {
-      setCommentError(null);
-    }
-  }, [commentError]);
-
-  const handleSubmit = useCallback(() => {
-    const trimmed = comment.trim();
-    if (trimmed.length > COMMENT_MAX_LENGTH) {
-      setCommentError(t('homeSdk.ReviewDialog.comment_error') || 'The field Comment must be a string with a maximum length of 500.');
-      return;
-    }
-    setCommentError(null);
-    void onSubmit({ rating, comment: trimmed });
-  }, [rating, comment, onSubmit, t]);
-
-  return (
-    <section className="babylai:mb-4 babylai:flex babylai:justify-start">
-      <div className="babylai:shrink-0 babylai:me-3 babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:bg-primary">
-        <LogoIcon className="babylai:w-4 babylai:h-4 babylai:text-primary" />
-      </div>
-
-      <div className="babylai:bg-card babylai:max-w-[80%] babylai:p-5 babylai:rounded-3xl babylai:text-sm babylai:flex babylai:flex-col babylai:gap-2.5 babylai:text-start">
-        <h2 className='babylai:text-card-foreground'>
-          {t('homeSdk.InChatReview.title')}
-        </h2>
-        <p className="babylai:font-normal babylai:text-muted-foreground babylai:leading-snug">
-          {t('homeSdk.InChatReview.description')}
-        </p>
-
-        <section className='babylai:bg-muted babylai:rounded-3xl babylai:p-3'>
-          <Rating value={rating} onChange={handleRatingChange} size="md" />
-        </section>
-
-        {hasRating && (
-          <>
-            <p className="babylai:text-card-foreground babylai:leading-snug">{t('homeSdk.InChatReview.follow_up')}</p>
-
-            <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',
-                commentError ? '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={!!commentError}
-              aria-describedby={commentError ? 'in-chat-review-comment-error' : undefined}
-            />
-            {commentError && (
-              <p id="in-chat-review-comment-error" className="babylai:text-sm babylai:text-destructive" role="alert">
-                {commentError}
-              </p>
-            )}
-            <p className="babylai:text-xs babylai:text-muted-foreground">
-              {comment.length}/{COMMENT_MAX_LENGTH}
-            </p>
-
-            <Button
-              variant='default'
-              onClick={handleSubmit}
-              disabled={isSubmitting}
-            >
-              {isSubmitting ? (
-                <>
-                  <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.InChatReview.submit_button')}
-                </>
-              ) : (
-                t('homeSdk.InChatReview.submit_button')
-              )}
-            </Button>
-          </>
-        )}
-      </div>
-    </section>
-  );
-};
-
-InChatReview.displayName = 'InChatReview';

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

@@ -1,366 +0,0 @@
-import AgentResponse from '@/components/ui/agent-response/agent-response';
-import { ImageAttachment, ImagePreviewDialog } from '@/components/ui';
-import { Message, ReviewProps } from '@/lib/types';
-import ChatWindowFooter from '@/ui/chatbot-popup/chat-window-screen/footer';
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import Seperator from './../../../assets/seperator.svg';
-import LogoIcon from './../../../assets/logo.svg';
-import { presignDownload } from '@/core/api';
-import { useLocalTranslation } from '../../../useLocalTranslation';
-import PoweredBy from '@/ui/powered-by';
-import { TypingIndicator } from './typing-indicator';
-import { InChatReview } from './in-chat-review';
-import SolarUserBold from '~icons/solar/user-bold'
-
-interface ChatWindowProps {
-  onSendMessage: (message: string, attachmentIds: string[]) => void;
-  onEnsureSession: () => Promise<string>;
-  messages: Message[];
-  assistantStatus: string;
-  needsAgent: boolean;
-  sessionId?: string | null;
-  isChatClosed?: boolean;
-  inChatReviewSessionId?: string | null;
-  isSubmittingReview?: boolean;
-  onInChatReviewSubmit?: (payload: ReviewProps) => void | Promise<void>;
-  onInChatReviewDone?: () => void;
-}
-
-// Memoize individual message component to prevent unnecessary re-renders
-const MessageComponent = React.memo(
-  ({
-    message,
-    index,
-    messages,
-    firstHumanAgentIndex,
-    onType,
-    onImageClick,
-  }: {
-    message: Message;
-    index: number;
-    messages: Message[];
-    firstHumanAgentIndex: number;
-    onType: () => void;
-    onImageClick: (attachmentIdsOrUrls: string[], clickedIndex: number) => void;
-  }) => {
-    const isFirstInSequence = index === 0 || messages[index - 1].senderType !== message.senderType;
-    const isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2;
-    const textDirection = message.senderType === 1 ? 'babylai:justify-end' : 'babylai:justify-start';
-
-    const handleImageClick = useCallback(
-      (clickedIndex: number) => {
-        // Use attachmentUrls if available (from Ably), otherwise use attachmentIds (user-sent)
-        const attachments =
-          message.attachmentUrls?.length ? message.attachmentUrls : (message.attachmentIds || []);
-        if (attachments.length > 0) {
-          onImageClick(attachments, clickedIndex);
-        }
-      },
-      [message.attachmentIds, message.attachmentUrls, onImageClick]
-    );
-
-    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-primary-500' />
-          </div>
-        )}
-        <div className={`babylai:mb-4 babylai:flex ${textDirection}`}>
-          {isFirstInSequence && (message.senderType === 3 || message.senderType === 2) && (
-            <div className='babylai:shrink-0 babylai:me-3'>
-              <div
-                className={`babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center ${message?.senderType === 3 ? 'babylai:bg-primary' : 'babylai:bg-black-white-50'
-                  }`}
-              >
-                {message?.senderType === 3 ? (
-                  <LogoIcon className='babylai:w-4 babylai:h-4 babylai:text-primary' />
-                ) : (
-                  <SolarUserBold className='babylai:w-4 babylai:h-4 babylai:text-primary' />
-                )}
-              </div>
-            </div>
-          )}
-          {!isFirstInSequence && <div className='babylai:shrink-0 babylai:me-3 babylai:w-8'></div>}
-
-          <div className='babylai:flex babylai:flex-col babylai:gap-2'>
-            {/* Display attachment URLs (from Ably) */}
-            {message.attachmentUrls && message.attachmentUrls.length > 0 && (
-              <div className='babylai:flex babylai:flex-row babylai:flex-wrap babylai:gap-2 babylai:max-w-full'>
-                {message.attachmentUrls.map((attachmentUrl, imgIndex) => (
-                  <ImageAttachment
-                    key={attachmentUrl}
-                    imageUrl={attachmentUrl}
-                    enablePreview={false}
-                    onClick={() => handleImageClick(imgIndex)}
-                  />
-                ))}
-              </div>
-            )}
-            {/* Display attachment IDs (user-sent messages) */}
-            {message.attachmentIds && message.attachmentIds.length > 0 && (
-              <div className='babylai:flex babylai:flex-row babylai:flex-wrap babylai:gap-2 babylai:max-w-full'>
-                {message.attachmentIds.map((attachmentId, imgIndex) => (
-                  <ImageAttachment
-                    key={attachmentId}
-                    fileId={attachmentId}
-                    enablePreview={false}
-                    onClick={() => handleImageClick(imgIndex)}
-                  />
-                ))}
-              </div>
-            )}
-            {/* Only show chat bubble if there's message content */}
-            {message.messageContent && message.messageContent.trim() !== '' && (
-              <AgentResponse
-                messageContent={message.messageContent}
-                senderType={message.senderType}
-                messageId={message.id}
-                onType={onType}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-MessageComponent.displayName = 'MessageComponent';
-
-export const ChatWindow = React.memo(
-  ({
-    onSendMessage,
-    onEnsureSession,
-    messages,
-    assistantStatus = 'loading',
-    needsAgent,
-    sessionId,
-    isChatClosed = false,
-    inChatReviewSessionId,
-    isSubmittingReview = false,
-    onInChatReviewSubmit,
-    onInChatReviewDone,
-  }: ChatWindowProps) => {
-    const { i18n } = useLocalTranslation();
-    const [inputMessage, setInputMessage] = useState('');
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const lastMessageCountRef = useRef(messages.length);
-    const [galleryState, setGalleryState] = useState<{
-      isOpen: boolean;
-      imageUrls: string[];
-      initialIndex: number;
-    }>({
-      isOpen: false,
-      imageUrls: [],
-      initialIndex: 0,
-    });
-
-    // Debounced scroll to bottom function
-    const scrollToBottom = useCallback(() => {
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-
-      scrollTimeoutRef.current = setTimeout(() => {
-        messagesEndRef.current?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-        });
-      }, 100);
-    }, []);
-
-    // Only scroll when new messages are added or status changes
-    useEffect(() => {
-      if (messages.length !== lastMessageCountRef.current || assistantStatus === 'typing') {
-        lastMessageCountRef.current = messages.length;
-        scrollToBottom();
-      }
-    }, [messages.length, assistantStatus, scrollToBottom]);
-
-    // Cleanup timeout on unmount
-    useEffect(() => {
-      return () => {
-        if (scrollTimeoutRef.current) {
-          clearTimeout(scrollTimeoutRef.current);
-        }
-      };
-    }, []);
-
-    const handleSendMessage = useCallback(
-      (attachmentIds: string[]) => {
-        // Allow sending if there's text OR attachments
-        if (inputMessage.trim() || attachmentIds.length > 0) {
-          onSendMessage(inputMessage, attachmentIds);
-          setInputMessage('');
-        }
-      },
-      [inputMessage, onSendMessage]
-    );
-
-    // Memoize the first human agent index calculation
-    const firstHumanAgentIndex = useMemo(() => {
-      return messages.findIndex((message) => message.senderType === 2);
-    }, [messages]);
-
-    // Handle image gallery opening
-    const handleImageClick = useCallback(
-      async (attachmentIdsOrUrls: string[], clickedIndex: number) => {
-        if (!attachmentIdsOrUrls || attachmentIdsOrUrls.length === 0) {
-          return;
-        }
-
-        try {
-          // Check if the first item is a URL (starts with http:// or https://)
-          // If so, they're all URLs from Ably and can be used directly
-          const isUrl = attachmentIdsOrUrls[0]?.startsWith('http://') || attachmentIdsOrUrls[0]?.startsWith('https://');
-
-          let imageUrls: string[];
-
-          if (isUrl) {
-            // These are already URLs from Ably, use them directly (no async needed)
-            imageUrls = attachmentIdsOrUrls.filter((url): url is string => url !== null && url.length > 0);
-
-            // Open gallery immediately with URLs
-            if (imageUrls.length > 0) {
-              const adjustedIndex = Math.max(0, Math.min(clickedIndex, imageUrls.length - 1));
-              setGalleryState({
-                isOpen: true,
-                imageUrls,
-                initialIndex: adjustedIndex,
-              });
-            }
-            return; // Exit early since we don't need to fetch anything
-          }
-
-          // These are file IDs, need to fetch URLs using presignDownload
-          const imageUrlPromises = attachmentIdsOrUrls.map((fileId) => {
-            if (!fileId || typeof fileId !== 'string') {
-              return Promise.resolve(null);
-            }
-
-            return presignDownload(fileId, i18n.language as 'ar' | 'en')
-              .then((response) => {
-                if (!response || !response.downloadUrl) {
-                  return null;
-                }
-                return response.downloadUrl;
-              })
-              .catch(() => {
-                // Return null for failed downloads so we can filter them out
-                return null;
-              });
-          });
-
-          imageUrls = (await Promise.all(imageUrlPromises)).filter(
-            (url): url is string => url !== null && url.length > 0
-          );
-
-          if (imageUrls.length === 0) {
-            return;
-          }
-
-          // Adjust the initial index if some images failed to load
-          const adjustedIndex = Math.max(0, Math.min(clickedIndex, imageUrls.length - 1));
-
-          setGalleryState({
-            isOpen: true,
-            imageUrls,
-            initialIndex: adjustedIndex,
-          });
-        } catch (error) {
-          // Handle unexpected errors silently
-        }
-      },
-      [i18n.language]
-    );
-
-    const handleCloseGallery = useCallback(() => {
-      setGalleryState({
-        isOpen: false,
-        imageUrls: [],
-        initialIndex: 0,
-      });
-    }, []);
-
-    // Memoize loading state check
-    // When a human agent has joined, don't disable based on assistantStatus
-    const hasHumanAgent = useMemo(() => {
-      return needsAgent || messages.some((msg) => msg.senderType === 2);
-    }, [needsAgent, messages]);
-
-    const isLoading = useMemo(() => {
-      // If human agent has joined, don't disable file uploads based on assistantStatus
-      if (hasHumanAgent) {
-        return false;
-      }
-      return assistantStatus === 'typing' || assistantStatus === 'loading' || assistantStatus === 'error';
-    }, [assistantStatus, hasHumanAgent]);
-
-    // Memoize the message list to prevent unnecessary re-renders
-    const messagesListWithGallery = useMemo(() => {
-      return messages.map((message, index) => (
-        <MessageComponent
-          key={`${message.id}-${index}`}
-          message={message}
-          index={index}
-          messages={messages}
-          firstHumanAgentIndex={firstHumanAgentIndex}
-          onType={scrollToBottom}
-          onImageClick={handleImageClick}
-        />
-      ));
-    }, [messages, firstHumanAgentIndex, scrollToBottom, handleImageClick]);
-
-    const showInChatReview = !!inChatReviewSessionId && !!onInChatReviewSubmit;
-
-    return (
-      <>
-        <div className='babylai:flex-1 babylai:overflow-y-auto babylai:p-4 babylai:h-full'>
-          {messagesListWithGallery}
-
-          {assistantStatus === 'typing' && <TypingIndicator firstHumanAgentIndex={firstHumanAgentIndex} />}
-
-          {showInChatReview && (
-            <>
-              <Seperator className="babylai:my-6 babylai:text-black-white-300" />
-              <InChatReview
-                onSubmit={onInChatReviewSubmit}
-                onDone={onInChatReviewDone}
-                isSubmitting={isSubmittingReview}
-              />
-            </>
-          )}
-
-          <div ref={messagesEndRef} />
-        </div>
-
-        <ChatWindowFooter
-          inputMessage={inputMessage}
-          handleSendMessage={handleSendMessage}
-          setInputMessage={setInputMessage}
-          isLoading={isLoading}
-          isChatClosed={isChatClosed}
-          onEnsureSession={onEnsureSession}
-          sessionId={sessionId}
-        />
-
-        <PoweredBy />
-
-        {/* Gallery Preview Dialog */}
-        {galleryState.isOpen && galleryState.imageUrls.length > 0 && (
-          <ImagePreviewDialog
-            imageUrls={galleryState.imageUrls}
-            initialIndex={galleryState.initialIndex}
-            isOpen={galleryState.isOpen}
-            onClose={handleCloseGallery}
-            alt='Image gallery preview'
-          />
-        )}
-      </>
-    );
-  }
-);
-
-ChatWindow.displayName = 'ChatWindow';

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import LogoIcon from '../../../assets/logo.svg';
-
-interface TypingIndicatorProps {
-  firstHumanAgentIndex: number;
-}
-
-export const TypingIndicator = React.memo(({ firstHumanAgentIndex }: TypingIndicatorProps) => {
-  if (firstHumanAgentIndex !== -1) return null;
-
-  return (
-    <div className='babylai:mb-4 babylai:flex'>
-      <div className='babylai:shrink-0 babylai:me-3'>
-        <div className='babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:bg-primary'>
-          <LogoIcon className='babylai:w-4 babylai:h-4 babylai:text-primary' />
-        </div>
-      </div>
-      <div className='babylai:max-w-[80%] babylai:rounded-2xl babylai:p-4 babylai:bg-card'>
-        <p className='babylai:text-sm babylai:text-muted-foreground babylai:m-0 babylai:flex babylai:gap-0.5 babylai:items-center' aria-hidden="true">
-          <span className="babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current" />
-          <span className="babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current" />
-          <span className="babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current" />
-        </p>
-      </div>
-    </div>
-  );
-});
-
-TypingIndicator.displayName = 'TypingIndicator';
-
-export default TypingIndicator;

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

@@ -1,22 +0,0 @@
-
-import Header from '../options-list-screen/header'
-
-interface ChatBotErrorScreenProps {
-  onClose: () => void
-  error: string
-}
-
-const ChatBotErrorScreen: React.FC<ChatBotErrorScreenProps> = (props) => {
-  return (
-    <div className="babylai:w-full babylai:h-full babylai:bg-secondary babylai:rounded-3xl babylai:shadow-lg babylai:z-50 babylai:flex babylai:flex-col">
-      <div className="babylai:h-full babylai:rounded-3xl babylai:flex babylai:flex-col babylai:gap-8">
-        <Header onMinimize={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-28">
-          <div className="babylai:text-secondary-foreground babylai:text-lg">Error: {props.error}</div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ChatBotErrorScreen

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

@@ -1,21 +0,0 @@
-import animatedLogo from '../../../assets/animatedLogo.gif'
-import Header from '../options-list-screen/header'
-
-interface ChatBotLoadingScreenProps {
-  onClose: () => void
-}
-
-const ChatBotLoadingScreen: React.FC<ChatBotLoadingScreenProps> = (props) => {
-  return (
-    <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-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/company-card.tsx

@@ -1,39 +0,0 @@
-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">
-        {logoUrl && (
-          <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,23 +0,0 @@
-import ActionButton from '../chat-window-screen/action-button';
-import IcRoundMinus from '~icons/ic/round-minus'
-
-interface OptionsListHeaderProps {
-  onMinimize: () => void;
-}
-
-const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({
-  onMinimize,
-}) => {
-
-  return (
-    <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;