Skip to content

C
canifa_note_extension
Commit 1732c42d authored by Hoanganhvu123's avatar Hoanganhvu123
Browse files
Options

feat: Add OpenAI API key management, Docker setup, and complete documentation

parent af456699
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 6959 additions and 819 deletions
.cursor/ralph-scripts/ralph-common.sh
View file @ 1732c42d
......@@ -795,7 +795,7 @@ check_prerequisites() {
if [[ "$OSTYPE" == "msys" || "$OSTYPE" == "win32" || -n "$WINDIR" ]]; then
echo " PowerShell: irm 'https://cursor.com/install?win32=true' | iex"
else
echo " curl https://cursor.com/install -fsS | bash"
echo " curl https://cursor.com/install -fsS | bash"
fi
return 1
fi
......
.dockerignore 0 → 100644
View file @ 1732c42d
# Git
.git
.gitignore
.gitattributes
# Python
__pycache__
*.py[cod]
*$py.class
*.so
.Python
venv/
env/
ENV/
.venv
# Node
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
.pnpm-store/
# IDE
.vscode/
.idea/
*.swp
*.swo
*~
# Environment
.env
.env.local
.env.*.local
# Build
dist/
build/
*.egg-info/
# Logs
*.log
logs/
# OS
.DS_Store
Thumbs.db
# Testing
.pytest_cache/
.coverage
htmlcov/
# Documentation
*.md
!README.md
# Docker
docker-compose*.yml
Dockerfile*
.gitignore
View file @ 1732c42d
......@@ -37,6 +37,13 @@ backend/__pycache__/
backend/*.pyc
backend/.pyscn/
# Frontend specifically
frontend/.env
frontend/.env.local
frontend/node_modules/
frontend/dist/
frontend/.vite/
# Preference folder (development/temporary)
preference/
......
DEPLOYMENT.md 0 → 100644
View file @ 1732c42d
# Deployment Guide
Hướng dẫn deploy CuCu Note lên server production.
## 🚀 Quick Deploy với Docker Compose
### 1. Chuẩn bị Server
```bash
# Cài đặt Docker và Docker Compose
curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
# Hoặc trên Ubuntu/Debian
sudo apt-get update
sudo apt-get install docker.io docker-compose-plugin
```
### 2. Clone Repository
```bash
git clone https://github.com/Hoanganhvu123/cuccu_note.git
cd cuccu_note
```
### 3. Cấu hình Environment Variables
**Backend `.env`** (`backend/.env`):
```bash
# MongoDB
MONGODB_URI=mongodb://mongodb:27017
MONGODB_DB_NAME=cucu_note
# Authentication
CLERK_SECRET_KEY=sk_live_your_production_key
CLERK_JWKS_URL=https://your-clerk-instance.clerk.accounts.dev/.well-known/jwks.json
CLERK_ISSUER=https://your-clerk-instance.clerk.accounts.dev
# OpenAI
OPENAI_API_KEY=sk-your-openai-key
# Encryption (QUAN TRỌNG!)
# Generate: python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
ENCRYPTION_KEY=your-generated-32-byte-base64-key
# Server
PORT=5000
# Redis
REDIS_HOST=redis
REDIS_PORT=6379
REDIS_CACHE_URL=redis
RATE_STORAGE_URI=redis://redis:6379/0
# CORS (QUAN TRỌNG: Không dùng * trong production!)
CORS_ORIGINS=https://yourdomain.com,https://www.yourdomain.com
# Production settings
DISABLE_AUTH=false
```
**Frontend `.env`** (`frontend/.env`):
```bash
VITE_API_BASE_URL=https://api.yourdomain.com
```
### 4. Deploy
```bash
# Build và start tất cả services
docker-compose up -d
# Xem logs
docker-compose logs -f
# Kiểm tra status
docker-compose ps
```
### 5. Cấu hình Nginx Reverse Proxy (Optional)
Tạo file `/etc/nginx/sites-available/cuccu-note`:
```nginx
# Backend API
server {
listen 80;
server_name api.yourdomain.com;
location / {
proxy_pass http://localhost:5000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
# Frontend
server {
listen 80;
server_name yourdomain.com www.yourdomain.com;
location / {
proxy_pass http://localhost:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
```
Enable site:
```bash
sudo ln -s /etc/nginx/sites-available/cuccu-note /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
```
### 6. SSL với Let's Encrypt
```bash
sudo apt-get install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com -d api.yourdomain.com
```
## 🔧 Maintenance Commands
```bash
# Restart services
docker-compose restart
# Stop services
docker-compose stop
# Start services
docker-compose start
# Rebuild after code changes
docker-compose up -d --build
# View logs
docker-compose logs -f backend
docker-compose logs -f frontend
# Backup MongoDB
docker exec cuccu_mongodb mongodump --out /data/backup
# Restore MongoDB
docker exec -i cuccu_mongodb mongorestore /data/backup
```
## 📊 Monitoring
### Health Checks
- Backend: `http://localhost:5000/docs`
- Frontend: `http://localhost:3001`
- MongoDB: `docker exec cuccu_mongodb mongosh --eval "db.adminCommand('ping')"`
- Redis: `docker exec cuccu_redis redis-cli ping`
### Logs
```bash
# All logs
docker-compose logs
# Specific service
docker-compose logs backend
docker-compose logs frontend
# Follow logs
docker-compose logs -f
```
## 🔒 Security Checklist
- [ ] `ENCRYPTION_KEY` được set và không commit vào git
- [ ] `CORS_ORIGINS` chỉ cho phép domain của bạn (không dùng `*`)
- [ ] `DISABLE_AUTH=false` trong production
- [ ] `CLERK_SECRET_KEY` là production key (không phải test key)
- [ ] MongoDB có authentication enabled
- [ ] Redis có password (nếu cần)
- [ ] SSL/HTTPS được cấu hình
- [ ] Firewall chỉ mở ports cần thiết
- [ ] Regular backups được setup
- [ ] Monitoring và alerting được cấu hình
## 🚨 Troubleshooting
### Backend không start
```bash
# Check logs
docker-compose logs backend
# Check MongoDB connection
docker exec cuccu_backend python -c "from common.mongo_client import mongodb_client; import asyncio; asyncio.run(mongodb_client.connect())"
```
### Frontend không build
```bash
# Check Node version
docker exec cuccu_frontend node --version
# Rebuild
docker-compose build --no-cache frontend
```
### MongoDB connection issues
```bash
# Check MongoDB status
docker exec cuccu_mongodb mongosh --eval "db.adminCommand('ping')"
# Check network
docker network inspect cuccu_network
```
## 📈 Scaling
### Horizontal Scaling
Để scale backend:
```bash
docker-compose up -d --scale backend=3
```
### Load Balancer
Sử dụng Nginx hoặc Traefik làm load balancer cho multiple backend instances.
## 🔄 Updates
```bash
# Pull latest code
git pull origin main
# Rebuild và restart
docker-compose up -d --build
# Migrate database (nếu có)
docker exec cuccu_backend python -m alembic upgrade head
```
LOGIC_FLOW_EXPLANATION.md deleted 100644 → 0
View file @ af456699
# 🔄 Logic Flow: Agent nhận ngày hôm nay → Sinh query → Gửi cho tool
## 📋 Tổng quan luồng xử lý
```
1. Agent nhận ngày hôm nay
↓
2. Format ngày thành YYYY-MM-DD
↓
3. Thêm vào Filter Context
↓
4. Filter Context sync với URL
↓
5. Hook useMemoFilters convert filter → query string
↓
6. Query string được truyền vào API call
↓
7. API nhận query và trả về kết quả
```
---
## 🔍 Chi tiết từng bước
### **Bước 1: Agent nhận ngày hôm nay**
📍 File: `frontend/src/pages/Home.tsx` (dòng 18-36)
```typescript
useEffect(() => {
if (!user) return;
const hasFilterInUrl = searchParams.has("filter");
if (!hasFilterInUrl) {
// ✅ LẤY NGÀY HÔM NAY
const today = new Date();
const year = today.getUTCFullYear();
const month = String(today.getUTCMonth() + 1).padStart(2, "0");
const day = String(today.getUTCDate()).padStart(2, "0");
const todayStr = `${year}-${month}-${day}`; // VD: "2026-01-24"
// ✅ THÊM VÀO FILTER
addFilter({ factor: "displayTime", value: todayStr });
}
}, [user, searchParams, addFilter]);
```
**Giải thích:**
- Agent (component Home) tự động lấy ngày hôm nay khi component mount
- Format thành chuỗi `YYYY-MM-DD` (UTC)
- Chỉ thêm filter nếu URL chưa có filter nào
---
### **Bước 2: Filter được lưu vào Context**
📍 File: `frontend/src/contexts/MemoFilterContext.tsx` (dòng 101-103)
```typescript
const addFilter = useCallback((filter: MemoFilter) => {
setFiltersState((prev) => uniqBy([...prev, filter], getMemoFilterKey));
}, []);
```
**Giải thích:**
- `addFilter` thêm filter vào state `filters`
- State được lưu trong `MemoFilterContext`
- Context tự động sync với URL query params
---
### **Bước 3: Filter sync với URL**
📍 File: `frontend/src/contexts/MemoFilterContext.tsx` (dòng 79-93)
```typescript
useEffect(() => {
const storeString = stringifyFilters(filters);
// VD: "displayTime:2026-01-24"
if (storeString !== lastSyncedStoreRef.current) {
const newParams = new URLSearchParams(searchParams);
if (filters.length > 0) {
newParams.set("filter", storeString); // URL: ?filter=displayTime:2026-01-24
}
setSearchParams(newParams, { replace: true });
}
}, [filters, searchParams, setSearchParams]);
```
**Giải thích:**
- Filter được convert thành string: `"displayTime:2026-01-24"`
- String này được thêm vào URL: `?filter=displayTime:2026-01-24`
- Giúp user có thể bookmark/share URL với filter
---
### **Bước 4: Hook convert Filter → Query String**
📍 File: `frontend/src/hooks/useMemoFilters.ts` (dòng 78-96)
```typescript
// Trong useMemoFilters hook
for (const filter of filters) {
if (filter.factor === "displayTime") {
const displayWithUpdateTime = memoRelatedSetting?.displayWithUpdateTime ?? false;
const factor = displayWithUpdateTime ? "updated_ts" : "created_ts";
// ✅ PARSE NGÀY TỪ STRING
const dateParts = filter.value.split("-"); // ["2026", "01", "24"]
if (dateParts.length === 3) {
const year = parseInt(dateParts[0], 10);
const month = parseInt(dateParts[1], 10) - 1; // JS months 0-indexed
const day = parseInt(dateParts[2], 10);
// ✅ TẠO UTC TIMESTAMP (00:00:00 UTC của ngày đó)
const utcDate = new Date(Date.UTC(year, month, day, 0, 0, 0, 0));
const timestampAfter = Math.floor(utcDate.getTime() / 1000); // VD: 1706054400
const timestampEnd = timestampAfter + 60 * 60 * 24; // +24 giờ
// ✅ SINH QUERY STRING
conditions.push(`${factor} >= ${timestampAfter} && ${factor} < ${timestampEnd}`);
// VD: "created_ts >= 1706054400 && created_ts < 1706140800"
}
}
}
return conditions.length > 0 ? conditions.join(" && ") : undefined;
```
**Giải thích:**
- Hook đọc filter từ Context
- Parse ngày `"2026-01-24"` → timestamp UTC
- Tạo range: từ 00:00:00 đến 23:59:59 của ngày đó
- Sinh query string: `"created_ts >= 1706054400 && created_ts < 1706140800"`
---
### **Bước 5: Query được truyền vào Component**
📍 File: `frontend/src/pages/Home.tsx` (dòng 39-43, 65-72)
```typescript
// ✅ BUILD FILTER QUERY
const memoFilter = useMemoFilters({
creatorName: user?.name,
includeShortcuts: true,
includePinned: true,
});
// ✅ TRUYỀN VÀO PagedMemoList
<PagedMemoList
filter={memoFilter} // "created_ts >= 1706054400 && created_ts < 1706140800"
// ... other props
/>
```
**Giải thích:**
- `useMemoFilters` trả về query string
- Query string được truyền vào `PagedMemoList` component qua prop `filter`
---
### **Bước 6: Query được gửi đến API**
📍 File: `frontend/src/components/PagedMemoList/PagedMemoList.tsx` (dòng 92-97)
```typescript
const { data, fetchNextPage, hasNextPage } = useInfiniteMemos({
state: props.state || State.NORMAL,
orderBy: props.orderBy || "display_time desc",
filter: props.filter, // ✅ Query string từ bước 5
pageSize: props.pageSize || DEFAULT_LIST_MEMOS_PAGE_SIZE,
});
```
📍 File: `frontend/src/hooks/useMemoQueries.ts` (dòng 29-46)
```typescript
export function useInfiniteMemos(request: Partial<ListMemosRequest> = {}) {
return useInfiniteQuery({
queryKey: memoKeys.list(request),
queryFn: async ({ pageParam }) => {
// ✅ GỌI API VỚI FILTER
const response = await memoServiceClient.listMemos(
create(ListMemosRequestSchema, {
...request, // { filter: "created_ts >= 1706054400 && created_ts < 1706140800" }
pageToken: pageParam || "",
})
);
return response;
},
// ...
});
}
```
**Giải thích:**
- `useInfiniteMemos` nhận `filter` trong request object
- Gọi `memoServiceClient.listMemos()` với filter
- API backend nhận filter và query database
---
## ✅ Kết luận
**Logic ĐÚNG và HOẠT ĐỘNG TỐT:**
1. ✅ Agent (Home component) tự động nhận ngày hôm nay
2. ✅ Format ngày thành `YYYY-MM-DD`
3. ✅ Lưu vào Filter Context
4. ✅ Context sync với URL
5. ✅ Hook `useMemoFilters` convert filter → query string với timestamp
6. ✅ Query string được gửi đến API qua `memoServiceClient.listMemos()`
7. ✅ API trả về memos của ngày hôm nay
**Điểm mạnh:**
- ✅ Tự động filter theo ngày hôm nay khi vào trang Home
- ✅ URL có thể bookmark/share
- ✅ Xử lý timezone đúng (UTC)
- ✅ Hỗ trợ cả `created_ts` và `updated_ts` tùy setting
**Lưu ý:**
- Filter chỉ được set tự động nếu URL chưa có filter nào
- Nếu user đã có filter trong URL, sẽ không override
RALPH_TASK.md
View file @ 1732c42d
task: "Refactor & tối ưu backend CuCu: kiến trúc FastAPI + agent clean, tách rõ layer, xoá dead code, tránh bottleneck (N+1 query, DB, cache, rate limit), đảm bảo 'cd backend && pytest' luôn xanh."
task: "Refactor backend: tách rõ API routes, dọn dead code trong agent module"
test_command: "cd backend && pytest"
---
......
SETUP_RALPH.md deleted 100644 → 0
View file @ af456699
# Hướng dẫn cài đặt Ralph Wiggum cho Windows
## Cách 1: Dùng Git Bash (Khuyến nghị)
1. Mở **Git Bash** (cài cùng với Git for Windows)
2. Navigate đến repo:
```bash
cd /e/opennotion
```
3. Chạy install script:
```bash
curl -fsSL https://raw.githubusercontent.com/agrimsingh/ralph-wiggum-cursor/main/install.sh | bash
```
## Cách 2: Dùng WSL (Windows Subsystem for Linux)
1. Mở **WSL terminal** (Ubuntu/Debian)
2. Navigate đến repo:
```bash
cd /mnt/e/opennotion
```
3. Chạy install script:
```bash
curl -fsSL https://raw.githubusercontent.com/agrimsingh/ralph-wiggum-cursor/main/install.sh | bash
```
## Cách 3: Cài thủ công (nếu script không chạy được)
1. Tạo thư mục `.cursor/ralph-scripts/`
2. Download các script từ repo: https://github.com/agrimsingh/ralph-wiggum-cursor/tree/main/scripts
3. Copy vào `.cursor/ralph-scripts/`
4. Tạo thư mục `.ralph/` ở root repo
5. Đảm bảo có `cursor-agent` CLI:
```bash
curl https://cursor.com/install -fsS | bash
```
## Sau khi cài xong
Chạy loop backend với:
```bash
# Interactive mode
./.cursor/ralph-scripts/ralph-setup.sh
# Hoặc CLI mode với nhiều iterations
./.cursor/ralph-scripts/ralph-loop.sh -n 100 -m gpt-5.2-high --branch feature/ralph-backend-cleanup
```
## Kiểm tra cài đặt
```bash
# Check script có chưa
ls .cursor/ralph-scripts/ralph-loop.sh
# Check cursor-agent
which cursor-agent
```
TESTING_GUIDE.md deleted 100644 → 0
View file @ af456699
# Complete Testing Guide
## Overview
This guide covers testing for both backend APIs and frontend E2E tests.
## Backend API Testing
### Setup
1. Install test dependencies:
```bash
cd backend
pip install -r requirements-test.txt
```
2. Ensure backend server is running:
```bash
python server.py
# Server should be at http://localhost:5000
```
### Running Backend Tests
```bash
# Run all tests
pytest
# Run specific test file
pytest tests/test_auth.py
pytest tests/test_memos.py
pytest tests/test_comments.py
# Run with verbose output
pytest -v
# Run with coverage
pytest --cov=memos_core --cov=api tests/
```
### Test Files
- `tests/test_auth.py` - Authentication (sign in, sign up, get current user)
- `tests/test_memos.py` - Memo CRUD operations
- `tests/test_comments.py` - Comment creation and listing
## Frontend E2E Testing (Playwright)
### Setup
1. Install dependencies:
```bash
cd frontend
npm install
# or
pnpm install
```
2. Install Playwright browsers:
```bash
npx playwright install
```
3. Ensure frontend dev server is running:
```bash
npm run dev
# Server should be at http://localhost:3001
```
### Running Frontend Tests
```bash
# Run all tests
npm run test:e2e
# Run in UI mode (interactive)
npm run test:e2e:ui
# Run in headed mode (see browser)
npm run test:e2e:headed
# Run in debug mode
npm run test:e2e:debug
# Run specific test file
npx playwright test auth.spec.ts
npx playwright test comments.spec.ts
```
### Test Files
- `tests/e2e/auth.spec.ts` - Authentication flows
- `tests/e2e/comments.spec.ts` - Comment functionality
- `tests/e2e/memos.spec.ts` - Memo CRUD operations
- `tests/e2e/filters.spec.ts` - Filter functionality
## Test Data
Both backend and frontend tests use:
- Email: `test@example.com`
- Password: `testpassword123`
Make sure this user exists or tests will create it.
## Viewing Results
### Backend
- Test output in terminal
- Coverage report: `pytest --cov --cov-report=html`
### Frontend
- HTML report: `npx playwright show-report`
- Screenshots: `test-results/` (on failure)
- Videos: `test-results/` (on failure)
## CI/CD Integration
### Backend
```yaml
- name: Run backend tests
run: |
cd backend
pip install -r requirements-test.txt
pytest --cov --cov-report=xml
```
### Frontend
```yaml
- name: Install Playwright
run: npx playwright install --with-deps
- name: Run E2E tests
run: npm run test:e2e
```
## Troubleshooting
### Backend Tests
- **Import errors**: Make sure you're in the backend directory
- **Connection errors**: Ensure server is running
- **Auth errors**: Check test user credentials
### Frontend Tests
- **Timeout errors**: Increase timeout in `playwright.config.ts`
- **Selector errors**: Update selectors if UI changed
- **Server not found**: Ensure dev server is running on port 3001
TESTING_SUMMARY.md deleted 100644 → 0
View file @ af456699
# Testing Implementation Summary
## ✅ Đã Hoàn Thành
### Backend Tests (Pytest)
1. **Test Infrastructure**
- ✅ `backend/tests/conftest.py` - Pytest fixtures (client, auth tokens, test data)
- ✅ `backend/pytest.ini` - Pytest configuration
- ✅ `backend/requirements-test.txt` - Test dependencies
2. **Test Files Created**
- ✅ `backend/tests/test_auth.py` - Authentication API tests
- Sign up with valid data
- Sign up duplicate email rejection
- Sign in with valid credentials
- Sign in with invalid credentials
- Get current user (authenticated/unauthenticated)
- ✅ `backend/tests/test_memos.py` - Memo CRUD tests
- List memos (authenticated/anonymous)
- Filter by tag
- Filter by date
- Create memo
- Get memo (own/public/protected/private)
- Update memo
- Delete memo
- ✅ `backend/tests/test_comments.py` - Comment tests
- Create comment for PUBLIC memo
- Create comment for PROTECTED memo
- Create comment for PRIVATE memo (access denied)
- List comments (empty, with comments)
- Comment visibility filtering
- Comment sorting (oldest first)
### Frontend Tests (Playwright)
1. **Test Infrastructure**
- ✅ `frontend/tests/e2e/playwright.config.ts` - Playwright configuration
- ✅ `frontend/package.json` - Added Playwright scripts and dependencies
2. **Test Files Created**
- ✅ `frontend/tests/e2e/auth.spec.ts` - Authentication flows
- Navigate to sign in page
- Sign in with valid credentials
- Sign in with invalid credentials
- Redirect to sign in for protected routes
- Sign out successfully
- ✅ `frontend/tests/e2e/comments.spec.ts` - Comment functionality
- Create comment on memo
- Display comments list
- Show sign in prompt for anonymous users
- Redirect back to memo after sign in
- Update comment count after creating comment
- ✅ `frontend/tests/e2e/memos.spec.ts` - Memo CRUD operations
- Create a new memo
- Display memo list
- Navigate to memo detail page
- Edit memo
- Filter memos by date
- Filter memos by tag
- ✅ `frontend/tests/e2e/filters.spec.ts` - Filter functionality
- Filter by date using calendar
- Filter by tag
- Clear filter
- Persist filter on page refresh
### Documentation
- ✅ `backend/tests/README.md` - Backend testing guide
- ✅ `frontend/tests/README.md` - Frontend testing guide
- ✅ `TESTING_GUIDE.md` - Complete testing guide (both backend and frontend)
## 📋 API Endpoints Inventory
### Authentication (`/api/v1/auth`)
- POST `/api/v1/auth/signin`
- POST `/api/v1/auth/signup`
- GET `/api/v1/auth/me`
- POST `/api/v1/auth/me`
### Memos (`/api/v1/memos`)
- GET `/api/v1/memos` (with filters: tag, filter, start_date, end_date)
- POST `/api/v1/memos`
- GET `/api/v1/memos/{memo_id}`
- PATCH `/api/v1/memos/{memo_id}`
- DELETE `/api/v1/memos/{memo_id}`
- POST `/api/v1/memos/{memo_id}/comments`
- GET `/api/v1/memos/{memo_id}/comments`
### Users (`/api/v1/users`)
- GET `/api/v1/users`
- POST `/api/v1/users`
- POST `/api/v1/users/settings`
- GET `/api/v1/users/{user_id}`
- PATCH `/api/v1/users/{user_id}`
### Attachments (`/api/v1/attachments`)
- GET `/api/v1/attachments`
- POST `/api/v1/attachments`
- GET `/api/v1/attachments/{attachment_id}`
### Shortcuts (`/api/v1/shortcuts`)
- GET `/api/v1/shortcuts`
- POST `/api/v1/shortcuts`
- PATCH `/api/v1/shortcuts/{shortcut_id}`
- DELETE `/api/v1/shortcuts/{shortcut_id}`
### Instance (`/api/v1/instance`)
- GET `/api/v1/instance`
- POST `/api/v1/instance`
- PATCH `/api/v1/instance`
- POST `/api/v1/instance/setting`
### Identity Providers (`/api/v1/idp`)
- GET `/api/v1/idp`
- POST `/api/v1/idp`
- PATCH `/api/v1/idp/{idp_id}`
### Activities (`/api/v1/activities`)
- GET `/api/v1/activities`
### Embeddings (`/api/v1/memo-embeddings`)
- POST `/api/v1/memo-embeddings`
- POST `/api/v1/memo-embeddings/search`
### Chatbot (`/api/agent/chat`)
- POST `/api/agent/chat`
### Chat History (`/api/history`)
- GET `/api/history/{identity_key}`
- DELETE `/api/history/{identity_key}`
### Cache Analytics (`/cache`)
- GET `/cache/stats`
- DELETE `/cache/user/{user_id}`
- POST `/cache/stats/reset`
### Prompts (`/api/agent/system-prompt`)
- GET `/api/agent/system-prompt`
- POST `/api/agent/system-prompt`
## 🚀 Next Steps
1. **Install Dependencies**
```bash
# Backend
cd backend
pip install -r requirements-test.txt
# Frontend
cd frontend
npm install
npx playwright install
```
2. **Run Tests**
```bash
# Backend
cd backend
pytest
# Frontend
cd frontend
npm run test:e2e
```
3. **Adjust Test Selectors**
- Update Playwright selectors based on actual UI elements
- Add `data-testid` attributes to key UI components for easier testing
4. **Add More Tests**
- User management tests
- Attachment upload tests
- Shortcut management tests
- Integration tests
## 📝 Notes
- Test user credentials: `test@example.com` / `testpassword123`
- Backend server should run on `http://localhost:5000`
- Frontend server should run on `http://localhost:3001`
- Tests are designed to be resilient to UI changes
- Screenshots and videos are saved on test failures
backend/.dockerignore
View file @ 1732c42d
__pycache__
*.pyc
.env
.venv
venv
# Git
.git
.gitignore
.dockerignore
logs
data
# Python
__pycache__
*.py[cod]
*$py.class
*.so
.Python
venv/
env/
ENV/
.venv
# IDE
.vscode/
.idea/
*.swp
*.swo
# Environment
.env
.env.local
# Testing
.pytest_cache/
.coverage
htmlcov/
tests/
# Logs
*.log
logs/
# OS
.DS_Store
Thumbs.db
# Documentation
*.md
!readme.md
!ENV_VARIABLES.md
# Docker
Dockerfile*
docker-compose*.yml
backend/Dockerfile.prod
View file @ 1732c42d
# Lấy Python 3.11 slim (ít file, nhẹ)
# Production Dockerfile for Backend
FROM python:3.11-slim
# Thư mục làm việc
WORKDIR /app
ENV PYTHONUNBUFFERED=1 PYTHONDONTWRITEBYTECODE=1
# Set environment variables
ENV PYTHONUNBUFFERED=1 \
PYTHONDONTWRITEBYTECODE=1 \
PIP_NO_CACHE_DIR=1 \
PIP_DISABLE_PIP_VERSION_CHECK=1
# Copy requirements rồi cài package
# Install system dependencies
RUN apt-get update && apt-get install -y \
curl \
&& rm -rf /var/lib/apt/lists/*
# Copy requirements and install Python dependencies
COPY requirements.txt .
RUN pip install -r requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
# Copy code
# Copy application code
COPY . .
# Copy entrypoint script (nếu có)
# Copy and set up entrypoint script
COPY entrypoint.sh /app/entrypoint.sh
RUN chmod +x /app/entrypoint.sh
# Mở port 5000
# Create data directory
RUN mkdir -p /app/data
# Expose port
EXPOSE 5000
# Chạy server
# Health check
HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
CMD curl -f http://localhost:5000/docs || exit 1
# Run entrypoint script
CMD ["/app/entrypoint.sh"]
\ No newline at end of file
backend/ENV_VARIABLES.md 0 → 100644
View file @ 1732c42d
# Backend Environment Variables
This document describes all environment variables used by the backend.
## Quick Start
1. Copy the template below to create your `.env` file:
```bash
cp ENV_VARIABLES.md .env
# Then edit .env and fill in your values
```
2. **DO NOT commit `.env` file to version control**
## Required Variables
### MongoDB Configuration
```bash
# Required: MongoDB connection string
MONGODB_URI=mongodb://localhost:27017
MONGODB_DB_NAME=cucu_note
```
### Authentication
```bash
# Required for production: Clerk authentication
CLERK_SECRET_KEY=sk_test_...
CLERK_JWKS_URL=https://your-clerk-instance.clerk.accounts.dev/.well-known/jwks.json
CLERK_ISSUER=https://your-clerk-instance.clerk.accounts.dev
```
### AI Services
```bash
# Required: OpenAI API key for embeddings
OPENAI_API_KEY=sk-...
```
## Optional Variables
### Server Configuration
- `PORT` - Server port (default: `5000`)
### MongoDB Connection Pooling
- `MONGODB_MAX_POOL_SIZE` - Maximum pool size (default: `50`)
- `MONGODB_MIN_POOL_SIZE` - Minimum pool size (default: `10`)
- `MONGODB_MAX_IDLE_TIME_MS` - Max idle time in milliseconds (default: `45000`)
### Redis Configuration
- `REDIS_HOST` - Redis host (default: `localhost`)
- `REDIS_PORT` - Redis port (default: `6379`)
- `REDIS_USERNAME` - Redis username (optional)
- `REDIS_PASSWORD` - Redis password (optional)
- `REDIS_CACHE_URL` - Redis cache host (default: from `REDIS_HOST`)
- `REDIS_CACHE_PORT` - Redis cache port (default: `6379`)
- `REDIS_CACHE_DB` - Redis cache database number (default: `2`)
- `REDIS_CACHE_TURN_ON` - Enable Redis cache (default: `true`)
### CORS Configuration
- `CORS_ORIGINS` - Comma-separated list of allowed origins, or `*` for all (default: `*`)
- Example: `http://localhost:3001,https://yourdomain.com`
### Rate Limiting
- `RATE_LIMIT_GUEST` - Daily message limit for guests (default: `10`)
- `RATE_LIMIT_USER` - Daily message limit for authenticated users (default: `100`)
- `RATE_LIMIT_BLOCK_MINUTES` - Block duration after exceeding limit (default: `5`)
- `RATE_STORAGE_URI` - Rate limit storage URI (default: `memory://`)
- Use `redis://host:port/db` for production
- Or `memory://` for development (not suitable for multiple instances)
- `RATE_LIMIT_REDIS_DB` - Redis DB number for rate limiting (default: `0`)
### Development/Testing
- `DISABLE_AUTH` - Disable authentication (default: `false`, **NOT for production!**)
- `USE_SQLITE_HISTORY` - Use SQLite for chat history (default: `true`)
- `SQLITE_DB_PATH` - SQLite database path (default: `./data/chat_history.db`)
- `MEMO_DB_PATH` - Memo database path (default: `./db/memos.db`)
### Encryption Configuration
- `ENCRYPTION_KEY` - Fernet encryption key for sensitive data (API keys, etc.) (required for production)
- Generate with: `python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"`
- Must be a 32-byte base64-encoded string
- **CRITICAL**: Do not commit to version control
- If not set, will use password-based derivation (NOT secure for production)
- `ENCRYPTION_PASSWORD` - Fallback password for key derivation (dev only, NOT for production)
### Other Services
- `GOOGLE_API_KEY` - Google API key (optional)
- `GROQ_API_KEY` - Groq API key (optional)
- `DEFAULT_MODEL` - Default AI model (default: `gpt-4o-mini`)
- `FIRECRAWL_API_KEY` - Firecrawl API key (optional)
- `LANGFUSE_PUBLIC_KEY` - Langfuse public key (optional)
- `LANGFUSE_SECRET_KEY` - Langfuse secret key (optional)
- `LANGFUSE_BASE_URL` - Langfuse base URL (default: `https://cloud.langfuse.com`)
## Production Checklist
Before deploying to production, ensure:
1. ✅ `MONGODB_URI` is set (no hardcoded credentials)
2. ✅ `CLERK_SECRET_KEY`, `CLERK_JWKS_URL`, `CLERK_ISSUER` are configured
3. ✅ `CORS_ORIGINS` is set to specific origins (not `*`)
4. ✅ `REDIS_HOST` is configured for caching and rate limiting
5. ✅ `RATE_STORAGE_URI` uses Redis (not `memory://`)
6. ✅ `DISABLE_AUTH=false` (authentication enabled)
7. ✅ `ENCRYPTION_KEY` is set (required for user API key encryption)
8. ✅ All API keys are set and valid
backend/api/memos/memo_routes.py
View file @ 1732c42d
......@@ -4,8 +4,8 @@ Memo service routes for Memos-style backend.
from typing import List, Any
import logging
import secrets
import re
import secrets
from fastapi import APIRouter, Body, Depends, HTTPException, Query, Request
......@@ -17,6 +17,7 @@ from common.memos_core.schemas import (
MemoResponse,
)
from common.memos_core.services import get_memo_service, get_memo_relation_service
from common.memos_core.query_parser import parse_date_range
from common.mongo_client import mongodb_client
......@@ -42,54 +43,15 @@ async def list_memos(
try:
user_id = get_current_user_id(request)
# Parse Dates from start_date/end_date params
from datetime import datetime, timedelta, timezone
import re
dt_start = None
dt_end = None
if start_date:
try:
dt_start = datetime.fromisoformat(start_date.replace("Z", "+00:00"))
except ValueError:
pass # Ignore invalid format
# Parse date range from query params or filter string
dt_start, dt_end = parse_date_range(
start_date=start_date,
end_date=end_date,
filter_str=filter,
)
if end_date:
try:
dt_end = datetime.fromisoformat(end_date.replace("Z", "+00:00"))
except ValueError:
pass
# Parse 'filter' query param (overrides start/end if present and matches)
if filter:
logger.debug("List memos GET with filter=%r", filter)
# Case 1: Complex Timestamp Filter (created_ts >= ...)
pattern_ts = r"(?:created_ts|updated_ts)\s*>=\s*([\d\.]+)\s*&&\s*(?:created_ts|updated_ts)\s*<\s*([\d\.]+)"
match_ts = re.search(pattern_ts, filter)
# Case 2: Frontend DisplayTime Filter (displayTime:2026-01-24)
pattern_dt = r"displayTime:(\d{4}-\d{2}-\d{2})"
match_dt = re.search(pattern_dt, filter)
if match_ts:
try:
ts_start = float(match_ts.group(1))
ts_end = float(match_ts.group(2))
dt_start = datetime.fromtimestamp(ts_start, tz=timezone.utc)
dt_end = datetime.fromtimestamp(ts_end, tz=timezone.utc)
except (ValueError, TypeError):
pass
elif match_dt:
try:
date_str = match_dt.group(1)
# Parse YYYY-MM-DD
dt = datetime.strptime(date_str, "%Y-%m-%d").replace(tzinfo=timezone.utc)
# Set range for that full day
dt_start = dt
dt_end = dt + timedelta(days=1)
except ValueError:
pass
return await memo_service.list_memos(
user_id=user_id,
......@@ -137,48 +99,18 @@ async def create_memo_or_list_memos(
end_date = None
raw_filter = raw.get("filter", "")
creator_id = None
if raw_filter and isinstance(raw_filter, str):
import re
from datetime import datetime, timedelta, timezone
logger.debug("List memos POST with raw_filter=%r", raw_filter)
# Case 1: Complex Timestamp Filter (created_ts >= ...)
pattern_ts = r"(?:created_ts|updated_ts)\s*>=\s*([\d\.]+)\s*&&\s*(?:created_ts|updated_ts)\s*<\s*([\d\.]+)"
match_ts = re.search(pattern_ts, raw_filter)
# Case 2: Frontend DisplayTime Filter (displayTime:2026-01-24)
pattern_dt = r"displayTime:(\d{4}-\d{2}-\d{2})"
match_dt = re.search(pattern_dt, raw_filter)
# Case 3: Creator ID Filter (creator_id == ...)
# Supports alphanumeric, hyphen, underscore, dot
# Parse date range from filter string
start_date, end_date = parse_date_range(filter_str=raw_filter)
# Parse creator_id filter (creator_id == ...)
pattern_creator = r"creator_id\s*==\s*([a-zA-Z0-9_\-\.]+)"
match_creator = re.search(pattern_creator, raw_filter)
if match_ts:
try:
ts_start = float(match_ts.group(1))
ts_end = float(match_ts.group(2))
start_date = datetime.fromtimestamp(ts_start, tz=timezone.utc)
end_date = datetime.fromtimestamp(ts_end, tz=timezone.utc)
except (ValueError, TypeError):
pass
elif match_dt:
try:
date_str = match_dt.group(1)
# Parse YYYY-MM-DD
dt = datetime.strptime(date_str, "%Y-%m-%d").replace(tzinfo=timezone.utc)
# Set range for that full day
start_date = dt
end_date = dt + timedelta(days=1)
except ValueError:
pass
if match_creator:
creator_id = match_creator.group(1)
else:
creator_id = None
else:
creator_id = None
return await memo_service.list_memos(
user_id=user_id,
......
backend/api/memos/user_routes.py
View file @ 1732c42d
......@@ -5,13 +5,15 @@ User service routes for Memos-style backend.
from typing import List
from fastapi import APIRouter, Body, Depends, HTTPException
from starlette.requests import Request
from common.encryption import mask_api_key, validate_openai_key_format
from common.memos_core.schemas import (
UserCreate,
UserUpdate,
UserResponse,
)
from common.memos_core.services import get_user_service
from common.memos_core.services import get_user_service, get_user_settings_service
router = APIRouter(prefix="/users")
......@@ -79,3 +81,102 @@ async def update_user(
raise HTTPException(status_code=400, detail=str(exc)) from exc
# =============================================================================
# OpenAI API Key Management Endpoints
# =============================================================================
@router.get("/{user_id}/openai-key", summary="Get user's OpenAI API key (masked)")
async def get_user_openai_key(
user_id: str,
request: Request,
settings_service=Depends(get_user_settings_service),
):
"""
Get user's OpenAI API key (masked for security).
User can only access their own key.
"""
# Verify user can only access their own key
authenticated_user_id = getattr(request.state, "user_id", None)
if not authenticated_user_id or authenticated_user_id != user_id:
raise HTTPException(status_code=403, detail="You can only access your own API key")
try:
has_key = await settings_service.has_openai_api_key(user_id)
if not has_key:
return {"has_key": False, "masked_key": None}
# Get the key to mask it
key = await settings_service.get_openai_api_key(user_id)
if key:
return {
"has_key": True,
"masked_key": mask_api_key(key),
}
return {"has_key": False, "masked_key": None}
except Exception as exc:
raise HTTPException(status_code=500, detail=str(exc)) from exc
@router.put("/{user_id}/openai-key", summary="Update user's OpenAI API key")
async def update_user_openai_key(
user_id: str,
payload: dict = Body(...),
request: Request,
settings_service=Depends(get_user_settings_service),
):
"""
Update user's OpenAI API key.
Key will be encrypted before storage.
User can only update their own key.
"""
# Verify user can only update their own key
authenticated_user_id = getattr(request.state, "user_id", None)
if not authenticated_user_id or authenticated_user_id != user_id:
raise HTTPException(status_code=403, detail="You can only update your own API key")
api_key = payload.get("api_key") or payload.get("key")
if not api_key:
raise HTTPException(status_code=400, detail="api_key is required")
# Validate key format
if not validate_openai_key_format(api_key):
raise HTTPException(
status_code=400,
detail="Invalid OpenAI API key format. Key must start with 'sk-' and be 20-100 characters."
)
try:
await settings_service.set_openai_api_key(user_id, api_key)
return {
"success": True,
"message": "OpenAI API key updated successfully",
"masked_key": mask_api_key(api_key),
}
except ValueError as exc:
raise HTTPException(status_code=400, detail=str(exc)) from exc
except Exception as exc:
raise HTTPException(status_code=500, detail=str(exc)) from exc
@router.delete("/{user_id}/openai-key", summary="Delete user's OpenAI API key")
async def delete_user_openai_key(
user_id: str,
request: Request,
settings_service=Depends(get_user_settings_service),
):
"""
Delete user's OpenAI API key.
User can only delete their own key.
"""
# Verify user can only delete their own key
authenticated_user_id = getattr(request.state, "user_id", None)
if not authenticated_user_id or authenticated_user_id != user_id:
raise HTTPException(status_code=403, detail="You can only delete your own API key")
try:
await settings_service.delete_openai_api_key(user_id)
return {"success": True, "message": "OpenAI API key deleted successfully"}
except Exception as exc:
raise HTTPException(status_code=500, detail=str(exc)) from exc
backend/common/cache.py
View file @ 1732c42d
......@@ -50,6 +50,11 @@ class RedisClient:
return self._client
try:
if not REDIS_CACHE_URL:
logger.warning("⚠️ REDIS_CACHE_URL not set, disabling Redis cache")
self._enabled = False
return None
connection_kwargs = {
"host": REDIS_CACHE_URL,
"port": REDIS_CACHE_PORT,
......@@ -63,14 +68,17 @@ class RedisClient:
connection_kwargs["username"] = REDIS_USERNAME
self._client = aioredis.Redis(**connection_kwargs)
# Test connection
await self._client.ping()
logger.info(f"✅ Redis Hybrid Cache connected: {REDIS_CACHE_URL}:{REDIS_CACHE_PORT} (db={REDIS_CACHE_DB})")
return self._client
except Exception as e:
logger.error(f"❌ Failed to connect to Redis: {e}")
# Redis is optional - log as warning, not error
logger.warning(f"⚠️ Redis cache unavailable: {e}. Continuing without cache.")
self._enabled = False
self._client = None
return None
def get_client(self) -> aioredis.Redis | None:
......
backend/common/embedding_service.py
View file @ 1732c42d
......@@ -18,27 +18,65 @@ __all__ = [
class EmbeddingClientManager:
"""
Singleton Class quản lý OpenAI Embedding Client (Sync & Async).
Supports both env key and user-specific keys.
"""
def __init__(self):
self._client: OpenAI | None = None
self._async_client: AsyncOpenAI | None = None
def get_client(self) -> OpenAI:
"""Sync Client lazy loading"""
self._user_clients: dict[str, AsyncOpenAI] = {} # Cache per user_id
def get_client(self, api_key: str | None = None) -> OpenAI:
"""
Sync Client lazy loading.
Args:
api_key: Optional API key. If provided, creates client with this key.
Otherwise uses env OPENAI_API_KEY.
"""
key = api_key or OPENAI_API_KEY
if not key:
raise RuntimeError("CRITICAL: OPENAI_API_KEY chưa được thiết lập")
# If using default key, cache the client
if not api_key:
if self._client is None:
if not OPENAI_API_KEY:
raise RuntimeError("CRITICAL: OPENAI_API_KEY chưa được thiết lập")
self._client = OpenAI(api_key=OPENAI_API_KEY)
self._client = OpenAI(api_key=key)
return self._client
def get_async_client(self) -> AsyncOpenAI:
"""Async Client lazy loading"""
# For custom keys, create new client (not cached)
return OpenAI(api_key=key)
def get_async_client(self, api_key: str | None = None, user_id: str | None = None) -> AsyncOpenAI:
"""
Async Client lazy loading.
Args:
api_key: Optional API key. If provided, uses this key.
Otherwise uses env OPENAI_API_KEY.
user_id: Optional user ID for caching user-specific clients.
Returns:
AsyncOpenAI client
"""
key = api_key or OPENAI_API_KEY
if not key:
raise RuntimeError("CRITICAL: OPENAI_API_KEY chưa được thiết lập")
# If using default key, cache the default client
if not api_key:
if self._async_client is None:
if not OPENAI_API_KEY:
raise RuntimeError("CRITICAL: OPENAI_API_KEY chưa được thiết lập")
self._async_client = AsyncOpenAI(api_key=OPENAI_API_KEY)
self._async_client = AsyncOpenAI(api_key=key)
return self._async_client
# For user-specific keys, cache per user_id
if user_id and user_id in self._user_clients:
return self._user_clients[user_id]
client = AsyncOpenAI(api_key=key)
if user_id:
self._user_clients[user_id] = client
return client
logger = logging.getLogger(__name__)
......@@ -65,13 +103,27 @@ def create_embedding(text: str) -> list[float]:
return []
async def create_embedding_async(text: str) -> list[float]:
async def create_embedding_async(text: str, user_id: str | None = None) -> list[float]:
"""
Async embedding generation (KHÔNG dùng cache).
Nếu sau này cần cache lại, có thể thêm redis_cache.get_embedding / set_embedding.
Args:
text: Text to embed
user_id: Optional user ID. If provided, will use user's API key if available.
Returns:
Embedding vector
"""
try:
client = get_async_embedding_client()
api_key = None
if user_id:
# Try to get user's API key
from common.memos_core.services import get_user_settings_service
settings_service = get_user_settings_service()
api_key = await settings_service.get_openai_api_key(user_id)
client = _manager.get_async_client(api_key=api_key, user_id=user_id)
response = await client.embeddings.create(model="text-embedding-3-small", input=text)
embedding = response.data[0].embedding
return embedding
......@@ -80,15 +132,29 @@ async def create_embedding_async(text: str) -> list[float]:
return []
async def create_embeddings_async(texts: list[str]) -> list[list[float]]:
async def create_embeddings_async(texts: list[str], user_id: str | None = None) -> list[list[float]]:
"""
Batch async embedding generation with per-item Layer 2 Cache.
Args:
texts: List of texts to embed
user_id: Optional user ID. If provided, will use user's API key if available.
Returns:
List of embedding vectors
"""
try:
if not texts:
return []
client = get_async_embedding_client()
api_key = None
if user_id:
# Try to get user's API key
from common.memos_core.services import get_user_settings_service
settings_service = get_user_settings_service()
api_key = await settings_service.get_openai_api_key(user_id)
client = _manager.get_async_client(api_key=api_key, user_id=user_id)
response = await client.embeddings.create(model="text-embedding-3-small", input=texts)
# Giữ nguyên thứ tự embedding theo order input
......
backend/common/encryption.py 0 → 100644
View file @ 1732c42d
"""
Encryption utilities for sensitive data (e.g., API keys).
Uses Fernet symmetric encryption from cryptography library.
"""
import base64
import logging
import os
from cryptography.fernet import Fernet
from cryptography.hazmat.primitives import hashes
from cryptography.hazmat.primitives.kdf.pbkdf2 import PBKDF2HMAC
logger = logging.getLogger(__name__)
# Get encryption key from environment
ENCRYPTION_KEY = os.getenv("ENCRYPTION_KEY")
# Fallback: Generate key from a password (NOT recommended for production)
# This is only for development/testing
FALLBACK_PASSWORD = os.getenv("ENCRYPTION_PASSWORD", "default-dev-password-change-in-production")
def _get_fernet_key() -> bytes:
"""
Get or generate Fernet encryption key.
Priority: ENCRYPTION_KEY env var > generated from password (dev only)
"""
if ENCRYPTION_KEY:
try:
# Try to use as-is (should be base64-encoded 32-byte key)
return ENCRYPTION_KEY.encode()
except Exception:
# If not valid, try to decode as base64
try:
return base64.urlsafe_b64decode(ENCRYPTION_KEY)
except Exception:
logger.warning("Invalid ENCRYPTION_KEY format, using fallback")
# Fallback: Generate from password (dev only - NOT secure for production)
logger.warning(
"⚠️ ENCRYPTION_KEY not set. Using password-based key derivation (NOT secure for production!)"
)
salt = b"cucu_note_salt" # Fixed salt for dev (should be random in production)
kdf = PBKDF2HMAC(
algorithm=hashes.SHA256(),
length=32,
salt=salt,
iterations=100000,
)
key = base64.urlsafe_b64encode(kdf.derive(FALLBACK_PASSWORD.encode()))
return key
def encrypt_api_key(api_key: str) -> str:
"""
Encrypt an API key using Fernet symmetric encryption.
Args:
api_key: Plain text API key to encrypt
Returns:
Encrypted API key as base64 string
Raises:
ValueError: If api_key is empty
RuntimeError: If encryption fails
"""
if not api_key or not api_key.strip():
raise ValueError("API key cannot be empty")
try:
fernet = Fernet(_get_fernet_key())
encrypted = fernet.encrypt(api_key.encode())
return encrypted.decode()
except Exception as e:
logger.error(f"Failed to encrypt API key: {e}")
raise RuntimeError("Failed to encrypt API key") from e
def decrypt_api_key(encrypted_key: str) -> str:
"""
Decrypt an encrypted API key.
Args:
encrypted_key: Encrypted API key (base64 string)
Returns:
Decrypted plain text API key
Raises:
ValueError: If encrypted_key is empty
RuntimeError: If decryption fails (wrong key, corrupted data, etc.)
"""
if not encrypted_key or not encrypted_key.strip():
raise ValueError("Encrypted key cannot be empty")
try:
fernet = Fernet(_get_fernet_key())
decrypted = fernet.decrypt(encrypted_key.encode())
return decrypted.decode()
except Exception as e:
logger.error(f"Failed to decrypt API key: {e}")
raise RuntimeError("Failed to decrypt API key. Key may be corrupted or encryption key changed.") from e
def mask_api_key(api_key: str) -> str:
"""
Mask an API key for display (show only first 7 chars and last 4 chars).
Args:
api_key: API key to mask
Returns:
Masked API key (e.g., "sk-...xxxx")
"""
if not api_key or len(api_key) < 11:
return "sk-...xxxx"
return f"{api_key[:7]}...{api_key[-4:]}"
def validate_openai_key_format(api_key: str) -> bool:
"""
Validate OpenAI API key format.
Args:
api_key: API key to validate
Returns:
True if format is valid, False otherwise
"""
if not api_key or not api_key.strip():
return False
# OpenAI keys typically start with "sk-" and are ~51 characters
key = api_key.strip()
if not key.startswith("sk-"):
return False
if len(key) < 20 or len(key) > 100: # Reasonable range
return False
return True
backend/common/memos_core/query_parser.py 0 → 100644
View file @ 1732c42d
"""
Query parameter parsing utilities for memo routes.
Extracted from route handlers to keep routes thin.
"""
import re
from datetime import datetime, timedelta, timezone
from typing import Tuple
def parse_date_range(
start_date: str | None = None,
end_date: str | None = None,
filter_str: str | None = None,
) -> Tuple[datetime | None, datetime | None]:
"""
Parse date range from query parameters or filter string.
Supports:
- ISO format dates (start_date/end_date params)
- Timestamp filter: "created_ts >= 1234567890 && created_ts < 1234567890"
- DisplayTime filter: "displayTime:2026-01-24"
Returns:
Tuple of (start_datetime, end_datetime) or (None, None)
"""
dt_start = None
dt_end = None
# Parse ISO format dates
if start_date:
try:
dt_start = datetime.fromisoformat(start_date.replace("Z", "+00:00"))
except ValueError:
pass
if end_date:
try:
dt_end = datetime.fromisoformat(end_date.replace("Z", "+00:00"))
except ValueError:
pass
# Parse filter string (overrides start/end if present)
if filter_str:
# Case 1: Timestamp filter (created_ts >= ... && created_ts < ...)
pattern_ts = r"(?:created_ts|updated_ts)\s*>=\s*([\d\.]+)\s*&&\s*(?:created_ts|updated_ts)\s*<\s*([\d\.]+)"
match_ts = re.search(pattern_ts, filter_str)
if match_ts:
try:
ts_start = float(match_ts.group(1))
ts_end = float(match_ts.group(2))
dt_start = datetime.fromtimestamp(ts_start, tz=timezone.utc)
dt_end = datetime.fromtimestamp(ts_end, tz=timezone.utc)
except (ValueError, TypeError):
pass
else:
# Case 2: DisplayTime filter (displayTime:YYYY-MM-DD)
pattern_dt = r"displayTime:(\d{4}-\d{2}-\d{2})"
match_dt = re.search(pattern_dt, filter_str)
if match_dt:
try:
date_str = match_dt.group(1)
dt = datetime.strptime(date_str, "%Y-%m-%d").replace(tzinfo=timezone.utc)
dt_start = dt
dt_end = dt + timedelta(days=1)
except ValueError:
pass
return dt_start, dt_end
backend/common/memos_core/services.py
View file @ 1732c42d
......@@ -183,7 +183,7 @@ class MemoService:
result = await mongodb_client.memos.insert_one(doc)
doc["_id"] = result.inserted_id
await self._create_embedding(str(result.inserted_id), payload.content, payload.tags or [])
await self._create_embedding(str(result.inserted_id), payload.content, payload.tags or [], user_id=user_id)
return self._doc_to_response(doc)
......@@ -295,6 +295,7 @@ class MemoService:
str(doc["_id"]),
payload.content,
payload.tags or doc.get("payload", {}).get("tags", []),
user_id=user_id,
)
return await self.get_memo(str(doc["_id"]), user_id=user_id)
......@@ -383,15 +384,35 @@ class MemoService:
parent=doc.get("parent"),
)
async def _create_embedding(self, memo_id: str, content: str, tags: list[str]) -> None:
"""Create or update embedding for a memo."""
async def _create_embedding(self, memo_id: str, content: str, tags: list[str], user_id: str | None = None) -> None:
"""
Create or update embedding for a memo.
Uses user's API key if available, otherwise falls back to env key.
Args:
memo_id: Memo ID
content: Memo content to embed
tags: Memo tags
user_id: Optional user ID to use user's API key
"""
try:
api_key = os.getenv("OPENAI_API_KEY")
# Try to get user's API key first
api_key = None
if user_id:
from common.memos_core.services import get_user_settings_service
settings_service = get_user_settings_service()
api_key = await settings_service.get_openai_api_key(user_id)
# Fallback to env key
if not api_key:
api_key = os.getenv("OPENAI_API_KEY")
if not api_key:
return
embedder = OpenAIEmbeddings(model="text-embedding-3-small", api_key=api_key)
vec = embedder.embed_query(content)
# Use async embedding service which supports user keys
from common.embedding_service import create_embedding_async
vec = await create_embedding_async(content, user_id=user_id)
if not vec:
return
......@@ -798,6 +819,113 @@ class UserSettingsService:
)
return serialize_doc(result)
async def get_openai_api_key(self, user_id: str) -> str | None:
"""
Get user's OpenAI API key (decrypted).
Args:
user_id: User ID
Returns:
Decrypted API key or None if not set
"""
from common.encryption import decrypt_api_key
doc = await mongodb_client.user_settings.find_one({"user_id": user_id})
if not doc:
return None
encrypted_key = doc.get("openai_api_key_encrypted")
if not encrypted_key:
return None
try:
return decrypt_api_key(encrypted_key)
except Exception as e:
logging.warning(f"Failed to decrypt OpenAI key for user {user_id}: {e}")
return None
async def set_openai_api_key(self, user_id: str, api_key: str) -> dict:
"""
Set user's OpenAI API key (encrypted).
Args:
user_id: User ID
api_key: Plain text API key to encrypt and store
Returns:
Updated settings document
"""
from common.encryption import encrypt_api_key, validate_openai_key_format
# Validate key format
if not validate_openai_key_format(api_key):
raise ValueError("Invalid OpenAI API key format. Key must start with 'sk-' and be 20-100 characters.")
# Encrypt the key
encrypted_key = encrypt_api_key(api_key)
# Update or create settings
result = await mongodb_client.user_settings.find_one_and_update(
{"user_id": user_id},
{
"$set": {
"openai_api_key_encrypted": encrypted_key,
"updated_at": utc_now(),
},
"$setOnInsert": {
"user_id": user_id,
"locale": "en",
"theme": "system",
"memo_visibility": "PRIVATE",
"enable_notifications": True,
"created_at": utc_now(),
},
},
upsert=True,
return_document=True,
)
return serialize_doc(result)
async def delete_openai_api_key(self, user_id: str) -> dict:
"""
Delete user's OpenAI API key.
Args:
user_id: User ID
Returns:
Updated settings document
"""
result = await mongodb_client.user_settings.find_one_and_update(
{"user_id": user_id},
{
"$unset": {"openai_api_key_encrypted": ""},
"$set": {"updated_at": utc_now()},
},
return_document=True,
)
if result:
return serialize_doc(result)
# If user settings don't exist, return empty dict
return {}
async def has_openai_api_key(self, user_id: str) -> bool:
"""
Check if user has an OpenAI API key set.
Args:
user_id: User ID
Returns:
True if key exists, False otherwise
"""
doc = await mongodb_client.user_settings.find_one(
{"user_id": user_id},
{"openai_api_key_encrypted": 1}
)
return bool(doc and doc.get("openai_api_key_encrypted"))
class S3StorageService:
"""S3 storage service for attachments."""
......
backend/common/mongo_client.py
View file @ 1732c42d
......@@ -18,12 +18,8 @@ from motor.motor_asyncio import AsyncIOMotorClient, AsyncIOMotorDatabase
logger = logging.getLogger(__name__)
# MongoDB Configuration
MONGODB_URI = os.getenv(
"MONGODB_URI",
"mongodb+srv://20010841:vuhoanganh1704@cluster0.h6qro.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0",
)
MONGODB_DB_NAME = os.getenv("MONGODB_DB_NAME", "cucu_note")
# MongoDB Configuration - Load from config.py to ensure consistency
from config import MONGODB_URI, MONGODB_DB_NAME
# Collection names với prefix cuccu_
COLLECTION_MEMOS = "cuccu_memos"
......@@ -48,13 +44,31 @@ class MongoDBClient:
return cls._instance
async def connect(self) -> None:
"""Initialize MongoDB connection."""
"""Initialize MongoDB connection with connection pooling."""
if self._client is None:
try:
self._client = AsyncIOMotorClient(MONGODB_URI)
if not MONGODB_URI:
raise ValueError("MONGODB_URI environment variable is required")
# Connection pooling configuration from environment
max_pool_size = int(os.getenv("MONGODB_MAX_POOL_SIZE", "50"))
min_pool_size = int(os.getenv("MONGODB_MIN_POOL_SIZE", "10"))
max_idle_time_ms = int(os.getenv("MONGODB_MAX_IDLE_TIME_MS", "45000"))
self._client = AsyncIOMotorClient(
MONGODB_URI,
maxPoolSize=max_pool_size,
minPoolSize=min_pool_size,
maxIdleTimeMS=max_idle_time_ms,
)
self._db = self._client[MONGODB_DB_NAME]
await self._client.admin.command("ping")
logger.info("✅ Connected to MongoDB: %s", MONGODB_DB_NAME)
logger.info(
"✅ Connected to MongoDB: %s (pool: min=%d, max=%d)",
MONGODB_DB_NAME,
min_pool_size,
max_pool_size,
)
except Exception as e: # pragma: no cover - startup failure
logger.error("❌ MongoDB connection failed: %s", e)
raise
......@@ -140,9 +154,44 @@ def parse_object_id(id_str: str) -> ObjectId | None:
return None
async def create_indexes():
"""Create database indexes for performance optimization."""
try:
db = mongodb_client.db
# Indexes for memos collection
await db[COLLECTION_MEMOS].create_index([("user_id", 1), ("created_at", -1)])
await db[COLLECTION_MEMOS].create_index([("user_id", 1), ("visibility", 1)])
await db[COLLECTION_MEMOS].create_index([("tags", 1)])
await db[COLLECTION_MEMOS].create_index([("created_at", -1)])
# Indexes for memo relations
await db[COLLECTION_MEMO_RELATIONS].create_index([("memo_id", 1)])
await db[COLLECTION_MEMO_RELATIONS].create_index([("related_memo_id", 1)])
# Indexes for reactions
await db[COLLECTION_REACTIONS].create_index([("memo_id", 1)])
await db[COLLECTION_REACTIONS].create_index([("user_id", 1)])
# Indexes for memo embeddings
await db[COLLECTION_MEMO_EMBEDDINGS].create_index([("memo_id", 1)])
await db[COLLECTION_MEMO_EMBEDDINGS].create_index([("user_id", 1), ("date", -1)])
# Indexes for inbox
await db[COLLECTION_INBOX].create_index([("user_id", 1), ("created_at", -1)])
# Indexes for user settings
await db[COLLECTION_USER_SETTINGS].create_index([("user_id", 1)], unique=True)
logger.info("✅ Database indexes created successfully")
except Exception as e:
logger.warning(f"⚠️ Error creating indexes (may already exist): {e}")
async def init_mongodb():
"""Call on app startup."""
await mongodb_client.connect()
await create_indexes()
async def close_mongodb():
......
backend/common/rate_limit.py
View file @ 1732c42d
......@@ -60,7 +60,25 @@ class RateLimitService:
return
# Configuration
# Use Redis for rate limiting in production (format: redis://host:port/db)
# Default to memory:// for development
redis_host = os.getenv("REDIS_HOST")
redis_port = os.getenv("REDIS_PORT", "6379")
redis_password = os.getenv("REDIS_PASSWORD")
redis_db = os.getenv("RATE_LIMIT_REDIS_DB", "0")
if redis_host:
# Build Redis URI for rate limiting
if redis_password:
self.storage_uri = f"redis://:{redis_password}@{redis_host}:{redis_port}/{redis_db}"
else:
self.storage_uri = f"redis://{redis_host}:{redis_port}/{redis_db}"
logger.info(f"Using Redis for rate limiting: {redis_host}:{redis_port}/{redis_db}")
else:
# Fallback to memory (not suitable for production with multiple instances)
self.storage_uri = os.getenv("RATE_STORAGE_URI", "memory://")
logger.warning("⚠️ Using in-memory rate limiting (not suitable for production with multiple instances)")
self.default_limits = ["100/hour", "30/minute"]
self.block_duration_minutes = int(os.getenv("RATE_LIMIT_BLOCK_MINUTES", "5"))
......
backend/config.py
View file @ 1732c42d
......@@ -61,6 +61,15 @@ __all__ = [
"SQLITE_DB_PATH",
"DISABLE_AUTH",
"MEMO_DB_PATH",
"MONGODB_MAX_POOL_SIZE",
"MONGODB_MIN_POOL_SIZE",
"MONGODB_MAX_IDLE_TIME_MS",
"CORS_ORIGINS",
"RATE_STORAGE_URI",
"RATE_LIMIT_REDIS_DB",
"RATE_LIMIT_BLOCK_MINUTES",
"ENCRYPTION_KEY",
"ENCRYPTION_PASSWORD",
]
# ====================== SUPABASE CONFIGURATION ======================
......@@ -113,7 +122,7 @@ CLERK_ISSUER: str | None = os.getenv("CLERK_ISSUER")
# ====================== DATABASE CONNECTION ======================
# Redis Cache Configuration
REDIS_CACHE_URL: str = os.getenv("REDIS_CACHE_URL", "172.16.2.192")
REDIS_CACHE_URL: str | None = os.getenv("REDIS_CACHE_URL")
REDIS_CACHE_PORT: int = int(os.getenv("REDIS_CACHE_PORT", "6379"))
REDIS_CACHE_DB: int = int(os.getenv("REDIS_CACHE_DB", "2"))
REDIS_CACHE_TURN_ON: bool = os.getenv("REDIS_CACHE_TURN_ON", "true").lower() == "true"
......@@ -121,10 +130,15 @@ REDIS_CACHE_TURN_ON: bool = os.getenv("REDIS_CACHE_TURN_ON", "true").lower() ==
CONV_DATABASE_URL: str | None = os.getenv("CONV_DATABASE_URL")
# ====================== MONGO CONFIGURATION ======================
MONGODB_URI: str | None = os.getenv("MONGODB_URI", "mongodb://localhost:27017")
MONGODB_DB_NAME: str | None = os.getenv("MONGODB_DB_NAME", "ai_law")
MONGODB_URI: str | None = os.getenv("MONGODB_URI")
MONGODB_DB_NAME: str | None = os.getenv("MONGODB_DB_NAME", "cucu_note")
USE_MONGO_CONVERSATION: bool = os.getenv("USE_MONGO_CONVERSATION", "true").lower() == "true"
# MongoDB Connection Pooling
MONGODB_MAX_POOL_SIZE: int = int(os.getenv("MONGODB_MAX_POOL_SIZE", "50"))
MONGODB_MIN_POOL_SIZE: int = int(os.getenv("MONGODB_MIN_POOL_SIZE", "10"))
MONGODB_MAX_IDLE_TIME_MS: int = int(os.getenv("MONGODB_MAX_IDLE_TIME_MS", "45000"))
# ====================== CANIFA INTERNAL POSTGRES ======================
CHECKPOINT_POSTGRES_URL: str | None = os.getenv("CHECKPOINT_POSTGRES_URL")
CHECKPOINT_POSTGRES_SCHEMA: str = os.getenv("CHECKPOINT_POSTGRES_SCHEMA", "canifa_chat")
......@@ -163,4 +177,20 @@ MEMO_DB_PATH: str = os.getenv(
os.path.join(os.path.dirname(__file__), "db", "memos.db"),
)
# ====================== CORS CONFIGURATION ======================
# CORS origins - comma-separated list, or "*" for all origins
# Default: "*" for development, should be restricted in production
CORS_ORIGINS_STR: str = os.getenv("CORS_ORIGINS", "*")
CORS_ORIGINS: list[str] = (
[origin.strip() for origin in CORS_ORIGINS_STR.split(",") if origin.strip()]
if CORS_ORIGINS_STR != "*"
else ["*"]
)
# ====================== ENCRYPTION CONFIGURATION ======================
# Encryption key for sensitive data (API keys, etc.)
# Generate with: python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
ENCRYPTION_KEY: str | None = os.getenv("ENCRYPTION_KEY")
ENCRYPTION_PASSWORD: str | None = os.getenv("ENCRYPTION_PASSWORD") # Fallback for dev only
backend/docker-compose.yml deleted 100644 → 0
View file @ af456699
services:
# --- Backend Service ---
backend:
build: .
container_name: canifa_backend
env_file: .env
ports:
- "5000:5000"
volumes:
- .:/app
environment:
- PORT=5000
restart: unless-stopped
deploy:
resources:
limits:
memory: 8g
logging:
driver: "json-file"
options:
tag: "{{.Name}}"
backend/entrypoint.sh
View file @ 1732c42d
#!/bin/bash
NUM_CORES=$(nproc)
WORKERS=$((2 * NUM_CORES + 1))
set -e
echo "🔧 [STARTUP] CPU cores: $NUM_CORES"
echo "🔧 [STARTUP] Gunicorn workers: $WORKERS"
echo "🚀 Starting CuCu Note Backend..."
# Wait for MongoDB to be ready
if [ -n "$MONGODB_URI" ]; then
echo "⏳ Waiting for MongoDB..."
until python -c "import motor.motor_asyncio; import asyncio; asyncio.run(motor.motor_asyncio.AsyncIOMotorClient('$MONGODB_URI').admin.command('ping'))" 2>/dev/null; do
echo "MongoDB is unavailable - sleeping"
sleep 2
done
echo "✅ MongoDB is ready!"
fi
# Wait for Redis to be ready (if configured)
if [ -n "$REDIS_HOST" ]; then
echo "⏳ Waiting for Redis..."
until python -c "import redis; r = redis.Redis(host='$REDIS_HOST', port=${REDIS_PORT:-6379}, decode_responses=True); r.ping()" 2>/dev/null; do
echo "Redis is unavailable - sleeping"
sleep 2
done
echo "✅ Redis is ready!"
fi
# Run database migrations/indexes (if needed)
echo "📊 Setting up database indexes..."
python -c "
import asyncio
from common.mongo_client import mongodb_client
async def setup():
await mongodb_client.connect()
print('✅ Database indexes ready')
asyncio.run(setup())
" || echo "⚠️ Could not set up indexes (may already exist)"
# Start the server
echo "🌟 Starting Gunicorn server..."
exec gunicorn \
server:app \
--workers "$WORKERS" \
--workers 4 \
--worker-class uvicorn.workers.UvicornWorker \
--worker-connections 1000 \
--max-requests 1000 \
--max-requests-jitter 100 \
--timeout 30 \
--bind 0.0.0.0:5000 \
--timeout 120 \
--access-logfile - \
--error-logfile - \
--bind 0.0.0.0:5000 \
--log-level info
\ No newline at end of file
--log-level info \
server:app
backend/readme.md
View file @ 1732c42d
......@@ -338,29 +338,54 @@ curl "http://localhost:8000/history/user_12345?limit=20&before_id=150"
## Environment Variables
For detailed documentation on all environment variables, see [ENV_VARIABLES.md](./ENV_VARIABLES.md).
### Quick Setup
1. Copy environment variables template:
```bash
# PostgreSQL
POSTGRES_HOST=localhost
POSTGRES_PORT=5432
POSTGRES_DB=chatbot_db
POSTGRES_USER=postgres
POSTGRES_PASSWORD=your_password
# OpenAI
OPENAI_API_KEY=sk-...
# See ENV_VARIABLES.md for complete list
```
# StarRocks (Vector Database)
STARROCKS_HOST=localhost
STARROCKS_PORT=9030
STARROCKS_USER=root
STARROCKS_PASSWORD=your_password
STARROCKS_DB=chatbot_products
2. Required variables:
```bash
# MongoDB (required)
MONGODB_URI=mongodb://localhost:27017
MONGODB_DB_NAME=cucu_note
# Clerk Authentication (required for production)
CLERK_SECRET_KEY=sk_test_...
CLERK_JWKS_URL=https://your-clerk-instance.clerk.accounts.dev/.well-known/jwks.json
CLERK_ISSUER=https://your-clerk-instance.clerk.accounts.dev
# OpenAI (required for AI features)
OPENAI_API_KEY=sk-...
# Server
PORT=8000
HOST=0.0.0.0
PORT=5000
```
3. Optional but recommended:
```bash
# Redis for caching and rate limiting
REDIS_HOST=localhost
REDIS_PORT=6379
# CORS (restrict in production)
CORS_ORIGINS=http://localhost:3001,https://yourdomain.com
```
### Performance Optimization
The backend includes several performance optimizations:
- **MongoDB Connection Pooling**: Configurable via `MONGODB_MAX_POOL_SIZE`, `MONGODB_MIN_POOL_SIZE`
- **Database Indexes**: Automatically created on startup for common queries
- **Redis Caching**: For response and embedding caching
- **Rate Limiting**: Uses Redis for distributed rate limiting in production
See [ENV_VARIABLES.md](./ENV_VARIABLES.md) for all configuration options.
---
## Testing
......
backend/server.py
View file @ 1732c42d
......@@ -13,7 +13,7 @@ from api.memos import router as memos_router
from common.cache import redis_cache
from common.langfuse_client import get_langfuse_client
from common.middleware import middleware_manager
from config import PORT
from config import PORT, CORS_ORIGINS
# Windows event loop handling
......@@ -48,12 +48,38 @@ app = FastAPI(
@app.on_event("startup")
async def startup_event():
"""Initialize dependencies on startup."""
await redis_cache.initialize()
logger.info("Redis cache initialized for message limit")
# MongoDB initialization
# Initialize Redis (optional - will continue without cache if unavailable)
redis_client = await redis_cache.initialize()
if redis_client:
logger.info("✅ Redis cache initialized for message limit")
else:
logger.info("⚠️ Redis cache unavailable - continuing without cache")
# MongoDB initialization (required)
from common.mongo_client import init_mongodb
await init_mongodb()
logger.info("MongoDB connection initialized")
logger.info("✅ MongoDB connection initialized")
@app.on_event("shutdown")
async def shutdown_event():
"""Cleanup on shutdown."""
try:
# Close Redis connection if exists
redis_client = redis_cache.get_client()
if redis_client:
await redis_client.aclose()
logger.info("Redis connection closed")
except Exception as e:
logger.debug(f"Error closing Redis: {e}")
# Close MongoDB connection
try:
from common.mongo_client import close_mongodb
await close_mongodb()
logger.info("MongoDB connection closed")
except Exception as e:
logger.debug(f"Error closing MongoDB: {e}")
# =============================================================================
......@@ -64,7 +90,7 @@ middleware_manager.setup(
enable_auth=True, # bật/tắt Auth
enable_rate_limit=False, # tắt slowapi business rate limit
enable_cors=True, # bật CORS
cors_origins=["*"], # trong prod nên giới hạn origins
cors_origins=CORS_ORIGINS, # từ environment variable
)
app.include_router(chatbot_router)
......
docker-compose.yml 0 → 100644
View file @ 1732c42d
version: '3.8'
services:
# MongoDB Database
mongodb:
image: mongo:7.0
container_name: cuccu_mongodb
restart: unless-stopped
ports:
- "27017:27017"
volumes:
- mongodb_data:/data/db
- mongodb_config:/data/configdb
environment:
MONGO_INITDB_DATABASE: cucu_note
networks:
- cuccu_network
healthcheck:
test: ["CMD", "mongosh", "--eval", "db.adminCommand('ping')"]
interval: 10s
timeout: 5s
retries: 5
# Redis Cache
redis:
image: redis:7-alpine
container_name: cuccu_redis
restart: unless-stopped
ports:
- "6379:6379"
volumes:
- redis_data:/data
command: redis-server --appendonly yes
networks:
- cuccu_network
healthcheck:
test: ["CMD", "redis-cli", "ping"]
interval: 10s
timeout: 5s
retries: 5
# Backend API
backend:
build:
context: ./backend
dockerfile: Dockerfile.prod
container_name: cuccu_backend
restart: unless-stopped
ports:
- "5000:5000"
env_file:
- ./backend/.env
volumes:
- ./backend:/app
- backend_data:/app/data
depends_on:
mongodb:
condition: service_healthy
redis:
condition: service_healthy
networks:
- cuccu_network
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:5000/docs"]
interval: 30s
timeout: 10s
retries: 3
start_period: 40s
deploy:
resources:
limits:
memory: 2G
cpus: '1.0'
reservations:
memory: 512M
cpus: '0.5'
# Frontend
frontend:
build:
context: ./frontend
dockerfile: Dockerfile.prod
container_name: cuccu_frontend
restart: unless-stopped
ports:
- "3001:80"
env_file:
- ./frontend/.env
depends_on:
- backend
networks:
- cuccu_network
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:80"]
interval: 30s
timeout: 10s
retries: 3
volumes:
mongodb_data:
driver: local
mongodb_config:
driver: local
redis_data:
driver: local
backend_data:
driver: local
networks:
cuccu_network:
driver: bridge
extension/.gitignore 0 → 100644
View file @ 1732c42d
node_modules/
dist/
*.log
.DS_Store
extension/FACEBOOK_FIX.md 0 → 100644
View file @ 1732c42d
# Fix Extension cho Facebook
## Vấn đề
Facebook có **CSP (Content Security Policy) nghiêm ngặt** và có thể block một số DOM APIs, khiến sidebar không hiện khi bôi đen text.
## Đã fix
1. ✅ **Error handling**: Thêm try-catch cho tất cả DOM operations
2. ✅ **Fallback append**: Nếu `document.body.appendChild()` fail → thử `document.documentElement.appendChild()`
3. ✅ **Console logging**: Log errors để debug
4. ✅ **Safe remove**: Check cả `document.body` và `document.documentElement` khi remove
## Test lại
1. **Reload extension** trong `chrome://extensions`
2. **Mở Facebook**: https://www.facebook.com
3. **Bôi đen text** trên một post
4. **Check Console** (F12) xem có errors không
5. **Sidebar sẽ hiện** nếu không có CSP block
## Nếu vẫn không hiện
Facebook có thể:
- Block `innerHTML` với user content (XSS protection)
- Block `appendChild` vào một số elements
- Có CSP policy block inline styles
**Giải pháp tiếp theo**:
- Dùng `textContent` thay vì `innerHTML`
- Dùng `createElement` + `appendChild` thay vì `innerHTML`
- Inject CSS vào `<head>` thay vì inline styles
## Debug
Mở Console (F12) và check:
- `[CuCu Note] Error in handleTextSelection:` - Lỗi khi detect selection
- `[CuCu Note] Error showing sidebar:` - Lỗi khi tạo sidebar
- `[CuCu Note] Error appending sidebar:` - Lỗi khi append vào DOM
extension/ICONS_README.md 0 → 100644
View file @ 1732c42d
# Icons cho Extension
Extension cần 3 file icons:
- `icons/icon16.png` (16x16 pixels)
- `icons/icon48.png` (48x48 pixels)
- `icons/icon128.png` (128x128 pixels)
## Cách tạo icons đơn giản:
1. **Dùng online tool**: https://www.favicon-generator.org/
2. **Hoặc tạo bằng code**: Tôi có thể tạo script generate icons đơn giản
3. **Hoặc dùng icon có sẵn**: Copy từ frontend/public nếu có
## Tạm thời:
Bạn có thể tạo icons đơn giản bằng cách:
- Vẽ icon đơn giản (ví dụ: chữ "CN" hoặc icon note)
- Export thành 3 sizes: 16x16, 48x48, 128x128
- Save vào folder `icons/`
Hoặc để tôi tạo script generate icons tự động?
extension/QUICK_START.md 0 → 100644
View file @ 1732c42d
# Quick Start - Tạo Icons & Fix Lỗi
## 🔧 Fix lỗi npm install
Lỗi: `@types/chrome@^0.0.0` không tồn tại
**Đã fix**: Đổi version thành `@types/chrome@^0.0.268` trong `package.json`
Bây giờ chạy lại:
```bash
cd extension
npm install
```
---
## 🎨 Tạo Icons (3 cách)
### Cách 1: Dùng HTML Generator (Dễ nhất) ⭐
1. Mở file `scripts/create-icons-simple.html` trong browser
2. Click button "Generate Icons"
3. Icons sẽ tự động download
4. Copy 3 file PNG vào folder `extension/icons/`
### Cách 2: Dùng Python Script
```bash
# Install Pillow
pip install Pillow
# Run script
cd extension
python scripts/create-icons-simple.py
```
### Cách 3: Tạo thủ công
1. Tạo 3 file PNG:
- `icon16.png` (16x16 pixels)
- `icon48.png` (48x48 pixels)
- `icon128.png` (128x128 pixels)
2. Design đơn giản: Background màu #4F46E5, chữ "CN" màu trắng
3. Save vào `extension/icons/`
---
## ✅ Sau khi có icons
1. **Install dependencies**:
```bash
cd extension
npm install
```
2. **Build extension**:
```bash
npm run build
```
3. **Load vào Chrome**:
- Mở `chrome://extensions`
- Bật "Developer mode"
- Click "Load unpacked"
- Chọn folder `extension/dist`
4. **Test**:
- Mở một trang web
- Bôi đen text
- Popup "💾 Save to CuCu Note" sẽ hiện!
---
## 🐛 Nếu vẫn lỗi
### Lỗi build:
- Check `tsconfig.json` có đúng không
- Check `vite.config.ts` có đúng không
- Xem console khi build: `npm run build`
### Extension không load:
- Check `manifest.json` có đúng format không
- Check icons có đủ 3 file không
- Xem errors trong `chrome://extensions` → "Errors"
### Popup không hiện:
- Check Console trong DevTools (F12)
- Check content script có inject không
- Check permissions trong manifest.json
extension/README.md 0 → 100644
View file @ 1732c42d
# CuCu Note Browser Extension
Browser extension để lưu note nhanh từ web - chỉ cần bôi đen text và save!
## 🚀 Setup
```bash
# Install dependencies
npm install
# Build extension
npm run build
# Development mode (watch)
npm run dev
```
## 📦 Load vào Chrome
1. Build extension: `npm run build`
2. Mở Chrome: `chrome://extensions`
3. Bật "Developer mode"
4. Click "Load unpacked"
5. Chọn folder `extension/dist`
## 🎯 Cách dùng
1. **Bôi đen text** trên web
2. Extension hiện popup "💾 Save to CuCu Note"
3. Click popup → Form hiện
4. Điền tag (ví dụ: "important, article")
5. Click "Save" → Done!
## 🏗️ Structure
```
extension/
├── src/
│ ├── content/ # Content script (detect text selection)
│ ├── popup/ # Popup UI (React)
│ ├── components/ # React components
│ ├── background/ # Service worker
│ └── shared/ # Shared code (API client)
├── manifest.json # Extension config
└── vite.config.ts # Build config
```
## ⚙️ Config
### Backend URL
Sửa trong `src/shared/api-client.ts`:
```typescript
const API_BASE = 'http://localhost:5000/api/v1'; // Thay đổi URL backend
```
### Auth Token
Extension cần auth token để gọi API. Có thể:
- Dùng Clerk (như frontend)
- Hoặc API key (đơn giản hơn)
## 📝 TODO
- [ ] Setup auth (Clerk hoặc API key)
- [ ] Config backend URL từ settings page
- [ ] Add icons (16x16, 48x48, 128x128)
- [ ] Error handling tốt hơn
- [ ] Success toast notification
extension/RELOAD_INSTRUCTIONS.md 0 → 100644
View file @ 1732c42d
# 🔄 Cách Reload Extension sau khi Build
## ⚠️ Lưu ý quan trọng
**Chrome không tự động reload extension khi bạn build lại!**
Sau khi chạy `npm run build`, bạn cần **reload extension thủ công** trong Chrome.
---
## 📋 Các bước reload
### Bước 1: Build extension
```bash
cd extension
npm run build
```
### Bước 2: Reload extension trong Chrome
1. Mở `chrome://extensions`
2. Tìm extension **"CuCu Note"**
3. Click nút **🔄 Reload** trên card extension
- Hoặc toggle OFF rồi ON lại
### Bước 3: Test lại
- Mở một trang web
- Bôi đen text → nhấn Space
- Form sẽ hiện với code mới
---
## 🚀 Tips để dev nhanh hơn
### Option 1: Dùng Extension Reloader
Cài extension này để tự động reload:
- **Extension Reloader**: https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid
Sau khi cài:
1. Build: `npm run build`
2. Extension tự động reload!
### Option 2: Build watch mode
```bash
npm run build:watch
```
Sau đó mỗi lần save file → tự động build → bạn chỉ cần reload extension trong Chrome.
---
## 💡 Workflow đề xuất
1. **Lần đầu**: Build + Load unpacked
2. **Sau đó mỗi lần code thay đổi**:
- Save file
- Build (hoặc dùng watch mode)
- Reload extension trong Chrome (hoặc dùng Extension Reloader)
- Test ngay
---
## ❓ Tại sao không tự động reload?
Chrome extension được load từ folder `dist/` như một **snapshot** tại thời điểm load. Khi bạn build lại, Chrome không biết files đã thay đổi, nên cần reload thủ công.
extension/SETUP.md 0 → 100644
View file @ 1732c42d
# Setup Extension - Hướng dẫn từng bước
## 📋 Bước 1: Install Dependencies
```bash
cd extension
npm install
```
## 📋 Bước 2: Tạo Icons (Tạm thời)
Extension cần icons. Bạn có thể:
1. Tạo icons đơn giản (16x16, 48x48, 128x128)
2. Hoặc dùng placeholder icons từ internet
3. Hoặc để tôi tạo script generate icons đơn giản
**Tạm thời**: Tạo file placeholder trong `icons/`:
- `icon16.png`
- `icon48.png`
- `icon128.png`
## 📋 Bước 3: Build Extension
```bash
npm run build
```
Sau khi build, folder `dist/` sẽ được tạo với các file đã compile.
## 📋 Bước 4: Load vào Chrome
1. Mở Chrome: `chrome://extensions`
2. Bật **"Developer mode"** (góc trên bên phải)
3. Click **"Load unpacked"**
4. Chọn folder: `E:\opennotion\extension\dist`
## 📋 Bước 5: Test Extension
1. Mở một trang web bất kỳ (ví dụ: https://example.com)
2. **Bôi đen** một đoạn text
3. Popup "💾 Save to CuCu Note" sẽ hiện
4. Click popup → Form hiện
5. Điền tag → Save
## ⚠️ Lưu ý
### Backend URL
Hiện tại extension gọi API tại: `http://localhost:5000/api/v1`
Nếu backend chạy ở port khác, sửa trong:
- `src/shared/api-client.ts` → dòng `const API_BASE = ...`
### Auth Token
Extension cần auth token để gọi API. Hiện tại chưa implement auth.
**Tạm thời**: Backend có thể cho phép anonymous hoặc bạn cần:
1. Setup Clerk auth trong extension
2. Hoặc dùng API key
## 🐛 Troubleshooting
### Extension không load được
- Check `manifest.json` có đúng format không
- Check console trong `chrome://extensions` → "Errors"
### Popup không hiện khi bôi đen text
- Check Console trong DevTools (F12)
- Check content script có inject vào page không
### API call fail
- Check backend có chạy không: `http://localhost:5000`
- Check CORS settings trong backend
- Check auth token trong `chrome.storage.local`
## 📝 Next Steps
1. ✅ Setup icons
2. ✅ Test với backend thật
3. ✅ Setup auth (Clerk hoặc API key)
4. ✅ Config backend URL từ settings
5. ✅ Polish UI/UX
extension/icons/icon128.svg 0 → 100644
View file @ 1732c42d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
<rect width="128" height="128" rx="25.6" fill="#4F46E5"/>
<text x="50%" y="50%" font-family="Arial, sans-serif" font-size="64" font-weight="bold" fill="white" text-anchor="middle" dominant-baseline="central">CN</text>
</svg>
extension/icons/icon16.svg 0 → 100644
View file @ 1732c42d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" rx="3.2" fill="#4F46E5"/>
<text x="50%" y="50%" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="white" text-anchor="middle" dominant-baseline="central">CN</text>
</svg>
extension/icons/icon48.svg 0 → 100644
View file @ 1732c42d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="9.6" fill="#4F46E5"/>
<text x="50%" y="50%" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white" text-anchor="middle" dominant-baseline="central">CN</text>
</svg>
extension/manifest.json 0 → 100644
View file @ 1732c42d
{
"manifest_version": 3,
"name": "CuCu Note",
"version": "1.0.0",
"description": "Quick note-taking extension - Highlight text and save to CuCu Note",
"permissions": [
"activeTab",
"storage",
"scripting",
"tabs"
],
"host_permissions": [
"http://localhost:5000/*",
"http://*/*",
"https://*/*"
],
"background": {
"service_worker": "src/background/service-worker.ts",
"type": "module"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["src/content/content-script.ts"],
"run_at": "document_idle",
"all_frames": false
}
],
"action": {
"default_popup": "src/popup/popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
extension/package-lock.json 0 → 100644
View file @ 1732c42d
This diff is collapsed.
extension/package.json 0 → 100644
View file @ 1732c42d
{
"name": "cucu-note-extension",
"version": "1.0.0",
"description": "Browser extension for CuCu Note - Quick note-taking from web",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@crxjs/vite-plugin": "^2.0.0",
"@types/chrome": "^0.0.268",
"@types/react": "^18.3.27",
"@types/react-dom": "^18.3.7",
"@vitejs/plugin-react": "^4.7.0",
"typescript": "^5.9.3",
"vite": "^7.2.4"
}
}
extension/scripts/convert-icons.js 0 → 100644
View file @ 1732c42d
/**
* Convert SVG icons to PNG using sharp
* Run: npm install -D sharp (nếu chưa có)
*/
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
const iconsDir = path.join(__dirname, '..', 'icons');
const sizes = [16, 48, 128];
async function convertIcons() {
console.log('🔄 Converting SVG to PNG...');
for (const size of sizes) {
const svgPath = path.join(iconsDir, `icon${size}.svg`);
const pngPath = path.join(iconsDir, `icon${size}.png`);
if (!fs.existsSync(svgPath)) {
console.log(`⚠️ SVG not found: icon${size}.svg`);
continue;
}
try {
await sharp(svgPath)
.resize(size, size)
.png()
.toFile(pngPath);
console.log(`✅ Converted: icon${size}.png`);
} catch (error) {
console.error(`❌ Error converting icon${size}:`, error.message);
}
}
console.log('\n✅ Done! Icons ready in icons/ folder');
}
convertIcons().catch(console.error);
extension/scripts/create-icons-now.js 0 → 100644
View file @ 1732c42d
/**
* Tạo icons PNG đơn giản ngay lập tức
* Sử dụng canvas API của Node.js (cần cài canvas package)
* Hoặc tạo SVG và convert
*/
const fs = require('fs');
const path = require('path');
const iconsDir = path.join(__dirname, '..', 'icons');
const sizes = [16, 48, 128];
// Tạo folder nếu chưa có
if (!fs.existsSync(iconsDir)) {
fs.mkdirSync(iconsDir, { recursive: true });
}
// Tạo SVG icons (sẽ convert sau)
console.log('🎨 Creating SVG icons...');
sizes.forEach(size => {
const svg = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
<rect width="${size}" height="${size}" rx="${size * 0.2}" fill="#4F46E5"/>
<text x="50%" y="50%" font-family="Arial, sans-serif" font-size="${size * 0.5}" font-weight="bold" fill="white" text-anchor="middle" dominant-baseline="central">CN</text>
</svg>`;
const svgPath = path.join(iconsDir, `icon${size}.svg`);
fs.writeFileSync(svgPath, svg);
console.log(`✅ Created: icon${size}.svg`);
});
console.log('\n⚠️ Note: Created SVG files. For PNG:');
console.log(' 1. Open create-simple-icons.html in browser');
console.log(' 2. Or install sharp: npm install -D sharp');
console.log(' 3. Then run: node scripts/convert-icons.js');
extension/scripts/create-icons-powershell.ps1 0 → 100644
View file @ 1732c42d
# PowerShell script to create PNG icons
# Run: powershell -ExecutionPolicy Bypass -File scripts/create-icons-powershell.ps1
$iconsDir = Join-Path $PSScriptRoot "..\icons"
if (-not (Test-Path $iconsDir)) {
New-Item -ItemType Directory -Path $iconsDir -Force | Out-Null
}
Add-Type -AssemblyName System.Drawing
$sizes = @(16, 48, 128)
foreach ($size in $sizes) {
$bitmap = New-Object System.Drawing.Bitmap($size, $size)
$graphics = [System.Drawing.Graphics]::FromImage($bitmap)
$graphics.SmoothingMode = [System.Drawing.Drawing2D.SmoothingMode]::AntiAlias
# Background color #4F46E5
$graphics.Clear([System.Drawing.Color]::FromArgb(79, 70, 229))
# Draw text "CN"
$brush = New-Object System.Drawing.SolidBrush([System.Drawing.Color]::White)
$fontSize = [Math]::Max(8, [int]($size * 0.5))
$font = New-Object System.Drawing.Font("Arial", $fontSize, [System.Drawing.FontStyle]::Bold)
$text = "CN"
$format = New-Object System.Drawing.StringFormat
$format.Alignment = [System.Drawing.StringAlignment]::Center
$format.LineAlignment = [System.Drawing.StringAlignment]::Center
$rect = New-Object System.Drawing.RectangleF(0, 0, $size, $size)
$graphics.DrawString($text, $font, $brush, $rect, $format)
$outputPath = Join-Path $iconsDir "icon$size.png"
$bitmap.Save($outputPath, [System.Drawing.Imaging.ImageFormat]::Png)
$graphics.Dispose()
$bitmap.Dispose()
Write-Host "✅ Created: $outputPath"
}
Write-Host "`n✅ All icons created successfully!"
extension/scripts/create-icons-simple.py 0 → 100644
View file @ 1732c42d
"""
Simple script to create PNG icons using PIL/Pillow
Run: pip install Pillow
Then: python scripts/create-icons-simple.py
"""
try:
from PIL import Image, ImageDraw, ImageFont
import os
except ImportError:
print("❌ Pillow not installed. Install with: pip install Pillow")
exit(1)
# Create icons directory
icons_dir = os.path.join(os.path.dirname(__file__), '..', 'icons')
os.makedirs(icons_dir, exist_ok=True)
sizes = [16, 48, 128]
print("🎨 Generating icons...")
for size in sizes:
# Create image with rounded rectangle background
img = Image.new('RGB', (size, size), color='#4F46E5')
draw = ImageDraw.Draw(img)
# Draw rounded rectangle
radius = int(size * 0.2)
draw.rounded_rectangle([(0, 0), (size, size)], radius=radius, fill='#4F46E5')
# Draw text "CN"
try:
# Try to use a nice font
font_size = int(size * 0.5)
font = ImageFont.truetype("arial.ttf", font_size)
except:
# Fallback to default font
font = ImageFont.load_default()
text = "CN"
bbox = draw.textbbox((0, 0), text, font=font)
text_width = bbox[2] - bbox[0]
text_height = bbox[3] - bbox[1]
# Center text
x = (size - text_width) // 2
y = (size - text_height) // 2
draw.text((x, y), text, fill='white', font=font)
# Save
output_path = os.path.join(icons_dir, f'icon{size}.png')
img.save(output_path, 'PNG')
print(f"✅ Created: icon{size}.png")
print(f"\n✅ Done! Icons saved to: {icons_dir}")
extension/scripts/create-simple-icons.html 0 → 100644
View file @ 1732c42d
<!DOCTYPE html>
<html>
<head>
<title>Create CuCu Note Icons</title>
<style>
body {
font-family: system-ui;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.icon-preview {
display: inline-block;
margin: 10px;
text-align: center;
}
canvas {
border: 1px solid #ddd;
margin: 5px;
}
button {
padding: 10px 20px;
background: #4F46E5;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<h1>CuCu Note Extension Icons Generator</h1>
<p>Click button để generate và download icons:</p>
<div id="previews"></div>
<button onclick="generateIcons()">Generate Icons</button>
<script>
function generateIcons() {
const sizes = [16, 48, 128];
const previews = document.getElementById('previews');
previews.innerHTML = '';
sizes.forEach(size => {
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
// Background
ctx.fillStyle = '#4F46E5';
const radius = size * 0.2;
ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(size - radius, 0);
ctx.quadraticCurveTo(size, 0, size, radius);
ctx.lineTo(size, size - radius);
ctx.quadraticCurveTo(size, size, size - radius, size);
ctx.lineTo(radius, size);
ctx.quadraticCurveTo(0, size, 0, size - radius);
ctx.lineTo(0, radius);
ctx.quadraticCurveTo(0, 0, radius, 0);
ctx.closePath();
ctx.fill();
// Text "CN"
ctx.fillStyle = 'white';
ctx.font = `bold ${size * 0.5}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('CN', size / 2, size / 2);
// Preview
const div = document.createElement('div');
div.className = 'icon-preview';
div.innerHTML = `
<canvas width="${size}" height="${size}"></canvas>
<div>icon${size}.png</div>
`;
const previewCanvas = div.querySelector('canvas');
previewCanvas.getContext('2d').drawImage(canvas, 0, 0);
previews.appendChild(div);
// Download
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `icon${size}.png`;
a.click();
URL.revokeObjectURL(url);
});
});
alert('✅ Icons đã được download! Copy vào folder extension/icons/');
}
</script>
</body>
</html>
extension/scripts/generate-icons.js 0 → 100644
View file @ 1732c42d
/**
* Script để generate icons tự động cho extension
* Tạo icons đơn giản với chữ "CN" (CuCu Note)
*/
const fs = require('fs');
const path = require('path');
// Tạo folder icons nếu chưa có
const iconsDir = path.join(__dirname, '..', 'icons');
if (!fs.existsSync(iconsDir)) {
fs.mkdirSync(iconsDir, { recursive: true });
}
// SVG template cho icon (chữ CN với background)
const svgTemplate = (size) => `
<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
<rect width="${size}" height="${size}" rx="${size * 0.2}" fill="#4F46E5"/>
<text
x="50%"
y="50%"
font-family="Arial, sans-serif"
font-size="${size * 0.5}"
font-weight="bold"
fill="white"
text-anchor="middle"
dominant-baseline="central"
>CN</text>
</svg>
`;
// Sizes cần tạo
const sizes = [16, 48, 128];
console.log('🎨 Generating icons...');
sizes.forEach(size => {
const svg = svgTemplate(size);
const filePath = path.join(iconsDir, `icon${size}.png`);
// Note: Node.js không có built-in SVG to PNG converter
// Tạm thời tạo SVG file, user có thể convert sau
// Hoặc dùng package như 'sharp' hoặc 'jimp'
const svgPath = path.join(iconsDir, `icon${size}.svg`);
fs.writeFileSync(svgPath, svg);
console.log(`✅ Created: icon${size}.svg`);
});
console.log('\n⚠️ Note: Created SVG files. To convert to PNG:');
console.log(' 1. Open SVG files in browser/image editor');
console.log(' 2. Export as PNG');
console.log(' 3. Or install sharp: npm install -D sharp');
console.log(' 4. Then run: node scripts/convert-icons.js');
extension/scripts/generate-png-icons.html 0 → 100644
View file @ 1732c42d
<!DOCTYPE html>
<html>
<head>
<title>CuCu Note Icons Generator</title>
<style>
body {
font-family: system-ui;
padding: 40px;
text-align: center;
background: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
canvas {
border: 1px solid #ddd;
margin: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}
button {
padding: 12px 24px;
background: #4F46E5;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
margin: 10px;
}
button:hover {
background: #4338CA;
}
.preview {
margin: 20px 0;
}
.instructions {
background: #F0F9FF;
padding: 15px;
border-radius: 6px;
margin: 20px 0;
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<h1>🎨 CuCu Note Icons Generator</h1>
<p>Click button để generate và download 3 icons PNG:</p>
<div class="instructions">
<strong>Hướng dẫn:</strong>
<ol>
<li>Click button "Generate & Download Icons"</li>
<li>3 file PNG sẽ tự động download</li>
<li>Copy 3 file vào folder: <code>extension/icons/</code></li>
<li>Chạy lại: <code>npm run build</code></li>
</ol>
</div>
<div id="previews" class="preview"></div>
<button onclick="generateIcons()">🚀 Generate & Download Icons</button>
<div id="status"></div>
</div>
<script>
function generateIcons() {
const sizes = [16, 48, 128];
const previews = document.getElementById('previews');
const status = document.getElementById('status');
previews.innerHTML = '';
status.innerHTML = '<p style="color: #059669;">⏳ Đang generate...</p>';
let downloaded = 0;
sizes.forEach(size => {
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext('2d');
// Background với rounded corners
ctx.fillStyle = '#4F46E5';
const radius = size * 0.2;
// Draw rounded rectangle
ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(size - radius, 0);
ctx.quadraticCurveTo(size, 0, size, radius);
ctx.lineTo(size, size - radius);
ctx.quadraticCurveTo(size, size, size - radius, size);
ctx.lineTo(radius, size);
ctx.quadraticCurveTo(0, size, 0, size - radius);
ctx.lineTo(0, radius);
ctx.quadraticCurveTo(0, 0, radius, 0);
ctx.closePath();
ctx.fill();
// Text "CN"
ctx.fillStyle = 'white';
ctx.font = `bold ${Math.floor(size * 0.5)}px Arial, sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('CN', size / 2, size / 2);
// Preview
const div = document.createElement('div');
div.style.margin = '10px 0';
div.innerHTML = `
<canvas width="${size * 3}" height="${size * 3}" style="image-rendering: pixelated;"></canvas>
<div style="margin-top: 5px; font-weight: 500;">icon${size}.png</div>
`;
const previewCanvas = div.querySelector('canvas');
const previewCtx = previewCanvas.getContext('2d');
previewCtx.imageSmoothingEnabled = false;
previewCtx.drawImage(canvas, 0, 0, size * 3, size * 3);
previews.appendChild(div);
// Download
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `icon${size}.png`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
downloaded++;
if (downloaded === sizes.length) {
status.innerHTML = `
<p style="color: #059669; font-weight: 500;">
✅ Đã download ${downloaded} icons!<br>
Copy vào folder: <code>extension/icons/</code>
</p>
`;
}
}, 'image/png');
});
}
// Auto-generate khi load page
window.addEventListener('load', () => {
setTimeout(generateIcons, 500);
});
</script>
</body>
</html>
extension/scripts/reload-extension.md 0 → 100644
View file @ 1732c42d
# Cách Reload Extension sau khi Build
## Cách 1: Reload thủ công (Hiện tại)
1. Build extension: `npm run build`
2. Mở `chrome://extensions`
3. Tìm extension "CuCu Note"
4. Click nút **Reload** (🔄) trên card extension
## Cách 2: Auto-reload với Extension Reloader
Cài extension này để tự động reload khi files thay đổi:
- Extension Reloader: https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid
Sau đó:
1. Build extension: `npm run build`
2. Extension sẽ tự động reload
## Cách 3: Script tự động reload (Advanced)
Có thể tạo script để tự động reload extension qua Chrome DevTools Protocol, nhưng phức tạp hơn.
---
**Lưu ý**: Chrome không tự động detect khi files trong `dist/` thay đổi, nên cần reload thủ công hoặc dùng extension reloader.
extension/src/background/service-worker.ts 0 → 100644
View file @ 1732c42d
/**
* Background Service Worker
* Nhiệm vụ: Handle messages từ content script và gọi API
*/
import { createMemo } from '../shared/api-client';
chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
if (message.type === 'SHOW_NOTE_FORM') {
// Mở popup với note form
chrome.action.openPopup();
// Lưu data vào storage để popup có thể lấy
chrome.storage.local.set({
pendingNote: message.data,
});
sendResponse({ success: true });
} else if (message.type === 'SAVE_NOTE') {
// Auto save note ngay lập tức
const { text, url, title } = message.data;
console.log('[CuCu Note] 📝 Saving note:', { text: text.substring(0, 50) + '...', url, title });
// Parse tags từ URL
const domain = new URL(url).hostname.replace('www.', '');
const tagList = [domain, 'web-highlight'];
// Add source info vào content
const contentWithSource = `${text}\n\n---\nSource: [${title}](${url})`;
// Gọi API để save (có gửi kèm Clerk token trong Authorization header)
createMemo({
content: contentWithSource,
tags: tagList,
visibility: 'PRIVATE',
})
.then((memo) => {
console.log('[CuCu Note] ✅ Note saved with ID:', memo.id);
sendResponse({ success: true, memo });
})
.catch((error) => {
console.error('[CuCu Note] ❌ Error saving note:', error);
sendResponse({ success: false, error: error.message });
});
return true; // Keep channel open for async
}
return true; // Keep channel open for async response
});
extension/src/components/NoteForm.tsx 0 → 100644
View file @ 1732c42d
/**
* Note Form Component
* Form để user điền tag và edit note
*/
import { useState } from 'react';
import { createMemo } from '../shared/api-client';
interface NoteFormProps {
initialText: string;
initialUrl: string;
initialTitle: string;
onSave?: () => void;
onCancel?: () => void;
}
export function NoteForm({
initialText,
initialUrl,
initialTitle,
onSave,
onCancel,
}: NoteFormProps) {
const [text, setText] = useState(initialText);
const [tags, setTags] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleSave = async () => {
if (!text.trim()) {
setError('Note không được để trống');
return;
}
setLoading(true);
setError(null);
try {
// Parse tags (comma-separated)
const tagList = tags
.split(',')
.map((t) => t.trim())
.filter((t) => t.length > 0);
// Add source info vào content
const contentWithSource = `${text}\n\n---\nSource: [${initialTitle}](${initialUrl})`;
await createMemo({
content: contentWithSource,
tags: tagList,
});
// Success
if (onSave) {
onSave();
} else {
// Default: show success message
alert('✅ Đã lưu vào CuCu Note!');
window.close();
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Lỗi khi lưu note');
} finally {
setLoading(false);
}
};
return (
<div className="card">
<h2 style={{ marginTop: 0, marginBottom: '20px', fontSize: '20px', fontWeight: '600' }}>
💾 Save to CuCu Note
</h2>
<div style={{ marginBottom: '20px' }}>
<label className="label">Note:</label>
<textarea
className="textarea"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Nhập note của bạn..."
/>
</div>
<div style={{ marginBottom: '20px' }}>
<label className="label">Tags (phân cách bằng dấu phẩy):</label>
<input
type="text"
className="input"
value={tags}
onChange={(e) => setTags(e.target.value)}
placeholder="important, article, todo"
/>
<div className="label-hint">Ví dụ: important, article, todo</div>
</div>
<div className="source-info">
<div style={{ fontWeight: '500', marginBottom: '4px' }}>Source:</div>
<div style={{ wordBreak: 'break-all', marginBottom: '4px' }}>
<a href={initialUrl} target="_blank" rel="noopener noreferrer">
{initialTitle}
</a>
</div>
<div style={{ fontSize: '11px', opacity: 0.7, wordBreak: 'break-all' }}>
{initialUrl}
</div>
</div>
{error && <div className="error">{error}</div>}
<div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '20px' }}>
<button
className="btn btn-secondary"
onClick={onCancel || (() => window.close())}
disabled={loading}
>
Cancel
</button>
<button
className="btn btn-primary"
onClick={handleSave}
disabled={loading}
>
{loading ? 'Đang lưu...' : 'Save'}
</button>
</div>
</div>
);
}
extension/src/content/content-script.ts 0 → 100644
View file @ 1732c42d
/**
* Content Script - Chạy trên mọi web page
* Nhiệm vụ: Detect text selection → Space key → Auto save → Toast notification
*/
let selectedText = '';
let selectedUrl = '';
let selectedTitle = '';
// Listen khi user bôi đen text
document.addEventListener('mouseup', handleTextSelection);
document.addEventListener('keydown', async (e) => {
// Nếu nhấn Space hoặc Enter sau khi đã bôi đen text → tự động lưu ngay
if ((e.key === ' ' || e.key === 'Enter') && selectedText.length > 0) {
// Chỉ prevent default nếu không phải trong input/textarea
const target = e.target as HTMLElement;
if (!target || (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && !target.isContentEditable)) {
e.preventDefault();
e.stopPropagation();
await handleAutoSave();
return;
}
}
});
document.addEventListener('keyup', handleTextSelection);
function handleTextSelection() {
try {
// Delay một chút để đảm bảo selection đã hoàn tất
setTimeout(() => {
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) {
selectedText = '';
removeQuickHint();
return;
}
const text = selection.toString().trim();
if (text.length === 0) {
selectedText = '';
removeQuickHint();
return;
}
// Lưu text đã chọn + metadata
selectedText = text;
selectedUrl = window.location.href;
selectedTitle = document.title;
// Hiện hint nhỏ để user biết có thể nhấn Space/Enter
showQuickHint();
}, 50);
} catch (error) {
console.error('[CuCu Note] Error in handleTextSelection:', error);
}
}
async function handleAutoSave() {
if (!selectedText) return;
try {
// Show loading toast
showToast('Đang lưu...', 'loading');
// Gửi message đến background để save
chrome.runtime.sendMessage({
type: 'SAVE_NOTE',
data: {
text: selectedText,
url: selectedUrl,
title: selectedTitle,
},
}, (response) => {
if (chrome.runtime.lastError) {
showToast('❌ Lỗi khi lưu note', 'error');
return;
}
if (response?.success) {
showToast('✅ Đã lưu vào CuCu Note!', 'success');
// Clear selection
window.getSelection()?.removeAllRanges();
selectedText = '';
removeQuickHint();
} else {
showToast('❌ Lỗi khi lưu note', 'error');
}
});
} catch (error) {
console.error('[CuCu Note] Error saving:', error);
showToast('❌ Lỗi khi lưu note', 'error');
}
}
function showQuickHint() {
// Hiện hint nhỏ "Nhấn Space để lưu" với gradient đẹp
removeQuickHint();
const hint = document.createElement('div');
hint.id = 'cucu-quick-hint';
hint.textContent = '💡 Nhấn Space hoặc Enter để lưu nhanh';
// Gradient màu đẹp
hint.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 999999;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
animation: cucuSlideUp 0.3s ease-out;
pointer-events: none;
`;
// Inject animation CSS
if (!document.getElementById('cucu-hint-style')) {
const style = document.createElement('style');
style.id = 'cucu-hint-style';
style.textContent = `
@keyframes cucuSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`;
document.head.appendChild(style);
}
try {
document.body.appendChild(hint);
} catch (e) {
document.documentElement.appendChild(hint);
}
// Auto ẩn sau 3 giây
setTimeout(() => {
removeQuickHint();
}, 3000);
}
function removeQuickHint() {
const hint = document.getElementById('cucu-quick-hint');
if (hint) {
try {
hint.remove();
} catch (e) {
// Ignore
}
}
}
function showToast(message: string, type: 'success' | 'error' | 'loading' = 'success') {
// Remove toast cũ nếu có
const oldToast = document.getElementById('cucu-toast');
if (oldToast) {
try {
oldToast.remove();
} catch (e) {
// Ignore
}
}
const toast = document.createElement('div');
toast.id = 'cucu-toast';
toast.textContent = message;
// Màu sắc đẹp theo type (gradient)
const colors = {
success: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
error: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
loading: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
};
toast.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: ${colors[type]};
color: white;
padding: 16px 24px;
border-radius: 12px;
font-size: 15px;
font-weight: 500;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
z-index: 999999;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
animation: cucuToastSlide 0.4s ease-out;
max-width: 350px;
word-wrap: break-word;
`;
// Inject animation CSS
if (!document.getElementById('cucu-toast-style')) {
const style = document.createElement('style');
style.id = 'cucu-toast-style';
style.textContent = `
@keyframes cucuToastSlide {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
`;
try {
document.head.appendChild(style);
} catch (e) {
// Ignore
}
}
try {
document.body.appendChild(toast);
} catch (e) {
try {
document.documentElement.appendChild(toast);
} catch (e2) {
console.error('[CuCu Note] Cannot append toast:', e2);
return;
}
}
// Auto ẩn sau 3 giây (trừ loading)
if (type !== 'loading') {
setTimeout(() => {
if (toast.parentNode) {
toast.style.animation = 'cucuToastSlide 0.3s ease-out reverse';
setTimeout(() => {
try {
toast.remove();
} catch (e) {
// Ignore
}
}, 300);
}
}, 3000);
}
}
extension/src/content/content.css 0 → 100644
View file @ 1732c42d
/* Styles cho floating popup */
#cucu-note-popup {
animation: fadeIn 0.2s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cucu-popup-btn {
background: #4F46E5;
color: white;
border: none;
border-radius: 6px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.cucu-popup-btn:hover {
background: #4338CA;
}
.cucu-popup-btn:active {
background: #3730A3;
}
extension/src/popup/popup.css 0 → 100644
View file @ 1732c42d
/* CuCu Note Extension Popup Styles - Reuse từ frontend */
:root {
--background: oklch(0.9818 0.0054 95.0986);
--foreground: oklch(0.2438 0.0269 95.7226);
--primary: oklch(0.45 0.08 250);
--primary-foreground: oklch(0.9818 0.0054 95.0986);
--muted: oklch(0.9341 0.0153 90.239);
--muted-foreground: oklch(0.5559 0.0075 97.4233);
--border: oklch(0.8847 0.0069 97.3627);
--input: oklch(0.7621 0.0156 98.3528);
--ring: oklch(0.45 0.08 250);
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-sans);
background: var(--background);
color: var(--foreground);
font-size: 14px;
line-height: 1.5;
}
/* Button Styles (từ frontend button.tsx) */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
border-radius: calc(var(--radius) - 2px);
font-size: 14px;
font-weight: 500;
transition: all 150ms;
cursor: pointer;
border: none;
padding: 8px 16px;
}
.btn-primary {
background: var(--primary);
color: var(--primary-foreground);
}
.btn-primary:hover {
opacity: 0.9;
}
.btn-primary:active {
opacity: 0.8;
}
.btn-secondary {
background: transparent;
color: var(--foreground);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--muted);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Input Styles */
.input {
display: flex;
width: 100%;
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--input);
background: var(--background);
padding: 8px 12px;
font-size: 14px;
transition: border-color 150ms;
font-family: inherit;
}
.input:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 2px var(--ring);
}
.input::placeholder {
color: var(--muted-foreground);
}
/* Textarea Styles */
.textarea {
display: flex;
width: 100%;
min-height: 100px;
border-radius: calc(var(--radius) - 2px);
border: 1px solid var(--input);
background: var(--background);
padding: 8px 12px;
font-size: 14px;
transition: border-color 150ms;
font-family: inherit;
resize: vertical;
}
.textarea:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 2px var(--ring);
}
.textarea::placeholder {
color: var(--muted-foreground);
}
/* Label Styles */
.label {
display: block;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
color: var(--foreground);
}
.label-hint {
font-size: 12px;
color: var(--muted-foreground);
margin-top: 4px;
}
/* Card/Container Styles */
.card {
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
}
/* Error Message */
.error {
padding: 12px;
margin-bottom: 16px;
background: oklch(0.35 0.02 250 / 0.1);
color: oklch(0.35 0.02 250);
border-radius: calc(var(--radius) - 2px);
font-size: 14px;
}
/* Source Info */
.source-info {
font-size: 12px;
color: var(--muted-foreground);
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.source-info a {
color: var(--primary);
text-decoration: none;
}
.source-info a:hover {
text-decoration: underline;
}
extension/src/popup/popup.html 0 → 100644
View file @ 1732c42d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CuCu Note</title>
<link rel="stylesheet" href="./popup.css">
<style>
body {
margin: 0;
padding: 0;
width: 500px;
min-height: 400px;
}
</style>
</head>
<body>
<div id="popup-root"></div>
<script type="module" src="./popup.tsx"></script>
</body>
</html>
extension/src/popup/popup.tsx 0 → 100644
View file @ 1732c42d
/**
* Popup Component - Hiện khi click icon extension
*/
import { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { NoteForm } from '../components/NoteForm';
interface PendingNote {
text: string;
url: string;
title: string;
}
function Popup() {
const [pendingNote, setPendingNote] = useState<PendingNote | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// Lấy pending note từ storage (nếu có)
chrome.storage.local.get(['pendingNote'], async (result) => {
if (result.pendingNote) {
const note = result.pendingNote;
setPendingNote(note);
// Auto save ngay khi popup mở (nếu là từ Space key)
try {
const { createMemo } = await import('../shared/api-client');
// Parse tags từ URL hoặc domain
const domain = new URL(note.url).hostname.replace('www.', '');
const tagList = [domain, 'web-highlight'];
// Add source info vào content
const contentWithSource = `${note.text}\n\n---\nSource: [${note.title}](${note.url})`;
await createMemo({
content: contentWithSource,
tags: tagList,
});
// Success - close popup
chrome.storage.local.remove(['pendingNote']);
window.close();
} catch (error) {
console.error('Error auto-saving:', error);
// Nếu lỗi, hiện form để user save thủ công
setLoading(false);
}
} else {
setLoading(false);
}
});
}, []);
if (loading) {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<div>Loading...</div>
</div>
);
}
if (pendingNote) {
// Hiện form với data từ content script
return (
<NoteForm
initialText={pendingNote.text}
initialUrl={pendingNote.url}
initialTitle={pendingNote.title}
onSave={() => {
// Success - có thể show message hoặc close
window.close();
}}
onCancel={() => {
window.close();
}}
/>
);
}
// Default: Quick note form (không có text từ selection)
return (
<div className="card">
<h2 style={{ marginTop: 0, marginBottom: '12px', fontSize: '20px', fontWeight: '600' }}>
📝 CuCu Note
</h2>
<p style={{ color: 'var(--muted-foreground)', fontSize: '14px', marginBottom: '20px' }}>
Bôi đen text trên web → nhấn Space → tự động lưu note!
</p>
<NoteForm
initialText=""
initialUrl={typeof window !== 'undefined' ? window.location.href : ''}
initialTitle={typeof document !== 'undefined' ? document.title : 'CuCu Note'}
onSave={() => window.close()}
onCancel={() => window.close()}
/>
</div>
);
}
// Render
const container = document.getElementById('popup-root');
if (container) {
const root = createRoot(container);
root.render(<Popup />);
}
extension/src/shared/api-client.ts 0 → 100644
View file @ 1732c42d
/**
* API Client - Gọi backend CuCu Note
* Reuse logic từ frontend nếu có thể
*/
// Default API base URL - can be overridden via chrome.storage
// In production, this should be set via extension settings or build-time config
const DEFAULT_API_BASE_URL = 'http://localhost:5000';
// Lấy API base từ storage hoặc dùng default
async function getApiBase(): Promise<string> {
const result = await chrome.storage.local.get(['apiBaseUrl']);
const baseUrl = result.apiBaseUrl || DEFAULT_API_BASE_URL;
return `${baseUrl}/api/v1`;
}
// Export để có thể set từ popup/settings
export async function setApiBaseUrl(url: string): Promise<void> {
await chrome.storage.local.set({ apiBaseUrl: url });
}
export interface CreateMemoRequest {
content: string;
tags?: string[];
visibility?: string;
}
export interface MemoResponse {
id: string;
content: string;
tags: string[];
created_at: string;
}
export async function createMemo(data: CreateMemoRequest): Promise<MemoResponse> {
const token = await getAuthToken();
const apiBase = await getApiBase();
// Debug: Log token status (không log full token vì security)
if (token) {
console.log('[CuCu Note] ✅ Auth token found, length:', token.length);
} else {
console.warn('[CuCu Note] ⚠️ No auth token found! Request will be unauthenticated.');
}
const headers: Record<string, string> = {
'Content-Type': 'application/json',
};
// Gửi Clerk token trong Authorization header (format: Bearer <token>)
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
const response = await fetch(`${apiBase}/memos`, {
method: 'POST',
headers,
body: JSON.stringify({
content: data.content,
tags: data.tags || [],
visibility: data.visibility || 'PRIVATE',
}),
});
if (!response.ok) {
const error = await response.text();
console.error('[CuCu Note] ❌ API Error:', response.status, error);
throw new Error(`Failed to create memo: ${error}`);
}
const result = await response.json();
console.log('[CuCu Note] ✅ Memo saved successfully:', result.id);
return result;
}
async function getAuthToken(): Promise<string | null> {
// Lấy Clerk session token từ storage
// Frontend có thể lưu token vào chrome.storage.local khi user login
const result = await chrome.storage.local.get(['clerkSessionToken', 'authToken']);
// Ưu tiên Clerk token
if (result.clerkSessionToken) {
return result.clerkSessionToken;
}
// Fallback về authToken cũ
return result.authToken || null;
}
/**
* Lấy Clerk token từ frontend page (nếu đang ở trang frontend)
* Inject script vào page để access window.Clerk
*/
export async function syncClerkTokenFromPage(): Promise<string | null> {
try {
// Inject script vào page để lấy Clerk token
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
if (!tab.id) return null;
const results = await chrome.scripting.executeScript({
target: { tabId: tab.id },
func: async () => {
// Access window.Clerk từ page context
if (typeof window !== 'undefined' && (window as any).Clerk?.session?.getToken) {
try {
const token = await (window as any).Clerk.session.getToken();
return token || null;
} catch {
return null;
}
}
return null;
},
});
const token = results[0]?.result || null;
if (token) {
// Lưu token vào storage
await chrome.storage.local.set({ clerkSessionToken: token });
}
return token;
} catch (error) {
console.error('[CuCu Note] Error syncing Clerk token:', error);
return null;
}
}
export async function setAuthToken(token: string): Promise<void> {
await chrome.storage.local.set({ authToken: token });
}
extension/test-extension.md 0 → 100644
View file @ 1732c42d
# Test Extension với Playwright
## Cách test Extension
Extension chạy trong **isolated context**, nên Playwright không thể test trực tiếp content script. Nhưng có thể test:
1. **Test popup** (khi click icon extension)
2. **Test xem content script có inject không** (check DOM)
## Test thủ công (nhanh nhất)
1. **Reload extension** trong `chrome://extensions`
2. **Mở một trang web** (ví dụ: https://example.com)
3. **Bôi đen text** → Sidebar sẽ hiện bên phải
4. **Nhấn Space** → Form sẽ mở với text đã điền
## Test với Playwright (nếu cần)
Có thể test popup bằng cách:
- Load extension vào Chrome profile
- Navigate đến trang web
- Check xem sidebar có xuất hiện không khi select text
---
## ✅ Đã cải thiện
### Sidebar thay vì popup nhỏ:
- ✅ Sidebar 400px width, full height
- ✅ Hiện bên phải màn hình
- ✅ Preview text đã chọn
- ✅ Nút Save + Close
- ✅ Animation slide in mượt mà
- ✅ Không auto-ẩn (ở đó cho đến khi user đóng)
### Tính năng:
- ✅ Bôi đen text → Sidebar hiện
- ✅ Nhấn Space → Tự động mở form
- ✅ Click Save → Mở form với text đã điền
---
## 🚀 Test ngay
1. **Reload extension**: `chrome://extensions` → Reload CuCu Note
2. **Mở trang web**: https://example.com
3. **Bôi đen text** → Sidebar sẽ hiện bên phải!
4. **Nhấn Space** hoặc click "Save Note" → Form mở
extension/tsconfig.json 0 → 100644
View file @ 1732c42d
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"types": ["chrome"]
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
extension/tsconfig.node.json 0 → 100644
View file @ 1732c42d
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
extension/vite.config.ts 0 → 100644
View file @ 1732c42d
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { crx } from '@crxjs/vite-plugin';
import manifest from './manifest.json';
export default defineConfig({
plugins: [
react(),
crx({ manifest }),
],
build: {
outDir: 'dist',
rollupOptions: {
input: {
popup: 'src/popup/popup.html',
},
},
},
});
frontend/.dockerignore 0 → 100644
View file @ 1732c42d
# Git
.git
.gitignore
# Node
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
.pnpm-store/
# Build
dist/
build/
# IDE
.vscode/
.idea/
*.swp
*.swo
# Environment
.env
.env.local
# Testing
tests/
coverage/
# Logs
*.log
# OS
.DS_Store
Thumbs.db
# Documentation
*.md
!README.md
!ENV_VARIABLES.md
# Docker
Dockerfile*
docker-compose*.yml
frontend/Dockerfile.dev 0 → 100644
View file @ 1732c42d
FROM node:18-alpine
WORKDIR /app
# Copy package files
COPY package*.json ./
COPY pnpm-lock.yaml* ./
# Install dependencies
RUN if [ -f pnpm-lock.yaml ]; then \
npm install -g pnpm && pnpm install; \
else \
npm install; \
fi
# Copy source code
COPY . .
# Expose port
EXPOSE 3001
# Start development server
CMD if [ -f pnpm-lock.yaml ]; then \
pnpm dev --host 0.0.0.0 --port 3001; \
else \
npm run dev -- --host 0.0.0.0 --port 3001; \
fi
frontend/Dockerfile.prod 0 → 100644
View file @ 1732c42d
# Multi-stage build for production
FROM node:18-alpine AS builder
WORKDIR /app
# Copy package files
COPY package*.json ./
COPY pnpm-lock.yaml* ./
# Install pnpm if pnpm-lock.yaml exists, otherwise use npm
RUN if [ -f pnpm-lock.yaml ]; then \
npm install -g pnpm && pnpm install --frozen-lockfile; \
else \
npm ci; \
fi
# Copy source code
COPY . .
# Build the application
ARG VITE_API_BASE_URL=http://localhost:5000
ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
RUN if [ -f pnpm-lock.yaml ]; then \
pnpm build; \
else \
npm run build; \
fi
# Production stage with Nginx
FROM nginx:alpine
# Copy built files from builder
COPY --from=builder /app/dist /usr/share/nginx/html
# Copy nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf
# Expose port 80
EXPOSE 80
# Start Nginx
CMD ["nginx", "-g", "daemon off;"]
frontend/ENV_VARIABLES.md 0 → 100644
View file @ 1732c42d
# Frontend Environment Variables
This document describes all environment variables used by the frontend.
## Quick Start
1. Create a `.env` file in the `frontend` directory
2. Add the variables below with your values
3. **DO NOT commit `.env` file to version control**
## Required Variables
### API Configuration
```bash
# Backend API base URL
VITE_API_BASE_URL=http://localhost:5000
```
For production:
```bash
VITE_API_BASE_URL=https://api.yourdomain.com
```
## Optional Variables
### Development Server
- `VITE_PORT` - Development server port (default: `3001`)
- `DEV_PROXY_SERVER` - Proxy server for Vite dev server (default: same as `VITE_API_BASE_URL`)
## Usage
All environment variables in Vite must be prefixed with `VITE_` to be accessible in the browser.
Access in code:
```typescript
const apiUrl = import.meta.env.VITE_API_BASE_URL;
```
## Production Build
When building for production, ensure `VITE_API_BASE_URL` points to your production API server.
Build command:
```bash
npm run build
# or
pnpm build
```
The built files will be in the `dist` directory.
frontend/nginx.conf 0 → 100644
View file @ 1732c42d
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Gzip compression
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
# Security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
# SPA routing - serve index.html for all routes
location / {
try_files $uri $uri/ /index.html;
}
# Cache static assets
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Don't cache index.html
location = /index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
}
}
frontend/src/components/Settings/OpenAIKeySection.tsx 0 → 100644
View file @ 1732c42d
import { KeyIcon, Trash2Icon } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { extractUserIdFromName } from "@/helpers/resource-names";
import useCurrentUser from "@/hooks/useCurrentUser";
import { handleError } from "@/lib/error";
import { userServiceClient } from "@/service";
import { useTranslate } from "@/utils/i18n";
import SettingGroup from "./SettingGroup";
import SettingRow from "./SettingRow";
import SettingSection from "./SettingSection";
const OpenAIKeySection = () => {
const t = useTranslate();
const currentUser = useCurrentUser();
const [apiKey, setApiKey] = useState("");
const [maskedKey, setMaskedKey] = useState<string | null>(null);
const [hasKey, setHasKey] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
// Get user ID from user name
const userId = currentUser?.name ? extractUserIdFromName(currentUser.name) : currentUser?.id || "";
// Load current key status on mount
useEffect(() => {
if (userId) {
loadKeyStatus();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [userId]);
const loadKeyStatus = async () => {
if (!userId) return;
setIsLoading(true);
try {
const result = await userServiceClient.getOpenAIKey(userId);
setHasKey(result.has_key);
setMaskedKey(result.masked_key);
} catch (error) {
handleError(error, toast.error, {
context: "Failed to load OpenAI key status",
});
} finally {
setIsLoading(false);
}
};
const validateKey = (key: string): boolean => {
if (!key || !key.trim()) {
return false;
}
const trimmed = key.trim();
if (!trimmed.startsWith("sk-")) {
return false;
}
if (trimmed.length < 20 || trimmed.length > 100) {
return false;
}
return true;
};
const handleSave = async () => {
if (!userId) {
toast.error("User not found");
return;
}
if (!validateKey(apiKey)) {
toast.error("Invalid OpenAI API key format. Key must start with 'sk-' and be 20-100 characters.");
return;
}
setIsSaving(true);
try {
const result = await userServiceClient.updateOpenAIKey(userId, apiKey.trim());
setApiKey("");
setHasKey(true);
setMaskedKey(result.masked_key);
toast.success(result.message || "OpenAI API key saved successfully");
} catch (error) {
handleError(error, toast.error, {
context: "Failed to save OpenAI key",
});
} finally {
setIsSaving(false);
}
};
const handleDelete = async () => {
if (!userId) {
toast.error("User not found");
return;
}
if (!confirm("Are you sure you want to delete your OpenAI API key? This will disable personalized embeddings.")) {
return;
}
setIsDeleting(true);
try {
await userServiceClient.deleteOpenAIKey(userId);
setHasKey(false);
setMaskedKey(null);
setApiKey("");
toast.success("OpenAI API key deleted successfully");
} catch (error) {
handleError(error, toast.error, {
context: "Failed to delete OpenAI key",
});
} finally {
setIsDeleting(false);
}
};
if (isLoading) {
return (
<SettingSection>
<SettingGroup title="OpenAI API Key">
<p className="text-sm text-muted-foreground">Loading...</p>
</SettingGroup>
</SettingSection>
);
}
return (
<SettingSection>
<SettingGroup title="OpenAI API Key">
<div className="flex flex-col gap-4">
<div className="text-sm text-muted-foreground">
Enter your OpenAI API key to enable personalized embeddings and AI features.
Your key will be encrypted and stored securely.
</div>
{hasKey && maskedKey && (
<div className="flex items-center gap-2 p-3 bg-muted rounded-md">
<KeyIcon className="w-4 h-4 text-muted-foreground" />
<span className="text-sm font-mono">{maskedKey}</span>
<span className="text-xs text-muted-foreground ml-auto">Key saved</span>
</div>
)}
<SettingRow label="API Key">
<div className="flex flex-col gap-2 w-full">
<Input
type="password"
placeholder="sk-..."
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
className="font-mono"
disabled={isSaving}
/>
<div className="flex gap-2">
<Button
onClick={handleSave}
disabled={!apiKey.trim() || !validateKey(apiKey) || isSaving}
size="sm"
>
{isSaving ? "Saving..." : hasKey ? "Update Key" : "Save Key"}
</Button>
{hasKey && (
<Button
onClick={handleDelete}
variant="destructive"
size="sm"
disabled={isDeleting}
>
<Trash2Icon className="w-4 h-4 mr-1" />
{isDeleting ? "Deleting..." : "Delete"}
</Button>
)}
</div>
</div>
</SettingRow>
<div className="text-xs text-muted-foreground">
<p>• Your key is encrypted before storage</p>
<p>• Your key takes priority over system default key</p>
<p>• You can delete your key anytime to use system default</p>
</div>
</div>
</SettingGroup>
</SettingSection>
);
};
export default OpenAIKeySection;
frontend/src/hooks/useDebounce.ts 0 → 100644
View file @ 1732c42d
import { useEffect, useState } from "react";
/**
* Custom hook for debouncing a value
* @param value - The value to debounce
* @param delay - Delay in milliseconds (default: 300ms)
* @returns The debounced value
*/
export function useDebounce<T>(value: T, delay: number = 300): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
frontend/src/hooks/useMemoQueries.ts
View file @ 1732c42d
......@@ -40,8 +40,9 @@ export function useInfiniteMemos(request: Partial<ListMemosRequest> = {}) {
},
initialPageParam: "",
getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined,
staleTime: 5000, // 5 seconds - quick enough for updates, prevents excessive refetching
staleTime: 1000 * 30, // 30 seconds - optimized to reduce excessive refetching
gcTime: 1000 * 60 * 5, // Keep unused data in cache for 5 minutes
refetchOnWindowFocus: false, // Prevent refetch on window focus
});
}
......@@ -53,7 +54,8 @@ export function useMemo(name: string, options?: { enabled?: boolean }) {
return memo;
},
enabled: options?.enabled ?? true,
staleTime: 1000 * 10, // 10 seconds - reduced to prevent stale data in collaborative editing
staleTime: 1000 * 60, // 60 seconds - optimized for better performance
refetchOnWindowFocus: false, // Prevent unnecessary refetches
});
}
......
frontend/src/locales/en.json
View file @ 1732c42d
......@@ -320,6 +320,7 @@
},
"my-account": "My Account",
"preference": "Preferences",
"openai-key": "OpenAI API Key",
"preference-section": {
"default-memo-sort-option": "Memo display time",
"default-memo-visibility": "Default memo visibility",
......
frontend/src/pages/Attachments.tsx
View file @ 1732c42d
......@@ -13,6 +13,7 @@ import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { attachmentServiceClient } from "@/service";
import { useDeleteAttachment } from "@/hooks/useAttachmentQueries";
import { useDebounce } from "@/hooks/useDebounce";
import useDialog from "@/hooks/useDialog";
import useLoading from "@/hooks/useLoading";
import useMediaQuery from "@/hooks/useMediaQuery";
......@@ -80,8 +81,11 @@ const Attachments = () => {
const [nextPageToken, setNextPageToken] = useState("");
const [isLoadingMore, setIsLoadingMore] = useState(false);
// Debounce search query to reduce filtering operations
const debouncedSearchQuery = useDebounce(searchQuery, 300);
// Memoized computed values
const filteredAttachments = useMemo(() => filterAttachments(attachments, searchQuery), [attachments, searchQuery]);
const filteredAttachments = useMemo(() => filterAttachments(attachments, debouncedSearchQuery), [attachments, debouncedSearchQuery]);
const usedAttachments = useMemo(() => filteredAttachments.filter((attachment) => attachment.memo), [filteredAttachments]);
......
frontend/src/pages/Setting.tsx
View file @ 1732c42d
import { CogIcon, DatabaseIcon, LibraryIcon, LucideIcon, Settings2Icon, UserIcon, UsersIcon } from "lucide-react";
import { CogIcon, DatabaseIcon, KeyIcon, LibraryIcon, LucideIcon, Settings2Icon, UserIcon, UsersIcon } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useLocation } from "react-router-dom";
import MobileHeader from "@/components/MobileHeader";
......@@ -6,6 +6,7 @@ import InstanceSection from "@/components/Settings/InstanceSection";
import MemberSection from "@/components/Settings/MemberSection";
import MemoRelatedSettings from "@/components/Settings/MemoRelatedSettings";
import MyAccountSection from "@/components/Settings/MyAccountSection";
import OpenAIKeySection from "@/components/Settings/OpenAIKeySection";
import PreferencesSection from "@/components/Settings/PreferencesSection";
import SectionMenuItem from "@/components/Settings/SectionMenuItem";
import StorageSection from "@/components/Settings/StorageSection";
......@@ -17,17 +18,18 @@ import { InstanceSetting_Key } from "@/types/proto/api/v1/instance_service_pb";
import { User_Role } from "@/types/proto/api/v1/user_service_pb";
import { useTranslate } from "@/utils/i18n";
type SettingSection = "my-account" | "preference" | "member" | "system" | "memo-related" | "storage";
type SettingSection = "my-account" | "preference" | "openai-key" | "member" | "system" | "memo-related" | "storage";
interface State {
selectedSection: SettingSection;
}
const BASIC_SECTIONS: SettingSection[] = ["my-account", "preference"];
const BASIC_SECTIONS: SettingSection[] = ["my-account", "preference", "openai-key"];
const ADMIN_SECTIONS: SettingSection[] = ["member", "system", "memo-related", "storage"];
const SECTION_ICON_MAP: Record<SettingSection, LucideIcon> = {
"my-account": UserIcon,
preference: CogIcon,
"openai-key": KeyIcon,
member: UsersIcon,
system: Settings2Icon,
"memo-related": LibraryIcon,
......@@ -142,6 +144,8 @@ const Setting = () => {
<MyAccountSection />
) : state.selectedSection === "preference" ? (
<PreferencesSection />
) : state.selectedSection === "openai-key" ? (
<OpenAIKeySection />
) : state.selectedSection === "member" ? (
<MemberSection />
) : state.selectedSection === "system" ? (
......
frontend/src/service/userService.ts
View file @ 1732c42d
......@@ -184,5 +184,22 @@ export const userServiceClient = {
void _request;
return;
},
// OpenAI API Key Management
async getOpenAIKey(userId: string): Promise<{ has_key: boolean; masked_key: string | null }> {
return fetchJson<{ has_key: boolean; masked_key: string | null }>(`/users/${userId}/openai-key`, {
method: "GET",
});
},
async updateOpenAIKey(userId: string, apiKey: string): Promise<{ success: boolean; message: string; masked_key: string }> {
return fetchJson<{ success: boolean; message: string; masked_key: string }>(`/users/${userId}/openai-key`, {
method: "PUT",
body: { api_key: apiKey },
});
},
async deleteOpenAIKey(userId: string): Promise<{ success: boolean; message: string }> {
return fetchJson<{ success: boolean; message: string }>(`/users/${userId}/openai-key`, {
method: "DELETE",
});
},
};
frontend/vite.config.mts
View file @ 1732c42d
This diff is collapsed.
readme.md 0 → 100644
View file @ 1732c42d
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment