[05-Designer] #260 chat UX polish (QA 인수 4건)
QA round 2 인수 노트의 UX 항목 정돈. blocker 아니었음 — Designer 단계
의무 폴리시.
1) ToolCallChatMessage 라벨 한국어화
- chat_screen.dart: _kToolKoreanLabels 맵 추가. 6 tool 모두 한국어
라벨 (예: add_habit → '습관 추가'). 미매핑 tool 은 raw name fallback.
2) ConfirmDialog 좁은 화면 reflow
- confirm_gate.dart: AlertDialog content 를 SingleChildScrollView 로
감쌈. summary box width=double.infinity (좌측 정렬 안정).
3) Streaming cursor 다크모드 contrast
- chat_screen.dart: ▍ 문자를 Text.rich 로 분리해 colorScheme.primary
적용. 다크 모드에서도 onSurface 본문 대비 cursor 가 식별됨.
4) AppBar tooltip 명료성
- chat_screen.dart: '새 대화' → '새 대화 (이전 기록 비우기)'.
history reset 의미 명시.
회귀
- 154 passed (1 skip), 회귀 0
- flutter analyze: clean
Refs #260
This commit is contained in:
@@ -27,13 +27,17 @@ class ConfirmGate {
|
|||||||
final theme = Theme.of(ctx);
|
final theme = Theme.of(ctx);
|
||||||
return AlertDialog(
|
return AlertDialog(
|
||||||
title: const Text('이 작업을 수행할까요?'),
|
title: const Text('이 작업을 수행할까요?'),
|
||||||
content: Column(
|
// SingleChildScrollView 로 감싸 좁은 모바일 화면에서 description 이
|
||||||
|
// 길거나 summary 가 multi-line 일 때 잘리지 않고 스크롤되게 한다.
|
||||||
|
content: SingleChildScrollView(
|
||||||
|
child: Column(
|
||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
Text(tool.description, style: theme.textTheme.bodyMedium),
|
Text(tool.description, style: theme.textTheme.bodyMedium),
|
||||||
const SizedBox(height: 12),
|
const SizedBox(height: 12),
|
||||||
Container(
|
Container(
|
||||||
|
width: double.infinity,
|
||||||
padding: const EdgeInsets.all(12),
|
padding: const EdgeInsets.all(12),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: theme.colorScheme.surfaceContainerHighest,
|
color: theme.colorScheme.surfaceContainerHighest,
|
||||||
@@ -43,6 +47,7 @@ class ConfirmGate {
|
|||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
),
|
||||||
actions: [
|
actions: [
|
||||||
TextButton(
|
TextButton(
|
||||||
onPressed: () => Navigator.of(ctx).pop(false),
|
onPressed: () => Navigator.of(ctx).pop(false),
|
||||||
|
|||||||
@@ -55,7 +55,7 @@ class _ChatScreenState extends ConsumerState<ChatScreen> {
|
|||||||
actions: [
|
actions: [
|
||||||
IconButton(
|
IconButton(
|
||||||
icon: const Icon(Icons.refresh),
|
icon: const Icon(Icons.refresh),
|
||||||
tooltip: '새 대화',
|
tooltip: '새 대화 (이전 기록 비우기)',
|
||||||
onPressed: () {
|
onPressed: () {
|
||||||
ref.read(chatSessionControllerProvider.notifier).clear();
|
ref.read(chatSessionControllerProvider.notifier).clear();
|
||||||
},
|
},
|
||||||
@@ -150,6 +150,19 @@ class _ChatScreenState extends ConsumerState<ChatScreen> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Human-friendly Korean labels for the 6 tools registered in
|
||||||
|
/// `ToolRegistry.defaults()`. Falls back to the raw tool name for any
|
||||||
|
/// future tool that hasn't been mapped yet — better to show the raw id
|
||||||
|
/// than to silently drop the message.
|
||||||
|
const Map<String, String> _kToolKoreanLabels = {
|
||||||
|
'search_catalog': '카탈로그 검색',
|
||||||
|
'query_protocol': '프로토콜 상세',
|
||||||
|
'list_active_habits': '활성 습관 조회',
|
||||||
|
'get_streak': '스트릭 조회',
|
||||||
|
'add_habit': '습관 추가',
|
||||||
|
'log_tracker_entry': '체크 기록',
|
||||||
|
};
|
||||||
|
|
||||||
class _MessageBubble extends StatelessWidget {
|
class _MessageBubble extends StatelessWidget {
|
||||||
final ChatMessage message;
|
final ChatMessage message;
|
||||||
final bool streaming;
|
final bool streaming;
|
||||||
@@ -168,14 +181,29 @@ class _MessageBubble extends StatelessWidget {
|
|||||||
text: m.text,
|
text: m.text,
|
||||||
);
|
);
|
||||||
case ModelChatMessage m:
|
case ModelChatMessage m:
|
||||||
|
// Streaming cursor uses primary so it stays discoverable in both
|
||||||
|
// light and dark themes (default onSurface low-contrasted with the
|
||||||
|
// surfaceContainerHighest bubble in dark mode).
|
||||||
return _bubble(
|
return _bubble(
|
||||||
context,
|
context,
|
||||||
align: Alignment.centerLeft,
|
align: Alignment.centerLeft,
|
||||||
color: theme.colorScheme.surfaceContainerHighest,
|
color: theme.colorScheme.surfaceContainerHighest,
|
||||||
textColor: theme.colorScheme.onSurface,
|
textColor: theme.colorScheme.onSurface,
|
||||||
text: m.text + (streaming ? '▍' : ''),
|
richText: streaming
|
||||||
|
? TextSpan(
|
||||||
|
children: [
|
||||||
|
TextSpan(text: m.text),
|
||||||
|
TextSpan(
|
||||||
|
text: '▍',
|
||||||
|
style: TextStyle(color: theme.colorScheme.primary),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
)
|
||||||
|
: null,
|
||||||
|
text: m.text,
|
||||||
);
|
);
|
||||||
case ToolCallChatMessage m:
|
case ToolCallChatMessage m:
|
||||||
|
final label = _kToolKoreanLabels[m.name] ?? m.name;
|
||||||
return Align(
|
return Align(
|
||||||
alignment: Alignment.center,
|
alignment: Alignment.center,
|
||||||
child: Container(
|
child: Container(
|
||||||
@@ -187,8 +215,9 @@ class _MessageBubble extends StatelessWidget {
|
|||||||
border: Border.all(color: theme.colorScheme.outlineVariant),
|
border: Border.all(color: theme.colorScheme.outlineVariant),
|
||||||
),
|
),
|
||||||
child: Text(
|
child: Text(
|
||||||
'🛠 ${m.name} → ${_toolResultLabel(m.result)}',
|
'🛠 $label → ${_toolResultLabel(m.result)}',
|
||||||
style: theme.textTheme.bodySmall,
|
style: theme.textTheme.bodySmall,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
@@ -212,6 +241,7 @@ class _MessageBubble extends StatelessWidget {
|
|||||||
required Color color,
|
required Color color,
|
||||||
required Color textColor,
|
required Color textColor,
|
||||||
required String text,
|
required String text,
|
||||||
|
TextSpan? richText,
|
||||||
}) {
|
}) {
|
||||||
return Align(
|
return Align(
|
||||||
alignment: align,
|
alignment: align,
|
||||||
@@ -225,7 +255,9 @@ class _MessageBubble extends StatelessWidget {
|
|||||||
color: color,
|
color: color,
|
||||||
borderRadius: BorderRadius.circular(12),
|
borderRadius: BorderRadius.circular(12),
|
||||||
),
|
),
|
||||||
child: Text(text, style: TextStyle(color: textColor)),
|
child: richText != null
|
||||||
|
? Text.rich(richText, style: TextStyle(color: textColor))
|
||||||
|
: Text(text, style: TextStyle(color: textColor)),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user