@elizaos/app-core 2.0.0-alpha.10

package/src/components/confirm-delete-control.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+type ConfirmDeleteControlProps = {
+  onConfirm: () => void;
+  disabled?: boolean;
+  triggerLabel?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  busyLabel?: string;
+  promptText?: string;
+  triggerClassName: string;
+  confirmClassName: string;
+  cancelClassName: string;
+  promptClassName?: string;
+};
+
+export function ConfirmDeleteControl({
+  onConfirm,
+  disabled = false,
+  triggerLabel = "Delete",
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  busyLabel,
+  promptText = "Delete?",
+  triggerClassName,
+  confirmClassName,
+  cancelClassName,
+  promptClassName = "text-[11px] text-[#e74c3c] ml-1",
+}: ConfirmDeleteControlProps) {
+  const [confirming, setConfirming] = useState(false);
+
+  if (!confirming) {
+    return (
+      <button
+        type="button"
+        className={triggerClassName}
+        onClick={() => setConfirming(true)}
+        disabled={disabled}
+      >
+        {triggerLabel}
+      </button>
+    );
+  }
+
+  return (
+    <>
+      <span className={promptClassName}>{promptText}</span>
+      <button
+        type="button"
+        className={confirmClassName}
+        onClick={() => {
+          onConfirm();
+          setConfirming(false);
+        }}
+        disabled={disabled}
+      >
+        {disabled && busyLabel ? busyLabel : confirmLabel}
+      </button>
+      <button
+        type="button"
+        className={cancelClassName}
+        onClick={() => setConfirming(false)}
+        disabled={disabled}
+      >
+        {cancelLabel}
+      </button>
+    </>
+  );
+}

package/src/components/conversations/ConversationListItem.tsx

