weiwojunchen.git

			@@ -1,46 +1,317 @@
			"use client";

			import { useState, useEffect } from 'react';
			import { useState, useEffect, Suspense } from 'react';
			import { motion, AnimatePresence } from 'framer-motion';
			import { useSearchParams } from 'next/navigation';
			import { useRouter } from 'next/navigation';
			import Image from 'next/image';
			import DataPreviewDialog from '@/components/DataPreviewDialog';

			// 导入场景数据
			const defaultServices = [
			{
			title: '插单进阶版',
			description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度',
			imageUrl: '/images/xuqiu.jpg',
			chatbotId: 'zO9YQDEHdIApG9zC',
			title: '库存管理知识库问答',
			description: '库存知识，提供专业的供应链库存知识问答',
			imageUrl: '/images/know.jpg',
			chatbotId: 'pDDfkU9HyBl2gzXx',
			background: '高效的库存管理需要丰富的专业知识和经验。AI知识库整合了大量供应链和库存管理的专业知识，可以快速解答各类库存管理问题。',
			instructions: '您可以询问任何与库存管理相关的问题，包括库存策略、成本控制、周转率优化等，AI助手将为您提供专业的解答和建议。'
			},
			{
			title: '扫地机器人销售推荐小助手',
			description: '智能化产品推荐提升导购效率',
			imageUrl: '/images/robot.jpg',
			chatbotId: 'sUAviPXvcEIw3oQC',
			background: '面对不同客户的个性化需求，如何准确推荐合适的产品是提升销售效率的关键。AI助手基于深度学习算法，能够精准分析客户需求，提供个性化的产品推荐。',
			instructions: '您可以描述客户的具体需求和偏好，AI助手将根据这些信息，为您推荐最适合的产品，并提供专业的产品介绍和销售建议。'
			},
			{
			title: '补料',
			description: '智能动态分析产线，工位的缺料情况，降低停线风险',
			imageUrl: '/images/kanban.jpg',
			chatbotId: 'JELkWpPLHQfRNhEH',
			background: '在生产线运行过程中，及时发现并解决缺料问题是保证生产效率的关键。AI系统通过实时监控和分析，帮助您提前预警可能的缺料风险，优化补料计划。',
			instructions: '您可以描述具体的生产线情况和缺料问题，AI助手将基于历史数据和实时状态，为您提供最优的补料方案和建议。',
			dataDescription: '本场景通过整合MES、SCADA、WMS等系统的实时数据，结合AI算法进行智能分析和预警。以下为演示数据，实际使用时将自动对接相关业务系统。',
			exampleData: `
			### 生产产品P时，详细工位的物料需求信息

			\| 工位 \| 原材料需求 \| 原材料消耗速率 \| 生产的产品 \| 产线名 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| 1 \| A1 \| 2/小时 \| P \| 产线1 \|
			\| 2 \| A2 \| 1/小时 \| P \| 产线1 \|
			\| 3 \| A3 \| 2/小时 \| P \| 产线1 \|
			\| 4 \| A4 \| 4/小时 \| P \| 产线1 \|
			\| 5 \| A5 \| 5/小时 \| P \| 产线1 \|
			\| 6 \| - \| - \| P \| 产线1 \|
			\| 7 \| A7 \| 3/小时 \| P \| 产线1 \|
			\| 8 \| - \| - \| P \| 产线1 \|
			\| 9 \| A9 \| 3/小时 \| P \| 产线1 \|

			### 可以通过集成线边库存获取（IOT，传感器，ERP系统等），人工目视发现缺料或者物料较少时，人为触发（飞书，微信等IM工具上输入/语音，XX工位，XX物料缺料）
			### 当前产线现场库存量

			\| 原材料 \| 数量 \| 产线名 \|
			\| :--: \| :--: \| :--: \|
			\| A1 \| 10 \| 产线1 \|
			\| A2 \| 10 \| 产线1 \|
			\| A3 \| 10 \| 产线1 \|
			\| A4 \| 10 \| 产线1 \|
			\| A5 \| 10 \| 产线1 \|
			\| A6 \| 10 \| 产线1 \|
			\| A7 \| 10 \| 产线1 \|
			\| A8 \| 10 \| 产线1 \|
			\| A9 \| 10 \| 产线1 \|

			### 需要通过ERP/WMS获取数据，若无法获取ERP/WMS系统数据，可直接由人工呼叫具体补货数量，生成仓库补货看板
			### 当前原材料库中，存放库位和库存量

			\| 原材料 \| 库位 \| 数量 \|
			\| :--: \| :--: \| :--: \|
			\| A1 \| 3-2 \| 100 \|
			\| A2 \| 3-1 \| 100 \|
			\| A3 \| 1-1 \| 100 \|
			\| A4 \| 1-2 \| 100 \|
			\| A5 \| 2-1 \| 100 \|
			\| A7 \| 2-2 \| 100 \|
			\| A9 \| 4-1 \| 100 \|
			`
			},
			{
			title: '插单',
			title: '插单1.0',
			description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度',
			imageUrl: '/images/xuqiu.jpg',
			chatbotId: 'DfH4cIzujVGvn5iR',
			chatbotId: 'RhMYLHI1SZNiX4kl',
			background: '在生产计划执行过程中，常常会遇到紧急订单需要插单的情况。AI系统可以快速评估插单对现有生产计划的影响，并提供最优的插单方案。',
			instructions: '请提供需要插单的订单信息，包括产品类型、数量和期望交付时间，AI助手将为您分析可行性并给出具体的插单建议。',
			dataDescription: '本场景通过整合ERP、MES等系统的实时数据，结合AI算法进行智能分析和预警。以下为演示数据，实际使用时将自动对接相关业务系统。',
			exampleData: `
			### 基础数据：产品：A，B，C
			### A, B, C的BOM

			\| 产品 \| 物料 \| 物料单位用量 \|
			\| :--: \| :--: \| :--: \|
			\| A \| 1001 \| 1 \|
			\| A \| 1002 \| 3 \|
			\| A \| 1003 \| 3 \|
			\| B \| 1001 \| 1 \|
			\| B \| 1002 \| 2 \|
			\| B \| 1004 \| 3 \|
			\| C \| 1005 \| 1 \|
			\| C \| 1002 \| 3 \|
			\| C \| 1003 \| 2 \|

			### 需求数据

			\| 产品 \| 需求数量 \| 需求日期 \| 需求单号 \| 客户 \| 单价 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| A \| 1000 \| 2/2/2025 \| A1001 \| 中石油 \| 100.0 \|
			\| A \| 200 \| 3/2/2025 \| A1002 \| 中建二局 \| 95.0 \|
			\| A \| 500 \| 5/2/2025 \| A1003 \| 宝武集团 \| 90.0 \|
			\| B \| 2000 \| 3/2/2025 \| B1001 \| 中石油 \| 95.0 \|
			\| B \| 300 \| 4/2/2025 \| B1002 \| 中建二局 \| 90.0 \|
			\| B \| 100 \| 7/2/2025 \| B1003 \| 宝武集团 \| 100.0 \|
			\| C \| 800 \| 4/2/2025 \| C1001 \| 中石油 \| 85.0 \|
			\| C \| 600 \| 7/2/2025 \| C1002 \| 中建二局 \| 90.0 \|
			\| C \| 400 \| 8/2/2025 \| C1003 \| 宝武集团 \| 90.0 \|

			### 假设当前日期是2月1日，计划开始日期是2月2日，当前有一个插单需求：

			\| 产品 \| 需求数量 \| 需求日期 \| 需求单号 \| 客户 \| 单价 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| A \| 200 \| 5/2/2025 \| D1001 \| 中石油 \| 100.0 \|

			### 已有采购订单

			\| 供应商名称 \| 物料 \| 采购订单号 \| 预计到货日期 \| 采购数量 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| S1 \| 1001 \| PO1 \| 2/2/2025 \| 2000 \|
			\| S2 \| 1002 \| PO2 \| 2/2/2025 \| 1000 \|
			\| S3 \| 1003 \| PO3 \| 2/2/2025 \| 1000 \|
			\| S4 \| 1004 \| PO4 \| 2/2/2025 \| 800 \|
			\| S5 \| 1005 \| PO5 \| 2/2/2025 \| 800 \|

			### 供应商列表

			\| 供应商名称 \| 物料 \| 联系方式 \|
			\| :--: \| :--: \| :--: \|
			\| S1 \| 1001 \| chenqinghonghs@163.com \|
			\| S2 \| 1002 \| chenqinghonghs@163.com \|
			\| S3 \| 1003 \| chenqinghonghs@163.com \|
			\| S4 \| 1004 \| chenqinghonghs@163.com \|
			\| S5 \| 1005 \| 16673976114@163.com \|
			`
			},
			{
			title: '科沃斯销售推荐小助手',
			description: '智能化产品推荐提升导购效率',
			imageUrl: '/images/robot.jpg',
			chatbotId: 'sUAviPXvcEIw3oQC',
			title: '插单2.0',
			description: '智能评估需求插单对产能，原材料和交付服务的影响，提升客户满意度',
			imageUrl: '/images/chadan2.jpg',
			chatbotId: 'zO9YQDEHdIApG9zC',
			background: '在生产计划执行过程中，常常会遇到紧急订单需要插单的情况。AI系统可以快速评估插单对现有生产计划的影响，并提供最优的插单方案。',
			instructions: '请提供需要插单的订单信息，包括产品类型、数量和期望交付时间，AI助手将为您分析可行性并给出具体的插单建议。',
			dataDescription: '本场景通过整合ERP、MES等系统的实时数据，结合AI算法进行智能分析和预警。以下为演示数据，实际使用时将自动对接相关业务系统。',
			exampleData: `
			### 基础数据：产品：A，B，C
			### A, B, C的BOM

			\| 产品 \| 物料 \| 物料单位用量 \|
			\| :--: \| :--: \| :--: \|
			\| A \| 1001 \| 1 \|
			\| A \| 1002 \| 3 \|
			\| A \| 1003 \| 3 \|
			\| B \| 1001 \| 1 \|
			\| B \| 1002 \| 2 \|
			\| B \| 1004 \| 3 \|
			\| C \| 1005 \| 1 \|
			\| C \| 1002 \| 3 \|
			\| C \| 1003 \| 2 \|

			### 需求数据

			\| 产品 \| 需求数量 \| 需求日期 \| 需求单号 \| 客户 \| 单价 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| A \| 1000 \| 2/2/2025 \| A1001 \| 中石油 \| 100.0 \|
			\| A \| 200 \| 3/2/2025 \| A1002 \| 中建二局 \| 95.0 \|
			\| A \| 500 \| 5/2/2025 \| A1003 \| 宝武集团 \| 90.0 \|
			\| B \| 2000 \| 3/2/2025 \| B1001 \| 中石油 \| 95.0 \|
			\| B \| 300 \| 4/2/2025 \| B1002 \| 中建二局 \| 90.0 \|
			\| B \| 100 \| 7/2/2025 \| B1003 \| 宝武集团 \| 100.0 \|
			\| C \| 800 \| 4/2/2025 \| C1001 \| 中石油 \| 85.0 \|
			\| C \| 600 \| 7/2/2025 \| C1002 \| 中建二局 \| 90.0 \|
			\| C \| 400 \| 8/2/2025 \| C1003 \| 宝武集团 \| 90.0 \|

			### 假设当前日期是2月1日，计划开始日期是2月2日，当前有一个插单需求：

			\| 产品 \| 需求数量 \| 需求日期 \| 需求单号 \| 客户 \| 单价 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| A \| 200 \| 5/2/2025 \| D1001 \| 中石油 \| 100.0 \|

			### 已有采购订单

			\| 供应商名称 \| 物料 \| 采购订单号 \| 预计到货日期 \| 采购数量 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| S1 \| 1001 \| PO1 \| 2/2/2025 \| 2000 \|
			\| S2 \| 1002 \| PO2 \| 2/2/2025 \| 1000 \|
			\| S3 \| 1003 \| PO3 \| 2/2/2025 \| 1000 \|
			\| S4 \| 1004 \| PO4 \| 2/2/2025 \| 800 \|
			\| S5 \| 1005 \| PO5 \| 2/2/2025 \| 800 \|

			### 供应商列表

			\| 供应商名称 \| 物料 \| 联系方式 \|
			\| :--: \| :--: \| :--: \|
			\| S1 \| 1001 \| chenqinghonghs@163.com \|
			\| S2 \| 1002 \| chenqinghonghs@163.com \|
			\| S3 \| 1003 \| chenqinghonghs@163.com \|
			\| S4 \| 1004 \| chenqinghonghs@163.com \|
			\| S5 \| 1005 \| 16673976114@163.com \|
			`
			},
			{
			title: '库存管理知识库问答',
			description: '库存知识，提供专业的供应链库存知识问答',
			imageUrl: '/images/know.jpg',
			chatbotId: 'pDDfkU9HyBl2gzXx',
			title: '供应链全景洞察',
			description: '通过AI Agent与APS的深度协同，将插单响应从"被动救火"升级为"预测-决策-执行"三位一体的智能运营模式，助力新能源业务增长。',
			imageUrl: '/images/333.png',
			chatbotId: 'SCPanoramaInsight',
			background: `供应链全景洞察系统是新一代智能供应链管理平台的核心引擎。该AI系统能够解决传统供应链管理中的四大关键问题：

			生产计划与产能影响评估：
			- 实时监控生产线状态，动态评估产能利用率
			- 基于历史数据和实时订单，智能预测生产瓶颈
			- 自动调整生产计划，最大化产能利用效率
			- 提供多场景生产计划对比分析，辅助决策制定

			供应协同能力评估：
			- 实时追踪供应商交付状态，评估供应风险
			- 智能分析供应商绩效，提供供应商优化建议
			- 预测原材料需求，提前启动采购流程
			- 构建供应链网络韧性模型，提升抗风险能力

			交付履约风险评估：
			- 基于订单、库存、生产进度进行综合风险评估
			- 提前识别潜在延期风险，制定应对预案
			- 实时跟踪交付进度，确保客户满意度
			- 建立客户预期管理机制，提升服务体验

			成本与财务影响评估：
			- 全链路成本追踪，精确计算各环节成本构成
			- 动态成本优化建议，降低整体运营成本
			- 财务影响预测分析，支持商业决策
			- ROI评估模型，量化改进措施的财务效益`,
			instructions: `您可以通过以下方式与供应链全景洞察系统互动：

			场景一：插单影响分析
			提供新订单信息，系统将从四个维度评估插单可行性和影响。

			场景二：生产计划优化
			描述当前生产状况，获取智能优化建议和风险预警。

			场景三：供应链风险评估
			输入供应商或原材料信息，获取供应风险分析和应对策略。

			场景四：成本优化分析
			提供成本相关数据，获取成本优化建议和财务影响评估。

			系统将基于实时数据和AI算法，为您提供专业的分析报告和决策建议。`,
			dataDescription: '本场景整合了OMS、WMS等多个系统的实时数据，通过AI算法进行深度分析。以下为新能源行业的模拟数据，实际应用中将自动对接企业现有系统。',
			exampleData: `
			### 订单需求数据 (OMS系统)

			\| 订单号 \| 产品型号 \| 数量 \| 客户名称 \| 预期交付日期 \| 优先级 \| 订单金额 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| SO20250201001 \| NEV-Battery-A \| 500 \| 比亚迪 \| 2025-02-15 \| 高 \| 2,500,000 \|
			\| SO20250201002 \| NEV-Motor-B \| 200 \| 蔚来汽车 \| 2025-02-20 \| 中 \| 1,800,000 \|
			\| SO20250201003 \| NEV-Controller-C \| 300 \| 理想汽车 \| 2025-02-25 \| 高 \| 3,200,000 \|
			\| SO20250201004 \| NEV-Charger-D \| 150 \| 小鹏汽车 \| 2025-03-01 \| 中 \| 1,200,000 \|

			### 库存数据 (WMS系统)

			\| 物料编码 \| 物料名称 \| 当前库存 \| 安全库存 \| 在途数量 \| 预计到货时间 \| 库位 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| MAT001 \| 锂电池芯 \| 1,200 \| 500 \| 800 \| 2025-02-10 \| A区-01 \|
			\| MAT002 \| 电机定子 \| 350 \| 200 \| 150 \| 2025-02-12 \| B区-02 \|
			\| MAT003 \| 控制芯片 \| 180 \| 100 \| 200 \| 2025-02-15 \| C区-03 \|
			\| MAT004 \| 充电模块 \| 95 \| 50 \| 100 \| 2025-02-18 \| D区-04 \|

			### 供应商绩效数据

			\| 供应商名称 \| 供应物料 \| 按时交付率 \| 质量合格率 \| 价格竞争力 \| 风险等级 \|
			\| :--: \| :--: \| :--: \| :--: \| :--: \| :--: \|
			\| 宁德时代 \| 锂电池芯 \| 95% \| 99.5% \| 高 \| 低 \|
			\| 汇川技术 \| 电机定子 \| 88% \| 98.2% \| 中 \| 中 \|
			\| 地平线 \| 控制芯片 \| 92% \| 99.8% \| 中 \| 低 \|
			\| 特来电 \| 充电模块 \| 85% \| 97.5% \| 高 \| 中 \|
			`
			},
			];

			export default function AISceneChatPage() {
			const [services, setServices] = useState(defaultServices);
			const [selectedScene, setSelectedScene] = useState(services[0]);
			return (
			<Suspense fallback={<div>Loading...</div>}>
			<AISceneChatContent />
			</Suspense>
			);
			}

			function AISceneChatContent() {
			const searchParams = useSearchParams();
			const sceneId = searchParams.get('scene') \|\| searchParams.get('chatbotId');
			const router = useRouter();
			const [showDataPreview, setShowDataPreview] = useState(false);

			// 根据URL参数找到对应的场景
			const initialScene = defaultServices.find(s => s.chatbotId === sceneId) \|\| defaultServices[0];

			// 修改为使用完整的场景数据
			const [services] = useState([initialScene]);
			const [selectedScene, setSelectedScene] = useState(initialScene);
			const [iframeKey, setIframeKey] = useState(0);
			const [token, setToken] = useState<string \| null>(null);

			useEffect(() => {
			// Get token from localStorage
			const storedToken = localStorage.getItem('token');
			setToken(storedToken);
			}, []);

			// 切换场景时重新加载iframe
			const handleSceneChange = (scene: typeof services[0]) => {
			@@ -48,66 +319,58 @@
			setIframeKey(prev => prev + 1);
			};

			// 添加新场景
			const handleAddNewScene = () => {
			const newScene = {
			title: `新场景 ${services.length + 1}`,
			description: '这是一个新的AI场景',
			imageUrl: '/images/robot.jpg', // 默认图片
			chatbotId: `new-scene-${Date.now()}`, // 生成唯一ID
			};
			setServices(prev => [...prev, newScene]);
			};

			return (
			<div className="h-screen flex bg-white">
			{/* 左侧场景选项卡 */}
			<div className="w-64 bg-white border-r flex flex-col">
			{/* 固定头部 */}
			<div className="p-4 pt-20 bg-white">
			<h2 className="text-xl font-bold flex items-center mb-4">
			<span className="text-gray-900">
			AI场景
			</span>
			<motion.span
			className="ml-2 inline-block w-2 h-2 rounded-full bg-[#6ADBFF]"
			animate={{
			scale: [1, 1.5, 1],
			opacity: [0.7, 1, 0.7]
			}}
			transition={{
			duration: 2,
			repeat: Infinity,
			ease: "easeInOut"
			}}
			/>
			</h2>

			{/* 新增场景按钮 */}
			<button
			onClick={handleAddNewScene}
			className="w-full p-3 bg-[#EEF3FD] text-[#4080FF] rounded-lg font-medium transition-all duration-300 flex items-center hover:bg-[#E1E9FA] group cursor-pointer"
			>
			<svg
			className="w-5 h-5 mr-2"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			>
			<path
			d="M12 5v14M5 12h14"
			strokeWidth="2"
			strokeLinecap="round"
			strokeLinejoin="round"
			/>
			</svg>
			开启新场景
			</button>
			<div className="pt-[65px] bg-white">
			<div className="h-12 px-6 flex items-center border-b">
			<div className="flex items-center">
			<button
			onClick={() => router.push('/ai-scene')}
			className="group inline-flex items-center text-sm text-gray-500 hover:text-red-500 transition-all duration-300 cursor-pointer"
			>
			<svg
			xmlns="http://www.w3.org/2000/svg"
			className="h-4 w-4 transition-transform duration-300 group-hover:-translate-x-0.5"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
			>
			<path
			strokeLinecap="round"
			strokeLinejoin="round"
			strokeWidth={2}
			d="M10 19l-7-7m0 0l7-7m-7 7h18"
			/>
			</svg>
			<span className="ml-1.5">返回</span>
			</button>
			<div className="mx-3 h-4 w-px bg-gray-200"></div>
			<h2 className="text-base font-medium text-gray-900 flex items-center">
			AI场景
			<motion.span
			className="ml-2 inline-block w-1.5 h-1.5 rounded-full bg-[#6ADBFF]"
			animate={{
			scale: [1, 1.5, 1],
			opacity: [0.7, 1, 0.7]
			}}
			transition={{
			duration: 2,
			repeat: Infinity,
			ease: "easeInOut"
			}}
			/>
			</h2>
			</div>
			</div>
			</div>

			{/* 滚动内容区 */}
			<div className="flex-1 overflow-y-auto px-4 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[#E5E6EB] [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-[#C9CDD4]">
			<div className="space-y-3 py-4">
			<div className="flex-1 overflow-y-auto">
			{/* 场景列表 */}
			<div className="px-4 py-2 space-y-3">
			{services.map((scene) => (
			<motion.div
			key={scene.chatbotId}
			@@ -137,9 +400,11 @@
			)}
			<div className="flex items-center relative z-10">
			<div className="w-8 h-8 rounded-lg overflow-hidden mr-3 relative flex-shrink-0">
			<img
			<Image
			src={scene.imageUrl}
			alt={scene.title}
			width={32}
			height={32}
			className="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110"
			/>
			<div className="absolute inset-0 bg-gradient-to-br from-black/20 to-transparent"></div>
			@@ -173,11 +438,79 @@
			</motion.div>
			))}
			</div>

			{/* 场景信息展示区域 */}
			<div className="p-4 space-y-4">
			{/* 场景背景 */}
			<div className="bg-gray-50 rounded-lg p-4 border border-gray-100 hover:border-gray-200 transition-colors duration-300 shadow-sm">
			<div className="flex items-center gap-2 mb-2">
			<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
			</svg>
			<h3 className="text-sm font-medium text-gray-700">场景背景</h3>
			</div>
			<p className="text-gray-600 text-sm leading-relaxed">
			{selectedScene.background}
			</p>
			</div>

			{/* 使用说明 */}
			<div className="bg-gray-50 rounded-lg p-4 border border-gray-100 hover:border-gray-200 transition-colors duration-300 shadow-sm">
			<div className="flex items-center gap-2 mb-2">
			<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
			</svg>
			<h3 className="text-sm font-medium text-gray-700">使用说明</h3>
			</div>
			<p className="text-gray-600 text-sm leading-relaxed">
			{selectedScene.instructions}
			</p>
			</div>

			{/* 数据说明 - 只在补料和插单场景显示 */}
			{(selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' \|\|
			selectedScene.chatbotId === 'RhMYLHI1SZNiX4kl' \|\|
			selectedScene.chatbotId === 'zO9YQDEHdIApG9zC' \|\|
			selectedScene.chatbotId === 'SCPanoramaInsight') && (
			<>
			<div className="bg-gray-50 rounded-lg p-4 border border-gray-100 hover:border-gray-200 transition-colors duration-300 shadow-sm">
			<div className="flex items-center justify-between mb-2">
			<div className="flex items-center gap-2">
			<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z M9 11h6 M12 8v6" />
			</svg>
			<h3 className="text-sm font-medium text-gray-700">数据说明</h3>
			</div>
			<button
			onClick={() => setShowDataPreview(true)}
			className="p-1.5 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-300"
			title="查看演示数据"
			>
			<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
			</svg>
			</button>
			</div>
			<p className="text-gray-600 text-sm leading-relaxed">
			{selectedScene.dataDescription \|\| '本场景所使用的数据均为模拟数据，仅用于演示目的。在实际应用中，将根据您的具体需求使用真实数据进行分析和处理。'}
			</p>
			</div>

			<DataPreviewDialog
			isOpen={showDataPreview}
			onClose={() => setShowDataPreview(false)}
			markdownContent={selectedScene.exampleData \|\| ''}
			sceneType={selectedScene.chatbotId === 'JELkWpPLHQfRNhEH' ? 'buliao' :
			selectedScene.chatbotId === 'SCPanoramaInsight' ? 'panorama' : 'chadan'}
			/>
			</>
			)}
			</div>
			</div>
			</div>

			{/* 中间聊天区域 */}
			<div className="flex-1 flex flex-col bg-white pt-20 overflow-hidden">
			<div className="flex-1 flex flex-col bg-white pt-[65px] overflow-hidden">
			{/* 场景标题 */}
			<div className="h-16 bg-white flex items-center justify-center px-6 border-b">
			<h1 className="text-lg font-medium text-gray-900">
			@@ -186,24 +519,14 @@
			</div>

			{/* 聊天窗口 */}
			<div className="flex-1 relative [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-[#E5E6EB] [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-[#C9CDD4]">
			<AnimatePresence mode="wait">
			<motion.div
			key={iframeKey}
			className="absolute inset-0"
			initial={{ opacity: 0, scale: 0.98 }}
			animate={{ opacity: 1, scale: 1 }}
			exit={{ opacity: 0, scale: 1.02 }}
			transition={{ duration: 0.3 }}
			>
			<iframe
			src={`http://121.43.139.99/chatbot/${selectedScene.chatbotId}`}
			className="w-full h-full"
			style={{ border: 'none' }}
			allow="microphone"
			/>
			</motion.div>
			</AnimatePresence>
			<div className="flex-1 relative">
			<iframe
			key={iframeKey}
			className="w-full h-full rounded-lg"
			src={`http://121.43.139.99:7000/chatbot/${selectedScene.chatbotId}${token ? `?token=${token}` : ''}`}
			frameBorder="0"
			allow="microphone"
			></iframe>
			</div>
			</div>
			</div>