如何在Next.js页面嵌入Chaindesk聊天机器人并分栏展示PDF

完全可以实现左侧JSX渲染PDF、右侧嵌入Chaindesk聊天机器人的分栏布局，以下是具体实现方案：

核心思路 #

1. 用CSS Grid/Flexbox实现页面分栏布局，左侧分配PDF展示区域，右侧分配聊天机器人区域
2. 针对Next.js的SSR特性，正确加载Chaindesk的第三方脚本并初始化聊天机器人
3. 用React生态的PDF组件实现客户端渲染PDF（避免SSR兼容性问题）

步骤1：安装依赖 #

先安装PDF渲染所需的库：

npm install react-pdf

步骤2：完整页面代码实现 #

import dynamic from 'next/dynamic';
import Script from 'next/script';
import { useEffect } from 'react';

// 动态导入PDF组件，禁用SSR（PDF.js仅支持客户端环境）
const DocumentViewer = dynamic(() => import('react-pdf').then(mod => mod.Document), { ssr: false });
const PageViewer = dynamic(() => import('react-pdf').then(mod => mod.Page), { ssr: false });

export default function PdfChatPage() {
  return (
    <div style={{ 
      display: 'grid', 
      gridTemplateColumns: '1fr 1fr', 
      gap: '2rem', 
      padding: '2rem',
      maxWidth: '1400px',
      margin: '0 auto'
    }}>
      {/* 左侧PDF展示区 */}
      <div style={{ height: '85vh', overflowY: 'auto' }}>
        <h2>PDF文档</h2>
        <DocumentViewer 
          file="/your-document.pdf" // 放在public目录下的PDF文件路径
          onLoadError={(err) => console.error('PDF加载失败:', err)}
        >
          {/* 可循环渲染所有页面，示例仅展示第一页 */}
          <PageViewer pageNumber={1} renderTextLayer={false} />
        </DocumentViewer>
      </div>

      {/* 右侧Chaindesk聊天机器人区 */}
      <div style={{ height: '85vh' }}>
        <h2>文档智能助手</h2>
        {/* 加载Chaindesk脚本并初始化 */}
        <Script
          type="module"
          src="https://cdn.jsdelivr.net/npm/@chaindesk/embeds@latest/dist/chatbox/index.js"
          onLoad={() => {
            Chatbox.initStandard({
              agentId: '你的有效AgentID', // 替换为实际可用的AgentID
              // 可选配置：添加用户信息、初始消息等
              // contact: { firstName: 'XXX', email: 'xxx@xxx.com' },
              // initialMessages: ['你好，我是文档助手，有问题随时问我！']
            });
          }}
        />
        {/* 聊天机器人容器 */}
        <chaindesk-chatbox-standard 
          style={{ width: '100%', height: 'calc(100% - 40px)' }} 
        />
      </div>
    </div>
  );
}

关键注意事项 #

1. 脚本加载时机：使用Next.js的Script组件并通过onLoad回调初始化聊天机器人，确保脚本加载完成后再执行初始化逻辑，避免之前因脚本未就绪导致的初始化失败问题。
2. PDF渲染兼容性：由于PDF.js不支持服务器端渲染，必须用dynamic导入并禁用SSR，否则会出现编译或运行错误。
3. 自定义元素兼容：React默认会对自定义HTML元素（如<chaindesk-chatbox-standard>）发出警告，可在next.config.js中添加配置忽略警告：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
};

module.exports = nextConfig;

4. AgentID有效性：必须替换代码中的你的有效AgentID为Chaindesk平台生成的真实ID，否则聊天机器人无法正常响应。

内容的提问来源于stack exchange，提问作者Ricardo Hernández