@elizaos/app-core 2.0.0-alpha.52 → 2.0.0-alpha.53

package/src/state/useApp.ts

@@ -1,23 +0,0 @@
-import { createContext, useContext } from "react";
-import type { AppContextValue } from "./types";
-
-export const AppContext = createContext<AppContextValue | null>(null);
-
-export function useApp(): AppContextValue {
-  const ctx = useContext(AppContext);
-  if (!ctx) {
-    if (typeof process !== "undefined" && process.env.NODE_ENV === "test") {
-      // In tests, if rendered outside AppProvider, return a dummy context
-      return new Proxy({} as AppContextValue, {
-        get(_, prop) {
-          if (prop === "t") return (k: string) => k;
-          if (prop === "uiLanguage") return "en";
-          // We don't have vitest `vi` in scope, just return a no-op function for any action
-          return () => {};
-        },
-      });
-    }
-    throw new Error("useApp must be used within AppProvider");
-  }
-  return ctx;
-}

package/src/state/vrm.ts

@@ -1,76 +0,0 @@
-import { resolveAppAssetUrl } from "../utils/asset-url";
-import type { UiTheme } from "./ui-preferences";
-
-/** Number of bundled VRM avatars shipped with the app. */
-const BASE_VRM_COUNT = 4;
-
-export const VRM_COUNT = BASE_VRM_COUNT;
-
-/**
- * Maps logical avatar indices (1-4) to the original source file numbers.
- * Index 1 → milady-1, Index 2 → milady-4, Index 3 → milady-5, Index 4 → milady-9.
- */
-const VRM_INDEX_MAP: readonly number[] = [1, 4, 5, 9];
-
-function resolveSourceIndex(logicalIndex: number): number {
-  const normalized = normalizeAvatarIndex(logicalIndex);
-  const safe = normalized > 0 ? normalized : 1;
-  return VRM_INDEX_MAP[safe - 1] ?? VRM_INDEX_MAP[0];
-}
-
-function normalizeAvatarIndex(index: number): number {
-  if (!Number.isFinite(index)) return 1;
-  const n = Math.trunc(index);
-  if (n === 0) return 0;
-  if (n < 1 || n > VRM_COUNT) return 1;
-  return n;
-}
-
-/** Resolve a bundled VRM index (1–N) to its public asset URL. */
-export function getVrmUrl(index: number): string {
-  const sourceIndex = resolveSourceIndex(index);
-  return resolveAppAssetUrl(`vrms/milady-${sourceIndex}.vrm.gz`);
-}
-
-/** Resolve a bundled VRM index (1–N) to its preview thumbnail URL. */
-export function getVrmPreviewUrl(index: number): string {
-  const sourceIndex = resolveSourceIndex(index);
-  return resolveAppAssetUrl(`vrms/previews/milady-${sourceIndex}.png`);
-}
-
-/** Resolve a bundled VRM index (1-N) to its custom background URL. */
-export function getVrmBackgroundUrl(index: number): string {
-  const sourceIndex = resolveSourceIndex(index);
-  const EXT = "png";
-  return resolveAppAssetUrl(`vrms/backgrounds/milady-${sourceIndex}.${EXT}`);
-}
-
-const COMPANION_THEME_BACKGROUND_INDEX: Record<UiTheme, number> = {
-  light: 3,
-  dark: 4,
-};
-
-/** Resolve the fixed companion-mode background for the current UI theme. */
-export function getCompanionBackgroundUrl(theme: UiTheme): string {
-  return getVrmBackgroundUrl(COMPANION_THEME_BACKGROUND_INDEX[theme]);
-}
-
-/** Human-readable roster title for bundled avatars. */
-export function getVrmTitle(index: number): string {
-  const sourceIndex = resolveSourceIndex(index);
-  return `MILADY-${String(sourceIndex).padStart(2, "0")}`;
-}
-
-/** Whether a bundled index points to the official Milady avatar set. */
-export function isOfficialVrmIndex(_index: number): boolean {
-  return false;
-}
-
-/** Whether a VRM index requires an explicit 180° face-camera flip instead of auto-detection. */
-export function getVrmNeedsFlip(index: number): boolean {
-  const normalized = normalizeAvatarIndex(index);
-  if (normalized <= BASE_VRM_COUNT) return false;
-  return false;
-}
-
-export { normalizeAvatarIndex };

