@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/src/components/skeletons.tsx

@@ -1,88 +0,0 @@
-/**
- * Loading skeleton components for better UX.
- */
-
-export function SkeletonLine({
-  width = "100%",
-  className = "",
-}: {
-  width?: string;
-  className?: string;
-}) {
-  return (
-    <div
-      className={`h-4 bg-bg-accent rounded animate-pulse ${className}`}
-      style={{ width }}
-    />
-  );
-}
-
-export function SkeletonText({ lines = 3 }: { lines?: number }) {
-  return (
-    <div className="space-y-2">
-      {Array.from({ length: lines }, (_, i) => i).map((lineIndex) => (
-        <SkeletonLine
-          key={lineIndex}
-          width={lineIndex === lines - 1 ? "60%" : "100%"}
-        />
-      ))}
-    </div>
-  );
-}
-
-export function SkeletonMessage({ isUser = false }: { isUser?: boolean }) {
-  return (
-    <div
-      className={`flex items-start gap-3 ${isUser ? "justify-end" : "justify-start"} mt-4`}
-    >
-      {!isUser && (
-        <div className="w-8 h-8 rounded-full bg-bg-accent animate-pulse shrink-0" />
-      )}
-      <div className={`max-w-[80%] space-y-2 ${isUser ? "items-end" : ""}`}>
-        <div className="h-3 w-20 bg-bg-accent rounded animate-pulse" />
-        <div className="px-4 py-3 bg-bg-accent rounded-2xl animate-pulse min-w-[200px]">
-          <SkeletonText lines={2} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function SkeletonCard() {
-  return (
-    <div className="p-4 border border-border bg-card rounded-lg space-y-4">
-      <div className="flex items-center gap-3">
-        <div className="w-10 h-10 rounded-lg bg-bg-accent animate-pulse" />
-        <div className="space-y-2 flex-1">
-          <SkeletonLine width="40%" />
-          <SkeletonLine width="60%" />
-        </div>
-      </div>
-      <SkeletonText lines={3} />
-    </div>
-  );
-}
-
-export function SkeletonSidebar() {
-  return (
-    <div className="w-64 space-y-2 p-4">
-      <div className="h-8 w-32 bg-bg-accent rounded animate-pulse mb-6" />
-      {Array.from({ length: 6 }, (_, idx) => idx).map((itemIndex) => (
-        <div key={itemIndex} className="flex items-center gap-3 p-2">
-          <div className="w-5 h-5 rounded bg-bg-accent animate-pulse" />
-          <div className="h-4 bg-bg-accent rounded animate-pulse flex-1" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function SkeletonChat() {
-  return (
-    <div className="p-4 space-y-2">
-      <SkeletonMessage />
-      <SkeletonMessage isUser />
-      <SkeletonMessage />
-    </div>
-  );
-}

package/src/components/stream/ActivityFeed.tsx

@@ -1,113 +0,0 @@
-import type { StreamEventEnvelope } from "@elizaos/app-core/api";
-import { formatTime } from "@elizaos/app-core/components";
-import { useApp } from "@elizaos/app-core/state";
-import { useEffect, useRef } from "react";
-import {
-  CHANNEL_COLORS,
-  getEventFrom,
-  getEventSource,
-  getEventText,
-} from "./helpers";
-
-export function ActivityFeed({ events }: { events: StreamEventEnvelope[] }) {
-  const { t } = useApp();
-  const feedRef = useRef<HTMLDivElement>(null);
-  const prevLenRef = useRef(0);
-
-  useEffect(() => {
-    if (events.length > prevLenRef.current && feedRef.current) {
-      feedRef.current.scrollTop = 0;
-    }
-    prevLenRef.current = events.length;
-  }, [events.length]);
-
-  return (
-    <div className="flex flex-col h-full border-l border-border bg-bg">
-      <div className="px-3 py-2 border-b border-border shrink-0">
-        <span className="text-xs font-bold uppercase tracking-wider text-muted">
-          {t("activityfeed.Activity")}
-        </span>
-      </div>
-      <div
-        ref={feedRef}
-        className="flex-1 min-h-0 overflow-y-auto px-3 py-2 space-y-2"
-      >
-        {events.length === 0 ? (
-          <div className="text-muted text-xs py-4 text-center">
-            {t("activityfeed.NoEventsYet")}
-          </div>
-        ) : (
-          events.map((event) => {
-            const isThought = event.stream === "thought";
-            const isAction = event.stream === "action";
-            const isAssistant = event.stream === "assistant";
-            const isMessage = event.stream === "message";
-            const isNewViewer = event.stream === "new_viewer";
-            const source = getEventSource(event);
-            const from = getEventFrom(event);
-            const channelStyle =
-              isMessage || isNewViewer
-                ? (CHANNEL_COLORS[source] ?? null)
-                : null;
-            return (
-              <div
-                key={event.eventId}
-                className={`rounded border px-2 py-1.5 ${
-                  isNewViewer
-                    ? "border-emerald-500/30 bg-emerald-500/5"
-                    : isThought
-                      ? "border-yellow-500/30 bg-yellow-500/5"
-                      : isAction
-                        ? "border-blue-500/30 bg-blue-500/5"
-                        : isAssistant
-                          ? "border-green-500/30 bg-green-500/5"
-                          : channelStyle
-                            ? `${channelStyle.border} ${channelStyle.bg}`
-                            : "border-border"
-                }`}
-              >
-                <div className="flex items-center justify-between">
-                  <span
-                    className={`text-[11px] font-semibold uppercase ${
-                      isNewViewer
-                        ? "text-emerald-400"
-                        : isThought
-                          ? "text-yellow-400"
-                          : isAction
-                            ? "text-blue-400"
-                            : isAssistant
-                              ? "text-green-400"
-                              : channelStyle
-                                ? channelStyle.text
-                                : "text-txt"
-                    }`}
-                  >
-                    {isNewViewer
-                      ? "new viewer"
-                      : isThought
-                        ? "thought"
-                        : isAction
-                          ? "action"
-                          : from
-                            ? `@${from}`
-                            : `[${source}]`}
-                  </span>
-                  <span className="text-[10px] text-muted">
-                    {formatTime(event.ts, { fallback: "" })}
-                  </span>
-                </div>
-                <div
-                  className={`text-[12px] mt-0.5 break-words line-clamp-3 ${
-                    isThought ? "text-yellow-200/70 italic" : "text-txt"
-                  }`}
-                >
-                  {getEventText(event)}
-                </div>
-              </div>
-            );
-          })
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/stream/AvatarPip.tsx

@@ -1,10 +0,0 @@
-import { ChatAvatar } from "../ChatAvatar";
-
-/** PIP avatar overlay — small VRM in bottom-left corner of the main area. */
-export function AvatarPip({ isSpeaking }: { isSpeaking: boolean }) {
-  return (
-    <div className="absolute bottom-3 left-3 z-10 w-[140px] h-[180px] xl:w-[180px] xl:h-[220px] rounded-lg overflow-hidden border border-border/50 bg-bg/60 backdrop-blur-sm shadow-lg pointer-events-none">
-      <ChatAvatar isSpeaking={isSpeaking} />
-    </div>
-  );
-}

package/src/components/stream/ChatContent.tsx

@@ -1,126 +0,0 @@
-import type {
-  ConversationMessage,
-  StreamEventEnvelope,
-} from "@elizaos/app-core/api";
-import { useApp } from "@elizaos/app-core/state";
-import { useEffect, useMemo, useRef } from "react";
-import { CHANNEL_COLORS, getEventSource, getEventText } from "./helpers";
-
-export function ChatContent({
-  events,
-  messages,
-}: {
-  events: StreamEventEnvelope[];
-  messages: ConversationMessage[];
-}) {
-  const { t } = useApp();
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const recentExchanges = useMemo(() => {
-    const exchanges: Array<{
-      id: string;
-      role: "user" | "assistant" | "event";
-      text: string;
-      source?: string;
-      from?: string;
-      ts: number;
-    }> = [];
-
-    // Build lookup from events for username resolution
-    const eventFromLookup = new Map<string, string>();
-    for (const evt of events) {
-      if (evt.stream !== "message") continue;
-      const p = evt.payload as Record<string, unknown>;
-      const text = typeof p.text === "string" ? p.text.trim() : "";
-      const from = typeof p.from === "string" ? p.from : "";
-      if (text && from) eventFromLookup.set(text, from);
-    }
-
-    for (const msg of messages.slice(-8)) {
-      exchanges.push({
-        id: msg.id,
-        role: msg.role,
-        text: msg.text,
-        source: msg.source,
-        from: msg.from ?? eventFromLookup.get(msg.text.trim()),
-        ts: msg.timestamp,
-      });
-    }
-
-    const assistantEvents = events
-      .filter((e) => e.stream === "assistant")
-      .slice(-4);
-    for (const evt of assistantEvents) {
-      const text = getEventText(evt);
-      if (!exchanges.some((e) => e.text === text)) {
-        exchanges.push({
-          id: evt.eventId,
-          role: "event",
-          text,
-          source: getEventSource(evt),
-          ts: evt.ts,
-        });
-      }
-    }
-
-    return exchanges.sort((a, b) => a.ts - b.ts).slice(-10);
-  }, [events, messages]);
-
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (el) el.scrollTop = el.scrollHeight;
-  });
-
-  return (
-    <div
-      ref={scrollRef}
-      className="h-full w-full overflow-y-auto px-5 py-4 space-y-3"
-    >
-      {recentExchanges.length === 0 ? (
-        <div className="flex items-center justify-center h-full text-muted text-sm">
-          {t("chatcontent.WaitingForMessages")}
-        </div>
-      ) : (
-        recentExchanges.map((exchange) => {
-          const channelStyle =
-            exchange.role === "user" && exchange.source
-              ? CHANNEL_COLORS[exchange.source]
-              : undefined;
-          return (
-            <div
-              key={exchange.id}
-              className={`flex ${
-                exchange.role === "assistant" || exchange.role === "event"
-                  ? "justify-end"
-                  : "justify-start"
-              }`}
-            >
-              <div
-                className={`max-w-[75%] rounded-lg px-4 py-2.5 ${
-                  exchange.role === "assistant" || exchange.role === "event"
-                    ? "bg-accent/20 text-txt-strong"
-                    : channelStyle
-                      ? `${channelStyle.bg} text-txt border ${channelStyle.border}`
-                      : "bg-bg-muted text-txt"
-                }`}
-              >
-                <div
-                  className={`text-[10px] uppercase mb-1 ${channelStyle?.text ?? "text-muted"}`}
-                >
-                  {exchange.role === "user"
-                    ? exchange.from
-                      ? `@${exchange.from}`
-                      : (exchange.source ?? "viewer")
-                    : "agent"}
-                </div>
-                <div className="text-sm leading-relaxed break-words">
-                  {exchange.text}
-                </div>
-              </div>
-            </div>
-          );
-        })
-      )}
-    </div>
-  );
-}

package/src/components/stream/ChatTicker.tsx

@@ -1,55 +0,0 @@
-import type { StreamEventEnvelope } from "@elizaos/app-core/api";
-import { useApp } from "@elizaos/app-core/state";
-import { useMemo } from "react";
-import { CHANNEL_COLORS } from "./helpers";
-
-export function ChatTicker({ events }: { events: StreamEventEnvelope[] }) {
-  const { t } = useApp();
-  // Build ticker entries directly from inbound message events (retake, discord, etc.)
-  const recent = useMemo(() => {
-    const entries: Array<{
-      id: string;
-      from: string;
-      text: string;
-      source: string;
-    }> = [];
-    for (const evt of events) {
-      if (evt.stream !== "message") continue;
-      const payload = evt.payload as Record<string, unknown>;
-      if (payload.direction !== "inbound") continue;
-      const text = typeof payload.text === "string" ? payload.text.trim() : "";
-      const from =
-        (typeof payload.displayName === "string" &&
-          payload.displayName.trim()) ||
-        (typeof payload.from === "string" && payload.from.trim()) ||
-        "";
-      const source =
-        typeof payload.source === "string" ? payload.source : "retake";
-      if (text) {
-        entries.push({ id: evt.eventId, from: from || "viewer", text, source });
-      }
-    }
-    return entries.slice(-10);
-  }, [events]);
-
-  if (recent.length === 0) return null;
-
-  return (
-    <div className="px-4 py-1.5 bg-bg border-t border-border overflow-hidden shrink-0">
-      <div className="flex items-center gap-4 text-xs text-muted overflow-x-auto whitespace-nowrap scrollbar-hide">
-        <span className="text-[10px] uppercase tracking-wider text-muted shrink-0">
-          {t("chatticker.chat")}
-        </span>
-        {recent.map((entry) => {
-          const color = CHANNEL_COLORS[entry.source]?.text;
-          return (
-            <span key={entry.id} className="shrink-0">
-              <span className={color ?? "text-txt"}>@{entry.from}</span>
-              <span className="text-txt">: {entry.text.slice(0, 80)}</span>
-            </span>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/src/components/stream/IdleContent.tsx

@@ -1,73 +0,0 @@
-import type { StreamEventEnvelope } from "@elizaos/app-core/api";
-import { formatTime } from "@elizaos/app-core/components";
-import { useApp } from "@elizaos/app-core/state";
-import { useMemo } from "react";
-import { getEventText } from "./helpers";
-
-export function IdleContent({ events }: { events: StreamEventEnvelope[] }) {
-  const { t } = useApp();
-  const latestThought = useMemo(
-    () =>
-      [...events]
-        .reverse()
-        .find((e) => e.stream === "assistant" || e.stream === "evaluator"),
-    [events],
-  );
-
-  const recentActions = useMemo(
-    () =>
-      events
-        .filter(
-          (e) =>
-            e.stream === "action" ||
-            e.stream === "tool" ||
-            e.stream === "provider",
-        )
-        .slice(-6),
-    [events],
-  );
-
-  return (
-    <div className="h-full w-full flex flex-col justify-center px-8 py-6">
-      {latestThought ? (
-        <div className="mb-5">
-          <div className="text-[10px] uppercase text-muted mb-1">
-            {t("idlecontent.Thought")}
-          </div>
-          <div className="text-base text-txt italic leading-relaxed">
-            "{getEventText(latestThought).slice(0, 250)}"
-          </div>
-        </div>
-      ) : (
-        <div className="text-muted text-base mb-5">
-          {t("idlecontent.AgentIsIdleAwai")}
-        </div>
-      )}
-      {recentActions.length > 0 && (
-        <div>
-          <div className="text-[10px] uppercase text-muted mb-2">
-            {t("idlecontent.RecentActions")}
-          </div>
-          <div className="space-y-1.5">
-            {recentActions.map((a) => (
-              <div
-                key={a.eventId}
-                className="flex items-center gap-2 text-[12px]"
-              >
-                <span className="text-ok font-mono">
-                  {a.stream ?? "action"}
-                </span>
-                <span className="text-txt truncate">
-                  {getEventText(a).slice(0, 80)}
-                </span>
-                <span className="text-[10px] text-muted ml-auto shrink-0">
-                  {formatTime(a.ts, { fallback: "" })}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}