[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:
2026-06-15 10:59:50 +09:00
parent b9f5674f51
commit a8446d0c88
2 changed files with 55 additions and 18 deletions

View File

@@ -27,21 +27,26 @@ 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 이
mainAxisSize: MainAxisSize.min, // 길거나 summary 가 multi-line 일 때 잘리지 않고 스크롤되게 한다.
crossAxisAlignment: CrossAxisAlignment.start, content: SingleChildScrollView(
children: [ child: Column(
Text(tool.description, style: theme.textTheme.bodyMedium), mainAxisSize: MainAxisSize.min,
const SizedBox(height: 12), crossAxisAlignment: CrossAxisAlignment.start,
Container( children: [
padding: const EdgeInsets.all(12), Text(tool.description, style: theme.textTheme.bodyMedium),
decoration: BoxDecoration( const SizedBox(height: 12),
color: theme.colorScheme.surfaceContainerHighest, Container(
borderRadius: BorderRadius.circular(8), width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(8),
),
child: Text(summary),
), ),
child: Text(summary), ],
), ),
],
), ),
actions: [ actions: [
TextButton( TextButton(

View File

@@ -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)),
), ),
); );
} }