package/src/stories/AppMockProvider.tsx

@@ -1,32 +0,0 @@
-/**
- * AppMockProvider — Lightweight mock of useApp() for Storybook stories.
- *
- * Provides a `t(key) => key` passthrough so components using useApp().t
- * render translation keys as labels without needing the full app context.
- */
-
-import type React from "react";
-import { createContext } from "react";
-
-const MockAppContext = createContext<{ t: (key: string) => string }>({
-  t: (k: string) => k,
-});
-
-export function AppMockProvider({ children }: { children: React.ReactNode }) {
-  return (
-    <MockAppContext.Provider value={{ t: (k: string) => k }}>
-      {children}
-    </MockAppContext.Provider>
-  );
-}
-
-/**
- * Storybook decorator that wraps stories in the mock app provider.
- */
-export function withAppMock(Story: React.ComponentType) {
-  return (
-    <AppMockProvider>
-      <Story />
-    </AppMockProvider>
-  );
-}

package/src/stories/ChatEmptyState.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ChatEmptyState } from "../components/ChatMessage";
-import { withAppMock } from "./AppMockProvider";
-
-const meta: Meta<typeof ChatEmptyState> = {
-  title: "Chat/ChatEmptyState",
-  component: ChatEmptyState,
-  decorators: [withAppMock],
-};
-export default meta;
-type Story = StoryObj<typeof ChatEmptyState>;
-
-export const Default: Story = {
-  render: () => (
-    <div style={{ maxWidth: 500, minHeight: 400, display: "flex" }}>
-      <ChatEmptyState agentName="Milady" />
-    </div>
-  ),
-};
-
-export const CustomAgentName: Story = {
-  render: () => (
-    <div style={{ maxWidth: 500, minHeight: 400, display: "flex" }}>
-      <ChatEmptyState agentName="Aiko" />
-    </div>
-  ),
-};

package/src/stories/ChatMessage.stories.tsx

