|
@@ -3,21 +3,19 @@ import NavBarNormal from "@/components/NavBarNormal/index";
|
|
import PageCustom from "@/components/page-custom/index";
|
|
import PageCustom from "@/components/page-custom/index";
|
|
import Taro, { useDidShow, useRouter, useUnload } from "@tarojs/taro";
|
|
import Taro, { useDidShow, useRouter, useUnload } from "@tarojs/taro";
|
|
import ChatMessage from "@/components/chat-message";
|
|
import ChatMessage from "@/components/chat-message";
|
|
-import style from "./index.module.less";
|
|
|
|
import InputBar from "./components/input-bar";
|
|
import InputBar from "./components/input-bar";
|
|
-import { useEffect, useState, useRef } from "react";
|
|
|
|
|
|
+import { useEffect, useState, useRef, useMemo } from "react";
|
|
import { useTextChat } from "@/store/textChat";
|
|
import { useTextChat } from "@/store/textChat";
|
|
-import { EAI_MODEL } from "@/consts/enum";
|
|
|
|
-import { EChatRole, TRobotMessage, TMessage, EContentType } from "@/types/bot";
|
|
|
|
|
|
+import { TRobotMessage, TMessage, EContentType } from "@/types/bot";
|
|
|
|
|
|
-import ChatWelcome from "./components/chat-welcome";
|
|
|
|
|
|
+import ChatGreeting from "./components/ChatGreeting";
|
|
import IconArrowLeft from "@/components/icon/icon-arrow-left";
|
|
import IconArrowLeft from "@/components/icon/icon-arrow-left";
|
|
import PersonalCard from "./components/personal-card";
|
|
import PersonalCard from "./components/personal-card";
|
|
import { useAgentStore } from "@/store/agentStore";
|
|
import { useAgentStore } from "@/store/agentStore";
|
|
|
|
|
|
import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
|
|
import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
|
|
import { getMessageHistories } from "@/service/bot";
|
|
import { getMessageHistories } from "@/service/bot";
|
|
-// import { useAppStore } from "@/store/appStore";
|
|
|
|
|
|
+
|
|
|
|
|
|
import RecommendQuestions from './components/RecommendQuestions'
|
|
import RecommendQuestions from './components/RecommendQuestions'
|
|
import {useKeyboard} from './components/keyboard'
|
|
import {useKeyboard} from './components/keyboard'
|
|
@@ -25,7 +23,7 @@ import {useKeyboard} from './components/keyboard'
|
|
|
|
|
|
export default function Index() {
|
|
export default function Index() {
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
- // const bottomSafeHeight = useAppStore((state) => state.bottomSafeHeight);
|
|
|
|
|
|
+
|
|
const { agentId, isVisitor } = router.params;
|
|
const { agentId, isVisitor } = router.params;
|
|
if (!agentId) {
|
|
if (!agentId) {
|
|
return <View>没有相应的智能体</View>;
|
|
return <View>没有相应的智能体</View>;
|
|
@@ -40,10 +38,9 @@ const agent = useAgentStore((state) => {
|
|
return state.agent
|
|
return state.agent
|
|
});
|
|
});
|
|
const scrollViewRef = useRef<any>(null);
|
|
const scrollViewRef = useRef<any>(null);
|
|
- const [deepThink, setDeepThink] = useState(EAI_MODEL.DeepseekChat);
|
|
|
|
const messageList = useTextChat((state) => state.list);
|
|
const messageList = useTextChat((state) => state.list);
|
|
|
|
|
|
- const {keyboardHeight, marginTopOffset} = useKeyboard(scrollViewRef, messageList, '#messageList', '#scrollView')
|
|
|
|
|
|
+ const {keyboardHeight, marginTopOffset, triggerHeightUpdate,} = useKeyboard(scrollViewRef, '#messageList', '#scrollView')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -83,6 +80,9 @@ const agent = useAgentStore((state) => {
|
|
}
|
|
}
|
|
return item
|
|
return item
|
|
})
|
|
})
|
|
|
|
+ const allMessages = useMemo(()=> [...[...parsedList].reverse(), ...messageList], [parsedList, messageList])
|
|
|
|
+ const messagesLength = useMemo(() => allMessages.length, [allMessages.length]);
|
|
|
|
+ const prevLengthRef = useRef(messagesLength);
|
|
|
|
|
|
const [showWelcome, setShowWelcome] = useState(!list.length);
|
|
const [showWelcome, setShowWelcome] = useState(!list.length);
|
|
|
|
|
|
@@ -112,10 +112,12 @@ const agent = useAgentStore((state) => {
|
|
}
|
|
}
|
|
}, [agentId, isVisitor]);
|
|
}, [agentId, isVisitor]);
|
|
|
|
|
|
|
|
+ // 是否显示欢迎 ui
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
setShowWelcome(!messageList.length && !list.length);
|
|
setShowWelcome(!messageList.length && !list.length);
|
|
}, [list, messageList]);
|
|
}, [list, messageList]);
|
|
|
|
|
|
|
|
+ // 首次进入界面滚动到底
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
if (pageIndex === 1) {
|
|
if (pageIndex === 1) {
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
@@ -124,21 +126,30 @@ const agent = useAgentStore((state) => {
|
|
}
|
|
}
|
|
}, [pageIndex]);
|
|
}, [pageIndex]);
|
|
|
|
|
|
|
|
+ // 首次进入聊天生成 session id
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
genSessionId();
|
|
genSessionId();
|
|
}, []);
|
|
}, []);
|
|
|
|
|
|
|
|
+ // 监听消息列表变化,触发键盘高度重新计算
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ // 只在长度真正变化时才触发
|
|
|
|
+ if (prevLengthRef.current !== messagesLength) {
|
|
|
|
+ prevLengthRef.current = messagesLength;
|
|
|
|
+
|
|
|
|
+ // 使用 setTimeout 确保 DOM 更新完成后再计算高度
|
|
|
|
+ const timer = setTimeout(() => {
|
|
|
|
+ triggerHeightUpdate();
|
|
|
|
+ }, 100);
|
|
|
|
+
|
|
|
|
+ return () => clearTimeout(timer);
|
|
|
|
+ }
|
|
|
|
+ }, [messagesLength, triggerHeightUpdate]);
|
|
|
|
+
|
|
useUnload(() => {
|
|
useUnload(() => {
|
|
destroy();
|
|
destroy();
|
|
});
|
|
});
|
|
|
|
|
|
- const switchDeepThink = () => {
|
|
|
|
- if (deepThink === EAI_MODEL.DeepseekChat) {
|
|
|
|
- setDeepThink(EAI_MODEL.DeepseekReasoner);
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- setDeepThink(EAI_MODEL.DeepseekChat);
|
|
|
|
- };
|
|
|
|
|
|
|
|
const renderNavLeft = () => {
|
|
const renderNavLeft = () => {
|
|
return (
|
|
return (
|
|
@@ -154,35 +165,22 @@ const agent = useAgentStore((state) => {
|
|
|
|
|
|
|
|
|
|
// 大背景可以是视频,也可以是图片
|
|
// 大背景可以是视频,也可以是图片
|
|
- const renderTopBg = ()=> {
|
|
|
|
|
|
+ const getBgContent = ()=> {
|
|
if(!agent?.avatarUrl || !!!agent?.enabledChatBg){
|
|
if(!agent?.avatarUrl || !!!agent?.enabledChatBg){
|
|
- return <></>;
|
|
|
|
- }
|
|
|
|
- if(agent.avatarUrl.lastIndexOf(".mp4") > -1){
|
|
|
|
- return <Video
|
|
|
|
- controls={false}
|
|
|
|
- showCenterPlayBtn={false}
|
|
|
|
- loop={true}
|
|
|
|
- muted={true}
|
|
|
|
- autoplay
|
|
|
|
- objectFit="cover"
|
|
|
|
- className={style.topBg}
|
|
|
|
- src={agent.avatarUrl}
|
|
|
|
- />
|
|
|
|
|
|
+ return ''
|
|
}
|
|
}
|
|
- // 自定义背景样式
|
|
|
|
- const bgImageStyle = {
|
|
|
|
- backgroundImage: `url(${agent?.avatarUrl})`,
|
|
|
|
- };
|
|
|
|
- return <View className={style.topBg} style={bgImageStyle}></View>
|
|
|
|
|
|
+ return agent?.avatarUrl
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
|
|
return (
|
|
return (
|
|
- <PageCustom fullPage style={{ overflow: "hidden" }}>
|
|
|
|
|
|
+ <PageCustom fullPage style={{ overflow: "hidden" }} styleBg={getBgContent()}>
|
|
<NavBarNormal blur leftColumn={renderNavLeft}>
|
|
<NavBarNormal blur leftColumn={renderNavLeft}>
|
|
{/* <>{`${scrollTop}`}--{autoScroll ? 'true': 'false'}</> */}
|
|
{/* <>{`${scrollTop}`}--{autoScroll ? 'true': 'false'}</> */}
|
|
</NavBarNormal>
|
|
</NavBarNormal>
|
|
- {renderTopBg()}
|
|
|
|
<View
|
|
<View
|
|
className="flex flex-col w-full h-full relative z-10 flex-1"
|
|
className="flex flex-col w-full h-full relative z-10 flex-1"
|
|
style={{ top: `${marginTopOffset}px` }}
|
|
style={{ top: `${marginTopOffset}px` }}
|
|
@@ -200,11 +198,11 @@ const agent = useAgentStore((state) => {
|
|
onScrollToUpper={onScrollToUpper}
|
|
onScrollToUpper={onScrollToUpper}
|
|
onScrollToLower={()=> setAutoScroll(true)}
|
|
onScrollToLower={()=> setAutoScroll(true)}
|
|
>
|
|
>
|
|
- {showWelcome && <ChatWelcome agent={agent} />}
|
|
|
|
<View id="messageList" className="flex flex-col gap-8 px-18" onTouchMove={handleTouchMove}>
|
|
<View id="messageList" className="flex flex-col gap-8 px-18" onTouchMove={handleTouchMove}>
|
|
|
|
+ {showWelcome && <ChatGreeting agent={agent} />}
|
|
{/* 复制 histories 再 reverse 否则会影响 state */}
|
|
{/* 复制 histories 再 reverse 否则会影响 state */}
|
|
- {[...[...parsedList].reverse(), ...messageList].map((message) => {
|
|
|
|
- const reasoningContent = message.role === EChatRole.Assistant ? message.reasoningContent : ''
|
|
|
|
|
|
+ {allMessages.map((message) => {
|
|
|
|
+ const reasoningContent = (message as any).reasoningContent || '';
|
|
return (
|
|
return (
|
|
<ChatMessage
|
|
<ChatMessage
|
|
key={message.msgUk}
|
|
key={message.msgUk}
|
|
@@ -217,7 +215,7 @@ const agent = useAgentStore((state) => {
|
|
);
|
|
);
|
|
})}
|
|
})}
|
|
</View>
|
|
</View>
|
|
- <View className="pb-80 pt-8">
|
|
|
|
|
|
+ <View className="pb-40 pt-8">
|
|
{(agent) && <RecommendQuestions agent={agent} />}
|
|
{(agent) && <RecommendQuestions agent={agent} />}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</ScrollView>
|
|
@@ -231,20 +229,9 @@ const agent = useAgentStore((state) => {
|
|
}}
|
|
}}
|
|
|
|
|
|
>
|
|
>
|
|
- {/* <View
|
|
|
|
- onClick={switchDeepThink}
|
|
|
|
- className={
|
|
|
|
- deepThink === EAI_MODEL.DeepseekReasoner
|
|
|
|
- ? style.deepMindMarkActive
|
|
|
|
- : style.deepMindMark
|
|
|
|
- }
|
|
|
|
- >
|
|
|
|
- 深度思考(R1)
|
|
|
|
- </View> */}
|
|
|
|
<View className="bg-[#F5FAFF]">
|
|
<View className="bg-[#F5FAFF]">
|
|
{agent && (
|
|
{agent && (
|
|
<InputBar
|
|
<InputBar
|
|
- aiModel={deepThink}
|
|
|
|
agent={agent}
|
|
agent={agent}
|
|
histories={list}
|
|
histories={list}
|
|
setShowWelcome={setShowWelcome}
|
|
setShowWelcome={setShowWelcome}
|