mirror of
https://github.com/YspCoder/clawgo.git
synced 2026-05-07 00:07:30 +08:00
fix webui i18n
This commit is contained in:
lpf
@@ -1,36 +1,26 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, RefreshCw, Trash2, Edit2, Zap, X, FileText, Save } from 'lucide-react';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Plus, RefreshCw, Trash2, Zap, X, FileText, Save } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAppContext } from '../context/AppContext';
|
||||
import { useUI } from '../context/UIContext';
|
||||
import { Skill } from '../types';
|
||||
|
||||
const initialSkillForm: Omit<Skill, 'id'> = {
|
||||
name: '',
|
||||
description: '',
|
||||
tools: [],
|
||||
system_prompt: ''
|
||||
};
|
||||
|
||||
const Skills: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { skills, refreshSkills, q } = useAppContext();
|
||||
const { skills, refreshSkills, q, clawhubInstalled, clawhubPath } = useAppContext();
|
||||
const ui = useUI();
|
||||
const [installName, setInstallName] = useState('');
|
||||
const qp = (k: string, v: string) => `${q}${q ? '&' : '?'}${k}=${encodeURIComponent(v)}`;
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
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('');
|
||||
const uploadRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
async function deleteSkill(id: string) {
|
||||
if (!await ui.confirmDialog({ title: 'Delete Skill', message: 'Are you sure you want to delete this skill?', danger: true, confirmText: 'Delete' })) return;
|
||||
if (!await ui.confirmDialog({ title: t('skillsDeleteTitle'), message: t('skillsDeleteMessage'), danger: true, confirmText: t('delete') })) return;
|
||||
try {
|
||||
await fetch(`/webui/api/skills${qp('id', id)}`, { method: 'DELETE' });
|
||||
await refreshSkills();
|
||||
@@ -39,39 +29,95 @@ const Skills: React.FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
async function installClawHubIfNeeded() {
|
||||
if (clawhubInstalled) return true;
|
||||
const confirm = await ui.confirmDialog({
|
||||
title: t('skillsClawhubMissingTitle'),
|
||||
message: t('skillsClawhubMissingMessage'),
|
||||
confirmText: t('skillsInstallNow')
|
||||
});
|
||||
if (!confirm) return false;
|
||||
|
||||
ui.showLoading(t('skillsInstallingDeps'));
|
||||
try {
|
||||
const r = await fetch(`/webui/api/skills${q}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'install_clawhub' }),
|
||||
});
|
||||
const text = await r.text();
|
||||
if (!r.ok) {
|
||||
await ui.notify({ title: t('skillsInstallFailedTitle'), message: text || t('skillsInstallFailedMessage') });
|
||||
return false;
|
||||
}
|
||||
await ui.notify({ title: t('skillsInstallDoneTitle'), message: t('skillsInstallDoneMessage') });
|
||||
await refreshSkills();
|
||||
return true;
|
||||
} finally {
|
||||
ui.hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
async function installSkill() {
|
||||
const name = installName.trim();
|
||||
if (!name) return;
|
||||
|
||||
const ready = await installClawHubIfNeeded();
|
||||
if (!ready) return;
|
||||
|
||||
const r = await fetch(`/webui/api/skills${q}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'install', name }),
|
||||
});
|
||||
if (!r.ok) {
|
||||
await ui.notify({ title: 'Request Failed', message: await r.text() });
|
||||
await ui.notify({ title: t('requestFailed'), message: await r.text() });
|
||||
return;
|
||||
}
|
||||
setInstallName('');
|
||||
await refreshSkills();
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
async function onAddSkillClick() {
|
||||
const yes = await ui.confirmDialog({
|
||||
title: t('skillsAddTitle'),
|
||||
message: t('skillsAddMessage'),
|
||||
confirmText: t('skillsSelectArchive')
|
||||
});
|
||||
if (!yes) return;
|
||||
uploadRef.current?.click();
|
||||
}
|
||||
|
||||
async function onArchiveSelected(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const f = e.target.files?.[0];
|
||||
e.target.value = '';
|
||||
if (!f) return;
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('file', f);
|
||||
|
||||
ui.showLoading(t('skillsImporting'));
|
||||
try {
|
||||
const action = editingSkill ? 'update' : 'create';
|
||||
const r = await fetch(`/webui/api/skills${q}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action, ...(editingSkill && { id: editingSkill.id }), ...form })
|
||||
body: fd,
|
||||
});
|
||||
|
||||
if (r.ok) {
|
||||
setIsModalOpen(false);
|
||||
await refreshSkills();
|
||||
} else {
|
||||
await ui.notify({ title: 'Request Failed', message: await r.text() });
|
||||
const text = await r.text();
|
||||
if (!r.ok) {
|
||||
await ui.notify({ title: t('skillsImportFailedTitle'), message: text || t('skillsImportFailedMessage') });
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
await ui.notify({ title: 'Error', message: String(e) });
|
||||
let imported: string[] = [];
|
||||
try {
|
||||
const j = JSON.parse(text);
|
||||
imported = Array.isArray(j.imported) ? j.imported : [];
|
||||
} catch {
|
||||
imported = [];
|
||||
}
|
||||
await ui.notify({ title: t('skillsImportDoneTitle'), message: imported.length > 0 ? `${t('skillsImportedPrefix')}: ${imported.join(', ')}` : t('skillsImportDoneMessage') });
|
||||
await refreshSkills();
|
||||
} finally {
|
||||
ui.hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,7 +126,7 @@ const Skills: React.FC = () => {
|
||||
setIsFileModalOpen(true);
|
||||
const r = await fetch(`/webui/api/skills${q ? `${q}&id=${encodeURIComponent(skillId)}&files=1` : `?id=${encodeURIComponent(skillId)}&files=1`}`);
|
||||
if (!r.ok) {
|
||||
await ui.notify({ title: 'Request Failed', message: await r.text() });
|
||||
await ui.notify({ title: t('requestFailed'), message: await r.text() });
|
||||
return;
|
||||
}
|
||||
const j = await r.json();
|
||||
@@ -98,7 +144,7 @@ const Skills: React.FC = () => {
|
||||
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) {
|
||||
await ui.notify({ title: 'Request Failed', message: await r.text() });
|
||||
await ui.notify({ title: t('requestFailed'), message: await r.text() });
|
||||
return;
|
||||
}
|
||||
const j = await r.json();
|
||||
@@ -114,26 +160,31 @@ const Skills: React.FC = () => {
|
||||
body: JSON.stringify({ action: 'write_file', id: activeSkill, file: activeFile, content: fileContent }),
|
||||
});
|
||||
if (!r.ok) {
|
||||
await ui.notify({ title: 'Request Failed', message: await r.text() });
|
||||
await ui.notify({ title: t('requestFailed'), message: await r.text() });
|
||||
return;
|
||||
}
|
||||
await ui.notify({ title: 'Saved', message: 'Skill file saved successfully.' });
|
||||
await ui.notify({ title: t('saved'), message: t('skillsFileSaved') });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-7xl mx-auto space-y-8">
|
||||
<input ref={uploadRef} type="file" accept=".zip,.tar,.tar.gz,.tgz" className="hidden" onChange={onArchiveSelected} />
|
||||
|
||||
<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" />
|
||||
<button onClick={installSkill} className="px-3 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium">Install</button>
|
||||
<input value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder={t('skillsNamePlaceholder')} className="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm" />
|
||||
<button onClick={installSkill} className="px-3 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium">{t('install')}</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`text-xs px-2 py-1 rounded-md border ${clawhubInstalled ? 'text-emerald-300 border-emerald-700/50 bg-emerald-900/20' : 'text-amber-300 border-amber-700/50 bg-amber-900/20'}`} title={clawhubPath || t('skillsClawhubNotFound')}>
|
||||
{t('skillsClawhubStatus')}: {clawhubInstalled ? t('installed') : t('notInstalled')}
|
||||
</div>
|
||||
<button onClick={() => refreshSkills()} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
|
||||
<RefreshCw className="w-4 h-4" /> {t('refresh')}
|
||||
</button>
|
||||
<button onClick={() => { setEditingSkill(null); setForm(initialSkillForm); setIsModalOpen(true); }} className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
|
||||
<Plus className="w-4 h-4" /> Add Skill
|
||||
<button onClick={onAddSkillClick} className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
|
||||
<Plus className="w-4 h-4" /> {t('skillsAdd')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,47 +199,32 @@ const Skills: React.FC = () => {
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-zinc-100">{s.name}</h3>
|
||||
<span className="text-[10px] font-mono text-zinc-500 uppercase tracking-widest">ID: {s.id.slice(-6)}</span>
|
||||
<span className="text-[10px] font-mono text-zinc-500 uppercase tracking-widest">{t('id')}: {s.id.slice(-6)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-zinc-400 mb-6 line-clamp-2">{s.description || 'No description provided.'}</p>
|
||||
<p className="text-sm text-zinc-400 mb-6 line-clamp-2">{s.description || t('noDescription')}</p>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
<div>
|
||||
<div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-2">Tools</div>
|
||||
<div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-2">{t('tools')}</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(Array.isArray(s.tools) ? s.tools : []).map(tool => (
|
||||
<span key={tool} className="px-2 py-1 bg-zinc-800/50 text-zinc-300 text-[10px] font-mono rounded border border-zinc-700/50">{tool}</span>
|
||||
))}
|
||||
{(!Array.isArray(s.tools) || s.tools.length === 0) && <span className="text-xs text-zinc-600 italic">No tools defined</span>}
|
||||
{(!Array.isArray(s.tools) || s.tools.length === 0) && <span className="text-xs text-zinc-600 italic">{t('skillsNoTools')}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 pt-4 border-t border-zinc-800/50 mt-auto">
|
||||
<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);
|
||||
}}
|
||||
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
|
||||
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"
|
||||
className="flex-1 flex items-center justify-center gap-2 py-2 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20 rounded-lg text-xs font-medium transition-colors"
|
||||
title={t('files')}
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
<FileText className="w-4 h-4" /> {t('skillsFileEdit')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteSkill(s.id)}
|
||||
@@ -201,56 +237,13 @@ const Skills: React.FC = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{isModalOpen && (
|
||||
<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={() => setIsModalOpen(false)} className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
|
||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} className="relative w-full max-w-2xl bg-zinc-900 border border-zinc-800 rounded-3xl shadow-2xl overflow-hidden">
|
||||
<div className="p-6 border-b border-zinc-800 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">{editingSkill ? 'Edit Skill' : 'Add Skill'}</h2>
|
||||
<button onClick={() => setIsModalOpen(false)} className="p-2 hover:bg-zinc-800 rounded-full transition-colors text-zinc-400"><X className="w-5 h-5" /></button>
|
||||
</div>
|
||||
<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" />
|
||||
</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" />
|
||||
</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) })}
|
||||
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" />
|
||||
</label>
|
||||
</div>
|
||||
<div className="p-6 border-t border-zinc-800 bg-zinc-900/50 flex justify-end gap-3">
|
||||
<button onClick={() => setIsModalOpen(false)} className="px-4 py-2 text-sm text-zinc-400">Cancel</button>
|
||||
<button onClick={handleSubmit} className="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-medium shadow-lg shadow-indigo-600/20">
|
||||
{editingSkill ? 'Update' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</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="text-sm font-semibold mb-3">{activeSkill} {t('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>
|
||||
@@ -259,9 +252,9 @@ const Skills: React.FC = () => {
|
||||
</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="text-sm text-zinc-300 font-mono truncate">{activeFile || t('noFileSelected')}</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={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"/>{t('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>
|
||||
|
||||
Reference in New Issue
Block a user