@@ -1,115 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ChatMessage } from "../components/ChatMessage";
-import { withAppMock } from "./AppMockProvider";
-
-const meta: Meta<typeof ChatMessage> = {
-  title: "Chat/ChatMessage",
-  component: ChatMessage,
-  decorators: [withAppMock],
-};
-export default meta;
-type Story = StoryObj<typeof ChatMessage>;
-
-const userMsg = {
-  id: "msg-1",
-  role: "user" as const,
-  text: "Hey, how are you doing today? I wanted to ask about the weather forecast for this weekend.",
-  timestamp: Date.now(),
-};
-
-const agentMsg = {
-  id: "msg-2",
-  role: "assistant" as const,
-  text: "I'm doing great, thanks for asking! The weekend forecast looks sunny with temperatures around 72°F. Perfect weather for outdoor activities.",
-  timestamp: Date.now(),
-};
-
-const longMsg = {
-  id: "msg-3",
-  role: "assistant" as const,
-  text: "Here's a detailed breakdown of the forecast:\n\n**Saturday**: Sunny, high of 74°F, low of 58°F. Light winds from the southwest at 5-10 mph. UV index: 7 (high).\n\n**Sunday**: Partly cloudy, high of 71°F, low of 55°F. Winds shifting to the northwest at 8-12 mph. 20% chance of afternoon showers.\n\nOverall, it's a great weekend to be outdoors. I'd recommend sunscreen for Saturday and perhaps a light jacket for Sunday evening.",
-  timestamp: Date.now(),
-};
-
-const interruptedMsg = {
-  id: "msg-4",
-  role: "assistant" as const,
-  text: "I was starting to explain the concept of—",
-  timestamp: Date.now(),
-  interrupted: true,
-};
-
-export const UserMessage: Story = {
-  render: () => (
-    <div style={{ maxWidth: 600 }}>
-      <ChatMessage message={userMsg} agentName="Milady" />
-    </div>
-  ),
-};
-
-export const AgentMessage: Story = {
-  render: () => (
-    <div style={{ maxWidth: 600 }}>
-      <ChatMessage message={agentMsg} agentName="Milady" />
-    </div>
-  ),
-};
-
-export const GroupedMessages: Story = {
-  render: () => (
-    <div style={{ maxWidth: 600 }}>
-      <ChatMessage message={agentMsg} agentName="Milady" />
-      <ChatMessage
-        message={{
-          ...agentMsg,
-          id: "msg-2b",
-          text: "Would you like more details?",
-        }}
-        agentName="Milady"
-        isGrouped
-      />
-    </div>
-  ),
-};
-
-export const LongMessage: Story = {
-  render: () => (
-    <div style={{ maxWidth: 600 }}>
-      <ChatMessage message={longMsg} agentName="Milady" />
-    </div>
-  ),
-};
-
-export const Interrupted: Story = {
-  render: () => (
-    <div style={{ maxWidth: 600 }}>
-      <ChatMessage message={interruptedMsg} agentName="Milady" />
-    </div>
-  ),
-};
-
-export const Conversation: Story = {
-  name: "Full Conversation",
-  render: () => (
-    <div style={{ maxWidth: 600 }}>
-      <ChatMessage message={userMsg} agentName="Milady" />
-      <ChatMessage message={agentMsg} agentName="Milady" />
-      <ChatMessage
-        message={{
-          ...userMsg,
-          id: "msg-5",
-          text: "Thanks! Any rain expected?",
-        }}
-        agentName="Milady"
-      />
-      <ChatMessage
-        message={{
-          ...agentMsg,
-          id: "msg-6",
-          text: "Only a 20% chance on Sunday afternoon. You should be fine!",
-        }}
-        agentName="Milady"
-      />
-    </div>
-  ),
-};

package/src/stories/CompanionHeader.stories.tsx

@@ -1,74 +0,0 @@
-import type { UiLanguage } from "@elizaos/app-core/i18n";
-import type { UiTheme } from "@elizaos/app-core/state";
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { CompanionHeader } from "../components/companion/CompanionHeader";
-
-const meta = {
-  title: "Companion/CompanionHeader",
-  component: CompanionHeader,
-  parameters: {
-    layout: "fullscreen",
-  },
-  args: {
-    name: "Eliza",
-    agentState: "idle",
-    stateColor: "text-ok border-ok",
-    lifecycleBusy: false,
-    restartBusy: false,
-
-    handleRestart: fn(),
-    elizaCloudEnabled: true,
-    elizaCloudConnected: false,
-    elizaCloudCredits: 100,
-    creditColor: "text-ok border-ok",
-    elizaCloudTopUpUrl: "https://elizacloud.ai/dashboard/settings?tab=billing",
-    evmShort: "0x12...34ab",
-    solShort: null,
-    handleSwitchToNativeShell: fn(),
-    uiLanguage: "en-US" as UiLanguage,
-    setUiLanguage: fn(),
-    uiTheme: "dark" as UiTheme,
-    setUiTheme: fn(),
-    t: (key: string) => key,
-  },
-} satisfies Meta<typeof CompanionHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const DefaultRunning: Story = {};
-
-export const Thinking: Story = {
-  args: {
-    agentState: "thinking",
-    stateColor: "bg-blue-500",
-    elizaCloudEnabled: true,
-    elizaCloudConnected: true,
-    elizaCloudCredits: 100,
-    elizaCloudTopUpUrl: "https://elizacloud.ai/dashboard/settings?tab=billing",
-  },
-};
-
-export const DisconnectedWithoutCredits: Story = {
-  args: {
-    elizaCloudConnected: false,
-    elizaCloudCredits: null,
-  },
-};
-
-export const MobileView: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "iphonex",
-    },
-  },
-};
-
-export const TabletView: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "ipad",
-    },
-  },
-};

