Skip to content

Commit 1649233

Browse files
yorekyorek
committed
refactored samples page
1 parent 4ab7060 commit 1649233

File tree

8 files changed

+874
-910
lines changed

8 files changed

+874
-910
lines changed

‎client/package-lock.json‎

Lines changed: 696 additions & 813 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"@fluentui/react-components": "^9.55.1",
14-
"@fluentui/react-icons": "^2.0.265",
13+
"@fluentui/react-components": "^9.59.0",
14+
"@fluentui/react-icons": "^2.0.274",
1515
"js-cookie": "^3.0.5",
1616
"react-dom": "^18.3.1",
1717
"react-markdown": "^9.0.1",

‎client/src/SamplesPage.jsx‎

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
import React, { useState, useEffect } from 'react';
2-
//import styles from './assets/styles/AboutPage.module.css';
2+
import {
3+
Button,
4+
Spinner,
5+
Link,
6+
Card,
7+
CardHeader,
8+
CardFooter
9+
} from '@fluentui/react-components';
10+
import {Link16Regular, Link20Regular} from '@fluentui/react-icons';
11+
import ReactMarkdown from 'react-markdown';
12+
13+
import PageTitle from './components/PageTitle';
14+
15+
import styles from './assets/styles/SamplesPage.module.css';
316

417
const SamplesPage = () => {
518

@@ -10,29 +23,49 @@ const SamplesPage = () => {
1023
console.log('Fetching samples...');
1124
const fetchSamples = async () => {
1225
setLoading(true);
13-
const response = await fetch('./data-api/rest/samples?$orderby=id');
26+
const response = await fetch('./data-api/rest/samples?$orderby=created_on desc');
1427
const data = await response.json();
1528
setSamples(data.value);
1629
setLoading(false);
30+
console.log('Done.');
1731
};
18-
32+
1933
fetchSamples();
20-
}, []);
34+
}, [location]);
2135

2236
return (
2337
<>
24-
{loading && <p>Loading...</p>}
25-
{!loading &&
26-
<div>
27-
{samples.map((sample, index) => (
28-
<div key={index}>
29-
<h3>{sample.id}: {sample.name}</h3>
30-
<p>{sample.description}</p>
31-
<a href={sample.url}>{sample.url}</a>
32-
</div>
33-
))}
38+
<PageTitle />
39+
<div className={styles.samples}>
40+
{loading && <p>Loading...</p>}
41+
{!loading &&
42+
samples.map((result, index) => {
43+
return (
44+
<Card key={index} className={styles.resultCard}>
45+
<CardHeader
46+
header={
47+
<div className={styles.resultCardHeader}>
48+
<Link href={result.url} target='blank'>{result.name} <Link24Regular /></Link>
49+
</div>
50+
}
51+
description={
52+
<div>
53+
<div className={styles.resultDescription}>
54+
<ReactMarkdown>
55+
{result.description}
56+
</ReactMarkdown>
57+
</div>
58+
<div className={styles.resultDetails}>
59+
Created on: {result.created_on}, Updated on: {result.updated_on}
60+
</div>
61+
</div>
62+
}
63+
/>
64+
</Card>
65+
);
66+
})
67+
}
3468
</div>
35-
}
3669
</>
3770
);
3871
};

‎client/src/SearchPage.jsx‎

Lines changed: 28 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import ReactMarkdown from 'react-markdown';
2323
import Cookies from 'js-cookie';
2424
import styles from './assets/styles/SearchPage.module.css';
2525
import GitHash from './components/GitVersion';
26+
import PageTitle from './components/PageTitle';
2627

2728
let pageStatus = "first_load";
2829

