场景页面优化

hongjli

2025-04-10 dd898710af1491733f3f9e42df9d1dd137ada088

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

@@ -6,6 +6,12 @@
// 导入场景数据
const defaultServices = [
  {
    title: '补料进阶版',
    description: '智能动态分析产线，工位的缺料情况，降低停线风险',
    imageUrl: '/images/kanban.jpg',
    chatbotId: 'zO9YQDEHdIApG9zC',
  },
  {
    title: '补料',
    description: '智能动态分析产线，工位的缺料情况，降低停线风险',
    imageUrl: '/images/kanban.jpg',
@@ -171,40 +177,16 @@
      </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}