kasy-cli 1.2.1

package/templates/firebase/lib/features/llm_chat/llm_chat_page.dart

@@ -0,0 +1,352 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/components/components.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/i18n/translations.g.dart';
+
+class LlmChatPage extends ConsumerStatefulWidget {
+  const LlmChatPage({super.key});
+
+  @override
+  ConsumerState<LlmChatPage> createState() => _LlmChatPageState();
+}
+
+class _LlmChatPageState extends ConsumerState<LlmChatPage> {
+  final TextEditingController _controller = TextEditingController();
+  final ScrollController _scrollController = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+    // Scroll to bottom once the history finishes loading.
+    WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToBottom());
+  }
+
+  void _sendMessage() {
+    final prompt = _controller.text.trim();
+    if (prompt.isEmpty || prompt.length > kLlmChatMaxMessageLength) return;
+    _controller.clear();
+    ref.read(llmChatNotifierProvider.notifier).sendMessage(prompt);
+  }
+
+  void _scrollToBottom() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!_scrollController.hasClients) return;
+      _scrollController.animateTo(
+        _scrollController.position.maxScrollExtent,
+        duration: const Duration(milliseconds: 250),
+        curve: Curves.easeOut,
+      );
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Scroll to bottom whenever the message list changes.
+    ref.listen(llmChatNotifierProvider, (_, _) => _scrollToBottom());
+
+    final chatAsync = ref.watch(llmChatNotifierProvider);
+
+    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,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildBody(BuildContext context, LlmChatState chatState) {
+    final messages = chatState.messages;
+    final isReplying = chatState.isReplying;
+
+    // Show the typing indicator only while waiting for the first SSE chunk.
+    // Once streaming starts the partial assistant bubble is already in [messages].
+    final showTypingIndicator = isReplying && !chatState.streamingStarted;
+
+    return Column(
+      children: [
+        Expanded(
+          child: messages.isEmpty && !isReplying
+              ? _EmptyState()
+              : ScrollConfiguration(
+                  behavior: const KasyKitScrollBehavior(),
+                  child: ListView.builder(
+                    controller: _scrollController,
+                    padding: EdgeInsets.fromLTRB(
+                      KasySpacing.pageHorizontalGutter,
+                      kasyAppBarBodyTopOverlap(context) +
+                          KasySpacing.belowChromeContentGap,
+                      KasySpacing.pageHorizontalGutter,
+                      KasySpacing.md,
+                    ),
+                    // +1 for the typing indicator shown before the first SSE chunk
+                    itemCount:
+                        messages.length + (showTypingIndicator ? 1 : 0),
+                    itemBuilder: (context, index) {
+                      if (showTypingIndicator && index == messages.length) {
+                        return const _TypingIndicatorRow();
+                      }
+                      final message = messages[index];
+                      return _ChatBubble(
+                        message: message,
+                        isUser: message.role == 'user',
+                      );
+                    },
+                  ),
+                ),
+        ),
+        SafeArea(
+          top: false,
+          child: Padding(
+            padding: const EdgeInsets.fromLTRB(
+              KasySpacing.pageHorizontalGutter,
+              KasySpacing.sm,
+              KasySpacing.pageHorizontalGutter,
+              KasySpacing.md,
+            ),
+            child: LlmChatComposer(
+              controller: _controller,
+              isReplying: isReplying,
+              onSend: _sendMessage,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _EmptyState extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.pageHorizontalGutter,
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const LlmChatAssistantAvatar(
+              diameter: kLlmChatEmptyAvatarDiameter,
+              showShadow: true,
+            ),
+            const SizedBox(height: KasySpacing.md),
+            Text(
+              t.home.cards.assistant_title,
+              textAlign: TextAlign.center,
+              style: context.textTheme.titleMedium?.copyWith(
+                fontWeight: FontWeight.w600,
+                color: context.colors.onBackground,
+              ),
+            ),
+            const SizedBox(height: KasySpacing.xs),
+            Text(
+              t.llm_chat.empty_state,
+              textAlign: TextAlign.center,
+              style: context.textTheme.bodyLarge?.copyWith(
+                color: context.colors.muted,
+                height: 1.4,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _ChatBubble extends StatelessWidget {
+  const _ChatBubble({required this.message, required this.isUser});
+
+  final ChatMessage message;
+  final bool isUser;
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget bubble = Container(
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.smd,
+        vertical: KasySpacing.sm,
+      ),
+      decoration: BoxDecoration(
+        color: isUser
+            ? context.colors.primary
+            : context.colors.onBackground.withValues(alpha: 0.06),
+        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),
+        ),
+      ),
+      child: Text(
+        message.content,
+        style: context.textTheme.bodyMedium?.copyWith(
+          color:
+              isUser ? context.colors.onPrimary : context.colors.onBackground,
+          height: 1.4,
+        ),
+      ),
+    );
+
+    if (isUser) {
+      return Padding(
+        padding: const EdgeInsets.only(bottom: KasySpacing.sm),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            Flexible(child: bubble),
+            const SizedBox(width: KasySpacing.xs),
+            const LlmChatUserAvatar(),
+          ],
+        ),
+      );
+    }
+
+    return Padding(
+      padding: const EdgeInsets.only(bottom: KasySpacing.sm),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const LlmChatAssistantAvatar(),
+          const SizedBox(width: KasySpacing.xs),
+          Flexible(child: bubble),
+        ],
+      ),
+    );
+  }
+}
+
+class _TypingIndicatorRow extends StatelessWidget {
+  const _TypingIndicatorRow();
+
+  @override
+  Widget build(BuildContext context) {
+    return const Padding(
+      padding: EdgeInsets.only(bottom: KasySpacing.sm),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          LlmChatAssistantAvatar(),
+          SizedBox(width: KasySpacing.xs),
+          _TypingIndicator(),
+        ],
+      ),
+    );
+  }
+}
+
+/// Animated three-dot indicator shown while the assistant is generating a reply.
+class _TypingIndicator extends StatefulWidget {
+  const _TypingIndicator();
+
+  @override
+  State<_TypingIndicator> createState() => _TypingIndicatorState();
+}
+
+class _TypingIndicatorState extends State<_TypingIndicator>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 900),
+    )..repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.smd,
+        vertical: KasySpacing.sm,
+      ),
+      decoration: BoxDecoration(
+        color: context.colors.onBackground.withValues(alpha: 0.06),
+        borderRadius: const BorderRadius.only(
+          topLeft: Radius.circular(16),
+          topRight: Radius.circular(16),
+          bottomLeft: Radius.circular(4),
+          bottomRight: Radius.circular(16),
+        ),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        spacing: 4,
+        children: List.generate(3, (i) {
+          return AnimatedBuilder(
+            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);
+              return Transform.scale(
+                scale: scale,
+                child: Container(
+                  width: 6,
+                  height: 6,
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: context.colors.muted,
+                  ),
+                ),
+              );
+            },
+          );
+        }),
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/llm_chat/providers/llm_chat_notifier.dart

