feat(ui): migrate Flutter UI library to Next.js 16 (App Router)
Migrate all 87 Dart files from /Users/chase/Documents/cozsweet/lib/ui/ to TypeScript React components, replacing Flutter-native features with Web equivalents and reimplementing the BLoC pattern with React Context + useReducer. Highlights - 1:1 BLoC -> Context+useReducer+side-effects mapping for auth, chat, user, and sidebar features (4 providers wired in root-providers.tsx) - 500px MobileShell primitive eliminates per-screen layout boilerplate - Headless Dialog primitive (createPortal + ESC + scroll lock) powers quota / pwa-install / username / pronouns / subscription / other-options dialogs - New integrations/: facebook-sdk, google-identity, pwa-install, media-recorder (Web Speech API + MediaRecorder), browser-detect, chat-websocket (singleton), message-queue (throttled send) - CSS Modules + existing design tokens (no new styling system); extended with breakpoints.css and dimensions.css - Custom hooks: useBreakpoint (useSyncExternalStore), useFullVisibility (IntersectionObserver), usePwaInstall, usePullToRefresh - Vitest + jsdom; 15 unit tests (chat-reducer, auth-validators) - React 19.2.4, Next.js 16.2.7, Zod 4, lottie-react, classnames Workarounds - next.config.ts: experimental.staticGenerationRetryCount = 0 to bypass Next.js 16.2.7 /_global-error workStore prerender bug - src/app/global-error.tsx: required Client Component - src/types/globals.d.ts: centralized window.google / FB / SpeechRecognition declarations Routes (/, /splash, /auth, /chat, /chat/deviceid/[deviceId], /sidebar) all build and lint clean. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* 聊天 WebSocket 处理器
|
||||
*
|
||||
* 原始 Dart: lib/core/net/websocket_handler.dart
|
||||
*
|
||||
* 浏览器方案：使用原生 `WebSocket` API，封装连接管理 + 重连 + 事件回调。
|
||||
*
|
||||
* 事件：
|
||||
* - onConnected(userId)
|
||||
* - onTyping(isTyping)
|
||||
* - onSentence(index, text, total, done) ← AI 逐句推送
|
||||
* - onVoiceReady(index, audioUrl)
|
||||
* - onIntimacyUpdate(intimacyChange, newIntimacy, relationshipStage)
|
||||
* - onMoodUpdate(mood)
|
||||
* - onError(errorMessage)
|
||||
*/
|
||||
import { getApiConfig } from "@/data/api/config/api_config";
|
||||
|
||||
export interface SentencePayload {
|
||||
index: number;
|
||||
text: string;
|
||||
total: number;
|
||||
done: boolean;
|
||||
}
|
||||
|
||||
export interface IntimacyPayload {
|
||||
intimacyChange?: number;
|
||||
newIntimacy?: number;
|
||||
relationshipStage?: string;
|
||||
}
|
||||
|
||||
export class ChatWebSocket {
|
||||
private ws: WebSocket | null = null;
|
||||
private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
private disposed = false;
|
||||
|
||||
onConnected: ((userId: string) => void) | null = null;
|
||||
onTyping: ((isTyping: boolean) => void) | null = null;
|
||||
onSentence: ((payload: SentencePayload) => void) | null = null;
|
||||
onVoiceReady: ((index: number, audioUrl: string) => void) | null = null;
|
||||
onIntimacyUpdate: ((payload: IntimacyPayload) => void) | null = null;
|
||||
onMoodUpdate: ((mood: string) => void) | null = null;
|
||||
onError: ((errorMessage: string) => void) | null = null;
|
||||
|
||||
constructor(
|
||||
private readonly serverUrl: string,
|
||||
private readonly token: string,
|
||||
) {}
|
||||
|
||||
get isConnected(): boolean {
|
||||
return this.ws?.readyState === WebSocket.OPEN;
|
||||
}
|
||||
|
||||
connect(): void {
|
||||
if (this.disposed) return;
|
||||
if (this.ws && this.ws.readyState !== WebSocket.CLOSED) return;
|
||||
try {
|
||||
const url = `${this.serverUrl}?token=${encodeURIComponent(this.token)}`;
|
||||
this.ws = new WebSocket(url);
|
||||
this.ws.onopen = () => {
|
||||
// 连接成功；userId 由后端在第一条消息中下发
|
||||
};
|
||||
this.ws.onmessage = (e) => this.handleMessage(e.data);
|
||||
this.ws.onerror = () => this.onError?.("WebSocket error");
|
||||
this.ws.onclose = () => {
|
||||
if (!this.disposed) {
|
||||
this.reconnectTimer = setTimeout(() => this.connect(), 3000);
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
this.onError?.(e instanceof Error ? e.message : String(e));
|
||||
}
|
||||
}
|
||||
|
||||
sendMessage(content: string): boolean {
|
||||
if (!this.isConnected) return false;
|
||||
this.ws?.send(JSON.stringify({ type: "message", content }));
|
||||
return true;
|
||||
}
|
||||
|
||||
disconnect(): void {
|
||||
this.disposed = true;
|
||||
if (this.reconnectTimer) {
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = null;
|
||||
}
|
||||
this.ws?.close();
|
||||
this.ws = null;
|
||||
}
|
||||
|
||||
private handleMessage(data: unknown): void {
|
||||
if (typeof data !== "string") return;
|
||||
let payload: {
|
||||
type?: string;
|
||||
userId?: string;
|
||||
isTyping?: boolean;
|
||||
index?: number;
|
||||
text?: string;
|
||||
total?: number;
|
||||
done?: boolean;
|
||||
audioUrl?: string;
|
||||
intimacyChange?: number;
|
||||
newIntimacy?: number;
|
||||
relationshipStage?: string;
|
||||
mood?: string;
|
||||
error?: string;
|
||||
};
|
||||
try {
|
||||
payload = JSON.parse(data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
switch (payload.type) {
|
||||
case "connected":
|
||||
if (payload.userId) this.onConnected?.(payload.userId);
|
||||
break;
|
||||
case "typing":
|
||||
this.onTyping?.(payload.isTyping ?? false);
|
||||
break;
|
||||
case "sentence":
|
||||
this.onSentence?.({
|
||||
index: payload.index ?? 0,
|
||||
text: payload.text ?? "",
|
||||
total: payload.total ?? 0,
|
||||
done: payload.done ?? false,
|
||||
});
|
||||
break;
|
||||
case "voice_ready":
|
||||
this.onVoiceReady?.(payload.index ?? 0, payload.audioUrl ?? "");
|
||||
break;
|
||||
case "intimacy_update":
|
||||
this.onIntimacyUpdate?.({
|
||||
intimacyChange: payload.intimacyChange,
|
||||
newIntimacy: payload.newIntimacy,
|
||||
relationshipStage: payload.relationshipStage,
|
||||
});
|
||||
break;
|
||||
case "mood_update":
|
||||
if (payload.mood) this.onMoodUpdate?.(payload.mood);
|
||||
break;
|
||||
case "error":
|
||||
this.onError?.(payload.error ?? "Unknown error");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 默认创建实例：从 env 读取 WS URL。 */
|
||||
export function createChatWebSocket(token: string): ChatWebSocket {
|
||||
const base = getApiConfig().wsUrl;
|
||||
return new ChatWebSocket(base, token);
|
||||
}
|
||||
Reference in New Issue
Block a user