for this page, we are adding a new section for LLM Context (as identified in red)
on this page, we need to have the following capabilities:
- text input fields for the following (Description, Key Business Questions, Problem Space, Primary Entities, Key Dimensions, Key Metrics, Data Granularity, Entity Relationships & Cardinality)
- select text input box type, as you see fit
- user should be able to input information into the fields OR they can auto-generate using AI. so they should have a button for it.
- if the information is generated with AI, user should be able to see what was generated, and they should be able to modify that.
- it should have a Save and Discard Changes button (or whatever you recommend)
- user should also be able to view the json that was generated based on the inputs. sample json is attached in txt file.
here is more information about the fields (attached in txt file)
I'll help you add the LLM Context section to your business view page. Let me first explore the codebase to understand the current structure.
Based on the screenshot and requirements, I'll create a comprehensive LLM Context section for your business view page. This will include all the required input fields, AI generation capability, and JSON viewing functionality.
I've created a comprehensive LLM Context section with all the requested features:
Key Features:
- Organized tabs for better UX: Overview (description, problem space, questions), Entities & Dimensions (entities, dimensions, metrics), and Relationships & Granularity
- AI Auto-generation button that simulates generating context based on your example JSON
- Editable fields with appropriate input types (textareas for multi-line content)
- Save/Discard Changes buttons that appear when modifications are made
- View JSON dialog that shows the generated JSON structure in real-time based on inputs
- Toast notifications for user feedback on actions
- Clean, professional design matching the existing interface style
The component is fully functional and allows users to manually input data or use AI generation, then review and modify as needed before saving.
I've updated the design system to match the screenshot exactly. The changes include using the orange accent color (#FF6B35) for active tabs and highlights, gray tones for text and backgrounds, blue (#3B82F6) for primary action buttons, and uppercase tracking for button text. The tab navigation now uses the same style as shown in the image with orange underlines for active states.