Connect "Query Generation from NL" with the available UI

[khelanmodi]

Title: Add “Generate” button to support natural language MongoDB query generation

Description:
Add a “Generate” button next to the query input field that allows users to generate MongoDB queries using natural language input. The goal is to make query creation easier and more intuitive, especially for users less familiar with MongoDB syntax.

Figma Mock: https://www.figma.com/design/eopE853GMdTxsJAF8UdeJZ/DocumentDB-for-VS-code?node-id=2029-23

Current Behavior:

• The text field currently supports only filter queries (no sort, projection, or advanced formatting).
• The input assumes and expects valid JSON syntax.

Proposed Enhancement:

• Introduce a “Generate” button that triggers natural language query generation.
• Optionally, detect when users type natural language directly into the text field (e.g., no brackets or JSON format) and automatically convert it into a structured query.
• Consider introducing a new dialog or slide-out UI for the generation experience (similar to what Compass offers).
• Ensure the design fits within the current UX flow.

Technical Notes:

• Use "Silent Mode" for Phase 1

Acceptance Criteria:

• “Generate” button added and functional.
• Users can input natural language and receive a valid MongoDB query suggestion.
• UI gracefully handles invalid or ambiguous inputs.
• Verified integration within the existing extension interface.

Future Enhancements (optional):

• Inline detection of natural language input.
• Expanded support for sort, projection, and aggregation once backend allows it.
• Add Query Generation to scrapbook - post mongo shell improvements