@letta-ai/letta-react 0.0.1

package/examples/view-and-send-messages/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "view-and-send-messages",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "vite ./src --config vite.config.mts --port 3000"
+  },
+  "author": "",
+  "license": "MIT",
+  "description": "",
+  "devDependencies": {
+    "vite": "^6.2.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

package/examples/view-and-send-messages/src/App.css

@@ -0,0 +1,24 @@
+.messages {
+  list-style: none;
+  padding: 0;
+  flex-direction: column;
+  gap: 1rem;
+  display: flex;
+}
+
+.messages li {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 1rem;
+}
+
+.send-message {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.send-message input {
+  flex: 1;
+  padding: 0.5rem;
+}

package/examples/view-and-send-messages/src/App.tsx

@@ -0,0 +1,92 @@
+import React, { FormEvent, useCallback } from 'react';
+import { useState } from 'react';
+import './App.css';
+import { useAgentMessages, useAgentState } from '@letta-ai/letta-react';
+
+function App() {
+  const [messageToSend, setMessageToSend] = useState<string>('');
+  const {
+    messages,
+    fetchOlderMessages,
+    isFetching,
+    hasOlderMessages,
+    isLoading,
+    isSending,
+    sendMessage,
+  } = useAgentMessages({
+    agentId: 'agent-ed85493d-2164-4404-b52e-119ccbc987b4',
+  });
+
+  const { agentState } = useAgentState({
+    agentId: 'agent-ed85493d-2164-4404-b52e-119ccbc987b4',
+  });
+
+  const handleSubmit = useCallback(
+    (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      setMessageToSend('');
+
+      sendMessage({
+        messages: [
+          {
+            role: 'user',
+            content: messageToSend,
+          },
+        ],
+      });
+    },
+    [messageToSend, sendMessage]
+  );
+
+  return (
+    <main>
+      <header>Talking to: {agentState?.name}</header>
+      {hasOlderMessages && (
+        <button onClick={fetchOlderMessages} disabled={isFetching}>
+          {isFetching ? 'Loading older messages' : 'Load older messages'}
+        </button>
+      )}
+
+      {isLoading ? (
+        <div>Loading messages!</div>
+      ) : (
+        <ul className="messages">
+          {messages.map((message) => {
+            if (message.messageType === 'user_message') {
+              return (
+                <li key={`${message.id}${message.messageType}`}>
+                  {message.content}
+                  {message.id}
+                </li>
+              );
+            }
+
+            if (message.messageType === 'assistant_message') {
+              return (
+                <li key={`${message.id}${message.messageType}`}>
+                  {message.content}
+                </li>
+              );
+            }
+
+            return null;
+          })}
+        </ul>
+      )}
+      {isSending ? 'Sending message...' : null}
+      <form onSubmit={handleSubmit} className="send-message">
+        <input
+          placeholder="Send a message"
+          value={messageToSend}
+          onChange={(e) => {
+            setMessageToSend(e.target.value);
+          }}
+        />
+        <button disabled={isSending}>Send Message</button>
+      </form>
+    </main>
+  );
+}
+
+export default App;

package/examples/view-and-send-messages/src/client.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import App from './App';
+import { LettaProvider } from '@letta-ai/letta-react';
+
+interface DisableSSRProps {
+  children: React.ReactNode;
+}
+
+function DisableSSR(props: DisableSSRProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted ? <>{props.children}</> : null;
+}
+
+hydrateRoot(
+  document.getElementById('root') as HTMLElement,
+  <StrictMode>
+    <DisableSSR>
+      <LettaProvider
+        options={{
+          baseUrl: 'http://localhost:8283',
+        }}
+      >
+        <App />
+      </LettaProvider>
+    </DisableSSR>
+  </StrictMode>
+);

package/examples/view-and-send-messages/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo</title>
+    <!--app-head-->
+  </head>
+  <body>
+    <div id="root"><!--app-html--></div>
+    <script type="module" src="./client.tsx"></script>
+  </body>
+</html>

package/examples/view-and-send-messages/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "files": [],
+  "include": ["src"],
+
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": "src",
+    "jsx": "react",
+    "extendedDiagnostics": true,
+    "strict": true,
+    "target": "ES6",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@letta-ai/letta-react": ["../../../src/index.ts"]
+    }
+  }
+}

