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 IconFIleTxt from "@/components/icon/IconFIleTxt";
// import IconFIlePDF from "@/components/icon/IconFIlePDF";
// import IconFIleXLSX from "@/components/icon/IconFIleXLSX";

import FigureList from "@/components/list/figure-list";
import FigureListItem from "@/components/list/figure-list-item";

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

import { useUserStore } from "@/store/userStore";
import { useKnowledgeStore } from "@/store/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();
  };

  useEffect(() => {
    loadMore()
  }, []);

  return (
    <ScrollView
      scrollY
      onScrollToUpper={onScrollToUpper}
      scrollTop={scrollTop}
      style={{
        flex: 1,
        height: "100%", // 高度自适应
      }}
    >
      <View className="flex flex-col gap-20 pb-120">
        {/* 欢迎语 */}
        <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">
                    <Image src={item.icon} mode="widthFix" style={{width: '36px', height: '36px'}}></Image>
                    <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"}
            >
              <FigureList>
                {group.knowledgeList.map((item, index) => {
                  return (
                    <FigureListItem
                      figure={()=> {
                        return <Image src={item.icon} mode="widthFix" style={{width: '36px', height: '36px'}}></Image>
                      }}
                      underline={index + 1 < group.knowledgeList.length}
                      arrow={item.parseStatus === 'parsed'}
                      onClick={()=> Taro.navigateTo({
                        url: `/pages/knowledge-item/index?knowledgeId=${item.knowledgeId}`
                      })}
                    >
                      <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>
          );
        })}

        {/* <MessageRich data={avatarData}>
          <View className="flex items-center gap-12">
            <IconFIleTxt />
            <View className="flex flex-col flex-1 gap-2">
              <View className="text-14 leading-22">文件名称</View>
              <View className="text-12 leading-20 text-gray-45">
                03-24 12:20 | 822.KB
              </View>
            </View>
          </View>
        </MessageRich> */}

        {/* <MessageRobotRich data={avatarData} analyzeStatus="doing">
          <FigureList>
            <FigureListItem figure={IconFIleTxt} underline>
              <View className="flex flex-col flex-1 gap-2 w-full">
                <View className="text-14 leading-22">文件名称</View>
                <View className="text-12 leading-20 text-gray-45">
                  03-24 12:20 | 822.KB
                </View>
              </View>
            </FigureListItem>
            <FigureListItem figure={IconFIlePDF}>
              <View className="flex flex-col flex-1 gap-2 w-full">
                <View className="text-14 leading-22">飞秒小知识.pdf</View>
                <View className="text-12 leading-20 text-gray-45">
                  03-24 12:20 | 822.KB
                </View>
              </View>
            </FigureListItem>
          </FigureList>
        </MessageRobotRich>

        <MessageRobotRich data={avatarData} analyzeStatus="done">
          <FigureList className="bg-gray-2 px-16 py-12">
            <FigureListItem figure={IconFIleTxt} underline arrow>
              <View className="flex flex-col flex-1 gap-2 w-full">
                <View className="text-14 leading-22">文件名称</View>
                <View className="text-12 leading-20 text-gray-45">
                  03-24 12:20 | 822.KB
                </View>
              </View>
            </FigureListItem>
            <FigureListItem figure={IconFIlePDF} arrow>
              <View className="flex flex-col flex-1 gap-2 w-full">
                <View className="text-14 leading-22">飞秒小知识.pdf</View>
                <View className="text-12 leading-20 text-gray-45">
                  03-24 12:20 | 822.KB
                </View>
              </View>
            </FigureListItem>
          </FigureList>
        </MessageRobotRich> */}

        {/* <MessageRich data={avatarData}>
          <View className="flex items-center gap-12">
            <IconFIleXLSX />
            <View className="flex flex-col flex-1 gap-2">
              <View className="text-14 leading-22">文件名称</View>
              <View className="text-12 leading-20 text-gray-45">
                03-24 12:20 | 822.KB
              </View>
            </View>
          </View>
        </MessageRich> */}
      </View>
    </ScrollView>
  );
};

export default ViewStyleChat;