Feature/refactor web/1201

.gitignore

@@ -34,6 +34,7 @@ build/
 .vscode/
 
 *.log
+api/logs/
 
 .DS_Store
 
@@ -46,6 +47,7 @@ web/node_modules/
 # next.js
 web/.next/
 web/out/
+webV2/.next/
 
 # production
 web/build
@@ -81,5 +83,6 @@ node_modules/
 nginx/conf.d/dynamic-services.conf
 
 web/.env
+webV2/.env
 
 *.tsbuildinfo

CLAUDE.md

@@ -166,4 +166,8 @@ mvn jooq:generate -pl server       # Generate jOOQ code from database schema
 logging.level.org.jooq.tools.LoggerListener: DEBUG  # SQL logging
 logging.level.com.ke.bella.openapi.intercept: DEBUG # Request/Response logging
 jetcache.statIntervalMinutes: 1                     # Cache statistics
-```
+```
+
+### always response with chinese
+
+ ## First, provide a revision plan according to the user's requirements, and then proceed to the next step after the user confirms it

docker-compose.yml

@@ -1,11 +1,11 @@
 services:
   api:
     image: ${REGISTRY:-bellatop}/bella-openapi-api:${VERSION:-latest}
-    build: 
+    build:
       context: ./api
     container_name: bella-openapi-api
-    expose:
-      - "8080"
+    ports:
+      - "8080:8080"
     environment:
       - JAVA_OPTS=-server -Xms2048m -Xmx2048m -XX:MetaspaceSize=512m -XX:MaxMetaspaceSize=512m -Dbella.proxy.host=${PROXY_HOST:-} -Dbella.proxy.port=${PROXY_PORT:-} -Dbella.proxy.type=${PROXY_TYPE:-} -Dbella.proxy.domains=${PROXY_DOMAINS:-}
       - SPRING_PROFILES_ACTIVE=${SPRING_PROFILES_ACTIVE:-docker}

nginx/conf.d/default.conf

