mirror of
https://github.com/YspCoder/clawgo.git
synced 2026-04-13 20:47:49 +08:00
Merge remote-tracking branch 'origin/main'
This commit is contained in:
@@ -583,8 +583,69 @@ func (s *RegistryServer) handleWebUISkills(w http.ResponseWriter, r *http.Reques
|
||||
}
|
||||
_ = os.MkdirAll(skillsDir, 0755)
|
||||
|
||||
resolveSkillPath := func(name string) (string, error) {
|
||||
name = strings.TrimSpace(name)
|
||||
if name == "" {
|
||||
return "", fmt.Errorf("name required")
|
||||
}
|
||||
cands := []string{
|
||||
filepath.Join(skillsDir, name),
|
||||
filepath.Join(skillsDir, name+".disabled"),
|
||||
filepath.Join("/root/clawgo/workspace/skills", name),
|
||||
filepath.Join("/root/clawgo/workspace/skills", name+".disabled"),
|
||||
}
|
||||
for _, p := range cands {
|
||||
if st, err := os.Stat(p); err == nil && st.IsDir() {
|
||||
return p, nil
|
||||
}
|
||||
}
|
||||
return "", fmt.Errorf("skill not found: %s", name)
|
||||
}
|
||||
|
||||
switch r.Method {
|
||||
case http.MethodGet:
|
||||
if id := strings.TrimSpace(r.URL.Query().Get("id")); id != "" {
|
||||
skillPath, err := resolveSkillPath(id)
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
if strings.TrimSpace(r.URL.Query().Get("files")) == "1" {
|
||||
var files []string
|
||||
_ = filepath.WalkDir(skillPath, func(path string, d os.DirEntry, err error) error {
|
||||
if err != nil {
|
||||
return nil
|
||||
}
|
||||
if d.IsDir() {
|
||||
return nil
|
||||
}
|
||||
rel, _ := filepath.Rel(skillPath, path)
|
||||
if strings.HasPrefix(rel, "..") {
|
||||
return nil
|
||||
}
|
||||
files = append(files, filepath.ToSlash(rel))
|
||||
return nil
|
||||
})
|
||||
_ = json.NewEncoder(w).Encode(map[string]interface{}{"ok": true, "id": id, "files": files})
|
||||
return
|
||||
}
|
||||
if f := strings.TrimSpace(r.URL.Query().Get("file")); f != "" {
|
||||
clean := filepath.Clean(f)
|
||||
if strings.HasPrefix(clean, "..") {
|
||||
http.Error(w, "invalid file path", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
full := filepath.Join(skillPath, clean)
|
||||
b, err := os.ReadFile(full)
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
_ = json.NewEncoder(w).Encode(map[string]interface{}{"ok": true, "id": id, "file": filepath.ToSlash(clean), "content": string(b)})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
type skillItem struct {
|
||||
ID string `json:"id"`
|
||||
Name string `json:"name"`
|
||||
@@ -709,6 +770,29 @@ func (s *RegistryServer) handleWebUISkills(w http.ResponseWriter, r *http.Reques
|
||||
}
|
||||
}
|
||||
_ = json.NewEncoder(w).Encode(map[string]interface{}{"ok": true})
|
||||
case "write_file":
|
||||
skillPath, err := resolveSkillPath(name)
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
filePath, _ := body["file"].(string)
|
||||
clean := filepath.Clean(strings.TrimSpace(filePath))
|
||||
if clean == "" || strings.HasPrefix(clean, "..") {
|
||||
http.Error(w, "invalid file path", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
content, _ := body["content"].(string)
|
||||
full := filepath.Join(skillPath, clean)
|
||||
if err := os.MkdirAll(filepath.Dir(full), 0755); err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
if err := os.WriteFile(full, []byte(content), 0644); err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
_ = json.NewEncoder(w).Encode(map[string]interface{}{"ok": true, "name": name, "file": filepath.ToSlash(clean)})
|
||||
case "create", "update":
|
||||
desc, _ := body["description"].(string)
|
||||
sys, _ := body["system_prompt"].(string)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, RefreshCw, Trash2, Edit2, Zap, X, Code } from 'lucide-react';
|
||||
import { Plus, RefreshCw, Trash2, Edit2, Zap, X, FileText, Save } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppContext } from '../context/AppContext';
|
||||
@@ -21,6 +21,12 @@ const Skills: React.FC = () => {
|
||||
const [editingSkill, setEditingSkill] = useState<Skill | null>(null);
|
||||
const [form, setForm] = useState<Omit<Skill, 'id'>>(initialSkillForm);
|
||||
|
||||
const [isFileModalOpen, setIsFileModalOpen] = useState(false);
|
||||
const [activeSkill, setActiveSkill] = useState<string>('');
|
||||
const [skillFiles, setSkillFiles] = useState<string[]>([]);
|
||||
const [activeFile, setActiveFile] = useState<string>('');
|
||||
const [fileContent, setFileContent] = useState('');
|
||||
|
||||
async function deleteSkill(id: string) {
|
||||
if (!confirm('Are you sure you want to delete this skill?')) return;
|
||||
try {
|
||||
@@ -55,7 +61,7 @@ const Skills: React.FC = () => {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action, ...(editingSkill && { id: editingSkill.id }), ...form })
|
||||
});
|
||||
|
||||
|
||||
if (r.ok) {
|
||||
setIsModalOpen(false);
|
||||
await refreshSkills();
|
||||
@@ -63,13 +69,58 @@ const Skills: React.FC = () => {
|
||||
alert(await r.text());
|
||||
}
|
||||
} catch (e) {
|
||||
alert(e);
|
||||
alert(String(e));
|
||||
}
|
||||
}
|
||||
|
||||
async function openFileManager(skillId: string) {
|
||||
setActiveSkill(skillId);
|
||||
setIsFileModalOpen(true);
|
||||
const r = await fetch(`/webui/api/skills${q ? `${q}&id=${encodeURIComponent(skillId)}&files=1` : `?id=${encodeURIComponent(skillId)}&files=1`}`);
|
||||
if (!r.ok) {
|
||||
alert(await r.text());
|
||||
return;
|
||||
}
|
||||
const j = await r.json();
|
||||
const files = Array.isArray(j.files) ? j.files : [];
|
||||
setSkillFiles(files);
|
||||
if (files.length > 0) {
|
||||
await openFile(skillId, files[0]);
|
||||
} else {
|
||||
setActiveFile('');
|
||||
setFileContent('');
|
||||
}
|
||||
}
|
||||
|
||||
async function openFile(skillId: string, file: string) {
|
||||
const url = `/webui/api/skills${q ? `${q}&id=${encodeURIComponent(skillId)}&file=${encodeURIComponent(file)}` : `?id=${encodeURIComponent(skillId)}&file=${encodeURIComponent(file)}`}`;
|
||||
const r = await fetch(url);
|
||||
if (!r.ok) {
|
||||
alert(await r.text());
|
||||
return;
|
||||
}
|
||||
const j = await r.json();
|
||||
setActiveFile(file);
|
||||
setFileContent(String(j.content || ''));
|
||||
}
|
||||
|
||||
async function saveFile() {
|
||||
if (!activeSkill || !activeFile) return;
|
||||
const r = await fetch(`/webui/api/skills${q}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'write_file', id: activeSkill, file: activeFile, content: fileContent }),
|
||||
});
|
||||
if (!r.ok) {
|
||||
alert(await r.text());
|
||||
return;
|
||||
}
|
||||
alert('Saved');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-7xl mx-auto space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between gap-3 flex-wrap">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('skills')}</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<input value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder="skill name" className="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm" />
|
||||
@@ -99,7 +150,7 @@ const Skills: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p className="text-sm text-zinc-400 mb-6 line-clamp-2">{s.description || 'No description provided.'}</p>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
@@ -112,33 +163,32 @@ const Skills: React.FC = () => {
|
||||
{(!Array.isArray(s.tools) || s.tools.length === 0) && <span className="text-xs text-zinc-600 italic">No tools defined</span>}
|
||||
</div>
|
||||
</div>
|
||||
{s.system_prompt && (
|
||||
<div>
|
||||
<div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-2">System Prompt</div>
|
||||
<div className="p-3 bg-zinc-950/50 rounded-lg border border-zinc-800/50 text-xs text-zinc-400 line-clamp-3 italic">
|
||||
{s.system_prompt}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 pt-4 border-t border-zinc-800/50 mt-auto">
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingSkill(s);
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingSkill(s);
|
||||
setForm({
|
||||
name: s.name,
|
||||
description: s.description,
|
||||
tools: Array.isArray(s.tools) ? s.tools : [],
|
||||
system_prompt: s.system_prompt || ''
|
||||
});
|
||||
setIsModalOpen(true);
|
||||
});
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
className="flex-1 flex items-center justify-center gap-2 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-xs font-medium transition-colors text-zinc-300"
|
||||
>
|
||||
<Edit2 className="w-3.5 h-3.5" /> Edit Skill
|
||||
</button>
|
||||
<button
|
||||
<button
|
||||
onClick={() => openFileManager(s.id)}
|
||||
className="p-2 bg-indigo-500/10 text-indigo-400 hover:bg-indigo-500/20 rounded-lg transition-colors"
|
||||
title="Files"
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteSkill(s.id)}
|
||||
className="p-2 bg-red-500/10 text-red-500 hover:bg-red-500/20 rounded-lg transition-colors"
|
||||
>
|
||||
@@ -147,12 +197,6 @@ const Skills: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{skills.length === 0 && (
|
||||
<div className="col-span-full py-20 bg-zinc-900/20 border border-dashed border-zinc-800 rounded-3xl flex flex-col items-center justify-center text-zinc-500">
|
||||
<Zap className="w-12 h-12 mb-4 opacity-20" />
|
||||
<p className="text-lg font-medium">No skills defined</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
@@ -167,30 +211,24 @@ const Skills: React.FC = () => {
|
||||
<div className="p-6 space-y-4 max-h-[70vh] overflow-y-auto">
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-zinc-400 mb-1.5 block">Name</span>
|
||||
<input type="text" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
|
||||
<input type="text" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-zinc-400 mb-1.5 block">Description</span>
|
||||
<input type="text" value={form.description} onChange={e => setForm({...form, description: e.target.value})} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
|
||||
<input type="text" value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-zinc-400 mb-1.5 block">Tools (Comma separated)</span>
|
||||
<input
|
||||
type="text"
|
||||
value={form.tools.join(', ')}
|
||||
onChange={e => setForm({...form, tools: e.target.value.split(',').map(t => t.trim()).filter(t => t)})}
|
||||
placeholder="google_search, calculator, shell"
|
||||
className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm font-mono focus:border-indigo-500 outline-none"
|
||||
<input
|
||||
type="text"
|
||||
value={form.tools.join(', ')}
|
||||
onChange={e => setForm({ ...form, tools: e.target.value.split(',').map(t => t.trim()).filter(t => t) })}
|
||||
className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm font-mono focus:border-indigo-500 outline-none"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-zinc-400 mb-1.5 block">System Prompt</span>
|
||||
<textarea
|
||||
value={form.system_prompt}
|
||||
onChange={e => setForm({...form, system_prompt: e.target.value})}
|
||||
rows={6}
|
||||
className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none resize-none"
|
||||
/>
|
||||
<textarea value={form.system_prompt} onChange={e => setForm({ ...form, system_prompt: e.target.value })} rows={6} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none resize-none" />
|
||||
</label>
|
||||
</div>
|
||||
<div className="p-6 border-t border-zinc-800 bg-zinc-900/50 flex justify-end gap-3">
|
||||
@@ -203,6 +241,34 @@ const Skills: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<AnimatePresence>
|
||||
{isFileModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setIsFileModalOpen(false)} className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
|
||||
<motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.96 }} className="relative w-full max-w-6xl h-[80vh] bg-zinc-900 border border-zinc-800 rounded-3xl shadow-2xl overflow-hidden flex">
|
||||
<aside className="w-72 border-r border-zinc-800 bg-zinc-950/60 p-3 overflow-y-auto">
|
||||
<div className="text-sm font-semibold mb-3">{activeSkill} files</div>
|
||||
<div className="space-y-1">
|
||||
{skillFiles.map(f => (
|
||||
<button key={f} onClick={() => openFile(activeSkill, f)} className={`w-full text-left px-2 py-1.5 rounded text-xs font-mono ${activeFile===f ? 'bg-indigo-500/20 text-indigo-200' : 'text-zinc-300 hover:bg-zinc-800'}`}>{f}</button>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
<main className="flex-1 flex flex-col">
|
||||
<div className="px-4 py-3 border-b border-zinc-800 flex items-center justify-between">
|
||||
<div className="text-sm text-zinc-300 font-mono truncate">{activeFile || '(no file selected)'}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={saveFile} className="px-3 py-1.5 rounded bg-emerald-600 hover:bg-emerald-500 text-white text-xs flex items-center gap-1"><Save className="w-3 h-3"/>Save</button>
|
||||
<button onClick={() => setIsFileModalOpen(false)} className="p-2 hover:bg-zinc-800 rounded-full transition-colors text-zinc-400"><X className="w-4 h-4" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea value={fileContent} onChange={(e)=>setFileContent(e.target.value)} className="flex-1 bg-zinc-950 text-zinc-200 font-mono text-sm p-4 resize-none outline-none" />
|
||||
</main>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user