@@ -32,30 +33,10 @@ const SearchPage = () => {
3233
const [results, setResults] = useState([]);
3334
const [loading, setLoading] = useState(false);
3435
const [error, setError] = useState([]);
35-
const [sampleCount, setSampleCount] = useState(0);
36-
const [isSampleCountLoading, setIsSampleCountLoading] = useState(true); // For sample count loading
3736
const location = useLocation();
3837
const [popOverOpen, setPopOverOpen] = useState(false);
3938

4039
useEffect(() => {
41-
const fetchSampleCount = async () => {
42-
setIsSampleCountLoading(true);
43-
try {
44-
const response = await fetch('./data-api/rest/countSamples');
45-
if (response.ok) {
46-
const data = await response.json();
47-
const count = data.value[0].total_sample_count;
48-
setSampleCount(count);
49-
}
50-
} catch (error) {
51-
console.log(error);
52-
} finally {
53-
setIsSampleCountLoading(false);
54-
}
55-
};
56-
57-
fetchSampleCount();
58-
5940
const params = new URLSearchParams(location.search);
6041
const q = params.get('q');
6142
//console.log('Query:', q);
@@ -180,44 +161,34 @@ const SearchPage = () => {
180161

181162
return (
182163
<>
183-
<div className={styles.header}>
184-
<div className={styles.title}>
185-
Azure SQL DB Samples AI Agentic RAG Search 💡🔍
186-
</div>
187-
<div className={styles.subtitle}>
188-
Find samples using AI Agents search capabilities 🚀
189-
</div>
190-
<div className={styles.sampleCount}>
191-
{isSampleCountLoading ? 'Finding how many samples are available...' : (<span>There are <Link href="https://aka.ms/sqlai-samples" target="_blank">{sampleCount} samples</Link> in the database.</span>)}
192-
</div>
193-
<div className={styles.buttonsArea}>
194-
<TeachingPopover defaultOpen={popOverOpen}>
195-
<TeachingPopoverTrigger>
196-
<Button>How does it work?</Button>
197-
</TeachingPopoverTrigger>
198-
<TeachingPopoverSurface className={styles.popOverSurface}>
199-
<TeachingPopoverHeader>Tips</TeachingPopoverHeader>
200-
<TeachingPopoverBody>
201-
<TeachingPopoverTitle>AI Agent Powered Search</TeachingPopoverTitle>
202-
<div>
203-
This search engine uses AI Agents to find samples from the <Link href="https://aka.ms/sqlai-samples" target="_blank">Azure SQL Database Samples repository</Link> using a RAG pattern with structured output.
204-
<ul>
205-
<li>The searched text is given to an <strong>AI Agent</strong> that decide the best tool to use to answer the question, either using similarity search or generating and executing a SQL query</li>
206-
<li>Similiarity search across all available resources is done using the newly introduced <Link href='https://devblogs.microsoft.com/azure-sql/exciting-announcement-public-preview-of-native-vector-support-in-azure-sql-database/' target="_blank">vector support in Azure SQL Database</Link>.</li>
207-
<li>Results are then passed to a GPT-4o model to generate a sample summary and thoughts with a defined <Link href='https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/structured-outputs?tabs=rest' target="_blank">structured output</Link>.</li>
208-
<li><strong>Semantic caching</strong> is used to improve the performance of the search engine and reduce LLM calls costs.</li>
209-
</ul>
210-
If you want to have more details and get the source code of this sample, just ask about "this agentic AI sample" or "this website sample". Read more about creating AI apps with Azure SQL here: <Link href="https://aka.ms/sqlai" target="_blank">https://aka.ms/sqlai</Link>
211-
</div>
212-
</TeachingPopoverBody>
213-
<TeachingPopoverFooter primary="Got it" />
214-
</TeachingPopoverSurface>
215-
</TeachingPopover>
216-
217-
<Button onClick={handleGoToGithub} target="_blank">Go to GitHub Repo</Button>
218-
</div>
219-
</div>
164+
<PageTitle />
165+
<div className={styles.buttonsArea}>
166+
<TeachingPopover defaultOpen={popOverOpen}>
167+
<TeachingPopoverTrigger>
168+
<Button>How does it work?</Button>
169+
</TeachingPopoverTrigger>
170+
<TeachingPopoverSurface className={styles.popOverSurface}>
171+
<TeachingPopoverHeader>Tips</TeachingPopoverHeader>
172+
<TeachingPopoverBody>
173+
<TeachingPopoverTitle>AI Agent Powered Search</TeachingPopoverTitle>
174+
<div>
175+
This search engine uses AI Agents to find samples from the <Link href="https://aka.ms/sqlai-samples" target="_blank">Azure SQL Database Samples repository</Link> using a RAG pattern with structured output.
176+
<ul>
177+
<li>The searched text is given to an <strong>AI Agent</strong> that decide the best tool to use to answer the question, either using similarity search or generating and executing a SQL query</li>
178+
<li>Similiarity search across all available resources is done using the newly introduced <Link href='https://devblogs.microsoft.com/azure-sql/exciting-announcement-public-preview-of-native-vector-support-in-azure-sql-database/' target="_blank">vector support in Azure SQL Database</Link>.</li>
179+
<li>Results are then passed to a GPT-4o model to generate a sample summary and thoughts with a defined <Link href='https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/structured-outputs?tabs=rest' target="_blank">structured output</Link>.</li>
180+
<li><strong>Semantic caching</strong> is used to improve the performance of the search engine and reduce LLM calls costs.</li>
181+
</ul>
182+
If you want to have more details and get the source code of this sample, just ask about "this agentic AI sample" or "this website sample". Read more about creating AI apps with Azure SQL here: <Link href="https://aka.ms/sqlai" target="_blank">https://aka.ms/sqlai</Link>
183+
</div>
184+
</TeachingPopoverBody>
185+
<TeachingPopoverFooter primary="Got it" />
186+
</TeachingPopoverSurface>
187+
</TeachingPopover>
220188

189+
<Button onClick={handleGoToGithub} target="_blank">Go to GitHub Repo</Button>
190+
</div>
191+
221192
<GitHash />
222193

223194
<div className={styles.searchWrapper}>

‎client/src/assets/styles/SamplesPage.module.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.samples {
2+
font-size: small;
3+
width: 75%;
4+
margin: 40px auto; /* Center the results */
5+
display: grid;
6+
grid-template-columns: auto;
7+
justify-content: center;
8+
margin-bottom: 20px;
9+
gap: 10px;
10+
}
11+
12+
.resultCardHeader {
13+
font-size: large;
14+
font-weight: bold;
15+
}
16+
17+
.resultCard {
18+
width: 100%;
19+
}
20+
21+
.resultDescription {
22+
margin-top: 10px;
23+
}
24+
25+
.resultCardFooter {
26+
margin-left: auto;
27+
margin-right: auto;
28+
margin-top: auto;
29+
}
30+
31+
.resultDetails {
32+
margin-top: 10px;
33+
color: #555555;
34+
}

‎client/src/assets/styles/SearchPage.module.css‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,3 @@
1-
.header {
2-
text-align: center;
3-
margin-top: 60px;
4-
margin-bottom: 20px;
5-
}
6-
7-
.title {
8-
font-size: xx-large;
9-
font-weight: bold;
10-
color: #0078D4;
11-
}
12-
13-
.subtitle {
14-
font-size: large;
15-
margin-top: 15px;
16-
}
17-
18-
.sampleCount {
19-
font-size: medium;
20-
margin-top: 10px;
21-
margin-bottom: 15px;
22-
}
23-
241
.searchWrapper {
252
display: flex;
263
justify-content: center;

‎client/src/components/PageTitle.jsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { Link } from '@fluentui/react-components';
3+
import styles from './PageTitle.module.css';
4+
5+
export default function PageTitle() {
6+
const [sampleCount, setSampleCount] = useState(0);
7+
const [isSampleCountLoading, setIsSampleCountLoading] = useState(true);
8+
9+
useEffect(() => {
10+
const fetchSampleCount = async () => {
11+
setIsSampleCountLoading(true);
12+
try {
13+
const response = await fetch('./data-api/rest/countSamples');
14+
if (response.ok) {
15+
const data = await response.json();
16+
const count = data.value[0].total_sample_count;
17+
setSampleCount(count);
18+
}
19+
} catch (error) {
20+
console.log(error);
21+
} finally {
22+
setIsSampleCountLoading(false);
23+
}
24+
};
25+
26+
fetchSampleCount();
27+
}, [location]);
28+
29+
return (
30+
<div className={styles.header}>
31+
<div className={styles.title}>
32+
Azure SQL DB Samples AI Agentic RAG Search 💡🔍
33+
</div>
34+
<div className={styles.subtitle}>
35+
Find samples using AI Agents search capabilities 🚀
36+
</div>
37+
<div className={styles.sampleCount}>
38+
{isSampleCountLoading ? 'Finding how many samples are available...' : (<span>There are <Link href="/samples">{sampleCount} samples</Link> in the database.</span>)}
39+
</div>
40+
</div>
41+
);
42+
};
43+

‎client/src/components/PageTitle.module.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.header {
2+
text-align: center;
3+
margin-top: 60px;
4+
margin-bottom: 20px;
5+
}
6+
7+
.title {
8+
font-size: xx-large;
9+
font-weight: bold;
10+
color: #0078D4;
11+
}
12+
13+
.subtitle {
14+
font-size: large;
15+
margin-top: 15px;
16+
}
17+
18+
.sampleCount {
19+
font-size: medium;
20+
margin-top: 10px;
21+
margin-bottom: 15px;
22+
}
23+

0 commit comments

Comments
 (0)