feat(frontend): Phase 1.1 project scaffold with Vite, Tailwind, and API client
Set up Vite + React 18 + TypeScript project with Tailwind CSS, Axios API client matching backend Pydantic schemas (QueryRequest, QueryResponse, IngestResponse, SourceMetadata), and TanStack Query mutation hooks for /query and /ingest endpoints. Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Woody
parent
02e401740a
commit
d3bf13142b
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>LegCo Reranker - Frontend</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"test": "vitest run",
|
||||
"preview": "vite preview --port 5173"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.0.0",
|
||||
"autoprefixer": "^10.5.0",
|
||||
"axios": "^1.6.0",
|
||||
"lucide-react": "^0.190.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tailwindcss": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/react": "^18.2.14",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"jsdom": "^20.0.3",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.1.6",
|
||||
"vitest": "^0.34.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import axios from 'axios'
|
||||
import type { QueryRequest, QueryResponse, IngestResponse } from '../types'
|
||||
|
||||
const BASE_URL: string = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8000/api/v1'
|
||||
|
||||
export const apiClient = axios.create({ baseURL: BASE_URL })
|
||||
|
||||
export const queryDocument = async (request: QueryRequest): Promise<QueryResponse> => {
|
||||
const resp = await apiClient.post<QueryResponse>('/query', request)
|
||||
return resp.data
|
||||
}
|
||||
|
||||
export const ingestDocument = async (file: File): Promise<IngestResponse> => {
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
const resp = await apiClient.post<IngestResponse>('/ingest', form, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
return resp.data
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react'
|
||||
import { QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query'
|
||||
import { queryDocument, ingestDocument } from './api'
|
||||
import type { QueryRequest, QueryResponse, IngestResponse } from '../types'
|
||||
|
||||
export const queryClient = new QueryClient()
|
||||
|
||||
export const useQueryDocument = () => {
|
||||
return useMutation<QueryResponse, Error, QueryRequest>({
|
||||
mutationFn: queryDocument,
|
||||
})
|
||||
}
|
||||
|
||||
export const useIngestDocument = () => {
|
||||
return useMutation<IngestResponse, Error, File>({
|
||||
mutationFn: ingestDocument,
|
||||
})
|
||||
}
|
||||
|
||||
export const AppQueryProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
export interface SourceMetadata {
|
||||
filename: string
|
||||
upload_date: string
|
||||
content_summary: string
|
||||
chunk_index: number
|
||||
}
|
||||
|
||||
export interface QueryRequest {
|
||||
question: string
|
||||
}
|
||||
|
||||
export interface QueryResponse {
|
||||
keywords: string[]
|
||||
answer: string
|
||||
sources: SourceMetadata[]
|
||||
}
|
||||
|
||||
export interface IngestResponse {
|
||||
document_id: string
|
||||
chunk_count: number
|
||||
filename: string
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"types": ["vite/client", "vitest/globals"]
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
setupFiles: './src/test/setup.ts',
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue