From 36d9b7b4959bcd44acf0f15cd270ea275f4ee831 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期四, 10 四月 2025 14:40:42 +0800
Subject: [PATCH] 聊天页面优化
---
src/components/SceneIntroDialog.tsx | 2
src/app/ai-scene/chat/page.tsx | 98 ++++++++++++++++++++++++-------------------------
2 files changed, 49 insertions(+), 51 deletions(-)
diff --git a/src/app/ai-scene/chat/page.tsx b/src/app/ai-scene/chat/page.tsx
index 6037a62..ebbdd6e 100644
--- a/src/app/ai-scene/chat/page.tsx
+++ b/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);
// 鍒囨崲鍦烘櫙鏃堕噸鏂板姞杞絠frame
@@ -52,61 +60,51 @@
setIframeKey(prev => prev + 1);
};
- // 娣诲姞鏂板満鏅�
- const handleAddNewScene = () => {
- const newScene = {
- title: `鏂板満鏅� ${services.length + 1}`,
- description: '杩欐槸涓�涓柊鐨凙I鍦烘櫙',
- 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>
{/* 婊氬姩鍐呭鍖� */}
diff --git a/src/components/SceneIntroDialog.tsx b/src/components/SceneIntroDialog.tsx
index c5d8a36..dd8c578 100644
--- a/src/components/SceneIntroDialog.tsx
+++ b/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 (
--
Gitblit v1.9.3