|
|
|
@@ -1,6 +1,6 @@
|
|
|
|
|
import { type KeyboardEvent, useMemo, useState } from 'react';
|
|
|
|
|
import { useMutation, useQuery } from '@tanstack/react-query';
|
|
|
|
|
import { api, ChatAction, ChatAgent, ChatAnswer, ChatHistoryTurn, ChatStreamPhase, SettingsActor } from '../lib/api';
|
|
|
|
|
import { api, ChatAction, ChatAgent, ChatAnswer, ChatHistoryTurn, ChatModelProvider, ChatStreamPhase, SettingsActor } from '../lib/api';
|
|
|
|
|
import { Card, StatusBadge } from '../components/ui/Card';
|
|
|
|
|
|
|
|
|
|
const ROLES = ['viewer', 'auditor', 'operator', 'project-admin', 'org-admin'];
|
|
|
|
@@ -82,6 +82,7 @@ export function Chat() {
|
|
|
|
|
const [chatId, setChatId] = useState('chat-default');
|
|
|
|
|
const [agentId, setAgentId] = useState('evidence-reader');
|
|
|
|
|
const [skillId, setSkillId] = useState('evidence-summary');
|
|
|
|
|
const [modelProvider, setModelProvider] = useState('local');
|
|
|
|
|
const [delegationLevel, setDelegationLevel] = useState(0);
|
|
|
|
|
const [message, setMessage] = useState('');
|
|
|
|
|
const [last, setLast] = useState<ChatAnswer | null>(null);
|
|
|
|
@@ -100,6 +101,9 @@ export function Chat() {
|
|
|
|
|
const agents = agentsQuery.data?.agents ?? [];
|
|
|
|
|
const selectedAgent = agents.find((agent) => agent.id === agentId) ?? agents.find((agent) => agent.allowed_for_role) ?? agents[0];
|
|
|
|
|
const selectedSkill = selectedAgent?.skills_allowed.includes(skillId) ? skillId : (selectedAgent?.skills_allowed[0] ?? '');
|
|
|
|
|
const modelsQuery = useQuery({ queryKey: ['chat-models', actor, selectedAgent?.model_role], queryFn: () => api.chatModels(actor, selectedAgent?.model_role ?? 'read_only'), retry: false });
|
|
|
|
|
const models = modelsQuery.data?.providers ?? [];
|
|
|
|
|
const selectedModel = models.find((provider) => provider.id === modelProvider) ?? models.find((provider) => provider.id === modelsQuery.data?.default) ?? models[0];
|
|
|
|
|
const persistedMessages = useMemo(() => (historyQuery.data?.turns ?? []).flatMap(turnMessages), [historyQuery.data]);
|
|
|
|
|
const liveAlreadyStored = Boolean(last?.turn_id && historyQuery.data?.turns.some((turn) => turn.turn_id === last.turn_id));
|
|
|
|
|
const liveMessages: WorkspaceMessage[] = [];
|
|
|
|
@@ -120,6 +124,7 @@ export function Chat() {
|
|
|
|
|
chatId,
|
|
|
|
|
agentId: override?.agentId ?? selectedAgent?.id ?? agentId,
|
|
|
|
|
skillId: override?.skillId ?? selectedSkill,
|
|
|
|
|
modelProvider: selectedModel?.id,
|
|
|
|
|
delegationLevel,
|
|
|
|
|
}),
|
|
|
|
|
onSuccess: (answer) => {
|
|
|
|
@@ -143,7 +148,7 @@ export function Chat() {
|
|
|
|
|
setDraftText(null);
|
|
|
|
|
setPendingMessage(text);
|
|
|
|
|
try {
|
|
|
|
|
await api.askChatStream(actor, { message: text, chatId, agentId: selectedAgent?.id ?? agentId, skillId: selectedSkill, delegationLevel }, (phase) => {
|
|
|
|
|
await api.askChatStream(actor, { message: text, chatId, agentId: selectedAgent?.id ?? agentId, skillId: selectedSkill, modelProvider: selectedModel?.id, delegationLevel }, (phase) => {
|
|
|
|
|
if (phase.phase === 'draft') setDraftText(phase.answer);
|
|
|
|
|
if (phase.phase === 'final') {
|
|
|
|
|
setDraftText(null);
|
|
|
|
@@ -267,7 +272,13 @@ export function Chat() {
|
|
|
|
|
<div className="text-[10px] font-bold uppercase tracking-[0.15em] text-slate-400">Governance context</div>
|
|
|
|
|
<div className="mt-3 rounded-xl border border-slate-200 bg-white p-3.5">
|
|
|
|
|
<div className="flex items-center justify-between gap-2"><div className="text-sm font-semibold text-slate-800">{selectedAgent?.label ?? 'Evidence reader'}</div><StatusBadge value={selectedAgent?.allowed_for_role ? 'allowed' : 'locked'} /></div>
|
|
|
|
|
<div className="mt-1 text-xs text-slate-500">{selectedAgent?.model_role ?? 'read_only'} · {selectedSkill || 'no skill selected'}</div>
|
|
|
|
|
<div className="mt-1 text-xs text-slate-500">{selectedAgent?.model_role ?? 'read_only'} · {selectedSkill || 'no skill selected'} · {selectedModel?.model ?? 'model unavailable'}</div>
|
|
|
|
|
<div className="mt-3 grid gap-2 border-t border-slate-100 pt-3 text-xs text-slate-600">
|
|
|
|
|
<label>Agent<select value={selectedAgent?.id ?? agentId} onChange={(event) => { const next = agents.find((agent) => agent.id === event.target.value); setAgentId(event.target.value); setSkillId(next?.skills_allowed[0] ?? ''); }} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{agents.map((agent: ChatAgent) => <option key={agent.id} value={agent.id} disabled={!agent.allowed_for_role}>{agent.label}{agent.allowed_for_role ? '' : ' (locked)'}</option>)}</select></label>
|
|
|
|
|
<label>Skill<select value={selectedSkill} onChange={(event) => setSkillId(event.target.value)} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{(selectedAgent?.skills_allowed ?? []).map((skill) => <option key={skill}>{skill}</option>)}</select></label>
|
|
|
|
|
<label>Model provider<select value={selectedModel?.id ?? ''} onChange={(event) => setModelProvider(event.target.value)} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{models.map((provider: ChatModelProvider) => <option key={provider.id} value={provider.id} disabled={!provider.allowed || !provider.configured}>{provider.id} · {provider.model}{provider.allowed && provider.configured ? '' : ` (${provider.reason || 'not allowed'})`}</option>)}</select></label>
|
|
|
|
|
<p className="text-[11px] leading-4 text-slate-500">Provider is policy-bound to your role and agent; cloud/gateway routes enforce preflight.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<details className="mt-3 border-t border-slate-100 pt-3 text-xs text-slate-600"><summary className="cursor-pointer font-medium text-slate-700">Session scope</summary><div className="mt-3 grid grid-cols-2 gap-2"><label className="col-span-2">Actor<input value={actor.actor} onChange={(event) => setActor({ ...actor, actor: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label>Role<select value={actor.role} onChange={(event) => setActor({ ...actor, role: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{ROLES.map((role) => <option key={role}>{role}</option>)}</select></label><label>Delegate<input type="number" min={0} max={5} value={delegationLevel} onChange={(event) => setDelegationLevel(Number(event.target.value || 0))} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label>Project<input value={actor.project} onChange={(event) => setActor({ ...actor, project: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label>Tenant<input value={actor.tenant} onChange={(event) => setActor({ ...actor, tenant: event.target.value })} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs" /></label><label className="col-span-2">Agent<select value={selectedAgent?.id ?? agentId} onChange={(event) => { const next = agents.find((agent) => agent.id === event.target.value); setAgentId(event.target.value); setSkillId(next?.skills_allowed[0] ?? ''); }} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{agents.map((agent: ChatAgent) => <option key={agent.id} value={agent.id}>{agent.label}{agent.allowed_for_role ? '' : ' (locked)'}</option>)}</select></label><label className="col-span-2">Skill<select value={selectedSkill} onChange={(event) => setSkillId(event.target.value)} className="mt-1 w-full rounded-lg border border-slate-200 px-2 py-1.5 text-xs">{(selectedAgent?.skills_allowed ?? []).map((skill) => <option key={skill}>{skill}</option>)}</select></label></div></details>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
thanhnv