@zhin.js/adapter-sandbox 1.0.30 → 1.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +61 -55
- package/client/Sandbox.tsx +247 -762
- package/dist/index.js +7 -5
- package/package.json +7 -8
package/dist/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import{jsx as t,jsxs as i}from"react/jsx-runtime";import{cn as
|
|
2
|
-
`)}return{text:
|
|
3
|
-
`)){
|
|
4
|
-
`)
|
|
5
|
-
`)
|
|
1
|
+
import{jsx as t,jsxs as i}from"react/jsx-runtime";import{cn as C,addPage as be}from"@zhin.js/client";import{MessageSquare as B,Wifi as Ne,WifiOff as ve,Trash2 as we,Bot as Ce,User as G,Smile as Se,Image as ke,X as Re,Search as ie,Check as Ee,Send as Ae,Info as Ie,Hash as ze,Users as Te,Terminal as $e}from"lucide-react";import ce,{forwardRef as Le,useRef as _,useImperativeHandle as je,useState as f,useEffect as H}from"react";const oe=Le(({placeholder:O="输入消息...",onSend:S,onChange:N,onAtTrigger:x,minHeight:W="44px",maxHeight:K="200px"},h)=>{const m=_(null),g=_(null),v=()=>{if(!m.current)return{text:"",segments:[]};let a="";const r=[],c=Array.from(m.current.childNodes);for(const d of c)if(d.nodeType===Node.TEXT_NODE){const o=d.textContent||"";o&&(a+=o,r.push({type:"text",data:{text:o}}))}else if(d.nodeType===Node.ELEMENT_NODE){const o=d;if(o.classList.contains("editor-face")){const u=o.dataset.id;a+=`[face:${u}]`,r.push({type:"face",data:{id:Number(u)}})}else if(o.classList.contains("editor-image")){const u=o.dataset.url;a+=`[image:${u}]`,r.push({type:"image",data:{url:u}})}else if(o.classList.contains("editor-at")){const u=o.dataset.name,y=o.dataset.id;a+=`[@${u}]`,r.push({type:"at",data:{name:u,qq:y}})}else o.tagName==="BR"&&(a+=`
|
|
2
|
+
`)}return{text:a,segments:r}},k=a=>{if(!m.current)return;const r=document.createElement("img");r.src=`https://face.viki.moe/apng/${a}.png`,r.alt=`[face:${a}]`,r.dataset.type="face",r.dataset.id=String(a),r.className="editor-face",E(r),A()},Q=a=>{if(!m.current||!a.trim())return;const r=document.createElement("img");r.src=a.trim(),r.alt=`[image:${a.trim()}]`,r.dataset.type="image",r.dataset.url=a.trim(),r.className="editor-image",E(r),A()},R=(a,r)=>{if(!m.current||!a.trim())return;const c=document.createElement("span");c.dataset.type="at",c.dataset.name=a,r&&(c.dataset.id=r),c.className="editor-at",c.contentEditable="false";const d=document.createElement("span");d.textContent="@",d.className="editor-at-symbol";const o=document.createElement("span");o.textContent=a,o.className="editor-at-name",c.appendChild(d),c.appendChild(o),E(c),A()},E=a=>{if(!m.current)return;m.current.focus();const r=window.getSelection();if(r&&r.rangeCount>0){const c=r.getRangeAt(0);if(m.current.contains(c.commonAncestorContainer))c.deleteContents(),c.insertNode(a),c.collapse(false),r.removeAllRanges(),r.addRange(c);else{m.current.appendChild(a);const o=document.createRange();o.setStartAfter(a),o.collapse(true),r.removeAllRanges(),r.addRange(o)}}else{m.current.appendChild(a);const c=window.getSelection();if(c){const d=document.createRange();d.setStartAfter(a),d.collapse(true),c.removeAllRanges(),c.addRange(d)}}},$=()=>{m.current&&(m.current.innerHTML="",A())},L=()=>{m.current?.focus()},j=()=>v(),D=()=>{if(!m.current||!x)return;const a=window.getSelection();if(!a||a.rangeCount===0){x(false,""),g.current=null;return}const r=a.getRangeAt(0);if(!m.current.contains(r.commonAncestorContainer)){x(false,""),g.current=null;return}const c=r.startContainer;if(c.nodeType!==Node.TEXT_NODE){x(false,""),g.current=null;return}const d=c,o=d.textContent?.substring(0,r.startOffset)||"",u=o.lastIndexOf("@");if(u!==-1){const y=o.substring(u+1);if(y.includes(" ")||y.includes(`
|
|
3
|
+
`)){x(false,""),g.current=null;return}g.current=d;const I=document.createRange();I.setStart(d,u),I.setEnd(d,u+1);const U=I.getBoundingClientRect(),b=m.current.getBoundingClientRect();x(true,y,{top:U.bottom-b.top,left:U.left-b.left})}else x(false,""),g.current=null},A=()=>{if(D(),N){const{text:a,segments:r}=v();N(a,r)}},Z=(a,r)=>{if(!g.current)return;const c=g.current,d=c.textContent||"",o=d.lastIndexOf("@");if(o!==-1){const u=d.substring(o+1),y=o+1+u.split(/[\s\n]/)[0].length,I=d.substring(0,o),U=d.substring(y);c.textContent=I+U;const b=window.getSelection();if(b){const M=document.createRange();M.setStart(c,o),M.collapse(true),b.removeAllRanges(),b.addRange(M)}}g.current=null,R(a,r)},F=a=>{if(a.key==="Enter"&&!a.shiftKey&&(a.preventDefault(),S)){const{text:r,segments:c}=v();S(r,c)}};return je(h,()=>({focus:L,clear:$,insertFace:k,insertImage:Q,insertAt:R,replaceAtTrigger:Z,getContent:j})),t("div",{ref:m,contentEditable:true,suppressContentEditableWarning:true,onInput:A,onKeyDown:F,"data-placeholder":O,className:"rich-text-editor",style:{width:"100%",minHeight:W,maxHeight:K,padding:"0.5rem 0.75rem",border:"1px solid var(--gray-6)",borderRadius:"6px",backgroundColor:"var(--gray-1)",fontSize:"var(--font-size-2)",outline:"none",overflowY:"auto",lineHeight:"1.5",wordWrap:"break-word",color:"var(--gray-12)"}})});oe.displayName="RichTextEditor";function De(){const[O,S]=f([]),[N,x]=f([{id:"user_1001",name:"测试用户",type:"private",unread:0},{id:"group_2001",name:"测试群组",type:"group",unread:0},{id:"channel_3001",name:"测试频道",type:"channel",unread:0}]),[W,K]=f([]),[h,m]=f(N[0]),[g,v]=f(""),[k,Q]=f("ProcessBot"),[R,E]=f(false),[$,L]=f(false),[j,D]=f(false),[A,Z]=f(false),[F,a]=f(null),[r,c]=f(""),[d,o]=f(""),[u,y]=f(""),[I,U]=f(""),[b]=f([{id:"10001",name:"张三"},{id:"10002",name:"李四"},{id:"10003",name:"王五"},{id:"10004",name:"赵六"},{id:"10005",name:"测试用户"},{id:"10086",name:"Admin"},{id:"10010",name:"Test User"}]),[M,q]=f([]),[X,J]=f(false),ee=_(null),z=_(null),T=_(null),de=async()=>{try{const e=await fetch("https://face.viki.moe/metadata.json");K(await e.json())}catch(e){console.error("[Sandbox] Failed to fetch face list:",e)}};H(()=>{de()},[]),H(()=>{const e=window.location.protocol==="https:"?"wss:":"ws:";return z.current=new WebSocket(`${e}//${window.location.host}/sandbox`),z.current.onopen=()=>E(true),z.current.onmessage=s=>{try{const n=JSON.parse(s.data);let p=typeof n.content=="string"?V(n.content):Array.isArray(n.content)?n.content:V(String(n.content)),l=N.find(P=>P.id===n.id);if(!l){const P=n.type==="private"?`私聊-${n.bot||k}`:n.type==="group"?`群组-${n.id}`:`频道-${n.id}`;l={id:n.id,name:P,type:n.type,unread:0},x(ye=>[...ye,l]),m(l)}const w={id:`bot_${n.timestamp}`,type:"received",channelType:n.type,channelId:n.id,channelName:l.name,senderId:"bot",senderName:n.bot||k,content:p,timestamp:n.timestamp};S(P=>[...P,w])}catch(n){console.error("[Sandbox] Failed to parse message:",n)}},z.current.onclose=()=>E(false),()=>{z.current?.close()}},[k,N]),H(()=>{ee.current?.scrollIntoView({behavior:"smooth"})},[O]),H(()=>{q(g.trim()?V(g):[])},[g]);const V=e=>{const s=[],n=/\[@([^\]]+)\]|\[face:(\d+)\]|\[image:([^\]]+)\]/g;let p=0,l;for(;(l=n.exec(e))!==null;){if(l.index>p){const w=e.substring(p,l.index);w&&s.push({type:"text",data:{text:w}})}l[1]?s.push({type:"at",data:{qq:l[1],name:l[1]}}):l[2]?s.push({type:"face",data:{id:parseInt(l[2])}}):l[3]&&s.push({type:"image",data:{url:l[3]}}),p=n.lastIndex}if(p<e.length){const w=e.substring(p);w&&s.push({type:"text",data:{text:w}})}return s.length>0?s:[{type:"text",data:{text:e}}]},le=e=>e.map((s,n)=>{if(typeof s=="string")return t("span",{children:s.split(`
|
|
4
|
+
`).map((p,l)=>i(ce.Fragment,{children:[p,l<s.split(`
|
|
5
|
+
`).length-1&&t("br",{})]},l))},n);switch(s.type){case"text":return t("span",{children:s.data.text.split(`
|
|
6
|
+
`).map((p,l)=>i(ce.Fragment,{children:[p,l<s.data.text.split(`
|
|
7
|
+
`).length-1&&t("br",{})]},l))},n);case"at":return i("span",{className:"inline-flex items-center px-1.5 py-0.5 rounded bg-accent text-accent-foreground text-xs mx-0.5",children:["@",s.data.name||s.data.qq]},n);case"face":return t("img",{src:`https://face.viki.moe/apng/${s.data.id}.png`,alt:`face${s.data.id}`,className:"w-6 h-6 inline-block align-middle mx-0.5"},n);case"image":return t("img",{src:s.data.url,alt:"image",className:"max-w-[300px] rounded-lg my-1 block",onError:p=>{p.currentTarget.style.display="none"}},n);case"video":return t("span",{className:"inline-flex items-center px-1.5 py-0.5 rounded border text-xs mx-0.5",children:"📹 视频"},n);case"audio":return t("span",{className:"inline-flex items-center px-1.5 py-0.5 rounded border text-xs mx-0.5",children:"🎵 语音"},n);case"file":return i("span",{className:"inline-flex items-center px-1.5 py-0.5 rounded border text-xs mx-0.5",children:["📎 ",s.data.name||"文件"]},n);default:return t("span",{children:"[未知消息类型]"},n)}}),te=(e,s)=>{if(!e.trim()||s.length===0)return;const n={id:`msg_${Date.now()}`,type:"sent",channelType:h.type,channelId:h.id,channelName:h.name,senderId:"test_user",senderName:"测试用户",content:s,timestamp:Date.now()};S(p=>[...p,n]),v(""),q([]),T.current?.clear(),z.current?.send(JSON.stringify({type:h.type,id:h.id,content:s,timestamp:Date.now()}))},me=()=>{confirm("确定清空所有消息记录？")&&S([])},ue=e=>{m(e),x(s=>s.map(n=>n.id===e.id?{...n,unread:0}:n)),window.innerWidth<768&&J(false)},pe=()=>{const e=["private","group","channel"],s=e[Math.floor(Math.random()*e.length)],n=prompt("请输入频道名称：");if(n){const p={id:`${s}_${Date.now()}`,name:n,type:s,unread:0};x(l=>[...l,p]),m(p)}},ne=e=>{switch(e){case"private":return t(G,{size:16});case"group":return t(Te,{size:16});case"channel":return t(ze,{size:16});default:return t(B,{size:16})}},fe=e=>{T.current?.insertFace(e),L(false)},re=()=>{u.trim()&&(T.current?.insertImage(u.trim()),y(""),D(false))},he=e=>{T.current?.replaceAtTrigger(e.name,e.id),a(null),c("")},ge=(e,s,n)=>{if(h.type==="private"){a(null),c("");return}e&&n?(a(n),c(s)):(a(null),c(""))},ae=b.filter(e=>{if(!r.trim())return true;const s=r.toLowerCase();return e.name.toLowerCase().includes(s)||e.id.toLowerCase().includes(s)}),xe=(e,s)=>{v(e),q(s)},se=W.filter(e=>e.name.toLowerCase().includes(d.toLowerCase())||e.describe.toLowerCase().includes(d.toLowerCase())),Y=O.filter(e=>e.channelId===h.id);return i("div",{className:"sandbox-container",children:[i("button",{className:"mobile-channel-toggle md:hidden",onClick:()=>J(!X),children:[t(B,{size:20})," 频道列表"]}),i("div",{className:C("channel-sidebar rounded-lg border bg-card",X&&"show"),children:[t("div",{className:"p-3 border-b",children:i("div",{className:"flex justify-between items-center",children:[i("div",{className:"flex items-center gap-2",children:[t("div",{className:"p-1 rounded-md bg-secondary",children:t(B,{size:16,className:"text-muted-foreground"})}),t("h3",{className:"font-semibold",children:"频道列表"})]}),i("span",{className:C("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border",R?"bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:border-emerald-800":"bg-muted text-muted-foreground"),children:[R?t(Ne,{size:12}):t(ve,{size:12}),R?"已连接":"未连接"]})]})}),t("div",{className:"flex-1 overflow-y-auto p-2 space-y-1",children:N.map(e=>{const s=h.id===e.id;return i("div",{className:C("menu-item",s&&"active"),onClick:()=>ue(e),children:[t("span",{className:"shrink-0",children:ne(e.type)}),i("div",{className:"flex-1 min-w-0",children:[t("div",{className:"text-sm font-medium truncate",children:e.name}),t("div",{className:"text-xs text-muted-foreground",children:e.type==="private"?"私聊":e.type==="group"?"群聊":"频道"})]}),e.unread>0&&t("span",{className:"inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-destructive text-destructive-foreground text-[10px] font-medium px-1",children:e.unread})]},e.id)})}),t("div",{className:"p-2 border-t",children:t("button",{className:"w-full py-2 px-3 rounded-md border border-dashed text-sm text-muted-foreground hover:bg-accent transition-colors",onClick:pe,children:"+ 添加频道"})})]}),X&&t("div",{className:"channel-overlay md:hidden",onClick:()=>J(false)}),i("div",{className:"chat-area",children:[t("div",{className:"rounded-lg border bg-card p-3 flex-shrink-0",children:i("div",{className:"flex justify-between items-center flex-wrap gap-2",children:[i("div",{className:"flex items-center gap-3",children:[t("div",{className:"p-2 rounded-lg bg-secondary",children:ne(h.type)}),i("div",{children:[t("h2",{className:"text-lg font-bold",children:h.name}),i("div",{className:"flex items-center gap-2 text-xs text-muted-foreground",children:[t("span",{children:h.id}),t("span",{className:"inline-flex items-center px-1.5 py-0.5 rounded border text-[10px]",children:Y.length}),t("span",{children:"条消息"})]})]}),t("span",{className:"inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground",children:h.type==="private"?"私聊":h.type==="group"?"群聊":"频道"})]}),i("div",{className:"flex items-center gap-2",children:[t("input",{value:k,onChange:e=>Q(e.target.value),placeholder:"机器人名称",className:"h-8 w-28 rounded-md border bg-transparent px-2 text-sm"}),i("button",{className:"inline-flex items-center gap-1 h-8 px-3 rounded-md bg-secondary text-secondary-foreground text-sm hover:bg-secondary/80",onClick:me,children:[t(we,{size:14})," 清空"]})]})]})}),t("div",{className:"rounded-lg border bg-card flex-1 flex flex-col min-h-0",children:t("div",{className:"flex-1 overflow-y-auto p-4",children:Y.length===0?i("div",{className:"flex flex-col items-center justify-center h-full gap-3",children:[t(B,{size:64,className:"text-muted-foreground/20"}),t("span",{className:"text-muted-foreground",children:"暂无消息，开始对话吧！"})]}):i("div",{className:"space-y-2",children:[Y.map(e=>t("div",{className:C("flex",e.type==="sent"?"justify-end":"justify-start"),children:i("div",{className:C("max-w-[70%] p-3 rounded-2xl",e.type==="sent"?"bg-primary text-primary-foreground":"bg-muted"),children:[i("div",{className:"flex items-center gap-2 mb-1",children:[e.type==="received"&&t(Ce,{size:14}),e.type==="sent"&&t(G,{size:14}),t("span",{className:"text-xs font-medium opacity-90",children:e.senderName}),t("span",{className:"text-xs opacity-70",children:new Date(e.timestamp).toLocaleTimeString()})]}),t("div",{className:"text-sm",children:le(e.content)})]})},e.id)),t("div",{ref:ee})]})})}),i("div",{className:"rounded-lg border bg-card p-3 flex-shrink-0 space-y-3",children:[i("div",{className:"flex gap-2 items-center",children:[t("button",{className:C("h-8 w-8 rounded-md flex items-center justify-center border transition-colors",$?"bg-primary text-primary-foreground":"hover:bg-accent"),onClick:()=>{L(!$),D(false)},title:"插入表情",children:t(Se,{size:16})}),t("button",{className:C("h-8 w-8 rounded-md flex items-center justify-center border transition-colors",j?"bg-primary text-primary-foreground":"hover:bg-accent"),onClick:()=>{D(!j),L(false)},title:"插入图片",children:t(ke,{size:16})}),t("div",{className:"flex-1"}),g&&t("button",{className:"h-8 w-8 rounded-md flex items-center justify-center hover:bg-accent transition-colors",onClick:()=>{v(""),q([])},children:t(Re,{size:16})})]}),$&&i("div",{className:"p-3 rounded-md border bg-muted/30 max-h-64 overflow-y-auto space-y-2",children:[t("input",{value:d,onChange:e=>o(e.target.value),placeholder:"搜索表情...",className:"w-full h-8 rounded-md border bg-transparent px-2 text-sm"}),t("div",{className:"grid grid-cols-8 gap-1",children:se.slice(0,80).map(e=>t("button",{onClick:()=>fe(e.id),title:e.name,className:"w-10 h-10 rounded-md border flex items-center justify-center hover:bg-accent transition-colors",children:t("img",{src:`https://face.viki.moe/apng/${e.id}.png`,alt:e.name,className:"w-8 h-8"})},e.id))}),se.length===0&&i("div",{className:"flex flex-col items-center gap-2 py-4",children:[t(ie,{size:32,className:"text-muted-foreground/30"}),t("span",{className:"text-sm text-muted-foreground",children:"未找到匹配的表情"})]})]}),j&&i("div",{className:"p-3 rounded-md border bg-muted/30 space-y-2",children:[t("input",{value:u,onChange:e=>y(e.target.value),placeholder:"输入图片 URL...",className:"w-full h-8 rounded-md border bg-transparent px-2 text-sm",onKeyDown:e=>{e.key==="Enter"&&(e.preventDefault(),re())}}),i("button",{className:"inline-flex items-center gap-1 h-8 px-3 rounded-md bg-primary text-primary-foreground text-sm disabled:opacity-50",onClick:re,disabled:!u.trim(),children:[t(Ee,{size:14})," 插入"]})]}),i("div",{className:"flex gap-2 items-start",children:[i("div",{className:"flex-1 relative",children:[t(oe,{ref:T,placeholder:`向 ${h.name} 发送消息...`,onSend:te,onChange:xe,onAtTrigger:ge,minHeight:"44px",maxHeight:"200px"}),F&&t("div",{className:"absolute z-50 rounded-lg border bg-popover shadow-md min-w-60 max-h-72 overflow-y-auto p-1",style:{top:`${F.top}px`,left:`${F.left}px`},children:ae.length>0?ae.map(e=>i("div",{className:"flex items-center gap-2 p-2 rounded-md cursor-pointer hover:bg-accent transition-colors",onClick:()=>he(e),children:[t(G,{size:16,className:"text-muted-foreground"}),i("div",{className:"flex-1",children:[t("div",{className:"text-sm font-medium",children:e.name}),i("div",{className:"text-xs text-muted-foreground",children:["ID: ",e.id]})]})]},e.id)):i("div",{className:"flex flex-col items-center gap-2 p-4",children:[t(ie,{size:20,className:"text-muted-foreground/50"}),t("span",{className:"text-xs text-muted-foreground",children:"未找到匹配的用户"})]})})]}),i("button",{className:"inline-flex items-center gap-1.5 h-10 px-4 rounded-md bg-primary text-primary-foreground text-sm font-medium disabled:opacity-50 transition-colors hover:bg-primary/90",onClick:()=>{const e=T.current?.getContent();e&&te(e.text,e.segments)},disabled:!g.trim()||M.length===0,children:[t(Ae,{size:16})," 发送"]})]}),i("div",{className:"flex items-center gap-2 flex-wrap text-xs text-muted-foreground",children:[t(Ie,{size:12})," 快捷操作:",t("span",{className:"px-1 py-0.5 rounded border text-[10px]",children:"Enter"})," 发送",t("span",{className:"px-1 py-0.5 rounded border text-[10px]",children:"Shift+Enter"})," 换行",t("span",{className:"px-1 py-0.5 rounded border text-[10px]",children:"[@名称]"})," @某人"]})]})]})]})}be({key:"process-sandbox",path:"/sandbox",title:"沙盒",icon:t($e,{className:"w-5 h-5"}),element:t(De,{})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zhin.js/adapter-sandbox",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.31",
|
|
4
4
|
"description": "Zhin.js adapter for local testing and development",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/index.js",
|
|
@@ -44,17 +44,16 @@
|
|
|
44
44
|
"@types/react": "^19.2.2",
|
|
45
45
|
"@types/react-dom": "^19.2.1",
|
|
46
46
|
"radix-ui": "^1.4.3",
|
|
47
|
-
"@radix-ui/themes": "^3.2.1",
|
|
48
47
|
"lucide-react": "^0.469.0",
|
|
49
48
|
"typescript": "^5.3.0",
|
|
50
|
-
"zhin.js": "1.0.
|
|
49
|
+
"zhin.js": "1.0.26"
|
|
51
50
|
},
|
|
52
51
|
"peerDependencies": {
|
|
53
|
-
"@zhin.js/core": "1.0.
|
|
54
|
-
"@zhin.js/client": "1.0.
|
|
55
|
-
"@zhin.js/http": "1.0.
|
|
56
|
-
"@zhin.js/console": "1.0.
|
|
57
|
-
"zhin.js": "1.0.
|
|
52
|
+
"@zhin.js/core": "1.0.26",
|
|
53
|
+
"@zhin.js/client": "1.0.9",
|
|
54
|
+
"@zhin.js/http": "1.0.17",
|
|
55
|
+
"@zhin.js/console": "1.0.22",
|
|
56
|
+
"zhin.js": "1.0.26"
|
|
58
57
|
},
|
|
59
58
|
"peerDependenciesMeta": {
|
|
60
59
|
"@zhin.js/http": {
|