@arcblock/ux 3.0.38 → 3.0.41

package/src/NavMenu/products.tsx

@@ -9,12 +9,10 @@ import { useNavMenuContext } from './nav-menu-context';
 import { translate } from '../Locale/util';
 import { useLocaleContext } from '../Locale/context';
 
+// Arcblock Icons
 import AIKitSvg from './images/ai-kit.svg?react';
 import NftStudioSvg from './images/nft-studio.svg?react';
 import CreatorStudioSvg from './images/creator-studio.svg?react';
-import AigneSvg from './images/aigne.svg?react';
-import ArcSphereSvg from './images/arcsphere.svg?react';
-import AistroSvg from './images/aistro.svg?react';
 import BlockletLauncherSvg from './images/blocklet-launcher.svg?react';
 import BlockletStoreSvg from './images/blocklet-store.svg?react';
 import Web3KitSvg from './images/web3-kit.svg?react';
@@ -29,6 +27,11 @@ import VCSvg from './images/vc.svg?react';
 import DidConnectSvg from './images/did-connect.svg?react';
 import PaymentKitPng from './images/payment-kit.png';
 
+// AIGNE Icons
+import AigneSvg from './images/aigne.svg?react';
+import ArcSphereSvg from './images/arcsphere.svg?react';
+import AistroPng from './images/aistro.png';
+
 const translations = {
   en: {
     groups: {
@@ -36,6 +39,8 @@ const translations = {
       components: 'Components',
       computeStorage: 'Compute/Storage',
       identity: 'Identity',
+      frameworkTools: 'Framework & tools',
+      modelsAdapters: 'Models adapters',
     },
     products: {
       nftStudio: {
@@ -45,7 +50,7 @@ const translations = {
         description: 'All-in-one creator tool',
       },
       aigne: {
-        description: 'Your AI assistant',
+        description: 'The Agentic Ecosystem for AI Apps',
       },
       arcsphere: {
         description: 'AI native browser',
@@ -98,6 +103,30 @@ const translations = {
       didConnect: {
         description: 'Passwordless login',
       },
+      aigneCodeSmith: {
+        description: 'Review and improve your code with AI',
+      },
+      aigneDocSmith: {
+        description: 'Generate and update docs with AI',
+      },
+      aigneWebSmith: {
+        description: 'Build and deploy AI-powered web apps',
+      },
+      aigneCLI: {
+        description: 'Develop agents from the command line',
+      },
+      aigneObservability: {
+        description: 'Understand and inspect agent behavior',
+      },
+      aigneStudio: {
+        description: 'Create agents visually, no code needed',
+      },
+      aigneFramework: {
+        description: 'The functional core of agentic AI',
+      },
+      aigneHub: {
+        description: 'One API. Any Model',
+      },
     },
   },
   zh: {
@@ -106,6 +135,8 @@ const translations = {
       components: '组件',
       computeStorage: '计算/存储',
       identity: '身份',
+      frameworkTools: '框架与工具',
+      modelsAdapters: '模型适配器',
     },
     products: {
       nftStudio: {
@@ -115,7 +146,7 @@ const translations = {
         description: '一体化创作工具',
       },
       aigne: {
-        description: '您的人工智能助手',
+        description: 'AI 应用的代理生态系统',
       },
       arcsphere: {
         description: 'AI 原生浏览器',
@@ -168,6 +199,30 @@ const translations = {
       didConnect: {
         description: '无密码登录',
       },
+      aigneCodeSmith: {
+        description: '使用 AI 审查并优化你的代码',
+      },
+      aigneDocSmith: {
+        description: '用 AI 生成和更新项目文档',
+      },
+      aigneWebSmith: {
+        description: '构建并部署 AI 驱动的 Web 应用',
+      },
+      aigneCLI: {
+        description: '通过命令行开发 Agent',
+      },
+      aigneObservability: {
+        description: '理解并分析 Agent 的行为',
+      },
+      aigneStudio: {
+        description: '零代码构建 Agent',
+      },
+      aigneFramework: {
+        description: 'Agent AI 的功能核心框架',
+      },
+      aigneHub: {
+        description: '一套 API，连接所有模型',
+      },
     },
   },
 };
@@ -197,240 +252,367 @@ const Wrapper = styled(Box)`
   }
 `;
 
-export interface ProductsProps extends BoxProps {
-  isOpen?: boolean;
+function AigneIcon({ color = 'black', backgroundColor = 'transparent' }: { color?: string; backgroundColor?: string }) {
+  return (
+    <Box
+      component="span"
+      sx={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color,
+        backgroundColor,
+        borderRadius: '4px',
+      }}>
+      <AigneSvg />
+    </Box>
+  );
 }
 
-// FIXME: @lixl39505 isOpen 没有用，是否要移除？
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function Products({ className, isOpen = undefined, ...rest }: ProductsProps) {
+export type ProductsType = 'AIGNE' | 'ARCBLOCK';
+export interface ProductsProps extends BoxProps {
+  type: ProductsType;
+}
+export default function Products({ className, type, ...rest }: ProductsProps) {
   const { mode } = useNavMenuContext();
   const { palette } = useTheme();
   const wrapperRef = useRef<HTMLDivElement>(null);
   const { locale = 'en' } = useLocaleContext() || {};
   const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
+
   const groups = useCreation(() => {
-    return [
-      {
-        type: 'Group',
-        label: t('groups.applications'),
-        children: [
-          {
-            label: (
-              <Link to={`https://www.nftstudio.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                NFT Studio
-              </Link>
-            ),
-            description: t('products.nftStudio.description'),
-            icon: <NftStudioSvg />,
-          },
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/creator-studio`}
-                target="_blank"
-                rel="noreferrer noopener">
-                Creator Studio
-              </Link>
-            ),
-            description: t('products.creatorStudio.description'),
-            icon: <CreatorStudioSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.aistro.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                Aistro
-              </Link>
-            ),
-            description: t('products.aistro.description'),
-            icon: <AistroSvg />,
-          },
-          {
-            label: (
-              <Link to="https://www.aigne.io/" target="_blank" rel="noreferrer noopener">
-                AIGNE
-              </Link>
-            ),
-            description: t('products.aigne.description'),
-            icon: <AigneSvg style={{ filter: palette.mode === 'dark' ? 'invert(1)' : 'none' }} />,
-          },
-          {
-            label: (
-              <Link to={`https://www.arcsphere.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                ArcSphere
-              </Link>
-            ),
-            description: t('products.arcsphere.description'),
-            icon: <ArcSphereSvg />,
-          },
-        ],
-      },
-      {
-        type: 'Group',
-        label: t('groups.components'),
-        children: [
-          {
-            label: (
-              <Link to={`https://launcher.arcblock.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                Blocklet Launcher
-              </Link>
-            ),
-            description: t('products.blockletLauncher.description'),
-            icon: <BlockletLauncherSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.aikit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                AI Kit
-              </Link>
-            ),
-            description: t('products.aiKit.description'),
-            icon: <AIKitSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.blocklet.io/${locale}/payment-kit`} target="_blank" rel="noreferrer noopener">
-                Payment Kit
-              </Link>
-            ),
-            description: t('products.paymentKit.description'),
-            icon: <img src={PaymentKitPng} alt="Payment Kit" />,
-          },
-          {
-            label: (
-              <Link to={`https://store.blocklet.dev/?locale=${locale}`} target="_blank" rel="noreferrer noopener">
-                Blocklet Store
-              </Link>
-            ),
-            description: t('products.blockletStore.description'),
-            icon: <BlockletStoreSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.web3kit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
-                Web3 Kit
-              </Link>
-            ),
-            description: t('products.web3Kit.description'),
-            icon: <Web3KitSvg />,
-          },
-        ],
-      },
-      {
-        type: 'Group',
-        label: t('groups.computeStorage'),
-        children: [
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}
-                target="_blank"
-                rel="noreferrer noopener">
-                Blocklet Framework
-              </Link>
-            ),
-            description: t('products.blockletFramework.description'),
-            icon: <BlockletFrameworkSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.didspaces.com/${locale}`} target="_blank" rel="noreferrer noopener">
-                DID Spaces
-              </Link>
-            ),
-            description: t('products.didSpaces.description'),
-            icon: <DidSvg />,
-          },
-          {
-            label: (
-              <Link to="https://main.abtnetwork.io/" target="_blank" rel="noreferrer noopener">
-                ABT Network
-              </Link>
-            ),
-            description: t('products.abtNetwork.description'),
-            icon: <AbtNetworkSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.blocklet.io/${locale}/blocklet-server`} target="_blank" rel="noreferrer noopener">
-                Blocklet Server
-              </Link>
-            ),
-            description: t('products.blockletServer.description'),
-            icon: <BlockletServerSvg />,
-          },
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/ocap`}
-                target="_blank"
-                rel="noreferrer noopener">
-                ОСАР
-              </Link>
-            ),
-            description: t('products.ocap.description'),
-            icon: <OCAPSvg />,
-          },
-        ],
-      },
-      {
-        type: 'Group',
-        label: t('groups.identity'),
-        children: [
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/did`}
-                target="_blank"
-                rel="noreferrer noopener">
-                DID
-              </Link>
-            ),
-            description: t('products.did.description'),
-            icon: <DidSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.didwallet.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                DID Wallet
-              </Link>
-            ),
-            description: t('products.didWallet.description'),
-            icon: <DidWalletSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.didnames.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                DID Names
-              </Link>
-            ),
-            description: t('products.didNameService.description'),
-            icon: <DidNameServiceSvg />,
-          },
-          {
-            label: (
-              <Link
-                to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}
-                target="_blank"
-                rel="noreferrer noopener">
-                VC
-              </Link>
-            ),
-            description: t('products.vc.description'),
-            icon: <VCSvg />,
-          },
-          {
-            label: (
-              <Link to={`https://www.didconnect.io/${locale}`} target="_blank" rel="noreferrer noopener">
-                DID Connect
-              </Link>
-            ),
-            description: t('products.didConnect.description'),
-            icon: <DidConnectSvg />,
-          },
-        ],
-      },
-    ];
+    if (type === 'ARCBLOCK') {
+      return [
+        {
+          type: 'Group',
+          label: t('groups.applications'),
+          children: [
+            {
+              label: (
+                <Link to={`https://www.nftstudio.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
+                  NFT Studio
+                </Link>
+              ),
+              description: t('products.nftStudio.description'),
+              icon: <NftStudioSvg />,
+            },
+            {
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/creator-studio`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Creator Studio
+                </Link>
+              ),
+              description: t('products.creatorStudio.description'),
+              icon: <CreatorStudioSvg />,
+            },
+            {
+              label: (
+                <Link to="https://www.aigne.io/" target="_blank" rel="noreferrer noopener">
+                  AIGNE
+                </Link>
+              ),
+              description: t('products.aigne.description'),
+              icon: <AigneIcon color={palette.mode === 'dark' ? 'white' : 'black'} />,
+            },
+            {
+              label: (
+                <Link to={`https://www.arcsphere.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  ArcSphere
+                </Link>
+              ),
+              description: t('products.arcsphere.description'),
+              icon: <ArcSphereSvg />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.components'),
+          children: [
+            {
+              label: (
+                <Link to={`https://launcher.arcblock.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Blocklet Launcher
+                </Link>
+              ),
+              description: t('products.blockletLauncher.description'),
+              icon: <BlockletLauncherSvg />,
+            },
+            {
+              label: (
+                <Link to="https://www.aigne.io/hub" target="_blank" rel="noreferrer noopener">
+                  AI Kit
+                </Link>
+              ),
+              description: t('products.aiKit.description'),
+              icon: <AIKitSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.blocklet.io/${locale}/payment-kit`} target="_blank" rel="noreferrer noopener">
+                  Payment Kit
+                </Link>
+              ),
+              description: t('products.paymentKit.description'),
+              icon: <img src={PaymentKitPng} alt="Payment Kit" />,
+            },
+            {
+              label: (
+                <Link to={`https://store.blocklet.dev/?locale=${locale}`} target="_blank" rel="noreferrer noopener">
+                  Blocklet Store
+                </Link>
+              ),
+              description: t('products.blockletStore.description'),
+              icon: <BlockletStoreSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.web3kit.rocks/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Web3 Kit
+                </Link>
+              ),
+              description: t('products.web3Kit.description'),
+              icon: <Web3KitSvg />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.computeStorage'),
+          children: [
+            {
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Blocklet Framework
+                </Link>
+              ),
+              description: t('products.blockletFramework.description'),
+              icon: <BlockletFrameworkSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.didspaces.com/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Spaces
+                </Link>
+              ),
+              description: t('products.didSpaces.description'),
+              icon: <DidSvg />,
+            },
+            {
+              label: (
+                <Link to="https://main.abtnetwork.io/" target="_blank" rel="noreferrer noopener">
+                  ABT Network
+                </Link>
+              ),
+              description: t('products.abtNetwork.description'),
+              icon: <AbtNetworkSvg />,
+            },
+            {
+              label: (
+                <Link
+                  to={`https://www.blocklet.io/${locale}/blocklet-server`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Blocklet Server
+                </Link>
+              ),
+              description: t('products.blockletServer.description'),
+              icon: <BlockletServerSvg />,
+            },
+            {
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/ocap`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  ОСАР
+                </Link>
+              ),
+              description: t('products.ocap.description'),
+              icon: <OCAPSvg />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.identity'),
+          children: [
+            {
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/did`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  DID
+                </Link>
+              ),
+              description: t('products.did.description'),
+              icon: <DidSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.didwallet.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Wallet
+                </Link>
+              ),
+              description: t('products.didWallet.description'),
+              icon: <DidWalletSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.didnames.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Names
+                </Link>
+              ),
+              description: t('products.didNameService.description'),
+              icon: <DidNameServiceSvg />,
+            },
+            {
+              label: (
+                <Link
+                  to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  VC
+                </Link>
+              ),
+              description: t('products.vc.description'),
+              icon: <VCSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.didconnect.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  DID Connect
+                </Link>
+              ),
+              description: t('products.didConnect.description'),
+              icon: <DidConnectSvg />,
+            },
+          ],
+        },
+      ];
+    }
+
+    if (type === 'AIGNE') {
+      return [
+        {
+          type: 'Group',
+          label: t('groups.applications'),
+          children: [
+            {
+              label: (
+                <Link to={`https://www.arcsphere.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  ArcSphere
+                </Link>
+              ),
+              description: t('products.arcsphere.description'),
+              icon: <ArcSphereSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.aistro.io/${locale}`} target="_blank" rel="noreferrer noopener">
+                  Aistro
+                </Link>
+              ),
+              description: t('products.aistro.description'),
+              icon: <img src={AistroPng} alt="Aistro" />,
+            },
+            {
+              label: (
+                <Link to="https://www.aigne.io/doc-smith" target="_blank" rel="noreferrer noopener">
+                  AIGNE CodeSmith
+                </Link>
+              ),
+              description: t('products.aigneCodeSmith.description'),
+              icon: <AigneIcon color="#56a596" backgroundColor="#e9fcf6" />,
+            },
+            {
+              label: (
+                <Link to="https://www.aigne.io/code-smith" target="_blank" rel="noreferrer noopener">
+                  AIGNE DocSmith
+                </Link>
+              ),
+              description: t('products.aigneDocSmith.description'),
+              icon: <AigneIcon color="#e46f38" backgroundColor="#f7e0d7" />,
+            },
+            {
+              label: (
+                <Link to="https://www.aigne.io/web-smith" target="_blank" rel="noreferrer noopener">
+                  AIGNE WebSmith
+                </Link>
+              ),
+              description: t('products.aigneWebSmith.description'),
+              icon: <AigneIcon color="#7c45eb" backgroundColor="#f0e9ff" />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.frameworkTools'),
+          children: [
+            {
+              label: (
+                <Link to="https://www.aigne.io/cli" target="_blank" rel="noreferrer noopener">
+                  AIGNE CLI
+                </Link>
+              ),
+              description: t('products.aigneCLI.description'),
+              icon: <AigneIcon color="#d05d4e" backgroundColor="#faeaea" />,
+            },
+            {
+              label: (
+                <Link to="https://www.aigne.io/observability" target="_blank" rel="noreferrer noopener">
+                  AIGNE Observability
+                </Link>
+              ),
+              description: t('products.aigneObservability.description'),
+              icon: <AigneIcon color="#6ba456" backgroundColor="#edfae8" />,
+            },
+            {
+              label: (
+                <Link to="https://www.aigne.io/studio" target="_blank" rel="noreferrer noopener">
+                  AIGNE Studio
+                </Link>
+              ),
+              description: t('products.aigneStudio.description'),
+              icon: <AigneIcon color="#676cbf" backgroundColor="#edeeff" />,
+            },
+            {
+              label: (
+                <Link to="https://www.aigne.io/framework" target="_blank" rel="noreferrer noopener">
+                  AIGNE Framework
+                </Link>
+              ),
+              description: t('products.aigneFramework.description'),
+              icon: <AigneIcon color="#5086d0" backgroundColor="#eef4ff" />,
+            },
+          ],
+        },
+        {
+          type: 'Group',
+          label: t('groups.modelsAdapters'),
+          children: [
+            {
+              label: (
+                <Link to="https://www.aigne.io/hub" target="_blank" rel="noreferrer noopener">
+                  AIGNE Hub
+                </Link>
+              ),
+              description: t('products.aigneHub.description'),
+              icon: <AigneIcon color="#e4930b" backgroundColor="#fbf4d4" />,
+            },
+          ],
+        },
+      ];
+    }
+
+    return [];
   }, [t, locale, palette]);
 
   return (