import React, { useContext } from 'react';
import { LlmAnswer } from './LlmAnswer';
import { UserPrompt } from './UserPrompt';
import { EditPrompt } from './EditPrompt';
import { PromptSelect } from './PromptSelect';
import { ModalContext } from '../context/ModalContext';

export const ModalBody = () => {
   const context = useContext(ModalContext)!;
   return (
      <div className="modal-body">
         <div className="wpj-form-group d-flex gap-1">
            <PromptSelect />
         </div>
         {!context.loading && (
            <>
               <UserPrompt />
               {(!!context.responses.length || context.loadingResponse) && (
                  <>
                     <div className="wpj-form-group">
                        <LlmAnswer />
                     </div>

                     <div className="wpj-form-group wpj-form-group-flex d-flex gap-1">
                        {<EditPrompt />}
                     </div>
                  </>
               )}
            </>
         )}
      </div>
   );
};