From eccc61c0f54e9c173935e2f9c95942202ab56d9a Mon Sep 17 00:00:00 2001 From: jedheaj314 <51018779+jedheaj314@users.noreply.github.com> Date: Fri, 31 Jan 2025 14:18:41 +0000 Subject: [PATCH] Add Agents CRUD capabilities (#50) * Bump hashicorp/random from 3.4.3 to 3.6.3 in /infra (#5) Bumps [hashicorp/random](https://github.com/hashicorp/terraform-provider-random) from 3.4.3 to 3.6.3. - [Release notes](https://github.com/hashicorp/terraform-provider-random/releases) - [Changelog](https://github.com/hashicorp/terraform-provider-random/blob/main/CHANGELOG.md) - [Commits](https://github.com/hashicorp/terraform-provider-random/compare/v3.4.3...v3.6.3) --- updated-dependencies: - dependency-name: hashicorp/random dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump hashicorp/azuread from 3.0.2 to 3.1.0 in /infra (#6) Bumps [hashicorp/azuread](https://github.com/hashicorp/terraform-provider-azuread) from 3.0.2 to 3.1.0. - [Release notes](https://github.com/hashicorp/terraform-provider-azuread/releases) - [Changelog](https://github.com/hashicorp/terraform-provider-azuread/blob/main/CHANGELOG.md) - [Commits](https://github.com/hashicorp/terraform-provider-azuread/compare/v3.0.2...v3.1.0) --- updated-dependencies: - dependency-name: hashicorp/azuread dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump hashicorp/azurerm from 4.14.0 to 4.16.0 in /infra (#15) Bumps [hashicorp/azurerm](https://github.com/hashicorp/terraform-provider-azurerm) from 4.14.0 to 4.16.0. - [Release notes](https://github.com/hashicorp/terraform-provider-azurerm/releases) - [Changelog](https://github.com/hashicorp/terraform-provider-azurerm/blob/main/CHANGELOG.md) - [Commits](https://github.com/hashicorp/terraform-provider-azurerm/compare/v4.14.0...v4.16.0) --- updated-dependencies: - dependency-name: hashicorp/azurerm dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump azure/azapi from 2.1.0 to 2.2.0 in /infra (#18) Bumps [azure/azapi](https://github.com/Azure/terraform-provider-azapi) from 2.1.0 to 2.2.0. - [Release notes](https://github.com/Azure/terraform-provider-azapi/releases) - [Changelog](https://github.com/Azure/terraform-provider-azapi/blob/main/CHANGELOG.md) - [Commits](https://github.com/Azure/terraform-provider-azapi/compare/v2.1.0...v2.2.0) --- updated-dependencies: - dependency-name: azure/azapi dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump eslint from 9.17.0 to 9.18.0 in /app/ui (#17) Bumps [eslint](https://github.com/eslint/eslint) from 9.17.0 to 9.18.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v9.17.0...v9.18.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump fastapi-azure-auth from 5.0.0 to 5.0.1 in /app/api (#8) Bumps [fastapi-azure-auth](https://github.com/intility/fastapi-azure-auth) from 5.0.0 to 5.0.1. - [Release notes](https://github.com/intility/fastapi-azure-auth/releases) - [Commits](https://github.com/intility/fastapi-azure-auth/compare/5.0.0...5.0.1) --- updated-dependencies: - dependency-name: fastapi-azure-auth dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump uvicorn[standard] from 0.32.0 to 0.34.0 in /app/api (#9) Bumps [uvicorn[standard]](https://github.com/encode/uvicorn) from 0.32.0 to 0.34.0. - [Release notes](https://github.com/encode/uvicorn/releases) - [Changelog](https://github.com/encode/uvicorn/blob/master/docs/release-notes.md) - [Commits](https://github.com/encode/uvicorn/compare/0.32.0...0.34.0) --- updated-dependencies: - dependency-name: uvicorn[standard] dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump azure-cosmos from 4.7.0 to 4.9.0 in /app/api (#12) Bumps [azure-cosmos](https://github.com/Azure/azure-sdk-for-python) from 4.7.0 to 4.9.0. - [Release notes](https://github.com/Azure/azure-sdk-for-python/releases) - [Changelog](https://github.com/Azure/azure-sdk-for-python/blob/main/doc/esrp_release.md) - [Commits](https://github.com/Azure/azure-sdk-for-python/compare/azure-cosmos_4.7.0...azure-cosmos_4.9.0) --- updated-dependencies: - dependency-name: azure-cosmos dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump opencensus-ext-azure from 1.1.13 to 1.1.14 in /app/api (#7) Bumps [opencensus-ext-azure](https://github.com/census-instrumentation/opencensus-python) from 1.1.13 to 1.1.14. - [Release notes](https://github.com/census-instrumentation/opencensus-python/releases) - [Changelog](https://github.com/census-instrumentation/opencensus-python/blob/master/CHANGELOG.md) - [Commits](https://github.com/census-instrumentation/opencensus-python/commits) --- updated-dependencies: - dependency-name: opencensus-ext-azure dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump azure-identity from 1.17.1 to 1.19.0 in /app/api (#10) Bumps [azure-identity](https://github.com/Azure/azure-sdk-for-python) from 1.17.1 to 1.19.0. - [Release notes](https://github.com/Azure/azure-sdk-for-python/releases) - [Changelog](https://github.com/Azure/azure-sdk-for-python/blob/main/doc/esrp_release.md) - [Commits](https://github.com/Azure/azure-sdk-for-python/compare/azure-identity_1.17.1...azure-identity_1.19.0) --- updated-dependencies: - dependency-name: azure-identity dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @azure/identity from 4.5.0 to 4.6.0 in /app/ui (#13) Bumps [@azure/identity](https://github.com/Azure/azure-sdk-for-js) from 4.5.0 to 4.6.0. - [Release notes](https://github.com/Azure/azure-sdk-for-js/releases) - [Changelog](https://github.com/Azure/azure-sdk-for-js/blob/main/documentation/Changelog-for-next-generation.md) - [Commits](https://github.com/Azure/azure-sdk-for-js/compare/@azure/identity_4.5.0...@azure/identity_4.6.0) --- updated-dependencies: - dependency-name: "@azure/identity" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump react-router-dom from 7.1.1 to 7.1.3 in /app/ui (#11) Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 7.1.1 to 7.1.3. - [Release notes](https://github.com/remix-run/react-router/releases) - [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md) - [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@7.1.3/packages/react-router-dom) --- updated-dependencies: - dependency-name: react-router-dom dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump vite from 6.0.7 to 6.0.11 in /app/ui in the npm_and_yarn group (#32) Bumps the npm_and_yarn group in /app/ui with 1 update: [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite). Updates `vite` from 6.0.7 to 6.0.11 - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v6.0.11/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @types/node from 20.17.12 to 22.10.9 in /app/ui (#33) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.17.12 to 22.10.9. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Add pages and navigation * Update styles * Revert non-intentional changes * Revert mitakenly upgraded packages * Add compoenents and pages needed for CRUD agents * Add Agent dialog * Fix issues with CRUD - working now * Fix dismiss button on error message * Update delete modal and lading icons * Change edit button and view * Duplicate now add copy at the end of name * Minor code improvemets in react components * Add missing reference to an icon * Change copy prompt button place * Fix long card header title * Change button name from Apply to Save Co-authored-by: James Griffin * Update aftr runing prettier * Extract Agent interface * Update to use shared and makeStyles * Use comman error component * Remove view mode (UI) * Use handlers directly --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: AJ (Ashitosh Jedhe) Co-authored-by: James Griffin --- app/ui/src/App.tsx | 18 +- app/ui/src/Navigation.tsx | 28 +- app/ui/src/components/AddCard.tsx | 46 +++ app/ui/src/components/AgentCard.tsx | 113 +++++++ app/ui/src/components/AgentDialog.tsx | 308 ++++++++++++++++++ app/ui/src/components/AgentList.tsx | 143 ++++++++ app/ui/src/components/CustomDialog.tsx | 77 +++++ app/ui/src/components/ErrorMessage.tsx | 47 +++ app/ui/src/components/IssueCard.tsx | 245 ++++++++------ app/ui/src/components/PageHeader.tsx | 42 ++- app/ui/src/constants.ts | 7 + app/ui/src/pages/admin/AgentManager.tsx | 28 ++ app/ui/src/pages/admin/Agents.tsx | 20 -- .../{Settings.tsx => SettingManager.tsx} | 9 +- app/ui/src/pages/files/Files.tsx | 13 +- app/ui/src/pages/review/Review.tsx | 9 +- app/ui/src/services/api.ts | 62 +++- app/ui/src/styles/sharedStyles.ts | 66 ++++ app/ui/src/styles/useStyles.ts | 37 --- app/ui/src/types/prompt-agent.ts | 9 + 20 files changed, 1112 insertions(+), 215 deletions(-) create mode 100644 app/ui/src/components/AddCard.tsx create mode 100644 app/ui/src/components/AgentCard.tsx create mode 100644 app/ui/src/components/AgentDialog.tsx create mode 100644 app/ui/src/components/AgentList.tsx create mode 100644 app/ui/src/components/CustomDialog.tsx create mode 100644 app/ui/src/components/ErrorMessage.tsx create mode 100644 app/ui/src/constants.ts create mode 100644 app/ui/src/pages/admin/AgentManager.tsx delete mode 100644 app/ui/src/pages/admin/Agents.tsx rename app/ui/src/pages/admin/{Settings.tsx => SettingManager.tsx} (68%) create mode 100644 app/ui/src/styles/sharedStyles.ts delete mode 100644 app/ui/src/styles/useStyles.ts create mode 100644 app/ui/src/types/prompt-agent.ts diff --git a/app/ui/src/App.tsx b/app/ui/src/App.tsx index c4a5db8..c12dbdd 100644 --- a/app/ui/src/App.tsx +++ b/app/ui/src/App.tsx @@ -1,19 +1,20 @@ import { IPublicClientApplication } from "@azure/msal-browser"; import { MsalAuthenticationTemplate, MsalProvider } from "@azure/msal-react"; -import { Button, makeStyles } from "@fluentui/react-components"; +import { Avatar, Button, makeStyles } from "@fluentui/react-components"; import { ChevronLeft20Regular } from "@fluentui/react-icons"; import { useLocation, useNavigate } from "react-router-dom"; import logo from './assets/Azure.svg'; import { interactionType, loginRequest } from "./authConfig"; import { NavMenu, Pages } from "./Navigation"; + type AppProps = { pca: IPublicClientApplication; }; const useStyles = makeStyles({ - app: { backgroundColor: '#f5f5f5', color: '#fff', minHeight: '100vh' }, - header: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', padding: '8px' }, + app: { backgroundColor: '#f5f5f5', color: '#fff', minHeight: '100vh', overflowX: 'hidden'}, + header: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', padding: '8px', width: '100%', boxSizing: 'border-box' }, logo: { display: 'flex', alignItems: 'center', @@ -29,6 +30,11 @@ const useStyles = makeStyles({ }, logoText: { textDecoration: 'none', color: '#000' }, main: { display: 'flex', flexDirection: 'column', alignItems: 'center' }, + rightSection: { + display: 'flex', + alignItems: 'center', + gap: '16px', + }, }); function App({ pca }: AppProps) { @@ -49,7 +55,11 @@ function App({ pca }: AppProps) { logo

AI Document Review

- +
+ + +
+
diff --git a/app/ui/src/Navigation.tsx b/app/ui/src/Navigation.tsx index 9eb7c5f..349bab3 100644 --- a/app/ui/src/Navigation.tsx +++ b/app/ui/src/Navigation.tsx @@ -8,7 +8,6 @@ import { MenuGroup, MenuGroupHeader, MenuDivider, - Avatar, MenuItemLink, } from "@fluentui/react-components"; import { @@ -19,11 +18,12 @@ import { DocumentBulletListFilled, } from "@fluentui/react-icons"; import { useNavigate, useLocation, Routes, Route } from "react-router-dom"; -import Agents from "./pages/admin/Agents"; +import AgentManager from "./pages/admin/AgentManager"; import Files from "./pages/files/Files"; import Review from "./pages/review/Review"; -import Settings from "./pages/admin/Settings"; -import useStyles from "./styles/useStyles"; +import SettingManager from "./pages/admin/SettingManager"; +import { DOCUMENTATION_URL } from "./constants"; +import { sharedStyles } from "./styles/sharedStyles"; // paths @@ -34,12 +34,11 @@ const paths = { settings: "/admin/settings", }; -const documentation_url = "https://github.com/Azure-Samples/ai-document-review"; const NavMenu = () => { const navigate = useNavigate(); const location = useLocation(); - const classes = useStyles() + const sharedClasses = sharedStyles(); const isSelected = (path: string) => location.pathname === path; @@ -54,7 +53,7 @@ const NavMenu = () => { } onClick={() => navigate(paths.home)} - className={isSelected(paths.home) ? classes.selected : ""} + className={isSelected(paths.home) ? sharedClasses.selected : ""} > Home @@ -67,27 +66,22 @@ const NavMenu = () => { } onClick={() => navigate(paths.adminAgents)} - className={isSelected(paths.adminAgents) ? classes.selected : ""} + className={isSelected(paths.adminAgents) ? sharedClasses.selected : ""} > Agents Manager } onClick={() => navigate(paths.settings)} - className={isSelected(paths.settings) ? classes.selected : ""} + className={isSelected(paths.settings) ? sharedClasses.selected : ""} > Settings - } href={documentation_url} target="_blank" rel="noopener noreferrer"> + } href={DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer"> Documentation - - {/* Account */} - - - @@ -98,8 +92,8 @@ const Pages = () => ( } /> } /> - } /> - } /> + } /> + } /> ); diff --git a/app/ui/src/components/AddCard.tsx b/app/ui/src/components/AddCard.tsx new file mode 100644 index 0000000..0029617 --- /dev/null +++ b/app/ui/src/components/AddCard.tsx @@ -0,0 +1,46 @@ +import { Card, makeStyles, Text, tokens } from '@fluentui/react-components' +import { AddRegular } from '@fluentui/react-icons' + + +interface AddCardProps { + onClick: () => void + labelText: string +} + +const componentSyles = makeStyles({ + addIconText: { + textAlign: 'center', + fontWeight: tokens.fontWeightSemibold + }, + disabledCard: { + width: '200px', + maxWidth: '100%', + height: '260px' + }, + addIcon: { + fontSize: '72px', + color: tokens.colorNeutralForeground3, + margin: 'auto', + opacity: 0.5, + pointerEvents: 'none' + } +}) + +const AddCard: React.FC = ({ onClick, labelText }) => { + const componentClasses = componentSyles() + + return ( + onClick()} + > + + {labelText} + + ) +} + +export default AddCard diff --git a/app/ui/src/components/AgentCard.tsx b/app/ui/src/components/AgentCard.tsx new file mode 100644 index 0000000..8d1690b --- /dev/null +++ b/app/ui/src/components/AgentCard.tsx @@ -0,0 +1,113 @@ +import { + Button, + Caption1, + Card, + CardFooter, + CardHeader, + CardPreview, + Text, + Tooltip, + makeStyles +} from '@fluentui/react-components' +import { DeleteRegular, SquareMultipleRegular } from '@fluentui/react-icons' +import React from 'react' +import { sharedStyles } from '../styles/sharedStyles' +import { PromptAgent } from '../types/prompt-agent' + + +const componentSyles = makeStyles({ + cardHeaderTitle: { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + maxWidth: '165px', + }, + cardFooter: { + marginTop: "auto", + display: "flex", + justifyContent: "flex-end", + gap: "8px" + }, + cardbody: { + padding: '12px', + width: '175px', + textAlign: 'left', + display: '-webkit-box', + WebkitBoxOrient: 'vertical', + WebkitLineClamp: 3, + overflow: 'hidden', + textOverflow: 'ellipsis', + wordBreak: 'break-word', + maxWidth: '175px', + maxHeight: '125px' + } +}) + +interface AgentCardProps { + agent: PromptAgent + onViewAgent: (agent: PromptAgent) => void + onDeleteAgent: (id: string) => void + onEditAgent: (id: string) => void + onDuplicateAgent: (id: string) => void +} + +const AgentCard: React.FC = ({ + agent, + onViewAgent, + onDeleteAgent, + onDuplicateAgent +}) => { + const extractDate = (dateString: string | number | Date | undefined) => { + const date = new Date(dateString || '') + return !isNaN(date.getTime()) ? date.toLocaleDateString() : 'Date not available' + } + + const componentClasses = componentSyles() + const sharedClasses = sharedStyles() + + return ( + onViewAgent(agent)} key={agent.id} className={sharedClasses.card}> + + {agent.name} + + } + description={ + + {agent.updated_at_UTC + ? `Updated: ${extractDate(agent.updated_at_UTC)}` + : `Created: ${extractDate(agent.created_at_UTC)}`} + + } + /> + + {agent.guideline_prompt} + + + +