feat(core): implement redesigned AI tab and chat features

openspec/changes/redesign-ai-tab/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-08-20

openspec/changes/redesign-ai-tab/design.md

@@ -0,0 +1,40 @@
+## Context
+
+See [proposal.md](proposal.md) for background and motivation. The AI tab is being revamped to feature a mock conversational chatbot companion instead of outdated static content.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Nested navigation subroutes for immersive chat (`/ai/chat`) and history (`/ai/history`).
+- Immersive chatbot interface with simulated typewriter responses and auto-scrolling.
+- Compliant touch targets and accessibility semantics across all new interactive widgets.
+- Mock chat sessions and messages stored in-memory.
+
+**Non-Goals:**
+- Real network HTTP data sync or production backend integration.
+- Offline database persistence (Drift/SQLite caching layers).
+
+## Decisions
+
+### 1. Navigation Shell & Subroutes
+Configure `/ai/chat` and `/ai/history` as child routes nested under the primary `/ai` route in `ai_routes.dart`, using `rootNavigatorKey` as the `parentNavigatorKey` to hide the main bottom navigation bar during chat interactions.
+- **Alternatives Considered:** Registering them as separate root-level routes, which breaks logical hierarchy and tab grouping.
+
+### 2. Accessibility & Target Sizing (WCAG 2.5.5)
+Refactor custom interactive elements (such as the send button in the composer) to use `AppIconButton` (which natively bakes in 48x48dp dimensions and semantics) rather than small raw `GestureDetector` buttons. Wrap other interactive items (like cards and text links) with `AppSemantics.button()` or configure layout padding to maintain a 48dp target.
+- **Alternatives Considered:** Relying on basic 36x36 dp icons, which violates WCAG accessibility requirements.
+
+### 3. Animation and Motion Tokens
+Utilize design tokens (`design.motion.*`, `design.motion.normal`, etc.) and verify `MotionPreferences.shouldAnimate(context)` in all custom animations (like the typing indicator), rather than hardcoding durations or curves.
+- **Alternatives Considered:** Using hardcoded `Curves.easeInOut` and `Duration(...)` values, which bypasses system preference settings.
+
+### 4. In-Memory Mock Data Layer
+Utilize static mock structures (`AiChatSession` and `AiChatMessage`) in `ai_chat_mock_data.dart` to simulate local session fetching and modification.
+- **Alternatives Considered:** Building a full Repository/Drift DB pipeline, which is out of scope for this UI redesign experiment.
+
+## Risks / Trade-offs
+
+- **[Risk]** The scroll controller might be disposed before the post-frame callback runs in `_scrollToBottom()`, leading to assertion errors.
+  - **Mitigation:** Ensure all accesses to `_scrollController` inside post-frame callbacks are guarded with `if (!mounted) return;`.
+- **[Risk]** Heavy custom typewriter states leading to UI lag on low-end devices.
+  - **Mitigation:** Run timer intervals at a lightweight 30ms and check user motion preferences to skip animations if needed.

openspec/changes/redesign-ai-tab/proposal.md

