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>
+};

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

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { readOnlineFlows } from "../../../controllers/API/flow";
+import { FlowType } from "../../../types/flow";
+import { useTable } from "../../../util/hook";
+import { Button } from "../../bs-ui/button";
+import { SearchInput } from "../../bs-ui/input";
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+  SheetTrigger,
+} from "../../bs-ui/sheet";
+import CardComponent from "../cardComponent";
+import { useTranslation } from "react-i18next";
+
+export default function SkillSheet({ select, children, onSelect }) {
+  const [keyword, setKeyword] = useState("");
+  const {
+    data: onlineFlows,
+    loading,
+    search,
+  } = useTable<FlowType>({}, (param) =>
+    readOnlineFlows(param.page, param.keyword).then((res) => {
+      return res;
+    })
+  );
+
+  const handleSearch = (e) => {
+    const { value } = e.target;
+    setKeyword(value);
+    search(value);
+  };
+
+  const toCreateFlow = () => {
+    window.open("/build/skills");
+  };
+
+  const { t } = useTranslation()
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="bg-gray-100 sm:min-w-[966px]">
+        <div className="flex h-full" onClick={(e) => e.stopPropagation()}>
+          <div className="w-fit p-6">
+            <SheetTitle>{t("build.addSkill")}</SheetTitle>
+            <SearchInput
+              value={keyword}
+              placeholder={t("build.search")}
+              className="my-6"
+              onChange={handleSearch}
+            />
+            <Button className="w-full" onClick={toCreateFlow}>
+              {t("build.createSkill")}
+            </Button>
+          </div>
+          <div className="flex h-full min-w-[696px] flex-1 flex-wrap content-start gap-1.5 overflow-y-auto bg-[#fff] p-5 pt-12 scrollbar-hide">
+            {onlineFlows[0] ? (
+              onlineFlows.map((flow, i) => (
+                <CardComponent
+                  key={i}
+                  id={i + 1}
+                  data={flow}
+                  title={flow.name}
+                  description={flow.description}
+                  type="sheet"
+                  footer={
+                    <div className="flex justify-end">
+                      {select.some((_) => _.id === flow.id) ? (
+                        <Button size="sm" className="h-6" disabled>
+                          {t("build.added")}
+                        </Button>
+                      ) : (
+                        <Button
+                          size="sm"
+                          className="h-6"
+                          onClick={() => onSelect(flow)}
+                        >
+                          {t("build.add")}
+                        </Button>
+                      )}
+                    </div>
+                  }
+                />
+              ))
+            ) : (
+              <div className="flex w-full flex-col items-center justify-center pt-40">
+                <p className="mb-3 text-sm text-muted-foreground">
+                  {t("build.empty")}
+                </p>
+                <Button className="w-[200px]" onClick={toCreateFlow}>
+                  {t("build.createSkill")}
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { readTempsDatabase } from "@/controllers/API";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { SearchInput } from "../../bs-ui/input";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "../../bs-ui/sheet";
+import CardComponent from "../cardComponent";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export default function SkillTempSheet({ children, onSelect }) {
+    const [open, setOpen] = useState(false)
+
+    const navigate = useNavigate()
+    const { t } = useTranslation()
+
+    const [keyword, setKeyword] = useState(' ')
+    const allDataRef = useRef([])
+
+    useEffect(() => {
+        readTempsDatabase().then(res => {
+            allDataRef.current = res
+            setKeyword('')
+        })
+    }, [])
+
+    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('skills.skillTemplate')}</SheetTitle>
+                    <SheetDescription>{t('skills.skillTemplateChoose')}</SheetDescription>
+                    <SearchInput value={keyword} placeholder={t('build.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">
+                    <CardComponent
+                        id={0}
+                        type="sheet"
+                        data={null}
+                        title={t('skills.customSkills')}
+                        description=''
+                        onClick={() => navigate('/build/skill')}
+                    ></CardComponent>
+                    {
+                        options.map((flow, i) => (
+                            <CardComponent key={i}
+                                id={i + 1}
+                                data={flow}
+                                title={flow.name}
+                                description={flow.description}
+                                type="sheet"
+                                footer={null}
+                                onClick={() => { onSelect(flow.id); setOpen(false) }}
+                            />
+                        ))
+                    }
+                </div>
+            </div>
+        </SheetContent>
+    </Sheet>
+};

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

@@ -0,0 +1,87 @@
+import { Accordion } from "@/components/bs-ui/accordion";
+import { SearchInput } from "@/components/bs-ui/input";
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/bs-ui/sheet";
+import { getAssistantToolsApi } from "@/controllers/API/assistant";
+import ToolItem from "@/pages/SkillPage/components/ToolItem";
+import { useTranslation } from "react-i18next";
+import { PersonIcon, StarFilledIcon } from "@radix-ui/react-icons";
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/bs-ui/button";
+
+export default function ToolsSheet({ select, onSelect, children }) {
+    const { t } = useTranslation()
+    const [type, setType] = useState('default') // default custom
+
+    const [keyword, setKeyword] = useState('')
+    const [allData, setAllData] = useState([])
+
+    useEffect(() => {
+        getAssistantToolsApi(type).then(res => {
+            setAllData(res)
+            setKeyword('')
+        })
+    }, [type])
+
+    const options = useMemo(() => {
+        return allData.filter(el => 
+            el.name.toLowerCase().includes(keyword.toLowerCase())
+            || el.description.toLowerCase().includes(keyword.toLowerCase())
+        )
+    }, [keyword, allData])
+
+    return (
+        <Sheet onOpenChange={open => !open && setKeyword('')}>
+            <SheetTrigger asChild>
+                {children}
+            </SheetTrigger>
+            <SheetContent className="w-[1000px] sm:max-w-[1000px] bg-gray-100">
+                <div className="flex h-full" onClick={e => e.stopPropagation()}>
+                    <div className="w-fit p-6">
+                        <SheetTitle>{t('build.addTool')}</SheetTitle>
+                        <SearchInput placeholder={t('build.search')} className="mt-6" onChange={(e) => setKeyword(e.target.value)} />
+                        <Button
+                            className="mt-4 w-full"
+                            onClick={() => window.open("/build/tools")}
+                        >
+                            {t('create')}{t("tools.createCustomTool")}
+                        </Button>
+                        <div className="mt-4">
+                            <div
+                                className={`flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:bg-muted-foreground/10 transition-all duration-200 ${type === 'default' && 'bg-muted-foreground/10'}`}
+                                onClick={() => setType('default')}
+                            >
+                                <PersonIcon />
+                                <span>{t('tools.builtinTools')}</span>
+                            </div>
+                            <div
+                                className={`flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:bg-muted-foreground/10 transition-all duration-200 mt-1 ${type === 'custom' && 'bg-muted-foreground/10'}`}
+                                onClick={() => setType('custom')}
+                            >
+                                <StarFilledIcon />
+                                <span>{t('tools.customTools')}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="flex-1 bg-[#fff] p-5 pt-12 h-full overflow-auto scrollbar-hide">
+                        <Accordion type="single" collapsible className="w-full">
+                            {
+                                options.length ? options.map(el => (
+                                    <ToolItem
+                                        key={el.id}
+                                        type={'add'}
+                                        select={select}
+                                        data={el}
+                                        onSelect={onSelect}
+                                    ></ToolItem>
+                                )) : <div className="pt-40 text-center text-sm text-muted-foreground mt-2">
+                                    {t('build.empty')}
+                                </div>
+                            }
+                        </Accordion>
+                    </div>
+                </div>
+            </SheetContent>
+        </Sheet>
+    );
+
+};