bluenote/src/pages/knowledge/components/view-style/ViewStyleChat.tsx

import { ScrollView, View,Image } from "@tarojs/components";
import MessageRobotRich from "@/components/chat-message/MessageRobotRich";
import MessageRich from "@/components/chat-message/MessageRich";
import { WelcomeCard, AddSuccessfulTips } from "../asistant-message";
import KnowledgeIcon from '@/components/KnowledgeIcon'


import FigureList from "@/components/list/FigureList";
import FigureListItem from "@/components/list/FigureListItem";

import { useEffect, useRef, useState } from "react";
import Taro, { useDidShow } from "@tarojs/taro";

import { useUserStore } from "@/store/userStore";
import { useKnowledgeStore } from "@/store/knowledge";
import { TKnowledgeItem } from "@/types/knowledge";

const ViewStyleChat = () => {
  const { list, scrollTop, loadMore } = useKnowledgeStore();
  const {whoami} = useUserStore();
  const avatarData = {
    avatar: `data:image/png;base64,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`,
    name: "小蓝本助手",
  };
  
  const onScrollToUpper = async () => {
    console.log("toUpper");
    loadMore();
  };

  const handleEdit = (item: TKnowledgeItem)=> {
    if(item.parseStatus !== 'parsed'){
      return ;
    }
    Taro.navigateTo({
      url: `/pages/knowledge-item/index?knowledgeId=${item.knowledgeId}`
    })
  }

  useDidShow(()=> {
    loadMore(true)
  })

  return (
    <ScrollView
      scrollY
      onScrollToUpper={onScrollToUpper}
      scrollTop={scrollTop}
      style={{
        flex: 1,
        height: "100%", // 高度自适应
      }}
    >
      <View className="flex flex-col gap-20 pb-80">
        {/* 欢迎语 */}
        <MessageRobotRich data={avatarData}>
          <WelcomeCard />
        </MessageRobotRich>

        {/* 添加小蓝本助手成功 */}
        {/* <MessageRobotRich data={avatarData}>
          <AddSuccessfulTips />
        </MessageRobotRich> */}

        {list.map((group) => {
          // 渲染自己发送的消息
          if (group.role === "user") {
            return group.knowledgeList.map((item) => {
              return (
                <MessageRich data={{
                  avatar: whoami?.avatarUrl ?? '',
                  name: whoami?.nickName ?? ''
                }}>
                  <View className="flex items-center gap-12">
                    <View className="w-36 h-36 overflow-hidden"><KnowledgeIcon data={item} /></View>
                    <View className="flex flex-col flex-1 gap-2">
                      <View className="text-14 leading-22">{item.title}</View>
                      <View className="text-12 leading-20 text-gray-45">
                        {item.createTime} | {item.fileSizeStr}
                      </View>
                    </View>
                  </View>
                </MessageRich>
              );
            });
          }
          // 渲染机器人小蓝本助手的消息
          return (
            <MessageRobotRich
              data={{...avatarData, fileLen: group.knowledgeList.length}}
              analyzeStatus={group.isParsing ? "doing" : "done"}
              content={group.content}
            >
              <FigureList>
                {group.knowledgeList.map((item, index) => {
                  return (
                    <FigureListItem
                      figure={()=> {
                        return <KnowledgeIcon data={item}/>
                      }}
                      underline={index + 1 < group.knowledgeList.length}
                      arrow={item.parseStatus === 'parsed'}
                      onClick={()=> handleEdit(item)}
                    >
                      <View className="flex flex-col flex-1 gap-2 w-full">
                        <View className="text-14 leading-22">{item.title}</View>
                        <View className="text-12 leading-20 text-gray-45">
                          {item.createTime} | {item.fileSizeStr}
                        </View>
                      </View>
                    </FigureListItem>
                  );
                })}
              </FigureList>
            </MessageRobotRich>
          );
        })}
      </View>
    </ScrollView>
  );
};

export default ViewStyleChat;