mgonzalez/project.linkedcorp.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: version 3.2.0 -- Integracion IA: configuracion y plan de actividades

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
2026-10-23 15:55:54 -05:00
parent c64a16064f
commit 89dec6da7e
25 changed files with 538 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Configuracion/AiSettingsPanel.jsx
+78
View File
@@ -0,0 +1,78 @@
import { useState } from 'react';
import { Save, Send } from 'lucide-react';
import { useUi } from '../../context/ui-context.jsx';
import { useAsync, useAction } from '../../hooks/useAsync.js';
import { getAiConfig, updateAiConfig, testAiConfig } from '../../services/settings.js';
import { Field, FieldRow } from '../../components/Field.jsx';
import { Button } from '../../components/Button.jsx';
import { InfoBar } from '../../components/InfoBar.jsx';
import { PasswordInput } from '../../components/PasswordInput.jsx';
import { DraftNotice } from '../../components/DraftNotice.jsx';
import { useDraftForm } from '../../hooks/useDraftForm.js';
const MODEL_LABEL_KEYS = { 'claude-haiku-5-5': 'ai_model_haiku', 'claude-sonnet-5-5': 'ai_model_sonnet' };
export default function AiSettingsPanel() {
const { t, pushToast } = useUi();
const runAction = useAction();
const { data: config, reload } = useAsync(getAiConfig, []);
// La clave (apiKey) nunca se guarda como borrador.
const draft = useDraftForm({
formId: 'ai-config', entityId: 'system',
initial: config ? { model: config.model, apiKey: '', editVersion: config.edit_version } : { model: '', apiKey: '' },
label: t('config_ai'), enabled: !!config, exclude: ['apiKey'],
});
const form = draft.values;
const setForm = draft.setValues;
const [testing, setTesting] = useState(false);
const [testResult, setTestResult] = useState(null);
async function save() {
await draft.guardSave(() => runAction(async () => {
await updateAiConfig(form);
draft.clear();
await reload();
pushToast({ tone: 'success', message: t('common_saved') });
}), { fetchCurrent: async () => { const c = await getAiConfig(); return { model: c.model, apiKey: '', editVersion: c.edit_version }; } });
}
async function runTest() {
setTestResult(null);
setTesting(true);
try {
const r = await testAiConfig({ apiKey: form.apiKey, model: form.model });
setTestResult({ ok: true, message: `${t('ai_test_success')} (${r.model})` });
} catch (err) {
setTestResult({ ok: false, message: err.message });
} finally {
setTesting(false);
}
}
if (!config) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>
{!config.configured && <InfoBar tone="warning" dismissible={false}>{t('ai_not_configured')}</InfoBar>}
<div className="text-muted" style={{ fontSize: '.76rem', marginBottom: 10 }}>{t('ai_hint')}</div>
<DraftNotice draft={draft} />
<FieldRow>
<Field label={t('ai_api_key')} dirty={draft.isFieldDirty('apiKey')} hint={config.configured ? t('ai_key_configured_hint') : undefined}>
<PasswordInput value={form.apiKey} onChange={(e) => setForm((f) => ({ ...f, apiKey: e.target.value }))} placeholder="sk-ant-..." autoComplete="new-password" />
</Field>
<Field label={t('ai_model')} dirty={draft.isFieldDirty('model')}>
<select className="input" value={form.model} onChange={(e) => setForm((f) => ({ ...f, model: e.target.value }))}>
{config.models.map((m) => <option key={m} value={m}>{t(MODEL_LABEL_KEYS[m] || m)}</option>)}
</select>
</Field>
</FieldRow>
{testResult && <InfoBar tone={testResult.ok ? 'success' : 'error'}>{testResult.message}</InfoBar>}
<div style={{ display: 'flex', gap: 8 }}>
<Button variant="accent" icon={Save} onClick={save}>{t('common_save')}</Button>
<Button variant="standard" icon={Send} onClick={runTest} disabled={testing || (!form.apiKey && !config.configured)}>
{testing ? t('ai_testing') : t('ai_test')}
</Button>
</div>
</div>
);
}
frontend/src/pages/Configuracion/ConfiguracionPage.jsx
+6 -1
View File
@@ -1,6 +1,6 @@
import { useEffect } from 'react';
import { Navigate, useSearchParams } from 'react-router-dom';
import { Palette, ListChecks, Flag, FolderKanban, Layers, Mail, Building2, RefreshCw, Bug } from 'lucide-react';
import { Palette, ListChecks, Flag, FolderKanban, Layers, Mail, Building2, RefreshCw, Bug, Sparkles } from 'lucide-react';
import { useUi } from '../../context/ui-context.jsx';
import { useAuth } from '../../context/auth-context.jsx';
import { Expander } from '../../components/Expander.jsx';
@@ -8,6 +8,7 @@ import { Field, FieldRow } from '../../components/Field.jsx';
import { ComboBox } from '../../components/ComboBox.jsx';
import { CatalogEditor } from './CatalogEditor.jsx';
import SmtpSettingsPanel from './SmtpSettingsPanel.jsx';
import AiSettingsPanel from './AiSettingsPanel.jsx';
import CompanySettingsPanel from './CompanySettingsPanel.jsx';
import UpdaterPanel from './UpdaterPanel.jsx';
import ErrorLogsPanel from './ErrorLogsPanel.jsx';
@@ -119,6 +120,10 @@ export default function ConfiguracionPage() {
<SmtpSettingsPanel />
</Expander>
<Expander icon={Sparkles} title={t('config_ai')} draftForms={['ai-config']}>
<AiSettingsPanel />
</Expander>
<div id="updates-panel">
<Expander icon={RefreshCw} title={t('config_updater')} defaultOpen={openUpdates}>
<UpdaterPanel />
frontend/src/pages/Configuracion/SmtpSettingsPanel.jsx
+1 -1
View File
@@ -73,7 +73,7 @@ export default function SmtpSettingsPanel() {
</Field>
</FieldRow>
<Field label={t('smtp_pass')} dirty={draft.isFieldDirty('pass')} hint={config.configured ? t('smtp_pass_configured_hint') : undefined}>
<PasswordInput value={form.pass} onChange={(e) => setForm((f) => ({ ...f, pass: e.target.value }))} />
<PasswordInput value={form.pass} onChange={(e) => setForm((f) => ({ ...f, pass: e.target.value }))} autoComplete="new-password" />
</Field>
<Button variant="accent" icon={Save} onClick={save}>{t('common_save')}</Button>
frontend/src/pages/Proyectos/AiPlanDialog.jsx
+97
View File
@@ -0,0 +1,97 @@
import { useState } from 'react';
import { Sparkles, Check } from 'lucide-react';
import { DetailPopup } from '../../components/DetailPopup.jsx';
import { Button } from '../../components/Button.jsx';
import { Field } from '../../components/Field.jsx';
import { InfoBar } from '../../components/InfoBar.jsx';
import { useUi } from '../../context/ui-context.jsx';
import { generateProjectPlan, applyProjectPlan } from '../../services/ai.js';
// Plan de actividades sugerido por IA: el usuario describe, revisa la propuesta, desmarca lo que
// no quiere y recien ahi se crean (la IA solo sugiere, nunca guarda sola).
export function AiPlanDialog({ open, projectId, onClose, onCreated }) {
const { t, lang, pushToast } = useUi();
const [description, setDescription] = useState('');
const [plan, setPlan] = useState(null);
const [selected, setSelected] = useState([]);
const [busy, setBusy] = useState(false);
const [error, setError] = useState('');
function close() {
setPlan(null); setSelected([]); setError(''); setDescription('');
onClose();
}
async function generate() {
setBusy(true); setError('');
try {
const r = await generateProjectPlan(projectId, { description, lang });
setPlan(r.activities);
setSelected(r.activities.map((_, i) => i));
} catch (err) {
setError(err.message);
} finally {
setBusy(false);
}
}
async function apply() {
setBusy(true); setError('');
try {
const r = await applyProjectPlan(projectId, plan.filter((_, i) => selected.includes(i)));
pushToast({ tone: 'success', message: `${t('ai_plan_created')}: ${r.created}` });
onCreated();
close();
} catch (err) {
setError(err.message);
} finally {
setBusy(false);
}
}
const toggle = (i) => setSelected((s) => (s.includes(i) ? s.filter((x) => x !== i) : [...s, i]));
return (
<DetailPopup open={open} title={t('ai_plan_title')} onClose={busy ? () => {} : close} width={720} height={620}>
{error && <InfoBar tone="error">{error}</InfoBar>}
{!plan ? (
<>
<p className="text-muted" style={{ marginTop: 0 }}>{t('ai_plan_hint')}</p>
<Field label={t('ai_plan_description')}>
<textarea className="input" rows={5} value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('ai_plan_placeholder')} />
</Field>
<div style={{ display: 'flex', gap: 8 }}>
<Button variant="accent" icon={Sparkles} onClick={generate} disabled={busy}>{busy ? t('ai_plan_generating') : t('ai_plan_generate')}</Button>
<Button variant="standard" onClick={close} disabled={busy}>{t('common_cancel')}</Button>
</div>
</>
) : (
<>
<p className="text-muted" style={{ marginTop: 0 }}>{t('ai_plan_review')}</p>
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
{plan.map((a, i) => (
<label key={i} className="panel-card" style={{ display: 'flex', gap: 10, alignItems: 'flex-start', margin: 0 }}>
<input type="checkbox" checked={selected.includes(i)} onChange={() => toggle(i)} style={{ marginTop: 4 }} />
<div>
<strong>{a.name}</strong> <span className="text-muted">· {a.durationDays} {t('ai_plan_days')}</span>
{a.description && <div className="text-muted" style={{ fontSize: '.8rem' }}>{a.description}</div>}
{a.tasks.length > 0 && (
<ul style={{ margin: '4px 0 0', paddingLeft: 18, fontSize: '.82rem' }}>
{a.tasks.map((task, j) => <li key={j}>{task}</li>)}
</ul>
)}
</div>
</label>
))}
</div>
<div style={{ display: 'flex', gap: 8 }}>
<Button variant="accent" icon={Check} onClick={apply} disabled={busy || !selected.length}>
{busy ? t('ai_plan_creating') : `${t('ai_plan_apply')} (${selected.length})`}
</Button>
<Button variant="standard" onClick={() => setPlan(null)} disabled={busy}>{t('ai_plan_back')}</Button>
</div>
</>
)}
</DetailPopup>
);
}
frontend/src/pages/Proyectos/ProjectActivitiesTab.jsx
+11 -1
View File
@@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Plus, Save, Trash2, ArrowRightLeft, FolderUp, Archive, RotateCcw } from 'lucide-react';
import { Plus, Save, Trash2, ArrowRightLeft, FolderUp, Archive, RotateCcw, Sparkles } from 'lucide-react';
import { useUi } from '../../context/ui-context.jsx';
import { useAuth } from '../../context/auth-context.jsx';
import { useAsync, useAction } from '../../hooks/useAsync.js';
@@ -20,6 +20,8 @@ import { StatusBadge, ProgressBar, DueBadge } from '../../components/StatusBadge
import { dueStatus } from '../../utils/dueStatus.js';
import { DetailPopup } from '../../components/DetailPopup.jsx';
import ActivityDetailPanel from './ActivityDetailPanel.jsx';
import { AiPlanDialog } from './AiPlanDialog.jsx';
import { getAiStatus } from '../../services/ai.js';
import { DraftNotice } from '../../components/DraftNotice.jsx';
import { DraftMark, useGuardedClose } from '../../components/NavigationGuard.jsx';
import { useDraftForm, useUserDrafts, hasDraftFor } from '../../hooks/useDraftForm.js';
@@ -32,6 +34,9 @@ export default function ProjectActivitiesTab({ project, projectId }) {
const navigate = useNavigate();
const runAction = useAction();
const { data: activities, reload } = useAsync(() => listActivitiesByProject(projectId), [projectId]);
// Boton de IA solo si el superadmin configuro la clave; el backend valida permisos al usarlo.
const { data: aiStatus } = useAsync(() => getAiStatus().catch(() => ({ enabled: false })), []);
const [aiPlanOpen, setAiPlanOpen] = useState(false);
const [trashOpen, setTrashOpen] = useState(false);
const { data: trashed, reload: reloadTrash } = useAsync(
() => (trashOpen ? listActivitiesTrash(projectId) : Promise.resolve([])),
@@ -272,9 +277,14 @@ export default function ProjectActivitiesTab({ project, projectId }) {
{project?.isOwner && (
<Button variant="standard" icon={Archive} onClick={() => setTrashOpen(true)}>{t('activities_trash')}</Button>
)}
{aiStatus?.enabled && (
<Button variant="standard" icon={Sparkles} onClick={() => setAiPlanOpen(true)}>{t('ai_plan_button')}</Button>
)}
<Button variant="accent" icon={Plus} onClick={() => setCreating(true)}>{t('activity_new')}{pendingNew && !creating && <DraftMark />}</Button>
</div>
<AiPlanDialog open={aiPlanOpen} projectId={projectId} onClose={() => setAiPlanOpen(false)} onCreated={reload} />
<DetailPopup open={trashOpen} title={t('activities_trash')} onClose={() => setTrashOpen(false)} width={480} height={420}>
{(trashed || []).length === 0 && <div className="text-muted" style={{ fontSize: '.82rem' }}>{t('activities_trash_empty')}</div>}
{(trashed || []).map((a) => (