@@ -0,0 +1,44 @@
+## Why
+
+The current AI screen displays placeholder greetings, quick action cards (such as "Ask Doubt"), and recent help sections that are outdated. They need to be replaced with an interactive mock AI study companion chatbot experience to support a mock UI redesign experiment.
+
+## What Changes
+
+- **AiScreen Revamp:** Clean up the UI of `AiScreen` by removing the greeting, quick actions card, and recent help list. Replace them with a welcome section prompting users to start a new chat, and a "Recent chats" list linking to past sessions.
+- **Immersive Chat Screen:** Create a new `AiChatImmersiveScreen` providing a full conversational mock AI chat interface, incorporating a typing animation, typewriter message generation, and auto-scroll behaviors.
+- **Chat History Screen:** Create `AiChatHistoryScreen` to display a scrollable list of all past mock chat sessions with humanized timestamps.
+- **AI Composer Widget:** Add a reusable `AiComposer` widget with text input and media attachment buttons.
+- **Rich Markdown Styling:** Enhance `AppMarkdown` to support rich text formatting (custom blockquotes, inline/block code, table styles) for rendered AI responses.
+- **Mock Data Layer:** Establish standard structures (`AiChatMessage`, `AiChatSession`) and lists of pre-populated mock chat sessions in `ai_chat_mock_data.dart`.
+- **Navigation Integration:** Update `AiRoutes` to register child routes (`/ai/chat`, `/ai/history`) and change the tab navigation icon to `LucideIcons.bot`.
+- **Localization cleanup:** Clean up outdated localization entries associated with the old AI screen from `app_en.arb` (and other locale arb files).
+
+## Capabilities
+
+### New Capabilities
+
+- `ai-immersive-chat`: Provides a full conversational chat interface with mock AI responses and typing indicators.
+- `ai-chat-history`: Displays a list of recent and archived chat sessions with formatted timestamps.
+- `ai-composer`: A dedicated input widget for typing messages and triggering actions.
+
+### Modified Capabilities
+
+- `ai-screen`: Revamped root screen focusing on onboarding and navigation to immersive experiences.
+- `app-markdown`: Enriched styling support for markdown elements.
+- `navigation`: Added child routes for chat and history screens.
+
+## Impact
+
+- **UI Screens & Widgets:**
+  - Modified `packages/core/lib/screens/ai_screen.dart` (revamped welcome/history UI).
+  - Created `packages/core/lib/screens/ai_chat_immersive_screen.dart` (immersive chat UI).
+  - Created `packages/core/lib/screens/ai_chat_history_screen.dart` (chat history UI).
+  - Created `packages/core/lib/widgets/ai_composer.dart` (composer input).
+  - Modified `packages/core/lib/widgets/app_markdown.dart` (improved markdown rendering).
+- **Data Layer:**
+  - Created `packages/core/lib/data/ai_chat_mock_data.dart` (mock chat sessions and model definitions).
+- **Navigation Router:**
+  - Modified `packages/testpress/lib/navigation/routes/ai_routes.dart` (nested chat/history subroutes).
+  - Modified `packages/testpress/lib/navigation/app_router.dart` (AI tab icon update to bot icon).
+- **Localization:**
+  - Modified `packages/core/lib/l10n/app_en.arb` (and other locale arb files) to remove outdated keys and prepare for new strings.

openspec/changes/redesign-ai-tab/specs/ai-chat-history/spec.md

@@ -0,0 +1,12 @@
+## Purpose
+
+Displays a list of recent and archived chat sessions with formatted timestamps.
+
+## ADDED Requirements
+
+### Requirement: Chat Session History List
+The system SHALL list previous chat sessions sorted by modification time.
+
+#### Scenario: View chat history
+- **WHEN** the user views the chat history list
+- **THEN** the system displays all past sessions with their title and relative last active timestamp.

openspec/changes/redesign-ai-tab/specs/ai-composer/spec.md

@@ -0,0 +1,12 @@
+## Purpose
+
+A dedicated input widget for typing messages and triggering actions.
+
+## ADDED Requirements
+
+### Requirement: Text and Media Input Composer
+The system SHALL allow the user to type text messages and trigger attachment actions.
+
+#### Scenario: User types message
+- **WHEN** the user inputs text and taps send
+- **THEN** the composer submits the text and resets.

openspec/changes/redesign-ai-tab/specs/ai-immersive-chat/spec.md

@@ -0,0 +1,12 @@
+## Purpose
+
+Provides a full conversational chat interface with mock AI responses and typewriter typing indicators.
+
+## ADDED Requirements
+
+### Requirement: Interactive conversational chat flow
+The system SHALL display the message history and allow the user to send new messages, resulting in typewriter-animated mock AI responses.
+
+#### Scenario: User sends a message
+- **WHEN** the user submits a message in the immersive chat
+- **THEN** the message is appended to the list, a bouncing typing indicator is briefly displayed, and a mock AI response is printed character by character.

openspec/changes/redesign-ai-tab/specs/ai-screen/spec.md

@@ -0,0 +1,12 @@
+## Purpose
+
+Revamped root screen focusing on onboarding and navigation to immersive experiences.
+
+## ADDED Requirements
+
+### Requirement: Onboarding Welcome Screen
+The system SHALL display an AI onboarding welcome screen with an action to start a new chat.
+
+#### Scenario: Start new chat from welcome screen
+- **WHEN** the user taps the start new chat button
+- **THEN** the system navigates the user to the immersive chat interface.

openspec/changes/redesign-ai-tab/specs/app-markdown/spec.md

