Dify のChatbotをReactに埋め込み

Reactで上記のscriptを表示するには、useEffectフックを使ってスクリプトを動的に追加する。
以下のようにコンポーネントを作成。

import React, { useEffect } from 'react';

const DifyChatbot = () => {
  useEffect(() => {
    // Append the first script
    const script1 = document.createElement('script');
    script1.innerHTML = `
      window.difyChatbotConfig = {
        token: '${token}',
        baseUrl: 'http://udify.app'
      }
    `;
    document.head.appendChild(script1);

    // Append the second script
    const script2 = document.createElement('script');
    script2.src = 'http://udify.app/embed.min.js';
    script2.id = '${token}';
    script2.defer = true;
    document.head.appendChild(script2);

    // Cleanup function to remove the scripts when the component is unmounted
    return () => {
      document.head.removeChild(script1);
      document.head.removeChild(script2);
    };
  }, []);

  return (
    <div>
      {/* The chatbot will be embedded by the scripts */}
    </div>
  );
};

export default DifyChatbot;

※ token, URLは変更する