Skip to content

Commit

Permalink
change sample page content
Browse files Browse the repository at this point in the history
  • Loading branch information
@svandenhoven
svandenhoven committed Jan 20, 2025
1 parent 048edc7 commit f5161b7
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 86 deletions.
66 changes: 28 additions & 38 deletions ...s/copilot_studio_client_api_and_spa/CopilotStudioClientSampleAPIClient/src/SamplePage.css
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,44 @@
.sample-page {
font-family: Arial, sans-serif;
width: 70%;
margin: 20px;
color: #333;
font-family: Arial, sans-serif;
width: 70%;
margin: 20px;
}

.sample-page h1 {
color: #2c3e50;
font-size: 2.5em;
margin-bottom: 20px;
.sample-page-header {
background-color: #0078d4;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}

.sample-page p {
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 20px;
.sample-page-content {
margin-top: 20px;
}

.sample-page ul {
list-style-type: disc;
margin-left: 20px;
margin-bottom: 20px;
.sample-page-content h2 {
color: #0078d4;
}

.sample-page ul li {
margin-bottom: 10px;
.sample-page-content p,
.sample-page-content ul,
.sample-page-content ol {
margin: 10px 0;
line-height: 1.6;
}

.sample-page table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
.sample-page-content ul {
list-style-type: disc;
padding-left: 20px;
}

.sample-page table, .sample-page th, .sample-page td {
border: 1px solid #ddd;
.sample-page-content ol {
list-style-type: decimal;
padding-left: 20px;
}

.sample-page th, .sample-page td {
padding: 12px;
text-align: left;
}

.sample-page th {
background-color: #f2f2f2;
}

.sample-page h2 {
color: #2c3e50;
font-size: 2em;
margin-top: 30px;
margin-bottom: 10px;
.sample-page-content code {
background-color: #f4f4f4;
padding: 2px 4px;
border-radius: 3px;
}
80 changes: 32 additions & 48 deletions ...es/copilot_studio_client_api_and_spa/CopilotStudioClientSampleAPIClient/src/SamplePage.js
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,37 @@
import React from 'react';
import './SamplePage.css';

const SamplePage = () => {
return (
<div className="sample-page">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
<h2>Specifications</h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td>Ipsum dolor sit amet</td>
</tr>
<tr>
<td>Consectetur</td>
<td>Adipiscing elit</td>
</tr>
<tr>
<td>Sed</td>
<td>Do eiusmod tempor</td>
</tr>
<tr>
<td>Incididunt</td>
<td>Ut labore et dolore</td>
</tr>
<tr>
<td>Magna</td>
<td>Aliqua</td>
</tr>
</tbody>
</table>
<h2>Why Choose Lorem Ipsum?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
);
};
function SamplePage() {
return (
<div className="sample-page">
<header className="sample-page-header">
<h1>Copilot Studio Client Sample API Client</h1>
</header>
<section className="sample-page-content">
<h2>Overview</h2>
<p>
The Copilot Studio Client Sample API Client is a sophisticated React-based application designed to demonstrate the seamless integration with the Copilot Studio Client Sample API. This application allows users to log in with their Microsoft Work or School account, providing access to a Microsoft Copilot Studio agent.
</p>
<h2>Key Features</h2>
<ul>
<li><strong>Agent Interaction:</strong> Engage in conversations with a Microsoft Copilot Studio agent through a user-friendly web interface.</li>
<li><strong>User Authentication:</strong> Securely log in and log out using Azure Active Directory with MSAL.</li>
<li><strong>Change Agent:</strong> Easily switch between different agents by modifying the URL with the query string parameter <code>?botidentifier=&lt;schema name of agent&gt;</code>. This directs the API to use the specified agent within the user's tenant.</li>
<li><strong>Token Acquisition:</strong> Silently acquire access tokens for authenticated API requests.</li>
<li><strong>API Interaction:</strong> Demonstrates how to interact with the Copilot Studio Client Sample API, including sending messages and managing conversations.</li>
</ul>
<h2>How to Use</h2>
<p>
To use this application, follow these steps:
</p>
<ol>
<li>Log in with your Microsoft Work or School account that has access to the agent. Default agent is **sldc_weather** as set in .env variable REACT_APP_BOT_IDENTIFIER</li>
<li>Start a conversation with the agent by typing a message in the chat input field and pressing Enter.</li>
<li>To change the bot, add the query string parameter <code>?botidentifier=&lt;schema name of agent&gt;</code> to the URL. This will direct the API to use the specified agent within your tenant.</li>
</ol>
</section>
</div>
);
}

export default SamplePage;

0 comments on commit f5161b7

Please sign in to comment.