73 lines
3.4 KiB
TypeScript
73 lines
3.4 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 from "../cardComponent";
|
||
|
|
import { SkillIcon } from "@/components/bs-icons/skill";
|
||
|
|
import { AssistantIcon } from "@/components/bs-icons/assistant";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
export default function SkillChatSheet({ children, onSelect }) {
|
||
|
|
const [open, setOpen] = useState(false)
|
||
|
|
|
||
|
|
const { t } = useTranslation()
|
||
|
|
|
||
|
|
const navigate = useNavigate()
|
||
|
|
|
||
|
|
const [keyword, setKeyword] = useState(' ')
|
||
|
|
const allDataRef = useRef([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
open && getChatOnlineApi().then(res => {
|
||
|
|
allDataRef.current = res
|
||
|
|
setKeyword('')
|
||
|
|
})
|
||
|
|
// setKeyword(' ')
|
||
|
|
}, [open])
|
||
|
|
|
||
|
|
const options = useMemo(() => {
|
||
|
|
return allDataRef.current.filter(el => el.name.toLowerCase().includes(keyword.toLowerCase()))
|
||
|
|
}, [keyword])
|
||
|
|
|
||
|
|
return <Sheet open={open} onOpenChange={setOpen}>
|
||
|
|
<SheetTrigger asChild>
|
||
|
|
{children}
|
||
|
|
</SheetTrigger>
|
||
|
|
<SheetContent className="sm:min-w-[966px] bg-gray-100">
|
||
|
|
<div className="flex h-full" onClick={e => e.stopPropagation()}>
|
||
|
|
<div className="w-fit p-6">
|
||
|
|
<SheetTitle>{t('chat.dialogueSelection')}</SheetTitle>
|
||
|
|
<SheetDescription>{t('chat.chooseSkillOrAssistant')}</SheetDescription>
|
||
|
|
<SearchInput value={keyword} placeholder={t('chat.search')} className="my-6" onChange={(e) => setKeyword(e.target.value)} />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 min-w-[696px] bg-[#fff] p-5 pt-12 h-full flex flex-wrap gap-1.5 overflow-y-auto scrollbar-hide content-start">
|
||
|
|
{
|
||
|
|
options.length ? options.map((flow, i) => (
|
||
|
|
<CardComponent key={i}
|
||
|
|
id={i + 1}
|
||
|
|
data={flow}
|
||
|
|
title={flow.name}
|
||
|
|
description={flow.desc}
|
||
|
|
type="sheet"
|
||
|
|
icon={flow.flow_type === 'flow' ? SkillIcon : AssistantIcon}
|
||
|
|
footer={
|
||
|
|
<Badge className={`absolute right-0 bottom-0 rounded-none rounded-br-md ${flow.flow_type === 'flow' && 'bg-gray-950'}`}>
|
||
|
|
{flow.flow_type === 'flow' ? '技能' : '助手'}
|
||
|
|
</Badge>
|
||
|
|
}
|
||
|
|
onClick={() => { onSelect(flow); setOpen(false) }}
|
||
|
|
/>
|
||
|
|
)) : <div className="flex flex-col items-center justify-center pt-40 w-full">
|
||
|
|
<p className="text-sm text-muted-foreground mb-3">{t('build.empty')}</p>
|
||
|
|
<Button className="w-[200px]" onClick={() => navigate('/build/assist')}>{t('build.onlineSA')}</Button>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SheetContent>
|
||
|
|
</Sheet>
|
||
|
|
};
|