"use client";
|
|
import { useEffect, useRef } from 'react';
|
|
interface ChatDialogProps {
|
isOpen: boolean;
|
onClose: () => void;
|
chatbotId: string;
|
}
|
|
const ChatDialog = ({ isOpen, onClose, chatbotId }: ChatDialogProps) => {
|
const dialogRef = useRef<HTMLDivElement>(null);
|
const iframeContainerRef = useRef<HTMLDivElement>(null);
|
|
useEffect(() => {
|
// 每次 chatbotId 改变时更新 iframe
|
if (iframeContainerRef.current) {
|
// 清除现有的 iframe
|
iframeContainerRef.current.innerHTML = '';
|
|
// 创建新的 iframe
|
const iframe = document.createElement('iframe');
|
iframe.src = `http://121.43.139.99/chatbot/${chatbotId}`;
|
iframe.style.width = '100%';
|
iframe.style.height = '100%';
|
iframe.style.minHeight = '500px';
|
iframe.style.border = 'none';
|
iframe.allow = "microphone";
|
iframeContainerRef.current.appendChild(iframe);
|
}
|
}, [chatbotId]);
|
|
useEffect(() => {
|
const handleClickOutside = (event: MouseEvent) => {
|
if (dialogRef.current && !dialogRef.current.contains(event.target as Node)) {
|
onClose();
|
}
|
};
|
|
if (isOpen) {
|
document.addEventListener('mousedown', handleClickOutside);
|
}
|
|
return () => {
|
document.removeEventListener('mousedown', handleClickOutside);
|
};
|
}, [isOpen, onClose]);
|
|
// 使用 CSS 来控制显示/隐藏，而不是移除 DOM
|
return (
|
<div className={`fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 transition-opacity duration-300 ${isOpen ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>
|
<div ref={dialogRef} className="bg-white rounded-lg w-[90%] h-[90%] max-w-6xl relative">
|
<button
|
onClick={onClose}
|
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
|
>
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
</svg>
|
</button>
|
<div ref={iframeContainerRef} className="w-full h-full p-4" />
|
</div>
|
</div>
|
);
|
};
|
|
export default ChatDialog;
|
