| 1 |
import { useState } from '@wordpress/element' |
| 2 |
import { Answer } from '@chat/components/dialog/Answer' |
| 3 |
import { Header } from '@chat/components/dialog/Header' |
| 4 |
import { Question } from '@chat/components/dialog/Question' |
| 5 |
import { Support } from '@chat/components/dialog/Support' |
| 6 |
import { useQuestion } from '@chat/hooks/useQuestion' |
| 7 |
|
| 8 |
export const ChatDialog = () => { |
| 9 |
// Store the answer in state that the current answer doesn't clear while the new one is loading. |
| 10 |
const [question, setQuestion] = useState('') |
| 11 |
const { data: answer, loading, error } = useQuestion(question ?? null) |
| 12 |
const reset = () => setQuestion('') |
| 13 |
|
| 14 |
return ( |
| 15 |
<div className="fixed z-high overflow-hidden w-80 bottom-24 right-6 border border-solid border-gray-300 text-base bg-white rounded-lg shadow-2xl"> |
| 16 |
<div className="px-6 py-4 bg-design-main text-design-text"> |
| 17 |
<Header question={question} reset={reset} /> |
| 18 |
{!answer && !question && <Question setQuestion={setQuestion} />} |
| 19 |
</div> |
| 20 |
{!answer && !question && <Support />} |
| 21 |
{question && ( |
| 22 |
<Answer |
| 23 |
question={question} |
| 24 |
answerId={answer?.id} |
| 25 |
reset={reset} |
| 26 |
questionLoading={loading} |
| 27 |
questionError={error} |
| 28 |
/> |
| 29 |
)} |
| 30 |
</div> |
| 31 |
) |
| 32 |
} |
| 33 |
|
