bishengWeb/src/pages/ChatAppPage/index.tsx

import { Trash2 } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { bsconfirm } from "../../alerts/confirm";
import { TabsContext } from "../../contexts/tabsContext";
import { deleteChatApi, getChatsApi } from "../../controllers/API";
import { getFlowApi, readOnlineFlows } from "../../controllers/API/flow";
import { FlowType } from "../../types/flow";
import { generateUUID } from "../../utils";
import SkillTemps from "../SkillPage/components/SkillTemps";
import ChatPanne from "./components/ChatPanne";
import { captureAndAlertRequestErrorHoc } from "../../controllers/request";
import { useDebounce, useTable } from "../../util/hook";
import duihuaDel from "../../assets/chat/duihua-del.png";
import robot from "../../assets/robot.png";
import robot2 from "../../assets/robot2.png";
import robot3 from "../../assets/robot3.png";
import duihuaItemTop from "../../assets/chat/duihua-item-top.png";
import duihuaItemJia from "../../assets/chat/duihua-item-+.png";
import duihuaItemGuan from "../../assets/chat/duihua-item-x.png";
import SkillChatSheet from "@/components/bs-comp/sheets/SkillChatSheet";
import { TitleIconBg } from "@/components/bs-comp/cardComponent";
import npcIcon from "../../assets/npc/npcIcon.png";
import nengliIcon from "../../assets/npc/nengliIcon.png";


