import React          from "https://esm.sh/react@19/";
import { createRoot } from "https://esm.sh/react-dom@19/client/";
import { pipeline }   from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers';

import {initState,reducer} from './reducer.js';
import rawData from './rawData.js';
import BusySignal from './busy.js';


function App () {
  const [state, dispatch] = React.useReducer(reducer, initState());
  const setData = (key,data) => dispatch({type:'setData', key:key, data:data});

  async function ask() {
    dispatch({type:'thinking'});
    let qaGen = await pipeline('question-answering');
    let qaOutput = await qaGen(state.question, rawData.chatbot);
    // hide busy; show answer
    dispatch({type:'answerQ', answer:qaOutput.answer});
  }
  
  return (
    <>
      {state.error && <h3 className='error'>ERROR</h3>}
      <p>This is a demo os Hugging Face's <a href="https://huggingface.co/docs/transformers/en/tasks/question_answering">question-answering transformer</a>.</p>
      
      <div id='KBtextDIV'>{rawData.chatbot}</div>

      <p>
	<input value={state.question}
	       onChange={e=>setData('question', e.target.value)} />
	{!state.busy && <button onClick={ask}>Ask</button>}
      </p>
      
      {state.busy && <p className='busyDIV'>Working... <BusySignal  /></p>}
      {state.done && <p>{state.answer}</p>}
	 
       
    </>
  )
}

createRoot(document.getElementById('root')).render( <React.StrictMode> <App/> </React.StrictMode> );