@blocklet/pages-kit 0.2.296 → 0.2.298

package/lib/esm/builtin/async/ai-runtime/components/runtime/components/SimplePage/index.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { Stack, ThemeProvider, Typography, createTheme, useTheme } from '@mui/material';
 import { Suspense, useMemo } from 'react';
 import Balancer, { Provider } from 'react-wrap-balancer';
@@ -8,12 +7,7 @@ import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAge
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import { useRuntimeState } from '../../state/runtime';
 export default function SimplePage({ resultTitle, primaryColor }) {
-    var _a;
-    const { agent, appearancePage } = useRuntimeState();
-    const children = useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.children)) === null || _b === void 0 ? void 0 : _b.initialValue;
-    }, [agent]);
+    const { agent, appearancePage, childAgentId } = useRuntimeState();
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -32,15 +26,15 @@ export default function SimplePage({ resultTitle, primaryColor }) {
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Stack, { gap: 2, maxWidth: "md", width: "100%", mx: "auto", px: { xs: 2, sm: 3 }, children: [_jsx(Stack, { gap: 2, mt: 8, mb: 4, children: _jsxs(Provider, { children: [(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) && (_jsx(Typography, { component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: appearancePage.name }) })), (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) && (_jsx(Typography, { textAlign: "center", children: _jsx(Balancer, { children: appearancePage.description }) }))] }) }), _jsx(Stack, { children: (_a = children === null || children === void 0 ? void 0 : children.agents) === null || _a === void 0 ? void 0 : _a.map((i) => (_jsx(CurrentAgentProvider, { agentId: i.id, children: _jsx(AgentInputRender, {}) }, i.id))) }), _jsx(Stack, { children: _jsx(OutputView, { resultTitle: resultTitle }) })] }) }));
+    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
+    const description = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) || agent.description;
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Stack, { gap: 2, maxWidth: "md", width: "100%", mx: "auto", px: { xs: 2, sm: 3 }, children: [_jsx(Stack, { gap: 2, mt: 8, mb: 4, children: _jsxs(Provider, { children: [title && (_jsx(Typography, { component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: title }) })), description && (_jsx(Typography, { textAlign: "center", children: _jsx(Balancer, { children: description }) }))] }) }), _jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsx(AgentInputRender, {}) }) }), _jsx(Stack, { children: _jsx(OutputView, { resultTitle: resultTitle }) })] }) }));
 }
 function AgentInputRender() {
-    var _a, _b;
-    const { agent } = useCurrentAgent();
-    const input = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue;
-    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+    const { appearanceInput } = useCurrentAgent();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return (_jsx(Stack, { children: _jsx(CustomComponentRenderer, { componentId: input.componentId, properties: input.componentProps }) }));
+    return (_jsx(Stack, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) }));
 }
 function OutputView({ resultTitle }) {
     var _a;
@@ -49,10 +43,8 @@ function OutputView({ resultTitle }) {
     return (_jsx(Stack, { gap: 2, children: lastMessage && (_jsxs(_Fragment, { children: [_jsx(Stack, { children: resultTitle && (_jsx(Typography, { component: "h5", fontSize: 36, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: resultTitle }) })) }), _jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: lastMessage.assistantId, children: _jsx(CurrentMessageProvider, { message: lastMessage, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }) })] })) }));
 }
 function OutputItemView() {
-    var _a, _b;
-    const { agent } = useCurrentAgent();
-    const input = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.initialValue;
-    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+    const { appearanceOutput } = useCurrentAgent();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return _jsx(CustomComponentRenderer, { componentId: input.componentId, properties: input.componentProps });
+    return (_jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }));
 }

package/lib/esm/builtin/async/ai-runtime/components/runtime/constants.js

@@ -0,0 +1,3 @@
+export const DEFAULT_PAGE_COMPONENT_ID = 'ctnxha29uu8cx4xv';
+export const DEFAULT_INPUT_COMPONENT_ID = '1wwtemqcdio6nqf0';
+export const DEFAULT_OUTPUT_COMPONENT_ID = 'q0ckknkxph4hfwas';

