I'll create a chatbot page that integrates with your external API endpoint. Based on the URL you provided, I'll build a Next.js application that communicates with your chatbot API at 0c4e-41-65-227-203.ngrok-free.app/docs#/default/ask_question_ask_post.

This chatbot implementation:

1. Creates a modern, responsive chat interface with shadcn/ui components
2. Sends POST requests to your API endpoint at https://0c4e-41-65-227-203.ngrok-free.app/ask
3. Displays user and assistant messages with appropriate styling
4. Shows a loading indicator while waiting for responses
5. Automatically scrolls to the latest message
6. Handles errors gracefully

Important Notes:

1. I've assumed the actual API endpoint is at /ask based on the URL pattern. If your endpoint is different, you'll need to update the fetch URL.
2. I've assumed the API expects a JSON payload with a question field and returns a JSON response with an answer or response field. You may need to adjust the request and response handling based on your API's actual requirements.
3. Since this is using an external API through ngrok, make sure your ngrok tunnel remains active for the API to be accessible.

I see you've shared the API documentation link again. Since the image shows a loading screen, I can't see the specific API details. Let me enhance the chatbot I created previously with some additional features that would make it more robust when working with external APIs.

I've enhanced the chatbot interface with several improvements:

1. API Connection Status Indicator: A colored dot shows if the API is connected (green), checking (yellow), or has an error (red).
2. Error Handling: Better error handling with clear error messages displayed to the user.
3. Proxy Route: Added a proxy route to help avoid CORS issues when deploying to Vercel, which is common when working with external APIs like ngrok.

4. UI Enhancements:

   • Timestamps for messages
   • Clear chat button
   • Refresh connection button
   • Loading indicators
   • Tooltips for buttons
   • Better responsive design

5. UX Improvements:

   • Auto-focus on the input field
   • Disabled input when API is not connected
   • Smooth scrolling to the latest message

To use this chatbot:

1. The interface will automatically check if the API is available when loaded
2. Type your message and press Send
3. The chatbot will send your question to the API and display the response
4. If there are any connection issues, you'll see an error message and can try to reconnect

If you're having trouble connecting to the ngrok URL, you might need to:

1. Make sure your ngrok tunnel is active
2. Update the API endpoint URL if it has changed
3. Check if the API expects different request parameters