1

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

@@ -5,10 +5,20 @@ 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 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";
 
 export default function SkillChatSheet({ children, onSelect }) {
     const [open, setOpen] = useState(false)
@@ -32,19 +42,71 @@ export default function SkillChatSheet({ children, onSelect }) {
         return allDataRef.current.filter(el => el.name.toLowerCase().includes(keyword.toLowerCase()))
     }, [keyword])
 
+    const render = (item: any) => (
+        <Flexbox align={'flex-start'} className={`selectNpcFlexbox relative`} onClick={() => { onSelect(item); setOpen(false) }}>
+          {/* <Avatar size={24} src={item.favicon} style={{ flex: 'none' }} /> */}
+          {/* <Flexbox>
+            <div style={{ fontSize: 15, fontWeight: 600 }}>{item.name}</div>
+            <div style={{ opacity: 0.6 }}>{item.name}</div>
+          </Flexbox> */}
+            {/* <Card key={item.id} className="w-[300px]  overflow-hidden cursor-pointer" onClick={() => onSelect(item)}>
+                <CardHeader>
+                    <CardTitle className=" flex items-center gap-2">
+                        <div className={"rounded-full w-[30px] h-[30px] " + gradients[parseInt(item.id, 16) % gradients.length]}></div>
+                        <span>{item.name}</span>
+                    </CardTitle>
+                    <CardDescription className="">{item.description}</CardDescription>        
+                </CardHeader>
+            </Card> */}
+            <div className="npcInfoItemBg">
+                <span>
+                    <span>
+                        <div>
+                            {/* <img src={robot} className="w-[160px]" alt=""/> */}
+                            {(item.id == "06b1d374-ba97-46e6-8782-c56dec8dcc17" || item.id == "ed8e21f6-9757-43d0-b076-8c6e81bb0580") && <img src={robot2} className="w-[160px]" alt=""/>}
+                            {item.id == "ca214b41-2b73-4585-b172-bf1e546cf6ec" && <img src={robot3} className="w-[160px]" alt=""/>}
+                            {(item.id != "06b1d374-ba97-46e6-8782-c56dec8dcc17" && item.id != "ed8e21f6-9757-43d0-b076-8c6e81bb0580" && item.id != "ca214b41-2b73-4585-b172-bf1e546cf6ec") && <img src={robot} className="w-[160px]" alt=""/>}
+                        </div>
+                    </span>
+                </span>
+            </div>
+            <div>
+                {/* {(item.id == "06b1d374-ba97-46e6-8782-c56dec8dcc17" || item.id == "ed8e21f6-9757-43d0-b076-8c6e81bb0580") && <img src={robot2} className="w-[42px]" alt=""/>}
+                {item.id == "ca214b41-2b73-4585-b172-bf1e546cf6ec" && <img src={robot3} className="w-[42px]" alt=""/>}
+                {(item.id != "06b1d374-ba97-46e6-8782-c56dec8dcc17" && item.id != "ed8e21f6-9757-43d0-b076-8c6e81bb0580" && item.id != "ca214b41-2b73-4585-b172-bf1e546cf6ec") && <img src={robot} className="w-[42px]" alt=""/>} */}
+                {/* <img src={robot} className="w-[42px]" alt=""/> */}
+                <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>绘画类</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-[966px] bg-gray-100">
+        <SheetContent className="sm:min-w-[1000px] bg-[#1A1A1A]">
             <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 className="xinDuiHua-boxR">
+                    {/* <img src={borderR} className="w-[30px] h-[100%]" alt="" /> */}
                 </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">
-                    {
+                <div className="w-fit p-6">
+                    <SheetTitle>选择对话</SheetTitle>
+                    <SheetDescription className="text-[#999999]">选择一个您想使用的上线NPC或能力</SheetDescription>
+                    <SearchInput value={keyword} placeholder="搜索" className="my-6" onChange={(e) => setKeyword(e.target.value)} />
+                </div>
+                <div className="min-w-[696px] overflow-y-auto bg-[#000000] scrollbar-hide skillSheet">
+                    {/* {
                         options.length ? options.map((flow, i) => (
                             <CardComponent key={i}
                                 id={i + 1}
@@ -55,7 +117,7 @@ export default function SkillChatSheet({ children, onSelect }) {
                                 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' ? '技能' : '助手'}
+                                        {flow.flow_type === 'flow' ? '技能' : 'NPC'}
                                     </Badge>
                                 }
                                 onClick={() => { onSelect(flow); setOpen(false) }}
@@ -64,7 +126,8 @@ export default function SkillChatSheet({ children, onSelect }) {
                             <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>
-                    }
+                    } */}
+                    <SpotlightCard items={options} renderItem={render} className="mt-[14px] skillSheetSpotlightCard"/>
                 </div>
             </div>
         </SheetContent>