export default function SkillChatPage() {
    const [open, setOpen] = useState(false)
    const [face, setFace] = useState(true);

    const { t } = useTranslation()
    const [selectChat, setSelelctChat] = useState<any>({
        id: '', chatId: '', type: ''
    })

    const { flow: initFlow } = useContext(TabsContext);
    const [flow, setFlow] = useState<FlowType>(null)
    const {
        data: onlineFlows,
        loading,
        search,
    } = useTable<FlowType>({}, (param) =>
        readOnlineFlows(param.page, param.keyword).then((res) => {
          return res;
        })
    );
    // 对话列表
    const { chatList, chatId, chatsRef, setChatId, addChat, deleteChat } = useChatList()

    // select flow
    const handlerSelectFlow = async (card) => {
        // 会话ID
        const _chatId = generateUUID(32)
        // setOpen(false)
        // add list
        addChat({
            "flow_name": card.name,
            "flow_description": card.desc,
            "flow_id": card.id,
            "chat_id": _chatId,
            "create_time": "-",
            "update_time": "-",
            "flow_type": card.flow_type,
            "avatar_img": card.avatar_img,
            "avatar_color": card.avatar_color,
        })

        setSelelctChat({ id: card.id, chatId: _chatId, type: card.flow_type })
        setChatId(_chatId)
    }

    // select chat
    const handleSelectChat = useDebounce(async (chat) => {
        console.log('chat.id :>> ', chat);
        if (chat.chat_id === chatId) return
        setSelelctChat({ id: chat.flow_id, chatId: chat.chat_id, type: chat.flow_type })
        setChatId(chat.chat_id)
    }, 100, false)


    // del
    const handleDeleteChat = (e, id) => {
        e.stopPropagation();
        bsconfirm({
            desc: t('chat.confirmDeleteChat'),
            onOk(next) {
                deleteChat(id);
                setSelelctChat({ id: '', chatId: '', type: '' })
                next()
            }
        })
    }


    return <div className="flex">
        <div className="h-screen w-[288px] relative">
            <div className="xinDuiHua absolute bg-[#000000] xinDuiHua-box">
                <SkillChatSheet onSelect={handlerSelectFlow}>
                    <div id="newchat" className="xinDuiHua-btn cursor-pointer">
                        {/* <PlusBoxIcon className="dark:hidden"></PlusBoxIcon> */}
                        {/* <PlusBoxIconDark className="hidden dark:block"></PlusBoxIconDark> */}
                        {t('chat.newChat')}
                    </div>
                </SkillChatSheet>
                {/* <div className="xinDuiHua-btn cursor-pointer" onClick={() => setOpen(true)}>{t('chat.newChat')}</div> */}
                {/* <div className="xinDuiHua-del cursor-pointer">
                    <img src={duihuaDel} alt=""/>
                </div> */}
            </div>
            <div ref={chatsRef} className="absolute w-[100%] scroll p-[10px] h-full overflow-y-scroll no-scrollbar pt-[63px]">
                {
                    chatList.map((chat, i) => (
                        <div key={chat.chat_id}
                            className={` group item xinDuiHua-list-item relative hover:xinDuiHua-list-active cursor-pointer  dark:hover:xinDuiHua-list-active  ${chatId === chat.chat_id && 'xinDuiHua-list-active dark:xinDuiHua-list-active'}`}
                            onClick={() => handleSelectChat(chat)}>
                                <div>
                                    {/* {(chat.flow_id == "06b1d374-ba97-46e6-8782-c56dec8dcc17" || chat.flow_id == "ed8e21f6-9757-43d0-b076-8c6e81bb0580") && <img src={robot2} alt=""/>}
                                    {chat.flow_id == "ca214b41-2b73-4585-b172-bf1e546cf6ec" && <img src={robot3} alt=""/>}
                                    {(chat.flow_id != "06b1d374-ba97-46e6-8782-c56dec8dcc17" && chat.flow_id != "ed8e21f6-9757-43d0-b076-8c6e81bb0580" && chat.flow_id != "ca214b41-2b73-4585-b172-bf1e546cf6ec") && <img src={robot} alt=""/>} */}
                                    <TitleIconBg className="w-[40px] h-[40px]" img={chat.avatar_img} id={chat.avatar_color ? chat.avatar_color : chat.flow_id} ><img src={chat.avatar_img ? chat.avatar_img : (chat.flow_type == "assistant" ? npcIcon : nengliIcon)} alt="" /></TitleIconBg>
                                    {/* <img src={robot} alt=""/> */}
                                    <div>
                                        <p>{chat.flow_name}</p>
                                        {/* <div>离线</div> */}
                                    </div>
                                </div>
                                <div>
                                    {/* <img src={duihuaItemTop} alt=""/>
                                    <img src={duihuaItemJia} alt=""/> */}
                                </div>
                                <img className="absolute w-[10px] top-[5px] right-[5px] hidden group-hover:block" src={duihuaItemGuan}  onClick={(e) => handleDeleteChat(e, chat.chat_id)} alt=""/>
                            {/* <span className="text-xs text-gray-500">{chat.flow_description}</span> */}
                            {/* <Trash2 size={14} className="absolute bottom-2 right-2 text-gray-400 hidden group-hover:block" onClick={(e) => handleDeleteChat(e, chat.chat_id)}></Trash2> */}
                        </div>
                    ))
                }
            </div>
        </div>
        {/* chat */}
        <ChatPanne data={selectChat}></ChatPanne>
        {/* 选择对话技能 */}
        <SkillTemps
            flows={onlineFlows}
            title={t('chat.skillTempsTitle')}
            desc={t('chat.skillTempsDesc')}
            open={open} setOpen={setOpen}
            onSelect={handlerSelectFlow}></SkillTemps>
    </div>
};
/**
 * 本地对话列表
 */
const useChatList = () => {
    const [id, setId] = useState('')
    const [chatList, setChatList] = useState([])
    const chatsRef = useRef(null)

    useEffect(() => {
        getChatsApi().then(setChatList)
    }, [])

    return {
        chatList,
        chatId: id,
        chatsRef,
        setChatId: setId,
        addChat: (chat) => {
            const newList = [chat, ...chatList]
            // localStorage.setItem(ITEM_KEY, JSON.stringify(newList))
            setChatList(newList)
            setId(chat.chat_id)
            setTimeout(() => {
                chatsRef.current.scrollTop = 1
            }, 0);
        },
        deleteChat: (id: string) => {
            // api
            captureAndAlertRequestErrorHoc(deleteChatApi(id).then(res => {
                setChatList(oldList => oldList.filter(item => item.chat_id !== id))
            }))
        }
    }
}