@lark-apaas/client-toolkit 1.2.28-alpha.21 → 1.2.28-alpha.23

package/lib/components/Group/GroupDisplay.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export type GroupType = 'chat_group' | 'custom_group';
+export interface IGroupInfo {
+    id: string;
+    name: string;
+    type?: GroupType;
+    avatarUrl?: string;
+}
+export interface IGroupDisplayProps {
+    groups: IGroupInfo | IGroupInfo[];
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const GroupDisplay: React.FC<IGroupDisplayProps>;

package/lib/components/Group/GroupDisplay.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { clsxWithTw } from "../../utils/utils.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+const sizeConfig = {
+    small: {
+        icon: 16,
+        text: 'text-xs'
+    },
+    medium: {
+        icon: 20,
+        text: 'text-sm'
+    },
+    large: {
+        icon: 24,
+        text: 'text-base'
+    }
+};
+const GroupIcon = ({ type = 'chat_group', size })=>{
+    if ('chat_group' === type) return /*#__PURE__*/ jsx("svg", {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M17 20H22V18C22 16.3431 20.6569 15 19 15C18.0444 15 17.1931 15.4468 16.6438 16.1429M17 20H7M17 20V18C17 17.3438 16.8736 16.717 16.6438 16.1429M7 20H2V18C2 16.3431 3.34315 15 5 15C5.95561 15 6.80686 15.4468 7.35625 16.1429M7 20V18C7 17.3438 7.12642 16.717 7.35625 16.1429M7.35625 16.1429C8.0935 14.301 9.89482 13 12 13C14.1052 13 15.9065 14.301 16.6438 16.1429M15 7C15 8.65685 13.6569 10 12 10C10.3431 10 9 8.65685 9 7C9 5.34315 10.3431 4 12 4C13.6569 4 15 5.34315 15 7ZM21 10C21 11.1046 20.1046 12 19 12C17.8954 12 17 11.1046 17 10C17 8.89543 17.8954 8 19 8C20.1046 8 21 8.89543 21 10ZM7 10C7 11.1046 6.10457 12 5 12C3.89543 12 3 11.1046 3 10C3 8.89543 3.89543 8 5 8C6.10457 8 7 8.89543 7 10Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+    return /*#__PURE__*/ jsx("svg", {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+};
+const GroupDisplay = ({ groups, size = 'medium', className, style })=>{
+    const groupList = Array.isArray(groups) ? groups : [
+        groups
+    ];
+    const config = sizeConfig[size];
+    if (!groupList.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: clsxWithTw('flex flex-wrap gap-1', className),
+        style: style,
+        children: /*#__PURE__*/ jsx(TooltipProvider, {
+            children: groupList.map((group)=>/*#__PURE__*/ jsxs(Tooltip, {
+                    children: [
+                        /*#__PURE__*/ jsx(TooltipTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: clsxWithTw('inline-flex items-center gap-1 rounded px-1.5 py-0.5', 'bg-[rgba(31,35,41,0.06)] text-[rgba(31,35,41,0.7)]', 'max-w-[200px]'),
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "flex-shrink-0 text-[rgba(31,35,41,0.5)]",
+                                        children: /*#__PURE__*/ jsx(GroupIcon, {
+                                            type: group.type,
+                                            size: config.icon
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: clsxWithTw(config.text, 'truncate leading-tight'),
+                                        children: group.name
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(TooltipContent, {
+                            children: group.name
+                        })
+                    ]
+                }, group.id))
+        })
+    });
+};
+export { GroupDisplay };

package/lib/components/Group/GroupSelect.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { IGroupInfo } from './GroupDisplay';
+export interface GroupSelectProps {
+    value?: IGroupInfo[];
+    onChange?: (value: IGroupInfo[]) => void;
+    onSearch: (keyword: string) => Promise<IGroupInfo[]>;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export declare const GroupSelect: React.FC<GroupSelectProps>;

package/lib/components/Group/GroupSelect.js

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { clsxWithTw } from "../../utils/utils.js";
+const GroupSelect = ({ value = [], onChange, onSearch, placeholder = '搜索群组', disabled = false })=>{
+    const [keyword, setKeyword] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const debounceRef = useRef(null);
+    useEffect(()=>{
+        if (!keyword.trim()) {
+            setSearchResults([]);
+            setIsLoading(false);
+            return;
+        }
+        setIsLoading(true);
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(async ()=>{
+            try {
+                const results = await onSearch(keyword.trim());
+                setSearchResults(results);
+            } catch (error) {
+                console.error('Failed to search groups:', error);
+                setSearchResults([]);
+            } finally{
+                setIsLoading(false);
+            }
+        }, 300);
+        return ()=>{
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+        };
+    }, [
+        keyword,
+        onSearch
+    ]);
+    useEffect(()=>{
+        const handleClickOutside = (e)=>{
+            if (containerRef.current && !containerRef.current.contains(e.target)) setIsOpen(false);
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return ()=>document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const selectedIds = new Set(value.map((g)=>g.id));
+    const handleSelect = (group)=>{
+        if (selectedIds.has(group.id)) return;
+        onChange?.([
+            ...value,
+            group
+        ]);
+        setKeyword('');
+        setSearchResults([]);
+    };
+    const handleRemove = (groupId)=>{
+        onChange?.(value.filter((g)=>g.id !== groupId));
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
+        className: "relative w-full",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: clsxWithTw('flex flex-wrap items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 min-h-[36px]', disabled && 'opacity-50 cursor-not-allowed', isOpen && 'ring-2 ring-ring ring-offset-1'),
+                onClick: ()=>{
+                    if (!disabled) {
+                        setIsOpen(true);
+                        inputRef.current?.focus();
+                    }
+                },
+                children: [
+                    value.map((group)=>/*#__PURE__*/ jsxs("span", {
+                            className: "inline-flex items-center gap-1 rounded bg-[rgba(31,35,41,0.06)] px-1.5 py-0.5 text-xs",
+                            children: [
+                                group.name,
+                                !disabled && /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: "ml-0.5 text-[rgba(31,35,41,0.4)] hover:text-[rgba(31,35,41,0.8)]",
+                                    onClick: (e)=>{
+                                        e.stopPropagation();
+                                        handleRemove(group.id);
+                                    },
+                                    children: "\xd7"
+                                })
+                            ]
+                        }, group.id)),
+                    /*#__PURE__*/ jsx("input", {
+                        ref: inputRef,
+                        type: "text",
+                        className: "flex-1 min-w-[80px] border-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+                        placeholder: 0 === value.length ? placeholder : '',
+                        value: keyword,
+                        disabled: disabled,
+                        onChange: (e)=>{
+                            setKeyword(e.target.value);
+                            setIsOpen(true);
+                        },
+                        onFocus: ()=>setIsOpen(true)
+                    })
+                ]
+            }),
+            isOpen && keyword.trim() && /*#__PURE__*/ jsx("div", {
+                className: "absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md",
+                children: isLoading ? /*#__PURE__*/ jsx("div", {
+                    className: "flex items-center justify-center py-4 text-sm text-muted-foreground",
+                    children: "搜索中..."
+                }) : 0 === searchResults.length ? /*#__PURE__*/ jsx("div", {
+                    className: "flex items-center justify-center py-4 text-sm text-muted-foreground",
+                    children: "未找到匹配的群组"
+                }) : /*#__PURE__*/ jsx("ul", {
+                    className: "max-h-[200px] overflow-y-auto py-1",
+                    children: searchResults.map((group)=>{
+                        const isSelected = selectedIds.has(group.id);
+                        return /*#__PURE__*/ jsxs("li", {
+                            className: clsxWithTw('flex items-center gap-2 px-3 py-2 text-sm cursor-pointer', isSelected ? 'bg-[rgba(31,35,41,0.06)] text-muted-foreground cursor-default' : 'hover:bg-[rgba(31,35,41,0.06)]'),
+                            onClick: ()=>!isSelected && handleSelect(group),
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "truncate",
+                                    children: group.name
+                                }),
+                                isSelected && /*#__PURE__*/ jsx("span", {
+                                    className: "ml-auto text-xs text-muted-foreground",
+                                    children: "已选"
+                                })
+                            ]
+                        }, group.id);
+                    })
+                })
+            })
+        ]
+    });
+};
+export { GroupSelect };

package/lib/components/Group/index.d.ts

@@ -0,0 +1,4 @@
+export { GroupDisplay } from './GroupDisplay';
+export type { IGroupDisplayProps, IGroupInfo, GroupType } from './GroupDisplay';
+export { GroupSelect } from './GroupSelect';
+export type { GroupSelectProps } from './GroupSelect';

package/lib/components/Group/index.js

@@ -0,0 +1,3 @@
+import { GroupDisplay } from "./GroupDisplay.js";
+import { GroupSelect } from "./GroupSelect.js";
+export { GroupDisplay, GroupSelect };

package/lib/components/index.d.ts

@@ -3,3 +3,4 @@ export * from './ErrorRender';
 export * from './NotFoundRender';
 export * from './theme';
 export * from './User';
+export * from './Group';

package/lib/components/index.js

@@ -3,3 +3,4 @@ export * from "./ErrorRender/index.js";
 export * from "./NotFoundRender/index.js";
 export * from "./theme/index.js";
 export * from "./User/index.js";
+export * from "./Group/index.js";

package/lib/integrations/services/UserService.d.ts

@@ -1,14 +1,12 @@
-import type { BatchGetUsersResponse, ConvertExternalContactResponse, SearchUsersParams, SearchUsersResponse } from './types';
+import type { BatchGetUsersResponse, SearchUsersParams, SearchUsersResponse } from './types';
 export type UserServiceConfig = {
     getAppId?: () => string | null | undefined;
     searchUserUrl?: (appId: string) => string;
     listUsersUrl?: (appId: string) => string;
-    convertExternalContactUrl?: (appId: string) => string;
 };
 export declare class UserService {
     private config;
     constructor(config?: UserServiceConfig);
     searchUsers(params: SearchUsersParams): Promise<SearchUsersResponse>;
     listUsersByIds(userIds: string[]): Promise<BatchGetUsersResponse>;
-    convertExternalContact(larkUserID: string): Promise<ConvertExternalContactResponse>;
 }

package/lib/integrations/services/UserService.js

@@ -3,8 +3,7 @@ import { isNewPathEnabled } from "../../utils/apiPath.js";
 const DEFAULT_CONFIG = {
     getAppId: ()=>getAppId(),
     searchUserUrl: (appId)=>isNewPathEnabled() ? `/app/${appId}/__runtime__/api/v1/account/search_user` : `/af/app/${appId}/runtime/api/v1/account/search_user`,
-    listUsersUrl: (appId)=>isNewPathEnabled() ? `/app/${appId}/__runtime__/api/v1/account/list_users` : `/af/app/${appId}/runtime/api/v1/account/list_users`,
-    convertExternalContactUrl: (appId)=>isNewPathEnabled() ? `/app/${appId}/__runtime__/api/v1/account/convert_lark_user` : `/af/app/${appId}/runtime/api/v1/account/convert_lark_user`
+    listUsersUrl: (appId)=>isNewPathEnabled() ? `/app/${appId}/__runtime__/api/v1/account/list_users` : `/af/app/${appId}/runtime/api/v1/account/list_users`
 };
 class UserService {
     config;
@@ -44,23 +43,5 @@ class UserService {
         if (!response.ok) throw new Error('Failed to fetch users by ids');
         return response.json();
     }
-    async convertExternalContact(larkUserID) {
-        const appId = this.config.getAppId();
-        if (!appId) throw new Error('Failed to get appId');
-        const response = await fetch(this.config.convertExternalContactUrl(appId), {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                larkUserID
-            }),
-            credentials: 'include'
-        });
-        if (!response.ok) throw new Error('Failed to convert external contact');
-        const data = await response.json();
-        if (!data?.data?.userInfo?.userID) throw new Error('Invalid response from convert external contact');
-        return data;
-    }
 }
 export { UserService };