package/lib/esm/builtin/async/ai-runtime/components/runtime/contexts/CurrentAgent.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { createContext, useContext, useMemo } from 'react';
 import { parseIdentity, stringifyIdentity } from '../../../utils';
+import { DEFAULT_INPUT_COMPONENT_ID, DEFAULT_OUTPUT_COMPONENT_ID } from '../constants';
 import { useAssistantState } from '../state/assistant';
 import { useRuntimeState } from '../state/runtime';
 const context = createContext(undefined);
@@ -18,5 +20,13 @@ export function useCurrentAgent() {
         throw new Error('No such current agent state. You should use `useCurrentAgent` within the `CurrentAgentProvider`');
     }
     const [agent] = useAssistantState({ aid: current.aid, working });
-    return Object.assign(Object.assign({}, current), { agent });
+    const appearanceInput = useMemo(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: DEFAULT_INPUT_COMPONENT_ID };
+    }, [agent]);
+    const appearanceOutput = useMemo(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: DEFAULT_OUTPUT_COMPONENT_ID };
+    }, [agent]);
+    return Object.assign(Object.assign({}, current), { agent, appearanceInput, appearanceOutput });
 }

package/lib/esm/builtin/async/ai-runtime/components/runtime/index.js

@@ -1,36 +1,66 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
-import { Box } from '@mui/material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useMediaQuery, useTheme } from '@mui/material';
 import { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
-import { Avatar } from '../../../../arcblock/ux';
+import { Avatar, DID } from '../../../../arcblock/ux';
+import { useLocaleContext } from '../../../../locale';
 import { useHeaderState } from '../../../../page/header';
-import RuntimeProvider from '../RuntimeProvider';
+import RuntimeProvider, { RuntimeLocaleProvider } from '../RuntimeProvider';
+import SocialShare from '../SocialShare';
+import { DEFAULT_PAGE_COMPONENT_ID } from './constants';
 import { useRuntimeState } from './state/runtime';
+const logoSize = 44;
+function AgentCreatedBy({ agent }) {
+    const { t } = useLocaleContext();
+    return (_jsxs(_Fragment, { children: [t('by'), " ", _jsx(Box, { component: DID, did: agent.createdBy, copyable: false, responsive: true })] }));
+}
 export default function Runtime() {
-    var _a, _b;
+    var _a;
     const { agent, appearancePage, sessionState } = useRuntimeState();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const { locale } = useLocaleContext();
     useEffect(() => {
         useHeaderState.setState((state) => {
             var _a;
             const logo = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _a === void 0 ? void 0 : _a.url;
-            state.logo = logo && _jsx(Box, { component: Avatar, src: logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1, size: 44 });
-            state.brand = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name;
+            state.logo = logo && (_jsx(Box, { component: Avatar, src: logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1, size: logoSize, sx: {
+                    width: logoSize,
+                    height: logoSize,
+                } }));
+            if (!isMobile) {
+                state.brand = (_jsx(Box, { sx: {
+                        height: 18,
+                        fontSize: 18,
+                    }, children: (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name }));
+                state.description = agent.createdBy && (_jsx(RuntimeLocaleProvider, { children: _jsx(Box, { sx: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 0.5,
+                            mt: 0.5,
+                            height: 12,
+                            fontSize: 12,
+                        }, children: _jsx(AgentCreatedBy, { agent: agent }) }) }));
+            }
+            const shareContent = `${agent.name}
+
+    ${agent === null || agent === void 0 ? void 0 : agent.description}
+  `;
+            state.addons = (...exists) => [_jsx(SocialShare, { content: shareContent }), ...exists].filter(Boolean);
         });
         return () => {
             useHeaderState.setState((state) => {
                 state.logo = undefined;
                 state.brand = undefined;
+                state.description = undefined;
+                state.addons = (...exists) => [...exists];
             });
         };
-    }, [appearancePage]);
+    }, [appearancePage, locale, isMobile]);
     useEffect(() => {
         sessionState.load();
     }, []);