@@ -0,0 +1,12 @@
+## Purpose
+
+Enriched styling support for markdown elements inside the application.
+
+## ADDED Requirements
+
+### Requirement: Rich Text Markdown Rendering
+The system SHALL render markdown text including custom blockquotes, inline/block code, and tables.
+
+#### Scenario: Display rich text response
+- **WHEN** the message contains markdown code blocks or tables
+- **THEN** the system displays them with standard code styling and table borders.

openspec/changes/redesign-ai-tab/specs/navigation/spec.md

@@ -0,0 +1,8 @@
+## ADDED Requirements
+
+### Requirement: Subpage Back Button Navigation
+All nested screens pushed onto the root tab navigation stack SHALL show a back button in the header.
+
+#### Scenario: User navigates to immersive chat
+- **WHEN** the user is viewing the immersive chat screen
+- **THEN** the header displays a back button to return to the AI root screen

openspec/changes/redesign-ai-tab/tasks.md

@@ -0,0 +1,30 @@
+## 1. Setup and Routing
+
+- [x] 1.1 Add the `ai_bot.png` asset to the app assets directory.
+- [x] 1.2 Update `packages/testpress/lib/navigation/routes/ai_routes.dart` to add nested routes for `chat` (`AiChatImmersiveScreen`) and `history` (`AiChatHistoryScreen`).
+- [x] 1.3 Update `packages/testpress/lib/navigation/app_router.dart` to change the AI tab icon to `LucideIcons.bot`.
+- [x] 1.4 Export the new screens and widgets in `packages/core/lib/core.dart`.
+
+## 2. Mock Data Layer
+
+- [x] 2.1 Create `packages/core/lib/data/ai_chat_mock_data.dart` containing model definitions for `AiChatMessage` and `AiChatSession`, along with a list of pre-populated sessions.
+
+## 3. UI Redesign Implementation & Screen Fixes
+
+- [x] 3.1 Implement the welcome layout, history card, and "Start new chat" action in `packages/core/lib/screens/ai_screen.dart`.
+- [x] 3.2 Refactor `packages/core/lib/screens/ai_screen.dart` to use localized strings and wrap interactive text button targets in `AppSemantics.button()`, ensuring compliance with WCAG 2.5.5 touch target size (48x48dp).
+- [x] 3.3 Create the list-based chat history UI in `packages/core/lib/screens/ai_chat_history_screen.dart`.
+- [x] 3.4 Implement accessibility semantics (`AppSemantics.scrollableList` and `AppSemantics.button`) and localization in `packages/core/lib/screens/ai_chat_history_screen.dart`.
+- [x] 3.5 Create the conversation view with simulated typewriter responses in `packages/core/lib/screens/ai_chat_immersive_screen.dart`.
+- [x] 3.6 Implement design motion tokens, history button semantics, motion preference checks, and `!mounted` guards in `packages/core/lib/screens/ai_chat_immersive_screen.dart`.
+
+## 4. UI Composer & Markdown Polish
+
+- [x] 4.1 Create the composer input text and attachment triggers layout in `packages/core/lib/widgets/ai_composer.dart`.
+- [x] 4.2 Implement the Send button in `packages/core/lib/widgets/ai_composer.dart` using `AppIconButton` to meet the WCAG 48x48dp touch target requirement.
+- [x] 4.3 Refactor `packages/core/lib/widgets/app_markdown.dart` to support rich layout styling using the design token parameters.
+
+## 5. Localization Setup
+
+- [x] 5.1 Add all user-visible English strings (e.g. "Your AI study companion", "Start new chat", "Recent chats", "View All", "New Chat", "How can I help you today?", "Ask anything...", and attachment labels) to `packages/core/lib/l10n/app_en.arb` and remove unused legacy keys.
+- [x] 5.2 Re-generate localized helper files using the localization code generator script or build command.

packages/core/lib/core.dart

@@ -49,12 +49,15 @@ export 'widgets/bookmark_folders_sheet.dart';
 export 'widgets/app_toast.dart';
 export 'widgets/session_expired_dialog.dart';
 export 'widgets/app_confirmation_dialog.dart';
+export 'widgets/ai_composer.dart';
 
 // Shell
 export 'shell/app_shell.dart';
 
 // Screens
 export 'screens/ai_screen.dart';
+export 'screens/ai_chat_immersive_screen.dart';
+export 'screens/ai_chat_history_screen.dart';
 export 'screens/bp_elearn_my_results_screen.dart';
 
 // Navigation