Embedding a shadowDOM widget in React.tsx

import React, { useEffect } from "react";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'enquiries-ai-widget': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}

const WidgetComponent = () => {

  useEffect(() => {
    // Dynamically load the widget script
    const script = document.createElement('script');
    script.type = 'module';
    script.src = 'https://ai-chat-app.netlify.app/enquiries-ai-widget.umd.js';
    document.head.appendChild(script);

    return () => {
      // Cleanup: remove script when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return (
      <enquiries-ai-widget></enquiries-ai-widget>  
  );
};

export default WidgetComponent;


// Usage example in a React app

const ClientReactApp = () => {
  return (
    <div>
      <h1>This is the Client's React App</h1>
      <WidgetComponent />
    </div>
  );
}