Semantic search UI (#75)

.eslintrc.js

@@ -14,7 +14,10 @@ module.exports = {
 	overrides: [
 		{
 			files: "web/**/*.+(ts|tsx)",
-			extends: ["plugin:@next/next/recommended"],
+			extends: [
+				"plugin:@next/next/recommended",
+				"plugin:@tanstack/eslint-plugin-query/recommended",
+			],
 			plugins: ["react"],
 			settings: {
 				next: {

README.md

@@ -42,25 +42,30 @@ C4Context
   Person(me, "Me")
 
   Boundary(aws, "AWS") {
+    System(ai, "Search & Summarization", "S3, Lambda")
     System(email, "Email importer", "SES, S3, Lambda")
   }
 
+  Boundary(vercel, "Vercel") {
+    System(web, "Web app", "Next.js")
+  }
+
   Boundary(google, "Firebase") {
     SystemDb(db, "Database", "Firestore")
     System(functions, "Data enricher", "Cloud Functions")
     System(api, "API", "Cloud Functions")
   }
 
-  Boundary(vercel, "Vercel") {
-    System(web, "Web app", "Next.js")
-  }
+  System(ga, "Google Analytics")
 
   Rel(me, email, "Emails export")
   Rel(email, db, "Creates records")
   Rel(api, db, "Reads")
   Rel(web, api, "Get volumes and highlights")
+  Rel(web, ai, "Search")
+  Rel(web, ga, "Track")
   BiRel(db, functions, "Triggers updates")
   UpdateRelStyle(db, functions, $offsetX="-45", $offsetY="-20")
 
-  UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
+  UpdateLayoutConfig($c4ShapeInRow="4", $c4BoundaryInRow="4")
 ```

aws/ai/README.md

@@ -1,3 +1,7 @@
+# Serverless AI
+
+This directory contains the code supporting features like Semantic Search and Summarization.
+
 ## How it works
 
 ### Search
@@ -38,10 +42,6 @@ sequenceDiagram
    Lambda ->> Consumer: Completion as JSON response
 ```
 
-# Serverless AI
-
-This directory contains the code supporting features like Semantic Search and Summarization.
-
 ## Initial environment setup
 
 1. Add a **plaintext** secret to AWS Secrets Manager with the name `Highlights/OpenAI-API-Key`. Set the OpenAI API key as the plaintext value.

package.json

@@ -10,6 +10,7 @@
 	"devDependencies": {
 		"@ianvs/prettier-plugin-sort-imports": "^4.0.2",
 		"@next/eslint-plugin-next": "^13.1.1",
+		"@tanstack/eslint-plugin-query": "^4.29.25",
 		"@typescript-eslint/eslint-plugin": "^5.46.1",
 		"@typescript-eslint/parser": "^5.46.1",
 		"eslint": "^8.30.0",

types/index.d.ts

@@ -20,6 +20,15 @@ interface IndustryIdentifier {
 	identifier: string;
 }
 
+interface SearchResult {
+	body: string;
+	highlight_key: string;
+	similarity: number; // float
+	volume_key: string;
+	volume_title: string;
+	volume_subtitle?: string;
+}
+
 interface Volume {
 	authors?: string[];
 	categories?: string[];

web/.env.development

@@ -1 +1,2 @@
-API_URL=http://127.0.0.1:5001/sawyer-highlights/us-central1/api
+# Don't put secrets in this file. Use .env.local instead.
+FIREBASE_API_URL=http://127.0.0.1:5001/sawyer-highlights/us-central1/api

web/.gitignore

@@ -1 +1,3 @@
 .vercel
+.env.local
+.env.production

web/README.md

@@ -1,18 +1,27 @@
-# Web
+# [highlights.sawyerh.com](https://highlights.sawyerh.com)
 
-- Next.js, Tailwind, TypeScript
-- API: Firebase Functions
+This is the public website for my reading highlights.
+
+- Frameworks: Next.js, Tailwind
+- API: Mix of Firebase and AWS Lambda Function URLs
 - Hosting: Vercel
+- Analytics: Google Analytics
 
 ## 📦 Getting started
 
 ```
 npm install
 ```
 
+### Environment variables
+
+In `.env.local`, set the following environment secrets:
+
+- `AI_URL`: URL of the AI API
+
 ### Local development
 
-Local development runs against a local API endpoint by default. To disable the emulator integration when running locally, change the `API_URL` environment variable in `.env.development`.
+Local development runs against a local API endpoint by default. To disable the emulator integration when running locally, change the `FIREBASE_API_URL` environment variable in `.env.development`.
 
 1. In the `firebase/functions` directory, start the local API and seed the DB:
    ```
@@ -31,4 +40,5 @@ Auto-deploys on commits to `main` via a Vercel GitHub integration
 
 ### Requirements
 
-- `API_URL` environment variable must be set in the Vercel console
+- `AI_URL` environment variable must be set in the Vercel console
+- `FIREBASE_API_URL` environment variable must be set in the Vercel console