@@ -0,0 +1,315 @@
+import 'dart:convert';
+
+import 'package:dio/dio.dart';
+import 'package:firebase_auth/firebase_auth.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/core/config/app_env.dart';
+import 'package:kasy_kit/core/states/translations.dart';
+import 'package:kasy_kit/core/states/user_state_notifier.dart';
+import 'package:kasy_kit/features/llm_chat/api/llm_chat_api.dart';
+import 'package:kasy_kit/features/llm_chat/api/llm_chat_message_entity.dart';
+import 'package:logger/logger.dart';
+
+/// Maximum number of recent messages sent to the AI as context.
+///
+/// Lower values = fewer tokens = cheaper + faster responses.
+/// Higher values = more conversational memory but higher cost.
+///
+/// Each exchange = 2 messages (1 user + 1 assistant).
+/// Default: 20 messages = 10 exchanges of back-and-forth.
+///
+/// To change: update this constant and redeploy (no backend change needed).
+const int _kMaxContextMessages = 20;
+
+/// A single message in the chat conversation.
+class ChatMessage {
+  final String role; // 'user' or 'assistant'
+  final String content;
+
+  const ChatMessage({required this.role, required this.content});
+
+  factory ChatMessage.user(String content) =>
+      ChatMessage(role: 'user', content: content);
+
+  factory ChatMessage.assistant(String content) =>
+      ChatMessage(role: 'assistant', content: content);
+
+  factory ChatMessage.fromEntity(LlmChatMessageEntity entity) =>
+      ChatMessage(role: entity.role, content: entity.content);
+
+  LlmChatMessageEntity toEntity() => LlmChatMessageEntity(
+    role: role,
+    content: content,
+    createdAt: DateTime.now(),
+  );
+}
+
+/// UI state for the LLM chat screen.
+class LlmChatState {
+  final List<ChatMessage> messages;
+
+  /// True while the HTTP request to the LLM backend is in-flight.
+  final bool isReplying;
+
+  /// True once the first SSE chunk has been received.
+  /// While true the last message in [messages] is the partial assistant reply.
+  final bool streamingStarted;
+
+  const LlmChatState({
+    required this.messages,
+    this.isReplying = false,
+    this.streamingStarted = false,
+  });
+
+  LlmChatState copyWith({
+    List<ChatMessage>? messages,
+    bool? isReplying,
+    bool? streamingStarted,
+  }) {
+    return LlmChatState(
+      messages: messages ?? this.messages,
+      isReplying: isReplying ?? this.isReplying,
+      streamingStarted: streamingStarted ?? this.streamingStarted,
+    );
+  }
+}
+
+/// Manages LLM chat state: loads history from the backend on init,
+/// persists each message, and streams the assistant reply word-by-word via SSE.
+final llmChatNotifierProvider =
+    AsyncNotifierProvider<LlmChatNotifier, LlmChatState>(LlmChatNotifier.new);
+
+class LlmChatNotifier extends AsyncNotifier<LlmChatState> {
+  final Logger _logger = Logger();
+
+  @override
+  Future<LlmChatState> build() async {
+    final userId = ref.read(userStateNotifierProvider).user.idOrNull;
+    if (userId == null) return const LlmChatState(messages: []);
+
+    try {
+      final entities = await ref.read(llmChatApiProvider).loadMessages(userId);
+      return LlmChatState(
+        messages: entities.map(ChatMessage.fromEntity).toList(),
+      );
+    } catch (e) {
+      _logger.e('Failed to load LLM chat history: $e');
+      // Graceful fallback: start fresh if the backend is unavailable.
+      return const LlmChatState(messages: []);
+    }
+  }
+
+  /// Adds the user message to the conversation, persists it, then streams
+  /// the assistant reply chunk-by-chunk via SSE, updating state on each token.
+  Future<void> sendMessage(String prompt) async {
+    final current = switch (state) {
+      AsyncData(:final value) => value,
+      _ => null,
+    };
+    if (current == null || current.isReplying) return;
+
+    final userMsg = ChatMessage.user(prompt);
+    state = AsyncData(
+      current.copyWith(
+        messages: [...current.messages, userMsg],
+        isReplying: true,
+        streamingStarted: false,
+      ),
+    );
+
+    _persistMessage(userMsg);
+
+    // Pass only the last _kMaxContextMessages messages to the AI.
+    // The full history is still stored in the DB for the user to read.
+    final allMessages = (state as AsyncData<LlmChatState>).value.messages;
+    final history = allMessages.length > _kMaxContextMessages
+        ? allMessages.sublist(allMessages.length - _kMaxContextMessages)
+        : allMessages;
+    await _requestReplyStream(history);
+  }
+
+  // ---------------------------------------------------------------------------
+  // SSE streaming
+  // ---------------------------------------------------------------------------
+
+  Future<void> _requestReplyStream(List<ChatMessage> history) async {
+    final t = ref.read(translationsProvider).llm_chat;
+    final String llmChatEndpoint = AppEnv.llmChatEndpoint;
+
+    if (llmChatEndpoint.isEmpty) {
+      _finalizeAssistantMessage(t.error_not_configured);
+      return;
+    }
+
+    final idToken = await FirebaseAuth.instance.currentUser?.getIdToken();
+    if (idToken == null) {
+      _finalizeAssistantMessage(t.error_not_configured);
+      return;
+    }
+
+    final dio = Dio(
+      BaseOptions(
+        headers: {
+          'Authorization': 'Bearer $idToken',
+          'Content-Type': 'application/json',
+        },
+      ),
+    );
+
+    try {
+      final response = await dio.post<ResponseBody>(
+        llmChatEndpoint,
+        data: {
+          'message': history.last.content,
+          'history': history
+              .map((e) => {'role': e.role, 'content': e.content})
+              .toList(growable: false),
+        },
+        options: Options(responseType: ResponseType.stream),
+      );
+
+      final lineBuffer = StringBuffer();
+      final contentBuffer = StringBuffer();
+
+      await for (final chunk in response.data!.stream) {
+        final text = utf8.decode(chunk, allowMalformed: true);
+        lineBuffer.write(text);
+
+        // Process only complete lines — keep the last incomplete fragment
+        // in the buffer for the next iteration.
+        final raw = lineBuffer.toString();
+        final lastNewline = raw.lastIndexOf('\n');
+        if (lastNewline == -1) continue;
+
+        final completeSection = raw.substring(0, lastNewline + 1);
+        lineBuffer.clear();
+        if (lastNewline < raw.length - 1) {
+          lineBuffer.write(raw.substring(lastNewline + 1));
+        }
+
+        for (final line in completeSection.split('\n')) {
+          final delta = _extractSSEDelta(line.trimRight());
+          if (delta.isEmpty) continue;
+
+          contentBuffer.write(delta);
+          _appendStreamingChunk(contentBuffer.toString());
+        }
+      }
+
+      // Persist the complete assistant reply once the stream ends.
+      final fullContent = contentBuffer.toString();
+      if (fullContent.isNotEmpty) {
+        _persistMessage(ChatMessage.assistant(fullContent));
+      } else {
+        // Stream ended with no content (e.g. error event)
+        _finalizeAssistantMessage(t.error_no_reply);
+        return;
+      }
+
+      // Mark the reply as finished without touching the message list.
+      final latest = switch (state) {
+        AsyncData(:final value) => value,
+        _ => null,
+      };
+      if (latest != null) {
+        state = AsyncData(
+          latest.copyWith(isReplying: false, streamingStarted: false),
+        );
+      }
+    } catch (error) {
+      _logger.e('LLM chat stream failed: $error');
+      _finalizeAssistantMessage(t.error_network);
+    }
+  }
+
+  /// Called on every incoming SSE token to update the last assistant bubble.
+  void _appendStreamingChunk(String partialContent) {
+    final current = switch (state) {
+      AsyncData(:final value) => value,
+      _ => null,
+    };
+    if (current == null) return;
+
+    final msgs = current.messages;
+    final newMsgs = current.streamingStarted
+        // Replace the in-progress bubble with the latest accumulated content.
+        ? [
+            ...msgs.sublist(0, msgs.length - 1),
+            ChatMessage.assistant(partialContent),
+          ]
+        // First chunk: append a new assistant bubble.
+        : [...msgs, ChatMessage.assistant(partialContent)];
+
+    state = AsyncData(
+      LlmChatState(messages: newMsgs, isReplying: true, streamingStarted: true),
+    );
+  }
+
+  /// Replaces (or appends) the assistant bubble with [content] and marks
+  /// the reply as finished. Used for error messages and empty-stream fallback.
+  void _finalizeAssistantMessage(String content) {
+    final current = switch (state) {
+      AsyncData(:final value) => value,
+      _ => const LlmChatState(messages: []),
+    };
+    final msgs = current.messages;
+    final newMsgs = current.streamingStarted
+        ? [...msgs.sublist(0, msgs.length - 1), ChatMessage.assistant(content)]
+        : [...msgs, ChatMessage.assistant(content)];
+    state = AsyncData(LlmChatState(messages: newMsgs));
+  }
+
+  // ---------------------------------------------------------------------------
+  // SSE parsing
+  // ---------------------------------------------------------------------------
+
+  /// Extracts the text delta from a single SSE `data:` line.
+  /// Supports both OpenAI (`choices[0].delta.content`) and
+  /// Gemini (`candidates[0].content.parts[0].text`) formats.
+  String _extractSSEDelta(String line) {
+    if (!line.startsWith('data: ')) return '';
+    final payload = line.substring(6);
+    if (payload == '[DONE]') return '';
+    try {
+      final json = jsonDecode(payload) as Map<String, dynamic>;
+
+      // OpenAI format
+      final choices = json['choices'] as List?;
+      if (choices != null && choices.isNotEmpty) {
+        final delta =
+            (choices.first as Map<String, dynamic>)['delta']
+                as Map<String, dynamic>?;
+        return (delta?['content'] as String?) ?? '';
+      }
+
+      // Gemini format
+      final candidates = json['candidates'] as List?;
+      if (candidates != null && candidates.isNotEmpty) {
+        final content =
+            (candidates.first as Map<String, dynamic>)['content']
+                as Map<String, dynamic>?;
+        final parts = content?['parts'] as List?;
+        if (parts != null && parts.isNotEmpty) {
+          return ((parts.first as Map<String, dynamic>)['text'] as String?) ??
+              '';
+        }
+      }
+    } catch (_) {}
+    return '';
+  }
+
+  // ---------------------------------------------------------------------------
+  // Persistence
+  // ---------------------------------------------------------------------------
+
+  void _persistMessage(ChatMessage message) {
+    final userId = ref.read(userStateNotifierProvider).user.idOrNull;
+    if (userId == null) return;
+    ref
+        .read(llmChatApiProvider)
+        .saveMessage(userId, message.toEntity())
+        .catchError((e) {
+          _logger.e('Failed to persist message: $e');
+        });
+  }
+}