| | |
| | | </div> |
| | | |
| | | {/* 中间聊天区域 */} |
| | | <div className="flex-1 flex flex-col bg-white"> |
| | | {/* 顶部标题栏 */} |
| | | <div className="h-16 border-b flex items-center px-6 bg-white"> |
| | | <AnimatePresence mode="wait"> |
| | | <motion.div |
| | | key={selectedScene.chatbotId} |
| | | initial={{ opacity: 0, y: -20 }} |
| | | animate={{ opacity: 1, y: 0 }} |
| | | exit={{ opacity: 0, y: 20 }} |
| | | transition={{ duration: 0.3 }} |
| | | className="flex items-center" |
| | | > |
| | | <div className="w-8 h-8 rounded-lg overflow-hidden mr-3 relative"> |
| | | <img |
| | | src={selectedScene.imageUrl} |
| | | alt={selectedScene.title} |
| | | className="w-full h-full object-cover" |
| | | /> |
| | | <div className="absolute inset-0 bg-gradient-to-br from-black/20 to-transparent"></div> |
| | | </div> |
| | | <div> |
| | | <h1 className="text-xl font-bold text-gray-800"> |
| | | {selectedScene.title} |
| | | </h1> |
| | | <p className="text-sm text-gray-500"> |
| | | {selectedScene.description} |
| | | </p> |
| | | </div> |
| | | </motion.div> |
| | | </AnimatePresence> |
| | | <div className="flex-1 flex flex-col bg-white pt-20 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"> |
| | | {selectedScene.title} |
| | | </h1> |
| | | </div> |
| | | |
| | | {/* 聊天窗口 */} |
| | | <div className="flex-1 relative"> |
| | | <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} |