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](hashicorp/terraform-provider-random@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] <support@github.com>
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](hashicorp/terraform-provider-azuread@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] <support@github.com>
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](hashicorp/terraform-provider-azurerm@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] <support@github.com>
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](Azure/terraform-provider-azapi@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] <support@github.com>
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](eslint/eslint@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] <support@github.com>
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](intility/fastapi-azure-auth@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] <support@github.com>
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](encode/uvicorn@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] <support@github.com>
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](Azure/azure-sdk-for-python@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] <support@github.com>
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] <support@github.com>
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](Azure/azure-sdk-for-python@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] <support@github.com>
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] <support@github.com>
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] <support@github.com>
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] <support@github.com>
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] <support@github.com>
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 <me@JamesGriff.in>

* 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] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: AJ (Ashitosh Jedhe) <ajedhe@microsoft.com>
Co-authored-by: James Griffin <me@JamesGriff.in>

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) {
               <img src={logo} alt="logo" />
               <h3>AI Document Review</h3>
             </div>
-            <NavMenu />
+            <div className={classes.rightSection}>
+              <NavMenu />
+              <Avatar aria-label="User" size={32} />
+            </div>
+
           </header>
 
           <main className={classes.main}>

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 = () => {
           <MenuItem
             icon={<Home20Filled />}
             onClick={() => navigate(paths.home)}
-            className={isSelected(paths.home) ? classes.selected  : ""}
+            className={isSelected(paths.home) ? sharedClasses.selected  : ""}
           >
             Home
           </MenuItem>
@@ -67,27 +66,22 @@ const NavMenu = () => {
             <MenuItem
               icon={<Prompt20Filled />}
               onClick={() => navigate(paths.adminAgents)}
-              className={isSelected(paths.adminAgents) ? classes.selected : ""}
+              className={isSelected(paths.adminAgents) ? sharedClasses.selected : ""}
             >
               Agents Manager
             </MenuItem>
             <MenuItem
               icon={<Settings20Filled />}
               onClick={() => navigate(paths.settings)}
-              className={isSelected(paths.settings) ? classes.selected : ""}
+              className={isSelected(paths.settings) ? sharedClasses.selected : ""}
             >
               Settings
             </MenuItem>
           </MenuGroup>
           <MenuDivider />
-          <MenuItemLink icon={<DocumentBulletListFilled />} href={documentation_url} target="_blank" rel="noopener noreferrer">
+          <MenuItemLink icon={<DocumentBulletListFilled />} href={DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
             Documentation
           </MenuItemLink>
-
-          {/* Account */}
-          <MenuItem>
-            <Avatar aria-label="User" size={32} />
-          </MenuItem>
         </MenuList>
       </MenuPopover>
     </Menu>
@@ -98,8 +92,8 @@ const Pages = () => (
   <Routes>
     <Route path={paths.home} element={<Files />} />
     <Route path={paths.review} element={<Review />} />
-    <Route path={paths.adminAgents} element={<Agents />} />
-    <Route path={paths.settings} element={<Settings />} />
+    <Route path={paths.adminAgents} element={<AgentManager />} />
+    <Route path={paths.settings} element={<SettingManager />} />
   </Routes>
 );
 

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<AddCardProps> = ({ onClick, labelText }) => {
+  const componentClasses = componentSyles()
+
+  return (
+    <Card
+      aria-label={labelText}
+      role="button"
+      className={componentClasses.disabledCard}
+      appearance="filled-alternative"
+      onClick={() => onClick()}
+    >
+      <AddRegular className={componentClasses.addIcon} />
+      <Text className={componentClasses.addIconText}>{labelText}</Text>
+    </Card>
+  )
+}
+
+export default AddCard

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<AgentCardProps> = ({
+  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 (
+    <Card onClick={() => onViewAgent(agent)} key={agent.id} className={sharedClasses.card}>
+      <CardHeader
+        header={
+          <Text weight="semibold" className={componentClasses.cardHeaderTitle}>
+            {agent.name}
+          </Text>
+        }
+        description={
+          <Caption1 className={sharedClasses.caption}>
+            {agent.updated_at_UTC
+              ? `Updated: ${extractDate(agent.updated_at_UTC)}`
+              : `Created: ${extractDate(agent.created_at_UTC)}`}
+          </Caption1>
+        }
+      />
+      <CardPreview>
+        <Text className={componentClasses.cardbody}>{agent.guideline_prompt}</Text>
+      </CardPreview>
+      <CardFooter className={componentClasses.cardFooter}>
+        <Tooltip content="Delete Agent" relationship="label">
+          <Button
+            onClick={(e) => {
+              e.stopPropagation()
+              onDeleteAgent(agent.id)
+            }}
+            icon={<DeleteRegular />}
+            aria-label="Delete Agent"
+          />
+        </Tooltip>
+        <Tooltip content="Duplicate Agent" relationship="label">
+          <Button
+            onClick={(e) => {
+              e.stopPropagation()
+              onDuplicateAgent(agent.id)
+            }}
+            icon={<SquareMultipleRegular />}
+            aria-label="Duplicate Agent"
+          />
+        </Tooltip>
+      </CardFooter>
+    </Card>
+  )
+}
+
+export default AgentCard