Add Agents CRUD capabilities

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