Added typed record
This commit is contained in:
Viswamedha Nalabotu
parent
a5f039d021
commit
4448d5b006
2 changed files with 102 additions and 120 deletions
|
|
@ -16,16 +16,16 @@ import { useAgentStore } from '../stores/agentStore';
|
|||
import { apiClient, isAxiosError } from '../lib/api';
|
||||
|
||||
const route = useRoute();
|
||||
console.log('[AgentDetail] Route params:', route.params);
|
||||
console.log('Route params:', route.params);
|
||||
|
||||
const agentStore = useAgentStore();
|
||||
console.log('[AgentDetail] Store instance:', agentStore);
|
||||
console.log('Store instance:', agentStore);
|
||||
|
||||
const agentId = route.params.id as string;
|
||||
console.log('[AgentDetail] Agent ID:', agentId);
|
||||
console.log('Agent ID:', agentId);
|
||||
|
||||
if (!agentId) {
|
||||
console.error('[AgentDetail] ERROR: No agent ID in route params');
|
||||
console.error('ERROR: No agent ID in route params');
|
||||
}
|
||||
|
||||
const agent = ref<Record<string, unknown>>({
|
||||
|
|
@ -35,21 +35,18 @@ const agent = ref<Record<string, unknown>>({
|
|||
status: 'idle',
|
||||
});
|
||||
|
||||
console.log('[AgentDetail] Initial agent state:', agent.value);
|
||||
console.log('Initial agent state:', agent.value);
|
||||
|
||||
const queryInput = ref('');
|
||||
const isRunning = computed(() => {
|
||||
console.log(
|
||||
'[AgentDetail] isRunning computed - executionStatus:',
|
||||
'isRunning computed - executionStatus:',
|
||||
agentStore.executionStatus
|
||||
);
|
||||
return agentStore.executionStatus === 'running';
|
||||
});
|
||||
const isConnected = computed(() => {
|
||||
console.log(
|
||||
'[AgentDetail] isConnected computed - isConnected:',
|
||||
agentStore.isConnected
|
||||
);
|
||||
console.log('isConnected computed - isConnected:', agentStore.isConnected);
|
||||
return agentStore.isConnected ?? false;
|
||||
});
|
||||
|
||||
|
|
@ -76,15 +73,17 @@ const statusColor = (status: string) => {
|
|||
};
|
||||
|
||||
const fetchAgent = async () => {
|
||||
console.log('[AgentDetail] Fetching agent details for ID:', agentId);
|
||||
console.log('Fetching agent details for ID:', agentId);
|
||||
try {
|
||||
const response = await apiClient.get(`/api/agent/${agentId}/`);
|
||||
const response = await apiClient.get<Record<string, unknown>>(
|
||||
`/api/agent/${agentId}/`
|
||||
);
|
||||
agent.value = response.data;
|
||||
console.log('[AgentDetail] Agent fetched successfully:', agent.value);
|
||||
console.log('Agent fetched successfully:', agent.value);
|
||||
} catch (error) {
|
||||
console.error('[AgentDetail] ERROR - Failed to fetch agent:', error);
|
||||
console.error('ERROR - Failed to fetch agent:', error);
|
||||
if (isAxiosError(error)) {
|
||||
console.error('[AgentDetail] Axios error details:', {
|
||||
console.error('Axios error details:', {
|
||||
status: error.response?.status,
|
||||
data: error.response?.data,
|
||||
message: error.message,
|
||||
|
|
@ -95,11 +94,11 @@ const fetchAgent = async () => {
|
|||
};
|
||||
|
||||
const startAgent = () => {
|
||||
console.log('[AgentDetail] Starting agent execution');
|
||||
console.log('Starting agent execution');
|
||||
|
||||
if (!agentStore.isConnected) {
|
||||
console.warn('[AgentDetail] WARNING: WebSocket not connected');
|
||||
console.log('[AgentDetail] Connection state:', {
|
||||
console.warn('WARNING: WebSocket not connected');
|
||||
console.log('Connection state:', {
|
||||
isConnected: agentStore.isConnected,
|
||||
});
|
||||
message.error('WebSocket not connected');
|
||||
|
|
@ -115,65 +114,56 @@ const startAgent = () => {
|
|||
const data = {
|
||||
query: queryInput.value.trim(),
|
||||
};
|
||||
console.log('[AgentDetail] Sending data:', data);
|
||||
console.log('Sending data:', data);
|
||||
|
||||
console.log('[AgentDetail] Calling startAgent on store');
|
||||
console.log('Calling startAgent on store');
|
||||
agentStore.startAgent(data);
|
||||
console.log('[AgentDetail] Agent execution initiated');
|
||||
console.log('Agent execution initiated');
|
||||
message.success('Agent execution started');
|
||||
} catch (error) {
|
||||
console.error('[AgentDetail] ERROR - Failed to start agent:', error);
|
||||
console.error('ERROR - Failed to start agent:', error);
|
||||
message.error('Failed to start agent');
|
||||
}
|
||||
};
|
||||
|
||||
const stopAgent = () => {
|
||||
console.log('[AgentDetail] Stopping agent execution');
|
||||
console.log('Stopping agent execution');
|
||||
|
||||
try {
|
||||
console.log('[AgentDetail] Calling stopAgent on store');
|
||||
console.log('Calling stopAgent on store');
|
||||
agentStore.stopAgent();
|
||||
console.log('[AgentDetail] Agent stop signal sent');
|
||||
console.log('Agent stop signal sent');
|
||||
message.success('Agent stop requested');
|
||||
} catch (error) {
|
||||
console.error('[AgentDetail] ERROR - Failed to stop agent:', error);
|
||||
console.error('ERROR - Failed to stop agent:', error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
console.log('[AgentDetail] Component mounted');
|
||||
console.log('[AgentDetail] Lifecycle: onMounted - starting initialization');
|
||||
console.log('Component mounted');
|
||||
console.log('Lifecycle: onMounted - starting initialization');
|
||||
|
||||
fetchAgent();
|
||||
|
||||
console.log(
|
||||
'[AgentDetail] Attempting WebSocket connection for agent:',
|
||||
agentId
|
||||
);
|
||||
console.log('Attempting WebSocket connection for agent:', agentId);
|
||||
try {
|
||||
agentStore.connect(agentId);
|
||||
console.log('[AgentDetail] WebSocket connection initiated');
|
||||
console.log('WebSocket connection initiated');
|
||||
} catch (error) {
|
||||
console.error(
|
||||
'[AgentDetail] ERROR - Failed to connect WebSocket:',
|
||||
error
|
||||
);
|
||||
console.error('ERROR - Failed to connect WebSocket:', error);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
console.log('[AgentDetail] Component unmounted');
|
||||
console.log('[AgentDetail] Lifecycle: onUnmounted - cleaning up');
|
||||
console.log('Component unmounted');
|
||||
console.log('Lifecycle: onUnmounted - cleaning up');
|
||||
|
||||
try {
|
||||
console.log('[AgentDetail] Disconnecting WebSocket');
|
||||
console.log('Disconnecting WebSocket');
|
||||
agentStore.disconnect();
|
||||
console.log('[AgentDetail] WebSocket disconnected successfully');
|
||||
console.log('WebSocket disconnected successfully');
|
||||
} catch (error) {
|
||||
console.error(
|
||||
'[AgentDetail] ERROR - Failed to disconnect WebSocket:',
|
||||
error
|
||||
);
|
||||
console.error('ERROR - Failed to disconnect WebSocket:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,103 +4,95 @@ import { List, Typography, Button, Card, Spin, message } from 'ant-design-vue';
|
|||
import { apiClient } from '../lib/api';
|
||||
|
||||
interface Agent {
|
||||
uuid: string;
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: string;
|
||||
uuid: string;
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
const agents = ref<Agent[]>([]);
|
||||
const loading = ref(false);
|
||||
const loadError = ref(false);
|
||||
|
||||
const fetchAgents = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await apiClient.get('/api/agent/');
|
||||
agents.value = response.data;
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch agents:', error);
|
||||
message.error('Failed to load agents');
|
||||
agents.value = [
|
||||
{
|
||||
uuid: 'a1',
|
||||
id: 'a1',
|
||||
name: 'Onboarding Bot',
|
||||
description: 'Guided tours',
|
||||
status: 'idle',
|
||||
},
|
||||
{
|
||||
uuid: 'a2',
|
||||
id: 'a2',
|
||||
name: 'Docs Helper',
|
||||
description: 'Knowledge base',
|
||||
status: 'idle',
|
||||
},
|
||||
{
|
||||
uuid: 'a3',
|
||||
id: 'a3',
|
||||
name: 'QA Coach',
|
||||
description: 'Assessment',
|
||||
status: 'idle',
|
||||
},
|
||||
];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
loading.value = true;
|
||||
loadError.value = false;
|
||||
try {
|
||||
const response = await apiClient.get<Agent[]>('/api/agent/');
|
||||
agents.value = Array.isArray(response.data) ? response.data : [];
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch agents:', error);
|
||||
message.error('Failed to load agents');
|
||||
agents.value = [];
|
||||
loadError.value = true;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchAgents();
|
||||
fetchAgents();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<Typography.Title :level="2">Agents</Typography.Title>
|
||||
<Typography.Paragraph type="secondary"
|
||||
>Manage and inspect the available AI agents.</Typography.Paragraph
|
||||
>
|
||||
<div class="page">
|
||||
<Typography.Title :level="2">Agents</Typography.Title>
|
||||
<Typography.Paragraph type="secondary"
|
||||
>Manage and inspect the available AI agents.</Typography.Paragraph
|
||||
>
|
||||
|
||||
<Card class="panel" :bordered="false">
|
||||
<Spin :spinning="loading" tip="Loading agents...">
|
||||
<List
|
||||
:data-source="agents"
|
||||
item-layout="horizontal"
|
||||
:bordered="false"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<List.Item class="item">
|
||||
<List.Item.Meta
|
||||
:title="item.name"
|
||||
:description="`${item.description} • Status: ${item.status}`"
|
||||
/>
|
||||
<RouterLink :to="`/agents/${item.uuid || item.id}`">
|
||||
<Button type="primary" size="small"
|
||||
>Open</Button
|
||||
>
|
||||
</RouterLink>
|
||||
</List.Item>
|
||||
</template>
|
||||
</List>
|
||||
</Spin>
|
||||
</Card>
|
||||
</div>
|
||||
<Card class="panel" :bordered="false">
|
||||
<Spin :spinning="loading" tip="Loading agents...">
|
||||
<div v-if="loadError" class="empty">
|
||||
<Typography.Paragraph type="danger">
|
||||
Failed to load agents.
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
<div v-else-if="!loading && agents.length === 0" class="empty">
|
||||
<Typography.Paragraph type="secondary">
|
||||
No agents found.
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
<List
|
||||
v-else
|
||||
:data-source="agents"
|
||||
item-layout="horizontal"
|
||||
:bordered="false"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<List.Item class="item">
|
||||
<List.Item.Meta
|
||||
:title="item.name"
|
||||
:description="`${item.description} • Status: ${item.status}`"
|
||||
/>
|
||||
<RouterLink :to="`/agents/${item.uuid || item.id}`">
|
||||
<Button type="primary" size="small"
|
||||
>Open</Button
|
||||
>
|
||||
</RouterLink>
|
||||
</List.Item>
|
||||
</template>
|
||||
</List>
|
||||
</Spin>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
.panel {
|
||||
background: #0f172a;
|
||||
border: 1px solid #1f2937;
|
||||
color: #e5e7eb;
|
||||
background: #0f172a;
|
||||
border: 1px solid #1f2937;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
.item :deep(.ant-list-item-meta-title),
|
||||
.item :deep(.ant-list-item-meta-description) {
|
||||
color: #e5e7eb;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue