Hugging Face's logo

Spaces:
b08x
/
rubyragql
Running

App Files Community
b08x commited on
Commit
dfe99c3
·
verified ·
1 Parent(s): b29d3fe

<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

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +323 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Rubyragql
3
- emoji: 🐢
4
- colorFrom: pink
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: rubyragql
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,323 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>RAG Search Results</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ /* Custom styles that can't be easily achieved with Tailwind */
11
+ .citation {
12
+ position: relative;
13
+ display: inline-block;
14
+ cursor: pointer;
15
+ }
16
+
17
+ .citation-highlight {
18
+ background-color: rgba(255, 210, 0, 0.3);
19
+ transition: background-color 0.2s;
20
+ }
21
+
22
+ .citation:hover .citation-highlight {
23
+ background-color: rgba(255, 210, 0, 0.5);
24
+ }
25
+
26
+ .passage-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .passage-card:hover {
31
+ transform: translateY(-2px);
32
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
33
+ }
34
+
35
+ .highlight-text {
36
+ background-color: rgba(59, 130, 246, 0.2);
37
+ padding: 0 2px;
38
+ border-radius: 3px;
39
+ }
40
+
41
+ @media (max-width: 1023px) {
42
+ .main-layout {
43
+ grid-template-columns: 1fr;
44
+ }
45
+
46
+ .sidebar {
47
+ grid-row: 2;
48
+ }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-50 min-h-screen">
53
+ <div class="container mx-auto px-4 py-8">
54
+ <!-- Header -->
55
+ <header class="mb-8">
56
+ <h1 class="text-3xl font-bold text-gray-800">Search Results</h1>
57
+ <div class="flex items-center mt-2">
58
+ <span class="text-sm text-gray-600">Query: </span>
59
+ <span class="ml-2 text-sm font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded">What are the key benefits of retrieval-augmented generation?</span>
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Main Content Layout -->
64
+ <div class="main-layout grid lg:grid-cols-3 gap-6">
65
+ <!-- Generated Answer Section (2/3 width) -->
66
+ <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6">
67
+ <div class="flex items-center justify-between mb-4">
68
+ <h2 class="text-xl font-semibold text-gray-800">AI-Generated Answer</h2>
69
+ <span class="text-sm text-gray-500">Generated response with source citations</span>
70
+ </div>
71
+
72
+ <div class="prose max-w-none text-gray-700" id="generatedResponse">
73
+ <p>Retrieval-Augmented Generation (RAG)<sup class="citation">1</sup> combines the strengths of large language models with external knowledge retrieval, offering several key benefits:</p>
74
+
75
+ <ul class="list-disc pl-5 mt-3 space-y-2">
76
+ <li><span class="citation-highlight">Improved factual accuracy</span><sup class="citation">2</sup> by grounding responses in verifiable source material rather than relying solely on parametric knowledge</li>
77
+ <li>The ability to <span class="citation-highlight">access up-to-date information</span><sup class="citation">3</sup> without requiring full model retraining, as the retrieval component can be updated independently</li>
78
+ <li>Enhanced transparency through <span class="citation-highlight">source attribution</span><sup class="citation">4,5</sup>, allowing users to verify claims against original documents</li>
79
+ <li>Reduced hallucination by constraining generation to relevant retrieved content<sup class="citation">1</sup></li>
80
+ <li>Efficient scaling across domains since the same base model can serve different knowledge areas by switching retrieval corpora<sup class="citation">4</sup></li>
81
+ </ul>
82
+
83
+ <p class="mt-4">These advantages make RAG particularly valuable for applications requiring both the fluency of large language models and reliable grounding in external knowledge<sup class="citation">1,3</sup>.</p>
84
+ </div>
85
+
86
+ <div class="mt-6 pt-4 border-t border-gray-200">
87
+ <p class="text-sm text-gray-500">Hover over citation numbers (<sup class="text-blue-500">1</sup>) to view source connections, or click to jump to the source passage.</p>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Sources Sidebar (1/3 width) -->
92
+ <div class="sidebar space-y-4" id="retrievedPassages">
93
+ <div class="flex items-center justify-between">
94
+ <h2 class="text-lg font-semibold text-gray-800">Source Passages</h2>
95
+ <div class="text-sm text-gray-500">
96
+ <span id="sourceCount">5</span> sources found
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Passage Cards -->
101
+ <div class="passage-card bg-white rounded-lg shadow-sm p-4 border border-gray-200" data-passage-id="1">
102
+ <div class="flex justify-between items-start">
103
+ <div>
104
+ <h3 class="font-medium text-blue-600 hover:text-blue-800">
105
+ <a href="#" target="_blank">"RAG: Retrieval-Augmented Generation" <i class="fas fa-external-link-alt text-xs ml-1"></i></a>
106
+ </h3>
107
+ <p class="text-xs text-gray-500 mt-1">Lewis et al. · NeurIPS 2020 · Pages 42-45</p>
108
+ </div>
109
+ <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Highly relevant</span>
110
+ </div>
111
+
112
+ <div class="mt-3 text-sm text-gray-700">
113
+ <p class="passage-text">"<span class="highlight-text">Retrieval-augmented generation (RAG) models combine a pre-trained retriever with a pre-trained seq2seq model</span>, coupling the parametric memory of the transformer with non-parametric memory from a document store. This architecture <span class="highlight-text">demonstrates significant reductions in hallucination while maintaining generator fluency</span>. The approach enables generation grounded in real-world knowledge that can be updated without retraining the full model."</p>
114
+ </div>
115
+
116
+ <div class="mt-3 flex justify-between items-center">
117
+ <div class="flex space-x-2">
118
+ <span class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded">Core Concept</span>
119
+ <span class="text-xs px-2 py-1 bg-purple-50 text-purple-700 rounded">Technical Paper</span>
120
+ </div>
121
+ <button class="text-xs text-blue-600 hover:text-blue-800 flex items-center">
122
+ <i class="fas fa-expand-alt mr-1"></i> Expand
123
+ </button>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="passage-card bg-white rounded-lg shadow-sm p-4 border border-gray-200" data-passage-id="2">
128
+ <div class="flex justify-between items-start">
129
+ <div>
130
+ <h3 class="font-medium text-blue-600 hover:text-blue-800">
131
+ <a href="#" target="_blank">"Evaluating LLM Factuality" <i class="fas fa-external-link-alt text-xs ml-1"></i></a>
132
+ </h3>
133
+ <p class="text-xs text-gray-500 mt-1">Zhang et al. · ACL 2023 · Pages 12-15</p>
134
+ </div>
135
+ <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Highly relevant</span>
136
+ </div>
137
+
138
+ <div class="mt-3 text-sm text-gray-700">
139
+ <p class="passage-text">"Our experiments show that <span class="highlight-text">RAG architectures improve factual accuracy by 37% compared to equivalent-sized language models</span> when answering knowledge-intensive queries. The retrieval component provides grounding to specific supporting documents, which <span class="highlight-text">reduces unsubstantiated claims (hallucinations) significantly</span> while preserving the language model's natural response style."</p>
140
+ </div>
141
+
142
+ <div class="mt-3 flex justify-between items-center">
143
+ <div class="flex space-x-2">
144
+ <span class="text-xs px-2 py-1 bg-orange-50 text-orange-700 rounded">Study Results</span>
145
+ </div>
146
+ <button class="text-xs text-blue-600 hover:text-blue-800 flex items-center">
147
+ <i class="fas fa-expand-alt mr-1"></i> Expand
148
+ </button>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="passage-card bg-white rounded-lg shadow-sm p-4 border border-gray-200" data-passage-id="3">
153
+ <div class="flex justify-between items-start">
154
+ <div>
155
+ <h3 class="font-medium text-blue-600 hover:text-blue-800">
156
+ <a href="#" target="_blank">"Dynamic Knowledge in LLMs" <i class="fas fa-external-link-alt text-xs ml-1"></i></a>
157
+ </h3>
158
+ <p class="text-xs text-gray-500 mt-1">Anderson · Journal of AI Research · Pages 78-81</p>
159
+ </div>
160
+ <div class="flex items-center">
161
+ <div class="h-2 w-20 bg-gray-200 rounded-full mr-2">
162
+ <div class="h-2 bg-yellow-400 rounded-full" style="width: 75%"></div>
163
+ </div>
164
+ <span class="text-xs text-gray-600">Relevant</span>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="mt-3 text-sm text-gray-700">
169
+ <p class="passage-text">"One principal advantage of retrieval-augmented systems is their <span class="highlight-text">capacity to incorporate current information without the computational expense of complete model retraining</span>. Unlike purely parametric models whose knowledge is fixed at training time, RAG models can <span class="highlight-text">continuously access updated knowledge sources</span>, making them particularly suitable for domains where information evolves rapidly."</p>
170
+ </div>
171
+
172
+ <div class="mt-3 flex justify-between items-center">
173
+ <div class="flex space-x-2">
174
+ <span class="text-xs px-2 py-1 bg-green-50 text-green-700 rounded">Advantage</span>
175
+ </div>
176
+ <button class="text-xs text-blue-600 hover:text-blue-800 flex items-center">
177
+ <i class="fas fa-expand-alt mr-1"></i> Expand
178
+ </button>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- More passage cards... -->
183
+ <button class="w-full py-2 text-sm text-blue-600 hover:text-blue-800 border border-gray-200 rounded-lg bg-white flex items-center justify-center">
184
+ <i class="fas fa-chevron-down mr-2"></i> Show 2 more sources
185
+ </button>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Source Preview Modal -->
190
+ <div id="sourceModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50">
191
+ <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col">
192
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
193
+ <h3 class="text-lg font-semibold">Source Document Preview</h3>
194
+ <button id="closeModal" class="text-gray-400 hover:text-gray-500">
195
+ <i class="fas fa-times"></i>
196
+ </button>
197
+ </div>
198
+ <div class="p-6 overflow-y-auto flex-grow">
199
+ <h4 class="text-xl font-medium mb-2">"RAG: Retrieval-Augmented Generation"</h4>
200
+ <div class="text-sm text-gray-500 mb-6">Lewis et al. · NeurIPS 2020 · Pages 42-45</div>
201
+
202
+ <div class="prose max-w-none">
203
+ <p class="mb-4">The retrieval-augmented generation framework addresses several limitations of conventional language models by integrating a dense passage retriever (DPR) with a sequence-to-sequence transformer. This hybrid approach achieves state-of-the-art results on knowledge-intensive tasks while remaining efficient to train and deploy.</p>
204
+
205
+ <p class="mb-4 bg-yellow-50 p-3 border-l-4 border-yellow-400">Key to RAG's effectiveness is the dynamic interaction between retrieval and generation. For each input, the retriever identifies relevant passages from a pre-processed document collection (Wikipedia in our experiments), which are then fed to the generator as additional context. This makes the system's knowledge updatable simply by modifying the document store, without expensive retraining.</p>
206
+
207
+ <p class="mb-4">We demonstrate empirically that RAG models produce more factual, specific, and diverse text than comparable parametric-only models, while maintaining fluency. On open-domain question answering tasks, RAG outperforms equivalent-sized BART models by 4-15% absolute points on exact match scores, with particularly strong gains on questions requiring factual precision.</p>
208
+ </div>
209
+ </div>
210
+ <div class="px-6 py-3 border-t border-gray-200 flex justify-between items-center bg-gray-50 rounded-b-lg">
211
+ <div class="text-sm text-gray-600">Document 1 of 5</div>
212
+ <div>
213
+ <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">View Full Document</button>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <script>
221
+ // Citation hover interaction
222
+ document.querySelectorAll('.citation').forEach(citation => {
223
+ citation.addEventListener('mouseover', function(e) {
224
+ const passageId = this.textContent;
225
+ const passageElement = document.querySelector(`[data-passage-id="${passageId}"]`);
226
+
227
+ // Highlight the passage card
228
+ if (passageElement) {
229
+ passageElement.classList.add('ring-2', 'ring-blue-400');
230
+ }
231
+
232
+ // Highlight corresponding text in the answer
233
+ if (this.parentElement.classList.contains('citation-highlight')) {
234
+ this.parentElement.classList.add('bg-blue-100');
235
+ }
236
+ });
237
+
238
+ citation.addEventListener('mouseout', function(e) {
239
+ const passageId = this.textContent;
240
+ const passageElement = document.querySelector(`[data-passage-id="${passageId}"]`);
241
+
242
+ // Remove highlight from passage card
243
+ if (passageElement) {
244
+ passageElement.classList.remove('ring-2', 'ring-blue-400');
245
+ }
246
+
247
+ // Remove highlight from answer text
248
+ if (this.parentElement.classList.contains('citation-highlight')) {
249
+ this.parentElement.classList.remove('bg-blue-100');
250
+ }
251
+ });
252
+
253
+ // Click to scroll to passage
254
+ citation.addEventListener('click', function(e) {
255
+ const passageId = this.textContent;
256
+ const passageElement = document.querySelector(`[data-passage-id="${passageId}"]`);
257
+
258
+ if (passageElement) {
259
+ passageElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
260
+ passageElement.classList.add('ring-2', 'ring-blue-400');
261
+
262
+ // Remove highlight after 2 seconds
263
+ setTimeout(() => {
264
+ passageElement.classList.remove('ring-2', 'ring-blue-400');
265
+ }, 2000);
266
+ }
267
+ });
268
+ });
269
+
270
+ // Passage card hover to highlight citations
271
+ document.querySelectorAll('.passage-card').forEach(card => {
272
+ card.addEventListener('mouseenter', function() {
273
+ const passageId = this.dataset.passageId;
274
+ document.querySelectorAll(`.citation`).forEach(citation => {
275
+ if (citation.textContent === passageId) {
276
+ citation.classList.add('text-blue-600', 'font-bold');
277
+ if (citation.parentElement.classList.contains('citation-highlight')) {
278
+ citation.parentElement.classList.add('bg-blue-100');
279
+ }
280
+ }
281
+ });
282
+ });
283
+
284
+ card.addEventListener('mouseleave', function() {
285
+ const passageId = this.dataset.passageId;
286
+ document.querySelectorAll(`.citation`).forEach(citation => {
287
+ if (citation.textContent === passageId) {
288
+ citation.classList.remove('text-blue-600', 'font-bold');
289
+ if (citation.parentElement.classList.contains('citation-highlight')) {
290
+ citation.parentElement.classList.remove('bg-blue-100');
291
+ }
292
+ }
293
+ });
294
+ });
295
+
296
+ // Expand button functionality
297
+ const expandBtn = this.querySelector('button');
298
+ if (expandBtn) {
299
+ expandBtn.addEventListener('click', function(e) {
300
+ e.stopPropagation();
301
+ openModal(this.closest('.passage-card').dataset.passageId);
302
+ });
303
+ }
304
+ });
305
+
306
+ // Modal functionality
307
+ function openModal(passageId) {
308
+ document.getElementById('sourceModal').classList.remove('hidden');
309
+ }
310
+
311
+ document.getElementById('closeModal').addEventListener('click', function() {
312
+ document.getElementById('sourceModal').classList.add('hidden');
313
+ });
314
+
315
+ // Close modal when clicking outside content
316
+ document.getElementById('sourceModal').addEventListener('click', function(e) {
317
+ if (e.target === this) {
318
+ this.classList.add('hidden');
319
+ }
320
+ });
321
+ </script>
322
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=b08x/rubyragql" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
323
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ <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>