@arcblock/ux 3.1.31 → 3.1.33

package/lib/UserCard/Cards/social-actions.js

@@ -2,12 +2,12 @@ import { jsxs as m, jsx as s } from "react/jsx-runtime";
 import { useMemo as r } from "react";
 import { styled as C, Button as F, Box as M } from "@mui/material";
 import { useMemoizedFn as u } from "ahooks";
-import { joinURL as N } from "ufo";
+import { joinURL as z } from "ufo";
 import w from "lodash/noop";
-import { Icon as U } from "@iconify/react";
-import k from "@mui/icons-material/Notifications";
-import v from "@mui/icons-material/NotificationsOff";
-import z from "../use-follow.js";
+import { Icon as N } from "@iconify/react";
+import U from "@mui/icons-material/Notifications";
+import k from "@mui/icons-material/NotificationsOff";
+import v from "../use-follow.js";
 import { useLocaleContext as h } from "../../Locale/context.js";
 import { translate as g } from "../../Locale/util.js";
 import { isSupportFollow as L } from "../../Util/index.js";
@@ -43,17 +43,18 @@ function j({
       });
       return;
     }
-    window.open(N(l, `/chat/dm/${o?.did}`), "_blank");
+    window.open(z(l, `/chat/dm/${o?.did}`), "_blank");
   });
   return r(() => (typeof t == "boolean" ? !!t : t?.chat) && !!l, [t, l]) ? /* @__PURE__ */ m(
     x,
     {
       className: "user-card__social-actions-chat",
       variant: "outlined",
-      color: "inherit",
+      color: "primary",
+      size: "small",
       onClick: c,
       children: [
-        /* @__PURE__ */ s(U, { icon: "tabler:message-dots", style: { marginRight: 4 } }),
+        /* @__PURE__ */ s(N, { icon: "tabler:message-dots", style: { marginRight: 4 } }),
         e("chat")
       ]
     }
@@ -64,7 +65,7 @@ function B({
   showSocialActions: t,
   session: n
 }) {
-  const { locale: i } = h() || { locale: "en" }, e = u((b, y = {}) => g(_, b, i, "en", y)), d = r(() => !!n?.user?.did, [n?.user?.did]), l = r(() => typeof t == "boolean" ? !!t : t?.follow, [t]), { followed: c, followUser: p, unfollowUser: a } = z({
+  const { locale: i } = h() || { locale: "en" }, e = u((y, b = {}) => g(_, y, i, "en", b)), d = r(() => !!n?.user?.did, [n?.user?.did]), l = r(() => typeof t == "boolean" ? !!t : t?.follow, [t]), { followed: c, followUser: p, unfollowUser: a } = v({
     user: o,
     t: e,
     isMySelf: !1,
@@ -84,10 +85,11 @@ function B({
     {
       className: "user-card__social-actions-follow",
       variant: "outlined",
-      color: "inherit",
+      color: "primary",
+      size: "small",
       onClick: f,
       children: [
-        c ? /* @__PURE__ */ s(v, { sx: { fontSize: 14, mr: 0.5 } }) : /* @__PURE__ */ s(k, { sx: { fontSize: 14, mr: 0.5 } }),
+        c ? /* @__PURE__ */ s(k, { sx: { fontSize: 14, mr: 0.5 } }) : /* @__PURE__ */ s(U, { sx: { fontSize: 14, mr: 0.5 } }),
         e(c ? "unfollow" : "follow")
       ]
     }

package/lib/UserCard/Content/minimal.js

@@ -1,28 +1,28 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { memo as u } from "react";
-import { Box as r, Typography as g } from "@mui/material";
-import { DID as y } from "../../DID/index.js";
-import C from "./tooltip-avatar.js";
-import { renderTopRight as b } from "../components.js";
-import S from "./shorten-label.js";
-import v from "../Cards/social-actions.js";
-function w({ ...a }) {
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { memo as g } from "react";
+import { useMediaQuery as y, Box as o, Typography as w, Divider as C } from "@mui/material";
+import { DID as S } from "../../DID/index.js";
+import b from "./tooltip-avatar.js";
+import { renderTopRight as v } from "../components.js";
+import W from "./shorten-label.js";
+import j from "../Cards/social-actions.js";
+function D({ ...s }) {
   const {
     user: e,
-    showDid: s,
-    didProps: l,
-    avatarSize: d,
-    shouldShowHoverCard: m,
-    renderCardContent: c,
-    renderTopRightContent: p,
-    topRightMaxWidth: f,
-    avatarProps: h,
-    shortenLabelProps: x,
-    renderName: n,
-    ...i
-  } = a;
-  return /* @__PURE__ */ o(
-    r,
+    showDid: d,
+    didProps: m,
+    avatarSize: c,
+    shouldShowHoverCard: p,
+    renderCardContent: f,
+    renderTopRightContent: a,
+    topRightMaxWidth: h,
+    avatarProps: x,
+    shortenLabelProps: u,
+    renderName: l,
+    ...n
+  } = s, r = y("(max-width:500px)");
+  return /* @__PURE__ */ i(
+    o,
     {
       className: "user-card__avatar-content",
       sx: {
@@ -31,33 +31,35 @@ function w({ ...a }) {
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ o(
-          r,
+        /* @__PURE__ */ i(
+          o,
           {
             sx: {
               display: "flex",
               justifyContent: "space-between",
-              alignItems: "center",
-              gap: 1,
+              flexDirection: r ? "column" : "row",
+              alignItems: r ? "flex-start" : "center",
+              gap: r ? 2 : 1,
               flex: 1,
-              minWidth: 0
+              minWidth: 0,
+              flexWrap: "wrap"
             },
             children: [
-              /* @__PURE__ */ o(r, { sx: { display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, flex: 1 }, children: [
+              /* @__PURE__ */ i(o, { sx: { display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, flex: 1 }, children: [
                 /* @__PURE__ */ t(
-                  C,
+                  b,
                   {
                     user: e,
-                    avatarSize: d,
-                    shouldShowHoverCard: m,
-                    renderCardContent: c,
-                    avatarProps: h,
-                    ...i
+                    avatarSize: c,
+                    shouldShowHoverCard: p,
+                    renderCardContent: f,
+                    avatarProps: x,
+                    ...n
                   }
                 ),
-                /* @__PURE__ */ o(r, { children: [
+                /* @__PURE__ */ i(o, { children: [
                   /* @__PURE__ */ t(
-                    g,
+                    w,
                     {
                       variant: "subtitle1",
                       className: "user-card__full-name-label",
@@ -68,11 +70,11 @@ function w({ ...a }) {
                         fontSize: 18,
                         lineHeight: 1.1
                       },
-                      children: n ? n(e) : /* @__PURE__ */ t(S, { sx: { fontWeight: 500 }, ...x, children: e.fullName || e.email || e.did })
+                      children: l ? l(e) : /* @__PURE__ */ t(W, { sx: { fontWeight: 500 }, ...u, children: e.fullName || e.email || e.did })
                     }
                   ),
-                  s && e.did ? /* @__PURE__ */ t(
-                    y,
+                  d && e.did ? /* @__PURE__ */ t(
+                    S,
                     {
                       did: e.did,
                       size: 14,
@@ -80,21 +82,22 @@ function w({ ...a }) {
                       compact: !0,
                       locale: "en",
                       sx: { lineHeight: 1.5 },
-                      ...l ?? {}
+                      ...m ?? {}
                     }
                   ) : null
                 ] })
               ] }),
-              /* @__PURE__ */ t(v, { showSocialActions: i.showSocialActions, user: e, session: i.session })
+              r ? /* @__PURE__ */ t(C, { sx: { width: "100%" } }) : null,
+              a ? null : /* @__PURE__ */ t(j, { showSocialActions: n.showSocialActions, user: e, session: n.session })
             ]
           }
         ),
-        b(p, f)
+        v(a, h)
       ]
     }
   );
 }
-const D = u(w);
+const P = g(D);
 export {
-  D as default
+  P as default
 };

package/lib/Util/index.js

@@ -1,16 +1,16 @@
 import { lazy as j } from "react";
-import u from "lodash/padStart";
+import l from "lodash/padStart";
 import { colors as w, getDIDMotifInfo as x } from "@arcblock/did-motif";
 import { mergeAllThemeOptions as Ke } from "@blocklet/theme";
 import I from "lodash/isNil";
 import E from "lodash/omitBy";
-import U from "p-retry";
+import v from "p-retry";
 import m from "js-cookie";
-import v from "color-convert";
+import O from "color-convert";
 import a from "dayjs";
 import "dayjs/locale/zh-cn";
-import F from "dayjs/plugin/utc";
-import O from "dayjs/plugin/timezone";
+import U from "dayjs/plugin/utc";
+import F from "dayjs/plugin/timezone";
 import A from "dayjs/plugin/relativeTime";
 import P from "dayjs/plugin/updateLocale";
 import R from "dayjs/plugin/localizedFormat";
@@ -18,15 +18,15 @@ import W from "semver";
 import { DID_PREFIX as L, BLOCKLET_SERVICE_PATH_PREFIX as C } from "./constant.js";
 import b from "../package.json.js";
 import { getFederatedEnabled as M } from "./federated.js";
-let l = null;
-const _ = /^(\d{1,3}\.){3}\d{1,3}(:\d+)?$/, z = /* @__PURE__ */ new Set(["co", "com", "net", "org", "gov", "edu", "ac"]), B = /* @__PURE__ */ new Set(["uk", "au", "cn", "nz", "za", "in", "br", "mx", "fr", "it", "ca"]);
-function N(e) {
+let u = null;
+const _ = /^(\d{1,3}\.){3}\d{1,3}(:\d+)?$/, z = /* @__PURE__ */ new Set(["co", "com", "net", "org", "gov", "edu", "ac"]), N = /* @__PURE__ */ new Set(["uk", "au", "cn", "nz", "za", "in", "br", "mx", "fr", "it", "ca"]);
+function B(e) {
   if (!e)
     return !1;
   const t = e.split(".");
   if (t.length < 2) return !1;
   const o = t[t.length - 2], n = t[t.length - 1];
-  return z.has(o) && B.has(n);
+  return z.has(o) && N.has(n);
 }
 function ye() {
   const { host: e } = window.location;
@@ -37,7 +37,7 @@ function ye() {
     return "";
   if (o.length > 2) {
     const n = o.slice(-2).join(".");
-    if (N(n))
+    if (B(n))
       return `.${o.slice(-3).join(".")}`;
   }
   return `.${o.slice(-2).join(".")}`;
@@ -51,7 +51,7 @@ function Ie(e) {
 function be(e = {}) {
   return new URLSearchParams(e).toString();
 }
-function Se(e = 1) {
+function De(e = 1) {
   let t = e;
   typeof t == "number" && (t = { expireInDays: t }), t.path === void 0 && (t.path = "/"), t.expireInDays || (t.expireInDays = 1);
   const o = {
@@ -64,7 +64,7 @@ function Se(e = 1) {
   };
   return (typeof window > "u" || t.domain || t.returnDomain === !1) && t.returnDomain === !1 && delete o.domain, o;
 }
-const De = (e) => e.color ? e.color : e.dark ? e.theme.palette.common.white : e.theme.palette.text.primary, ke = (e) => e.background ? e.background : e.dark ? e.theme.palette.common.black : e.theme.palette.common.white;
+const Se = (e) => e.color ? e.color : e.dark ? e.theme.palette.common.white : e.theme.palette.text.primary, ke = (e) => e.background ? e.background : e.dark ? e.theme.palette.common.black : e.theme.palette.common.white;
 function Ve(e, t, o = []) {
   const n = Object.assign({}, e), i = t.defaultProps || {};
   return Object.keys(i).forEach((r) => {
@@ -95,16 +95,16 @@ const Te = () => typeof Intl == "object" && typeof Intl.DateTimeFormat == "funct
   return o;
 }, xe = (e) => {
   const t = Math.round(e / 1e3), o = Math.floor(t / 3600), n = Math.floor((t - o * 3600) / 60), i = t % 60;
-  return `${u(o, 2, "0")}:${u(n, 2, "0")}:${u(i, 2, "0")}`;
+  return `${l(o, 2, "0")}:${l(n, 2, "0")}:${l(i, 2, "0")}`;
 };
 function X(e) {
-  l = e;
+  u = e;
 }
 function Ee() {
-  return l;
+  return u;
 }
-const S = (e) => (t, { locale: o, tz: n, isUtc: i } = {}) => {
-  if (l === null && (a.extend(R), a.extend(F), a.extend(O), a.extend(P), a.extend(A), a.updateLocale("zh-cn", {
+const D = (e) => (t, { locale: o, tz: n, isUtc: i } = {}) => {
+  if (u === null && (a.extend(R), a.extend(U), a.extend(F), a.extend(P), a.extend(A), a.updateLocale("zh-cn", {
     // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
     relativeTime: {
       future: "%s后",
@@ -123,25 +123,25 @@ const S = (e) => (t, { locale: o, tz: n, isUtc: i } = {}) => {
     }
   }), X(a)), I(t) || t === "")
     return "-";
-  let r = l(t);
+  let r = u(t);
   return n && (r = r.tz(n)), i && (r = r.utc()), typeof o < "u" && (r = r.locale(o)), r.format(e);
 };
-function Ue(e, { locale: t = "en", tz: o } = {}) {
-  return S("ll")(e, { locale: t, tz: o });
+function ve(e, { locale: t = "en", tz: o } = {}) {
+  return D("ll")(e, { locale: t, tz: o });
 }
-function ve(e, {
+function Oe(e, {
   locale: t = "en",
   tz: o,
   isUtc: n = !1,
   format: i = "lll"
 } = {}) {
-  return S(i)(e, { locale: t, tz: o, isUtc: n });
+  return D(i)(e, { locale: t, tz: o, isUtc: n });
 }
 function K() {
   const e = window?.ABT_DEV || window.ABT;
   return e && typeof e.open == "function" ? e : null;
 }
-function Fe({
+function Ue({
   webWalletUrl: e,
   action: t = "login",
   locale: o = "en",
@@ -163,7 +163,7 @@ function Fe({
         ...f
       }
     }), { type: "extension" };
-  const D = {
+  const S = {
     toolbar: "no",
     location: "no",
     status: "no",
@@ -173,7 +173,7 @@ function Fe({
     // iphone 8plus size
     width: 414,
     height: 736
-  }, k = `${e}?action=${t}&locale=${o}&url=${encodeURIComponent(n)}`, c = Object.assign({}, D, i), V = (s) => s.innerWidth || s.document.documentElement.clientWidth || s.document.body.clientWidth;
+  }, k = `${e}?action=${t}&locale=${o}&url=${encodeURIComponent(n)}`, c = Object.assign({}, S, i), V = (s) => s.innerWidth || s.document.documentElement.clientWidth || s.document.body.clientWidth;
   if (!("left" in c)) {
     const s = V(window.top || window), T = window.screenLeft || window.screenX;
     c.left = s + T - c.width;
@@ -185,7 +185,7 @@ function Fe({
   const $ = Object.keys(c).map((s) => `${s}=${c[s]}`).join(",");
   return window.open(k, "targetWindow", $), { type: "web" };
 }
-const Oe = (e) => e && Number(e) >= 12 ? `${Number(e)}px` : "inherit", J = (e) => {
+const Fe = (e) => e && Number(e) >= 12 ? `${Number(e)}px` : "inherit", J = (e) => {
   const t = e.replace(L, "");
   return !!/^(0x)?[0-9a-f]{40}$/i.test(t);
 }, Q = (e, t) => {
@@ -263,7 +263,7 @@ const Oe = (e) => e && Number(e) >= 12 ? `${Number(e)}px` : "inherit", J = (e) =
   let r;
   return t && (r = e[t]), (!r || typeof r != "string") && (r = e[n]), (!r || typeof r != "string") && (r = i), r;
 }, Me = (e) => j(
-  () => U(
+  () => v(
     async () => {
       try {
         return await e();
@@ -276,7 +276,7 @@ const Oe = (e) => e && Number(e) >= 12 ? `${Number(e)}px` : "inherit", J = (e) =
   )
 ), _e = (e) => E(e, I);
 function ze(e, t = 1) {
-  const [o, n, i] = v.hex.rgb(e);
+  const [o, n, i] = O.hex.rgb(e);
   return `rgba(${o}, ${n}, ${i}, ${t})`;
 }
 const G = () => window.blocklet?.serverVersion || "", H = () => b.version, Z = () => (b.dependencies?.["@blocklet/js-sdk"]).replace(/^[\^~>=<]+/, ""), d = (e, t) => {
@@ -285,7 +285,9 @@ const G = () => window.blocklet?.serverVersion || "", H = () => b.version, Z = (
     return f ? f[1] : r;
   }, n = o(e), i = o(t);
   return n === i && e !== t ? !1 : W.gte(n, i);
-}, Be = () => {
+}, Ne = () => {
+  if (process.env.NODE_ENV === "development")
+    return !0;
   const e = G(), t = H(), o = Z();
   if (!e || !t || !o)
     return !1;
@@ -299,16 +301,16 @@ export {
   Ke as deepmergeAll,
   K as detectWalletExtension,
   We as ensureVisitorId,
-  Ue as formatToDate,
-  ve as formatToDatetime,
+  ve as formatToDate,
+  Oe as formatToDatetime,
   xe as formatUptime,
   ke as getBackground,
-  De as getColor,
-  Se as getCookieOptions,
+  Se as getColor,
+  De as getCookieOptions,
   $e as getCopyright,
   Le as getDIDColor,
   Ee as getDateTool,
-  Oe as getFontSize,
+  Fe as getFontSize,
   Z as getJsSdkVersion,
   G as getServerVersion,
   Te as getTimezone,
@@ -318,12 +320,12 @@ export {
   Y as getVisitorId,
   ze as hexToRgba,
   J as isEthereumDid,
-  Be as isSupportFollow,
-  N as isTwoSegmentTLD,
+  Ne as isSupportFollow,
+  B as isTwoSegmentTLD,
   Re as isUrl,
   Me as lazyRetry,
   Ve as mergeProps,
-  Fe as openWebWallet,
+  Ue as openWebWallet,
   Ie as parseQuery,
   ye as resolveRootDomain,
   X as setDateTool,

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.1.31", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
+const e = "3.1.33", s = { "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473" }, t = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.31",
+  "version": "3.1.33",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "a904bcfb38156f7cdff5b2134c126b19d528f4b2",
+  "gitHead": "14bd43c4a02eb7617981ef48276f2fc493058240",
   "dependencies": {
-    "@arcblock/bridge": "3.1.31",
+    "@arcblock/bridge": "3.1.33",
     "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.31",
-    "@arcblock/nft-display": "3.1.31",
-    "@arcblock/react-hooks": "3.1.31",
+    "@arcblock/icons": "3.1.33",
+    "@arcblock/nft-display": "3.1.33",
+    "@arcblock/react-hooks": "3.1.33",
     "@blocklet/js-sdk": "^1.16.49-beta-20250823-082650-626c1473",
-    "@blocklet/theme": "3.1.31",
+    "@blocklet/theme": "3.1.33",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/NavMenu/products.tsx

@@ -222,6 +222,198 @@ const translations = {
       },
     },
   },
+  'zh-TW': {
+    groups: {
+      applications: '應用',
+      components: '組件',
+      computeStorage: '計算/儲存',
+      identity: '身份',
+      frameworkTools: '框架與工具',
+      modelsAdapters: '模型適配器',
+    },
+    products: {
+      nftStudio: {
+        description: '鑄造和管理 NFT',
+      },
+      creatorStudio: {
+        description: '一體化創作工具',
+      },
+      aigne: {
+        description: 'AI 應用的代理生態系統',
+      },
+      arcsphere: {
+        description: 'AI 原生瀏覽器',
+      },
+      aistro: {
+        description: 'AI 占星術',
+      },
+      blockletLauncher: {
+        description: '一鍵啟動應用程式',
+      },
+      aiKit: {
+        description: 'AI 賦能應用',
+      },
+      paymentKit: {
+        description: '便捷的加密貨幣和銀行卡支付',
+      },
+      blockletStore: {
+        description: '發現和部署應用程式',
+      },
+      web3Kit: {
+        description: 'Web3 開發工具包',
+      },
+      blockletFramework: {
+        description: '構建並運行 Blocklet',
+      },
+      didSpaces: {
+        description: '安全的個人儲存',
+      },
+      abtNetwork: {
+        description: '快速區塊鏈網路',
+      },
+      blockletServer: {
+        description: '輕鬆託管應用程式',
+      },
+      ocap: {
+        description: '多鏈連接器',
+      },
+      did: {
+        description: '自主身份',
+      },
+      didWallet: {
+        description: '智能數位錢包',
+      },
+      didNameService: {
+        description: 'Web3 域名',
+      },
+      vc: {
+        description: '可驗證憑證',
+      },
+      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，連接所有模型',
+      },
+    },
+  },
+  ja: {
+    groups: {
+      applications: 'アプリケーション',
+      components: 'コンポーネント',
+      computeStorage: 'コンピューティング/ストレージ',
+      identity: 'アイデンティティ',
+      frameworkTools: 'フレームワークとツール',
+      modelsAdapters: 'モデルアダプター',
+    },
+    products: {
+      nftStudio: {
+        description: 'NFTの作成と管理',
+      },
+      creatorStudio: {
+        description: 'オールインワンクリエイターツール',
+      },
+      aigne: {
+        description: 'AIアプリのためのエージェントエコシステム',
+      },
+      arcsphere: {
+        description: 'AIネイティブブラウザ',
+      },
+      aistro: {
+        description: 'AI駆動占星術',
+      },
+      blockletLauncher: {
+        description: 'ワンクリックアプリ起動',
+      },
+      aiKit: {
+        description: 'AIでアプリを強化',
+      },
+      paymentKit: {
+        description: '簡単な暗号通貨とカード決済',
+      },
+      blockletStore: {
+        description: 'アプリの発見とデプロイ',
+      },
+      web3Kit: {
+        description: 'Web3開発ツールキット',
+      },
+      blockletFramework: {
+        description: 'Blockletの構築と実行',
+      },
+      didSpaces: {
+        description: '安全な個人ストレージ',
+      },
+      abtNetwork: {
+        description: '高速ブロックチェーンネットワーク',
+      },
+      blockletServer: {
+        description: 'アプリの簡単なホスティング',
+      },
+      ocap: {
+        description: 'マルチチェーンコネクター',
+      },
+      did: {
+        description: '自己主権ID',
+      },
+      didWallet: {
+        description: 'スマートデジタルウォレット',
+      },
+      didNameService: {
+        description: 'Web3ドメイン名',
+      },
+      vc: {
+        description: '検証可能な認証情報',
+      },
+      didConnect: {
+        description: 'パスワード不要ログイン',
+      },
+      aigneCodeSmith: {
+        description: 'AIでコードをレビューし改善',
+      },
+      aigneDocSmith: {
+        description: 'AIでドキュメントを生成・更新',
+      },
+      aigneWebSmith: {
+        description: 'AI駆動Webアプリの構築とデプロイ',
+      },
+      aigneCLI: {
+        description: 'コマンドラインからエージェントを開発',
+      },
+      aigneObservability: {
+        description: 'エージェントの動作を理解・分析',
+      },
+      aigneStudio: {
+        description: 'コード不要でエージェントを視覚的に作成',
+      },
+      aigneFramework: {
+        description: 'エージェントAIの機能コアフレームワーク',
+      },
+      aigneHub: {
+        description: '1つのAPIで全てのモデルに接続',
+      },
+    },
+  },
 };
 
 const Wrapper = styled(Box)`