package/examples/view-and-send-messages/vite.config.mts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [tsconfigPaths()],
+});

package/hooks/useAgentMessages/useAgentMessages.d.ts

@@ -0,0 +1,27 @@
+import { LettaClient, type Letta } from '@letta-ai/letta-client';
+import type { LettaRequest } from '@letta-ai/letta-client/api/types/LettaRequest';
+import type { MessagesListRequest } from '@letta-ai/letta-client/api/resources/agents';
+interface UseAgentOptions {
+    client?: LettaClient.Options;
+    agentId: string;
+    limit?: number;
+    messageOptions?: Omit<MessagesListRequest, 'after' | 'before' | 'limit'>;
+    method?: 'stream' | 'basic';
+}
+interface SendMessagePayload {
+    messages: LettaRequest['messages'];
+}
+export declare function useAgentMessages(options: UseAgentOptions): {
+    messages: Letta.LettaMessageUnion[];
+    isLoading: boolean;
+    isFetching: boolean;
+    isLoadingError: boolean;
+    loadingError: unknown;
+    sendMessage: (payload: SendMessagePayload) => Promise<void> | undefined;
+    isSending: boolean;
+    sendingError: unknown;
+    isSendingError: boolean;
+    fetchOlderMessages: () => Promise<void>;
+    hasOlderMessages: string | undefined;
+};
+export {};

package/hooks/useAgentMessages/useAgentMessages.js

