@elizaos/client 1.5.5-alpha.10

package/src/routes/chat.tsx

@@ -0,0 +1,128 @@
+import ChatComponent from '@/components/chat';
+import { Button } from '@/components/ui/button';
+import { useAgentManagement } from '@/hooks/use-agent-management';
+import { useAgent } from '@/hooks/use-query-hooks';
+import clientLogger from '@/lib/logger';
+import {
+  type Agent,
+  ChannelType,
+  AgentStatus as CoreAgentStatusEnum,
+  type UUID,
+} from '@elizaos/core';
+import { Loader2, Play, Settings } from 'lucide-react';
+import { useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router';
+import type { AgentWithStatus } from '../types';
+
+/**
+ * Displays the agent chat interface with an optional details sidebar in a resizable layout.
+ *
+ * Renders the chat panel for a specific agent, and conditionally shows a sidebar with agent details based on user interaction. If no agent ID is present in the URL, displays a "No data." message.
+ */
+export default function AgentRoute() {
+  // useParams will include agentId and optionally channelId for /chat/:agentId/:channelId routes
+  const { agentId, channelId } = useParams<{ agentId: UUID; channelId?: UUID }>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    clientLogger.info('[AgentRoute] Component mounted/updated', { agentId, channelId });
+    return () => {
+      clientLogger.info('[AgentRoute] Component unmounted', { agentId, channelId });
+    };
+  }, [agentId, channelId]);
+
+  const { data: agentDataResponse, isLoading: isLoadingAgent } = useAgent(agentId);
+  const { startAgent, isAgentStarting } = useAgentManagement();
+
+  const agentFromHook: Agent | undefined = agentDataResponse?.data
+    ? ({
+        ...(agentDataResponse.data as AgentWithStatus),
+        status:
+          agentDataResponse.data.status === 'active'
+            ? CoreAgentStatusEnum.ACTIVE
+            : agentDataResponse.data.status === 'inactive'
+              ? CoreAgentStatusEnum.INACTIVE
+              : CoreAgentStatusEnum.INACTIVE,
+        username: agentDataResponse.data.username || agentDataResponse.data.name || 'Unknown',
+        bio: agentDataResponse.data.bio || '',
+        messageExamples: agentDataResponse.data.messageExamples || [],
+        postExamples: agentDataResponse.data.postExamples || [],
+        topics: agentDataResponse.data.topics || [],
+        adjectives: agentDataResponse.data.adjectives || [],
+        knowledge: agentDataResponse.data.knowledge || [],
+        plugins: agentDataResponse.data.plugins || [],
+        settings: agentDataResponse.data.settings || {},
+        secrets: (agentDataResponse.data as any).secrets || {},
+        style: agentDataResponse.data.style || {},
+        templates: agentDataResponse.data.templates || {},
+        enabled:
+          typeof agentDataResponse.data.enabled === 'boolean'
+            ? agentDataResponse.data.enabled
+            : true,
+        createdAt:
+          typeof agentDataResponse.data.createdAt === 'number'
+            ? agentDataResponse.data.createdAt
+            : Date.now(),
+        updatedAt:
+          typeof agentDataResponse.data.updatedAt === 'number'
+            ? agentDataResponse.data.updatedAt
+            : Date.now(),
+      } as Agent)
+    : undefined;
+
+  if (!agentId) return <div className="p-4">Agent ID not provided.</div>;
+  if (isLoadingAgent || !agentFromHook)
+    return (
+      <div className="p-4 flex items-center justify-center h-full">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+
+  const isActive = agentFromHook.status === CoreAgentStatusEnum.ACTIVE;
+  const isStarting = isAgentStarting(agentFromHook.id);
+
+  const handleStartAgent = () => {
+    if (agentFromHook) {
+      startAgent(agentFromHook);
+    }
+  };
+
+  if (!isActive) {
+    clientLogger.info('[AgentRoute] Agent is not active, rendering inactive state UI', {
+      agentName: agentFromHook?.name,
+    });
+    return (
+      <div className="flex flex-col items-center justify-center h-full w-full p-8 text-center">
+        <h2 className="text-2xl font-semibold mb-4">{agentFromHook.name} is not active.</h2>
+        <p className="text-muted-foreground mb-6">Press the button below to start this agent.</p>
+        <div className="flex gap-3">
+          <Button onClick={() => navigate(`/settings/${agentId}`)} variant="outline" size="lg">
+            <Settings className="h-5 w-5" />
+          </Button>
+          <Button onClick={handleStartAgent} disabled={isStarting} size="lg">
+            {isStarting ? (
+              <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+            ) : (
+              <Play className="mr-2 h-5 w-5" />
+            )}
+            {isStarting ? 'Starting Agent...' : 'Start Agent'}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  clientLogger.info('[AgentRoute] Agent is active, rendering chat for DM', {
+    agentName: agentFromHook?.name,
+    dmChannelIdFromRoute: channelId,
+  });
+
+  return (
+    <ChatComponent
+      key={`${agentId}-${channelId || 'no-dm-channel'}`}
+      chatType={ChannelType.DM}
+      contextId={agentId}
+      initialDmChannelId={channelId}
+    />
+  );
+}

package/src/routes/createAgent.tsx

@@ -0,0 +1,13 @@
+import AgentCreator from '@/components/agent-creator';
+
+export default function AgentCreatorRoute() {
+  return (
+    <div className="h-full w-full overflow-y-auto">
+      <div className="min-h-full flex w-full justify-center px-4 sm:px-6 py-4">
+        <div className="w-full max-w-4xl min-w-0">
+          <AgentCreator />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/routes/group-new.tsx

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+// import { CreateGroupDialog } from '@/components/create-group-dialog'; // To be removed
+import GroupPanel from '@/components/group-panel'; // Import GroupPanel
+// import { useAgentsWithDetails, useServers } from '@/hooks/use-query-hooks'; // No longer needed if GroupPanel fetches its own agents
+import type { UUID } from '@elizaos/core';
+
+export default function GroupNew() {
+  const navigate = useNavigate();
+  // const [open, setOpen] = useState(true); // GroupPanel typically manages its own visibility or is used as a page component
+  // const { data: serversData } = useServers();
+  // const { data: agentsData, isLoading: isLoadingAgents } = useAgentsWithDetails(); // GroupPanel fetches its own agents
+  // const [selectedServerId, setSelectedServerId] = useState<UUID | null>(null); // GroupPanel will use DEFAULT_SERVER_ID
+
+  // useEffect(() => {
+  //   // Use the first available server or create one if needed
+  //   if (serversData?.data?.servers && serversData.data.servers.length > 0) {
+  //     setSelectedServerId(serversData.data.servers[0].id);
+  //   }
+  // }, [serversData]);
+
+  // const handleOpenChange = (open: boolean) => {
+  //   setOpen(open);
+  //   if (!open) {
+  //     // Navigate back to home when dialog is closed
+  //     navigate('/');
+  //   }
+  // };
+
+  // if (!selectedServerId) { // GroupPanel handles server ID internally or gets it via props if needed for specific server contexts
+  //   return (
+  //     <div className="flex items-center justify-center h-screen">
+  //       <p>Loading servers...</p>
+  //     </div>
+  //   );
+  // }
+
+  return (
+    // <CreateGroupDialog open={open} onOpenChange={handleOpenChange} serverId={selectedServerId} />
+    // Render GroupPanel directly as the route's content
+    // GroupPanel will handle its own logic for fetching serverId (default) or if it were to be passed.
+    <div className="pt-4 md:pt-8">
+      <GroupPanel
+        // agents={agents} // Removed prop
+        onClose={() => navigate(-1)} // Navigate back on close
+        // channelId is undefined, so it's in "create" mode
+      />
+    </div>
+  );
+}

package/src/routes/group.tsx

@@ -0,0 +1,29 @@
+import ChatComponent from '@/components/chat';
+import { ChannelType, validateUuid, type UUID } from '@elizaos/core';
+import { useParams, useSearchParams } from 'react-router-dom';
+
+export default function GroupRoute() {
+  const { channelId: channelIdFromPath } = useParams<{ channelId: string }>();
+  const [searchParams] = useSearchParams();
+  const serverIdFromQuery = searchParams.get('serverId');
+
+  const channelId = validateUuid(channelIdFromPath);
+  const serverId = validateUuid(serverIdFromQuery || '');
+
+  if (!channelId || !serverId) {
+    return (
+      <div className="flex flex-1 justify-center items-center">
+        <p>Missing channel or server information.</p>
+      </div>
+    );
+  }
+
+  return (
+    <ChatComponent
+      key={channelId}
+      chatType={ChannelType.GROUP}
+      contextId={channelId as UUID}
+      serverId={serverId as UUID}
+    />
+  );
+}

package/src/routes/home.tsx

@@ -0,0 +1,218 @@
+import AgentCard from '@/components/agent-card';
+import GroupCard from '@/components/group-card';
+import GroupPanel from '@/components/group-panel';
+import ProfileOverlay from '@/components/profile-overlay';
+import { useAgentsWithDetails, useChannels, useServers } from '@/hooks/use-query-hooks';
+import clientLogger from '@/lib/logger';
+import { type Agent, type UUID, ChannelType as CoreChannelType, AgentStatus } from '@elizaos/core';
+import type { MessageChannel, MessageServer } from '@/types';
+import { Plus } from 'lucide-react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '../components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
+import { Separator } from '@/components/ui/separator';
+
+/**
+ * Renders the main dashboard for managing agents and groups, providing interactive controls for viewing, starting, messaging, and configuring agents, as well as creating and editing groups.
+ *
+ * Displays lists of agents and groups with status indicators, action buttons, and overlays for detailed views and settings. Handles loading and error states, and supports navigation to chat and settings pages.
+ */
+export default function Home() {
+  const { data: agentsData, isLoading, isError, error } = useAgentsWithDetails();
+  const navigate = useNavigate();
+
+  // Extract agents properly from the response
+  const agents = useMemo(() => agentsData?.agents || [], [agentsData]);
+  const activeAgentsCount = agents.filter((a) => a.status === AgentStatus.ACTIVE).length;
+
+  const { data: serversData } = useServers() as {
+    data: { data: { servers: MessageServer[] } } | undefined;
+  };
+  const servers = serversData?.data?.servers || [];
+
+  const [isOverlayOpen, setOverlayOpen] = useState(false);
+  const [isGroupPanelOpen, setIsGroupPanelOpen] = useState(false);
+  const [selectedAgent, setSelectedAgent] = useState<Partial<Agent> | null>(null);
+  const [selectedGroupId, setSelectedGroupId] = useState<UUID | null>(null);
+  const [activeTab, setActiveTab] = useState('agents');
+
+  const closeOverlay = () => {
+    setSelectedAgent(null);
+    setOverlayOpen(false);
+  };
+
+  const handleNavigateToDm = async (agent: Partial<Agent>, forceNew: boolean) => {
+    if (!agent.id) return;
+    // Navigate directly to agent chat - DM channel will be created automatically with default server
+    navigate(`/chat/${agent.id}`, { state: { forceNew } });
+  };
+
+  const handleCreateGroup = () => {
+    navigate('/group/new');
+  };
+
+  useEffect(() => {
+    clientLogger.info('[Home] Component mounted/re-rendered. Key might have changed.');
+    // You might want to trigger data re-fetching here if it's not automatic
+    // e.g., queryClient.invalidateQueries(['agents']);
+  }, []); // Empty dependency array means this runs on mount and when key changes
+
+  return (
+    <>
+      <div className="flex-1 w-full overflow-y-auto bg-background">
+        <div className="flex flex-col w-full h-full">
+          <Tabs
+            value={activeTab}
+            onValueChange={setActiveTab}
+            className="w-full h-full flex flex-col"
+          >
+            <div className="w-full">
+              <div className="w-full md:max-w-4xl mx-auto px-6 pt-6 pb-2">
+                <div className="flex justify-between items-center mb-3">
+                  <TabsList className="h-auto p-0 bg-transparent border-0 border-b-0 gap-2 w-auto">
+                    <TabsTrigger
+                      value="agents"
+                      className="relative rounded-full data-[state=active]:border-b-0 data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:font-bold cursor-pointer text-lg py-1"
+                    >
+                      Agents
+                      <span
+                        className={`
+                          absolute -top-2.5 right-0 inline-flex items-center justify-center h-5 w-5 rounded-full bg-blue-600 text-white text-[8px] font-semibold border border-black
+                          transition-all duration-300 ease-in-out
+                          ${activeTab === 'agents' && activeAgentsCount > 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-75 pointer-events-none'}
+                        `}
+                      >
+                        {activeAgentsCount}
+                      </span>
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="groups"
+                      className="rounded-full data-[state=active]:border-b-0 data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:font-bold cursor-pointer text-lg py-1"
+                    >
+                      Groups
+                    </TabsTrigger>
+                  </TabsList>
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      if (activeTab === 'agents') {
+                        navigate('/create');
+                      } else {
+                        handleCreateGroup();
+                      }
+                    }}
+                    className="create-agent-button cursor-pointer gap-1"
+                  >
+                    <Plus className="w-4 h-4" />
+                    {activeTab === 'agents' ? 'Create New Agent' : 'Create New Group'}
+                  </Button>
+                </div>
+                <Separator />
+              </div>
+            </div>
+
+            <TabsContent value="agents" className="flex-1 mt-0 bg-background">
+              <div className="flex flex-col gap-6 w-full md:max-w-4xl mx-auto px-6 py-2">
+                {isLoading && <div className="text-center py-8">Loading agents...</div>}
+
+                {isError && (
+                  <div className="text-center py-8">
+                    Error loading agents: {error instanceof Error ? error.message : 'Unknown error'}
+                  </div>
+                )}
+
+                {agents.length === 0 && !isLoading && (
+                  <div className="text-center py-8 flex flex-col items-center gap-4">
+                    <p className="text-muted-foreground">
+                      No agents currently running. Start a character to begin.
+                    </p>
+                  </div>
+                )}
+
+                {!isLoading && !isError && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-3 agents-section">
+                    {agents
+                      .sort((a, b) => {
+                        // Sort by status - ACTIVE agents first
+                        const aActive = a.status === AgentStatus.ACTIVE ? 1 : 0;
+                        const bActive = b.status === AgentStatus.ACTIVE ? 1 : 0;
+                        return bActive - aActive;
+                      })
+                      .map((agent) => {
+                        return (
+                          <AgentCard
+                            key={agent.id}
+                            agent={agent}
+                            onChat={(forceNew) => handleNavigateToDm(agent as Agent, forceNew)}
+                          />
+                        );
+                      })}
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+
+            <TabsContent value="groups" className="flex-1 mt-0 bg-background">
+              <div className="flex flex-col gap-6 w-full md:max-w-4xl mx-auto px-6 py-2">
+                {!isLoading && !isError && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-3 groups-section">
+                    {servers.map((server: MessageServer) => (
+                      <ServerChannels key={server.id} serverId={server.id} />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+
+      {selectedAgent?.id && (
+        <ProfileOverlay isOpen={isOverlayOpen} onClose={closeOverlay} agentId={selectedAgent.id} />
+      )}
+
+      {isGroupPanelOpen && (
+        <GroupPanel
+          onClose={() => {
+            setSelectedGroupId(null);
+            setIsGroupPanelOpen(false);
+          }}
+          channelId={selectedGroupId ?? undefined}
+        />
+      )}
+    </>
+  );
+}
+
+// Sub-component to fetch and display channels for a given server
+const ServerChannels = React.memo(({ serverId }: { serverId: UUID }) => {
+  const { data: channelsData, isLoading: isLoadingChannels } = useChannels(serverId) as {
+    data: { data: { channels: MessageChannel[] } } | undefined;
+    isLoading: boolean;
+  };
+  const groupChannels = useMemo(
+    () =>
+      channelsData?.data?.channels?.filter(
+        (ch: MessageChannel) => ch.type === CoreChannelType.GROUP
+      ) || [],
+    [channelsData]
+  );
+
+  if (isLoadingChannels) return <p>Loading channels for server...</p>;
+  if (!groupChannels || groupChannels.length === 0)
+    return <p className="text-sm text-muted-foreground">No group channels in this server.</p>;
+
+  return (
+    <>
+      {groupChannels.map((channel: MessageChannel) => (
+        <GroupCard
+          key={channel.id}
+          group={{ ...channel, server_id: serverId } as MessageChannel & { server_id: UUID }} // Pass server_id for navigation context
+        />
+      ))}
+    </>
+  );
+});
+
+ServerChannels.displayName = 'ServerChannels';

package/src/routes/not-found.tsx

@@ -0,0 +1,71 @@
+import { AlertCircle, Home, ArrowLeft } from 'lucide-react';
+import { Link, useLocation } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+
+export default function NotFound() {
+  const location = useLocation();
+  const path = location.pathname;
+
+  // Determine if this is likely an API endpoint that doesn't exist
+  const isLikelyApiEndpoint =
+    path.startsWith('/api/') ||
+    path.includes('/agents/') ||
+    path.includes('/memory/') ||
+    path.includes('/speech/');
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[70vh] px-4 text-center">
+      <div className="flex items-center justify-center mb-8">
+        <div className="bg-red-900/20 h-24 w-24 rounded-full flex items-center justify-center">
+          <AlertCircle className="h-14 w-14 text-red-500" />
+        </div>
+      </div>
+
+      <h1 className="text-3xl font-bold mb-2">Page Not Found</h1>
+
+      <div className="max-w-lg">
+        {isLikelyApiEndpoint ? (
+          <>
+            <p className="text-lg mb-6 text-muted-foreground">
+              The endpoint <span className="font-mono text-red-400">{path}</span> does not exist.
+            </p>
+            <div className="bg-red-900/20 border border-red-800/30 rounded-md p-4 mb-8 text-left">
+              <h3 className="text-red-400 font-medium mb-2 flex items-center">
+                <AlertCircle className="h-4 w-4 mr-2" />
+                Endpoint Not Found
+              </h3>
+              <p className="text-sm text-red-300/80 mb-2">
+                The requested API endpoint does not exist on this server. Please check that:
+              </p>
+              <ul className="text-sm text-red-300/80 list-disc pl-5 space-y-1">
+                <li>The URL is spelled correctly</li>
+                <li>You're using the correct version of the API</li>
+                <li>The endpoint is available in this version of Eliza</li>
+              </ul>
+            </div>
+          </>
+        ) : (
+          <p className="text-lg mb-6 text-muted-foreground">
+            Sorry, the page you're looking for doesn't exist or has been moved.
+          </p>
+        )}
+
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button asChild variant="default">
+            <Link to="/">
+              <Home className="h-4 w-4 mr-2" />
+              Go to Home
+            </Link>
+          </Button>
+
+          <Button asChild variant="outline">
+            <a onClick={() => window.history.back()}>
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Go Back
+            </a>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/test/setup.ts

@@ -0,0 +1,154 @@
+// Test setup file for Bun:test
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+import { afterEach, beforeEach, expect, mock } from 'bun:test';
+import { cleanup } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+
+// Import React to access internal state
+import React from 'react';
+
+// Set up DOM environment with Happy DOM (recommended by Bun)
+GlobalRegistrator.register();
+
+// Extend expect with jest-dom matchers
+expect.extend(matchers);
+
+// Create a comprehensive localStorage mock
+const createLocalStorageMock = () => {
+  const store: Record<string, string> = {};
+
+  return {
+    getItem: (key: string): string | null => {
+      return store[key] || null;
+    },
+    setItem: (key: string, value: string): void => {
+      store[key] = value;
+    },
+    removeItem: (key: string): void => {
+      delete store[key];
+    },
+    clear: (): void => {
+      Object.keys(store).forEach((key) => delete store[key]);
+    },
+    get length(): number {
+      return Object.keys(store).length;
+    },
+    key: (index: number): string | null => {
+      const keys = Object.keys(store);
+      return keys[index] || null;
+    },
+  };
+};
+
+// Set up fresh localStorage and sessionStorage for each test
+beforeEach(() => {
+  // Create fresh storage instances for each test
+  Object.defineProperty(window, 'localStorage', {
+    value: createLocalStorageMock(),
+    writable: true,
+    configurable: true,
+  });
+
+  Object.defineProperty(window, 'sessionStorage', {
+    value: createLocalStorageMock(),
+    writable: true,
+    configurable: true,
+  });
+
+  // Reset window dimensions to default
+  Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 1500,
+  });
+
+  Object.defineProperty(window, 'innerHeight', {
+    writable: true,
+    configurable: true,
+    value: 900,
+  });
+});
+
+// Clean up after each test
+afterEach(() => {
+  cleanup();
+
+  // Clear storage but don't reset the implementation
+  if (window.localStorage) {
+    window.localStorage.clear();
+  }
+  if (window.sessionStorage) {
+    window.sessionStorage.clear();
+  }
+
+  // Force React to clear any cached hook state
+  // This helps prevent cross-test contamination when running multiple test files
+  if ((React as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) {
+    const internals = (React as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    if (internals.ReactCurrentDispatcher) {
+      internals.ReactCurrentDispatcher.current = null;
+    }
+    if (internals.ReactCurrentBatchConfig) {
+      internals.ReactCurrentBatchConfig.transition = null;
+    }
+  }
+});
+
+// React 19 specific setup - add missing APIs for testing-library compatibility
+try {
+  const React = require('react');
+
+  // Add React.createRef polyfill for React 19 compatibility with testing-library
+  if (!React.createRef) {
+    React.createRef = function createRef() {
+      return { current: null };
+    };
+  }
+} catch (e) {
+  console.warn('Failed to set up React internals:', e instanceof Error ? e.message : String(e));
+}
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => {},
+  }),
+});
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class MockIntersectionObserver {
+  root = null;
+  rootMargin = '';
+  thresholds = [];
+
+  constructor() {}
+  observe() {}
+  disconnect() {}
+  unobserve() {}
+  takeRecords() {
+    return [];
+  }
+} as any;
+
+// Mock ResizeObserver
+global.ResizeObserver = class MockResizeObserver {
+  constructor() {}
+  observe() {}
+  disconnect() {}
+  unobserve() {}
+} as any;
+
+// Mock scrollTo for window and elements
+window.scrollTo = mock();
+Element.prototype.scrollTo = mock();
+Element.prototype.scrollIntoView = mock();
+
+// Add any other global test setup here

package/src/types/crypto-browserify.d.ts

@@ -0,0 +1,4 @@
+declare module 'crypto-browserify' {
+  const crypto: any;
+  export default crypto;
+}

package/src/types/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Interface representing an attachment.
+ *
+ * @interface
+ * @property {string} url - The URL of the attachment.
+ * @property {string} contentType - The content type of the attachment.
+ * @property {string} title - The title of the attachment.
+ */
+export interface IAttachment {
+  url: string;
+  contentType: string;
+  title: string;
+}