sg-chatbot-ui v0.0.14

Here's the revised README format with your requested changes:

SG Chatbot UI Integration

Follow these steps to set up the SG Chatbot UI in a React.js or Next.js project.

Step 1: Install the Package

npm install sg-chatbot-ui

React.js Setup

1. Import and Define Custom Elements
   Add the following lines in your App.js file:

   import { defineCustomElements } from 'sg-chatbot-ui/loader';
   defineCustomElements(window);

2. Use the Custom Element
   Add the <chatbot-ui> component at the bottom of App.js:

   <chatbot-ui></chatbot-ui>

3. Set Server URL
   In your .env file, add the server URL and update it with your current base URL:

   REACT_APP_SERVER_URL=https://sentientgeeks.com

Next.js Setup

1. Import and Define Custom Elements in app route or
   In App.js, import and define the custom elements conditionally within a useEffect hook:

   import { useEffect } from 'react';
   import { defineCustomElements } from 'sg-chatbot-ui/loader';
   
   useEffect(() => {
     if (typeof window !== "undefined") {
       defineCustomElements(window);
     }
   }, []);

2. Import and Define Custom Elements in page route
   In App.js, import and define the custom elements conditionally within a useEffect hook:

   import { useEffect } from 'react';
   
    useEffect(() => {
    if (typeof window !== "undefined") {
      import("sg-chatbot-ui/loader").then((module) => {
        module.defineCustomElements(window);
      });
    }
   }, []);

3. Declare Custom Element in TypeScript
   Inside the src folder, create a file named global.d.ts to declare the chatbot-ui component:

   declare namespace JSX {
     interface IntrinsicElements {
       "chatbot-ui": React.DetailedHTMLProps<
         React.HTMLAttributes<HTMLElement>,
         HTMLElement
       >;
     }
   }

4. Use the Custom Element
   Add the <chatbot-ui> component at the bottom of page.tsx:

   <chatbot-ui></chatbot-ui>

5. Set Server URL
   In your .env file, add the server URL and update it with your current base URL:

   NEXT_PUBLIC_SERVER_URL=https://sentientgeeks.com

With these steps, you should have the SG Chatbot UI integrated and ready to use in your application!