Skip to content

Commit ca9f166

Browse files
vipinnair22vipinnair22
committed
Theme changes
1 parent e833cd0 commit ca9f166

File tree

4 files changed

+31
-55
lines changed

4 files changed

+31
-55
lines changed

‎src/api/templates/index_react.html‎

Lines changed: 2 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,10 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<meta name="description" content="">
77
<title>Azure AI Agents Demo (React Version)</title>
8-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
9-
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
10-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
11-
integrity="sha256-4RctOgogjPAdwGbwq+rxfwAmSpZhWaafcZR9btzUk18=" crossorigin="anonymous">
12-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.2.3/dist/cosmo/bootstrap.min.css"
13-
integrity="sha256-axRDISYf7Hht1KhcMnfDV2nq7hD/8Q9Rxa0YlW/o3NU=" crossorigin="anonymous">
14-
<link href="/static/styles.css" rel="stylesheet" type="text/css">
158
<link href="/static/react/assets/main-react-app.css " rel="stylesheet" type="text/css">
16-
<style>
17-
.message-content {
18-
text-align: left;
19-
}
20-
</style>
219
</head>
22-
<body>
23-
<div class="container-fluid h-100 d-flex flex-row">
24-
<div class="row flex-grow-1 h-100">
25-
<!-- React App Mount Point -->
26-
<div id="react-root" class="col-full d-flex flex-column h-100"></div>
27-
28-
<!-- Document Viewer Section -->
29-
<div class="col-6 d-flex flex-column h-100 p-3 bg-light border-left" id="document-viewer-section" style="display: none !important;">
30-
<div class="d-flex justify-content-between align-items-center mb-2">
31-
<h5 class="mb-0">Document Viewer</h5>
32-
<button id="close-button" class="btn bi-x"></button>
33-
</div>
34-
<iframe id="document-viewer" class="flex-grow-1 border-0 rounded" style="background-color: white;"></iframe>
35-
</div>
36-
</div>
37-
</div>
38-
10+
<body style="margin: 0;">
11+
<div id="react-root"></div>
3912
<!-- Load React app with fixed filename -->
4013
<script type="module" src="/static/react/assets/main-react-app.js"></script>
4114
</body>

‎src/frontend/src/components/agents/AgentPreview.tsx‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { ReactNode, useState } from "react";
1+
import { ReactNode, useState, useMemo } from "react";
22
import { Body1, Button, Caption1, Title2 } from "@fluentui/react-components";
33
import { ChatRegular, MoreHorizontalRegular } from "@fluentui/react-icons";
44

55
import { AgentIcon } from "./AgentIcon";
6-
// import { SettingsPanel } from "../core/SettingsPanel";
6+
import { SettingsPanel } from "../core/SettingsPanel";
77
import { AgentPreviewChatBot } from "./AgentPreviewChatBot";
88
import { MenuButton } from "../core/MenuButton/MenuButton";
99
import { IChatItem } from "./chatbot/types";
@@ -23,13 +23,13 @@ interface IAgentPreviewProps {
2323
}
2424

2525
export function AgentPreview({ agentDetails }: IAgentPreviewProps): ReactNode {
26-
// const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false);
26+
const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false);
2727
const [messageList, setMessageList] = useState<IChatItem[]>([]);
2828
const [isResponding, setIsResponding] = useState(false);
2929

30-
// const handleSettingsPanelOpenChange = (isOpen: boolean) => {
31-
// setIsSettingsPanelOpen(isOpen);
32-
// };
30+
const handleSettingsPanelOpenChange = (isOpen: boolean) => {
31+
setIsSettingsPanelOpen(isOpen);
32+
};
3333

3434
const newThread = () => {
3535
setMessageList([]);
@@ -47,7 +47,7 @@ export function AgentPreview({ agentDetails }: IAgentPreviewProps): ReactNode {
4747
setMessageList((prev) => [...prev, userMessage]);
4848
setIsResponding(true);
4949

50-
// Simulate agent response after a delay
50+
// Simulate agent response after a delay. Can be removed when integrating with a real API.
5151
setTimeout(() => {
5252
const botMessage: IChatItem = {
5353
id: `bot-${Date.now()}`,
@@ -61,13 +61,13 @@ export function AgentPreview({ agentDetails }: IAgentPreviewProps): ReactNode {
6161
}, 1000);
6262
};
6363
const menuItems = [
64-
// {
65-
// key: "settings",
66-
// children: "Settings",
67-
// onClick: () => {
68-
// setIsSettingsPanelOpen(true);
69-
// },
70-
// },
64+
{
65+
key: "settings",
66+
children: "Settings",
67+
onClick: () => {
68+
setIsSettingsPanelOpen(true);
69+
},
70+
},
7171
{
7272
key: "terms",
7373
children: (
@@ -104,11 +104,14 @@ export function AgentPreview({ agentDetails }: IAgentPreviewProps): ReactNode {
104104
},
105105
];
106106

107-
const chatContext = {
108-
messageList,
109-
isResponding,
110-
onSend,
111-
};
107+
const chatContext = useMemo(
108+
() => ({
109+
messageList,
110+
isResponding,
111+
onSend,
112+
}),
113+
[messageList, isResponding]
114+
);
112115

113116
return (
114117
<div className={styles.container}>
@@ -167,10 +170,10 @@ export function AgentPreview({ agentDetails }: IAgentPreviewProps): ReactNode {
167170
</div>
168171

169172
{/* Settings Panel */}
170-
{/* <SettingsPanel
173+
<SettingsPanel
171174
isOpen={isSettingsPanelOpen}
172175
onOpenChange={handleSettingsPanelOpenChange}
173-
/> */}
176+
/>
174177
</div>
175178
);
176179
}

‎src/frontend/src/components/core/theme/ThemePicker.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ export const ThemePicker: React.FC = () => {
1616
{
1717
key: "Light",
1818
value: "Light",
19-
text: "Light theme",
19+
text: "Light",
2020
},
2121
{
2222
key: "Dark",
2323
value: "Dark",
24-
text: "Dark theme",
24+
text: "Dark",
2525
},
2626
{
2727
key: "System",
2828
value: "System",
29-
text: "System theme",
29+
text: "System",
3030
},
3131
],
3232
[]
@@ -35,7 +35,7 @@ export const ThemePicker: React.FC = () => {
3535
const selectedThemeText = useMemo(
3636
() =>
3737
options.find((opt) => opt.key === (savedTheme ?? "Light"))?.text ??
38-
"Light theme",
38+
"Light",
3939
[savedTheme, options]
4040
);
4141

‎src/frontend/src/components/core/theme/useThemeProvider.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
22
import { IThemeContextValue, Theme } from "./ThemeContext";
33
import { darkTheme, lightTheme } from "./themes";
44

5-
const LOCAL_STORAGE_THEME_KEY = "app-theme-preference";
5+
const LOCAL_STORAGE_THEME_KEY = "get-started-with-agents-app-theme-preference";
66

77
export function useMediaQuery(query: string): boolean {
88
const [matches, setMatches] = useState(() => {

0 commit comments

Comments
 (0)