聊天页面优化

hongjli

2025-04-10 36d9b7b4959bcd44acf0f15cd270ea275f4ee831

聊天页面优化

 src/app/ai-scene/chat/page.tsx

@@ -2,6 +2,8 @@

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useSearchParams } from 'next/navigation';
import { useRouter } from 'next/navigation';

// 导入场景数据
const defaultServices = [
@@ -42,8 +44,14 @@
];

export default function AISceneChatPage() {
  const [services, setServices] = useState(defaultServices);
  const [selectedScene, setSelectedScene] = useState(services[0]);
  const searchParams = useSearchParams();
  const sceneId = searchParams.get('scene');
  const router = useRouter();
  
  // 根据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);

  // 切换场景时重新加载iframe
@@ -52,61 +60,51 @@
    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"
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold flex items-center">
              <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"
                }}
              />
            </svg>
            开启新场景
          </button>
            </h2>
            <button
              onClick={() => router.push('/ai-scene')}
              className="group flex items-center px-4 py-2 text-sm text-red-500 hover:text-white bg-red-50 hover:bg-red-500 rounded-lg transition-all duration-300 shadow-sm hover:shadow-md"
            >
              <svg 
                xmlns="http://www.w3.org/2000/svg" 
                className="h-4 w-4 mr-1.5 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="font-medium">返回</span>
            </button>
          </div>
        </div>

        {/* 滚动内容区 */}

 src/components/SceneIntroDialog.tsx

@@ -46,7 +46,7 @@

  const handleStartChat = () => {
    onClose();
    router.push('/ai-scene/chat');
    router.push(`/ai-scene/chat?scene=${scene.chatbotId}`);
  };

  return (