无法弄清楚如何使用 Next.JS 渲染 HTML 文件

Question

我正在开发一个项目，我想使用 Next.JS 创建一个网页，该网页将在屏幕左侧显示 PDF 文件，在右侧我想使用 Chaindesk 创建聊天机器人将帮助您从所述文件中检索信息，但我不知道如何执行此操作，当我准备好聊天机器人时，我可以通过在组件上复制以下代码来将带有气泡的代理嵌入页面上HTML 文件：

<script type="module">
  import Chatbox from 'https://cdn.jsdelivr.net/npm/@chaindesk/embeds@latest/dist/chatbox/index.js';

  Chatbox.initBubble({
    agentId: 'id',
    
    // optional 
    // If provided will create a contact for the user and link it to the conversation
    contact: {
      firstName: 'John',
      lastName: 'Doe',
      email: '[email protected]',
      phoneNumber: '[phone]',
      userId: '42424242',
    },
    // optional
    // Override initial messages
    initialMessages: [
      'Hello Georges how are you doing today?',
      'How can I help you ?',
    ],
    // optional
    // Provided context will be appended to the Agent system prompt
    context: "The user you are talking to is John. Start by Greeting him by his name.",
  });
</script>

我已经设置了一个 CodePen sandbox 来尝试一下，请注意，聊天机器人实际上不会响应任何内容，因为未提供 id，因为我使用包含敏感信息的文件对其进行了训练。

我也可以使用 HTML 组件执行相同的操作

<script type="module">
  import Chatbox from 'https://cdn.jsdelivr.net/npm/@chaindesk/embeds@latest/dist/chatbox/index.js';

  Chatbox.initStandard({
    agentId: 'id',
  });
</script>

<chaindesk-chatbox-standard style="width: 100%; height: 650px" />

到目前为止，我无法弄清楚我想做的事情是否可能，我尝试使用

next/head

和

next/script

作为可能的解决方案，但它们要么不起作用，要么我做错了什么

我可以在

/public

文件夹上生成一个单独的 HTML 文件并使用路由器访问它，但这并不能完全实现我想要的。

或者，有没有办法划分页面，将 JSX 渲染在左侧，将 HTML 渲染在右侧？

我对网络开发还很陌生，而且还在学习很多东西，所以如果我问的问题没有意义或者根本不可能，请原谅。

无论怎样，我都很感谢您的意见和可能的解决方案（如果您有的话）。

Answer 1

您可以通过使用

dangerouslySetInnerHTML

并将脚本内容作为字符串传递来添加带有内联 JavaScript 的 <script> 标签：

const chatboxJs = `
    import Chatbox from 'https://cdn.jsdelivr.net/npm/@chaindesk/embeds@latest/dist/chatbox/index.js';

  Chatbox.initStandard({
    agentId: 'id',
  });
`

在您的组件中：

<script type="module" dangerouslySetInnerHTML={{ __html: chatboxJs }} />

由于 React 组件返回 JSX，因此自定义元素上的样式属性必须是样式对象属性。

<chaindesk-chatbox-standard style={{ width: '100%', height: '650px' }} />

请参阅工作示例：https://stackblitz.com/edit/stackoverflow-78102886?file=app%2Fpage.tsx