kasy-cli 1.21.8 → 1.22.0

package/templates/firebase/lib/features/{llm_chat/llm_chat_page.dart → ai_chat/ui/widgets/ai_chat_conversation_view.dart}

@@ -1,21 +1,61 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
-import 'package:kasy_kit/features/llm_chat/providers/llm_chat_notifier.dart';
-import 'package:kasy_kit/features/llm_chat/ui/widgets/llm_chat_avatars.dart';
-import 'package:kasy_kit/features/llm_chat/ui/widgets/llm_chat_composer.dart';
+import 'package:kasy_kit/features/ai_chat/providers/ai_chat_notifier.dart';
+import 'package:kasy_kit/features/ai_chat/providers/ai_conversations_notifier.dart';
+import 'package:kasy_kit/features/ai_chat/ui/widgets/ai_chat_avatars.dart';
+import 'package:kasy_kit/features/ai_chat/ui/widgets/ai_chat_composer.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 
-class LlmChatPage extends ConsumerStatefulWidget {
-  const LlmChatPage({super.key});
+/// Full-screen conversation page used on phones. Pushed on the root navigator
+/// so the bottom navigation bar is hidden — the composer needs the bottom edge.
+/// Clears the selected conversation when dismissed (back button or system pop).
+class AiChatConversationPage extends ConsumerWidget {
+  const AiChatConversationPage({super.key});
 
   @override
-  ConsumerState<LlmChatPage> createState() => _LlmChatPageState();
+  Widget build(BuildContext context, WidgetRef ref) {
+    return PopScope(
+      onPopInvokedWithResult: (didPop, _) {
+        if (didPop) {
+          ref.read(selectedConversationIdProvider.notifier).state = null;
+        }
+      },
+      child: Scaffold(
+        backgroundColor: context.colors.background,
+        body: Column(
+          children: [
+            KasyAppBar(
+              title: t.ai_chat.title,
+              onThemeToggle: () {
+                KasyHaptics.light(context);
+                ThemeProvider.of(context).toggle();
+              },
+            ),
+            const Expanded(child: AiChatConversationView()),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// The chat thread for the currently selected conversation: message list +
+/// composer. Has no chrome of its own — it scrolls *inside* whatever container
+/// hosts it (a rounded pane on desktop, a full page below the app bar on phone).
+class AiChatConversationView extends ConsumerStatefulWidget {
+  const AiChatConversationView({super.key});
+
+  @override
+  ConsumerState<AiChatConversationView> createState() =>
+      _AiChatConversationViewState();
 }
 
-class _LlmChatPageState extends ConsumerState<LlmChatPage> {
+class _AiChatConversationViewState
+    extends ConsumerState<AiChatConversationView> {
   final TextEditingController _controller = TextEditingController();
   final ScrollController _scrollController = ScrollController();
 
@@ -28,9 +68,9 @@ class _LlmChatPageState extends ConsumerState<LlmChatPage> {
 
   void _sendMessage() {
     final prompt = _controller.text.trim();
-    if (prompt.isEmpty || prompt.length > kLlmChatMaxMessageLength) return;
+    if (prompt.isEmpty || prompt.length > kAiChatMaxMessageLength) return;
     _controller.clear();
-    ref.read(llmChatNotifierProvider.notifier).sendMessage(prompt);
+    ref.read(aiChatNotifierProvider.notifier).sendMessage(prompt);
   }
 
   void _scrollToBottom() {
@@ -53,46 +93,19 @@ class _LlmChatPageState extends ConsumerState<LlmChatPage> {
 
   @override
   Widget build(BuildContext context) {
-    // Scroll to bottom whenever the message list changes.
-    ref.listen(llmChatNotifierProvider, (_, _) => _scrollToBottom());
+    // Scroll to bottom whenever the message list changes (new chunk / message).
+    ref.listen(aiChatNotifierProvider, (_, _) => _scrollToBottom());
 
-    final chatAsync = ref.watch(llmChatNotifierProvider);
+    final chatAsync = ref.watch(aiChatNotifierProvider);
 
-    return Scaffold(
-      backgroundColor: context.colors.background,
-      body: Stack(
-        fit: StackFit.expand,
-        children: [
-          Positioned.fill(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                Expanded(
-                  child: chatAsync.when(
-                    loading: () =>
-                        const Center(child: CircularProgressIndicator()),
-                    error: (_, _) =>
-                        Center(child: Text(t.llm_chat.error_network)),
-                    data: (chatState) => _buildBody(context, chatState),
-                  ),
-                ),
-              ],
-            ),
-          ),
-          Positioned(
-            top: 0,
-            left: 0,
-            right: 0,
-            child: KasyAppBar(
-              title: t.llm_chat.title,
-            ),
-          ),
-        ],
-      ),
+    return chatAsync.when(
+      loading: () => const Center(child: CircularProgressIndicator()),
+      error: (_, _) => Center(child: Text(t.ai_chat.error_network)),
+      data: (chatState) => _buildBody(context, chatState),
     );
   }
 
-  Widget _buildBody(BuildContext context, LlmChatState chatState) {
+  Widget _buildBody(BuildContext context, AiChatState chatState) {
     final messages = chatState.messages;
     final isReplying = chatState.isReplying;
 
@@ -104,21 +117,19 @@ class _LlmChatPageState extends ConsumerState<LlmChatPage> {
       children: [
         Expanded(
           child: messages.isEmpty && !isReplying
-              ? _EmptyState()
+              ? const _EmptyState()
               : ScrollConfiguration(
                   behavior: const KasyKitScrollBehavior(),
                   child: ListView.builder(
                     controller: _scrollController,
-                    padding: EdgeInsets.fromLTRB(
+                    padding: const EdgeInsets.fromLTRB(
                       KasySpacing.pageHorizontalGutter,
-                      kasyAppBarBodyTopOverlap(context) +
-                          KasySpacing.belowChromeContentGap,
+                      KasySpacing.md,
                       KasySpacing.pageHorizontalGutter,
                       KasySpacing.md,
                     ),
                     // +1 for the typing indicator shown before the first SSE chunk
-                    itemCount:
-                        messages.length + (showTypingIndicator ? 1 : 0),
+                    itemCount: messages.length + (showTypingIndicator ? 1 : 0),
                     itemBuilder: (context, index) {
                       if (showTypingIndicator && index == messages.length) {
                         return const _TypingIndicatorRow();
@@ -141,7 +152,7 @@ class _LlmChatPageState extends ConsumerState<LlmChatPage> {
               KasySpacing.pageHorizontalGutter,
               KasySpacing.md,
             ),
-            child: LlmChatComposer(
+            child: AiChatComposer(
               controller: _controller,
               isReplying: isReplying,
               onSend: _sendMessage,
@@ -154,6 +165,8 @@ class _LlmChatPageState extends ConsumerState<LlmChatPage> {
 }
 
 class _EmptyState extends StatelessWidget {
+  const _EmptyState();
+
   @override
   Widget build(BuildContext context) {
     return Center(
@@ -164,8 +177,8 @@ class _EmptyState extends StatelessWidget {
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-            const LlmChatAssistantAvatar(
-              diameter: kLlmChatEmptyAvatarDiameter,
+            const AiChatAssistantAvatar(
+              diameter: kAiChatEmptyAvatarDiameter,
               showShadow: true,
             ),
             const SizedBox(height: KasySpacing.md),
@@ -179,7 +192,7 @@ class _EmptyState extends StatelessWidget {
             ),
             const SizedBox(height: KasySpacing.xs),
             Text(
-              t.llm_chat.empty_state,
+              t.ai_chat.empty_state,
               textAlign: TextAlign.center,
               style: context.textTheme.bodyLarge?.copyWith(
                 color: context.colors.muted,
@@ -213,17 +226,18 @@ class _ChatBubble extends StatelessWidget {
         borderRadius: BorderRadius.only(
           topLeft: const Radius.circular(16),
           topRight: const Radius.circular(16),
-          bottomLeft:
-              isUser ? const Radius.circular(16) : const Radius.circular(4),
-          bottomRight:
-              isUser ? const Radius.circular(4) : const Radius.circular(16),
+          bottomLeft: isUser
+              ? const Radius.circular(16)
+              : const Radius.circular(4),
+          bottomRight: isUser
+              ? const Radius.circular(4)
+              : const Radius.circular(16),
         ),
       ),
       child: Text(
         message.content,
         style: context.textTheme.bodyMedium?.copyWith(
-          color:
-              isUser ? context.colors.onPrimary : context.colors.onBackground,
+          color: isUser ? context.colors.onPrimary : context.colors.onBackground,
           height: 1.4,
         ),
       ),
@@ -238,7 +252,7 @@ class _ChatBubble extends StatelessWidget {
           children: [
             Flexible(child: bubble),
             const SizedBox(width: KasySpacing.xs),
-            const LlmChatUserAvatar(),
+            const AiChatUserAvatar(),
           ],
         ),
       );
@@ -249,7 +263,7 @@ class _ChatBubble extends StatelessWidget {
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          const LlmChatAssistantAvatar(),
+          const AiChatAssistantAvatar(),
           const SizedBox(width: KasySpacing.xs),
           Flexible(child: bubble),
         ],
@@ -268,7 +282,7 @@ class _TypingIndicatorRow extends StatelessWidget {
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          LlmChatAssistantAvatar(),
+          AiChatAssistantAvatar(),
           SizedBox(width: KasySpacing.xs),
           _TypingIndicator(),
         ],
@@ -328,10 +342,9 @@ class _TypingIndicatorState extends State<_TypingIndicator>
             animation: _controller,
             builder: (context, _) {
               // Each dot bounces at a slightly different phase.
-              final double phase =
-                  (_controller.value - i * 0.2).clamp(0.0, 1.0);
-              final double scale = 1.0 +
-                  0.4 * (phase < 0.5 ? phase * 2 : (1.0 - phase) * 2);
+              final double phase = (_controller.value - i * 0.2).clamp(0.0, 1.0);
+              final double scale =
+                  1.0 + 0.4 * (phase < 0.5 ? phase * 2 : (1.0 - phase) * 2);
               return Transform.scale(
                 scale: scale,
                 child: Container(

package/templates/firebase/lib/features/ai_chat/ui/widgets/ai_conversation_list.dart

@@ -0,0 +1,285 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
+import 'package:kasy_kit/features/ai_chat/api/ai_chat_conversation_entity.dart';
+import 'package:kasy_kit/features/ai_chat/providers/ai_conversations_notifier.dart';
+import 'package:kasy_kit/features/ai_chat/ui/widgets/ai_chat_conversation_view.dart';
+import 'package:kasy_kit/features/ai_chat/ui/widgets/ai_conversation_tile.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+/// The conversation list pane (Figma `mail` list). Creating a new conversation
+/// has a single entry point per layout to avoid duplication:
+/// - wide: a round "+" button in the header (the app bar / web header own the
+///   top chrome elsewhere, so the title lives here).
+/// - phone: a full-width button pinned at the bottom (Figma "New Email"); the
+///   title is shown by the page app bar, so there is no header here.
+///
+/// Selecting a tile updates [selectedConversationIdProvider]; the parent shell
+/// reacts (open the thread on phones, swap the detail pane on wide layouts).
+class AiConversationList extends ConsumerWidget {
+  const AiConversationList({
+    super.key,
+    this.swipeToDelete = false,
+    this.isPhone = false,
+  });
+
+  /// When true (phones), each row can be swiped to reveal a delete action and
+  /// the create action becomes a pinned bottom button instead of a header orb.
+  final bool swipeToDelete;
+  final bool isPhone;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final conversationsAsync = ref.watch(aiConversationsNotifierProvider);
+    final selectedId = ref.watch(selectedConversationIdProvider);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        if (!isPhone) _Header(onCreate: () => _createConversation(context, ref)),
+        Expanded(
+          child: conversationsAsync.when(
+            loading: () => const Center(child: CircularProgressIndicator()),
+            error: (_, _) => Center(child: Text(t.ai_chat.error_network)),
+            data: (conversations) {
+              if (conversations.isEmpty) return const _EmptyConversations();
+              return ScrollConfiguration(
+                behavior: const KasyKitScrollBehavior(),
+                child: ListView.separated(
+                  padding: const EdgeInsets.fromLTRB(
+                    KasySpacing.smd,
+                    KasySpacing.smd,
+                    KasySpacing.smd,
+                    KasySpacing.md,
+                  ),
+                  itemCount: conversations.length,
+                  separatorBuilder: (_, _) => isPhone
+                      // Horizontal hairline between rows (sidebar/header line).
+                      ? Divider(
+                          height: KasySpacing.xs,
+                          thickness: 0.5,
+                          color: context.colors.border,
+                        )
+                      : const SizedBox(height: KasySpacing.xs),
+                  itemBuilder: (context, index) {
+                    final conversation = conversations[index];
+                    return _buildRow(
+                      context,
+                      ref,
+                      conversation,
+                      selected: conversation.id == selectedId,
+                    );
+                  },
+                ),
+              );
+            },
+          ),
+        ),
+        if (isPhone) _BottomCreateButton(onCreate: () => _createConversation(context, ref)),
+      ],
+    );
+  }
+
+  Widget _buildRow(
+    BuildContext context,
+    WidgetRef ref,
+    AiChatConversationEntity conversation, {
+    required bool selected,
+  }) {
+    final tile = AiConversationTile(
+      conversation: conversation,
+      selected: selected,
+      onTap: () {
+        KasyHaptics.light(context);
+        _open(context, ref, conversation.id);
+      },
+      onDelete: () => _confirmDelete(context, ref, conversation),
+    );
+
+    if (!swipeToDelete) return tile;
+
+    return Dismissible(
+      key: ValueKey(conversation.id),
+      direction: DismissDirection.endToStart,
+      background: _swipeDeleteBackground(context),
+      confirmDismiss: (_) async {
+        final bool confirmed = await _askDelete(context);
+        if (confirmed) {
+          await ref
+              .read(aiConversationsNotifierProvider.notifier)
+              .delete(conversation.id);
+        }
+        // The list rebuilds from provider state after delete, so we never let
+        // Dismissible remove the row itself (avoids a stale-widget assertion).
+        return false;
+      },
+      child: tile,
+    );
+  }
+
+  Widget _swipeDeleteBackground(BuildContext context) {
+    return Container(
+      alignment: Alignment.centerRight,
+      padding: const EdgeInsets.symmetric(horizontal: KasySpacing.lg),
+      decoration: BoxDecoration(
+        color: context.colors.surfaceErrorSoft,
+        borderRadius: BorderRadius.circular(16),
+      ),
+      child: Icon(KasyIcons.trash, color: context.colors.error),
+    );
+  }
+
+  /// Selects a conversation; on phones it also pushes the full-screen thread
+  /// (a root-navigator route, so the bottom nav bar is hidden).
+  void _open(BuildContext context, WidgetRef ref, String conversationId) {
+    ref.read(selectedConversationIdProvider.notifier).state = conversationId;
+    if (isPhone) {
+      Navigator.of(context, rootNavigator: true).push(
+        MaterialPageRoute(builder: (_) => const AiChatConversationPage()),
+      );
+    }
+  }
+
+  Future<void> _createConversation(BuildContext context, WidgetRef ref) async {
+    KasyHaptics.light(context);
+    final id = await ref.read(aiConversationsNotifierProvider.notifier).create();
+    if (id != null && context.mounted) {
+      _open(context, ref, id);
+    }
+  }
+
+  Future<void> _confirmDelete(
+    BuildContext context,
+    WidgetRef ref,
+    AiChatConversationEntity conversation,
+  ) async {
+    final bool confirmed = await _askDelete(context);
+    if (confirmed) {
+      await ref
+          .read(aiConversationsNotifierProvider.notifier)
+          .delete(conversation.id);
+    }
+  }
+
+  Future<bool> _askDelete(BuildContext context) async {
+    bool confirmed = false;
+    await showKasyConfirmDialog(
+      context,
+      title: t.ai_chat.delete_title,
+      message: t.ai_chat.delete_message,
+      cancelLabel: t.ai_chat.delete_cancel,
+      confirmLabel: t.ai_chat.delete_confirm,
+      destructive: true,
+      onConfirm: () => confirmed = true,
+    );
+    return confirmed;
+  }
+}
+
+class _Header extends StatelessWidget {
+  const _Header({required this.onCreate});
+
+  final VoidCallback onCreate;
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      // Horizontal hairline matching the sidebar/web-header bottom border.
+      decoration: BoxDecoration(
+        border: Border(
+          bottom: BorderSide(color: context.colors.border, width: 0.5),
+        ),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(
+          KasySpacing.lg,
+          KasySpacing.md,
+          KasySpacing.smd,
+          KasySpacing.md,
+        ),
+        child: Row(
+          children: [
+            Expanded(
+              child: Text(
+                t.ai_chat.title,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: context.textTheme.titleLarge?.copyWith(
+                  fontWeight: FontWeight.w800,
+                  color: context.colors.onBackground,
+                ),
+              ),
+            ),
+            KasyButton.iconOnly(
+              icon: KasyIcons.add,
+              onPressed: onCreate,
+              size: KasyButtonSize.small,
+              iconOnlyLayoutExtent: 36,
+              iconGlyphSize: 20,
+              semanticLabel: t.ai_chat.new_conversation,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _BottomCreateButton extends StatelessWidget {
+  const _BottomCreateButton({required this.onCreate});
+
+  final VoidCallback onCreate;
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      // Horizontal hairline above the pinned action (matches sidebar footer).
+      decoration: BoxDecoration(
+        border: Border(
+          top: BorderSide(color: context.colors.border, width: 0.5),
+        ),
+      ),
+      child: SafeArea(
+        top: false,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(
+            KasySpacing.md,
+            KasySpacing.sm,
+            KasySpacing.md,
+            KasySpacing.sm,
+          ),
+          child: KasyButton(
+            label: t.ai_chat.new_conversation,
+            icon: KasyIcons.add,
+            expand: true,
+            onPressed: onCreate,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _EmptyConversations extends StatelessWidget {
+  const _EmptyConversations();
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(KasySpacing.lg),
+        child: Text(
+          t.ai_chat.conversations_empty,
+          textAlign: TextAlign.center,
+          style: context.textTheme.bodyLarge?.copyWith(
+            color: context.colors.muted,
+            height: 1.4,
+          ),
+        ),
+      ),
+    );
+  }
+}