package/lib/integrations/services/types.d.ts

@@ -15,7 +15,6 @@ export type UserInfo = {
     userType: '_employee' | '_externalUser' | '_anonymousUser';
     department: DepartmentBasic;
     email?: string;
-    tenantName?: string;
 };
 export type DepartmentInfo = {
     departmentID: string;
@@ -34,7 +33,6 @@ export type SearchUsersParams = {
     query?: string;
     offset?: number;
     pageSize?: number;
-    searchExternalContact?: boolean;
 };
 export type SearchUsersResponse = {
     data: {
@@ -43,14 +41,6 @@ export type SearchUsersResponse = {
     };
     status_code: string;
 };
-export type ConvertExternalContactResponse = {
-    data: {
-        userInfo: {
-            tenantID: number;
-            userID: number;
-        };
-    };
-};
 export type BatchGetUsersResponse = {
     data: {
         userInfoMap: Record<string, UserInfo & SearchAvatar>;

package/lib/utils/axiosConfig.js

@@ -4,6 +4,92 @@ import { logger } from "../apis/logger.js";
 import { getStacktrace } from "../logger/selected-logs.js";
 import { safeStringify } from "./safeStringify.js";
 import { slardar } from "@lark-apaas/internal-slardar";
+import { normalizeBasePath } from "./utils.js";
+const APP_CLIENT_API_LOG_TYPE = 'app_client_api_log';
+function stripBasePath(urlPath) {
+    const base = normalizeBasePath(process.env.CLIENT_BASE_PATH);
+    if (base && urlPath.startsWith(base)) return urlPath.slice(base.length) || '/';
+    return urlPath;
+}
+let _pageRoutes = null;
+function getPageRouteDefinitions() {
+    if (_pageRoutes) return _pageRoutes;
+    try {
+        const raw = process.env.__PAGE_ROUTE_DEFINITIONS__;
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed)) {
+                _pageRoutes = parsed;
+                return _pageRoutes;
+            }
+        }
+    } catch  {}
+    _pageRoutes = [];
+    return _pageRoutes;
+}
+let _apiRoutes = null;
+function getApiRouteDefinitions() {
+    if (_apiRoutes) return _apiRoutes;
+    try {
+        const raw = process.env.__API_ROUTE_DEFINITIONS__;
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed)) {
+                _apiRoutes = parsed;
+                return _apiRoutes;
+            }
+        }
+    } catch  {}
+    _apiRoutes = [];
+    return _apiRoutes;
+}
+function matchRoute(concretePath, routes) {
+    const segments = concretePath.split('/').filter(Boolean);
+    for (const route of routes){
+        const routeSegments = route.path.split('/').filter(Boolean);
+        if (routeSegments.length !== segments.length) continue;
+        let match = true;
+        for(let i = 0; i < routeSegments.length; i++)if (!routeSegments[i].startsWith(':')) {
+            if (routeSegments[i] !== segments[i]) {
+                match = false;
+                break;
+            }
+        }
+        if (match) return route.path;
+    }
+    return null;
+}
+function matchApiRoute(method, concretePath) {
+    const routes = getApiRouteDefinitions();
+    const segments = concretePath.split('/').filter(Boolean);
+    for (const route of routes){
+        if ('*' !== route.method && route.method !== method) continue;
+        const routeSegments = route.path.split('/').filter(Boolean);
+        if (routeSegments.length !== segments.length) continue;
+        let match = true;
+        for(let i = 0; i < routeSegments.length; i++)if (!routeSegments[i].startsWith(':')) {
+            if (routeSegments[i] !== segments[i]) {
+                match = false;
+                break;
+            }
+        }
+        if (match) return route.path;
+    }
+    return null;
+}
+function getRefererPath() {
+    try {
+        if ('undefined' == typeof window || !window.location?.pathname) return '/';
+        const rawPath = stripBasePath(window.location.pathname);
+        return matchRoute(rawPath, getPageRouteDefinitions()) || rawPath;
+    } catch  {
+        return '/';
+    }
+}
+function getApiField(method, path) {
+    const matched = matchApiRoute(method, path);
+    return `${method} ${matched || path}`;
+}
 const isValidResponse = (resp)=>null != resp && 'object' == typeof resp && 'config' in resp && null !== resp.config && void 0 !== resp.config && 'object' == typeof resp.config && 'status' in resp && 'number' == typeof resp.status && 'data' in resp;
 async function logResponse(ok, responseOrError) {
     if (isValidResponse(responseOrError)) {
@@ -139,13 +225,20 @@ function handleSpanEnd(cfg, response, error) {
         const errorMessage = error?.message || '未知错误';
         const url = response?.request?.responseURL || errorResponse?.request?.responseURL || cfg.url || "";
         const method = (cfg.method || 'GET').toUpperCase();
-        const path = url.split('?')[0].replace(/^https?:\/\/[^/]+/, '') || '/';
+        const rawPath = url.split('?')[0].replace(/^https?:\/\/[^/]+/, '') || '/';
+        const path = stripBasePath(rawPath);
+        const durationMs = startTime ? Date.now() - startTime : void 0;
+        const referer_path = getRefererPath();
+        const api = getApiField(method, path);
+        const type = APP_CLIENT_API_LOG_TYPE;
         const logData = {
             method,
             path,
             url,
-            duration_ms: startTime ? Date.now() - startTime : void 0,
-            status: response ? response.status : errorResponse.status || 0
+            duration_ms: durationMs,
+            status: response ? response.status : errorResponse.status || 0,
+            referer_path,
+            type
         };
         if (error) logData.error_message = errorMessage;
         if ('undefined' != typeof navigator) logData.user_agent = navigator.userAgent;
@@ -158,7 +251,19 @@ function handleSpanEnd(cfg, response, error) {
         const responseData = response?.data || errorResponse?.data;
         if (responseData) logData.response = responseData;
         const level = error ? 'ERROR' : 'INFO';
-        observable.log(level, safeStringify(logData), {}, currentSpan);
+        observable.log(level, safeStringify(logData), {
+            referer_path,
+            api,
+            type,
+            duration_ms: durationMs
+        }, currentSpan);
+        if ('function' == typeof currentSpan.setAttributes) currentSpan.setAttributes({
+            referer_path,
+            api,
+            duration_ms: durationMs,
+            module: 'app_web',
+            source_type: 'platform'
+        });
         'function' == typeof currentSpan.end && currentSpan.end();
     } catch (e) {
         console.error('[AxiosTrace] Log span failed:', e);
@@ -240,6 +345,11 @@ function initAxiosConfig(axiosInstance) {
         const csrfToken = window.csrfToken;
         if (csrfToken) config.headers['X-Suda-Csrf-Token'] = csrfToken;
         if ('undefined' != typeof window && window.location?.pathname) config.headers['X-Page-Route'] = window.location.pathname;
+        const refererPath = getRefererPath();
+        config.headers['Rpc-Persist-Apaas-Observability-Referer-Path'] = refererPath;
+        const reqMethod = (config.method || 'GET').toUpperCase();
+        const requestPath = stripBasePath((config.url || '').split('?')[0]);
+        config.headers['Rpc-Persist-Apaas-Observability-Api'] = getApiField(reqMethod, requestPath);
         return config;
     }, (error)=>Promise.reject(error));
     instance.interceptors.response.use((response)=>response, (error)=>{

package/lib/utils/hmr-api.d.ts

@@ -9,6 +9,12 @@
  * @see docs/RFC_HMR_API.md
  */
 export interface HmrApi {
+    /**
+     * 注册 HMR 更新前回调（模块替换之前触发）
+     * @param callback 回调函数
+     * @returns cleanup 函数，用于取消注册
+     */
+    onBeforeApply?(callback: () => void): () => void;
     /**
      * 注册 HMR 成功回调
      * @param callback 成功回调函数
@@ -24,7 +30,7 @@ export interface HmrApi {
 }
 declare global {
     interface Window {
-        __VITE_HMR__?: HmrApi;
+        __VITE_HMR__?: Required<HmrApi>;
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.28-alpha.21",
+  "version": "1.2.28-alpha.23",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -98,12 +98,12 @@
   "dependencies": {
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
-    "@data-loom/js": "0.4.13-alpha.1",
+    "@data-loom/js": "0.4.12",
     "@lark-apaas/aily-web-sdk": "^0.0.7",
-    "@lark-apaas/auth-sdk": "^0.1.2",
+    "@lark-apaas/auth-sdk": "0.1.0-alpha.62",
     "@lark-apaas/client-capability": "^0.1.6",
     "@lark-apaas/internal-slardar": "^0.0.3",
-    "@lark-apaas/miaoda-inspector": "^1.0.20",
+    "@lark-apaas/miaoda-inspector": "^1.0.21",
     "@lark-apaas/observable-web": "^1.0.5",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",