@@ -0,0 +1,217 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+    var m = o[Symbol.asyncIterator], i;
+    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+};
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCachedState } from '../useCachedState/useCachedState';
+import { useLettaClient } from '../useLettaClient/useLettaClient';
+function extendContent(content, nextContent) {
+    if (typeof content === 'string') {
+        if (typeof nextContent === 'string') {
+            return `${content}${nextContent}`;
+        }
+        else {
+            return `${content}${nextContent.join('')}`;
+        }
+    }
+    else {
+        if (typeof nextContent === 'string') {
+            return [...content, { text: nextContent, type: 'text' }];
+        }
+        else {
+            return [...content, ...nextContent];
+        }
+    }
+}
+export function useAgentMessages(options) {
+    const { client = {}, method = 'stream', messageOptions = {}, limit = 20, agentId, } = options;
+    const localClient = useLettaClient(client);
+    const [localMessages, setLocalMessages] = useCachedState(`messages-${agentId}`, {
+        messages: [],
+    });
+    const hasInitialLoaded = useRef(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isFetching, setIsFetching] = useState(false);
+    const [loadingError, setLoadingError] = useState(null);
+    const [isSending, setIsSending] = useState(false);
+    const [sendingError, setSendingError] = useState(null);
+    const sendNonStreamedMessage = useCallback(function sendNonStreamedMessage(sendMessagePayload) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                setIsSending(true);
+                setSendingError(null);
+                const response = yield localClient.agents.messages.create(agentId, Object.assign(Object.assign({}, sendMessagePayload), messageOptions));
+                setLocalMessages((prevState) => (Object.assign(Object.assign({}, prevState), { messages: [...response.messages, ...prevState.messages] })));
+            }
+            catch (e) {
+                setSendingError(e);
+            }
+            finally {
+                setIsSending(false);
+            }
+        });
+    }, [localClient]);
+    const sendStreamedMessage = useCallback(function sendStreamedMessage(sendMessagePayload) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, e_1, _b, _c;
+            try {
+                setIsSending(true);
+                setSendingError(null);
+                const response = yield localClient.agents.messages.createStream(agentId, Object.assign(Object.assign(Object.assign({}, sendMessagePayload), messageOptions), { streamTokens: true }));
+                try {
+                    for (var _d = true, response_1 = __asyncValues(response), response_1_1; response_1_1 = yield response_1.next(), _a = response_1_1.done, !_a; _d = true) {
+                        _c = response_1_1.value;
+                        _d = false;
+                        const nextMessage = _c;
+                        if (nextMessage.messageType === 'usage_statistics') {
+                            return;
+                        }
+                        // @ts-expect-error - this is a correct lookup, id does exist
+                        if (!(nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.id)) {
+                            return;
+                        }
+                        setLocalMessages((prevState) => {
+                            let hasExistingMessage = false;
+                            const nextMessages = prevState.messages.map((prevMessage) => {
+                                if (nextMessage.messageType === 'usage_statistics') {
+                                    return prevMessage;
+                                }
+                                // @ts-expect-error - this is a correct lookup, id does exist
+                                if (!(prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.id) || !(nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.id)) {
+                                    return prevMessage;
+                                }
+                                // @ts-expect-error - this is a correct lookup, id does exist
+                                if (prevMessage.id !== nextMessage.id) {
+                                    return prevMessage;
+                                }
+                                if (nextMessage.messageType === 'reasoning_message' &&
+                                    prevMessage.messageType === 'reasoning_message') {
+                                    hasExistingMessage = true;
+                                    return Object.assign(Object.assign(Object.assign({}, prevMessage), nextMessage), { reasoning: `${prevMessage.reasoning}${nextMessage.reasoning}` });
+                                }
+                                if (nextMessage.messageType === 'system_message' &&
+                                    prevMessage.messageType === 'system_message') {
+                                    hasExistingMessage = true;
+                                    return Object.assign(Object.assign(Object.assign({}, prevMessage), nextMessage), { content: extendContent(prevMessage.content, nextMessage.content) });
+                                }
+                                if (nextMessage.messageType === 'user_message' &&
+                                    prevMessage.messageType === 'user_message') {
+                                    hasExistingMessage = true;
+                                    return Object.assign(Object.assign(Object.assign({}, prevMessage), nextMessage), { content: extendContent(prevMessage.content, nextMessage.content) });
+                                }
+                                if (nextMessage.messageType === 'assistant_message' &&
+                                    prevMessage.messageType === 'assistant_message') {
+                                    hasExistingMessage = true;
+                                    return Object.assign(Object.assign(Object.assign({}, prevMessage), nextMessage), { content: extendContent(prevMessage.content, nextMessage.content) });
+                                }
+                                if (nextMessage.messageType === 'tool_call_message' &&
+                                    prevMessage.messageType === 'tool_call_message') {
+                                    hasExistingMessage = true;
+                                    return Object.assign(Object.assign({}, prevMessage), nextMessage);
+                                }
+                                if (nextMessage.messageType === 'tool_return_message' &&
+                                    prevMessage.messageType === 'tool_return_message') {
+                                    hasExistingMessage = true;
+                                    return Object.assign(Object.assign({}, prevMessage), nextMessage);
+                                }
+                                return prevMessage;
+                            });
+                            return Object.assign(Object.assign({}, prevState), { messages: [
+                                    ...nextMessages,
+                                    ...(!hasExistingMessage
+                                        ? [
+                                            Object.assign({}, nextMessage),
+                                        ]
+                                        : []),
+                                ] });
+                        });
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (!_d && !_a && (_b = response_1.return)) yield _b.call(response_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            catch (e) {
+                setSendingError(e);
+            }
+            finally {
+                setIsSending(false);
+            }
+        });
+    }, [localClient]);
+    const sendMessage = useCallback(function sendMessage(payload) {
+        if (isSending) {
+            return;
+        }
+        if (method === 'stream') {
+            return sendStreamedMessage(payload);
+        }
+        return sendNonStreamedMessage(payload);
+    }, [method, isSending, sendStreamedMessage, sendNonStreamedMessage]);
+    const getMessages = useCallback(function getMessages(before) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (isFetching) {
+                    return;
+                }
+                setLoadingError(null);
+                setIsFetching(true);
+                const messages = yield localClient.agents.messages.list(agentId, Object.assign({ before, limit: limit + 1 }, messageOptions));
+                const messagesToAdd = messages.slice(1, messages.length);
+                const nextCursor = messages.length > limit ? messages[0] : undefined;
+                setLocalMessages((prevState) => (Object.assign(Object.assign({}, prevState), { messages: [...messagesToAdd, ...prevState.messages], nextCursor: nextCursor === null || nextCursor === void 0 ? void 0 : nextCursor.id })));
+            }
+            catch (e) {
+                setLoadingError(e);
+            }
+            finally {
+                setIsFetching(false);
+                setIsLoading(false);
+            }
+        });
+    }, [localClient, isFetching]);
+    const fetchOlderMessages = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        const nextCursor = localMessages.nextCursor;
+        if (!nextCursor) {
+            return;
+        }
+        return getMessages(nextCursor);
+    }), [getMessages]);
+    useEffect(() => {
+        if (hasInitialLoaded.current) {
+            return;
+        }
+        hasInitialLoaded.current = true;
+        setIsLoading(true);
+        getMessages();
+    }, []);
+    return {
+        messages: localMessages.messages,
+        isLoading,
+        isFetching,
+        isLoadingError: !!loadingError,
+        loadingError,
+        sendMessage,
+        isSending,
+        sendingError,
+        isSendingError: !!sendingError,
+        fetchOlderMessages,
+        hasOlderMessages: localMessages.nextCursor,
+    };
+}