-    const appearance = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearancePage)) === null || _b === void 0 ? void 0 : _b.initialValue;
-    const componentId = appearance === null || appearance === void 0 ? void 0 : appearance.componentId;
-    if (!componentId)
-        throw new Error('Missing output `appearance`');
-    return (_jsxs(RuntimeProvider, { children: [appearancePage && (_jsxs(Helmet, { children: [appearancePage.name && _jsx("title", { children: appearancePage.name }), appearancePage.description && _jsx("meta", { name: "description", content: appearancePage.description })] })), _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearance.componentProps })] }));
+    const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : DEFAULT_PAGE_COMPONENT_ID;
+    return (_jsxs(RuntimeProvider, { children: [appearancePage && (_jsxs(Helmet, { children: [appearancePage.name && _jsx("title", { children: appearancePage.name }), appearancePage.description && _jsx("meta", { name: "description", content: appearancePage.description })] })), _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
 }

package/lib/esm/builtin/async/ai-runtime/components/runtime/state/runtime.js

@@ -48,5 +48,9 @@ export function useRuntimeState() {
         const initialValue = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearancePage)) === null || _b === void 0 ? void 0 : _b.initialValue;
         return initialValue;
     }, [agent]);
-    return { aid, working, agent, appearancePage, sessionState, execute };
+    const childAgentId = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        return ((_f = (_e = (_d = (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.children)) === null || _b === void 0 ? void 0 : _b.initialValue) === null || _c === void 0 ? void 0 : _c.agents) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : agent.id);
+    }, [agent]);
+    return { aid, working, agent, appearancePage, sessionState, childAgentId, execute };
 }

package/lib/esm/builtin/async/ai-runtime/index.js

@@ -21,7 +21,7 @@ export { default as SimplePage } from './components/runtime/components/SimplePag
 export { default as SimpleChat } from './components/runtime/components/SimpleChat';
 export { default as PhotoGallery } from './components/runtime/components/PhotoGallery';
 export { default as AutoForm } from './components/runtime/components/AutoForm';
