|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Knowledge Base Browser</title> |
|
|
<style> |
|
|
.kb-browser { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; |
|
|
max-width: 100%; |
|
|
background: #ffffff; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.search-interface { |
|
|
padding: 20px; |
|
|
border-bottom: 1px solid #e2e8f0; |
|
|
background: #f8fafc; |
|
|
} |
|
|
|
|
|
.search-input-container { |
|
|
display: flex; |
|
|
gap: 12px; |
|
|
align-items: flex-end; |
|
|
margin-bottom: 16px; |
|
|
} |
|
|
|
|
|
.search-input { |
|
|
flex: 1; |
|
|
padding: 12px 16px; |
|
|
border: 1px solid #d1d5db; |
|
|
border-radius: 8px; |
|
|
font-size: 14px; |
|
|
outline: none; |
|
|
transition: border-color 0.2s; |
|
|
} |
|
|
|
|
|
.search-input:focus { |
|
|
border-color: #3b82f6; |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
|
|
} |
|
|
|
|
|
.search-button { |
|
|
padding: 12px 24px; |
|
|
background: #3b82f6; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
font-size: 14px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.search-button:hover { |
|
|
background: #2563eb; |
|
|
} |
|
|
|
|
|
.search-button:disabled { |
|
|
background: #9ca3af; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.search-options { |
|
|
display: flex; |
|
|
gap: 16px; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.search-type-select { |
|
|
padding: 8px 12px; |
|
|
border: 1px solid #d1d5db; |
|
|
border-radius: 6px; |
|
|
font-size: 13px; |
|
|
background: white; |
|
|
} |
|
|
|
|
|
.results-container { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.results-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 16px; |
|
|
padding-bottom: 12px; |
|
|
border-bottom: 1px solid #e2e8f0; |
|
|
} |
|
|
|
|
|
.results-info { |
|
|
font-size: 14px; |
|
|
color: #64748b; |
|
|
} |
|
|
|
|
|
.result-card { |
|
|
border: 1px solid #e2e8f0; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 16px; |
|
|
overflow: hidden; |
|
|
transition: box-shadow 0.2s; |
|
|
} |
|
|
|
|
|
.result-card:hover { |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.result-header { |
|
|
padding: 16px; |
|
|
background: white; |
|
|
} |
|
|
|
|
|
.result-title { |
|
|
font-size: 16px; |
|
|
font-weight: 600; |
|
|
color: #1e293b; |
|
|
margin: 0 0 8px 0; |
|
|
line-height: 1.4; |
|
|
} |
|
|
|
|
|
.result-source { |
|
|
font-size: 13px; |
|
|
color: #64748b; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.result-meta { |
|
|
display: flex; |
|
|
gap: 12px; |
|
|
align-items: center; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.source-type-badge { |
|
|
padding: 4px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 11px; |
|
|
font-weight: 500; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.source-type-academic { |
|
|
background: #ede9fe; |
|
|
color: #7c3aed; |
|
|
} |
|
|
|
|
|
.source-type-web { |
|
|
background: #dbeafe; |
|
|
color: #2563eb; |
|
|
} |
|
|
|
|
|
.source-type-pdf { |
|
|
background: #fef2f2; |
|
|
color: #dc2626; |
|
|
} |
|
|
|
|
|
.source-type-code { |
|
|
background: #f3f4f6; |
|
|
color: #374151; |
|
|
} |
|
|
|
|
|
.relevance-score { |
|
|
padding: 4px 8px; |
|
|
background: #10b981; |
|
|
color: white; |
|
|
border-radius: 12px; |
|
|
font-size: 11px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.result-snippet { |
|
|
background: #f8fafc; |
|
|
padding: 12px; |
|
|
border-radius: 6px; |
|
|
font-size: 14px; |
|
|
line-height: 1.5; |
|
|
color: #475569; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.result-actions { |
|
|
display: flex; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.action-button { |
|
|
padding: 8px 12px; |
|
|
border: 1px solid #d1d5db; |
|
|
background: white; |
|
|
border-radius: 6px; |
|
|
font-size: 13px; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.action-button:hover { |
|
|
background: #f3f4f6; |
|
|
} |
|
|
|
|
|
.action-button.primary { |
|
|
background: #3b82f6; |
|
|
color: white; |
|
|
border-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.action-button.primary:hover { |
|
|
background: #2563eb; |
|
|
} |
|
|
|
|
|
.empty-state { |
|
|
text-align: center; |
|
|
padding: 48px 20px; |
|
|
color: #64748b; |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
display: inline-block; |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border: 2px solid #e2e8f0; |
|
|
border-radius: 50%; |
|
|
border-top-color: #3b82f6; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.expanded-content { |
|
|
border-top: 1px solid #e2e8f0; |
|
|
padding: 16px; |
|
|
background: #fafbfc; |
|
|
} |
|
|
|
|
|
.metadata-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 12px; |
|
|
margin-top: 12px; |
|
|
} |
|
|
|
|
|
.metadata-item { |
|
|
font-size: 13px; |
|
|
} |
|
|
|
|
|
.metadata-label { |
|
|
color: #64748b; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.metadata-value { |
|
|
color: #1e293b; |
|
|
margin-left: 8px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="kb-browser-root"></div> |
|
|
<script type="module" src="./script.tsx"></script> |
|
|
</body> |
|
|
</html> |
