bishengWeb/src/components/bs-comp/chatComponent/FileBs.tsx

import { AvatarIcon } from "@/components/bs-icons/avatar";
import { WordIcon } from "@/components/bs-icons/office";
import { checkSassUrl } from "@/pages/ChatAppPage/components/FileView";
import { downloadFile } from "@/util/utils";
import { useTranslation } from "react-i18next";
import npcIcon from "../../../assets/npc/npcIcon.png";
import nengliIcon from "../../../assets/npc/nengliIcon.png";
import { TitleIconBg } from "../cardComponent";

// 颜色列表
const colorList = [
    "#666",
    "#FF5733",
    "#3498DB",
    "#27AE60",
    "#E74C3C",
    "#9B59B6",
    "#F1C40F",
    "#34495E",
    "#16A085",
    "#E67E22",
    "#95A5A6"
]

export default function FileBs({ data,flow_type }) {
    const { t } = useTranslation()
    const avatarColor = colorList[(data.sender?.split('').reduce((num, s) => num + s.charCodeAt(), 0) || 0) % colorList.length]

    // download file
    const handleDownloadFile = (file) => {
        const url = file?.file_url
        url && downloadFile(checkSassUrl(url), file?.file_name)
    }

    return <div className="flex w-full py-1">
        <div className="w-fit min-h-8 rounded-2xl px-6 py-4 max-w-[90%]">
            {data.sender && <p className="text-primary text-xs mb-2" style={{ background: avatarColor }}>{data.sender}</p>}
            <div className="flex gap-2 ">
                {data.flow_id && <TitleIconBg className="w-[40px] h-[40px]" img={data.avatar_img} id={data.avatar_color ? data.avatar_color : data.flow_id} ><img src={data.avatar_img ? data.avatar_img : (flow_type == "assistant" ? npcIcon : nengliIcon)} alt="" /></TitleIconBg>}
                {/* <div className="w-6 h-6 min-w-6 flex justify-center items-center rounded-full" style={{ background: avatarColor }} ><AvatarIcon /></div> */}
                <div
                    className="flex gap-2 w-52 shadow-sm bg-[#1a1a1a] px-4 py-2 rounded-sm cursor-pointer"
                    onClick={() => handleDownloadFile(data.files[0])}
                >
                    <div className="flex items-center text-[#43AFD2]"><WordIcon /></div>
                    <div>
                        <h1 className="text-sm font-bold text-[#43AFD2]">{data.files[0]?.file_name}</h1>
                        <p className="text-xs text-[#666] mt-1">点击下载</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
};