richard/digital-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 扩展饮食记录确认流程，支持选择选项和响应处理

Browse Source 
- 在教练页面中新增AI选择选项和食物确认选项的数据结构
- 扩展消息结构以支持选择选项和交互类型
- 实现非流式JSON响应的处理逻辑，支持用户确认选择
- 添加选择选项的UI组件，提升用户交互体验
- 更新样式以适应新功能，确保视觉一致性
This commit is contained in:
richarjiang
2025-08-18 17:29:19 +08:00
parent f8730a90e9
commit 05a00236bc
3 changed files with 507 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
app/(tabs)/coach.tsx
View File

@@ -54,12 +54,52 @@ type MessageAttachment = {
uploadError?: string; // 上传错误信息
};
// AI选择选项数据结构
type AiChoiceOption = {
id: string;
label: string;
value: any;
recommended?: boolean;
};
// 餐次类型
type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
// 食物确认选项数据结构
type FoodConfirmationOption = {
id: string;
label: string;
foodName: string;
portion: string;
calories: number;
mealType: MealType;
nutritionData: {
proteinGrams?: number;
carbohydrateGrams?: number;
fatGrams?: number;
fiberGrams?: number;
};
};
// AI响应数据结构
type AiResponseData = {
content: string;
choices?: AiChoiceOption[];
interactionType?: 'text' | 'food_confirmation' | 'selection';
pendingData?: any;
context?: any;
};
// 重构后的消息数据结构
type ChatMessage = {
id: string;
role: Role;
content: string; // 文本内容
attachments?: MessageAttachment[]; // 附件列表
choices?: AiChoiceOption[]; // 选择选项（仅用于assistant消息）
interactionType?: string; // 交互类型
pendingData?: any; // 待确认数据
context?: any; // 上下文信息
};
// 卡片类型常量定义
@@ -115,6 +155,7 @@ export default function CoachScreen() {
const [weightInputs, setWeightInputs] = useState<Record<string, string>>({});
const [showDietPhotoActionSheet, setShowDietPhotoActionSheet] = useState(false);
const [currentCardId, setCurrentCardId] = useState<string | null>(null);
const [pendingChoiceData, setPendingChoiceData] = useState<Record<string, any>>({});
const planDraft = useAppSelector((s) => s.trainingPlan?.draft);
const checkin = useAppSelector((s) => s.checkin || {});
@@ -529,18 +570,22 @@ export default function CoachScreen() {
]);
}
async function sendStreamWithConfirmation(text: string, selectedChoiceId: string, confirmationData: any) {
// 发送确认选择的特殊请求
const historyForServer = convertToServerMessages(messages);
const cid = ensureConversationId();
const body = {
conversationId: cid,
messages: [...historyForServer, { role: 'user' as const, content: text }],
selectedChoiceId,
confirmationData,
stream: false, // 确认阶段使用非流式
};
await sendRequestInternal(body, text);
}
async function sendStream(text: string, imageUrls: string[] = []) {
const tokenExists = !!getAuthToken();
try { console.log('[AI_CHAT][ui] send start', { tokenExists, conversationId, textPreview: text.slice(0, 50), imageUrls }); } catch { }
// 终止上一次未完成的流
if (streamAbortRef.current) {
try { console.log('[AI_CHAT][ui] abort previous stream'); } catch { }
try { streamAbortRef.current.abort(); } catch { }
streamAbortRef.current = null;
}
// 发送 body：尽量提供历史消息，后端会优先使用 conversationId 关联上下文
const historyForServer = convertToServerMessages(messages);
const cid = ensureConversationId();
const body = {
@@ -550,6 +595,20 @@ export default function CoachScreen() {
stream: true,
};
await sendRequestInternal(body, text, imageUrls);
}
async function sendRequestInternal(body: any, text: string, imageUrls: string[] = []) {
const tokenExists = !!getAuthToken();
try { console.log('[AI_CHAT][ui] send start', { tokenExists, conversationId, textPreview: text.slice(0, 50), imageUrls, stream: body.stream }); } catch { }
// 终止上一次未完成的流
if (streamAbortRef.current) {
try { console.log('[AI_CHAT][ui] abort previous stream'); } catch { }
try { streamAbortRef.current.abort(); } catch { }
streamAbortRef.current = null;
}
// 在 UI 中先放置占位回答，随后持续增量更新
const assistantId = `a_${Date.now()}`;
const userMsgId = `u_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
@@ -574,6 +633,54 @@ export default function CoachScreen() {
setIsSending(true);
setIsStreaming(true);
// 如果是非流式请求，直接调用API并处理响应
if (!body.stream) {
try {
const response = await api.post<{ conversationId?: string; data?: AiResponseData; text?: string }>('/api/ai-coach/chat', body);
setIsSending(false);
setIsStreaming(false);
// 处理响应
if (response.data) {
// 结构化响应（可能包含选择选项）
const assistantMsg: ChatMessage = {
id: assistantId,
role: 'assistant',
content: response.data.content,
choices: response.data.choices,
interactionType: response.data.interactionType,
pendingData: response.data.pendingData,
context: response.data.context,
};
setMessages((prev) => prev.map((msg) =>
msg.id === assistantId ? assistantMsg : msg
));
} else if (response.text) {
// 简单文本响应
setMessages((prev) => prev.map((msg) =>
msg.id === assistantId ? { ...msg, content: response.text || '（空响应）' } : msg
));
}
if (response.conversationId && !conversationId) {
setConversationId(response.conversationId);
}
pendingAssistantIdRef.current = null;
return;
} catch (e: any) {
setIsSending(false);
setIsStreaming(false);
pendingAssistantIdRef.current = null;
setMessages((prev) => prev.map((msg) =>
msg.id === assistantId ? { ...msg, content: '抱歉，请求失败，请稍后再试。' } : msg
));
throw e;
}
}
let receivedAnyChunk = false;
const updateAssistantContent = (delta: string) => {
@@ -591,6 +698,42 @@ export default function CoachScreen() {
const onChunk = (chunk: string) => {
receivedAnyChunk = true;
const atBottomNow = isAtBottom;
// 尝试解析是否为JSON结构化数据（可能是确认选项）
try {
const parsed = JSON.parse(chunk);
if (parsed && parsed.data && parsed.data.choices) {
// 处理结构化响应（包含选择选项）
const assistantMsg: ChatMessage = {
id: assistantId,
role: 'assistant',
content: parsed.data.content,
choices: parsed.data.choices,
interactionType: parsed.data.interactionType,
pendingData: parsed.data.pendingData,
context: parsed.data.context,
};
setMessages((prev) => prev.map((msg) =>
msg.id === assistantId ? assistantMsg : msg
));
// 处理conversationId
if (parsed.conversationId && !conversationId) {
setConversationId(parsed.conversationId);
}
// 结束流式状态
setIsSending(false);
setIsStreaming(false);
streamAbortRef.current = null;
pendingAssistantIdRef.current = null;
return;
}
} catch {
// 不是JSON，继续作为普通文本处理
}
updateAssistantContent(chunk);
if (atBottomNow) {
// 在底部时，持续开启自动滚动，并主动触发一次滚动以避免极小增量未触发 onContentSizeChange 的情况
@@ -994,6 +1137,44 @@ export default function CoachScreen() {
);
}
// 检查是否有选择选项需要显示
if (item.choices && item.choices.length > 0 && item.interactionType === 'food_confirmation') {
return (
<View style={{ gap: 12 }}>
<Markdown style={markdownStyles} mergeStyle>
{item.content || ''}
</Markdown>
<View style={styles.choicesContainer}>
{item.choices.map((choice) => (
<TouchableOpacity
key={choice.id}
accessibilityRole="button"
style={[
styles.choiceButton,
choice.recommended && styles.choiceButtonRecommended
]}
onPress={() => handleChoiceSelection(choice, item)}
>
<View style={styles.choiceContent}>
<Text style={[
styles.choiceLabel,
choice.recommended && styles.choiceLabelRecommended
]}>
{choice.label}
</Text>
{choice.recommended && (
<View style={styles.recommendedBadge}>
<Text style={styles.recommendedText}>推荐</Text>
</View>
)}
</View>
</TouchableOpacity>
))}
</View>
</View>
);
}
return (
<Markdown style={markdownStyles} mergeStyle>
{item.content || ''}
@@ -1168,6 +1349,25 @@ export default function CoachScreen() {
}
}
async function handleChoiceSelection(choice: AiChoiceOption, message: ChatMessage) {
try {
console.log('[CHOICE] Selection:', { choiceId: choice.id, messageId: message.id });
// 构建确认请求
const confirmationText = `我选择记录${choice.label}`;
// 发送确认消息，包含选择的数据
await sendStreamWithConfirmation(confirmationText, choice.id, {
selectedOption: choice.value,
imageUrl: message.pendingData?.imageUrl
});
} catch (e: any) {
console.error('[CHOICE] Selection failed:', e);
Alert.alert('选择失败', e?.message || '选择失败，请重试');
}
}
return (
<View style={[styles.screen, { backgroundColor: theme.background }]}>
{/* 顶部标题区域，显示教练名称、新建会话和历史按钮 */}
@@ -1873,6 +2073,47 @@ const styles = StyleSheet.create({
fontSize: 14,
color: '#192126',
},
// 选择选项相关样式
choicesContainer: {
gap: 8,
},
choiceButton: {
backgroundColor: 'rgba(255,255,255,0.9)',
borderWidth: 1,
borderColor: 'rgba(187,242,70,0.3)',
borderRadius: 12,
padding: 12,
},
choiceButtonRecommended: {
borderColor: 'rgba(187,242,70,0.6)',
backgroundColor: 'rgba(187,242,70,0.1)',
},
choiceContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
choiceLabel: {
fontSize: 15,
fontWeight: '600',
color: '#192126',
flex: 1,
},
choiceLabelRecommended: {
color: '#2D5016',
},
recommendedBadge: {
backgroundColor: 'rgba(187,242,70,0.8)',
borderRadius: 6,
paddingHorizontal: 8,
paddingVertical: 2,
marginLeft: 8,
},
recommendedText: {
fontSize: 12,
fontWeight: '700',
color: '#2D5016',
},
});
const markdownStyles = {

250
docs/food-confirmation-implementation.md Normal file
View File

@@ -0,0 +1,250 @@
# 饮食记录确认流程客户端实现
## 概述
已完成对客户端的改动，支持饮食记录确认流程的新API结构。实现了对非流式JSON响应的处理，能够正确显示食物选择选项，并支持用户确认选择。
## 主要改动
### 1. 数据结构扩展
在 `app/(tabs)/coach.tsx` 中添加了新的类型定义：
```typescript
// AI选择选项数据结构
type AiChoiceOption = {
id: string;
label: string;
value: any;
recommended?: boolean;
};
// 餐次类型
type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
// 食物确认选项数据结构
type FoodConfirmationOption = {
id: string;
label: string;
foodName: string;
portion: string;
calories: number;
mealType: MealType;
nutritionData: {
proteinGrams?: number;
carbohydrateGrams?: number;
fatGrams?: number;
fiberGrams?: number;
};
};
// AI响应数据结构
type AiResponseData = {
content: string;
choices?: AiChoiceOption[];
interactionType?: 'text' | 'food_confirmation' | 'selection';
pendingData?: any;
context?: any;
};
```
### 2. 消息结构扩展
扩展了 `ChatMessage` 类型以支持新的字段：
```typescript
type ChatMessage = {
id: string;
role: Role;
content: string;
attachments?: MessageAttachment[];
choices?: AiChoiceOption[]; // 新增：选择选项
interactionType?: string; // 新增：交互类型
pendingData?: any; // 新增：待确认数据
context?: any; // 新增：上下文信息
};
```
### 3. 响应处理逻辑
#### 支持非流式JSON响应
修改了 `sendRequestInternal` 函数以检测和处理非流式JSON响应：
```typescript
// 如果是非流式请求，直接调用API并处理响应
if (!body.stream) {
try {
const response = await api.post<{ conversationId?: string; data?: AiResponseData; text?: string }>('/api/ai-coach/chat', body);
// 处理响应
if (response.data) {
// 结构化响应（可能包含选择选项）
const assistantMsg: ChatMessage = {
id: assistantId,
role: 'assistant',
content: response.data.content,
choices: response.data.choices,
interactionType: response.data.interactionType,
pendingData: response.data.pendingData,
context: response.data.context,
};
// ... 更新消息状态
}
// ...
}
}
```
#### 流式响应中的JSON检测
在流式响应处理中添加了JSON检测逻辑：
```typescript
const onChunk = (chunk: string) => {
// 尝试解析是否为JSON结构化数据（可能是确认选项）
try {
const parsed = JSON.parse(chunk);
if (parsed && parsed.data && parsed.data.choices) {
// 处理结构化响应（包含选择选项）
// ... 创建带选择选项的消息
return;
}
} catch {
// 不是JSON，继续作为普通文本处理
}
// ... 正常的文本流处理
};
```
### 4. 选择选项UI组件
在 `renderBubbleContent` 函数中添加了选择选项的渲染逻辑：
```typescript
// 检查是否有选择选项需要显示
if (item.choices && item.choices.length > 0 && item.interactionType === 'food_confirmation') {
return (
<View style={{ gap: 12 }}>
<Markdown style={markdownStyles} mergeStyle>
{item.content || ''}
</Markdown>
<View style={styles.choicesContainer}>
{item.choices.map((choice) => (
<TouchableOpacity
key={choice.id}
style={[
styles.choiceButton,
choice.recommended && styles.choiceButtonRecommended
]}
onPress={() => handleChoiceSelection(choice, item)}
>
<View style={styles.choiceContent}>
<Text style={[
styles.choiceLabel,
choice.recommended && styles.choiceLabelRecommended
]}>
{choice.label}
</Text>
{choice.recommended && (
<View style={styles.recommendedBadge}>
<Text style={styles.recommendedText}>推荐</Text>
</View>
)}
</View>
</TouchableOpacity>
))}
</View>
</View>
);
}
```
### 5. 选择确认逻辑
实现了 `handleChoiceSelection` 函数处理用户选择：
```typescript
async function handleChoiceSelection(choice: AiChoiceOption, message: ChatMessage) {
try {
// 构建确认请求
const confirmationText = `我选择记录${choice.label}`;
// 发送确认消息，包含选择的数据
await sendStreamWithConfirmation(confirmationText, choice.id, {
selectedOption: choice.value,
imageUrl: message.pendingData?.imageUrl
});
} catch (e: any) {
Alert.alert('选择失败', e?.message || '选择失败，请重试');
}
}
```
### 6. 确认数据发送
添加了 `sendStreamWithConfirmation` 函数：
```typescript
async function sendStreamWithConfirmation(text: string, selectedChoiceId: string, confirmationData: any) {
const historyForServer = convertToServerMessages(messages);
const cid = ensureConversationId();
const body = {
conversationId: cid,
messages: [...historyForServer, { role: 'user' as const, content: text }],
selectedChoiceId,
confirmationData,
stream: false, // 确认阶段使用非流式
};
await sendRequestInternal(body, text);
}
```
### 7. UI样式
添加了选择选项相关的样式：
```typescript
choicesContainer: {
gap: 8,
},
choiceButton: {
backgroundColor: 'rgba(255,255,255,0.9)',
borderWidth: 1,
borderColor: 'rgba(187,242,70,0.3)',
borderRadius: 12,
padding: 12,
},
choiceButtonRecommended: {
borderColor: 'rgba(187,242,70,0.6)',
backgroundColor: 'rgba(187,242,70,0.1)',
},
// ... 其他相关样式
```
## 使用流程
1. **用户发送饮食图片**：用户点击"#记饮食"并上传食物图片
2. **AI识别返回选项**：服务器返回食物识别结果和确认选项（非流式JSON）
3. **显示选择选项**：客户端渲染食物选择选项，推荐项目带有特殊标识
4. **用户选择确认**：用户点击某个选项
5. **发送确认数据**：客户端发送确认请求，包含选择的食物数据
6. **记录完成**：服务器记录饮食数据并返回确认消息
## 兼容性
- 保持对现有流式文本响应的完全兼容
- 自动检测响应类型（JSON vs 文本流）
- 旧的饮食记录方式（文字输入）继续正常工作
- 缓存和会话管理支持新的消息结构
## 技术要点
1. **响应类型检测**：客户端能够自动识别JSON结构化响应和普通文本流
2. **状态管理**：新增状态正确地保存到本地缓存
3. **用户体验**：选择选项有清晰的视觉反馈，推荐选项突出显示
4. **错误处理**：完整的错误处理机制，确保用户体验流畅
5. **性能优化**：避免不必要的重渲染，保持界面响应性
这个实现完全符合API文档的要求，支持饮食记录的两阶段确认流程，并保持了与现有功能的兼容性。

5
services/aiCoachSession.ts
View File

@@ -4,6 +4,11 @@ export type AiCoachChatMessage = {
id: string;
role: 'user' | 'assistant';
content: string;
attachments?: any[];
choices?: any[];
interactionType?: string;
pendingData?: any;
context?: any;
};
export type AiCoachSessionCache = {