package/src/stories/CompanionView.stories.tsx

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { CompanionView } from "../components/CompanionView";
-import { withAppMock } from "./AppMockProvider";
-
-const meta = {
-  title: "Companion/CompanionView",
-  component: CompanionView,
-  decorators: [withAppMock],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof CompanionView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const MobileView: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "iphonex",
-    },
-  },
-};
-
-export const TabletView: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: "ipad",
-    },
-  },
-};

package/src/stories/ConversationListItem.stories.tsx

@@ -1,102 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { createRef } from "react";
-import { ConversationListItem } from "../components/conversations/ConversationListItem";
-
-const noop = () => {};
-
-const meta: Meta<typeof ConversationListItem> = {
-  title: "Chat/ConversationListItem",
-  component: ConversationListItem,
-  parameters: { layout: "padded" },
-};
-export default meta;
-type Story = StoryObj<typeof ConversationListItem>;
-
-const baseProps = {
-  conv: {
-    id: "conv-1",
-    title: "Hello World",
-    updatedAt: new Date().toISOString(),
-  },
-  isActive: false,
-  isEditing: false,
-  isUnread: false,
-  isGameModal: false,
-  editingTitle: "",
-  confirmDeleteId: null,
-  deletingId: null,
-  inputRef: createRef<HTMLInputElement>(),
-  t: (k: string) => k,
-  mobile: false,
-  onSelect: noop,
-  onEditingTitleChange: noop,
-  onEditSubmit: noop,
-  onEditKeyDown: noop,
-  onConfirmDelete: noop,
-  onCancelDelete: noop,
-  onOpenActions: noop,
-};
-
-export const Default: Story = {
-  render: () => (
-    <div
-      style={{
-        width: 260,
-        border: "1px solid var(--border)",
-        background: "var(--bg)",
-      }}
-    >
-      <ConversationListItem {...baseProps} />
-    </div>
-  ),
-};
-
-export const Active: Story = {
-  render: () => (
-    <div
-      style={{
-        width: 260,
-        border: "1px solid var(--border)",
-        background: "var(--bg)",
-      }}
-    >
-      <ConversationListItem {...baseProps} isActive />
-    </div>
-  ),
-};
-
-export const Unread: Story = {
-  render: () => (
-    <div
-      style={{
-        width: 260,
-        border: "1px solid var(--border)",
-        background: "var(--bg)",
-      }}
-    >
-      <ConversationListItem {...baseProps} isUnread />
-    </div>
-  ),
-};
-
-export const ConfirmDelete: Story = {
-  render: () => (
-    <div
-      style={{
-        width: 320,
-        border: "1px solid var(--border)",
-        background: "var(--bg)",
-      }}
-    >
-      <ConversationListItem {...baseProps} confirmDeleteId="conv-1" />
-    </div>
-  ),
-};
-
-export const GameModal: Story = {
-  render: () => (
-    <div style={{ width: 280 }}>
-      <ConversationListItem {...baseProps} isGameModal />
-    </div>
-  ),
-};

package/src/stories/TypingIndicator.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { TypingIndicator } from "../components/ChatMessage";
-
-const meta: Meta<typeof TypingIndicator> = {
-  title: "Chat/TypingIndicator",
-  component: TypingIndicator,
-};
-export default meta;
-type Story = StoryObj<typeof TypingIndicator>;
-
-export const Default: Story = {
-  render: () => (
-    <div style={{ maxWidth: 600 }}>
-      <TypingIndicator agentName="Milady" />
-    </div>
-  ),
-};
-
-export const WithAvatar: Story = {
-  render: () => (
-    <div style={{ maxWidth: 600 }}>
-      <TypingIndicator
-        agentName="Milady"
-        agentAvatarSrc="https://ui-avatars.com/api/?name=M&background=7c3aed&color=fff&size=64"
-      />
-    </div>
-  ),
-};