Add chat UI to AI assistant pane

packages/devtools_app/lib/src/shared/ai_assistant/ai_controller.dart

@@ -0,0 +1,26 @@
+// Copyright 2026 The Flutter Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file or at https://developers.google.com/open-source/licenses/bsd.
+
+import 'package:devtools_app_shared/utils.dart';
+
+import 'ai_message_types.dart';
+
+class AiController extends DisposableController
+    with AutoDisposeControllerMixin {
+  AiController();
+
+  Future<ChatMessage> sendMessage(ChatMessage _) async {
+    await Future.delayed(const Duration(seconds: 3));
+    return const ChatMessage(text: _loremIpsum, isUser: false);
+  }
+}
+
+const _loremIpsum = '''
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+culpa qui officia deserunt mollit anim id est laborum.
+''';

packages/devtools_app/lib/src/shared/ai_assistant/ai_message_types.dart

@@ -0,0 +1,9 @@
+// Copyright 2026 The Flutter Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file or at https://developers.google.com/open-source/licenses/bsd.
+
+class ChatMessage {
+  const ChatMessage({required this.text, required this.isUser});
+  final String text;
+  final bool isUser;
+}

packages/devtools_app/lib/src/shared/ai_assistant/widgets/ai_assistant_pane.dart

@@ -2,28 +2,225 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file or at https://developers.google.com/open-source/licenses/bsd.
 
+import 'dart:math' as math;
+
+import 'package:devtools_app_shared/ui.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import '../../../framework/scaffold/bottom_pane.dart';
 import '../../ui/tab.dart';
+import '../../utils/utils.dart';
+import '../ai_controller.dart';
+import '../ai_message_types.dart';
 