-export { default as BaseOutputs } from './components/runtime/components/SimpleOutput';
+export { default as SimpleOutput } from './components/runtime/components/SimpleOutput';
 export { default as ChatOutput } from './components/runtime/components/ChatOutput';
 export { default as PhotoGalleryItem } from './components/runtime/components/PhotoGalleryItem';
 export default function App(props) {

package/lib/esm/builtin/async/ai-runtime/locales/index.js

@@ -15,6 +15,9 @@ export const translations = {
             dialog: {
                 title: 'AI Art Image',
                 prompt: 'Prompt',
+                metadata: 'Metadata',
+                author: 'Author',
+                time: 'Creation Time',
             },
         },
         questionPlaceholder: 'Ask Anything...',
@@ -90,7 +93,7 @@ export const translations = {
         loadMore: 'Load More',
     },
     zh: {
-        by: '来自',
+        by: '作者',
         socialShare: {
             title: '分享',
             shareToX: '分享到 X',
@@ -105,6 +108,9 @@ export const translations = {
             dialog: {
                 title: 'AI 艺术图片',
                 prompt: '提示词',
+                metadata: '元数据',
+                author: '作者',
+                time: '创作时间',
             },
         },
         questionPlaceholder: '问点什么...',

package/lib/types/builtin/async/ai-runtime/components/RuntimeProvider.d.ts

@@ -2,3 +2,6 @@ import { ReactNode } from 'react';
 export default function RuntimeProvider({ children }: {
     children?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function RuntimeLocaleProvider({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/types/builtin/async/ai-runtime/components/common/UserInfo.d.ts

@@ -0,0 +1,17 @@
+import { StackProps, TypographyProps } from '@mui/material';
+import { ReactNode } from 'react';
+export default function UserInfo({ avatar, showDID, did, name, time, children, reverse, ...restProps }: StackProps & {
+    avatar?: string;
+    showDID?: boolean;
+    did?: string;
+    name?: string;
+    time?: string;
+    children?: ReactNode;
+    reverse?: boolean;
+} & StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function UserName({ children, sx, ...restProps }: TypographyProps & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function UserTime({ time, ...restProps }: TypographyProps & {
+    time: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/lib/types/builtin/async/ai-runtime/components/runtime/components/ChatOutput/index.d.ts

@@ -1 +1,4 @@
-export default function ChatOutput(): import("react/jsx-runtime").JSX.Element;
+export default function ChatOutput({ hideAvatar, renderType, }: {
+    hideAvatar: boolean;
+    renderType?: 'parameters' | 'result';
+}): import("react/jsx-runtime").JSX.Element;

package/lib/types/builtin/async/ai-runtime/components/runtime/components/SimpleOutput/index.d.ts

@@ -1 +1 @@
-export default function BaseOutputs(): import("react/jsx-runtime").JSX.Element;
+export default function SimpleOutput(): import("react/jsx-runtime").JSX.Element;

package/lib/types/builtin/async/ai-runtime/components/runtime/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_PAGE_COMPONENT_ID = "ctnxha29uu8cx4xv";
+export declare const DEFAULT_INPUT_COMPONENT_ID = "1wwtemqcdio6nqf0";
+export declare const DEFAULT_OUTPUT_COMPONENT_ID = "q0ckknkxph4hfwas";

package/lib/types/builtin/async/ai-runtime/components/runtime/contexts/CurrentAgent.d.ts

@@ -1,3 +1,4 @@
+import { RuntimeOutputAppearance } from '@blocklet/ai-runtime/types';
 import { ReactNode } from 'react';
 export interface CurrentAgentState {
     aid: string;
@@ -8,5 +9,7 @@ export default function CurrentAgentProvider({ agentId, children }: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useCurrentAgent(): {
     agent: import("../../../api/assistant").Assistant;
+    appearanceInput: RuntimeOutputAppearance;
+    appearanceOutput: RuntimeOutputAppearance;
     aid: string;
 };

package/lib/types/builtin/async/ai-runtime/components/runtime/state/runtime.d.ts

@@ -5,6 +5,7 @@ export declare function useRuntimeState(): {
     agent: import("../../../api/assistant").Assistant;
     appearancePage: RuntimeOutputAppearancePage | undefined;
     sessionState: import("./session").SessionState;
+    childAgentId: string;
     execute: (options: {
         aid: string;
         working?: boolean | undefined;

package/lib/types/builtin/async/ai-runtime/index.d.ts

@@ -9,7 +9,7 @@ export { default as SimplePage } from './components/runtime/components/SimplePag
 export { default as SimpleChat } from './components/runtime/components/SimpleChat';
 export { default as PhotoGallery } from './components/runtime/components/PhotoGallery';
 export { default as AutoForm } from './components/runtime/components/AutoForm';
-export { default as BaseOutputs } from './components/runtime/components/SimpleOutput';
+export { default as SimpleOutput } from './components/runtime/components/SimpleOutput';
 export { default as ChatOutput } from './components/runtime/components/ChatOutput';
 export { default as PhotoGalleryItem } from './components/runtime/components/PhotoGalleryItem';
 export default function App(props: {

package/lib/types/builtin/async/ai-runtime/locales/index.d.ts

@@ -15,6 +15,9 @@ export declare const translations: {
             dialog: {
                 title: string;
                 prompt: string;
+                metadata: string;
+                author: string;
+                time: string;
             };
         };
         questionPlaceholder: string;
@@ -93,6 +96,9 @@ export declare const translations: {
             dialog: {
                 title: string;
                 prompt: string;
+                metadata: string;
+                author: string;
+                time: string;
             };
         };
         questionPlaceholder: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit",
-  "version": "0.2.296",
+  "version": "0.2.298",
   "description": "Pages Kit components and utils",
   "publishConfig": {
     "access": "public"