1

src/components/bs-comp/sheets/SkillChatSheet.tsx

@@ -0,0 +1,72 @@
+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>
+};