feat(V2-1a): Monorepo 구조 전환 — apps/desktop으로 V1 이동
- npm workspaces 루트 (apps/*, packages/*) 세팅 - V1 전체를 apps/desktop/으로 git mv (src, resources, tests, sidecar, scripts, electron.vite.config.ts, electron-builder.yml, vitest.config.ts, tsconfig.node.json, tsconfig.web.json) - apps/desktop/package.json 신규 (name=@d3ro/desktop) - productName: 'd3ro-voice' 명시 — app.getName()을 고정하여 userData 경로 %APPDATA%\d3ro-voice\ 그대로 유지 (기존 DB/설정 연속성 보장) - 루트 package.json을 workspace 루트로 재구성, 공통 devDep만 유지 (typescript, eslint, prettier) - turbo.json, tsconfig.base.json 추가 (Turborepo 자체 설치는 별도 sub-phase) - memory/project_status.md 생성 (규칙 13) 검증: - npm run typecheck 통과 - npm run build 통과 (electron-vite main+preload+renderer) - npm run dev 실제 실행 → DB/핫키/Ollama 자동 실행 모두 정상
This commit is contained in:
yunchan8804
parent
3a160b9032
commit
45a580878a
178 changed files with 214 additions and 0 deletions
|
|
@ -1,262 +0,0 @@
|
|||
// src/renderer/pages/KnowledgeBasePage.tsx
|
||||
// Phase 13.2: 로컬 RAG Knowledge Base UI
|
||||
// 문서 관리 + 질문 입력 + 답변 표시
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Box, TextField, IconButton, Tooltip, LinearProgress } from '@mui/material'
|
||||
import AddIcon from '@mui/icons-material/Add'
|
||||
import DeleteIcon from '@mui/icons-material/Delete'
|
||||
import RefreshIcon from '@mui/icons-material/Refresh'
|
||||
import SearchIcon from '@mui/icons-material/Search'
|
||||
import SendIcon from '@mui/icons-material/Send'
|
||||
import DescriptionIcon from '@mui/icons-material/Description'
|
||||
import { MetalCard, PhosphorText, Led, PhysicalButton, ScreenPanel } from '../components/ds'
|
||||
import { PageHeader, EmptyStateCard } from '../components/shared'
|
||||
import { d3roPalette, d3roFontMono, d3roTypo } from '../theme'
|
||||
import { useI18n } from '../i18n'
|
||||
import type { RAGDocument, RAGQueryResult, RAGIndexProgress } from '@shared/types'
|
||||
|
||||
export function KnowledgeBasePage(): React.ReactElement {
|
||||
const { t } = useI18n()
|
||||
const [documents, setDocuments] = useState<RAGDocument[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [query, setQuery] = useState('')
|
||||
const [querying, setQuerying] = useState(false)
|
||||
const [result, setResult] = useState<RAGQueryResult | null>(null)
|
||||
const [indexProgress, setIndexProgress] = useState<RAGIndexProgress | null>(null)
|
||||
const [adding, setAdding] = useState(false)
|
||||
const [addError, setAddError] = useState<string | null>(null)
|
||||
|
||||
const loadDocuments = useCallback(async () => {
|
||||
setLoading(true)
|
||||
const resp = await window.electronAPI.rag.getDocuments()
|
||||
if (resp.success) setDocuments(resp.data)
|
||||
setLoading(false)
|
||||
}, [])
|
||||
|
||||
useEffect(() => { loadDocuments() }, [loadDocuments])
|
||||
|
||||
useEffect(() => {
|
||||
const unsubProgress = window.electronAPI.rag.onIndexProgress((data) => {
|
||||
setIndexProgress(data)
|
||||
})
|
||||
const unsubComplete = window.electronAPI.rag.onIndexComplete(() => {
|
||||
setIndexProgress(null)
|
||||
loadDocuments()
|
||||
})
|
||||
return () => { unsubProgress(); unsubComplete() }
|
||||
}, [loadDocuments])
|
||||
|
||||
const handleAddDocument = useCallback(async () => {
|
||||
setAdding(true)
|
||||
setAddError(null)
|
||||
const resp = await window.electronAPI.rag.addDocument()
|
||||
setAdding(false)
|
||||
if (resp.success) {
|
||||
loadDocuments()
|
||||
} else {
|
||||
if (!resp.error.message.includes('cancelled')) {
|
||||
setAddError(resp.error.message)
|
||||
}
|
||||
}
|
||||
}, [loadDocuments])
|
||||
|
||||
const handleRemoveDocument = useCallback(async (docId: string) => {
|
||||
await window.electronAPI.rag.removeDocument({ documentId: docId })
|
||||
loadDocuments()
|
||||
}, [loadDocuments])
|
||||
|
||||
const handleReindex = useCallback(async (docId: string) => {
|
||||
await window.electronAPI.rag.reindex(docId)
|
||||
}, [])
|
||||
|
||||
const handleQuery = useCallback(async () => {
|
||||
if (!query.trim()) return
|
||||
setQuerying(true)
|
||||
setResult(null)
|
||||
const resp = await window.electronAPI.rag.query({ query: query.trim() })
|
||||
if (resp.success) {
|
||||
setResult(resp.data)
|
||||
}
|
||||
setQuerying(false)
|
||||
}, [query])
|
||||
|
||||
const handleQueryKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleQuery()
|
||||
}
|
||||
}, [handleQuery])
|
||||
|
||||
return (
|
||||
<Box sx={{ maxWidth: 900, mx: 'auto', p: 4, pb: 8 }}>
|
||||
<PageHeader
|
||||
title={t('rag.title').toUpperCase()}
|
||||
action={
|
||||
<PhysicalButton size="small" onClick={handleAddDocument} disabled={adding}>
|
||||
<AddIcon sx={{ fontSize: 14, mr: 0.5 }} /> {adding ? t('rag.adding') : t('rag.addDocument')}
|
||||
</PhysicalButton>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 인덱싱 진행률 */}
|
||||
{indexProgress && (
|
||||
<MetalCard sx={{ mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
|
||||
<Led color="amber" pulse />
|
||||
<PhosphorText variant="body">
|
||||
{t('rag.indexing')}: {indexProgress.fileName}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={indexProgress.percent}
|
||||
sx={{
|
||||
height: 4,
|
||||
borderRadius: 2,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
|
||||
}}
|
||||
/>
|
||||
<PhosphorText variant="dim" sx={{ mt: 0.5 }}>
|
||||
{indexProgress.currentChunk}/{indexProgress.totalChunks}
|
||||
</PhosphorText>
|
||||
</MetalCard>
|
||||
)}
|
||||
|
||||
{/* 에러 표시 */}
|
||||
{addError && (
|
||||
<MetalCard sx={{ mb: 2, border: `1px solid ${d3roPalette.tag.red}` }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Led color="red" />
|
||||
<PhosphorText variant="body" sx={{ color: d3roPalette.tag.red }}>
|
||||
{addError}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)}
|
||||
|
||||
{/* 추가 중 인디케이터 */}
|
||||
{adding && !indexProgress && (
|
||||
<MetalCard sx={{ mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Led color="amber" pulse />
|
||||
<PhosphorText variant="body">{t('rag.parsing')}</PhosphorText>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
)}
|
||||
|
||||
{/* 문서 목록 */}
|
||||
<PhosphorText variant="label" sx={{ mb: 1.5, display: 'block', color: d3roPalette.text.inactive }}>
|
||||
{t('rag.documents').toUpperCase()} ({documents.length})
|
||||
</PhosphorText>
|
||||
|
||||
{documents.length === 0 && !loading ? (
|
||||
<EmptyStateCard message={t('rag.noDocuments')} />
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 3 }}>
|
||||
{documents.map((doc) => (
|
||||
<MetalCard key={doc.id}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<DescriptionIcon sx={{ fontSize: 20, color: d3roPalette.text.inactive }} />
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<PhosphorText variant="body">{doc.fileName}</PhosphorText>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.25 }}>
|
||||
<PhosphorText variant="dim">
|
||||
{doc.fileType.toUpperCase()} · {doc.chunkCount} {t('rag.chunks')} ·
|
||||
</PhosphorText>
|
||||
<Led color={doc.indexed ? 'green' : 'amber'} size={6} />
|
||||
<PhosphorText variant="dim">
|
||||
{doc.indexed ? t('rag.indexed') : t('rag.pending')}
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
</Box>
|
||||
<Tooltip title={t('rag.reindex')}>
|
||||
<IconButton size="small" onClick={() => handleReindex(doc.id)}
|
||||
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
|
||||
<RefreshIcon sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('common.delete')}>
|
||||
<IconButton size="small" onClick={() => handleRemoveDocument(doc.id)}
|
||||
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.tag.red } }}>
|
||||
<DeleteIcon sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* 질문 입력 */}
|
||||
<PhosphorText variant="label" sx={{ mb: 1.5, display: 'block', color: d3roPalette.text.inactive }}>
|
||||
{t('rag.askQuestion').toUpperCase()}
|
||||
</PhosphorText>
|
||||
|
||||
<MetalCard>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<SearchIcon sx={{ fontSize: 20, color: d3roPalette.text.inactive }} />
|
||||
<TextField
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyDown={handleQueryKeyDown}
|
||||
placeholder={t('rag.queryPlaceholder')}
|
||||
size="small"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-root': {
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: d3roTypo.compact.size,
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
'& fieldset': { borderColor: d3roPalette.border.subtle },
|
||||
'&:hover fieldset': { borderColor: d3roPalette.accent.amber },
|
||||
},
|
||||
'& .MuiOutlinedInput-input': { color: d3roPalette.text.primary },
|
||||
}}
|
||||
/>
|
||||
<IconButton onClick={handleQuery} disabled={!query.trim() || querying}
|
||||
sx={{ color: query.trim() ? d3roPalette.accent.amber : d3roPalette.text.inactive }}>
|
||||
<SendIcon sx={{ fontSize: 20 }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
|
||||
{/* 답변 */}
|
||||
{querying && (
|
||||
<Box sx={{ mt: 2, textAlign: 'center' }}>
|
||||
<Led color="amber" pulse />
|
||||
<PhosphorText variant="dim" sx={{ ml: 1 }}>{t('rag.searching')}</PhosphorText>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<ScreenPanel sx={{ p: 3 }}>
|
||||
<PhosphorText variant="body" sx={{ whiteSpace: 'pre-wrap', lineHeight: 1.8 }}>
|
||||
{result.answer}
|
||||
</PhosphorText>
|
||||
</ScreenPanel>
|
||||
|
||||
{result.results.length > 0 && (
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<PhosphorText variant="label" sx={{ color: d3roPalette.text.dimLabel, mb: 1, display: 'block' }}>
|
||||
{t('rag.sources').toUpperCase()}
|
||||
</PhosphorText>
|
||||
{result.results.slice(0, 3).map((r, i) => (
|
||||
<MetalCard key={i} sx={{ mb: 1 }}>
|
||||
<PhosphorText variant="dim">
|
||||
[{i + 1}] {r.fileName} ({Math.round(r.similarity * 100)}%)
|
||||
</PhosphorText>
|
||||
<PhosphorText variant="compact" sx={{ mt: 0.5, opacity: 0.7 }}>
|
||||
{r.content.slice(0, 150)}...
|
||||
</PhosphorText>
|
||||
</MetalCard>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue