+
+ );
+};
diff --git a/web/pages/Dashboard.tsx b/web/pages/Dashboard.tsx
index 7ba8460..6b34ff5 100644
--- a/web/pages/Dashboard.tsx
+++ b/web/pages/Dashboard.tsx
@@ -140,8 +140,8 @@ export const DashboardPage: React.FC = () => {
- {/* 6. Platform Feature Intro - Moved to Bottom, Full Width */}
-
+
+
+ 语音识别
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 6. Platform Feature Intro - Updated Background */}
+
diff --git a/web/pages/History.tsx b/web/pages/History.tsx
index 818d503..51cc056 100644
--- a/web/pages/History.tsx
+++ b/web/pages/History.tsx
@@ -1,29 +1,35 @@
import React, { useState } from 'react';
-import { Download, Search, Calendar, Filter } from 'lucide-react';
-import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Badge } from '../components/UI';
+import { Download, Search, Calendar, Filter, MessageSquare, Mic, Video, Eye, X, Play } from 'lucide-react';
+import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Badge, Drawer } from '../components/UI';
import { mockCallLogs } from '../services/mockData';
+import { CallLog, InteractionType } from '../types';
export const HistoryPage: React.FC = () => {
const [logs] = useState(mockCallLogs);
const [searchTerm, setSearchTerm] = useState('');
const [statusFilter, setStatusFilter] = useState<'all' | 'connected' | 'missed'>('all');
const [sourceFilter, setSourceFilter] = useState<'all' | 'debug' | 'external'>('all');
+ const [typeFilter, setTypeFilter] = useState<'all' | InteractionType>('all');
+
+ const [selectedLog, setSelectedLog] = useState(null);
const filteredLogs = logs.filter(log => {
const matchesSearch = log.agentName.toLowerCase().includes(searchTerm.toLowerCase());
const matchesStatus = statusFilter === 'all' || log.status === statusFilter;
const matchesSource = sourceFilter === 'all' || log.source === sourceFilter;
- return matchesSearch && matchesStatus && matchesSource;
+ const matchesType = typeFilter === 'all' || log.type === typeFilter;
+ return matchesSearch && matchesStatus && matchesSource && matchesType;
});
const handleExport = () => {
// Generate CSV content
- const headers = ['ID', 'Agent', 'Source', 'Status', 'Start Time', 'Duration'];
+ const headers = ['ID', 'Agent', 'Source', 'Type', 'Status', 'Start Time', 'Duration'];
const rows = filteredLogs.map(log => [
log.id,
log.agentName,
- log.source,
+ log.source,
+ log.type,
log.status,
log.startTime,
log.duration
@@ -47,7 +53,7 @@ export const HistoryPage: React.FC = () => {
-
+
setSelectedLog(null)}
+ title="历史记录详情"
+ >
+
+ )}
);
};
diff --git a/web/pages/LLMLibrary.tsx b/web/pages/LLMLibrary.tsx
new file mode 100644
index 0000000..60d8d29
--- /dev/null
+++ b/web/pages/LLMLibrary.tsx
@@ -0,0 +1,248 @@
+
+import React, { useState } from 'react';
+import { Search, Filter, Plus, BrainCircuit, Trash2, Key, Settings2, Server, Thermometer } from 'lucide-react';
+import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge } from '../components/UI';
+import { mockLLMModels } from '../services/mockData';
+import { LLMModel } from '../types';
+
+export const LLMLibraryPage: React.FC = () => {
+ const [models, setModels] = useState(mockLLMModels);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [vendorFilter, setVendorFilter] = useState('all');
+ const [typeFilter, setTypeFilter] = useState('all');
+ const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+
+ // Form State
+ const [newModel, setNewModel] = useState>({
+ vendor: 'OpenAI Compatible',
+ type: 'text',
+ temperature: 0.7
+ });
+
+ const filteredModels = models.filter(m => {
+ const matchesSearch = m.name.toLowerCase().includes(searchTerm.toLowerCase());
+ const matchesVendor = vendorFilter === 'all' || m.vendor === vendorFilter;
+ const matchesType = typeFilter === 'all' || m.type === typeFilter;
+ return matchesSearch && matchesVendor && matchesType;
+ });
+
+ const handleAddModel = () => {
+ if (!newModel.name || !newModel.baseUrl || !newModel.apiKey) {
+ alert("请填写完整信息");
+ return;
+ }
+
+ const model: LLMModel = {
+ id: `m_${Date.now()}`,
+ name: newModel.name,
+ vendor: newModel.vendor as string,
+ type: newModel.type as 'text' | 'embedding' | 'rerank',
+ baseUrl: newModel.baseUrl,
+ apiKey: newModel.apiKey,
+ temperature: newModel.type === 'text' ? newModel.temperature : undefined
+ };
+
+ setModels([model, ...models]);
+ setIsAddModalOpen(false);
+ setNewModel({ vendor: 'OpenAI Compatible', type: 'text', temperature: 0.7, name: '', baseUrl: '', apiKey: '' });
+ };
+
+ const handleDeleteModel = (id: string) => {
+ if (confirm('确认删除该模型配置吗？')) {
+ setModels(prev => prev.filter(m => m.id !== id));
+ }
+ };
+
+ return (
+ = {
+ Camera: (mockTools);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [categoryFilter, setCategoryFilter] = useState<'all' | 'system' | 'query'>('all');
+ const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+
+ // New Tool Form
+ const [newToolName, setNewToolName] = useState('');
+ const [newToolDesc, setNewToolDesc] = useState('');
+ const [newToolCategory, setNewToolCategory] = useState<'system' | 'query'>('system');
+
+ const filteredTools = tools.filter(tool => {
+ const matchesSearch = tool.name.toLowerCase().includes(searchTerm.toLowerCase());
+ const matchesCategory = categoryFilter === 'all' || tool.category === categoryFilter;
+ return matchesSearch && matchesCategory;
+ });
+
+ const handleAddTool = () => {
+ if (!newToolName.trim()) return;
+ const newTool: Tool = {
+ id: `custom_${Date.now()}`,
+ name: newToolName,
+ description: newToolDesc,
+ category: newToolCategory,
+ icon: newToolCategory === 'system' ? 'Terminal' : 'Globe',
+ isCustom: true
+ };
+ setTools([...tools, newTool]);
+ setIsAddModalOpen(false);
+ setNewToolName('');
+ setNewToolDesc('');
+ };
+
+ const handleDeleteTool = (e: React.MouseEvent, id: string) => {
+ e.stopPropagation();
+ if (confirm('确认删除该工具吗？')) {
+ setTools(prev => prev.filter(t => t.id !== id));
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ {selectedLog.type} Record
+
+ {selectedLog.agentName}
+
+
+ ID: #{selectedLog.id}
+ 时间: {selectedLog.startTime}
+ 时长: {selectedLog.duration}
+ 状态: {selectedLog.status}
+
+ {(selectedLog.details && selectedLog.details.length > 0) ? (
+ selectedLog.details.map((detail, index) => (
+
+
+
+ ))
+ ) : (
+
+
+
+
+ {detail.role === 'user' ? 'User' : 'AI Assistant'}
+
+ {detail.timestamp}
+
+
+ {/* Video Frames */}
+ {selectedLog.type === 'video' && detail.role === 'user' && detail.imageUrls && detail.imageUrls.length > 0 && (
+
+ {detail.imageUrls.map((url, i) => (
+
+ )}
+
+ {/* Content / Transcript */}
+
+ 
+
+ ))}
+
+
+
+ {selectedLog.type !== 'text' && (
+
+
+ {/* Audio Player Placeholder for Audio/Video types */}
+ {selectedLog.type !== 'text' && (
+
+
+ )}
+ {detail.content}
+
+ {selectedLog.type === 'audio' ?
+ Transcript
+
+
+
+ )}
+
+
+
+ 00:05
+
+
+ )}
+ 暂无对话详情数据
+
+
+ );
+};
diff --git a/web/pages/ToolLibrary.tsx b/web/pages/ToolLibrary.tsx
new file mode 100644
index 0000000..77c1720
--- /dev/null
+++ b/web/pages/ToolLibrary.tsx
@@ -0,0 +1,191 @@
+
+import React, { useState } from 'react';
+import { Search, Filter, Plus, Wrench, Terminal, Globe, Camera, CameraOff, Image, Images, CloudSun, Calendar, TrendingUp, Coins, Trash2, Edit2, X, Box } from 'lucide-react';
+import { Button, Input, Badge, Dialog } from '../components/UI';
+import { mockTools } from '../services/mockData';
+import { Tool } from '../types';
+
+// Map icon strings to React Nodes
+const iconMap: Record
+
+
+ 大模型库
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 工具库
+ +
+
+
+
+
+
+
+
+ {filteredTools.map(tool => (
+
+
+
+
+ ))}
+ {filteredTools.length === 0 && (
+
+ {iconMap[tool.icon] ||
+
+
+
+ {tool.isCustom && (
+
+ {tool.name}
+ {tool.isCustom && CUSTOM }
+
+
+
+ {tool.category === 'system' ? 'SYSTEM' : 'QUERY'}
+
+ ID: {tool.id}
+
+ {tool.description}
+
+
+
+ )}
+
+
+ )}
+ 未找到相关工具
+