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';


// Convert KB to vector embeddings
// show vector stats

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

  async function text2vectors() {
    dispatch({type:'busyVectorSignal'}); // hide button; show busy signal
    let extractor = await pipeline('feature-extraction');
    let vectors = await extractor(state.sentences, {
      pooling: 'mean', // Average the results to get a single vector
      normalize: true, // Normalize the vector (useful for cosine similarity)
    });
    //console.log(vectors.data.slice(0,5));
    setData('vectors', vectors.data);
  }

  React.useEffect(()=>dispatch({type:'updateKB', data:rawData.chatbotWiki}), [rawData.chatbotWiki]);

  React.useEffect(()=>{
    if (state.vectors.length>1) {
      dispatch({type:'showVectorStats'}); // hide busy signal; show stats
    }
  }, [state.vectors.length])
  
  return (
    <div>
      {state.error && <h3 className='error'>ERROR</h3>}


      {(state.sentences.length>0) &&
       <>
	 <div id='KBtextDIV'>{state.KBtext}</div>

	 <div>
	   {state.wordCount} words; {state.sentences.length} sentences
	 </div>

	 <p style={{display:state.showConvertButton}}><button onClick={text2vectors}>Convert to vector embeddings.</button></p>

	 <p id='busySignalDIV' style={{display:state.showBusySignal}}>Converting... <BusySignal /></p>

	 <p id='vectorStatsDIV' style={{display:state.showVectorStats}}>{state.vectors.length} vectors</p>
       </>
      }
    </div>
  )
}

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