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

package/src/components/ChatMessage.tsx

@@ -1,448 +0,0 @@
-/**
- * Enhanced chat message component with actions and better UX.
- */
-
-import type { ConversationMessage } from "@elizaos/app-core/api";
-import { useTimeout } from "@elizaos/app-core/hooks";
-import { useApp } from "@elizaos/app-core/state";
-import { Button } from "@elizaos/ui";
-import { Check, Copy, Pencil, Trash2, Volume2 } from "lucide-react";
-import {
-  type KeyboardEvent,
-  type TouchEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { MessageContent } from "./MessageContent";
-
-interface ChatMessageProps {
-  message: ConversationMessage;
-  isGrouped?: boolean;
-  agentName?: string;
-  agentAvatarSrc?: string | null;
-  onCopy?: (text: string) => void;
-  onSpeak?: (messageId: string, text: string) => void;
-  onEdit?: (messageId: string, text: string) => Promise<boolean> | boolean;
-  onDelete?: (messageId: string) => void;
-}
-
-export function ChatMessage({
-  message,
-  isGrouped = false,
-  agentName = "Agent",
-  onCopy,
-  onSpeak,
-  onEdit,
-  onDelete,
-}: ChatMessageProps) {
-  const { setTimeout } = useTimeout();
-
-  const { copyToClipboard, t } = useApp();
-  const [copied, setCopied] = useState(false);
-  const [showActions, setShowActions] = useState(false);
-  const [supportsHover, setSupportsHover] = useState(() =>
-    typeof window !== "undefined" && typeof window.matchMedia === "function"
-      ? window.matchMedia("(hover: hover) and (pointer: fine)").matches
-      : true,
-  );
-  const [isEditing, setIsEditing] = useState(false);
-  const [draftText, setDraftText] = useState(message.text);
-  const [savingEdit, setSavingEdit] = useState(false);
-  const articleRef = useRef<HTMLElement | null>(null);
-  const editTextareaRef = useRef<HTMLTextAreaElement | null>(null);
-  const isUser = message.role === "user";
-  const canEdit =
-    isUser &&
-    typeof onEdit === "function" &&
-    message.source !== "local_command" &&
-    !message.id.startsWith("temp-");
-  const canPlay =
-    !isUser && typeof onSpeak === "function" && message.text.trim();
-
-  const handleCopy = useCallback(() => {
-    if (onCopy) {
-      onCopy(message.text);
-    } else {
-      void copyToClipboard(message.text);
-    }
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }, [copyToClipboard, message.text, onCopy, setTimeout]);
-
-  const handleStartEditing = useCallback(() => {
-    if (!canEdit || savingEdit) return;
-    setDraftText(message.text);
-    setIsEditing(true);
-  }, [canEdit, message.text, savingEdit]);
-
-  const handleCancelEditing = useCallback(() => {
-    if (savingEdit) return;
-    setDraftText(message.text);
-    setIsEditing(false);
-  }, [message.text, savingEdit]);
-
-  const handleSaveEdit = useCallback(async () => {
-    if (!onEdit) return;
-    const nextText = draftText.trim();
-    if (!nextText) return;
-    if (nextText === message.text.trim()) {
-      setDraftText(message.text);
-      setIsEditing(false);
-      return;
-    }
-
-    setSavingEdit(true);
-    try {
-      const saved = await onEdit(message.id, nextText);
-      if (saved !== false) {
-        setIsEditing(false);
-      }
-    } finally {
-      setSavingEdit(false);
-    }
-  }, [draftText, message.id, message.text, onEdit]);
-
-  const handleTapReveal = useCallback(
-    (event: TouchEvent<HTMLElement>) => {
-      if (supportsHover || isEditing) return;
-      const target = event.target as HTMLElement | null;
-      if (target?.closest("button, a, textarea, input")) {
-        return;
-      }
-      setShowActions((prev) => !prev);
-    },
-    [isEditing, supportsHover],
-  );
-
-  const handleEditKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLTextAreaElement>) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        handleCancelEditing();
-        return;
-      }
-      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
-        event.preventDefault();
-        void handleSaveEdit();
-      }
-    },
-    [handleCancelEditing, handleSaveEdit],
-  );
-
-  useEffect(() => {
-    if (!isEditing) {
-      setDraftText(message.text);
-      return;
-    }
-    const textarea = editTextareaRef.current;
-    if (!textarea) return;
-    textarea.focus();
-    textarea.setSelectionRange(textarea.value.length, textarea.value.length);
-  }, [isEditing, message.text]);
-
-  useEffect(() => {
-    if (
-      typeof window === "undefined" ||
-      typeof window.matchMedia !== "function"
-    ) {
-      return;
-    }
-
-    const mediaQuery = window.matchMedia("(hover: hover) and (pointer: fine)");
-    const syncSupportsHover = () => {
-      setSupportsHover(mediaQuery.matches);
-      if (mediaQuery.matches) {
-        setShowActions(false);
-      }
-    };
-    syncSupportsHover();
-
-    if (typeof mediaQuery.addEventListener === "function") {
-      mediaQuery.addEventListener("change", syncSupportsHover);
-      return () => mediaQuery.removeEventListener("change", syncSupportsHover);
-    }
-
-    mediaQuery.addListener(syncSupportsHover);
-    return () => mediaQuery.removeListener(syncSupportsHover);
-  }, []);
-
-  useEffect(() => {
-    if (supportsHover || !showActions || typeof document === "undefined") {
-      return;
-    }
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target;
-      if (!(target instanceof Node)) {
-        setShowActions(false);
-        return;
-      }
-      if (!articleRef.current?.contains(target)) {
-        setShowActions(false);
-      }
-    };
-
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => document.removeEventListener("pointerdown", handlePointerDown);
-  }, [showActions, supportsHover]);
-
-  const actionsVisible = showActions;
-
-  return (
-    <article
-      ref={articleRef}
-      className={`flex items-start gap-2 sm:gap-3 ${isUser ? "justify-end" : "justify-start"} ${isGrouped ? "mt-1" : "mt-4"}`}
-      data-testid="chat-message"
-      data-role={message.role}
-      onMouseEnter={supportsHover ? () => setShowActions(true) : undefined}
-      onMouseLeave={supportsHover ? () => setShowActions(false) : undefined}
-      onTouchEnd={handleTapReveal}
-      aria-label={`${isUser ? "Your" : agentName} message`}
-    >
-      {/* Message Bubble */}
-      <div
-        className={`max-w-[88%] sm:max-w-[80%] min-w-0 ${isUser ? "mr-1" : ""}`}
-      >
-        {/* Message Content */}
-        <div
-          className={`relative group px-4 py-2.5 text-[15px] leading-[1.7] whitespace-pre-wrap break-words rounded-2xl ${
-            isUser
-              ? "bg-accent text-accent-fg rounded-br-md"
-              : "bg-bg-accent border border-border text-txt rounded-bl-md"
-          }`}
-          style={{ fontFamily: "var(--font-chat)" }}
-        >
-          {isEditing ? (
-            <div className="space-y-3">
-              <textarea
-                ref={editTextareaRef}
-                value={draftText}
-                onChange={(event) => setDraftText(event.target.value)}
-                onKeyDown={handleEditKeyDown}
-                className="w-full min-h-[110px] rounded-xl border border-white/20 bg-black/10 px-3 py-2 text-[15px] leading-[1.7] text-inherit outline-none focus:border-white/40"
-                style={{ fontFamily: "var(--font-chat)" }}
-                aria-label="Edit message"
-                disabled={savingEdit}
-              />
-              <div className="flex items-center justify-end gap-2">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleCancelEditing}
-                  disabled={savingEdit}
-                  className="h-8 px-3 text-xs text-inherit/80 hover:bg-black/10"
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => void handleSaveEdit()}
-                  disabled={
-                    savingEdit ||
-                    !draftText.trim() ||
-                    draftText.trim() === message.text.trim()
-                  }
-                  className="h-8 px-3 text-xs border-white/25 bg-black/10 hover:bg-black/15"
-                >
-                  {savingEdit ? "Saving..." : "Save and resend"}
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <MessageContent message={message} />
-          )}
-
-          {/* Stream interruption indicator */}
-          {!isUser && message.interrupted && (
-            <div className="mt-2 pt-2 border-t border-danger/30">
-              <span className="text-xs text-danger">
-                {t("chatmessage.ResponseInterrupte")}
-              </span>
-            </div>
-          )}
-
-          {/* Message Actions */}
-          {!isEditing && (
-            <div
-              className={`absolute ${isUser ? "left-0 -translate-x-full" : "right-0 translate-x-full"} top-0 flex items-center gap-1 p-1 transition-opacity duration-200 ${
-                actionsVisible ? "opacity-100" : "pointer-events-none opacity-0"
-              }`}
-            >
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={(event) => {
-                  event?.stopPropagation?.();
-                  handleCopy();
-                }}
-                className="w-7 h-7 rounded-md text-muted hover:text-txt hover:bg-bg-hover transition-colors"
-                title={copied ? "Copied!" : "Copy message"}
-                aria-label={copied ? "Copied to clipboard" : "Copy message"}
-              >
-                {copied ? (
-                  <Check className="w-3.5 h-3.5 text-ok" />
-                ) : (
-                  <Copy className="w-3.5 h-3.5" />
-                )}
-              </Button>
-
-              {canPlay && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={(event) => {
-                    event?.stopPropagation?.();
-                    onSpeak?.(message.id, message.text);
-                  }}
-                  className="w-7 h-7 rounded-md text-muted hover:text-txt hover:bg-bg-hover transition-colors"
-                  title="Play message"
-                  aria-label="Play message"
-                >
-                  <Volume2 className="w-3.5 h-3.5" />
-                </Button>
-              )}
-
-              {canEdit && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={(event) => {
-                    event?.stopPropagation?.();
-                    handleStartEditing();
-                  }}
-                  className="w-7 h-7 rounded-md text-muted hover:text-txt hover:bg-bg-hover transition-colors"
-                  title="Edit message"
-                  aria-label="Edit message"
-                >
-                  <Pencil className="w-3.5 h-3.5" />
-                </Button>
-              )}
-
-              {onDelete && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={(event) => {
-                    event?.stopPropagation?.();
-                    onDelete(message.id);
-                  }}
-                  className="w-7 h-7 rounded-md text-muted hover:text-danger hover:bg-danger/10 transition-colors"
-                  title={t("chatmessage.DeleteMessage")}
-                  aria-label="Delete message"
-                >
-                  <Trash2 className="w-3.5 h-3.5" />
-                </Button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </article>
-  );
-}
-
-/* ── Typing Indicator ────────────────────────────────────────────────── */
-
-export function TypingIndicator({
-  agentName,
-  agentAvatarSrc,
-}: {
-  agentName: string;
-  agentAvatarSrc?: string | null;
-}) {
-  const agentInitial = agentName.trim().charAt(0).toUpperCase() || "A";
-
-  return (
-    <div className="flex items-start gap-2 sm:gap-3 mt-4">
-      <div className="w-8 h-8 shrink-0 rounded-full overflow-hidden border border-border bg-bg-hover shadow-sm">
-        {agentAvatarSrc ? (
-          <img
-            src={agentAvatarSrc}
-            alt={`${agentName} avatar`}
-            className="w-full h-full object-cover"
-          />
-        ) : (
-          <div className="w-full h-full flex items-center justify-center text-[11px] font-bold text-txt bg-accent-subtle">
-            {agentInitial}
-          </div>
-        )}
-      </div>
-
-      <div className="max-w-[88%] sm:max-w-[80%] min-w-0">
-        <div className="text-[12px] font-semibold text-txt mb-1">
-          {agentName}
-        </div>
-        <div className="px-4 py-3 bg-bg-accent border border-border rounded-2xl rounded-bl-md">
-          <div className="flex gap-1">
-            <span
-              className="w-2 h-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]"
-              style={{ animationDelay: "0ms" }}
-            />
-            <span
-              className="w-2 h-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]"
-              style={{ animationDelay: "200ms" }}
-            />
-            <span
-              className="w-2 h-2 rounded-full bg-muted-strong animate-[typing-bounce_1.2s_ease-in-out_infinite]"
-              style={{ animationDelay: "400ms" }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── Empty State ─────────────────────────────────────────────────────── */
-
-export function ChatEmptyState({ agentName }: { agentName: string }) {
-  const { t } = useApp();
-  return (
-    <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
-      <div className="w-16 h-16 rounded-2xl bg-accent-subtle flex items-center justify-center mb-4">
-        <svg
-          width="32"
-          height="32"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="text-txt"
-          aria-label="Chat icon"
-        >
-          <title>{t("nav.chat")}</title>
-          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-        </svg>
-      </div>
-      <h3 className="text-lg font-semibold text-txt-strong mb-2">
-        {t("chatmessage.StartAConversation")}
-      </h3>
-      <p
-        className="text-sm text-muted max-w-sm mb-6"
-        style={{ fontFamily: "var(--font-chat)" }}
-      >
-        {t("chatmessage.SendAMessageTo")} {agentName}{" "}
-        {t("chatmessage.toBeginChattingY")}
-      </p>
-      <div className="flex flex-wrap justify-center gap-2">
-        {["Hello!", "How are you?", "Tell me a joke", "Help me with..."].map(
-          (suggestion) => (
-            <Button
-              key={suggestion}
-              variant="outline"
-              size="sm"
-              className="px-3 py-1.5 h-7 text-xs rounded-full text-muted border-border bg-bg hover:border-accent hover:text-txt transition-colors"
-            >
-              {suggestion}
-            </Button>
-          ),
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/ChatModalView.test.tsx

@@ -1,118 +0,0 @@
-// @vitest-environment jsdom
-import * as AppContext from "@elizaos/app-core/state";
-import React from "react";
-import { act, create, type ReactTestRenderer } from "react-test-renderer";
-import { describe, expect, it, vi } from "vitest";
-
-import { ChatModalView } from "./ChatModalView";
-
-vi.mock("@elizaos/app-core/state", () => ({
-  useApp: vi.fn(),
-}));
-
-vi.mock("./ChatView.js", () => ({
-  ChatView: ({ variant }: { variant?: string }) =>
-    React.createElement("div", {
-      "data-testid": "chat-view",
-      "data-variant": variant,
-    }),
-}));
-
-vi.mock("./ConversationsSidebar.js", () => ({
-  ConversationsSidebar: ({
-    mobile,
-    variant,
-  }: {
-    mobile?: boolean;
-    variant?: string;
-  }) =>
-    React.createElement("div", {
-      "data-testid": "conversations-sidebar",
-      "data-mobile": mobile ?? false,
-      "data-variant": variant ?? "default",
-    }),
-}));
-
-function mockMatchMedia(matches: boolean) {
-  Object.defineProperty(window, "matchMedia", {
-    writable: true,
-    value: vi.fn().mockImplementation(() => ({
-      matches,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-    })),
-  });
-}
-
-describe("ChatModalView", () => {
-  it("reveals the desktop conversations rail in companion dock mode", async () => {
-    mockMatchMedia(false);
-    // @ts-expect-error - test only relies on the active conversation field.
-    vi.spyOn(AppContext, "useApp").mockReturnValue({
-      activeConversationId: null,
-      conversations: [],
-      unreadConversations: new Set(),
-      handleNewConversation: vi.fn(),
-      handleSelectConversation: vi.fn(),
-      handleDeleteConversation: vi.fn(),
-      handleRenameConversation: vi.fn(),
-      t: (key: string) => key,
-    });
-
-    let testRenderer: ReactTestRenderer | null = null;
-    await act(async () => {
-      testRenderer = create(
-        <ChatModalView variant="companion-dock" showSidebar />,
-      );
-    });
-
-    if (!testRenderer) {
-      throw new Error("Failed to render ChatModalView");
-    }
-
-    const sidebarShell = testRenderer.root.findByProps({
-      "data-chat-game-sidebar": true,
-    });
-    expect(String(sidebarShell.props.className)).toContain("md:flex");
-  });
-
-  it("renders a mobile conversations overlay when the companion rail is toggled on a narrow viewport", async () => {
-    mockMatchMedia(true);
-    // @ts-expect-error - test only relies on the active conversation field.
-    vi.spyOn(AppContext, "useApp").mockReturnValue({
-      activeConversationId: null,
-      conversations: [],
-      unreadConversations: new Set(),
-      handleNewConversation: vi.fn(),
-      handleSelectConversation: vi.fn(),
-      handleDeleteConversation: vi.fn(),
-      handleRenameConversation: vi.fn(),
-      t: (key: string) => key,
-    });
-
-    let testRenderer: ReactTestRenderer | null = null;
-    await act(async () => {
-      testRenderer = create(
-        <ChatModalView
-          variant="companion-dock"
-          showSidebar
-          onSidebarClose={vi.fn()}
-        />,
-      );
-    });
-
-    if (!testRenderer) {
-      throw new Error("Failed to render ChatModalView");
-    }
-
-    const sidebarInstances = testRenderer.root.findAllByProps({
-      "data-testid": "conversations-sidebar",
-    });
-
-    expect(
-      sidebarInstances.some((node) => node.props["data-mobile"] === true),
-    ).toBe(true);
-  });
-});

package/src/components/ChatModalView.tsx

@@ -1,125 +0,0 @@
-import { useRenderGuard } from "@elizaos/app-core/hooks";
-import { useApp } from "@elizaos/app-core/state";
-import { memo, useEffect, useState } from "react";
-import { ChatView } from "./ChatView.js";
-import { ConversationsSidebar } from "./ConversationsSidebar.js";
-
-const CHAT_MODAL_NARROW_BREAKPOINT = 768;
-
-function useIsNarrowViewport(): boolean {
-  const [isNarrow, setIsNarrow] = useState(() =>
-    typeof window !== "undefined"
-      ? window.innerWidth <= CHAT_MODAL_NARROW_BREAKPOINT
-      : false,
-  );
-
-  useEffect(() => {
-    if (
-      typeof window === "undefined" ||
-      typeof window.matchMedia !== "function"
-    ) {
-      return;
-    }
-    const mediaQuery = window.matchMedia(
-      `(max-width: ${CHAT_MODAL_NARROW_BREAKPOINT}px)`,
-    );
-    const sync = () => {
-      setIsNarrow(mediaQuery.matches);
-    };
-    sync();
-
-    if (typeof mediaQuery.addEventListener === "function") {
-      mediaQuery.addEventListener("change", sync);
-      return () => mediaQuery.removeEventListener("change", sync);
-    }
-
-    mediaQuery.addListener(sync);
-    return () => mediaQuery.removeListener(sync);
-  }, []);
-
-  return isNarrow;
-}
-
-type ChatModalLayoutVariant = "full-overlay" | "companion-dock";
-
-interface ChatModalViewProps {
-  variant?: ChatModalLayoutVariant;
-  onRequestClose?: () => void;
-  showSidebar?: boolean;
-  onSidebarClose?: () => void;
-}
-
-export const ChatModalView = memo(function ChatModalView({
-  variant = "full-overlay",
-  showSidebar = false,
-  onSidebarClose,
-}: ChatModalViewProps) {
-  useRenderGuard("ChatModalView");
-  const { activeConversationId } = useApp();
-
-  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-  const isNarrow = useIsNarrowViewport();
-  const isCompanionDock = variant === "companion-dock";
-  const companionSidebarVisible = isCompanionDock && showSidebar && !isNarrow;
-
-  useEffect(() => {
-    if (!isNarrow) {
-      setMobileSidebarOpen(false);
-    }
-  }, [isNarrow]);
-
-  useEffect(() => {
-    if (activeConversationId) {
-      setMobileSidebarOpen(false);
-    }
-  }, [activeConversationId]);
-
-  return (
-    <div
-      className={
-        isCompanionDock
-          ? "absolute inset-0 z-10 flex flex-col bg-transparent px-4"
-          : "absolute inset-[10vh_10vw] z-[100] flex flex-col rounded-2xl bg-black/60"
-      }
-      data-chat-game-overlay={!isCompanionDock || undefined}
-      data-chat-game-dock={isCompanionDock || undefined}
-    >
-      <div
-        className={`flex-1 flex flex-col min-h-0 relative rounded-2xl bg-transparent ${
-          isCompanionDock ? "overflow-visible" : "overflow-hidden"
-        }`}
-        data-chat-game-shell
-      >
-        {isCompanionDock && showSidebar && isNarrow && (
-          <div className="absolute inset-0 z-20 bg-black/60 backdrop-blur-sm">
-            <ConversationsSidebar mobile onClose={onSidebarClose} />
-          </div>
-        )}
-        <div className="flex-1 flex min-h-0">
-          <aside
-            className={`w-[276px] shrink-0 border-r border-white/10 flex flex-col bg-black/20 ${
-              mobileSidebarOpen
-                ? "block"
-                : companionSidebarVisible
-                  ? "hidden md:flex"
-                  : isCompanionDock
-                    ? "hidden"
-                    : "hidden md:flex"
-            }`}
-            data-chat-game-sidebar
-          >
-            <ConversationsSidebar variant="game-modal" />
-          </aside>
-          <section
-            className={`flex-1 flex flex-col min-w-0 bg-transparent relative ${
-              isCompanionDock ? "overflow-visible" : ""
-            }`}
-            data-chat-game-thread
-          >
-            <ChatView variant="game-modal" />
-          </section>
-        </div>
-      </div>
-    </div>
-  );
-});