122 lines
5.3 KiB
TypeScript
122 lines
5.3 KiB
TypeScript
import { Badge } from "@/components/bs-ui/badge";
|
|
import { Button } from "@/components/bs-ui/button";
|
|
import { getChatOnlineApi } from "@/controllers/API/assistant";
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { SearchInput } from "../../bs-ui/input";
|
|
import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "../../bs-ui/sheet";
|
|
import CardComponent, { TitleIconBg } from "../cardComponent";
|
|
import { SkillIcon } from "@/components/bs-icons/skill";
|
|
import { AssistantIcon } from "@/components/bs-icons/assistant";
|
|
import { useTranslation } from "react-i18next";
|
|
import borderR from "../../../assets/npc/border-r.png";
|
|
import { SpotlightCard } from "@lobehub/ui";
|
|
import { Flexbox } from 'react-layout-kit';
|
|
import robot from "../../../assets/robot.png";
|
|
import robot2 from "../../../assets/robot2.png";
|
|
import robot3 from "../../../assets/robot3.png";
|
|
import zidingyi1 from "../../../assets/npc/zidingyi1.png";
|
|
import zidingyi2 from "../../../assets/npc/zidingyi2.png";
|
|
import npcIcon from "../../../assets/npc/npcIcon.png";
|
|
import nengliIcon from "../../../assets/npc/nengliIcon.png";
|
|
import { useDebounce } from "@/util/hook";
|
|
import LoadMore from "../loadMore";
|
|
|
|
export default function SkillChatSheet({ children, onSelect }) {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
const { t } = useTranslation()
|
|
|
|
const navigate = useNavigate()
|
|
|
|
const [keyword, setKeyword] = useState(' ')
|
|
const allDataRef = useRef([])
|
|
|
|
const pageRef = useRef(1)
|
|
const searchRef = useRef('')
|
|
const [options, setOptions] = useState<any>([])
|
|
|
|
const loadData = (more = false) => {
|
|
open && getChatOnlineApi(pageRef.current, searchRef.current).then(res => {
|
|
setOptions(opts => more ? [...opts, ...res] : res)
|
|
})
|
|
}
|
|
const debounceLoad = useDebounce(loadData, 600, false)
|
|
|
|
useEffect(() => {
|
|
// open && getChatOnlineApi().then(res => {
|
|
// allDataRef.current = res
|
|
// setKeyword('')
|
|
// })
|
|
// setKeyword(' ')
|
|
pageRef.current = 1
|
|
searchRef.current = ''
|
|
loadData()
|
|
}, [open])
|
|
|
|
// const options = useMemo(() => {
|
|
// return allDataRef.current.filter(el => el.name.toLowerCase().includes(keyword.toLowerCase()))
|
|
// }, [keyword])
|
|
|
|
const handleSearch = (e) => {
|
|
pageRef.current = 1
|
|
searchRef.current = e.target.value
|
|
debounceLoad()
|
|
}
|
|
|
|
const handleLoadMore = () => {
|
|
pageRef.current++
|
|
loadData(true)
|
|
}
|
|
|
|
const render = (item: any) => (
|
|
<Flexbox align={'flex-start'} className={`selectNpcFlexbox relative`} onClick={() => { onSelect(item); setOpen(false) }}>
|
|
<div className="npcInfoItemBg">
|
|
<span>
|
|
<span>
|
|
<div>
|
|
<TitleIconBg className="w-[160px] h-[160px] min-w-[160px]" img={item.avatar_img} id={item.avatar_color ? item.avatar_color : item.id} ><img src={item.avatar_img ? item.avatar_img : (item.flow_type == "assistant" ? npcIcon : nengliIcon)} alt="" /></TitleIconBg>
|
|
</div>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<TitleIconBg className="w-[40px] h-[40px] min-w-[40px]" img={item.avatar_img} id={item.avatar_color ? item.avatar_color : item.id} ><img src={item.avatar_img ? item.avatar_img : (item.flow_type == "assistant" ? npcIcon : nengliIcon)} alt="" /></TitleIconBg>
|
|
<div>
|
|
<p>{item.name}</p>
|
|
<div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="mt-[10px] test-[13px]">{item.desc}</p>
|
|
<div className={`absolute right-0 top-0 w-[41px] h-[16px] flex justify-center items-center text-[9px] ${item.flow_type === 'flow' ? 'text-[#333333] bg-[#FFD54C]' : 'text-[#FFFFFF] bg-[#2586FF]'}`} style={{borderRadius:"0px 10px 0px 7px",fontWeight:"bold"}}>
|
|
{item.flow_type === 'flow' ? '能力' : 'NPC'}
|
|
</div>
|
|
</Flexbox>
|
|
);
|
|
|
|
return <Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetTrigger asChild>
|
|
{children}
|
|
</SheetTrigger>
|
|
<SheetContent className="sm:min-w-[1000px] bg-[#1A1A1A]">
|
|
<div className="flex h-full" onClick={e => e.stopPropagation()}>
|
|
<div className="xinDuiHua-boxR">
|
|
{/* <img src={borderR} className="w-[30px] h-[100%]" alt="" /> */}
|
|
</div>
|
|
<div className="w-[280px] p-6">
|
|
<SheetTitle>选择对话</SheetTitle>
|
|
<SheetDescription className="text-[#999999]">选择一个您想使用的上线NPC或能力</SheetDescription>
|
|
{/* <SearchInput value={keyword} placeholder="搜索" className="my-6" onChange={(e) => setKeyword(e.target.value)} /> */}
|
|
<SearchInput placeholder="搜索" className="my-6" onChange={handleSearch} />
|
|
</div>
|
|
<div className="w-[690px] overflow-y-auto bg-[#000000] scrollbar-hide skillSheet">
|
|
<SpotlightCard items={options} renderItem={render} className="mt-[14px] skillSheetSpotlightCard"/>
|
|
<LoadMore onScrollLoad={handleLoadMore} />
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
};
|