聊天页面优化

hongjli

2025-04-10 c25c9b11715a58484f6355bb3162c3c76902215b

聊天页面优化

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

@@ -80,7 +80,7 @@
          {/* 新增场景按钮 */}
          <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"
            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" 
@@ -109,7 +109,7 @@
              >
                <motion.button
                  onClick={() => handleSceneChange(scene)}
                  className={`w-full p-4 rounded-lg text-left transition-all duration-500 relative
                  className={`w-full p-4 rounded-lg text-left transition-all duration-500 relative cursor-pointer
                    ${selectedScene.chatbotId === scene.chatbotId 
                      ? 'text-[#6ADBFF] bg-gray-100 shadow-sm' 
                      : 'text-gray-600 hover:text-[#6ADBFF] hover:bg-gray-50'
@@ -138,8 +138,20 @@
                      />
                      <div className="absolute inset-0 bg-gradient-to-br from-black/20 to-transparent"></div>
                    </div>
                    <div className="relative max-w-[120px]">
                      <span className="font-medium truncate block w-full">{scene.title}</span>
                    <div className="relative max-w-[120px] group/text">
                      <span className="font-medium truncate block w-full" ref={(el) => {
                        if (el) {
                          el.dataset.truncated = (el.scrollWidth > el.clientWidth).toString();
                        }
                      }}>{scene.title}</span>
                      {/* Tooltip - 只在文本被截断时显示 */}
                      <div 
                        className="absolute left-1/2 -translate-x-1/2 -top-2 -translate-y-full bg-gray-800/95 text-white text-sm px-3 py-2 rounded-lg opacity-0 invisible data-[show=true]:group-hover/text:opacity-100 data-[show=true]:group-hover/text:visible transition-all duration-200 whitespace-nowrap shadow-lg z-[1000]"
                        data-show={scene.title.length > 8}
                      >
                        <div className="absolute left-1/2 -translate-x-1/2 top-full border-[6px] border-transparent border-t-gray-800/95"></div>
                        {scene.title}
                      </div>
                    </div>
                  </div>
                  {selectedScene.chatbotId === scene.chatbotId && (
@@ -152,13 +164,6 @@
                    />
                  )}
                </motion.button>
                {/* Tooltip */}
                <div 
                  className="absolute left-1/2 -translate-x-1/2 -top-2 -translate-y-full bg-gray-800/95 text-white text-sm px-3 py-2 rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap shadow-lg z-[1000]"
                >
                  <div className="absolute left-1/2 -translate-x-1/2 top-full border-[6px] border-transparent border-t-gray-800/95"></div>
                  {scene.title}
                </div>
              </motion.div>
            ))}
          </div>