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