bluenote/src/pages/chat/index.tsx

import { View, ScrollView } from "@tarojs/components";
import NavBarNormal from "@/components/NavBarNormal/index";
import PageCustom from "@/components/page-custom/index";
import { useDidShow, useRouter, useUnload } from "@tarojs/taro";
import ChatMessage from "@/components/chat-message";
import InputBar from "./components/InputBar";
import { useEffect, useState } from "react";
import { useTextChat } from "@/store/textChatStore";
import { formatMessageTime } from "@/utils/timeUtils";

import ChatGreeting from "./components/ChatGreeting";
import PersonalCard from "./components/PersonalCard";
import ButtonEnableStreamVoice from "./components/OptionButtons/ButtonEnableStreamVoice";

import RecommendQuestions from "./components/RecommendQuestions";
import { usePersistentState } from "@/hooks/usePersistentState";
import style from './index.module.less'

// 导入我们抽离的 hooks 和常量
import {
  useChatMessages,
  useChatScrollManager,
  useChatUI,
  useChatAgent,
} from "./hooks";
import { useChatInput } from "./components/InputBar/useChatInput";

export default function Index() {
  const router = useRouter();

  const { agentId, isVisitor } = router.params;
  if (!agentId) {
    return <View>没有相应的智能体</View>;
  }

  // 使用抽离的 hooks
  const { agent } = useChatAgent(agentId, isVisitor);



  const {
    historyList,
    groupedMessages,
    messagesLength,
    loadMore,
    pageIndex,
    mutate,
    resetAndLoadFirstPage,
    resetAndClearData
  } = useChatMessages(agentId, isVisitor);

  // const loadMoreCallback = isNewChat ? null : loadMore

  // 获取原始历史消息列表长度（用于UI状态判断）
  const rawHistoryListLength = historyList.length;

  const {
    scrollViewRef,
    scrollTop,
    keyboardHeight,
    marginTopOffset,
    handleScrollToUpper,
    handleTouchMove,
    handleScrollToLower,
  } = useChatScrollManager(messagesLength, pageIndex, loadMore);

  // InputBar 相关状态
  const [isVoice, setIsVoice] = useState(false);
  const [disabled, setDisabled] = useState(false);

  const [contextMenuVisible, setContextMenuVisible] = useState(false);

  // 获取当前消息列表长度
  const currentMessageListLength = useTextChat((state) => state.list.length);
  const isNewChat = useTextChat((state) => state.isNewChat);
  const messageStopHandle = useTextChat((state) => state.messageStopHandle);

  const { destroy, genSessionId, clearList } = useTextChat();

  const {
    showWelcome,
    haveBg,
    inputContainerHeight,
    inputContainerBottomOffset,
    setShowWelcome,
    getBgContent,
    createNavLeftRenderer,
  } = useChatUI(agent, rawHistoryListLength, currentMessageListLength, isNewChat);

  const [streamVoiceEnable, setStreamVoiceEnable] = usePersistentState(
    "streamVoiceEnable",
    false
  );

  // 统一的聊天输入逻辑 - 只在主组件中实例化一次
  const chatInputActions = useChatInput({
    agent,
    enableOutputAudioStream: streamVoiceEnable,
    setShowWelcome,
    setIsVoice,
    setDisabled,
    historyList,
  });


  // 首次进入聊天生成 session id
  useEffect(() => {
    genSessionId();
    // 重新拉取第一页数据，
    resetAndLoadFirstPage()
  }, [genSessionId]);

  // 页面卸载时清理
  useUnload(() => {
    destroy();
  });

  // 加载更多的处理函数（已经在 useChatScrollManager 中处理）
  const onScrollToUpper = handleScrollToUpper;

  // const PersonalCardWrap = ()=> <PersonalCard />

  // 使用工厂函数创建导航栏左侧渲染器
  const renderNavLeft = createNavLeftRenderer(PersonalCard, contextMenuVisible, ()=> {
    console.log('clear chat')
    messageStopHandle?.();
    clearList()
    resetAndClearData()
  }, (menuVisible: boolean) => {
    setContextMenuVisible(menuVisible)
  });

  // 页面点击时关闭清除上下文菜单
  const handlePageClick = () => {
    setContextMenuVisible(false)
  }

  return (
    <PageCustom
      fullPage
      style={{ overflow: "hidden" }}
      styleBg={getBgContent()}
      onClick={handlePageClick}
    >
      <NavBarNormal blur leftColumn={renderNavLeft}>
        {/* <>{`${isNewChat ? 'isnew': 'notnew'}`}--</> */}
      </NavBarNormal>
      <View
        className="flex flex-col w-full h-full relative z-10 flex-1"
        style={{ top: `${marginTopOffset}px` }}
      >
        <ScrollView
          ref={scrollViewRef}
          scrollY
          id="scrollView"
          style={{
            flex: 1,
            height: "1px", // 高度自适应
          }}
          // scrollTop={scrollTop}
          scrollWithAnimation
          onScrollToUpper={onScrollToUpper}
          onScrollToLower={handleScrollToLower}
          className="scale-y-[-1]"
        >
          <View className="pb-40 pt-8 scale-y-[-1]">
            {agent && (
              <RecommendQuestions
                enableOutputAudioStream={streamVoiceEnable}
                agent={agent}
                chatInputActions={chatInputActions}
              />
            )}
          </View>
          <View
            id="messageList"
            className="flex flex-col gap-16 px-18 scale-y-[-1] min-h-full"
            onTouchMove={handleTouchMove}
          >
            {isNewChat && <View className="text-white-70 text-12 leading-20 text-center pt-22  scale-y-[-1]">聊聊新话题</View>}
            {showWelcome && <ChatGreeting agent={agent} chatInputActions={chatInputActions} />}
            {groupedMessages.map((group, groupIndex) => {
              return (
                <View key={groupIndex} className="flex flex-col gap-16">
                  <View
                    className={`text-12 leading-20 block text-center w-full ${
                      haveBg
                        ? "text-white-70"
                        : "text-black-25"
                    }`}
                  >
                    {formatMessageTime(group.dt)}
                  </View>
                  {group.list.map((message) => {
                    const reasoningContent =
                      (message as any).reasoningContent || "";
                    return (
                      <ChatMessage
                        key={message.msgUk}
                        textReasoning={reasoningContent}
                        agent={agent}
                        role={message.role}
                        text={message.content}
                        message={message}
                        mutate={mutate as any}
                      />
                    );
                  })}
                </View>
              );
            })}
          </View>
        </ScrollView>

        <View
          className="w-full h-60"
          style={{
            height: inputContainerHeight,
          }}
        ></View>
        {/* ${keyboardHeight <= 0 ? 'transition-[bottom] delay-300' : ''} */}
        <View
          className={`bottom-bar px-16 pt-12 z-50`}
          id="inputContainer"
          style={{
            bottom: `${keyboardHeight + inputContainerBottomOffset}px`,
          }}
        >
          <View className="bg-[#F5FAFF]">
            {agent && (
              <View className="flex flex-col w-full gap-8">
                <View>
                  <ButtonEnableStreamVoice
                    setEnable={setStreamVoiceEnable}
                    enable={streamVoiceEnable}
                  />
                </View>
                <InputBar
                  enableOutputAudioStream={streamVoiceEnable}
                  agent={agent}
                  // histories={historyList}
                  setShowWelcome={setShowWelcome}
                  chatInputActions={chatInputActions}
                  isVoice={isVoice}
                  setIsVoice={setIsVoice}
                  disabled={disabled}
                />

              </View>
            )}
            <View className={`${style.aiTips} ${keyboardHeight > 0 ? 'opacity-0': ''} `}>内容由AI生成，仅供参考</View>
          </View>
        </View>
      </View>

    </PageCustom>
  );
}