@elizaos/app-core 2.0.0-alpha.61 → 2.0.0-alpha.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-typecheck.log +1 -2
- package/dist/components/AvatarLoader.d.ts +3 -1
- package/dist/components/AvatarLoader.d.ts.map +1 -1
- package/dist/components/AvatarLoader.js +4 -3
- package/dist/components/OnboardingWizard.d.ts.map +1 -1
- package/dist/components/OnboardingWizard.js +32 -20
- package/dist/components/VrmStage.d.ts +1 -0
- package/dist/components/VrmStage.d.ts.map +1 -1
- package/dist/components/VrmStage.js +17 -3
- package/dist/components/avatar/VrmEngine.d.ts +2 -0
- package/dist/components/avatar/VrmEngine.d.ts.map +1 -1
- package/dist/components/avatar/VrmEngine.js +46 -4
- package/dist/components/onboarding/ConnectionStep.d.ts.map +1 -1
- package/dist/components/onboarding/ConnectionStep.js +40 -0
- package/dist/components/onboarding/OnboardingStepNav.d.ts.map +1 -1
- package/dist/components/onboarding/OnboardingStepNav.js +8 -2
- package/dist/components/shared/ShellHeaderControls.d.ts.map +1 -1
- package/dist/components/shared/ShellHeaderControls.js +5 -2
- package/dist/package.json +3 -3
- package/dist/state/AppContext.d.ts.map +1 -1
- package/dist/state/AppContext.js +19 -15
- package/package.json +4 -4
- package/src/components/OnboardingWizard.tsx +1 -1
- package/src/components/VrmStage.tsx +11 -2
- package/src/components/onboarding/ConnectionStep.tsx +119 -0
- package/src/components/shared/ShellHeaderControls.tsx +39 -34
- package/src/state/AppContext.tsx +19 -15
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
[0m[2m[35m$[0m [2m[1mtest -f ../ui/dist/index.d.ts || (cd ../ui && bun run build) && tsc --noEmit -p tsconfig.json[0m
|
|
1
|
+
$ test -f ../ui/dist/index.d.ts || (cd ../ui && bun run build) && tsc --noEmit -p tsconfig.json
|
|
@@ -5,7 +5,9 @@ interface AvatarLoaderProps {
|
|
|
5
5
|
fullScreen?: boolean;
|
|
6
6
|
/** When true, fades the loader out (use before unmounting) */
|
|
7
7
|
fadingOut?: boolean;
|
|
8
|
+
/** Optional progress value from 0 to 100. If provided, overrides the infinite loading animation. */
|
|
9
|
+
progress?: number;
|
|
8
10
|
}
|
|
9
|
-
export declare function AvatarLoader({ label, fullScreen, fadingOut, }: AvatarLoaderProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function AvatarLoader({ label, fullScreen, fadingOut, progress, }: AvatarLoaderProps): import("react/jsx-runtime").JSX.Element;
|
|
10
12
|
export {};
|
|
11
13
|
//# sourceMappingURL=AvatarLoader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarLoader.d.ts","sourceRoot":"","sources":["../../src/components/AvatarLoader.tsx"],"names":[],"mappings":"AAAA,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarLoader.d.ts","sourceRoot":"","sources":["../../src/components/AvatarLoader.tsx"],"names":[],"mappings":"AAAA,UAAU,iBAAiB;IACzB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oGAAoG;IACpG,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAA6B,EAC7B,UAAkB,EAClB,SAAiB,EACjB,QAAQ,GACT,EAAE,iBAAiB,2CA+EnB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
export function AvatarLoader({ label = "Initializing entity", fullScreen = false, fadingOut = false, }) {
|
|
2
|
+
export function AvatarLoader({ label = "Initializing entity", fullScreen = false, fadingOut = false, progress, }) {
|
|
3
3
|
return (_jsx("div", { style: {
|
|
4
4
|
position: fullScreen ? "fixed" : "absolute",
|
|
5
5
|
inset: 0,
|
|
@@ -31,11 +31,12 @@ export function AvatarLoader({ label = "Initializing entity", fullScreen = false
|
|
|
31
31
|
background: "var(--bg-accent)",
|
|
32
32
|
overflow: "hidden",
|
|
33
33
|
}, children: _jsx("div", { style: {
|
|
34
|
-
width: "60%",
|
|
34
|
+
width: typeof progress === "number" ? `${Math.max(0, Math.min(100, progress))}%` : "60%",
|
|
35
35
|
height: "100%",
|
|
36
36
|
background: "var(--text-strong)",
|
|
37
37
|
boxShadow: "0 0 8px rgba(255, 255, 255, 0.3)",
|
|
38
|
-
|
|
38
|
+
transition: typeof progress === "number" ? "width 0.3s ease-out" : "none",
|
|
39
|
+
animation: typeof progress === "number" ? "none" : "avatar-loader-progress 2s ease-in-out infinite",
|
|
39
40
|
} }) }), _jsx("div", { style: {
|
|
40
41
|
fontFamily: "var(--mono, monospace)",
|
|
41
42
|
fontSize: 10,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OnboardingWizard.d.ts","sourceRoot":"","sources":["../../src/components/OnboardingWizard.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"OnboardingWizard.d.ts","sourceRoot":"","sources":["../../src/components/OnboardingWizard.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,gBAAgB,4CAqN/B"}
|
|
@@ -3,7 +3,8 @@ import { LanguageDropdown } from "@elizaos/app-core/components";
|
|
|
3
3
|
import { normalizeLanguage } from "@elizaos/app-core/i18n";
|
|
4
4
|
import { applyUiTheme, getVrmPreviewUrl, getVrmUrl, useApp, } from "@elizaos/app-core/state";
|
|
5
5
|
import { resolveAppAssetUrl } from "@elizaos/app-core/utils";
|
|
6
|
-
import { useEffect } from "react";
|
|
6
|
+
import { useEffect, useState } from "react";
|
|
7
|
+
import { useBranding } from "../config/branding";
|
|
7
8
|
import { VrmStage } from "./companion/VrmStage";
|
|
8
9
|
import { ActivateStep } from "./onboarding/ActivateStep";
|
|
9
10
|
import { ConnectionStep } from "./onboarding/ConnectionStep";
|
|
@@ -15,6 +16,10 @@ import { RpcStep } from "./onboarding/RpcStep";
|
|
|
15
16
|
const DISABLE_ONBOARDING_VRM = String(import.meta.env.VITE_E2E_DISABLE_VRM ?? "").toLowerCase() === "true" ||
|
|
16
17
|
String(import.meta.env.VITE_E2E_DISABLE_VRM ?? "") === "1";
|
|
17
18
|
export function OnboardingWizard() {
|
|
19
|
+
const branding = useBranding();
|
|
20
|
+
const isEliza = branding.appName === "Eliza";
|
|
21
|
+
const disableVrm = DISABLE_ONBOARDING_VRM || isEliza;
|
|
22
|
+
const [revealStarted, setRevealStarted] = useState(disableVrm);
|
|
18
23
|
const { onboardingStep, selectedVrmIndex, customVrmUrl, uiLanguage, uiTheme, setState, t, } = useApp();
|
|
19
24
|
const setUiLanguage = (lang) => setState("uiLanguage", normalizeLanguage(lang));
|
|
20
25
|
// Use same VRM resolution logic as CompanionView for character unification
|
|
@@ -50,27 +55,34 @@ export function OnboardingWizard() {
|
|
|
50
55
|
return null;
|
|
51
56
|
}
|
|
52
57
|
}
|
|
53
|
-
return (_jsxs("div", { className: "onboarding-screen", children: [_jsx("div", { className: "onboarding-bg" }), !isCharacterSelect && _jsx("div", { className: "onboarding-bg-overlay" }),
|
|
58
|
+
return (_jsxs("div", { className: "onboarding-screen", children: [_jsx("div", { className: "onboarding-bg" }), !isCharacterSelect && _jsx("div", { className: "onboarding-bg-overlay" }), disableVrm ? (_jsx("div", { "aria-hidden": "true", className: "absolute inset-0 z-10 pointer-events-none", style: {
|
|
54
59
|
background: "radial-gradient(circle at 50% 25%, rgba(255,255,255,0.16), transparent 34%), linear-gradient(180deg, rgba(17,17,17,0.08), rgba(10,10,10,0.36))",
|
|
55
|
-
} })) : (_jsx(VrmStage, { vrmPath: vrmPath, worldUrl: worldUrl, fallbackPreviewUrl: fallbackPreview, cameraProfile: "companion_close", initialCompanionZoomNormalized: 1,
|
|
56
|
-
position: "absolute",
|
|
57
|
-
top: "1rem",
|
|
58
|
-
right: "1rem",
|
|
59
|
-
zIndex: 50,
|
|
60
|
-
display: "flex",
|
|
61
|
-
gap: "0.5rem",
|
|
62
|
-
alignItems: "center",
|
|
63
|
-
}, children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: "companion" }) }), isCharacterSelect ? (
|
|
64
|
-
/* ── Full-screen character select — anchored to bottom ── */
|
|
65
|
-
_jsx("div", { style: {
|
|
60
|
+
} })) : (_jsx(VrmStage, { vrmPath: vrmPath, worldUrl: worldUrl, fallbackPreviewUrl: fallbackPreview, cameraProfile: "companion_close", initialCompanionZoomNormalized: 1, onRevealStart: () => setRevealStarted(true), t: t })), _jsxs("div", { style: {
|
|
66
61
|
position: "absolute",
|
|
67
62
|
inset: 0,
|
|
63
|
+
pointerEvents: revealStarted ? "auto" : "none",
|
|
64
|
+
opacity: revealStarted ? 1 : 0,
|
|
65
|
+
transition: "opacity 1.2s ease-in-out",
|
|
68
66
|
zIndex: 40,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
67
|
+
}, children: [_jsxs("svg", { className: "onboarding-corner onboarding-corner--tl", viewBox: "0 0 36 36", fill: "none", stroke: "rgba(240,185,11,0.18)", strokeWidth: "1", "aria-hidden": "true", children: [_jsx("path", { d: "M0 18 L0 0 L18 0" }), _jsx("circle", { cx: "0", cy: "0", r: "2", fill: "rgba(240,185,11,0.25)", stroke: "none" })] }), _jsxs("svg", { className: "onboarding-corner onboarding-corner--tr", viewBox: "0 0 36 36", fill: "none", stroke: "rgba(240,185,11,0.18)", strokeWidth: "1", "aria-hidden": "true", children: [_jsx("path", { d: "M0 18 L0 0 L18 0" }), _jsx("circle", { cx: "0", cy: "0", r: "2", fill: "rgba(240,185,11,0.25)", stroke: "none" })] }), _jsxs("svg", { className: "onboarding-corner onboarding-corner--bl", viewBox: "0 0 36 36", fill: "none", stroke: "rgba(240,185,11,0.18)", strokeWidth: "1", "aria-hidden": "true", children: [_jsx("path", { d: "M0 18 L0 0 L18 0" }), _jsx("circle", { cx: "0", cy: "0", r: "2", fill: "rgba(240,185,11,0.25)", stroke: "none" })] }), _jsxs("svg", { className: "onboarding-corner onboarding-corner--br", viewBox: "0 0 36 36", fill: "none", stroke: "rgba(240,185,11,0.18)", strokeWidth: "1", "aria-hidden": "true", children: [_jsx("path", { d: "M0 18 L0 0 L18 0" }), _jsx("circle", { cx: "0", cy: "0", r: "2", fill: "rgba(240,185,11,0.25)", stroke: "none" })] }), _jsx("div", { style: {
|
|
68
|
+
position: "absolute",
|
|
69
|
+
top: "1rem",
|
|
70
|
+
right: "1rem",
|
|
71
|
+
zIndex: 50,
|
|
72
|
+
display: "flex",
|
|
73
|
+
gap: "0.5rem",
|
|
74
|
+
alignItems: "center",
|
|
75
|
+
}, children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: "companion" }) }), isCharacterSelect ? (
|
|
76
|
+
/* ── Full-screen character select — anchored to bottom ── */
|
|
77
|
+
_jsx("div", { style: {
|
|
78
|
+
position: "absolute",
|
|
79
|
+
inset: 0,
|
|
80
|
+
zIndex: 40,
|
|
81
|
+
display: "flex",
|
|
82
|
+
alignItems: "flex-end",
|
|
83
|
+
justifyContent: "center",
|
|
84
|
+
paddingBottom: "3rem",
|
|
85
|
+
}, children: _jsx(IdentityStep, {}) })) : (
|
|
86
|
+
/* ── Standard overlaid UI — step nav + content panel ── */
|
|
87
|
+
_jsxs("div", { className: "onboarding-ui-overlay", children: [_jsx(OnboardingStepNav, {}), _jsx(OnboardingPanel, { step: onboardingStep, children: renderStep() })] }))] })] }));
|
|
76
88
|
}
|
|
@@ -13,6 +13,7 @@ export declare const VrmStage: import("react").NamedExoticComponent<{
|
|
|
13
13
|
initialCompanionZoomNormalized?: number;
|
|
14
14
|
onEngineReady?: (engine: VrmEngine) => void;
|
|
15
15
|
onLayerEngineReady?: (vrmPath: string, engine: VrmEngine) => void;
|
|
16
|
+
onRevealStart?: () => void;
|
|
16
17
|
playWaveOnAvatarChange?: boolean;
|
|
17
18
|
preloadAvatars?: readonly VrmStageAvatarEntry[];
|
|
18
19
|
t: TranslateFn;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VrmStage.d.ts","sourceRoot":"","sources":["../../src/components/VrmStage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EAEV,MAAM,oBAAoB,CAAC;AAG5B,KAAK,WAAW,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAY3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;
|
|
1
|
+
{"version":3,"file":"VrmStage.d.ts","sourceRoot":"","sources":["../../src/components/VrmStage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EAEV,MAAM,oBAAoB,CAAC;AAG5B,KAAK,WAAW,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAY3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAiIF,eAAO,MAAM,QAAQ;aAcV,OAAO;aACP,MAAM;eACJ,MAAM;wBACG,MAAM;oBACV,aAAa;qCACI,MAAM;oBACvB,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI;yBACtB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,KAAK,IAAI;oBACjD,MAAM,IAAI;6BACD,OAAO;qBACf,SAAS,mBAAmB,EAAE;OAC5C,WAAW;EAmQd,CAAC"}
|
|
@@ -17,6 +17,10 @@ const AVATAR_CHANGE_WAVE_EMOTE = {
|
|
|
17
17
|
const VrmStageLayer = memo(function VrmStageLayer({ active, visible, opacity, zIndex, vrmPath, worldUrl, fallbackPreviewUrl, cameraProfile, initialCompanionZoomNormalized, onEngineReady, onRevealStart, t, }) {
|
|
18
18
|
const [vrmLoaded, setVrmLoaded] = useState(false);
|
|
19
19
|
const [showVrmFallback, setShowVrmFallback] = useState(false);
|
|
20
|
+
const [loadingProgress, setLoadingProgress] = useState(undefined);
|
|
21
|
+
const [loaderFading, setLoaderFading] = useState(false);
|
|
22
|
+
const [loaderHidden, setLoaderHidden] = useState(false);
|
|
23
|
+
const loaderFadingStartedRef = useRef(false);
|
|
20
24
|
const chatAvatarVoice = useChatAvatarVoiceState();
|
|
21
25
|
const handleVrmEngineReady = useCallback((engine) => {
|
|
22
26
|
engine.setPaused(!active);
|
|
@@ -40,12 +44,21 @@ const VrmStageLayer = memo(function VrmStageLayer({ active, visible, opacity, zI
|
|
|
40
44
|
vrmPath,
|
|
41
45
|
]);
|
|
42
46
|
const handleVrmEngineState = useCallback((state) => {
|
|
47
|
+
if (state.loadingProgress !== undefined) {
|
|
48
|
+
setLoadingProgress(Math.round(state.loadingProgress * 100));
|
|
49
|
+
}
|
|
43
50
|
if (state.vrmLoaded) {
|
|
44
51
|
setVrmLoaded(true);
|
|
45
52
|
setShowVrmFallback(false);
|
|
53
|
+
if (!loaderFadingStartedRef.current) {
|
|
54
|
+
loaderFadingStartedRef.current = true;
|
|
55
|
+
setLoaderFading(true);
|
|
56
|
+
setTimeout(() => setLoaderHidden(true), 800);
|
|
57
|
+
}
|
|
46
58
|
return;
|
|
47
59
|
}
|
|
48
60
|
if (state.loadError) {
|
|
61
|
+
setLoaderHidden(true);
|
|
49
62
|
setVrmLoaded(false);
|
|
50
63
|
setShowVrmFallback(true);
|
|
51
64
|
}
|
|
@@ -60,9 +73,9 @@ const VrmStageLayer = memo(function VrmStageLayer({ active, visible, opacity, zI
|
|
|
60
73
|
zIndex,
|
|
61
74
|
visibility: visible ? "visible" : "hidden",
|
|
62
75
|
transition: `opacity ${AVATAR_SWITCH_FADE_DURATION_MS}ms ease`,
|
|
63
|
-
}, children: _jsx(VrmViewer, { active: active, vrmPath: vrmPath, worldUrl: worldUrl, mouthOpen: chatAvatarVoice.mouthOpen, isSpeaking: chatAvatarVoice.isSpeaking, cameraProfile: cameraProfile, onEngineReady: handleVrmEngineReady, onEngineState: handleVrmEngineState, onRevealStart: () => onRevealStart?.(vrmPath) }) }), visible && showVrmFallback && !vrmLoaded && (_jsx("img", { src: fallbackPreviewUrl, alt: t("companion.avatarPreviewAlt"), className: "absolute left-1/2 top-[52%] -translate-x-1/2 -translate-y-1/2 h-[90%] object-contain opacity-70", style: { zIndex } })), visible && !
|
|
76
|
+
}, children: _jsx(VrmViewer, { active: active, vrmPath: vrmPath, worldUrl: worldUrl, mouthOpen: chatAvatarVoice.mouthOpen, isSpeaking: chatAvatarVoice.isSpeaking, cameraProfile: cameraProfile, onEngineReady: handleVrmEngineReady, onEngineState: handleVrmEngineState, onRevealStart: () => onRevealStart?.(vrmPath) }) }), visible && showVrmFallback && !vrmLoaded && (_jsx("img", { src: fallbackPreviewUrl, alt: t("companion.avatarPreviewAlt"), className: "absolute left-1/2 top-[52%] -translate-x-1/2 -translate-y-1/2 h-[90%] object-contain opacity-70", style: { zIndex } })), visible && !loaderHidden && !showVrmFallback && (_jsx("div", { className: "absolute inset-0", style: { zIndex }, children: _jsx(AvatarLoader, { progress: loadingProgress, fadingOut: loaderFading }) }))] }));
|
|
64
77
|
});
|
|
65
|
-
export const VrmStage = memo(function VrmStage({ active = true, vrmPath, worldUrl, fallbackPreviewUrl, cameraProfile = "companion", initialCompanionZoomNormalized, onEngineReady, onLayerEngineReady, playWaveOnAvatarChange = false, preloadAvatars = [], t, }) {
|
|
78
|
+
export const VrmStage = memo(function VrmStage({ active = true, vrmPath, worldUrl, fallbackPreviewUrl, cameraProfile = "companion", initialCompanionZoomNormalized, onEngineReady, onLayerEngineReady, onRevealStart, playWaveOnAvatarChange = false, preloadAvatars = [], t, }) {
|
|
66
79
|
useRenderGuard("VrmStage");
|
|
67
80
|
const [currentPath, setCurrentPath] = useState(vrmPath);
|
|
68
81
|
const [outgoingPath, setOutgoingPath] = useState(null);
|
|
@@ -122,8 +135,9 @@ export const VrmStage = memo(function VrmStage({ active = true, vrmPath, worldUr
|
|
|
122
135
|
const handleRevealStart = useCallback((layerPath) => {
|
|
123
136
|
if (layerPath !== currentPathRef.current)
|
|
124
137
|
return;
|
|
138
|
+
onRevealStart?.();
|
|
125
139
|
scheduleGreetingWave();
|
|
126
|
-
}, [scheduleGreetingWave]);
|
|
140
|
+
}, [onRevealStart, scheduleGreetingWave]);
|
|
127
141
|
useEffect(() => {
|
|
128
142
|
currentEngineRef.current?.setPaused(!active);
|
|
129
143
|
}, [active]);
|
|
@@ -9,6 +9,7 @@ export type VrmEngineState = {
|
|
|
9
9
|
idleTime: number;
|
|
10
10
|
idleTracks: number;
|
|
11
11
|
revealStarted: boolean;
|
|
12
|
+
loadingProgress?: number;
|
|
12
13
|
};
|
|
13
14
|
type DebugVector3 = {
|
|
14
15
|
x: number;
|
|
@@ -80,6 +81,7 @@ export declare class VrmEngine {
|
|
|
80
81
|
private vrmReady;
|
|
81
82
|
private lastLoadError;
|
|
82
83
|
private teleportProgress;
|
|
84
|
+
private loadingProgress;
|
|
83
85
|
private teleportProgressUniform;
|
|
84
86
|
private teleportDissolvedMaterials;
|
|
85
87
|
private teleportFallbackShaders;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VrmEngine.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/VrmEngine.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,KAAK,eAAe,EAErB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,qBAAqB,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"VrmEngine.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/VrmEngine.ts"],"names":[],"mappings":"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"}
|
|
@@ -223,14 +223,47 @@ async function decompressGzipBuffer(buffer) {
|
|
|
223
223
|
.pipeThrough(new DecompressionStream("gzip"));
|
|
224
224
|
return await new Response(stream).arrayBuffer();
|
|
225
225
|
}
|
|
226
|
-
async function loadGltfAsset(loader, url) {
|
|
226
|
+
async function loadGltfAsset(loader, url, onProgress) {
|
|
227
227
|
const response = await fetch(url);
|
|
228
228
|
if (!response.ok) {
|
|
229
229
|
throw new Error(`Failed to fetch VRM asset: ${response.status}`);
|
|
230
230
|
}
|
|
231
|
-
|
|
231
|
+
const contentLength = Number(response.headers.get("content-length") || 0);
|
|
232
|
+
let buffer;
|
|
233
|
+
if (!contentLength || !response.body || !onProgress) {
|
|
234
|
+
buffer = await response.arrayBuffer();
|
|
235
|
+
onProgress?.(1);
|
|
236
|
+
}
|
|
237
|
+
else {
|
|
238
|
+
const reader = response.body.getReader();
|
|
239
|
+
let received = 0;
|
|
240
|
+
const chunks = [];
|
|
241
|
+
for (;;) {
|
|
242
|
+
const { done, value } = await reader.read();
|
|
243
|
+
if (done)
|
|
244
|
+
break;
|
|
245
|
+
if (value) {
|
|
246
|
+
chunks.push(value);
|
|
247
|
+
received += value.length;
|
|
248
|
+
onProgress(Math.min(received / contentLength, 1));
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
const combined = new Uint8Array(received);
|
|
252
|
+
let offset = 0;
|
|
253
|
+
for (const chunk of chunks) {
|
|
254
|
+
combined.set(chunk, offset);
|
|
255
|
+
offset += chunk.length;
|
|
256
|
+
}
|
|
257
|
+
buffer = combined.buffer;
|
|
258
|
+
}
|
|
232
259
|
if (!isGzipBuffer(buffer)) {
|
|
233
|
-
|
|
260
|
+
const objectUrl = URL.createObjectURL(new Blob([buffer], { type: "model/gltf-binary" }));
|
|
261
|
+
try {
|
|
262
|
+
return await loader.loadAsync(objectUrl);
|
|
263
|
+
}
|
|
264
|
+
finally {
|
|
265
|
+
URL.revokeObjectURL(objectUrl);
|
|
266
|
+
}
|
|
234
267
|
}
|
|
235
268
|
buffer = await decompressGzipBuffer(buffer);
|
|
236
269
|
const objectUrl = URL.createObjectURL(new Blob([buffer], { type: "model/gltf-binary" }));
|
|
@@ -298,6 +331,7 @@ export class VrmEngine {
|
|
|
298
331
|
vrmReady = false;
|
|
299
332
|
lastLoadError = null;
|
|
300
333
|
teleportProgress = 1.0;
|
|
334
|
+
loadingProgress = 0;
|
|
301
335
|
teleportProgressUniform = null;
|
|
302
336
|
teleportDissolvedMaterials = [];
|
|
303
337
|
teleportFallbackShaders = [];
|
|
@@ -1222,6 +1256,7 @@ export class VrmEngine {
|
|
|
1222
1256
|
idleTime: this.idleAction?.time ?? 0,
|
|
1223
1257
|
idleTracks: this.idleAction?.getClip()?.tracks.length ?? 0,
|
|
1224
1258
|
revealStarted: this.revealStarted,
|
|
1259
|
+
loadingProgress: this.loadingProgress,
|
|
1225
1260
|
};
|
|
1226
1261
|
}
|
|
1227
1262
|
setMouthOpen(value) {
|
|
@@ -1415,6 +1450,8 @@ export class VrmEngine {
|
|
|
1415
1450
|
this.emoteClipCache.clear();
|
|
1416
1451
|
}
|
|
1417
1452
|
this.lastLoadError = null;
|
|
1453
|
+
this.loadingProgress = 0;
|
|
1454
|
+
this.onUpdate?.();
|
|
1418
1455
|
const loader = new GLTFLoader();
|
|
1419
1456
|
configureVrmGltfLoader(loader);
|
|
1420
1457
|
const webGpuNodes = this.rendererBackend === "webgpu"
|
|
@@ -1431,7 +1468,12 @@ export class VrmEngine {
|
|
|
1431
1468
|
});
|
|
1432
1469
|
let gltf;
|
|
1433
1470
|
try {
|
|
1434
|
-
gltf = await loadGltfAsset(loader, url)
|
|
1471
|
+
gltf = await loadGltfAsset(loader, url, (progress) => {
|
|
1472
|
+
if (this.vrmLoadRequestId === requestId && !this.loadingAborted) {
|
|
1473
|
+
this.loadingProgress = progress;
|
|
1474
|
+
this.onUpdate?.();
|
|
1475
|
+
}
|
|
1476
|
+
});
|
|
1435
1477
|
}
|
|
1436
1478
|
catch (error) {
|
|
1437
1479
|
if (!this.loadingAborted && requestId === this.vrmLoadRequestId) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectionStep.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/ConnectionStep.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,cAAc,
|
|
1
|
+
{"version":3,"file":"ConnectionStep.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/ConnectionStep.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,cAAc,4CA2lD7B"}
|
|
@@ -195,6 +195,46 @@ export function ConnectionStep() {
|
|
|
195
195
|
setState("onboardingSubscriptionTab", "token");
|
|
196
196
|
}
|
|
197
197
|
};
|
|
198
|
+
if (branding.appName === "Eliza") {
|
|
199
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: "Eliza Cloud" }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsxs("div", { style: { width: "100%", textAlign: "center" }, children: [elizaCloudConnected ? (_jsxs("div", { style: {
|
|
200
|
+
display: "flex",
|
|
201
|
+
alignItems: "center",
|
|
202
|
+
gap: "0.5rem",
|
|
203
|
+
padding: "0.625rem 1rem",
|
|
204
|
+
border: "1px solid var(--ok-muted)",
|
|
205
|
+
background: "var(--ok-subtle)",
|
|
206
|
+
color: "var(--ok)",
|
|
207
|
+
fontSize: "0.875rem",
|
|
208
|
+
borderRadius: "0.5rem",
|
|
209
|
+
justifyContent: "center",
|
|
210
|
+
marginBottom: "1rem"
|
|
211
|
+
}, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("title", { children: t("onboarding.connected") }), _jsx("polyline", { points: "20 6 9 17 4 12" })] }), t("onboarding.connected")] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "onboarding-confirm-btn", onClick: handleCloudLogin, disabled: elizaCloudLoginBusy, style: { marginBottom: "1rem" }, children: elizaCloudLoginBusy
|
|
212
|
+
? t("onboarding.connecting")
|
|
213
|
+
: t("onboarding.connectAccount") }), elizaCloudLoginError &&
|
|
214
|
+
(() => {
|
|
215
|
+
const urlMatch = elizaCloudLoginError.match(/^Open this link to log in: (.+)$/);
|
|
216
|
+
if (urlMatch) {
|
|
217
|
+
return (_jsxs("p", { style: {
|
|
218
|
+
fontSize: "0.8125rem",
|
|
219
|
+
marginBottom: "1rem",
|
|
220
|
+
color: "var(--text)",
|
|
221
|
+
}, children: ["Open this link to log in:", " ", _jsx("a", { href: urlMatch[1], target: "_blank", rel: "noopener noreferrer", style: {
|
|
222
|
+
color: "var(--text)",
|
|
223
|
+
textDecoration: "underline",
|
|
224
|
+
}, children: "Click here" })] }));
|
|
225
|
+
}
|
|
226
|
+
return (_jsx("p", { style: {
|
|
227
|
+
color: "var(--danger)",
|
|
228
|
+
fontSize: "0.8125rem",
|
|
229
|
+
marginBottom: "1rem",
|
|
230
|
+
}, children: elizaCloudLoginError }));
|
|
231
|
+
})()] })), _jsx("p", { className: "onboarding-desc", children: t("onboarding.freeCredits") })] }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("span", {}), _jsx("button", { className: "onboarding-confirm-btn", onClick: () => {
|
|
232
|
+
setState("onboardingRunMode", "cloud");
|
|
233
|
+
setState("onboardingCloudProvider", "elizacloud");
|
|
234
|
+
setState("onboardingProvider", "elizacloud");
|
|
235
|
+
void handleOnboardingNext();
|
|
236
|
+
}, disabled: !elizaCloudConnected, type: "button", children: t("onboarding.confirm") })] })] }));
|
|
237
|
+
}
|
|
198
238
|
if (!showProviderSelection) {
|
|
199
239
|
if (!onboardingRunMode) {
|
|
200
240
|
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.hostingTitle") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsx("div", { className: "onboarding-question", children: t("onboarding.hostingQuestion") }), _jsxs("div", { className: "onboarding-provider-grid", children: [!isNative && (_jsxs("button", { type: "button", className: "onboarding-provider-card onboarding-provider-card--recommended", onClick: handleSelectLocalHosting, children: [_jsxs("div", { children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.hostingLocal") }), _jsx("div", { className: "onboarding-provider-desc", children: t("onboarding.hostingLocalDesc") })] }), _jsx("span", { className: "onboarding-provider-badge", children: t("onboarding.recommended") ?? "Recommended" })] })), _jsx("button", { type: "button", className: "onboarding-provider-card", onClick: handleSelectCloudHosting, children: _jsxs("div", { children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.hostingCloud") }), _jsx("div", { className: "onboarding-provider-desc", children: t("onboarding.hostingCloudDesc") })] }) })] }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: handleOnboardingBack, type: "button", children: t("onboarding.back") }), _jsx("span", {})] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OnboardingStepNav.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/OnboardingStepNav.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"OnboardingStepNav.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/OnboardingStepNav.tsx"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB,4CAkChC"}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ONBOARDING_STEPS, useApp } from "@elizaos/app-core/state";
|
|
3
|
+
import { useBranding } from "../../config/branding";
|
|
3
4
|
export function OnboardingStepNav() {
|
|
4
5
|
const { onboardingStep, t } = useApp();
|
|
5
|
-
const
|
|
6
|
-
|
|
6
|
+
const branding = useBranding();
|
|
7
|
+
const isEliza = branding.appName === "Eliza";
|
|
8
|
+
const activeSteps = isEliza
|
|
9
|
+
? ONBOARDING_STEPS.filter((s) => s.id === "connection" || s.id === "activate")
|
|
10
|
+
: ONBOARDING_STEPS;
|
|
11
|
+
const currentIndex = activeSteps.findIndex((s) => s.id === onboardingStep);
|
|
12
|
+
return (_jsx("div", { className: "onboarding-left", children: _jsx("div", { className: `onboarding-step-list step-${currentIndex}`, children: activeSteps.map((step, i) => {
|
|
7
13
|
let state = "";
|
|
8
14
|
if (i < currentIndex)
|
|
9
15
|
state = "onboarding-step-item--done";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShellHeaderControls.d.ts","sourceRoot":"","sources":["../../../src/components/shared/ShellHeaderControls.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAQlE,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ShellHeaderControls.d.ts","sourceRoot":"","sources":["../../../src/components/shared/ShellHeaderControls.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAQlE,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,eAAO,MAAM,4BAA4B,sWAC4T,CAAC;AAEtW,KAAK,qBAAqB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAuCrD,UAAU,wBAAwB;IAChC,eAAe,EAAE,SAAS,CAAC;IAC3B,iBAAiB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,CAAC,EAAE,qBAAqB,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACzC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,eAAe,EACf,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,OAAO,EACP,UAAU,EACV,CAAC,EACD,QAAQ,EACR,WAAW,EACX,cAAc,EACd,SAAS,EACT,eAA0B,EAC1B,yBAAyB,EACzB,6BAA6B,EAC7B,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,GACzB,EAAE,wBAAwB,2CAwG1B"}
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { LanguageDropdown, ThemeToggle } from "@elizaos/app-core/components";
|
|
3
3
|
import { Monitor, Smartphone, UserRound, Users, } from "lucide-react";
|
|
4
4
|
import { useEffect, useState } from "react";
|
|
5
|
+
import { useBranding } from "../../config/branding";
|
|
5
6
|
export const HEADER_ICON_BUTTON_CLASSNAME = "inline-flex items-center justify-center w-11 h-11 min-w-[44px] min-h-[44px] border border-border/50 bg-bg/50 backdrop-blur-md cursor-pointer text-sm leading-none hover:border-accent hover:text-txt font-medium hover:-translate-y-0.5 transition-all duration-300 hover:shadow-[0_0_15px_rgba(var(--accent),0.5)] active:scale-95 rounded-xl text-txt shadow-sm";
|
|
6
7
|
const SHELL_MODE_MOBILE_BREAKPOINT = 768;
|
|
7
8
|
function useIsMobileShellViewport() {
|
|
@@ -28,6 +29,8 @@ function useIsMobileShellViewport() {
|
|
|
28
29
|
return isMobileViewport;
|
|
29
30
|
}
|
|
30
31
|
export function ShellHeaderControls({ activeShellView, onShellViewChange, uiLanguage, setUiLanguage, uiTheme, setUiTheme, t, children, rightExtras, trailingExtras, className, controlsVariant = "native", languageDropdownClassName, languageDropdownWrapperTestId, themeToggleClassName, themeToggleWrapperClassName, themeToggleWrapperTestId, }) {
|
|
32
|
+
const branding = useBranding();
|
|
33
|
+
const isEliza = branding.appName === "Eliza";
|
|
31
34
|
const isMobileViewport = useIsMobileShellViewport();
|
|
32
35
|
const shellOptions = [
|
|
33
36
|
{
|
|
@@ -46,7 +49,7 @@ export function ShellHeaderControls({ activeShellView, onShellViewChange, uiLang
|
|
|
46
49
|
Icon: isMobileViewport ? Smartphone : Monitor,
|
|
47
50
|
},
|
|
48
51
|
];
|
|
49
|
-
return (_jsxs("div", { className: `flex min-w-0 items-center gap-3 w-full ${className ?? ""}`, children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsxs("fieldset", { className: "inline-flex items-center gap-0.5 rounded-xl border border-border/60 bg-transparent p-0.5 shadow-sm dark:border-border dark:bg-transparent", "data-testid": "ui-shell-toggle", "aria-label": "Switch shell view", children: [_jsx("legend", { className: "sr-only", children: "Switch shell view" }), shellOptions.map(({ view, label, Icon }, index) => {
|
|
52
|
+
return (_jsxs("div", { className: `flex min-w-0 items-center gap-3 w-full ${className ?? ""}`, children: [_jsx("div", { className: "flex shrink-0 items-center", children: !isEliza && (_jsxs("fieldset", { className: "inline-flex items-center gap-0.5 rounded-xl border border-border/60 bg-transparent p-0.5 shadow-sm dark:border-border dark:bg-transparent", "data-testid": "ui-shell-toggle", "aria-label": "Switch shell view", children: [_jsx("legend", { className: "sr-only", children: "Switch shell view" }), shellOptions.map(({ view, label, Icon }, index) => {
|
|
50
53
|
const selected = activeShellView === view;
|
|
51
54
|
const edgeClass = index === 0
|
|
52
55
|
? "rounded-l-xl rounded-r-none"
|
|
@@ -56,5 +59,5 @@ export function ShellHeaderControls({ activeShellView, onShellViewChange, uiLang
|
|
|
56
59
|
return (_jsx("button", { type: "button", onClick: () => onShellViewChange(view), className: `inline-flex h-9 min-w-[44px] items-center justify-center px-3 transition-all duration-200 ${edgeClass} ${selected
|
|
57
60
|
? "border border-[#d8a108]/30 bg-bg/55 text-[#8a6500] shadow-sm dark:border-accent/25 dark:bg-bg/85 dark:text-[#f0b232]"
|
|
58
61
|
: "border border-transparent bg-transparent text-muted-strong hover:border-border/70 hover:bg-bg/85 hover:text-txt dark:text-muted dark:hover:border-border/60 dark:hover:bg-bg-hover/80 dark:hover:text-txt"}`, "aria-label": label, "aria-pressed": selected, title: label, "data-testid": `ui-shell-toggle-${view}`, children: _jsx(Icon, { className: "h-4 w-4" }) }, view));
|
|
59
|
-
})] }) }), _jsx("div", { className: "min-w-0 flex-1", children: children }), _jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2", "data-testid": "shell-header-right-controls", children: [rightExtras, _jsx("div", { className: `shrink-0 ${languageDropdownClassName ?? ""}`, "data-testid": languageDropdownWrapperTestId, children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: controlsVariant, triggerClassName: "!h-10 !min-h-10 !rounded-xl !px-3.5 sm:!px-3.5 leading-none" }) }), _jsx("div", { className: `shrink-0 ${themeToggleWrapperClassName ?? ""}`, "data-testid": themeToggleWrapperTestId, children: _jsx(ThemeToggle, { uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, variant: controlsVariant, className: `!h-10 !w-10 !min-h-10 !min-w-10 ${themeToggleClassName ?? ""}` }) }), trailingExtras] })] }));
|
|
62
|
+
})] })) }), _jsx("div", { className: "min-w-0 flex-1", children: children }), _jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2", "data-testid": "shell-header-right-controls", children: [rightExtras, _jsx("div", { className: `shrink-0 ${languageDropdownClassName ?? ""}`, "data-testid": languageDropdownWrapperTestId, children: _jsx(LanguageDropdown, { uiLanguage: uiLanguage, setUiLanguage: setUiLanguage, t: t, variant: controlsVariant, triggerClassName: "!h-10 !min-h-10 !rounded-xl !px-3.5 sm:!px-3.5 leading-none" }) }), _jsx("div", { className: `shrink-0 ${themeToggleWrapperClassName ?? ""}`, "data-testid": themeToggleWrapperTestId, children: _jsx(ThemeToggle, { uiTheme: uiTheme, setUiTheme: setUiTheme, t: t, variant: controlsVariant, className: `!h-10 !w-10 !min-h-10 !min-w-10 ${themeToggleClassName ?? ""}` }) }), trailingExtras] })] }));
|
|
60
63
|
}
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elizaos/app-core",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.63",
|
|
4
4
|
"description": "Shared application core for elizaOS shells and white-label apps.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -174,8 +174,8 @@
|
|
|
174
174
|
"@capacitor/haptics": "8.0.0",
|
|
175
175
|
"@capacitor/keyboard": "8.0.0",
|
|
176
176
|
"@capacitor/preferences": "^8.0.1",
|
|
177
|
-
"@elizaos/autonomous": "^2.0.0-alpha.
|
|
178
|
-
"@elizaos/ui": "^2.0.0-alpha.
|
|
177
|
+
"@elizaos/autonomous": "^2.0.0-alpha.63",
|
|
178
|
+
"@elizaos/ui": "^2.0.0-alpha.63",
|
|
179
179
|
"@lifo-sh/core": "0.4.4",
|
|
180
180
|
"@lifo-sh/ui": "0.4.2",
|
|
181
181
|
"@pixiv/three-vrm": "^3.4.5",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppContext.d.ts","sourceRoot":"","sources":["../../src/state/AppContext.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,cAAc,EAGpB,MAAM,oBAAoB,CAAC;AAuK5B,OAAO,EACL,KAAK,YAAY,EACjB,sBAAsB,EACtB,YAAY,EACZ,kCAAkC,EAClC,KAAK,UAAU,EACf,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,QAAQ,EACb,YAAY,EACZ,cAAc,EACd,KAAK,aAAa,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,wBAAwB,EACxB,KAAK,0BAA0B,EAC/B,yBAAyB,EACzB,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,8BAA8B,EACnC,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,yBAAyB,EACzB,6BAA6B,EAC7B,oBAAoB,EACpB,gBAAgB,EAChB,4BAA4B,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,6BAA6B,EAC7B,uBAAuB,EACvB,0BAA0B,EAC1B,sBAAsB,EACtB,6BAA6B,EAC7B,KAAK,SAAS,EACd,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,WAAW,EACX,0BAA0B,EAC1B,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,MAAM,EACN,SAAS,GACV,MAAM,YAAY,CAAC;AAkKpB,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EAAE,iBAAiB,GAC5B,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CACpC,
|
|
1
|
+
{"version":3,"file":"AppContext.d.ts","sourceRoot":"","sources":["../../src/state/AppContext.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,cAAc,EAGpB,MAAM,oBAAoB,CAAC;AAuK5B,OAAO,EACL,KAAK,YAAY,EACjB,sBAAsB,EACtB,YAAY,EACZ,kCAAkC,EAClC,KAAK,UAAU,EACf,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,QAAQ,EACb,YAAY,EACZ,cAAc,EACd,KAAK,aAAa,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,wBAAwB,EACxB,KAAK,0BAA0B,EAC/B,yBAAyB,EACzB,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,8BAA8B,EACnC,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,yBAAyB,EACzB,6BAA6B,EAC7B,oBAAoB,EACpB,gBAAgB,EAChB,4BAA4B,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,6BAA6B,EAC7B,uBAAuB,EACvB,0BAA0B,EAC1B,sBAAsB,EACtB,6BAA6B,EAC7B,KAAK,SAAS,EACd,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,WAAW,EACX,0BAA0B,EAC1B,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,MAAM,EACN,SAAS,GACV,MAAM,YAAY,CAAC;AAkKpB,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EAAE,iBAAiB,GAC5B,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CACpC,2CAk3KA"}
|
package/dist/state/AppContext.js
CHANGED
|
@@ -401,7 +401,7 @@ export function AppProvider({ children, branding: brandingOverrides, }) {
|
|
|
401
401
|
const [importError, setImportError] = useState(null);
|
|
402
402
|
const [importSuccess, setImportSuccess] = useState(null);
|
|
403
403
|
// --- Onboarding ---
|
|
404
|
-
const [onboardingStep, setOnboardingStepRaw] = useState(() => loadPersistedOnboardingStep() ?? "identity");
|
|
404
|
+
const [onboardingStep, setOnboardingStepRaw] = useState(() => loadPersistedOnboardingStep() ?? (branding.appName === "Eliza" ? "connection" : "identity"));
|
|
405
405
|
const [onboardingOptions, setOnboardingOptions] = useState(null);
|
|
406
406
|
const [onboardingName, setOnboardingName] = useState(branding.appName);
|
|
407
407
|
const [onboardingOwnerName, setOnboardingOwnerName] = useState("anon");
|
|
@@ -3010,13 +3010,15 @@ export function AppProvider({ children, branding: brandingOverrides, }) {
|
|
|
3010
3010
|
]);
|
|
3011
3011
|
// biome-ignore lint/correctness/useExhaustiveDependencies: t is stable but defined later
|
|
3012
3012
|
const handleOnboardingNext = useCallback(async (options) => {
|
|
3013
|
-
const STEP_ORDER =
|
|
3014
|
-
"
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3013
|
+
const STEP_ORDER = branding.appName === "Eliza"
|
|
3014
|
+
? ["connection", "activate"]
|
|
3015
|
+
: [
|
|
3016
|
+
"identity",
|
|
3017
|
+
"connection",
|
|
3018
|
+
"rpc",
|
|
3019
|
+
"senses",
|
|
3020
|
+
"activate",
|
|
3021
|
+
];
|
|
3020
3022
|
// Default agent name to Rin if none set after identity step
|
|
3021
3023
|
if (onboardingStep === "identity" && !onboardingName) {
|
|
3022
3024
|
setState("onboardingName", "Rin");
|
|
@@ -3073,13 +3075,15 @@ export function AppProvider({ children, branding: brandingOverrides, }) {
|
|
|
3073
3075
|
handleOnboardingFinish,
|
|
3074
3076
|
]);
|
|
3075
3077
|
const handleOnboardingBack = useCallback(() => {
|
|
3076
|
-
const STEP_ORDER =
|
|
3077
|
-
"
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3078
|
+
const STEP_ORDER = branding.appName === "Eliza"
|
|
3079
|
+
? ["connection", "activate"]
|
|
3080
|
+
: [
|
|
3081
|
+
"identity",
|
|
3082
|
+
"connection",
|
|
3083
|
+
"rpc",
|
|
3084
|
+
"senses",
|
|
3085
|
+
"activate",
|
|
3086
|
+
];
|
|
3083
3087
|
const currentIndex = STEP_ORDER.indexOf(onboardingStep);
|
|
3084
3088
|
if (currentIndex > 0) {
|
|
3085
3089
|
setOnboardingStep(STEP_ORDER[currentIndex - 1]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elizaos/app-core",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.63",
|
|
4
4
|
"description": "Shared application core for elizaOS shells and white-label apps.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -69,8 +69,8 @@
|
|
|
69
69
|
"@capacitor/haptics": "8.0.0",
|
|
70
70
|
"@capacitor/keyboard": "8.0.0",
|
|
71
71
|
"@capacitor/preferences": "^8.0.1",
|
|
72
|
-
"@elizaos/autonomous": "2.0.0-alpha.
|
|
73
|
-
"@elizaos/ui": "2.0.0-alpha.
|
|
72
|
+
"@elizaos/autonomous": "2.0.0-alpha.63",
|
|
73
|
+
"@elizaos/ui": "2.0.0-alpha.63",
|
|
74
74
|
"@lifo-sh/core": "0.4.4",
|
|
75
75
|
"@lifo-sh/ui": "0.4.2",
|
|
76
76
|
"@pixiv/three-vrm": "^3.4.5",
|
|
@@ -90,5 +90,5 @@
|
|
|
90
90
|
"tailwindcss": "^4.1.18",
|
|
91
91
|
"typescript": "^5.9.3"
|
|
92
92
|
},
|
|
93
|
-
"gitHead": "
|
|
93
|
+
"gitHead": "6ce48ede3dde71a141d122afa579d873634068d7"
|
|
94
94
|
}
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
} from "@elizaos/app-core/state";
|
|
10
10
|
import { resolveAppAssetUrl } from "@elizaos/app-core/utils";
|
|
11
11
|
import { useEffect, useState } from "react";
|
|
12
|
-
import { useBranding } from "
|
|
12
|
+
import { useBranding } from "../config/branding";
|
|
13
13
|
import { VrmStage } from "./companion/VrmStage";
|
|
14
14
|
import { ActivateStep } from "./onboarding/ActivateStep";
|
|
15
15
|
import { ConnectionStep } from "./onboarding/ConnectionStep";
|
|
@@ -64,6 +64,9 @@ const VrmStageLayer = memo(function VrmStageLayer({
|
|
|
64
64
|
const [vrmLoaded, setVrmLoaded] = useState(false);
|
|
65
65
|
const [showVrmFallback, setShowVrmFallback] = useState(false);
|
|
66
66
|
const [loadingProgress, setLoadingProgress] = useState<number | undefined>(undefined);
|
|
67
|
+
const [loaderFading, setLoaderFading] = useState(false);
|
|
68
|
+
const [loaderHidden, setLoaderHidden] = useState(false);
|
|
69
|
+
const loaderFadingStartedRef = useRef(false);
|
|
67
70
|
const chatAvatarVoice = useChatAvatarVoiceState();
|
|
68
71
|
|
|
69
72
|
const handleVrmEngineReady = useCallback(
|
|
@@ -98,9 +101,15 @@ const VrmStageLayer = memo(function VrmStageLayer({
|
|
|
98
101
|
if (state.vrmLoaded) {
|
|
99
102
|
setVrmLoaded(true);
|
|
100
103
|
setShowVrmFallback(false);
|
|
104
|
+
if (!loaderFadingStartedRef.current) {
|
|
105
|
+
loaderFadingStartedRef.current = true;
|
|
106
|
+
setLoaderFading(true);
|
|
107
|
+
setTimeout(() => setLoaderHidden(true), 800);
|
|
108
|
+
}
|
|
101
109
|
return;
|
|
102
110
|
}
|
|
103
111
|
if (state.loadError) {
|
|
112
|
+
setLoaderHidden(true);
|
|
104
113
|
setVrmLoaded(false);
|
|
105
114
|
setShowVrmFallback(true);
|
|
106
115
|
}
|
|
@@ -143,9 +152,9 @@ const VrmStageLayer = memo(function VrmStageLayer({
|
|
|
143
152
|
style={{ zIndex }}
|
|
144
153
|
/>
|
|
145
154
|
)}
|
|
146
|
-
{visible && !
|
|
155
|
+
{visible && !loaderHidden && !showVrmFallback && (
|
|
147
156
|
<div className="absolute inset-0" style={{ zIndex }}>
|
|
148
|
-
<AvatarLoader progress={loadingProgress} />
|
|
157
|
+
<AvatarLoader progress={loadingProgress} fadingOut={loaderFading} />
|
|
149
158
|
</div>
|
|
150
159
|
)}
|
|
151
160
|
</>
|
|
@@ -258,6 +258,125 @@ export function ConnectionStep() {
|
|
|
258
258
|
}
|
|
259
259
|
};
|
|
260
260
|
|
|
261
|
+
if (branding.appName === "Eliza") {
|
|
262
|
+
return (
|
|
263
|
+
<>
|
|
264
|
+
<div className="onboarding-section-title">Eliza Cloud</div>
|
|
265
|
+
<div className="onboarding-divider">
|
|
266
|
+
<div className="onboarding-divider-diamond" />
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<div style={{ width: "100%", textAlign: "center" }}>
|
|
270
|
+
{elizaCloudConnected ? (
|
|
271
|
+
<div
|
|
272
|
+
style={{
|
|
273
|
+
display: "flex",
|
|
274
|
+
alignItems: "center",
|
|
275
|
+
gap: "0.5rem",
|
|
276
|
+
padding: "0.625rem 1rem",
|
|
277
|
+
border: "1px solid var(--ok-muted)",
|
|
278
|
+
background: "var(--ok-subtle)",
|
|
279
|
+
color: "var(--ok)",
|
|
280
|
+
fontSize: "0.875rem",
|
|
281
|
+
borderRadius: "0.5rem",
|
|
282
|
+
justifyContent: "center",
|
|
283
|
+
marginBottom: "1rem"
|
|
284
|
+
}}
|
|
285
|
+
>
|
|
286
|
+
<svg
|
|
287
|
+
width="16"
|
|
288
|
+
height="16"
|
|
289
|
+
viewBox="0 0 24 24"
|
|
290
|
+
fill="none"
|
|
291
|
+
stroke="currentColor"
|
|
292
|
+
strokeWidth="2.5"
|
|
293
|
+
strokeLinecap="round"
|
|
294
|
+
strokeLinejoin="round"
|
|
295
|
+
>
|
|
296
|
+
<title>{t("onboarding.connected")}</title>
|
|
297
|
+
<polyline points="20 6 9 17 4 12" />
|
|
298
|
+
</svg>
|
|
299
|
+
{t("onboarding.connected")}
|
|
300
|
+
</div>
|
|
301
|
+
) : (
|
|
302
|
+
<>
|
|
303
|
+
<button
|
|
304
|
+
type="button"
|
|
305
|
+
className="onboarding-confirm-btn"
|
|
306
|
+
onClick={handleCloudLogin}
|
|
307
|
+
disabled={elizaCloudLoginBusy}
|
|
308
|
+
style={{ marginBottom: "1rem" }}
|
|
309
|
+
>
|
|
310
|
+
{elizaCloudLoginBusy
|
|
311
|
+
? t("onboarding.connecting")
|
|
312
|
+
: t("onboarding.connectAccount")}
|
|
313
|
+
</button>
|
|
314
|
+
{elizaCloudLoginError &&
|
|
315
|
+
(() => {
|
|
316
|
+
const urlMatch = elizaCloudLoginError.match(
|
|
317
|
+
/^Open this link to log in: (.+)$/,
|
|
318
|
+
);
|
|
319
|
+
if (urlMatch) {
|
|
320
|
+
return (
|
|
321
|
+
<p
|
|
322
|
+
style={{
|
|
323
|
+
fontSize: "0.8125rem",
|
|
324
|
+
marginBottom: "1rem",
|
|
325
|
+
color: "var(--text)",
|
|
326
|
+
}}
|
|
327
|
+
>
|
|
328
|
+
Open this link to log in:{" "}
|
|
329
|
+
<a
|
|
330
|
+
href={urlMatch[1]}
|
|
331
|
+
target="_blank"
|
|
332
|
+
rel="noopener noreferrer"
|
|
333
|
+
style={{
|
|
334
|
+
color: "var(--text)",
|
|
335
|
+
textDecoration: "underline",
|
|
336
|
+
}}
|
|
337
|
+
>
|
|
338
|
+
Click here
|
|
339
|
+
</a>
|
|
340
|
+
</p>
|
|
341
|
+
);
|
|
342
|
+
}
|
|
343
|
+
return (
|
|
344
|
+
<p
|
|
345
|
+
style={{
|
|
346
|
+
color: "var(--danger)",
|
|
347
|
+
fontSize: "0.8125rem",
|
|
348
|
+
marginBottom: "1rem",
|
|
349
|
+
}}
|
|
350
|
+
>
|
|
351
|
+
{elizaCloudLoginError}
|
|
352
|
+
</p>
|
|
353
|
+
);
|
|
354
|
+
})()}
|
|
355
|
+
</>
|
|
356
|
+
)}
|
|
357
|
+
<p className="onboarding-desc">{t("onboarding.freeCredits")}</p>
|
|
358
|
+
</div>
|
|
359
|
+
|
|
360
|
+
<div className="onboarding-panel-footer">
|
|
361
|
+
<span />
|
|
362
|
+
<button
|
|
363
|
+
className="onboarding-confirm-btn"
|
|
364
|
+
onClick={() => {
|
|
365
|
+
setState("onboardingRunMode", "cloud");
|
|
366
|
+
setState("onboardingCloudProvider", "elizacloud");
|
|
367
|
+
setState("onboardingProvider", "elizacloud");
|
|
368
|
+
void handleOnboardingNext();
|
|
369
|
+
}}
|
|
370
|
+
disabled={!elizaCloudConnected}
|
|
371
|
+
type="button"
|
|
372
|
+
>
|
|
373
|
+
{t("onboarding.confirm")}
|
|
374
|
+
</button>
|
|
375
|
+
</div>
|
|
376
|
+
</>
|
|
377
|
+
);
|
|
378
|
+
}
|
|
379
|
+
|
|
261
380
|
if (!showProviderSelection) {
|
|
262
381
|
if (!onboardingRunMode) {
|
|
263
382
|
return (
|
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
Users,
|
|
10
10
|
} from "lucide-react";
|
|
11
11
|
import { type ReactNode, useEffect, useState } from "react";
|
|
12
|
+
import { useBranding } from "../../config/branding";
|
|
12
13
|
|
|
13
14
|
export const HEADER_ICON_BUTTON_CLASSNAME =
|
|
14
15
|
"inline-flex items-center justify-center w-11 h-11 min-w-[44px] min-h-[44px] border border-border/50 bg-bg/50 backdrop-blur-md cursor-pointer text-sm leading-none hover:border-accent hover:text-txt font-medium hover:-translate-y-0.5 transition-all duration-300 hover:shadow-[0_0_15px_rgba(var(--accent),0.5)] active:scale-95 rounded-xl text-txt shadow-sm";
|
|
@@ -91,6 +92,8 @@ export function ShellHeaderControls({
|
|
|
91
92
|
themeToggleWrapperClassName,
|
|
92
93
|
themeToggleWrapperTestId,
|
|
93
94
|
}: ShellHeaderControlsProps) {
|
|
95
|
+
const branding = useBranding();
|
|
96
|
+
const isEliza = branding.appName === "Eliza";
|
|
94
97
|
const isMobileViewport = useIsMobileShellViewport();
|
|
95
98
|
const shellOptions: Array<{
|
|
96
99
|
view: ShellView;
|
|
@@ -119,40 +122,42 @@ export function ShellHeaderControls({
|
|
|
119
122
|
className={`flex min-w-0 items-center gap-3 w-full ${className ?? ""}`}
|
|
120
123
|
>
|
|
121
124
|
<div className="flex shrink-0 items-center">
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
125
|
+
{!isEliza && (
|
|
126
|
+
<fieldset
|
|
127
|
+
className="inline-flex items-center gap-0.5 rounded-xl border border-border/60 bg-transparent p-0.5 shadow-sm dark:border-border dark:bg-transparent"
|
|
128
|
+
data-testid="ui-shell-toggle"
|
|
129
|
+
aria-label="Switch shell view"
|
|
130
|
+
>
|
|
131
|
+
<legend className="sr-only">Switch shell view</legend>
|
|
132
|
+
{shellOptions.map(({ view, label, Icon }, index) => {
|
|
133
|
+
const selected = activeShellView === view;
|
|
134
|
+
const edgeClass =
|
|
135
|
+
index === 0
|
|
136
|
+
? "rounded-l-xl rounded-r-none"
|
|
137
|
+
: index === shellOptions.length - 1
|
|
138
|
+
? "rounded-l-none rounded-r-xl"
|
|
139
|
+
: "rounded-none";
|
|
140
|
+
return (
|
|
141
|
+
<button
|
|
142
|
+
key={view}
|
|
143
|
+
type="button"
|
|
144
|
+
onClick={() => onShellViewChange(view)}
|
|
145
|
+
className={`inline-flex h-9 min-w-[44px] items-center justify-center px-3 transition-all duration-200 ${edgeClass} ${
|
|
146
|
+
selected
|
|
147
|
+
? "border border-[#d8a108]/30 bg-bg/55 text-[#8a6500] shadow-sm dark:border-accent/25 dark:bg-bg/85 dark:text-[#f0b232]"
|
|
148
|
+
: "border border-transparent bg-transparent text-muted-strong hover:border-border/70 hover:bg-bg/85 hover:text-txt dark:text-muted dark:hover:border-border/60 dark:hover:bg-bg-hover/80 dark:hover:text-txt"
|
|
149
|
+
}`}
|
|
150
|
+
aria-label={label}
|
|
151
|
+
aria-pressed={selected}
|
|
152
|
+
title={label}
|
|
153
|
+
data-testid={`ui-shell-toggle-${view}`}
|
|
154
|
+
>
|
|
155
|
+
<Icon className="h-4 w-4" />
|
|
156
|
+
</button>
|
|
157
|
+
);
|
|
158
|
+
})}
|
|
159
|
+
</fieldset>
|
|
160
|
+
)}
|
|
156
161
|
</div>
|
|
157
162
|
|
|
158
163
|
<div className="min-w-0 flex-1">{children}</div>
|
package/src/state/AppContext.tsx
CHANGED
|
@@ -804,7 +804,7 @@ export function AppProvider({
|
|
|
804
804
|
|
|
805
805
|
// --- Onboarding ---
|
|
806
806
|
const [onboardingStep, setOnboardingStepRaw] = useState<OnboardingStep>(
|
|
807
|
-
() => loadPersistedOnboardingStep() ?? "identity",
|
|
807
|
+
() => loadPersistedOnboardingStep() ?? (branding.appName === "Eliza" ? "connection" : "identity"),
|
|
808
808
|
);
|
|
809
809
|
const [onboardingOptions, setOnboardingOptions] =
|
|
810
810
|
useState<OnboardingOptions | null>(null);
|
|
@@ -4090,13 +4090,15 @@ export function AppProvider({
|
|
|
4090
4090
|
// biome-ignore lint/correctness/useExhaustiveDependencies: t is stable but defined later
|
|
4091
4091
|
const handleOnboardingNext = useCallback(
|
|
4092
4092
|
async (options?: OnboardingNextOptions) => {
|
|
4093
|
-
const STEP_ORDER: OnboardingStep[] =
|
|
4094
|
-
"
|
|
4095
|
-
|
|
4096
|
-
|
|
4097
|
-
|
|
4098
|
-
|
|
4099
|
-
|
|
4093
|
+
const STEP_ORDER: OnboardingStep[] = branding.appName === "Eliza"
|
|
4094
|
+
? ["connection", "activate"]
|
|
4095
|
+
: [
|
|
4096
|
+
"identity",
|
|
4097
|
+
"connection",
|
|
4098
|
+
"rpc",
|
|
4099
|
+
"senses",
|
|
4100
|
+
"activate",
|
|
4101
|
+
];
|
|
4100
4102
|
|
|
4101
4103
|
// Default agent name to Rin if none set after identity step
|
|
4102
4104
|
if (onboardingStep === "identity" && !onboardingName) {
|
|
@@ -4168,13 +4170,15 @@ export function AppProvider({
|
|
|
4168
4170
|
);
|
|
4169
4171
|
|
|
4170
4172
|
const handleOnboardingBack = useCallback(() => {
|
|
4171
|
-
const STEP_ORDER: OnboardingStep[] =
|
|
4172
|
-
"
|
|
4173
|
-
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
|
|
4177
|
-
|
|
4173
|
+
const STEP_ORDER: OnboardingStep[] = branding.appName === "Eliza"
|
|
4174
|
+
? ["connection", "activate"]
|
|
4175
|
+
: [
|
|
4176
|
+
"identity",
|
|
4177
|
+
"connection",
|
|
4178
|
+
"rpc",
|
|
4179
|
+
"senses",
|
|
4180
|
+
"activate",
|
|
4181
|
+
];
|
|
4178
4182
|
|
|
4179
4183
|
const currentIndex = STEP_ORDER.indexOf(onboardingStep);
|
|
4180
4184
|
if (currentIndex > 0) {
|