package/hooks/useAgentState/useAgentState.d.ts

@@ -0,0 +1,13 @@
+import type { LettaClient } from '@letta-ai/letta-client';
+import type { AgentState } from '@letta-ai/letta-client/api';
+interface UseAgentStateOptions {
+    client?: LettaClient.Options;
+    agentId: string;
+}
+export declare function useAgentState(options: UseAgentStateOptions): {
+    isLoading: boolean;
+    error: unknown;
+    agentState: AgentState | undefined;
+    refresh: () => Promise<void>;
+};
+export {};

package/hooks/useAgentState/useAgentState.js

@@ -0,0 +1,46 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useLettaClient } from '../useLettaClient/useLettaClient';
+import { useCachedState } from '../useCachedState/useCachedState';
+import { useCallback, useEffect, useRef, useState } from 'react';
+export function useAgentState(options) {
+    const { client, agentId } = options;
+    const localClient = useLettaClient(client);
+    const [localState, setLocalState] = useCachedState(`agent-state-${agentId}`, undefined);
+    const [isLoading, setIsLoading] = useState(true);
+    const [loadingError, setLoadingError] = useState(null);
+    const hasInitialLoaded = useRef(false);
+    const getAgentState = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const state = yield localClient.agents.retrieve(agentId);
+            setLocalState(state);
+        }
+        catch (error) {
+            setLoadingError(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }), [agentId, localClient, setLocalState]);
+    useEffect(() => {
+        if (hasInitialLoaded.current) {
+            return;
+        }
+        hasInitialLoaded.current = true;
+        setIsLoading(true);
+        getAgentState();
+    }, []);
+    return {
+        isLoading,
+        error: loadingError,
+        agentState: localState,
+        refresh: getAgentState,
+    };
+}

package/hooks/useCachedState/useCachedState.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare function useCachedState<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>];

package/hooks/useCachedState/useCachedState.js

@@ -0,0 +1,19 @@
+import { useGlobalLettaConfig } from '../useGlobalLettaConfig/useGlobalLettaConfig';
+import { useState } from 'react';
+export function useCachedState(key, defaultValue) {
+    const { isProviderSet, cachedData, updateCache } = useGlobalLettaConfig();
+    const [localState, setLocalState] = useState(defaultValue);
+    if (!isProviderSet) {
+        return [localState, setLocalState];
+    }
+    return [
+        (cachedData === null || cachedData === void 0 ? void 0 : cachedData[key]) || defaultValue,
+        (value) => {
+            updateCache((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { [key]: typeof value === 'function'
+                        ? value((prevState === null || prevState === void 0 ? void 0 : prevState[key]) || defaultValue)
+                        : value });
+            });
+        },
+    ];
+}