@@ -6,6 +6,21 @@ server {
     # 访问日志
     access_log  /var/log/nginx/host.access.log  main;
 
+    # /v1/chat/completions 路径转发到本地SSE服务
+    location ^~ /v1/chat/completions {
+        proxy_pass http://localhost:3010/sse;
+        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;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+
+        proxy_connect_timeout 60s;
+        proxy_send_timeout 300s;
+        proxy_read_timeout 300s;
+    }
+
     # /v1 路径转发到 api 服务
     location ^~ /v1/ {
         proxy_pass http://bella-openapi-api:8080;

webV2/.dockerignore

@@ -0,0 +1,23 @@
+.env.local
+
+# Logs
+logs
+*.log*
+
+# node
+node_modules
+.husky
+.next
+
+# vscode
+.vscode
+
+# webstorm
+.idea
+*.iml
+*.iws
+*.ipr
+
+
+# Jetbrains
+.idea

webV2/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_HOST=localhost:8080

webV2/CLAUDE.md

@@ -0,0 +1,137 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is **Bella OpenAPI Web** - a Next.js 14 web application that serves as an API management and testing console for OpenAPI endpoints. It provides a comprehensive interface for testing, monitoring, and managing various AI/ML APIs including chat completions, audio processing, and embeddings.
+
+## Common Commands
+
+### Development
+```bash
+npm run dev          # Start development server (http://localhost:3000)
+npm run build        # Build for production
+npm run start        # Start production server
+npm run lint         # Run ESLint linting
+```
+
+### Docker (Multi-stage build with optimizations)
+```bash
+# Build with build args for API host
+docker build --build-arg NEXT_PUBLIC_API_HOST=your-api-host -t bella-openapi-web .
+docker run -p 3000:3000 bella-openapi-web
+
+# Development with volume mounting
+docker run -v $(pwd):/app/web -p 3000:3000 bella-openapi-web
+```
+
+## Architecture Overview
+
+### Technology Stack
+- **Framework**: Next.js 14 with App Router and React Server Components
+- **Language**: TypeScript with strict type checking
+- **Styling**: Tailwind CSS + shadcn/ui components (New York style)
+- **State Management**: React Context API with custom providers
+- **HTTP Client**: Axios with custom interceptors and authentication
+- **Forms**: React Hook Form with resolvers
+- **Data Tables**: TanStack React Table
+- **Charts**: Recharts for data visualization
+
+### Key Directory Structure
+```
+/src
+├── app/                    # Next.js App Router
+│   ├── api/               # API routes (logs, metrics, config)
+│   ├── playground/v1/     # API testing interfaces
+│   │   ├── audio/         # Audio processing APIs
+│   │   ├── chat/          # Chat completion APIs
+│   │   └── embeddings/    # Embedding APIs
+│   ├── apikey/            # API key management
+│   ├── monitor/           # Monitoring dashboard
+│   ├── meta/              # API metadata & main console
+│   └── logs/              # Logging interface
+├── components/            # React components (feature-organized)
+├── lib/                   # Utilities and configurations
+│   ├── api/              # API client functions
+│   ├── context/          # React contexts (UserProvider, etc.)
+│   └── types/            # TypeScript definitions
+└── hooks/                # Custom React hooks
+```
+
+### Core Features
+- **API Console**: Browse and test OpenAPI endpoints via `/meta`
+- **Playground**: Interactive testing for Chat, Audio, and Embedding APIs
+- **API Key Management**: Create and manage API keys with quotas
+- **Real-time Monitoring**: Metrics dashboard and comprehensive logging
+- **Multi-tenant Architecture**: Configurable tenant and workflow support
+
+### Configuration & Environment
+The application uses Next.js standalone output mode and requires these environment variables:
+
+**Public (Build-time)**:
+- `NEXT_PUBLIC_API_HOST` - Backend API host
+- `NEXT_PUBLIC_APIKEY_QUOTA_APPLY_URL` - URL for API key quota applications
+- `NEXT_PUBLIC_SAFETY_APPLY_URL` - URL for safety feature applications
+- `NEXT_PUBLIC_AGENT_URL` - Agent service URL
+
+**Server-side (Runtime)**:
+- `WORKFLOW_URL`, `WORKFLOW_API_KEY` - Workflow service configuration
+- `ES_URL`, `ES_API_KEY` - ElasticSearch for logging
+- `TENANT_ID` - Multi-tenant identifier
+- `METRICS_WORKFLOW_ID`, `LOGS_TRACE_WORKFLOW_ID`, `SERVICE_WORKFLOW_ID` - Workflow identifiers
+
+### Key Patterns
+- **Provider Pattern**: Global state via UserProvider and ThemeProvider contexts
+- **Custom Axios Instance**: Centralized API client with authentication and error handling interceptors  
+- **Feature-based Components**: Components organized by feature area (apikey/, meta/, playground/, etc.)
+- **Type-safe APIs**: Comprehensive TypeScript types for all API interactions
+- **shadcn/ui Integration**: Consistent design system with Radix UI primitives (New York style)
+- **Standalone Output**: Docker-optimized production builds with PM2 process management
+
+### Key Architecture Components
+
+**Authentication Flow**:
+- `src/lib/context/user-context.tsx` - Global user state management
+- `src/lib/api/openapi.ts` - Axios instance with 401 redirect handling
+- `X-BELLA-CONSOLE` header for backend identification
+
+**API Client Structure**:
+- `src/lib/api/openapi.ts` - Main HTTP client with interceptors
+- `src/lib/api/meta.ts` - Metadata and model management APIs
+- `src/lib/api/apikey.ts` - API key management functions
+- `src/lib/api/workflow.ts` - Workflow service integration
+
+**Component Organization**:
+- Feature-based: `components/apikey/`, `components/meta/`, `components/playground/`
+- UI primitives: `components/ui/` (shadcn/ui components)
+- Business logic: Audio processing classes in `components/playground/`
+
+### Path Aliases
+- `@/*` maps to `./src/*` for clean imports
+
+## Development Notes
+
+### Key Routes & Pages
+- Root (`/`) redirects to `/meta` - the main API console interface
+- `/playground/v1/` - Interactive API testing interfaces (chat, audio, embeddings)  
+- `/apikey/` - API key management and quota tracking
+- `/monitor/` - Real-time metrics and monitoring dashboard
+- `/logs/` - Comprehensive logging interface with trace capabilities
+
+### Audio Processing Architecture
+- Real-time audio processing with WebSocket connections
+- Multiple recorder implementations: `RealtimeAudioRecorder`, `FlashAudioRecorder`
+- PCM audio playback and device selection utilities
+- Voice synthesis and ASR (Automatic Speech Recognition) support
+
+### API Response Handling
+- Standardized response format with `code: 200` success indicator
+- Automatic login redirect on 401 responses via `X-Redirect-Login` header
+- Error boundary handling throughout the application
+
+### Deployment Features
+- Multi-stage Docker build with Chinese mirror optimizations
+- PM2 process management in production
+- Standalone Next.js output for optimized Docker images
+- Timezone configuration (Asia/Shanghai) in containers

webV2/Dockerfile

@@ -0,0 +1,64 @@
+# base image
+FROM node:20.11-alpine3.19 AS base
+
+# 国内使用阿里云镜像源
+#RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
+
+# install packages
+FROM base AS packages
+
+WORKDIR /app/web
+
+COPY package.json .
+COPY package-lock.json .
+
+# 设置 npm 配置以提高稳定性
+RUN npm config set registry https://registry.npmmirror.com/
+
+# 使用 cnpm 安装依赖，更稳定
+RUN npm install -g cnpm --registry=https://registry.npmmirror.com/ \
+    && cnpm install --no-audit --no-fund --ignore-scripts
+
+# build resources
+FROM base AS builder
+WORKDIR /app/web
+COPY --from=packages /app/web/ .
+COPY . .
+
+ARG NODE_ENV=production
+ARG DEPLOY_ENV=production
+ARG NEXT_PUBLIC_API_HOST
+
+# 设置环境变量
+ENV NODE_ENV=${NODE_ENV}
+ENV DEPLOY_ENV=${DEPLOY_ENV}
+ENV NEXT_PUBLIC_API_HOST=${NEXT_PUBLIC_API_HOST}
+
+# 使用 npm 构建
+RUN NODE_ENV=${NODE_ENV} npm run build
+
+# production stage
+FROM base AS production
+ENV PORT=3000
+ENV HOSTNAME=127.0.0.1
+
+# set timezone
+ENV TZ=Asia/Shanghai
+RUN ln -s /usr/share/zoneinfo/${TZ} /etc/localtime \
+    && echo ${TZ} > /etc/timezone
+
+# global runtime packages
+# 使用 cnpm 安装全局包
+RUN npm install -g cnpm --registry=https://registry.npmmirror.com \
+    && cnpm install -g pm2 \
+    && npm cache clean --force
+
+WORKDIR /app/web
+COPY --from=builder /app/web/.next/standalone ./
+COPY --from=builder /app/web/.next/static ./.next/static
+
+COPY docker/pm2.json ./pm2.json
+COPY docker/entrypoint.sh ./entrypoint.sh
+
+EXPOSE 3000
+ENTRYPOINT ["/bin/sh", "./entrypoint.sh"]

webV2/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

webV2/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

webV2/docker/entrypoint.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+
+
+# if you are using windows, you may need to convert the file to unix format
+# you can use the Ubuntu terminal to convert this file to unix format
+# otherwise, you may get the error after running the docker container
+
+# sudo apt-get install dos2unix
+# dos2unix entrypoint.sh
+
+
+set -e
+
+export NEXT_PUBLIC_DEPLOY_ENV=${DEPLOY_ENV}
+export HOSTNAME=0.0.0.0
+
+echo "NEXT_PUBLIC_DEPLOY_ENV: ${NEXT_PUBLIC_DEPLOY_ENV}"
+echo "HOSTNAME: ${HOSTNAME}"
+echo "NODE_ENV: ${NODE_ENV}"
+
+pm2 start ./pm2.json --no-daemon

webV2/docker/pm2.json

@@ -0,0 +1,11 @@
+{
+  "apps": [
+    {
+      "name": "bella-openapi-web",
+      "script": "/app/web/server.js",
+      "cwd": "/app/web",
+      "exec_mode": "cluster",
+      "instances": 2
+    }
+  ]
+}