Ctrl+K
<prompt> <task>Design a User Interface (UI) for a Retrieval-Augmented Generation (RAG) application's search results page.</task> <goal>Present the AI-generated answer prominently, and attribute it clearly to its source materials using interactive, granular, and trustworthy visual elements.</goal> <instructions> <step>Display the <field>generatedResponse</field> in a central, prominent panel using clean, readable typography. Include inline citations (e.g., footnotes or superscripts) that link to source passages.</step> <step>Render each <field>retrievedPassage</field> as a collapsible card in a right-hand sidebar or expandable bottom panel. Include in each card: <substep>Document title (as clickable link), author (if present), page number, and any relevant metadata tags.</substep> <substep>The passage text, with specific sentences or phrases highlighted based on their direct relevance or usage in the generated answer.</substep> <substep>A visual indicator of relevance, such as a score bar or "Highly relevant" label, derived from <field>relevanceScore</field>.</substep> </step> <step>Link parts of the <field>generatedResponse</field> to specific <field>retrievedPassages</field> using: <substep>Inline citation markers (e.g., [1], [2]) near relevant answer segments.</substep> <substep>Hover effects that highlight corresponding sentences in the passage card.</substep> <substep>Optional color-coded highlights shared between answer text and sources.</substep> </step> <step>Utilize sentence- or token-level data to highlight only the exact matching segments of <field>retrievedPassage.text</field>. Allow users to: <substep>Hover to preview metadata or linguistic features via tooltip.</substep> <substep>Click to expand surrounding context within the document.</substep> <substep>Right-click or tap-hold to copy a specific sentence with attribution metadata.</substep> </step> <step>Allow users to explore source material via: <substep>Clickable document titles that open source URLs (if present in metadata).</substep> <substep>“View more” icons that launch a modal preview with page-level context and navigation.</substep> </step> <step>Follow a visual hierarchy layout: <substep>Top-center panel: AI-generated answer with inline citations.</substep> <substep>Right sidebar or bottom panel: Scrollable, expandable list of retrieved passages ordered by relevance.</substep> <substep>Floating tooltips, highlight colors, and modal previews to support deep dives.</substep> </step> </instructions> <constraints> <item>Ensure high readability and clarity for both the AI answer and the source materials.</item> <item>Enable trust through transparent source traceability.</item> <item>Support exploration without overwhelming the user.</item> <item>Design with accessibility and responsive behavior in mind.</item> </constraints> </prompt> - Initial Deployment
dfe99c3 verified