diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/package-lock.json b/coffeeAGNTCY/coffee_agents/lungo/frontend/package-lock.json index 81bc0673..5bd86fe3 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/package-lock.json +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/package-lock.json @@ -12,7 +12,7 @@ "@emotion/styled": "^11.14.0", "@mui/icons-material": "^7.0.1", "@mui/material": "^7.0.1", - "@open-ui-kit/core": "^1.6.0", + "@open-ui-kit/core": "^2.1.0", "@reactflow/node-resizer": "^2.2.14", "@xyflow/react": "^12.6.4", "axios": "^1.16.1", @@ -30,6 +30,7 @@ }, "devDependencies": { "@eslint/js": "^9.25.0", + "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.2", "@types/dompurify": "^3.0.5", @@ -1473,9 +1474,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.9.tgz", - "integrity": "sha512-MOkOCTfbMJwLshlBCKJ59V2F/uaLYfmKnN76kksj6jlGUVdI25A9Hzs08m+zjBRdLv+sK7Rqdsefe8X7h/6PCw==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.11.tgz", + "integrity": "sha512-a7I/b/nBTdXYz2cOSlEmkQ9WWE1x8FHpqMhFPp+Y1VPFxcOw91G5ELOHARQAGSPy5V+UCgJua6K/1x70bAtQPw==", "license": "MIT", "funding": { "type": "opencollective", @@ -1483,9 +1484,9 @@ } }, "node_modules/@mui/icons-material": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.9.tgz", - "integrity": "sha512-BT+zPJXss8Hg/oEMRmHl17Q97bPACG4ufFSfGEdhiE96jOyR5Dz1ty7ZWt1fVGR0y1p+sSgEwQT/MNZQmoWDCw==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.11.tgz", + "integrity": "sha512-+hz5ilwHZ3djd5es3sCErLioqe/NhZcYTsV/TNXZAMdJdb23F4xzJjqnnZdnurc3S1+ietcssRNqieOhPQLZ7Q==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6" @@ -1498,7 +1499,7 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^7.3.9", + "@mui/material": "^7.3.11", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -1553,16 +1554,16 @@ } }, "node_modules/@mui/material": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.9.tgz", - "integrity": "sha512-I8yO3t4T0y7bvDiR1qhIN6iBWZOTBfVOnmLlM7K6h3dx5YX2a7rnkuXzc2UkZaqhxY9NgTnEbdPlokR1RxCNRQ==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.11.tgz", + "integrity": "sha512-yq8bPc3LxOwKRWpcjRgDkYFmpM6aKlARfESTmOQcvLYFeJwtHte2tw6hJDrb8sk8wcvpDprHEHVaoUU0MslIkw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", - "@mui/core-downloads-tracker": "^7.3.9", - "@mui/system": "^7.3.9", + "@mui/core-downloads-tracker": "^7.3.11", + "@mui/system": "^7.3.11", "@mui/types": "^7.4.12", - "@mui/utils": "^7.3.9", + "@mui/utils": "^7.3.11", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", @@ -1581,7 +1582,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^7.3.9", + "@mui/material-pigment-css": "^7.3.11", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1602,13 +1603,13 @@ } }, "node_modules/@mui/private-theming": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.9.tgz", - "integrity": "sha512-ErIyRQvsiQEq7Yvcvfw9UDHngaqjMy9P3JDPnRAaKG5qhpl2C4tX/W1S4zJvpu+feihmZJStjIyvnv6KDbIrlw==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.11.tgz", + "integrity": "sha512-9B+YKms0fRHbNrqp9tOT/DNbNnU5gyvJ1o3qAGXfq8GmZcbJnE3At9x07Zr/o0pkhzg4aDdwXVqe4+AcgtOCPA==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", - "@mui/utils": "^7.3.9", + "@mui/utils": "^7.3.11", "prop-types": "^15.8.1" }, "engines": { @@ -1629,9 +1630,9 @@ } }, "node_modules/@mui/styled-engine": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.9.tgz", - "integrity": "sha512-JqujWt5bX4okjUPGpVof/7pvgClqh7HvIbsIBIOOlCh2u3wG/Bwp4+E1bc1dXSwkrkp9WUAoNdI5HEC+5HKvMw==", + "version": "7.3.10", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.10.tgz", + "integrity": "sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", @@ -1663,16 +1664,16 @@ } }, "node_modules/@mui/system": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.9.tgz", - "integrity": "sha512-aL1q9am8XpRrSabv9qWf5RHhJICJql34wnrc1nz0MuOglPRYF/liN+c8VqZdTvUn9qg+ZjRVbKf4sJVFfIDtmg==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.11.tgz", + "integrity": "sha512-7izwGWdNawAKpBKcRlx7f2gFnAAjmASBWvMcyX4YYEeLOFsbfGRbUYGInvnAcUeql3rPxI7F9Ft4oY2OLRz44g==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", - "@mui/private-theming": "^7.3.9", - "@mui/styled-engine": "^7.3.9", + "@mui/private-theming": "^7.3.11", + "@mui/styled-engine": "^7.3.10", "@mui/types": "^7.4.12", - "@mui/utils": "^7.3.9", + "@mui/utils": "^7.3.11", "clsx": "^2.1.1", "csstype": "^3.2.3", "prop-types": "^15.8.1" @@ -1720,9 +1721,9 @@ } }, "node_modules/@mui/utils": { - "version": "7.3.9", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.9.tgz", - "integrity": "sha512-U6SdZaGbfb65fqTsH3V5oJdFj9uYwyLE2WVuNvmbggTSDBb8QHrFsqY8BN3taK9t3yJ8/BPHD/kNvLNyjwM7Yw==", + "version": "7.3.11", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz", + "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", @@ -1836,9 +1837,9 @@ } }, "node_modules/@open-ui-kit/core": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@open-ui-kit/core/-/core-1.6.0.tgz", - "integrity": "sha512-hGb/U5wmJdFiftjJkKjMPi7h3rc7wruCsxHV+6Iaqr1xoZymfuf99BibhPZRtuTllQr6+QpKvMsfXMou56Dqcg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@open-ui-kit/core/-/core-2.1.0.tgz", + "integrity": "sha512-ICkJw7aP8aMZEalH4jBZrnQWOodf+PnjMyFRrjdKDltx0VCvn2JaUsfNFrmqk0NSPp7DcOo2SF7XRb4JrBQC6Q==", "license": "Apache-2.0", "dependencies": { "@emotion/react": "^11.14.0", @@ -2418,7 +2419,6 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -2493,8 +2493,7 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -3380,7 +3379,6 @@ "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -4475,8 +4473,7 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/dom-helpers": { "version": "5.2.1", @@ -5948,7 +5945,6 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -7312,7 +7308,6 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -7328,7 +7323,6 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=10" }, @@ -7341,8 +7335,7 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/prismjs": { "version": "1.30.0", @@ -7436,9 +7429,9 @@ } }, "node_modules/react-is": { - "version": "19.2.4", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz", - "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==", + "version": "19.2.7", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz", + "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==", "license": "MIT" }, "node_modules/react-markdown": { diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/package.json b/coffeeAGNTCY/coffee_agents/lungo/frontend/package.json index 25b9080c..a51f6b24 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/package.json +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/package.json @@ -25,7 +25,7 @@ "@emotion/styled": "^11.14.0", "@mui/icons-material": "^7.0.1", "@mui/material": "^7.0.1", - "@open-ui-kit/core": "^1.6.0", + "@open-ui-kit/core": "^2.1.0", "@reactflow/node-resizer": "^2.2.14", "@xyflow/react": "^12.6.4", "axios": "^1.16.1", @@ -43,6 +43,7 @@ }, "devDependencies": { "@eslint/js": "^9.25.0", + "@testing-library/dom": "^10.4.1", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.2", "@types/dompurify": "^3.0.5", diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/ChatAvatarCircle.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/ChatAvatarCircle.tsx index 7b02d7f5..1207abab 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/ChatAvatarCircle.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/ChatAvatarCircle.tsx @@ -4,9 +4,10 @@ **/ import React from "react" -import { useTheme, useThemeMode, Box } from "@open-ui-kit/core" +import { useTheme, Box } from "@open-ui-kit/core" import AgentIcon from "@/assets/Coffee_Icon.svg" +import { useAppThemeMode } from "@/hooks/useAppThemeMode" export interface ChatAvatarCircleProps { children: React.ReactNode @@ -15,7 +16,7 @@ export interface ChatAvatarCircleProps { export const ChatAvatarCircle: React.FC = ({ children, }) => { - const { isDarkMode } = useThemeMode() + const { isDarkMode } = useAppThemeMode() const theme = useTheme() const avatarBg = isDarkMode ? theme.palette.vars.agentcyDarkBlue diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/feeds/FeedCollapseButton.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/feeds/FeedCollapseButton.tsx index 49d110c4..6f7f3847 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/feeds/FeedCollapseButton.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Chat/feeds/FeedCollapseButton.tsx @@ -46,7 +46,6 @@ export function FeedCollapseButton({ return ( = ({ ) return ( - - + Directory Information = ({ > - + - + {isDirectoryNode ? ( @@ -250,8 +250,8 @@ const OasfRecordModal: React.FC = ({ No data available )} - - + + ) } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/CustomNode.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/CustomNode.tsx index 46622fd2..f7ffdd1a 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/CustomNode.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/CustomNode.tsx @@ -34,7 +34,8 @@ import { CUSTOM_NODE_WIDTH, } from "@/utils/graphNodeDimensions" import { CustomNodeData, ExtraHandle } from "./types" -import TransportRail, { railBackgroundImage } from "./TransportRail" +import TransportRail from "./TransportRail" +import { railBackgroundImage } from "./transportRailBackground" const POSITION_MAP: Record = { top: Position.Top, diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/TransportRail.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/TransportRail.tsx index 2be60bfd..a0c7b9c9 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/TransportRail.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/TransportRail.tsx @@ -5,55 +5,13 @@ import React from "react" import { alpha } from "@mui/material/styles" -import type { Theme } from "@mui/material/styles" import { Box, Typography, useTheme } from "@open-ui-kit/core" -import { transportMetaFor, type AgentTransport } from "./transportMeta" - -function normalizeTransportName(value: string | undefined): string { - return value?.trim().toLowerCase() ?? "" -} - -function getRailThemeColors(theme: Theme) { - const highlight = theme.palette.primary.main - const highlightedText = theme.palette.primary.contrastText - const resting = - theme.palette.mode === "dark" - ? theme.palette.background.paper - : theme.palette.common.white - const restingText = theme.palette.text.primary - const separator = alpha( - theme.palette.primary.main, - theme.palette.mode === "dark" ? 0.7 : 0.55, - ) - - return { highlight, highlightedText, resting, restingText, separator } -} -export function railBackgroundImage( - transports: AgentTransport[] | undefined, - activeTransport: string | undefined, - theme: Theme, -): string | undefined { - if (!transports || transports.length === 0) return undefined - - const normalizedActive = normalizeTransportName(activeTransport) - const railColors = getRailThemeColors(theme) - const stops: string[] = [] - - transports.forEach((transport, index) => { - const normalizedName = normalizeTransportName(transport.name) - const isActive = - normalizedActive.length > 0 && normalizedName === normalizedActive - const isPreferred = normalizedActive.length === 0 && transport.preferred - const color = - isActive || isPreferred ? railColors.highlight : railColors.resting - const start = (index / transports.length) * 100 - const end = ((index + 1) / transports.length) * 100 - stops.push(`${color} ${start}%`, `${color} ${end}%`) - }) - - return `linear-gradient(to bottom, ${stops.join(", ")})` -} +import { + getRailThemeColors, + normalizeTransportName, +} from "./transportRailBackground" +import { transportMetaFor, type AgentTransport } from "./transportMeta" const TransportRail: React.FC<{ transports: AgentTransport[] diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/transportRailBackground.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/transportRailBackground.ts new file mode 100644 index 00000000..238cb959 --- /dev/null +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Elements/transportRailBackground.ts @@ -0,0 +1,55 @@ +/** + * Copyright AGNTCY Contributors (https://github.com/agntcy) + * SPDX-License-Identifier: Apache-2.0 + **/ + +import { alpha } from "@mui/material/styles" +import type { Theme } from "@mui/material/styles" + +import type { AgentTransport } from "./transportMeta" + +export function normalizeTransportName(value: string | undefined): string { + return value?.trim().toLowerCase() ?? "" +} + +export function getRailThemeColors(theme: Theme) { + const highlight = theme.palette.primary.main + const highlightedText = theme.palette.primary.contrastText + const resting = + theme.palette.mode === "dark" + ? theme.palette.background.paper + : theme.palette.common.white + const restingText = theme.palette.text.primary + const separator = alpha( + theme.palette.primary.main, + theme.palette.mode === "dark" ? 0.7 : 0.55, + ) + + return { highlight, highlightedText, resting, restingText, separator } +} + +export function railBackgroundImage( + transports: AgentTransport[] | undefined, + activeTransport: string | undefined, + theme: Theme, +): string | undefined { + if (!transports || transports.length === 0) return undefined + + const normalizedActive = normalizeTransportName(activeTransport) + const railColors = getRailThemeColors(theme) + const stops: string[] = [] + + transports.forEach((transport, index) => { + const normalizedName = normalizeTransportName(transport.name) + const isActive = + normalizedActive.length > 0 && normalizedName === normalizedActive + const isPreferred = normalizedActive.length === 0 && transport.preferred + const color = + isActive || isPreferred ? railColors.highlight : railColors.resting + const start = (index / transports.length) * 100 + const end = ((index + 1) / transports.length) * 100 + stops.push(`${color} ${start}%`, `${color} ${end}%`) + }) + + return `linear-gradient(to bottom, ${stops.join(", ")})` +} diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/BadgeDetailsModal.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/BadgeDetailsModal.tsx index 6a4ce388..5031a3d5 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/BadgeDetailsModal.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/BadgeDetailsModal.tsx @@ -8,9 +8,9 @@ import { Box, Button, IconButton, - Modal, - ModalContent, - ModalTitle, + Dialog, + DialogContent, + DialogTitle, Stack, Typography, } from "@open-ui-kit/core" @@ -68,14 +68,14 @@ const BadgeDetailsModal: React.FC = ({ }, [fetchBadgeDetailsData, isOpen, nodeName, nodeData]) return ( - - + {nodeName} Badge Details = ({ > - + - + {loading && !badgeData ? ( = ({ No data available )} - - + + ) } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/PolicyDetailsModal.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/PolicyDetailsModal.tsx index af39a13d..63fda0a0 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/PolicyDetailsModal.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/MainArea/Graph/Identity/PolicyDetailsModal.tsx @@ -8,9 +8,9 @@ import { Box, Button, IconButton, - Modal, - ModalContent, - ModalTitle, + Dialog, + DialogContent, + DialogTitle, Stack, Typography, } from "@open-ui-kit/core" @@ -69,14 +69,14 @@ const PolicyDetailsModal: React.FC = ({ }, [fetchPolicyDetailsData, isOpen, nodeName, nodeData]) return ( - - + {nodeName} Policy Details = ({ > - + - + {loading && !policyData ? ( = ({ No data available )} - - + + ) } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/InfoModal.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/InfoModal.tsx index 30249ddf..3ca70550 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/InfoModal.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/InfoModal.tsx @@ -7,8 +7,8 @@ import React, { useEffect } from "react" import DialogTitle from "@mui/material/DialogTitle" import { Dialog, + DialogContent, IconButton, - ModalContent, Stack, Typography, } from "@open-ui-kit/core" @@ -84,7 +84,7 @@ const InfoModal: React.FC = ({ isOpen, onClose }) => { - + Build and Release Information @@ -150,7 +150,7 @@ const InfoModal: React.FC = ({ isOpen, onClose }) => { - + ) } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/Navigation.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/Navigation.tsx index a478e358..c06cdef0 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/Navigation.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Navigation/Navigation.tsx @@ -4,17 +4,11 @@ **/ import React, { useCallback, useState } from "react" -import { - useThemeMode, - Header, - IconButton, - Stack, - Tooltip, - Box, -} from "@open-ui-kit/core" +import { Header, IconButton, Stack, Tooltip, Box } from "@open-ui-kit/core" import HelpOutline from "@mui/icons-material/HelpOutline" import coffeeAgntcyLogo from "@/assets/coffeeAGNTCY_logo.svg" +import { useAppThemeMode } from "@/hooks/useAppThemeMode" import ThemeToggleIcon from "../icons/ThemeToggleIcon" import InfoModal from "./InfoModal" import { @@ -24,7 +18,7 @@ import { const Navigation: React.FC = () => { const [isModalOpen, setIsModalOpen] = useState(false) - const { isDarkMode, toggleTheme } = useThemeMode() + const { isDarkMode, toggleTheme } = useAppThemeMode() const handleHelpClick = useCallback(() => { setIsModalOpen(true) diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/SidebarDropdown.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/SidebarDropdown.tsx index afd62330..cf1f1925 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/SidebarDropdown.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/components/Sidebar/SidebarDropdown.tsx @@ -39,7 +39,7 @@ const SidebarDropdown: React.FC = ({ const panelId = React.useId() const toggleLabel = `${isExpanded ? "Collapse" : "Expand"} ${title}` - const handleToggle = (event: React.MouseEvent) => { + const handleToggle = (event: React.MouseEvent) => { event.stopPropagation() onToggle() } @@ -58,7 +58,6 @@ const SidebarDropdown: React.FC = ({ > = ({ > { - const { isDarkMode } = useThemeMode() + const { isDarkMode } = useAppThemeMode() // Moon when app is light (switch to dark); sun when app is dark (switch to light). return isDarkMode ? : diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/LungoCompactTheme.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/CompactTheme.tsx similarity index 72% rename from coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/LungoCompactTheme.tsx rename to coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/CompactTheme.tsx index 1d9c4f86..09bdae16 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/LungoCompactTheme.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/CompactTheme.tsx @@ -13,12 +13,12 @@ import { useTheme, } from "@mui/material/styles" -import { lungoCompactThemeOptions } from "./lungoCompactThemeOptions" +import { compactThemeOptions } from "./compactThemeOptions" -export function LungoCompactTheme({ children }: { children: ReactNode }) { +export function CompactTheme({ children }: { children: ReactNode }) { const oukTheme = useTheme() const theme = useMemo( - () => createTheme(oukTheme, lungoCompactThemeOptions), + () => createTheme(oukTheme, compactThemeOptions), [oukTheme], ) diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/OpenUiKitThemeBridge.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/OpenUiKitThemeBridge.tsx index 2d264372..a0935c3f 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/OpenUiKitThemeBridge.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/OpenUiKitThemeBridge.tsx @@ -8,18 +8,21 @@ import { type ReactNode } from "react" import { ThemeProvider as OpenUiKitThemeProvider } from "@open-ui-kit/core" -import { LungoCompactTheme } from "@/contexts/LungoCompactTheme" +import { CompactTheme } from "@/contexts/CompactTheme" import { ThemeModePersistence } from "@/contexts/ThemeModePersistence" +import { ThemeMode } from "@/hooks/useAppThemeMode" import { readStoredIsDarkMode } from "@/utils/themeStorage" export function OpenUiKitThemeBridge({ children }: { children: ReactNode }) { const storedIsDarkMode = readStoredIsDarkMode() return ( - - + + {children} - + ) } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/ThemeModePersistence.tsx b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/ThemeModePersistence.tsx index 4c579e52..cc5c0fe5 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/ThemeModePersistence.tsx +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/ThemeModePersistence.tsx @@ -7,12 +7,12 @@ */ import { type ReactNode, useEffect, useLayoutEffect } from "react" -import { useThemeMode } from "@open-ui-kit/core" +import { useAppThemeMode, ThemeMode } from "@/hooks/useAppThemeMode" import { readStoredThemeMode, writeStoredThemeMode } from "@/utils/themeStorage" export function ThemeModePersistence({ children }: { children: ReactNode }) { - const { isDarkMode, setIsDarkMode } = useThemeMode() + const { mode, setIsDarkMode } = useAppThemeMode() useLayoutEffect(() => { const storedMode = readStoredThemeMode() @@ -22,8 +22,8 @@ export function ThemeModePersistence({ children }: { children: ReactNode }) { }, [setIsDarkMode]) useEffect(() => { - writeStoredThemeMode(isDarkMode ? "dark" : "light") - }, [isDarkMode]) + writeStoredThemeMode(mode === ThemeMode.Dark ? "dark" : "light") + }, [mode]) return children } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/lungoCompactThemeOptions.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/compactThemeOptions.ts similarity index 89% rename from coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/lungoCompactThemeOptions.ts rename to coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/compactThemeOptions.ts index 029ee49a..762ec0bf 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/lungoCompactThemeOptions.ts +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/contexts/compactThemeOptions.ts @@ -2,14 +2,14 @@ * Copyright AGNTCY Contributors (https://github.com/agntcy) * SPDX-License-Identifier: Apache-2.0 * - * Compact density layer merged onto the OUK theme (see LungoCompactTheme). + * Compact density layer merged onto the OUK theme (see CompactTheme). * Body scale shifts one OUK tier down (body1: 16px → 14px); spacing unit: 6px. */ import type { ThemeOptions } from "@mui/material/styles" /** 6px per spacing unit (default MUI/OUK is 8px). */ -export const LUNGO_SPACING_UNIT_PX = 6 +export const COMPACT_SPACING_UNIT_PX = 6 type SpacingFn = ((...args: number[]) => string) & { mui: true } @@ -17,7 +17,7 @@ type SpacingFn = ((...args: number[]) => string) & { mui: true } * Must be a spacing factory when merging onto an existing theme — `spacing: 6` * deep-merges as a number and breaks `theme.spacing()` (e.g. MuiToolbar). */ -function createLungoSpacing(unitPx: number): SpacingFn { +function createCompactSpacing(unitPx: number): SpacingFn { const spacing = (...args: number[]) => { const factors = args.length === 0 ? [1] : args return factors.map((factor) => `${unitPx * factor}px`).join(" ") @@ -26,10 +26,10 @@ function createLungoSpacing(unitPx: number): SpacingFn { return spacing } -const lungoSpacing = createLungoSpacing(LUNGO_SPACING_UNIT_PX) +const compactSpacing = createCompactSpacing(COMPACT_SPACING_UNIT_PX) -export const lungoCompactThemeOptions: ThemeOptions = { - spacing: lungoSpacing, +export const compactThemeOptions: ThemeOptions = { + spacing: compactSpacing, typography: { htmlFontSize: 16, diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useAppThemeMode.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useAppThemeMode.ts new file mode 100644 index 00000000..7dac0fa2 --- /dev/null +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useAppThemeMode.ts @@ -0,0 +1,25 @@ +/** + * Copyright AGNTCY Contributors (https://github.com/agntcy) + * SPDX-License-Identifier: Apache-2.0 + * + * App helpers for OUK 2.x theme mode (ThemeMode enum + setMode API). + */ + +import { ThemeMode, useThemeMode } from "@open-ui-kit/core" + +export function useAppThemeMode() { + const { mode, setMode, setTheme } = useThemeMode() + const isDarkMode = mode === ThemeMode.Dark + + return { + mode, + isDarkMode, + setMode, + setTheme, + setIsDarkMode: (dark: boolean) => + setMode(dark ? ThemeMode.Dark : ThemeMode.Light), + toggleTheme: () => setMode(isDarkMode ? ThemeMode.Light : ThemeMode.Dark), + } +} + +export { ThemeMode } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useThemeIcon.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useThemeIcon.ts index 621f47c6..c8647e3e 100644 --- a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useThemeIcon.ts +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/hooks/useThemeIcon.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 **/ -import { useThemeMode } from "@open-ui-kit/core" +import { useAppThemeMode } from "@/hooks/useAppThemeMode" export interface ThemeIconMap { light: string @@ -15,6 +15,6 @@ export interface ThemeIconMap { * @returns */ export const useThemeIcon = (iconMap: ThemeIconMap): string => { - const { isDarkMode } = useThemeMode() + const { isDarkMode } = useAppThemeMode() return isDarkMode ? iconMap.dark : iconMap.light } diff --git a/coffeeAGNTCY/coffee_agents/lungo/frontend/src/types/dropdownOption.ts b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/types/dropdownOption.ts new file mode 100644 index 00000000..b9e5f0e7 --- /dev/null +++ b/coffeeAGNTCY/coffee_agents/lungo/frontend/src/types/dropdownOption.ts @@ -0,0 +1,16 @@ +/** + * Copyright AGNTCY Contributors (https://github.com/agntcy) + * SPDX-License-Identifier: Apache-2.0 + * + * Local dropdown option shape (formerly exported as DropdownOption from OUK 1.x). + */ + +import type { ReactNode } from "react" +import type { TooltipProps } from "@open-ui-kit/core" + +export interface DropdownOption { + label: string + value: T + customElement?: ReactNode + menuItemTooltipProps?: Partial +}