@@ -0,0 +1,185 @@
+import { Button, Input } from "@elizaos/ui";
+import type React from "react";
+import { useRef } from "react";
+import { getLocalizedConversationTitle } from "./conversation-utils";
+
+interface ConversationListItemProps {
+  conv: { id: string; title: string; updatedAt: string };
+  isActive: boolean;
+  isEditing: boolean;
+  isUnread: boolean;
+  isGameModal: boolean;
+  editingTitle: string;
+  confirmDeleteId: string | null;
+  deletingId: string | null;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  t: (
+    key: string,
+    vars?: Record<string, string | number | boolean | null | undefined>,
+  ) => string;
+  mobile: boolean;
+  onSelect: (id: string) => void;
+  onEditingTitleChange: (value: string) => void;
+  onEditSubmit: (id: string) => void;
+  onEditKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, id: string) => void;
+  onConfirmDelete: (id: string) => void;
+  onCancelDelete: () => void;
+  onOpenActions: (
+    event:
+      | React.MouseEvent<HTMLButtonElement | HTMLDivElement>
+      | React.TouchEvent<HTMLButtonElement | HTMLDivElement>,
+    conv: { id: string; title: string },
+  ) => void;
+}
+
+export function ConversationListItem({
+  conv,
+  isActive,
+  isEditing,
+  isUnread,
+  isGameModal,
+  editingTitle,
+  confirmDeleteId,
+  deletingId,
+  inputRef,
+  t,
+  mobile,
+  onSelect,
+  onEditingTitleChange,
+  onEditSubmit,
+  onEditKeyDown,
+  onConfirmDelete,
+  onCancelDelete,
+  onOpenActions,
+}: ConversationListItemProps) {
+  const longPressTimerRef = useRef<number | null>(null);
+  const suppressClickRef = useRef(false);
+
+  const clearLongPressTimer = () => {
+    if (longPressTimerRef.current !== null) {
+      window.clearTimeout(longPressTimerRef.current);
+      longPressTimerRef.current = null;
+    }
+  };
+
+  const handleTouchStart = (event: React.TouchEvent<HTMLButtonElement>) => {
+    if (!mobile) return;
+    clearLongPressTimer();
+    longPressTimerRef.current = window.setTimeout(() => {
+      suppressClickRef.current = true;
+      onOpenActions(event, conv);
+      clearLongPressTimer();
+    }, 450);
+  };
+
+  const handleTouchEnd = () => {
+    clearLongPressTimer();
+  };
+
+  return (
+    <div
+      key={conv.id}
+      data-testid="conv-item"
+      data-active={isActive || undefined}
+      className={`w-full ${
+        isGameModal
+          ? "group relative flex items-start gap-3 w-full p-2.5 rounded-xl cursor-pointer transition-all border border-transparent"
+          : "flex items-center pl-3 pr-2 py-2 gap-1 cursor-pointer transition-colors border-l-[3px]"
+      } ${
+        isActive
+          ? isGameModal
+            ? "bg-accent/15 border-accent/30 shadow-[0_0_15px_rgba(240,178,50,0.1)]"
+            : "bg-bg-hover border-l-accent"
+          : isGameModal
+            ? "hover:bg-white/5 hover:border-white/10"
+            : "border-l-transparent hover:bg-bg-hover"
+      }`}
+    >
+      {isEditing ? (
+        <Input
+          ref={inputRef}
+          className="w-full h-8 px-1.5 border-accent bg-card text-txt text-[13px] shadow-sm focus-visible:ring-1 focus-visible:ring-accent"
+          value={editingTitle}
+          onChange={(e) => onEditingTitleChange(e.target.value)}
+          onBlur={() => void onEditSubmit(conv.id)}
+          onKeyDown={(e) => onEditKeyDown(e, conv.id)}
+          onClick={(e) => e.stopPropagation()}
+        />
+      ) : (
+        <>
+          <Button
+            variant="ghost"
+            size="sm"
+            data-testid="conv-select"
+            className={
+              isGameModal
+                ? "flex w-full flex-col flex-1 min-w-0 !items-start !justify-start !text-left cursor-pointer h-auto p-0 rounded-none bg-transparent border-none"
+                : "flex items-center gap-2 flex-1 min-w-0 bg-transparent border-0 p-0 m-0 text-left h-auto cursor-pointer rounded-none"
+            }
+            onClick={() => {
+              if (suppressClickRef.current) {
+                suppressClickRef.current = false;
+                return;
+              }
+              onSelect(conv.id);
+            }}
+            onContextMenu={(event) => {
+              if (mobile) return;
+              onOpenActions(event, conv);
+            }}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+            onTouchCancel={handleTouchEnd}
+            onTouchMove={handleTouchEnd}
+          >
+            {isUnread && (
+              <span
+                className={
+                  isGameModal
+                    ? "absolute top-3 left-3 w-2 h-2 rounded-full bg-accent animate-pulse shadow-[0_0_8px_rgba(240,178,50,0.8)]"
+                    : "w-2 h-2 rounded-full bg-accent shrink-0"
+                }
+              />
+            )}
+
+            <span
+              className={
+                isGameModal
+                  ? `block w-full text-[13px] font-medium truncate leading-tight text-left transition-colors min-w-0 ${isActive ? "text-txt text-shadow-glow" : "text-white/90 group-hover:text-white"}`
+                  : "block w-full font-medium truncate text-left text-txt min-w-0"
+              }
+            >
+              {getLocalizedConversationTitle(conv.title, t)}
+            </span>
+          </Button>
+
+          {confirmDeleteId === conv.id ? (
+            <div className="flex items-center gap-1.5 flex-shrink-0">
+              <span className="text-[10px] text-danger">
+                {t("conversations.deleteConfirm")}
+              </span>
+              <Button
+                variant="destructive"
+                size="sm"
+                className="h-6 px-1.5 py-0.5 text-[10px] text-white shadow-sm disabled:opacity-50"
+                onClick={() => void onConfirmDelete(conv.id)}
+                disabled={deletingId === conv.id}
+              >
+                {deletingId === conv.id ? "..." : t("conversations.deleteYes")}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-6 px-1.5 py-0.5 text-[10px] text-muted shadow-sm hover:border-accent hover:text-txt disabled:opacity-50"
+                onClick={() => onCancelDelete()}
+                disabled={deletingId === conv.id}
+              >
+                {t("conversations.deleteNo")}
+              </Button>
+            </div>
+          ) : null}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/conversations/conversation-utils.ts

@@ -0,0 +1,151 @@
+import { VRM_COUNT } from "../../state";
+
+export function getLocalizedConversationTitle(
+  title: string | undefined | null,
+  t: (
+    key: string,
+    vars?: Record<string, string | number | boolean | null | undefined>,
+  ) => string,
+): string {
+  if (
+    !title ||
+    title === "New Chat" ||
+    title === "conversations.newChatTitle"
+  ) {
+    const localized = t("conversations.newChatTitle");
+    return localized === "conversations.newChatTitle" ? "New Chat" : localized;
+  }
+  return title;
+}
+
+export const BROWSER_CAPABILITY_PLUGIN_IDS = new Set([
+  "browser",
+  "browserbase",
+  "chrome-extension",
+]);
+
+export const COMPUTER_CAPABILITY_PLUGIN_IDS = new Set([
+  "computeruse",
+  "computer-use",
+]);
+
+export function formatRelativeTime(
+  dateString: string,
+  t: (
+    key: string,
+    vars?: Record<string, string | number | boolean | null | undefined>,
+  ) => string,
+): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return t("conversations.justNow");
+  if (diffMins < 60) return t("conversations.minutesAgo", { count: diffMins });
+  if (diffHours < 24) return t("conversations.hoursAgo", { count: diffHours });
+  if (diffDays < 7) return t("conversations.daysAgo", { count: diffDays });
+
+  return date.toLocaleDateString();
+}
+
+export function avatarIndexFromConversationId(id: string): number {
+  let hash = 0;
+  for (let i = 0; i < id.length; i += 1) {
+    hash = (hash * 31 + id.charCodeAt(i)) | 0;
+  }
+  const normalized = Math.abs(hash) % VRM_COUNT;
+  return normalized + 1;
+}
+
+export function resolveProviderLabel(model: string | undefined): string {
+  const value = (model ?? "").trim();
+  if (!value) return "";
+
+  const lower = value.toLowerCase();
+  const knownProviders: Array<{ match: string; label: string }> = [
+    { match: "elizacloud", label: "Eliza Cloud" },
+    { match: "openrouter", label: "OpenRouter" },
+    { match: "openai", label: "OpenAI" },
+    { match: "anthropic", label: "Anthropic" },
+    { match: "gemini", label: "Google" },
+    { match: "google", label: "Google" },
+    { match: "grok", label: "xAI" },
+    { match: "xai", label: "xAI" },
+    { match: "groq", label: "Groq" },
+    { match: "ollama", label: "Ollama" },
+    { match: "deepseek", label: "DeepSeek" },
+    { match: "mistral", label: "Mistral" },
+    { match: "together", label: "Together AI" },
+    { match: "zai", label: "z.ai" },
+    { match: "cohere", label: "Cohere" },
+    { match: "pi-ai", label: "Pi AI" },
+  ];
+  for (const provider of knownProviders) {
+    if (lower.includes(provider.match)) return provider.label;
+  }
+
+  if (lower.startsWith("gpt")) return "OpenAI";
+  if (lower.startsWith("claude")) return "Anthropic";
+  if (lower.startsWith("gemini")) return "Google";
+
+  const splitToken = value.split(/[/:|]/)[0]?.trim();
+  if (splitToken) return splitToken.toUpperCase();
+  return "";
+}
+
+export function isNonChatModelLabel(model: string | undefined): boolean {
+  const value = (model ?? "").trim().toLowerCase();
+  if (!value) return false;
+  if (value === "text_embedding") return true;
+  if (value === "text_large") return true;
+  if (value === "text_small") return true;
+  if (value.includes("text_embedding")) return true;
+  if (value.includes("embedding")) return true;
+  if (value.includes("text_large") || value.includes("text_small")) return true;
+  if (/^text_[a-z0-9_]+$/.test(value)) return true;
+  return false;
+}
+
+export function estimateTokenCost(
+  promptTokens: number,
+  completionTokens: number,
+  model: string | undefined,
+): string {
+  const normalizedModel = (model ?? "").toLowerCase();
+  const pricingByMillion: Record<string, [number, number]> = {
+    "gpt-5": [1.25, 10.0],
+    "gpt-4.1": [2.0, 8.0],
+    "gpt-4o": [2.5, 10.0],
+    "gpt-4": [30.0, 60.0],
+    "claude-4": [15.0, 75.0],
+    "claude-3.7": [3.0, 15.0],
+    "claude-3.5": [3.0, 15.0],
+    "gemini-2.5-pro": [1.25, 10.0],
+    "gemini-2.0-flash": [0.1, 0.4],
+    deepseek: [0.55, 2.19],
+    qwen: [0.35, 1.4],
+    kimi: [0.2, 0.8],
+    moonshot: [0.2, 0.8],
+  };
+
+  let inputCostPerMillion = 1.0;
+  let outputCostPerMillion = 3.0;
+  for (const [key, [inCost, outCost]] of Object.entries(pricingByMillion)) {
+    if (normalizedModel.includes(key)) {
+      inputCostPerMillion = inCost;
+      outputCostPerMillion = outCost;
+      break;
+    }
+  }
+
+  const estimated =
+    (promptTokens / 1_000_000) * inputCostPerMillion +
+    (completionTokens / 1_000_000) * outputCostPerMillion;
+  if (estimated <= 0) return "$0.0000";
+  if (estimated < 0.0001) return "<$0.0001";
+  if (estimated < 0.01) return `~$${estimated.toFixed(4)}`;
+  return `~$${estimated.toFixed(3)}`;
+}

package/src/components/format.ts

@@ -0,0 +1,131 @@
+/**
+ * Shared formatting helpers for Milady app views.
+ */
+
+type ByteSizeFormatterOptions = {
+  /**
+   * Fallback string for invalid or negative byte values.
+   */
+  unknownLabel?: string;
+  /**
+   * Precision for KB / MB / GB / TB values.
+   */
+  kbPrecision?: number;
+  mbPrecision?: number;
+  gbPrecision?: number;
+  tbPrecision?: number;
+};
+
+type DateFormatOptions = {
+  /**
+   * Fallback string for empty/invalid dates.
+   */
+  fallback?: string;
+  /**
+   * Optional locale override.
+   */
+  locale?: string;
+};
+
+type DurationFormatOptions = {
+  /**
+   * Fallback string for non-positive/invalid durations.
+   */
+  fallback?: string;
+};
+
+/**
+ * Format a byte count in human-readable units.
+ */
+export function formatByteSize(
+  bytes: number,
+  options: ByteSizeFormatterOptions = {},
+): string {
+  const {
+    unknownLabel = "unknown",
+    kbPrecision = 1,
+    mbPrecision = 1,
+    gbPrecision = 1,
+    tbPrecision = 1,
+  } = options;
+
+  if (!Number.isFinite(bytes) || bytes < 0) return unknownLabel;
+  if (bytes >= 1024 ** 4) {
+    return `${(bytes / 1024 ** 4).toFixed(tbPrecision)} TB`;
+  }
+  if (bytes >= 1024 ** 3) {
+    return `${(bytes / 1024 ** 3).toFixed(gbPrecision)} GB`;
+  }
+  if (bytes >= 1024 ** 2) {
+    return `${(bytes / 1024 ** 2).toFixed(mbPrecision)} MB`;
+  }
+  if (bytes >= 1024) {
+    return `${(bytes / 1024).toFixed(kbPrecision)} KB`;
+  }
+  return `${bytes} B`;
+}
+
+/**
+ * Format timestamp / date for locale display (`toLocaleString`).
+ */
+export function formatDateTime(
+  value: number | string | Date | null | undefined,
+  options: DateFormatOptions = {},
+): string {
+  const { fallback = "—", locale } = options;
+  if (value == null || value === "") return fallback;
+  const parsed = value instanceof Date ? value : new Date(value);
+  if (!Number.isFinite(parsed.getTime())) return fallback;
+  return parsed.toLocaleString(locale);
+}
+
+/**
+ * Format timestamp / date as locale time only (`toLocaleTimeString`).
+ */
+export function formatTime(
+  value: number | string | Date | null | undefined,
+  options: DateFormatOptions = {},
+): string {
+  const { fallback = "—", locale } = options;
+  if (value == null || value === "") return fallback;
+  const parsed = value instanceof Date ? value : new Date(value);
+  if (!Number.isFinite(parsed.getTime())) return fallback;
+  return parsed.toLocaleTimeString(locale);
+}
+
+/**
+ * Format timestamp / date as locale date only (`toLocaleDateString`).
+ */
+export function formatShortDate(
+  value: number | string | Date | null | undefined,
+  options: DateFormatOptions = {},
+): string {
+  const { fallback = "—", locale } = options;
+  if (value == null || value === "") return fallback;
+  const parsed = value instanceof Date ? value : new Date(value);
+  if (!Number.isFinite(parsed.getTime())) return fallback;
+  return parsed.toLocaleDateString(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+/**
+ * Format an elapsed duration in milliseconds into a compact human string.
+ */
+export function formatDurationMs(
+  ms?: number | null,
+  options: DurationFormatOptions = {},
+): string {
+  const { fallback = "—" } = options;
+  if (!ms || ms <= 0) return fallback;
+  if (ms < 60_000) return `${Math.round(ms / 1000)}s`;
+  if (ms < 3_600_000) return `${Math.round(ms / 60_000)}m`;
+  if (ms < 86_400_000) {
+    const hours = ms / 3_600_000;
+    return hours === Math.floor(hours) ? `${hours}h` : `${hours.toFixed(1)}h`;
+  }
+  const days = ms / 86_400_000;
+  return days === Math.floor(days) ? `${days}d` : `${days.toFixed(1)}d`;
+}

package/src/components/index.ts

@@ -0,0 +1,94 @@
+export * from "./ApiKeyConfig";
+export * from "./AdvancedPageView";
+export * from "./AgentActivityBox";
+export * from "./AppsPageView";
+export * from "./AppsView";
+export * from "./AvatarLoader";
+export * from "./AvatarSelector";
+export * from "./avatar/VrmEngine";
+export * from "./avatar/VrmViewer";
+export * from "./BscTradePanel";
+export * from "./BugReportModal";
+export * from "./CharacterView";
+export * from "./ChatAvatar";
+export * from "./ChatComposer";
+export * from "./ChatMessage";
+export * from "./ChatModalView";
+export * from "./ChatView";
+export * from "./CloudSourceControls";
+export * from "./CodingAgentSettingsSection";
+export * from "./CommandPalette";
+export * from "./CompanionSceneHost";
+export * from "./CompanionShell";
+export * from "./CompanionView";
+export * from "./ConfigPageView";
+export * from "./ConfigSaveFooter";
+export * from "./ConfirmModal";
+export * from "./ConnectionFailedBanner";
+export * from "./ConversationsSidebar";
+export * from "./ConnectorsPageView";
+export * from "./confirm-delete-control";
+export * from "./CustomActionEditor";
+export * from "./CustomActionsPanel";
+export * from "./CustomActionsView";
+export * from "./DatabasePageView";
+export * from "./DatabaseView";
+export * from "./ElizaCloudDashboard";
+export * from "./EmotePicker";
+export * from "./ErrorBoundary";
+export * from "./FineTuningView";
+export * from "./format";
+export * from "./GameView";
+export * from "./GameViewOverlay";
+export * from "./GlobalEmoteOverlay";
+export * from "./HeartbeatsView";
+export * from "./Header";
+export * from "./InventoryView";
+export * from "./KnowledgeView";
+export * from "./knowledge-upload-image";
+export * from "./LanguageDropdown";
+export * from "./LifoMonitorPanel";
+export * from "./LifoSandboxView";
+export * from "./LoadingScreen";
+export * from "./LogsPageView";
+export * from "./LogsView";
+export * from "./labels";
+export * from "./MediaGalleryView";
+export * from "./MediaSettingsSection";
+export * from "./MessageContent";
+export * from "./ElizaCloudDashboard";
+export * from "./OnboardingWizard";
+export * from "./PairingView";
+export * from "./PermissionsSection";
+export * from "./PluginsPageView";
+export * from "./PluginsView";
+export * from "./ProviderSwitcher";
+export * from "./RestartBanner";
+export * from "./RuntimeView";
+export * from "./SaveCommandModal";
+export * from "./SecretsView";
+export * from "./SettingsView";
+export * from "./ShellOverlays";
+export * from "./ShortcutsOverlay";
+export * from "./SkillsView";
+export * from "./StartupFailureView";
+export * from "./StreamView";
+export * from "./SubscriptionStatus";
+export * from "./SystemWarningBanner";
+export { useSharedCompanionScene } from "./shared-companion-scene-context";
+export * from "./skeletons";
+export * from "./ThemeToggle";
+export * from "./TriggersView";
+export * from "./TrajectoriesView";
+export * from "./TrajectoryDetailView";
+export * from "./trajectory-format";
+export * from "./ui-badges";
+export * from "./ui-switch";
+export * from "./VectorBrowserView";
+export * from "./VoiceConfigView";
+export * from "./VrmStage";
+export * from "./WhatsAppQrOverlay";
+export * from "./chainConfig";
+export * from "./companion-shell-styles";
+export * from "./conversations/ConversationListItem";
+export * from "./conversations/conversation-utils";

package/src/components/inventory/CopyableAddress.tsx

@@ -0,0 +1,41 @@
+/**
+ * Truncated wallet address with a copy button.
+ */
+
+import { useTimeout } from "@elizaos/app-core/hooks";
+import { Button } from "@elizaos/ui";
+import { useState } from "react";
+
+export function CopyableAddress({
+  address,
+  onCopy,
+}: {
+  address: string;
+  onCopy: (text: string) => Promise<void>;
+}) {
+  const { setTimeout } = useTimeout();
+  const [copied, setCopied] = useState(false);
+  const short = `${address.slice(0, 6)}...${address.slice(-4)}`;
+
+  const handleCopy = async () => {
+    await onCopy(address);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="flex items-center gap-1.5 shrink-0">
+      <code className="font-mono text-xs text-muted select-all" title={address}>
+        {short}
+      </code>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleCopy}
+        className="h-6 px-1.5 py-0.5 border-border bg-bg text-[10px] font-mono shadow-sm hover:border-accent hover:text-txt"
+      >
+        {copied ? "copied" : "copy"}
+      </Button>
+    </div>
+  );
+}