feat: 完成 Q 群組 — APP（React Native + Expo）
新增 apps/mobile：Expo Router 檔案系統路由（同 Next.js App Router 的 心智模型），底部四分頁（聊天/角色/日常/設定）皆為真實 API 串接（/chat、 /tachie、/characters、/schedule、/health、/push）。聊天分頁完整重用 H/O 群組已驗證過的對話+表情查詢節奏。立繪暫以依情緒 magnitude 調整 透明度的色塊佔位（PixiJS 是瀏覽器 DOM/Canvas API，未移植到 React Native，需要 react-native-skia 等原生繪圖套件才能重現分層合成，超出 本群組範圍）。 新增 apps/api/src/push/：PushProvider 抽象（第三次套用 F-1/P-4 的 Provider 模式），MockPushProvider 供測試、ExpoPushProvider 是可直接 打真實 HTTP 請求的完整實作（Expo 推播匿名發送不需金鑰，不像 LLM/TTS 需要另外挑供應商待人工確認）。PushToken/PushNotificationLog 記錄裝置 註冊與每次推播嘗試。J 群組 TaskTriggerService 觸發時會嘗試推播給 使用者已註冊裝置，用觸發訊息本身當推播內容。 本環境沒有 Android/iOS 模擬器，改用 `expo start --web` + playwright-core （同 O 群組手法）驅動無頭瀏覽器驗證四分頁切換、真實 API 串接、聊天 完整往返、推播按鈕在無裝置環境下的優雅降級——不是原生 APP 的完整驗證， 但驗證了畫面邏輯與 API 契約層。過程中發現並修正 CORS 設定只放行網頁版 origin、擋掉 Expo 網頁版請求的問題（永久修正：新增 localhost:8081 白名單， 不影響原生 APP，原生環境沒有 CORS 限制）。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Jeffery
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
0e9401b891
commit
5da8b3a63e
@@ -0,0 +1,169 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from "react-native";
|
||||
import type { EmotionTag } from "@kokorone/shared";
|
||||
import { sendChatMessage, fetchExpression, type TachieExpressionResponse } from "../../lib/api";
|
||||
import { EMOTION_LABELS } from "../../lib/emotion-labels";
|
||||
import { generateSessionId } from "../../lib/id";
|
||||
|
||||
const CHARACTER_ID = "seed-character-genki";
|
||||
const USER_ID = "seed-user-primary";
|
||||
const EXPRESSION_LEAD_MS = 220; // O-2/Q-2：表情先變化、文字延後一小段時間出現，跟 apps/web 的作法一致。
|
||||
|
||||
interface Message {
|
||||
role: "user" | "character";
|
||||
text: string;
|
||||
}
|
||||
|
||||
// Q-2 行動版佈局：立繪半身像置於上方 40% 為背景層，對話流覆蓋其上向下延伸——
|
||||
// 跟行動網頁版同一份設計原則，只是這裡用 View 的 flex 排版而非 CSS。立繪本體目前是佔位色塊
|
||||
// （O 群組的 PixiJS 渲染器是網頁 DOM/Canvas 實作，沒有移植到 React Native，見本群組實作記錄）。
|
||||
export default function ChatScreen() {
|
||||
const [sessionId] = useState(() => generateSessionId());
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const [dominant, setDominant] = useState<EmotionTag>("CALM");
|
||||
const [intimacy, setIntimacy] = useState(0);
|
||||
const [expression, setExpression] = useState<TachieExpressionResponse | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function handleSend() {
|
||||
const text = input.trim();
|
||||
if (!text || sending) {
|
||||
return;
|
||||
}
|
||||
setSending(true);
|
||||
setError(null);
|
||||
setInput("");
|
||||
setMessages((prev) => [...prev, { role: "user", text }]);
|
||||
|
||||
try {
|
||||
const result = await sendChatMessage(CHARACTER_ID, USER_ID, sessionId, text);
|
||||
if (result.availability === "NO_REPLY") {
|
||||
return;
|
||||
}
|
||||
if (result.context) {
|
||||
setDominant(result.context.emotion.dominant);
|
||||
setIntimacy(result.context.relationship.intimacy);
|
||||
}
|
||||
try {
|
||||
setExpression(await fetchExpression(CHARACTER_ID, USER_ID));
|
||||
} catch {
|
||||
// 表情查詢失敗不影響對話本身。
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, EXPRESSION_LEAD_MS));
|
||||
setMessages((prev) => [...prev, { role: "character", text: result.text }]);
|
||||
} catch {
|
||||
setError("訊息傳送失敗，請確認 api 服務是否已啟動");
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.flex}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<View style={styles.tachieArea}>
|
||||
<Text style={styles.tachieLabel}>親密度 {intimacy}</Text>
|
||||
<View style={styles.emotionChip}>
|
||||
<Text style={styles.emotionChipText}>{EMOTION_LABELS[dominant]}</Text>
|
||||
</View>
|
||||
<View style={[styles.tachiePlaceholder, expression ? { opacity: 0.85 + expression.magnitude * 0.15 } : null]} />
|
||||
<Text style={styles.tachieCaption}>立繪（表情差分即時變化）</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.messages} contentContainerStyle={styles.messagesContent}>
|
||||
{messages.length === 0 && <Text style={styles.hint}>傳個訊息，開始今天的對話吧。</Text>}
|
||||
{messages.map((message, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[styles.bubble, message.role === "user" ? styles.bubbleUser : styles.bubbleCharacter]}
|
||||
>
|
||||
<Text style={styles.bubbleText}>{message.text}</Text>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
{error && <Text style={styles.error}>{error}</Text>}
|
||||
|
||||
<View style={styles.inputRow}>
|
||||
<TextInput
|
||||
value={input}
|
||||
onChangeText={setInput}
|
||||
placeholder="輸入訊息……"
|
||||
style={styles.input}
|
||||
editable={!sending}
|
||||
onSubmitEditing={handleSend}
|
||||
/>
|
||||
<Pressable onPress={handleSend} disabled={sending}>
|
||||
<Text style={[styles.sendButton, sending ? styles.sendButtonDisabled : null]}>送出</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flex: { flex: 1, backgroundColor: "#FFF5F7" },
|
||||
tachieArea: {
|
||||
height: "40%",
|
||||
backgroundColor: "#FCE4EC",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
paddingBottom: 16,
|
||||
},
|
||||
tachieLabel: { position: "absolute", top: 14, left: 14, fontSize: 11, color: "#8a6b6f" },
|
||||
emotionChip: {
|
||||
position: "absolute",
|
||||
top: 14,
|
||||
right: 14,
|
||||
backgroundColor: "#FFE0EA",
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
},
|
||||
emotionChipText: { color: "#FF7E9D", fontWeight: "bold", fontSize: 12 },
|
||||
tachiePlaceholder: {
|
||||
width: 120,
|
||||
height: 190,
|
||||
borderTopLeftRadius: 60,
|
||||
borderTopRightRadius: 60,
|
||||
borderBottomLeftRadius: 24,
|
||||
borderBottomRightRadius: 24,
|
||||
backgroundColor: "#FF9EB5",
|
||||
},
|
||||
tachieCaption: { fontSize: 11, color: "#8a6b6f", marginTop: 8 },
|
||||
messages: { flex: 1 },
|
||||
messagesContent: { padding: 16, gap: 8 },
|
||||
hint: { fontSize: 13, color: "#8a6b6f" },
|
||||
bubble: { maxWidth: "80%", borderRadius: 16, padding: 10 },
|
||||
bubbleUser: { alignSelf: "flex-end", backgroundColor: "#FF7E9D" },
|
||||
bubbleCharacter: { alignSelf: "flex-start", backgroundColor: "#EFEFEF" },
|
||||
bubbleText: { color: "#222" },
|
||||
error: { color: "#FF7E9D", fontSize: 12, paddingHorizontal: 16 },
|
||||
inputRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
margin: 12,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 999,
|
||||
borderWidth: 1,
|
||||
borderColor: "#E5D5D8",
|
||||
},
|
||||
input: { flex: 1, fontSize: 14 },
|
||||
sendButton: { color: "#FF7E9D", fontWeight: "bold" },
|
||||
sendButtonDisabled: { opacity: 0.5 },
|
||||
});
|
||||
Reference in New Issue
Block a user