Feat: Explain API via Chatbot

lib/screens/home_page/editor_pane/details_card/response_pane.dart

@@ -54,6 +54,8 @@ class ResponseDetails extends ConsumerWidget {
         .watch(selectedRequestModelProvider.select((value) => value?.message));
     final responseModel = ref.watch(selectedRequestModelProvider
         .select((value) => value?.httpResponseModel));
+
+    final requestModel = ref.watch(selectedRequestModelProvider);
     final ollamaService = ref.watch(ollamaServiceProvider);
 
     return Column(
@@ -69,23 +71,40 @@ class ResponseDetails extends ConsumerWidget {
         const Expanded(
           child: ResponseTabs(),
         ),
-        if (responseModel?.body != null) // Show button only if a response exists
+        if (requestModel != null && responseModel != null)
           Padding(
             padding: const EdgeInsets.all(8.0),
             child: ElevatedButton(
               onPressed: () async {
-                final explanation = await ollamaService.explainApiResponse(
+                try {
-                  responseModel!.body as Map<String, dynamic>, // Pass the actual response data
+                  final explanation = await ollamaService.explainLatestApi(
+                    requestModel: requestModel,
+                    responseModel: responseModel,
                   );
                   showDialog(
                     context: context,
                     builder: (context) => AlertDialog(
                       title: const Text('Explanation'),
-                    content: Text(explanation),
+                      content: SingleChildScrollView(
+                        child: Text(explanation),
+                      ),
+                      actions: [
+                        TextButton(
+                          onPressed: () => Navigator.pop(context),
+                          child: const Text('Close'),
+                        ),
+                      ],
                     ),
                   );
+                } catch (error) {
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    const SnackBar(
+                      content: Text("Error explaining response."),
+                    ),
+                  );
+                }
               },
-              child: const Text('Explain Response'),
+              child: const Text('Explain API'),
             ),
           ),
       ],

lib/services/ollama_service.dart

@@ -1,44 +1,41 @@
+import 'dart:convert';
 import 'package:ollama_dart/ollama_dart.dart';
 
 class OllamaService {
   final OllamaClient _client;
 
-  OllamaService() : _client = OllamaClient(baseUrl: 'http://127.0.0.1:11434');
+  OllamaService() : _client = OllamaClient(baseUrl: 'http://127.0.0.1:11434/api');
 
-  // Generate responses for general queries
+  // Generate response
   Future<String> generateResponse(String prompt) async {
     final response = await _client.generateCompletion(
       request: GenerateCompletionRequest(
-          model: 'deepseek-r1:1.5b',
+          model: 'llama3.2:3b',
           prompt: prompt
       ),
     );
     return response.response.toString();
   }
 
-  // Explain API responses
+  // Explain latest API request & response
-  Future<String> explainApiResponse(Map<String, dynamic> response) async {
+  Future<String> explainLatestApi({required dynamic requestModel, required dynamic responseModel}) async {
-    final prompt = '''
+    if (requestModel == null || responseModel == null) {
-    Explain this API response in natural language with bullet points. Highlight discrepancies:
+      return "There are no recent API Requests.";
-    $response
-    ''';
-    return generateResponse(prompt);
     }
 
-  // Debug based on status code/error
+    final requestJson = jsonEncode(requestModel.toJson());
-  Future<String> debugRequest(int statusCode, String error) async {
+    final responseJson = jsonEncode(responseModel.toJson());
-    final prompt = '''
-    Provide structured debugging steps for HTTP $statusCode. Error: $error.
-    Format as bullet points.
-    ''';
-    return generateResponse(prompt);
-  }
 
-  // Generate test cases
-  Future<String> generateTestCases(String endpoint, String language) async {
     final prompt = '''
-    Generate $language test cases for API endpoint: $endpoint.
+    Explain the API request and response in a simple way:
-    Include edge cases and status code checks.
+    
+    **Request Details:**
+    $requestJson
+    
+    **Response Details:**
+    $responseJson
+    
+    Please provide a brief and clear explanation with key insights.
     ''';
     return generateResponse(prompt);
   }

lib/widgets/chatbot_widget.dart

@@ -12,20 +12,41 @@ class ChatbotWidget extends ConsumerStatefulWidget {
 class _ChatbotWidgetState extends ConsumerState<ChatbotWidget> {
   final TextEditingController _controller = TextEditingController();
   final List<Map<String, dynamic>> _messages = [];
+  bool _isLoading = false;
 
   void _sendMessage(String message) async {
+    if (message.trim().isEmpty) return;
     final ollamaService = ref.read(ollamaServiceProvider);
+    final requestModel = ref.read(selectedRequestModelProvider);
+    final responseModel = requestModel?.httpResponseModel;
 
     setState(() {
       _messages.add({'role': 'user', 'message': message});
       _controller.clear();
+      _isLoading = true;
     });
 
-    final response = await ollamaService.generateResponse(message);
+    try {
+      String response;
+      if (message == "Explain API") {
+        response = await ollamaService.explainLatestApi(
+          requestModel: requestModel,
+          responseModel: responseModel,
+        );
+      } else {
+        response = await ollamaService.generateResponse(message);
+      }
 
       setState(() {
         _messages.add({'role': 'bot', 'message': response});
       });
+    } catch (error) {
+      setState(() {
+        _messages.add({'role': 'bot', 'message': "Error: ${error.toString()}"});
+      });
+    } finally {
+      setState(() => _isLoading = false);
+    }
   }
 
   @override
@@ -36,51 +57,49 @@ class _ChatbotWidgetState extends ConsumerState<ChatbotWidget> {
       decoration: BoxDecoration(
         color: Theme.of(context).colorScheme.surface,
         borderRadius: BorderRadius.circular(12),
-        boxShadow: [
+        boxShadow: const [
-          BoxShadow(
+          BoxShadow(color: Colors.black12, blurRadius: 8, offset: Offset(0, 4)),
-            color: Colors.black12,
-            blurRadius: 8,
-            offset: const Offset(0, 4),
-          ),
         ],
       ),
       child: Column(
         children: [
+          Row(
+            children: [
+              ElevatedButton.icon(
+                onPressed: () => _sendMessage("Explain API"),
+                icon: const Icon(Icons.info_outline),
+                label: const Text("Explain API"),
+              ),
+              const Spacer(),
+            ],
+          ),
           Expanded(
             child: ListView.builder(
+              reverse: true,
               itemCount: _messages.length,
               itemBuilder: (context, index) {
-                final message = _messages[index];
+                final message = _messages.reversed.toList()[index];
-                return Align(
+                return ChatBubble(
-                  alignment: message['role'] == 'user'
+                  message: message['message'],
-                      ? Alignment.centerRight
+                  isUser: message['role'] == 'user',
-                      : Alignment.centerLeft,
-                  child: Container(
-                    margin: const EdgeInsets.symmetric(vertical: 4),
-                    padding: const EdgeInsets.all(12),
-                    decoration: BoxDecoration(
-                      color: message['role'] == 'user'
-                          ? Theme.of(context).colorScheme.primaryContainer
-                          : Theme.of(context).colorScheme.secondaryContainer,
-                      borderRadius: BorderRadius.circular(8),
-                    ),
-                    child: Text(message['message']),
-                  ),
                 );
               },
             ),
           ),
-          const SizedBox(height: 8),
+          if (_isLoading)
+            const Padding(
+              padding: EdgeInsets.all(8.0),
+              child: CircularProgressIndicator(),
+            ),
           Row(
             children: [
               Expanded(
                 child: TextField(
                   controller: _controller,
                   decoration: InputDecoration(
-                    hintText: 'Ask about API responses, debug issues...',
+                    hintText: 'Ask something...',
                     border: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(8),
+                        borderRadius: BorderRadius.circular(8)),
-                    ),
                   ),
                   onSubmitted: _sendMessage,
                 ),
@@ -96,3 +115,28 @@ class _ChatbotWidgetState extends ConsumerState<ChatbotWidget> {
     );
   }
 }
+
+class ChatBubble extends StatelessWidget {
+  final String message;
+  final bool isUser;
+
+  const ChatBubble({super.key, required this.message, this.isUser = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: isUser ? Alignment.centerRight : Alignment.centerLeft,
+      child: Container(
+        margin: const EdgeInsets.symmetric(vertical: 4),
+        padding: const EdgeInsets.all(12),
+        decoration: BoxDecoration(
+          color: isUser
+              ? Theme.of(context).colorScheme.primaryContainer
+              : Theme.of(context).colorScheme.secondaryContainer,
+          borderRadius: BorderRadius.circular(8),
+        ),
+        child: Text(message),
+      ),
+    );
+  }
+}