Enhance Step4Report component with tool-specific icons and improved action buttons
- Introduced dynamic tool icons and colors based on tool type for better visual representation in tool calls and results. - Updated action buttons for toggling parameters and views, improving user interaction and layout consistency. - Refactored the InterviewDisplay component to include result length and enhanced quote formatting for better readability. - Improved overall styling and layout adjustments for a more cohesive user experience.
This commit is contained in:
666ghj
parent
705bebea7f
commit
daae4718b4
1 changed files with 367 additions and 84 deletions
|
|
@ -213,8 +213,40 @@
|
|||
|
||||
<!-- Tool Call -->
|
||||
<template v-if="log.action === 'tool_call'">
|
||||
<div class="tool-badge">
|
||||
<svg class="tool-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<div class="tool-badge" :class="'tool-' + getToolColor(log.details?.tool_name)">
|
||||
<!-- Deep Insight - Lightbulb -->
|
||||
<svg v-if="getToolIcon(log.details?.tool_name) === 'lightbulb'" class="tool-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.5V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.5A7 7 0 0 0 12 2z"></path>
|
||||
</svg>
|
||||
<!-- Panorama Search - Globe -->
|
||||
<svg v-else-if="getToolIcon(log.details?.tool_name) === 'globe'" class="tool-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
|
||||
</svg>
|
||||
<!-- Agent Interview - Users -->
|
||||
<svg v-else-if="getToolIcon(log.details?.tool_name) === 'users'" class="tool-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||||
</svg>
|
||||
<!-- Quick Search - Zap -->
|
||||
<svg v-else-if="getToolIcon(log.details?.tool_name) === 'zap'" class="tool-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
|
||||
</svg>
|
||||
<!-- Graph Stats - Chart -->
|
||||
<svg v-else-if="getToolIcon(log.details?.tool_name) === 'chart'" class="tool-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="20" x2="18" y2="10"></line>
|
||||
<line x1="12" y1="20" x2="12" y2="4"></line>
|
||||
<line x1="6" y1="20" x2="6" y2="14"></line>
|
||||
</svg>
|
||||
<!-- Entity Query - Database -->
|
||||
<svg v-else-if="getToolIcon(log.details?.tool_name) === 'database'" class="tool-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
||||
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
|
||||
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
|
||||
</svg>
|
||||
<!-- Default - Tool -->
|
||||
<svg v-else class="tool-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
|
||||
</svg>
|
||||
{{ getToolDisplayName(log.details?.tool_name) }}
|
||||
|
|
@ -222,15 +254,13 @@
|
|||
<div v-if="log.details?.parameters && expandedLogs.has(log.timestamp)" class="tool-params">
|
||||
<pre>{{ formatParams(log.details.parameters) }}</pre>
|
||||
</div>
|
||||
<button v-if="log.details?.parameters" class="expand-toggle" @click.stop="toggleLogExpand(log)">
|
||||
{{ expandedLogs.has(log.timestamp) ? 'Hide Params' : 'Show Params' }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Tool Result -->
|
||||
<template v-if="log.action === 'tool_result'">
|
||||
<div class="result-wrapper" :class="'result-' + log.details?.tool_name">
|
||||
<div class="result-meta">
|
||||
<!-- Hide result-meta for interview_agents as it's shown in the component header -->
|
||||
<div v-if="log.details?.tool_name !== 'interview_agents'" class="result-meta">
|
||||
<span class="result-tool">{{ getToolDisplayName(log.details?.tool_name) }}</span>
|
||||
<span class="result-size">{{ formatResultSize(log.details?.result_length) }}</span>
|
||||
</div>
|
||||
|
|
@ -239,7 +269,7 @@
|
|||
<div v-if="!showRawResult[log.timestamp]" class="result-structured">
|
||||
<!-- Interview Agents - Special Display -->
|
||||
<template v-if="log.details?.tool_name === 'interview_agents'">
|
||||
<InterviewDisplay :result="parseInterview(log.details.result)" />
|
||||
<InterviewDisplay :result="parseInterview(log.details.result)" :result-length="log.details?.result_length" />
|
||||
</template>
|
||||
|
||||
<!-- Insight Forge -->
|
||||
|
|
@ -267,10 +297,6 @@
|
|||
<div v-else class="result-raw">
|
||||
<pre>{{ log.details?.result }}</pre>
|
||||
</div>
|
||||
|
||||
<button class="toggle-raw" @click.stop="toggleRawResult(log.timestamp)">
|
||||
{{ showRawResult[log.timestamp] ? 'Structured View' : 'Raw Output' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -295,9 +321,6 @@
|
|||
<div v-if="expandedLogs.has(log.timestamp) && log.details?.response" class="llm-content">
|
||||
<pre>{{ log.details.response }}</pre>
|
||||
</div>
|
||||
<button v-if="log.details?.response" class="expand-toggle" @click.stop="toggleLogExpand(log)">
|
||||
{{ expandedLogs.has(log.timestamp) ? 'Hide Response' : 'Show Response' }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Report Complete -->
|
||||
|
|
@ -312,9 +335,27 @@
|
|||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Elapsed Time -->
|
||||
<div class="timeline-footer" v-if="log.elapsed_seconds">
|
||||
<span class="elapsed-badge">+{{ log.elapsed_seconds.toFixed(1) }}s</span>
|
||||
<!-- Footer: Elapsed Time + Action Buttons -->
|
||||
<div class="timeline-footer" v-if="log.elapsed_seconds || (log.action === 'tool_call' && log.details?.parameters) || log.action === 'tool_result' || (log.action === 'llm_response' && log.details?.response)">
|
||||
<span v-if="log.elapsed_seconds" class="elapsed-badge">+{{ log.elapsed_seconds.toFixed(1) }}s</span>
|
||||
<span v-else class="elapsed-placeholder"></span>
|
||||
|
||||
<div class="footer-actions">
|
||||
<!-- Tool Call: Show/Hide Params -->
|
||||
<button v-if="log.action === 'tool_call' && log.details?.parameters" class="action-btn" @click.stop="toggleLogExpand(log)">
|
||||
{{ expandedLogs.has(log.timestamp) ? 'Hide Params' : 'Show Params' }}
|
||||
</button>
|
||||
|
||||
<!-- Tool Result: Raw/Structured View -->
|
||||
<button v-if="log.action === 'tool_result'" class="action-btn" @click.stop="toggleRawResult(log.timestamp, $event)">
|
||||
{{ showRawResult[log.timestamp] ? 'Structured View' : 'Raw Output' }}
|
||||
</button>
|
||||
|
||||
<!-- LLM Response: Show/Hide Response -->
|
||||
<button v-if="log.action === 'llm_response' && log.details?.response" class="action-btn" @click.stop="toggleLogExpand(log)">
|
||||
{{ expandedLogs.has(log.timestamp) ? 'Hide Response' : 'Show Response' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -375,8 +416,26 @@ const logContent = ref(null)
|
|||
const showRawResult = reactive({})
|
||||
|
||||
// Toggle functions
|
||||
const toggleRawResult = (timestamp) => {
|
||||
const toggleRawResult = (timestamp, event) => {
|
||||
// 保存按钮相对于视口的位置
|
||||
const button = event?.target
|
||||
const buttonRect = button?.getBoundingClientRect()
|
||||
const buttonTopBeforeToggle = buttonRect?.top
|
||||
|
||||
// 切换状态
|
||||
showRawResult[timestamp] = !showRawResult[timestamp]
|
||||
|
||||
// 等待 DOM 更新后，调整滚动位置以保持按钮在相同位置
|
||||
if (button && buttonTopBeforeToggle !== undefined && rightPanel.value) {
|
||||
nextTick(() => {
|
||||
const newButtonRect = button.getBoundingClientRect()
|
||||
const buttonTopAfterToggle = newButtonRect.top
|
||||
const scrollDelta = buttonTopAfterToggle - buttonTopBeforeToggle
|
||||
|
||||
// 调整滚动位置
|
||||
rightPanel.value.scrollTop += scrollDelta
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSectionContent = (idx) => {
|
||||
|
|
@ -419,17 +478,50 @@ const isLogCollapsed = (log) => {
|
|||
return false
|
||||
}
|
||||
|
||||
// Tool display names (without emojis)
|
||||
const getToolDisplayName = (toolName) => {
|
||||
const names = {
|
||||
'insight_forge': 'Deep Insight',
|
||||
'panorama_search': 'Panorama Search',
|
||||
'interview_agents': 'Agent Interview',
|
||||
'quick_search': 'Quick Search',
|
||||
'get_graph_statistics': 'Graph Stats',
|
||||
'get_entities_by_type': 'Entity Query'
|
||||
// Tool configurations with display names and colors
|
||||
const toolConfig = {
|
||||
'insight_forge': {
|
||||
name: 'Deep Insight',
|
||||
color: 'purple',
|
||||
icon: 'lightbulb' // 灯泡图标 - 代表洞察
|
||||
},
|
||||
'panorama_search': {
|
||||
name: 'Panorama Search',
|
||||
color: 'blue',
|
||||
icon: 'globe' // 地球图标 - 代表全景搜索
|
||||
},
|
||||
'interview_agents': {
|
||||
name: 'Agent Interview',
|
||||
color: 'green',
|
||||
icon: 'users' // 用户图标 - 代表对话
|
||||
},
|
||||
'quick_search': {
|
||||
name: 'Quick Search',
|
||||
color: 'orange',
|
||||
icon: 'zap' // 闪电图标 - 代表快速
|
||||
},
|
||||
'get_graph_statistics': {
|
||||
name: 'Graph Stats',
|
||||
color: 'cyan',
|
||||
icon: 'chart' // 图表图标 - 代表统计
|
||||
},
|
||||
'get_entities_by_type': {
|
||||
name: 'Entity Query',
|
||||
color: 'pink',
|
||||
icon: 'database' // 数据库图标 - 代表实体
|
||||
}
|
||||
return names[toolName] || toolName
|
||||
}
|
||||
|
||||
const getToolDisplayName = (toolName) => {
|
||||
return toolConfig[toolName]?.name || toolName
|
||||
}
|
||||
|
||||
const getToolColor = (toolName) => {
|
||||
return toolConfig[toolName]?.color || 'gray'
|
||||
}
|
||||
|
||||
const getToolIcon = (toolName) => {
|
||||
return toolConfig[toolName]?.icon || 'tool'
|
||||
}
|
||||
|
||||
// Parse functions
|
||||
|
|
@ -811,8 +903,24 @@ const PanoramaDisplay = {
|
|||
|
||||
// Interview Display Component - Conversation Style (Q&A Format)
|
||||
const InterviewDisplay = {
|
||||
props: ['result'],
|
||||
props: ['result', 'resultLength'],
|
||||
setup(props) {
|
||||
// Format result size for display
|
||||
const formatSize = (length) => {
|
||||
if (!length) return ''
|
||||
if (length >= 1000) {
|
||||
return `${(length / 1000).toFixed(1)}k chars`
|
||||
}
|
||||
return `${length} chars`
|
||||
}
|
||||
|
||||
// Clean quote text - remove leading list numbers to avoid double numbering
|
||||
const cleanQuoteText = (text) => {
|
||||
if (!text) return ''
|
||||
// Remove leading patterns like "1. ", "2. ", "1、", "（1）", "(1)" etc.
|
||||
return text.replace(/^\s*\d+[\.\、\)）]\s*/, '').trim()
|
||||
}
|
||||
|
||||
const activeIndex = ref(0)
|
||||
const expandedAnswers = ref(new Set())
|
||||
// 为每个问题-回答对维护独立的平台选择状态
|
||||
|
|
@ -921,7 +1029,9 @@ const InterviewDisplay = {
|
|||
props.result.totalCount > 0 && h('span', { class: 'stat-item' }, [
|
||||
h('span', { class: 'stat-value' }, props.result.totalCount),
|
||||
h('span', { class: 'stat-label' }, 'Total')
|
||||
])
|
||||
]),
|
||||
props.resultLength && h('span', { class: 'stat-divider' }, '·'),
|
||||
props.resultLength && h('span', { class: 'stat-size' }, formatSize(props.resultLength))
|
||||
])
|
||||
]),
|
||||
props.result.topic && h('div', { class: 'header-topic' }, props.result.topic)
|
||||
|
|
@ -986,19 +1096,21 @@ const InterviewDisplay = {
|
|||
class: ['platform-btn', { active: currentPlatform === 'twitter' }],
|
||||
onClick: (e) => { e.stopPropagation(); setPlatformTab(activeIndex.value, qIdx, 'twitter') }
|
||||
}, [
|
||||
h('svg', { class: 'platform-icon', viewBox: '0 0 24 24', width: 12, height: 12, fill: 'currentColor' }, [
|
||||
h('path', { d: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z' })
|
||||
h('svg', { class: 'platform-icon', viewBox: '0 0 24 24', width: 12, height: 12, fill: 'none', stroke: 'currentColor', 'stroke-width': 2 }, [
|
||||
h('circle', { cx: '12', cy: '12', r: '10' }),
|
||||
h('line', { x1: '2', y1: '12', x2: '22', y2: '12' }),
|
||||
h('path', { d: 'M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z' })
|
||||
]),
|
||||
h('span', {}, 'X')
|
||||
h('span', {}, '世界1')
|
||||
]),
|
||||
h('button', {
|
||||
class: ['platform-btn', { active: currentPlatform === 'reddit' }],
|
||||
onClick: (e) => { e.stopPropagation(); setPlatformTab(activeIndex.value, qIdx, 'reddit') }
|
||||
}, [
|
||||
h('svg', { class: 'platform-icon', viewBox: '0 0 24 24', width: 12, height: 12, fill: 'currentColor' }, [
|
||||
h('path', { d: 'M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z' })
|
||||
h('svg', { class: 'platform-icon', viewBox: '0 0 24 24', width: 12, height: 12, fill: 'none', stroke: 'currentColor', 'stroke-width': 2 }, [
|
||||
h('path', { d: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' })
|
||||
]),
|
||||
h('span', {}, 'Reddit')
|
||||
h('span', {}, '世界2')
|
||||
])
|
||||
])
|
||||
]),
|
||||
|
|
@ -1023,17 +1135,26 @@ const InterviewDisplay = {
|
|||
props.result.interviews[activeIndex.value]?.quotes?.length > 0 && h('div', { class: 'quotes-section' }, [
|
||||
h('div', { class: 'quotes-header' }, 'Key Quotes'),
|
||||
h('div', { class: 'quotes-list' },
|
||||
props.result.interviews[activeIndex.value].quotes.slice(0, 3).map((quote, qi) =>
|
||||
h('blockquote', { key: qi, class: 'quote-item' }, quote.length > 200 ? quote.substring(0, 200) + '...' : quote)
|
||||
)
|
||||
props.result.interviews[activeIndex.value].quotes.slice(0, 3).map((quote, qi) => {
|
||||
const cleanedQuote = cleanQuoteText(quote)
|
||||
const displayQuote = cleanedQuote.length > 200 ? cleanedQuote.substring(0, 200) + '...' : cleanedQuote
|
||||
return h('blockquote', {
|
||||
key: qi,
|
||||
class: 'quote-item',
|
||||
innerHTML: renderMarkdown(displayQuote)
|
||||
})
|
||||
})
|
||||
)
|
||||
])
|
||||
]),
|
||||
|
||||
|
||||
// Summary Section (Collapsible)
|
||||
props.result.summary && h('div', { class: 'summary-section' }, [
|
||||
h('div', { class: 'summary-header' }, 'Interview Summary'),
|
||||
h('div', { class: 'summary-content' }, props.result.summary.length > 500 ? props.result.summary.substring(0, 500) + '...' : props.result.summary)
|
||||
h('div', {
|
||||
class: 'summary-content',
|
||||
innerHTML: renderMarkdown(props.result.summary.length > 500 ? props.result.summary.substring(0, 500) + '...' : props.result.summary)
|
||||
})
|
||||
])
|
||||
])
|
||||
}
|
||||
|
|
@ -2253,11 +2374,24 @@ watch(() => props.reportId, (newId) => {
|
|||
}
|
||||
|
||||
.timeline-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #F3F4F6;
|
||||
}
|
||||
|
||||
.elapsed-placeholder {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.elapsed-badge {
|
||||
font-size: 11px;
|
||||
color: #6B7280;
|
||||
|
|
@ -2381,12 +2515,83 @@ watch(() => props.reportId, (newId) => {
|
|||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Tool Colors - Purple (Deep Insight) */
|
||||
.tool-badge.tool-purple {
|
||||
background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
|
||||
border-color: #C4B5FD;
|
||||
color: #6D28D9;
|
||||
}
|
||||
.tool-badge.tool-purple .tool-icon {
|
||||
stroke: #7C3AED;
|
||||
}
|
||||
|
||||
/* Tool Colors - Blue (Panorama Search) */
|
||||
.tool-badge.tool-blue {
|
||||
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
|
||||
border-color: #93C5FD;
|
||||
color: #1D4ED8;
|
||||
}
|
||||
.tool-badge.tool-blue .tool-icon {
|
||||
stroke: #2563EB;
|
||||
}
|
||||
|
||||
/* Tool Colors - Green (Agent Interview) */
|
||||
.tool-badge.tool-green {
|
||||
background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
|
||||
border-color: #86EFAC;
|
||||
color: #15803D;
|
||||
}
|
||||
.tool-badge.tool-green .tool-icon {
|
||||
stroke: #16A34A;
|
||||
}
|
||||
|
||||
/* Tool Colors - Orange (Quick Search) */
|
||||
.tool-badge.tool-orange {
|
||||
background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
|
||||
border-color: #FDBA74;
|
||||
color: #C2410C;
|
||||
}
|
||||
.tool-badge.tool-orange .tool-icon {
|
||||
stroke: #EA580C;
|
||||
}
|
||||
|
||||
/* Tool Colors - Cyan (Graph Stats) */
|
||||
.tool-badge.tool-cyan {
|
||||
background: linear-gradient(135deg, #ECFEFF 0%, #CFFAFE 100%);
|
||||
border-color: #67E8F9;
|
||||
color: #0E7490;
|
||||
}
|
||||
.tool-badge.tool-cyan .tool-icon {
|
||||
stroke: #0891B2;
|
||||
}
|
||||
|
||||
/* Tool Colors - Pink (Entity Query) */
|
||||
.tool-badge.tool-pink {
|
||||
background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
|
||||
border-color: #F9A8D4;
|
||||
color: #BE185D;
|
||||
}
|
||||
.tool-badge.tool-pink .tool-icon {
|
||||
stroke: #DB2777;
|
||||
}
|
||||
|
||||
/* Tool Colors - Gray (Default) */
|
||||
.tool-badge.tool-gray {
|
||||
background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
|
||||
border-color: #D1D5DB;
|
||||
color: #374151;
|
||||
}
|
||||
.tool-badge.tool-gray .tool-icon {
|
||||
stroke: #6B7280;
|
||||
}
|
||||
|
||||
.tool-params {
|
||||
margin-top: 10px;
|
||||
background: transparent;
|
||||
|
|
@ -2409,19 +2614,24 @@ watch(() => props.reportId, (newId) => {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.expand-toggle {
|
||||
margin-top: 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--wf-active-text);
|
||||
/* Unified Action Buttons */
|
||||
.action-btn {
|
||||
background: #F3F4F6;
|
||||
border: 1px solid #E5E7EB;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #6B7280;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.expand-toggle:hover {
|
||||
text-decoration: underline;
|
||||
.action-btn:hover {
|
||||
background: #E5E7EB;
|
||||
color: #374151;
|
||||
border-color: #D1D5DB;
|
||||
}
|
||||
|
||||
/* Result Wrapper */
|
||||
|
|
@ -2480,23 +2690,7 @@ watch(() => props.reportId, (newId) => {
|
|||
color: #6B7280;
|
||||
}
|
||||
|
||||
.toggle-raw {
|
||||
margin-top: 10px;
|
||||
background: rgba(255,255,255,0.7);
|
||||
border: none;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #6B7280;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toggle-raw:hover {
|
||||
background: rgba(255,255,255,0.9);
|
||||
color: #374151;
|
||||
}
|
||||
/* Legacy toggle-raw removed - using unified .action-btn */
|
||||
|
||||
/* LLM Response */
|
||||
.llm-meta {
|
||||
|
|
@ -2886,6 +3080,12 @@ watch(() => props.reportId, (newId) => {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
:deep(.interview-display .stat-size) {
|
||||
font-size: 11px;
|
||||
color: #9CA3AF;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
:deep(.interview-display .header-topic) {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
|
|
@ -2893,66 +3093,85 @@ watch(() => props.reportId, (newId) => {
|
|||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Agent Tabs - Minimal pills */
|
||||
/* Agent Tabs - Card Style */
|
||||
:deep(.interview-display .agent-tabs) {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 0 0 12px 0;
|
||||
padding: 0 0 14px 0;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #F3F4F6;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #E5E7EB transparent;
|
||||
}
|
||||
|
||||
:deep(.interview-display .agent-tabs::-webkit-scrollbar) {
|
||||
height: 2px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
:deep(.interview-display .agent-tabs::-webkit-scrollbar-track) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:deep(.interview-display .agent-tabs::-webkit-scrollbar-thumb) {
|
||||
background: #E5E7EB;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:deep(.interview-display .agent-tabs::-webkit-scrollbar-thumb:hover) {
|
||||
background: #D1D5DB;
|
||||
}
|
||||
|
||||
:deep(.interview-display .agent-tab) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
padding: 6px 12px;
|
||||
background: #F9FAFB;
|
||||
border: 1px solid #E5E7EB;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #9CA3AF;
|
||||
color: #6B7280;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.interview-display .agent-tab:hover) {
|
||||
color: #6B7280;
|
||||
background: #F3F4F6;
|
||||
border-color: #D1D5DB;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
:deep(.interview-display .agent-tab.active) {
|
||||
background: transparent;
|
||||
border-color: #4F46E5;
|
||||
color: #111827;
|
||||
background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
|
||||
border-color: #A5B4FC;
|
||||
color: #4338CA;
|
||||
box-shadow: 0 1px 2px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
:deep(.interview-display .tab-avatar) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F3F4F6;
|
||||
background: #E5E7EB;
|
||||
color: #6B7280;
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.interview-display .agent-tab:hover .tab-avatar) {
|
||||
background: #D1D5DB;
|
||||
}
|
||||
|
||||
:deep(.interview-display .agent-tab.active .tab-avatar) {
|
||||
background: #4F46E5;
|
||||
background: #6366F1;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
|
@ -3235,6 +3454,70 @@ watch(() => props.reportId, (newId) => {
|
|||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Markdown styles in summary */
|
||||
:deep(.interview-display .summary-content h2),
|
||||
:deep(.interview-display .summary-content h3),
|
||||
:deep(.interview-display .summary-content h4),
|
||||
:deep(.interview-display .summary-content h5) {
|
||||
margin: 12px 0 8px 0;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
:deep(.interview-display .summary-content h2) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
:deep(.interview-display .summary-content h3) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.interview-display .summary-content h4),
|
||||
:deep(.interview-display .summary-content h5) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
:deep(.interview-display .summary-content p) {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
:deep(.interview-display .summary-content strong) {
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
:deep(.interview-display .summary-content em) {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
:deep(.interview-display .summary-content ul),
|
||||
:deep(.interview-display .summary-content ol) {
|
||||
margin: 8px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
:deep(.interview-display .summary-content li) {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
:deep(.interview-display .summary-content blockquote) {
|
||||
margin: 8px 0;
|
||||
padding-left: 12px;
|
||||
border-left: 3px solid #E5E7EB;
|
||||
color: #6B7280;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Markdown styles in quotes */
|
||||
:deep(.interview-display .quote-item strong) {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
:deep(.interview-display .quote-item em) {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Quick Search Display */
|
||||
:deep(.quick-search-display) {
|
||||
padding: 4px 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue