AI-consultant usage explanation

General requirements

In html should be placed div element with customisable id where app would be initiated. Besides if should be applied initial styles. DIV should look like this:

<div
  id="something"
  style="
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
    "
></div>

Website w/o react and styled-components installed

To be used properly should be included react, react-dom and styled-components libs + files from local environment or from cdn from lib itself should be added.\

CSS should be included in head tag:

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/style.css"
/>

Libs to be added before closing body tag, though defer attribute should solve issue, if it's placed in a wrong place. Preferable CDNs might be used, only versions matter:

<script
  defer
  crossorigin
  src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"
></script>
<script
  defer
  crossorigin
  src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"
></script>
<script
  defer
  crossorigin
  src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/6.1.8/styled-components.min.js"
></script>

Lib itself:

<script
  defer
  crossorigin
  src="https://unpkg.com/[email protected]/dist/ai-consultant-lib.iife.js"
></script>

And finally its initiation:

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    aiConsultantLibInit('something', {
      apiUrl: 'https://google.com',
    });
  });
</script>

where something should match div's id.

Website w/ react and styled-components installed

You've got to add lib as any other npm package with package manager you prefer, npm, yarn, ...etc.

yarn add ai-consultant-lib

Afterward css file and lib itself should be initiated. Example includes surrounded code:

import { useState, useEffect } from 'react'
import './App.css'
// ====================================
// Below is what needed to add for lib
import 'ai-consultant-lib/style.css'
import { init } from 'ai-consultant-lib'
// ====================================

function App() {
  useEffect(() => {
    let mounted = true;
    requestAnimationFrame(() => {
      if (mounted) {
        // ID of div in html
        init('something', {
          apiUrl: 'https://google.com'
        })
      }
    })
    return () => {
      mounted = false;
    }
  }, [])

  return (
    <p>
      your app
    </p>
  )
}

export default App