package/hooks/useGlobalLettaConfig/useGlobalLettaConfig.d.ts

@@ -0,0 +1,17 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { LettaClient } from '@letta-ai/letta-client';
+import { type ReactNode } from 'react';
+type CachedData = Record<string, any>;
+interface LettaProviderState {
+    isProviderSet?: boolean;
+    state: LettaClient.Options;
+    cachedData: CachedData;
+    updateCache: Dispatch<SetStateAction<CachedData>>;
+}
+interface LettaProviderProps {
+    options: LettaClient.Options;
+    children: ReactNode;
+}
+export declare function LettaProvider(props: LettaProviderProps): React.JSX.Element;
+export declare function useGlobalLettaConfig(): LettaProviderState;
+export {};

package/hooks/useGlobalLettaConfig/useGlobalLettaConfig.js

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { createContext, useMemo, useContext } from 'react';
+const LettaContext = createContext({
+    state: {},
+    cachedData: {},
+    updateCache: () => {
+        return;
+    },
+});
+export function LettaProvider(props) {
+    const [cachedData, updateCache] = useState({});
+    const state = useMemo(() => ({
+        state: props.options,
+        cachedData,
+        updateCache,
+        isProviderSet: true,
+    }), [props.options, updateCache, cachedData]);
+    return (React.createElement(LettaContext.Provider, { value: state }, props.children));
+}
+export function useGlobalLettaConfig() {
+    return useContext(LettaContext);
+}

package/hooks/useLettaClient/useLettaClient.d.ts

@@ -0,0 +1,2 @@
+import { LettaClient } from '@letta-ai/letta-client';
+export declare function useLettaClient(localOptions?: LettaClient.Options): LettaClient;

package/hooks/useLettaClient/useLettaClient.js

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+import { LettaClient } from '@letta-ai/letta-client';
+import { useGlobalLettaConfig } from '../useGlobalLettaConfig/useGlobalLettaConfig';
+export function useLettaClient(localOptions = {}) {
+    const globalClient = useGlobalLettaConfig();
+    const [localClient] = useState(() => new LettaClient(Object.assign(Object.assign({}, globalClient.state), localOptions)));
+    return localClient;
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+export { LettaProvider } from './hooks/useGlobalLettaConfig/useGlobalLettaConfig';
+export { useAgentMessages } from './hooks/useAgentMessages/useAgentMessages';
+export { useAgentState } from './hooks/useAgentState/useAgentState';

package/index.js

@@ -0,0 +1,3 @@
+export { LettaProvider } from './hooks/useGlobalLettaConfig/useGlobalLettaConfig';
+export { useAgentMessages } from './hooks/useAgentMessages/useAgentMessages';
+export { useAgentState } from './hooks/useAgentState/useAgentState';

package/jest.config.ts

@@ -0,0 +1,10 @@
+export default {
+  displayName: 'letta-react',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/packages/letta-react',
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@letta-ai/letta-react",
+  "version": "0.0.1",
+  "description": "Letta's react library",
+  "private": false,
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Pls set up tests\" && exit 0",
+    "prepack": "cp -rv dist/. ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/letta-ai/letta-typescript-web-clients.git"
+  },
+  "author": "Letta (https://letta.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/letta-ai/letta-typescript-web-clients/issues"
+  },
+  "homepage": "https://github.com/letta-ai/letta-typescript-web-clients#readme",
+  "peerDependencies": {
+    "@letta-ai/letta-client": ">=0.1.48",
+    "react": ">=16.8.0 <20.0.0",
+    "react-dom": ">=16.8.0 <20.0.0"
+  },
+  "resolutions": {
+    "@types/react": "18.0.5"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "jest-mock-extended": "^4.0.0-beta1",
+    "typescript": "^5.8.2"
+  }
+}