|
@@ -1,30 +1,26 @@
|
|
|
import { View, ScrollView, Video } from "@tarojs/components";
|
|
|
import NavBarNormal from "@/components/NavBarNormal/index";
|
|
|
import PageCustom from "@/components/page-custom/index";
|
|
|
-import Taro, { useRouter, useUnload } from "@tarojs/taro";
|
|
|
+import Taro, { useDidShow, useRouter, useUnload } from "@tarojs/taro";
|
|
|
import ChatMessage from "@/components/chat-message";
|
|
|
import style from "./index.module.less";
|
|
|
import InputBar from "./components/input-bar";
|
|
|
import { useEffect, useState, useRef } from "react";
|
|
|
import { useTextChat } from "@/store/textChat";
|
|
|
import { EAI_MODEL } from "@/consts/enum";
|
|
|
-import type { TMessage, TRobotMessage } from "@/store/textChat";
|
|
|
+import type { TRobotMessage } from "@/store/textChat";
|
|
|
+import { EChatRole, TChatRole, TMessage } from "@/types/bot";
|
|
|
|
|
|
import ChatWelcome from "./components/chat-welcome";
|
|
|
import IconArrowLeft from "@/components/icon/icon-arrow-left";
|
|
|
import PersonalCard from "./components/personal-card";
|
|
|
import { useAgentStore } from "@/store/agentStore";
|
|
|
|
|
|
-import { useLoadMore } from "@/utils/loadMore";
|
|
|
+import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
|
|
|
import { getMessageHistories } from "@/service/bot";
|
|
|
import { useAppStore } from "@/store/appStore";
|
|
|
|
|
|
-// 类型谓词函数
|
|
|
-function isRobotMessage(
|
|
|
- message: TMessage | TRobotMessage
|
|
|
-): message is TRobotMessage {
|
|
|
- return "robot" in message && "reasoningContent" in message;
|
|
|
-}
|
|
|
+
|
|
|
|
|
|
export default function Index() {
|
|
|
const router = useRouter();
|
|
@@ -43,7 +39,7 @@ export default function Index() {
|
|
|
|
|
|
const [deepThink, setDeepThink] = useState(EAI_MODEL.DeepseekChat);
|
|
|
|
|
|
- const [histories, setHistories] = useState<(TMessage | TRobotMessage)[]>([]);
|
|
|
+
|
|
|
|
|
|
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
|
|
const [contentHeight, setContentHeight] = useState(0);
|
|
@@ -55,7 +51,7 @@ export default function Index() {
|
|
|
const { destroy, setScrollTop, genSessionId } = useTextChat();
|
|
|
const scrollTop = useTextChat((state) => state.scrollTop);
|
|
|
|
|
|
- const fetcher = async ([_url, nextId, page, pageSize]) => {
|
|
|
+ const fetcher = async ([_url,{ nextId, pageSize}]) => {
|
|
|
if (!agent) {
|
|
|
return null;
|
|
|
}
|
|
@@ -67,18 +63,21 @@ export default function Index() {
|
|
|
});
|
|
|
return res.data;
|
|
|
};
|
|
|
- const { data, loadMore, page } = useLoadMore<(TMessage | TRobotMessage)[]>({
|
|
|
- url: `messeagehistories${isVisitor}${agentId}`,
|
|
|
+ const { list, loadMore, pageIndex, mutate } = useLoadMoreInfinite<(TMessage | TRobotMessage)[]>(
|
|
|
+ createKey(`messeagehistories${isVisitor}${agentId}`),
|
|
|
fetcher,
|
|
|
- });
|
|
|
+ );
|
|
|
|
|
|
- const [showWelcome, setShowWelcome] = useState(!histories.length);
|
|
|
+ const [showWelcome, setShowWelcome] = useState(!list.length);
|
|
|
|
|
|
// 加载更多
|
|
|
const onScrollToUpper = () => {
|
|
|
console.log("onscroll");
|
|
|
loadMore();
|
|
|
};
|
|
|
+ useDidShow(()=> {
|
|
|
+ mutate(undefined,{revalidate: true})
|
|
|
+ })
|
|
|
|
|
|
useEffect(() => {
|
|
|
if(agentId){
|
|
@@ -91,20 +90,16 @@ export default function Index() {
|
|
|
}, [agentId, isVisitor]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
- setShowWelcome(!histories.length);
|
|
|
- }, [histories]);
|
|
|
+ setShowWelcome(!list.length);
|
|
|
+ }, [list]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if (data?.data) {
|
|
|
- const combine = [...histories, ...data.data]
|
|
|
- setHistories(combine);
|
|
|
- if (page === 1) {
|
|
|
- setTimeout(() => {
|
|
|
- setScrollTop();
|
|
|
- }, 300);
|
|
|
- }
|
|
|
+ if (pageIndex === 1) {
|
|
|
+ setTimeout(() => {
|
|
|
+ setScrollTop();
|
|
|
+ }, 300);
|
|
|
}
|
|
|
- }, [data, page,]);
|
|
|
+ }, [pageIndex]);
|
|
|
|
|
|
// 计算 marginTopOffset 偏移的距离
|
|
|
const marginTopOffset = (() => {
|
|
@@ -239,16 +234,16 @@ export default function Index() {
|
|
|
{showWelcome && <ChatWelcome agent={agent} />}
|
|
|
<View id="messageList" className="flex flex-col gap-8 px-18 pb-140">
|
|
|
{/* 复制 histories 再 reverse 否则会影响 state */}
|
|
|
- {[...[...histories].reverse(), ...messageList].map((message) => {
|
|
|
- const robotMessage = isRobotMessage(message) ? message : null;
|
|
|
+ {[...[...list].reverse(), ...messageList].map((message) => {
|
|
|
return (
|
|
|
<ChatMessage
|
|
|
key={message.msgUk}
|
|
|
- textReasoning={robotMessage?.reasoningContent}
|
|
|
+ textReasoning={message?.reasoningContent}
|
|
|
agent={agent}
|
|
|
role={message.role}
|
|
|
text={message.content}
|
|
|
message={message}
|
|
|
+ mutate={mutate}
|
|
|
></ChatMessage>
|
|
|
);
|
|
|
})}
|
|
@@ -275,7 +270,7 @@ export default function Index() {
|
|
|
<InputBar
|
|
|
aiModel={deepThink}
|
|
|
agent={agent}
|
|
|
- histories={histories}
|
|
|
+ histories={list}
|
|
|
setShowWelcome={setShowWelcome}
|
|
|
></InputBar>
|
|
|
)}
|