claw/insightflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 4: Agent Assistant + Provenance + Entity Cards + Confidence Indicators

Browse Source 
- Add llm_client.py for Kimi API integration with RAG and streaming support
- Add Agent API endpoints: query, command, suggest
- Add Provenance API for relation source tracking
- Add Entity details API with mentions and relations
- Add Entity evolution analysis API
- Update workbench.html with Agent panel, entity cards, provenance modal
- Update app.js with Agent chat, entity hover cards, relation provenance
- Add low-confidence entity highlighting
- Update STATUS.md with Phase 4 progress
This commit is contained in:
OpenClaw Bot
2026-02-19 09:58:39 +08:00
parent 087a8d9c4d
commit 1f4fe5a33e
9 changed files with 1523 additions and 881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1168
frontend/app.js
View File

File diff suppressed because it is too large Load Diff

348
frontend/workbench.html
View File

@@ -584,6 +584,289 @@
.transcript-option.active {
background: #00d4ff22;
}
/* Phase 4: Agent Panel */
.agent-panel {
width: 320px;
background: #111;
border-left: 1px solid #222;
display: flex;
flex-direction: column;
transition: width 0.3s ease;
}
.agent-panel.collapsed {
width: 50px;
}
.agent-header {
padding: 12px 16px;
background: #141414;
border-bottom: 1px solid #222;
display: flex;
align-items: center;
justify-content: space-between;
}
.agent-title {
font-size: 0.9rem;
color: #00d4ff;
display: flex;
align-items: center;
gap: 8px;
}
.agent-toggle {
background: none;
border: none;
color: #666;
cursor: pointer;
font-size: 1.2rem;
padding: 4px;
}
.agent-toggle:hover {
color: #00d4ff;
}
.agent-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.agent-panel.collapsed .agent-content {
display: none;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.chat-message {
margin-bottom: 16px;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-message.user {
text-align: right;
}
.chat-message.assistant {
text-align: left;
}
.message-bubble {
display: inline-block;
padding: 10px 14px;
border-radius: 12px;
max-width: 90%;
font-size: 0.9rem;
line-height: 1.5;
}
.chat-message.user .message-bubble {
background: linear-gradient(90deg, #00d4ff, #7b2cbf);
color: white;
}
.chat-message.assistant .message-bubble {
background: #1a1a1a;
color: #e0e0e0;
border: 1px solid #333;
}
.chat-input-area {
padding: 12px 16px;
border-top: 1px solid #222;
background: #141414;
}
.chat-input {
width: 100%;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
padding: 10px 12px;
color: #e0e0e0;
font-size: 0.9rem;
resize: none;
outline: none;
}
.chat-input:focus {
border-color: #00d4ff;
}
.chat-actions {
display: flex;
gap: 8px;
margin-top: 8px;
}
.chat-btn {
background: #222;
border: 1px solid #333;
color: #888;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
}
.chat-btn:hover {
background: #333;
color: #00d4ff;
border-color: #00d4ff;
}
.chat-btn.primary {
background: linear-gradient(90deg, #00d4ff, #7b2cbf);
color: white;
border: none;
}
.chat-btn.primary:hover {
opacity: 0.9;
}
/* Phase 4: Entity Card */
.entity-card {
position: fixed;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 12px;
padding: 16px;
min-width: 280px;
max-width: 350px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
z-index: 1000;
display: none;
}
.entity-card.show {
display: block;
animation: popIn 0.2s ease;
}
@keyframes popIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.entity-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #333;
}
.entity-card-name {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
}
.entity-card-stats {
display: flex;
gap: 16px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #333;
font-size: 0.85rem;
color: #888;
}
.entity-card-stat {
display: flex;
align-items: center;
gap: 6px;
}
/* Phase 4: Provenance Modal */
.provenance-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 2000;
}
.provenance-modal.show {
display: flex;
}
.provenance-content {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 16px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow: hidden;
}
.provenance-header {
padding: 20px;
background: #141414;
border-bottom: 1px solid #333;
display: flex;
justify-content: space-between;
align-items: center;
}
.provenance-body {
padding: 20px;
overflow-y: auto;
max-height: 60vh;
}
.provenance-evidence {
background: #0a0a0a;
border-left: 3px solid #00d4ff;
padding: 16px;
margin: 16px 0;
border-radius: 0 8px 8px 0;
font-style: italic;
color: #ccc;
}
/* Phase 4: Suggestion Card */
.suggestion-card {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.2s;
}
.suggestion-card:hover {
border-color: #00d4ff;
background: #222;
}
.suggestion-type {
font-size: 0.75rem;
color: #00d4ff;
text-transform: uppercase;
margin-bottom: 4px;
}
.suggestion-title {
font-weight: 500;
margin-bottom: 4px;
}
.suggestion-desc {
font-size: 0.85rem;
color: #888;
}
/* Phase 4: Low confidence entity */
.entity.low-confidence {
background: rgba(255, 193, 7, 0.3);
border-bottom-color: #ffc107;
}
/* Typing indicator */
.typing-indicator {
display: flex;
gap: 4px;
padding: 10px 14px;
}
.typing-indicator span {
width: 8px;
height: 8px;
background: #666;
border-radius: 50%;
animation: typing 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-10px); }
}
</style>
</head>
<body>
@@ -608,6 +891,37 @@
<div class="content-area">
<!-- Workbench View -->
<div id="workbenchView" class="workbench-view" style="display: flex; width: 100%;">
<!-- Agent Panel -->
<div class="agent-panel" id="agentPanel">
<div class="agent-header">
<div class="agent-title">
<span>🤖</span>
<span>Agent 助手</span>
</div>
<button class="agent-toggle" onclick="toggleAgentPanel()">›</button>
</div>
<div class="agent-content">
<div class="chat-messages" id="chatMessages">
<div class="chat-message assistant">
<div class="message-bubble">
你好！我是 InsightFlow Agent。我可以帮你：<br><br>
• <b>问答</b>：询问项目中的任何信息<br>
• <b>合并实体</b>："把所有'客户端'合并到'App'"<br>
• <b>分析演变</b>："张总对项目的态度变化"<br>
• <b>编辑定义</b>："修改K8s的定义为..."
</div>
</div>
</div>
<div class="chat-input-area">
<textarea class="chat-input" id="chatInput" rows="2" placeholder="输入指令或问题..."></textarea>
<div class="chat-actions">
<button class="chat-btn" onclick="loadSuggestions()">💡 建议</button>
<button class="chat-btn primary" onclick="sendAgentMessage()">发送</button>
</div>
</div>
</div>
</div>
<div class="editor-panel">
<div class="panel-header">
<div style="display: flex; align-items: center; gap: 12px;">
@@ -633,7 +947,7 @@
<div class="graph-panel">
<div class="panel-header">
<span>🔗 知识图谱</span>
<span style="font-size:0.8rem;color:#666;">右键节点编辑 | 拖拽建立关系</span>
<span style="font-size:0.8rem;color:#666;">右键节点编辑 | 点击连线溯源</span>
</div>
<svg id="graph-svg"></svg>
<div class="entity-list" id="entityList">
@@ -703,6 +1017,38 @@
</div>
</div>
<!-- Entity Hover Card -->
<div class="entity-card" id="entityCard">
<div class="entity-card-header">
<span class="entity-type-badge" id="cardBadge">TYPE</span>
<span class="entity-card-name" id="cardName">Entity Name</span>
</div>
<div id="cardDefinition" style="color:#aaa;font-size:0.9rem;line-height:1.5;">暂无定义</div>
<div class="entity-card-stats">
<div class="entity-card-stat">
<span>📍</span>
<span id="cardMentions">0 次提及</span>
</div>
<div class="entity-card-stat">
<span>🔗</span>
<span id="cardRelations">0 个关系</span>
</div>
</div>
</div>
<!-- Provenance Modal -->
<div class="provenance-modal" id="provenanceModal">
<div class="provenance-content">
<div class="provenance-header">
<h3>🔗 知识溯源</h3>
<button class="close-btn" onclick="closeProvenance()">×</button>
</div>
<div class="provenance-body" id="provenanceBody">
<p style="color:#666;">加载中...</p>
</div>
</div>
</div>
<!-- Upload Modal -->
<div class="upload-overlay" id="uploadOverlay">
<div class="upload-box">