-class AiAssistantPane extends StatelessWidget implements TabbedPane {
+class AiAssistantPane extends StatefulWidget implements TabbedPane {
   const AiAssistantPane({super.key});
 
   @override
-  DevToolsTab get tab =>
-      DevToolsTab.create(tabName: _tabName, gaPrefix: _gaPrefix);
+  DevToolsTab get tab => DevToolsTab.create(
+    tabName: AiAssistantPane._tabName,
+    gaPrefix: AiAssistantPane._gaPrefix,
+  );
 
   static const _tabName = 'AI Assistant';
-
   static const _gaPrefix = 'aiAssistant';
 
+  @override
+  State<AiAssistantPane> createState() => _AiAssistantPaneState();
+}
+
+class _AiAssistantPaneState extends State<AiAssistantPane> {
+  static const _baseOverscrollPadding = 125.0;
+  static const _spinnerHeight = 50.0;
+  static const _scrollDuration = Duration(milliseconds: 250);
+
+  final _textController = TextEditingController();
+  final _messages = <ChatMessage>[];
+  final _scrollController = ScrollController();
+  final _aiController = AiController();
+  late final FocusNode _focusNode;
+
+  bool _isThinking = false;
+  double _overscrollPadding = _baseOverscrollPadding;
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode = FocusNode(onKeyEvent: _handleEnterKey);
+  }
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    _textController.dispose();
+    super.dispose();
+  }
+
+  KeyEventResult _handleEnterKey(FocusNode node, KeyEvent event) {
+    final isEnterKey =
+        event is KeyDownEvent && event.logicalKey == LogicalKeyboardKey.enter;
+
+    if (isEnterKey && !HardwareKeyboard.instance.isShiftPressed) {
+      if (!_isThinking) {
+        safeUnawaited(_sendMessage());
+      }
+      return KeyEventResult.handled;
+    }
+
+    return KeyEventResult.ignored;
+  }
+
+  Future<void> _sendMessage() async {
+    final messageText = _textController.text;
+    if (messageText.isEmpty) return;
+    _textController.clear();
+
+    final userMessage = ChatMessage(text: messageText, isUser: true);
+    setState(() {
+      _overscrollPadding = _calculateOverscrollPadding(userMessage);
+      _isThinking = true;
+      _messages.add(userMessage);
+    });
+    _scrollToBottom();
+
+    final aiResponse = await _aiController.sendMessage(userMessage);
+    setState(() {
+      _isThinking = false;
+      _overscrollPadding = _calculateOverscrollPadding(aiResponse);
+      _messages.add(aiResponse);
+    });
+    _scrollToBottom();
+  }
+
+  void _scrollToBottom() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (_scrollController.hasClients) {
+        safeUnawaited(
+          _scrollController.animateTo(
+            _scrollController.position.maxScrollExtent,
+            duration: _scrollDuration,
+            curve: Curves.ease,
+          ),
+        );
+      }
+    });
+  }
+
+  double _calculateOverscrollPadding(ChatMessage message) {
+    final messageHeight =
+        message.text.split('\n').length * (defaultFontSize + densePadding);
+    final overscrollPadding = _baseOverscrollPadding + messageHeight;
+    return message.isUser
+        ? overscrollPadding + _spinnerHeight
+        : overscrollPadding;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return Column(
+          children: [
+            Expanded(
+              child: ListView.builder(
+                padding: EdgeInsets.only(
+                  bottom: math.max(
+                    0,
+                    constraints.maxHeight - _overscrollPadding,
+                  ),
+                ),
+                controller: _scrollController,
+                itemCount: _isThinking
+                    ? _messages.length + 1
+                    : _messages.length,
+                itemBuilder: (context, index) {
+                  if (_isThinking && index == _messages.length) {
+                    return const _ThinkingSpinner();
+                  }
+                  return _ChatMessageBubble(message: _messages[index]);
+                },
+              ),
+            ),
+            ConstrainedBox(
+              constraints: BoxConstraints(maxHeight: constraints.maxHeight),
+              child: Padding(
+                padding: const EdgeInsets.all(denseSpacing),
+                child: RoundedOutlinedBorder(
+                  child: Padding(
+                    // ignore: prefer-correct-edge-insets-constructor, false positive.
+                    padding: const EdgeInsets.fromLTRB(
+                      defaultSpacing,
+                      noPadding,
+                      defaultSpacing,
+                      densePadding,
+                    ),
+                    child: TextField(
+                      controller: _textController,
+                      focusNode: _focusNode,
+                      keyboardType: TextInputType.multiline,
+                      textAlignVertical: TextAlignVertical.center,
+                      minLines: 1,
+                      maxLines: 10,
+                      decoration: InputDecoration(
+                        hintText: 'Ask a question...',
+                        border: InputBorder.none,
+                        suffixIcon: IconButton(
+                          icon: const Icon(Icons.send),
+                          onPressed: _isThinking ? null : _sendMessage,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+class _ChatMessageBubble extends StatelessWidget {
+  const _ChatMessageBubble({required this.message});
+
+  final ChatMessage message;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return Align(
+      alignment: message.isUser ? Alignment.centerRight : Alignment.centerLeft,
+      child: Container(
+        decoration: BoxDecoration(
+          color: message.isUser
+              ? colorScheme.primaryContainer
+              : colorScheme.secondaryContainer,
+          borderRadius: defaultBorderRadius,
+        ),
+        padding: const EdgeInsets.all(defaultSpacing),
+        margin: const EdgeInsets.all(denseSpacing),
+        child: Text(message.text),
+      ),
+    );
+  }
+}
+
+class _ThinkingSpinner extends StatelessWidget {
+  const _ThinkingSpinner();
+
   @override
   Widget build(BuildContext context) {
-    return const Column(
-      children: [
-        Expanded(child: Center(child: Text('TODO: Implement AI Assistant.'))),
-      ],
+    return const Align(
+      alignment: Alignment.centerLeft,
+      child: Padding(
+        padding: EdgeInsets.symmetric(
+          vertical: denseSpacing,
+          horizontal: extraLargeSpacing,
+        ),
+        child: CircularProgressIndicator(),
+      ),
     );
   }
 }