@tambo-ai/react 0.12.0

package/README.md

@@ -0,0 +1,9 @@
+# Tambo AI React Client
+
+## Development
+
+```bash
+npm install @tambo-ai/react
+```
+
+PRs should use Conventional Commits.

package/dist/hooks/__tests__/use-suggestions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/__tests__/use-suggestions.test.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("@testing-library/react");
+const tambo_client_provider_1 = require("../../providers/tambo-client-provider");
+const tambo_provider_1 = require("../../providers/tambo-provider");
+const tambo_thread_provider_1 = require("../../providers/tambo-thread-provider");
+const react_query_hooks_1 = require("../react-query-hooks");
+const use_suggestions_1 = require("../use-suggestions");
+const use_thread_input_1 = require("../use-thread-input");
+// Mock the required providers
+jest.mock("../../providers/tambo-client-provider", () => ({
+    useTamboClient: jest.fn(),
+    useTamboQueryClient: jest.fn().mockReturnValue(new react_query_1.QueryClient()),
+}));
+jest.mock("../../providers/tambo-provider", () => ({ useTambo: jest.fn() }));
+jest.mock("../../providers/tambo-thread-provider", () => ({
+    useTamboThread: jest.fn(),
+}));
+jest.mock("../use-thread-input", () => ({ useTamboThreadInput: jest.fn() }));
+// Mock the react-query-hooks
+jest.mock("../react-query-hooks", () => ({
+    useTamboQuery: jest.fn(),
+    useTamboMutationResult: jest.fn().mockImplementation(({ mutationFn }) => ({
+        mutateAsync: mutationFn,
+        isLoading: false,
+        isError: false,
+        error: null,
+    })),
+}));
+describe("useTamboSuggestions", () => {
+    const mockSuggestions = [
+        {
+            id: "suggestion-1",
+            messageId: "test-message-id",
+            title: "Test Suggestion 1",
+            detailedSuggestion: "Test suggestion 1",
+        },
+        {
+            id: "suggestion-2",
+            messageId: "test-message-id",
+            title: "Test Suggestion 2",
+            detailedSuggestion: "Test suggestion 2",
+        },
+    ];
+    beforeEach(() => {
+        jest.clearAllMocks();
+        // Setup default mock implementations
+        tambo_client_provider_1.useTamboClient.mockReturnValue({
+            beta: { threads: { suggestions: { generate: jest.fn() } } },
+        });
+        tambo_provider_1.useTambo.mockReturnValue({ sendThreadMessage: jest.fn() });
+        tambo_thread_provider_1.useTamboThread.mockReturnValue({
+            thread: {
+                id: "test-thread-id",
+                messages: [
+                    { id: "test-message-id", role: "hydra", content: "Test message" },
+                ],
+            },
+        });
+        use_thread_input_1.useTamboThreadInput.mockReturnValue({ setValue: jest.fn() });
+        // Default query mock returns empty array
+        react_query_hooks_1.useTamboQuery.mockReturnValue({
+            data: [],
+            isLoading: false,
+            isError: false,
+            error: null,
+        });
+    });
+    it("should initialize with empty suggestions and no selected suggestion", () => {
+        const { result } = (0, react_1.renderHook)(() => (0, use_suggestions_1.useTamboSuggestions)());
+        expect(result.current.suggestions).toEqual([]);
+        expect(result.current.selectedSuggestionId).toBeNull();
+    });
+    it("should generate suggestions when latest message is from Tambo", async () => {
+        const mockGenerate = jest.fn().mockResolvedValue(mockSuggestions);
+        tambo_client_provider_1.useTamboClient.mockReturnValue({
+            beta: { threads: { suggestions: { generate: mockGenerate } } },
+        });
+        // Mock the query result to return the mock suggestions
+        react_query_hooks_1.useTamboQuery.mockReturnValue({
+            data: mockSuggestions,
+            isLoading: false,
+            isError: false,
+            error: null,
+        });
+        const { result } = (0, react_1.renderHook)(() => (0, use_suggestions_1.useTamboSuggestions)());
+        // Wait for the effect to run
+        await (0, react_1.act)(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 0));
+        });
+        // Since we're mocking useTamboQuery to return the suggestions directly,
+        // the generate function won't be called, so we don't need to check that
+        expect(result.current.suggestions).toEqual(mockSuggestions);
+    });
+    it("should not generate suggestions when latest message is not from Tambo", async () => {
+        const mockGenerate = jest.fn();
+        tambo_client_provider_1.useTamboClient.mockReturnValue({
+            beta: { threads: { suggestions: { generate: mockGenerate } } },
+        });
+        // Mock the thread to have a non-Tambo message
+        tambo_thread_provider_1.useTamboThread.mockReturnValue({
+            thread: {
+                id: "test-thread-id",
+                messages: [
+                    { id: "test-message-id", role: "user", content: "Test message" },
+                ],
+            },
+        });
+        const { result } = (0, react_1.renderHook)(() => (0, use_suggestions_1.useTamboSuggestions)());
+        // Wait for the effect to run
+        await (0, react_1.act)(async () => {
+            await new Promise((resolve) => setTimeout(resolve, 0));
+        });
+        expect(mockGenerate).not.toHaveBeenCalled();
+        expect(result.current.suggestions).toEqual([]);
+    });
+    it("should accept a suggestion and update input value", async () => {
+        const mockSetValue = jest.fn();
+        use_thread_input_1.useTamboThreadInput.mockReturnValue({
+            setValue: mockSetValue,
+        });
+        const { result } = (0, react_1.renderHook)(() => (0, use_suggestions_1.useTamboSuggestions)());
+        await (0, react_1.act)(async () => {
+            await result.current.accept({
+                suggestion: mockSuggestions[0],
+                shouldSubmit: false,
+            });
+        });
+        expect(mockSetValue).toHaveBeenCalledWith("Test suggestion 1");
+        expect(result.current.selectedSuggestionId).toBe("suggestion-1");
+    });
+    it("should accept a suggestion and submit it", async () => {
+        const mockSendThreadMessage = jest.fn();
+        tambo_provider_1.useTambo.mockReturnValue({
+            sendThreadMessage: mockSendThreadMessage,
+        });
+        const { result } = (0, react_1.renderHook)(() => (0, use_suggestions_1.useTamboSuggestions)());
+        await (0, react_1.act)(async () => {
+            await result.current.accept({
+                suggestion: mockSuggestions[0],
+                shouldSubmit: true,
+            });
+        });
+        expect(mockSendThreadMessage).toHaveBeenCalledWith("Test suggestion 1", {
+            threadId: "test-thread-id",
+        });
+        expect(result.current.selectedSuggestionId).toBe("suggestion-1");
+    });
+    it("should throw error when accepting invalid suggestion", async () => {
+        const invalidSuggestion = {
+            id: "invalid-suggestion",
+            messageId: "test-message-id",
+            title: "Invalid Suggestion",
+            detailedSuggestion: "", // Empty suggestion should fail validation
+        };
+        const { result } = (0, react_1.renderHook)(() => (0, use_suggestions_1.useTamboSuggestions)());
+        await (0, react_1.act)(async () => {
+            await expect(result.current.accept({
+                suggestion: invalidSuggestion,
+                shouldSubmit: false,
+            })).rejects.toThrow("Message cannot be empty");
+        });
+        expect(result.current.selectedSuggestionId).toBeNull();
+    });
+});
+//# sourceMappingURL=use-suggestions.test.js.map

package/dist/hooks/__tests__/use-suggestions.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-suggestions.test.js","sourceRoot":"","sources":["../../../src/hooks/__tests__/use-suggestions.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import TamboAI from \"@tambo-ai/typescript-sdk\";\nimport { QueryClient } from \"@tanstack/react-query\";\nimport { act, renderHook } from \"@testing-library/react\";\nimport { useTamboClient } from \"../../providers/tambo-client-provider\";\nimport { useTambo } from \"../../providers/tambo-provider\";\nimport { useTamboThread } from \"../../providers/tambo-thread-provider\";\nimport { useTamboQuery } from \"../react-query-hooks\";\nimport { useTamboSuggestions } from \"../use-suggestions\";\nimport { useTamboThreadInput } from \"../use-thread-input\";\n\n// Mock the required providers\njest.mock(\"../../providers/tambo-client-provider\", () => ({\n  useTamboClient: jest.fn(),\n  useTamboQueryClient: jest.fn().mockReturnValue(new QueryClient()),\n}));\n\njest.mock(\"../../providers/tambo-provider\", () => ({ useTambo: jest.fn() }));\n\njest.mock(\"../../providers/tambo-thread-provider\", () => ({\n  useTamboThread: jest.fn(),\n}));\n\njest.mock(\"../use-thread-input\", () => ({ useTamboThreadInput: jest.fn() }));\n\n// Mock the react-query-hooks\njest.mock(\"../react-query-hooks\", () => ({\n  useTamboQuery: jest.fn(),\n  useTamboMutationResult: jest.fn().mockImplementation(({ mutationFn }) => ({\n    mutateAsync: mutationFn,\n    isLoading: false,\n    isError: false,\n    error: null,\n  })),\n}));\n\ndescribe(\"useTamboSuggestions\", () => {\n  const mockSuggestions: TamboAI.Beta.Threads.Suggestion[] = [\n    {\n      id: \"suggestion-1\",\n      messageId: \"test-message-id\",\n      title: \"Test Suggestion 1\",\n      detailedSuggestion: \"Test suggestion 1\",\n    },\n    {\n      id: \"suggestion-2\",\n      messageId: \"test-message-id\",\n      title: \"Test Suggestion 2\",\n      detailedSuggestion: \"Test suggestion 2\",\n    },\n  ];\n\n  beforeEach(() => {\n    jest.clearAllMocks();\n    // Setup default mock implementations\n    (useTamboClient as jest.Mock).mockReturnValue({\n      beta: { threads: { suggestions: { generate: jest.fn() } } },\n    });\n    (useTambo as jest.Mock).mockReturnValue({ sendThreadMessage: jest.fn() });\n    (useTamboThread as jest.Mock).mockReturnValue({\n      thread: {\n        id: \"test-thread-id\",\n        messages: [\n          { id: \"test-message-id\", role: \"hydra\", content: \"Test message\" },\n        ],\n      },\n    });\n    (useTamboThreadInput as jest.Mock).mockReturnValue({ setValue: jest.fn() });\n    // Default query mock returns empty array\n    (useTamboQuery as jest.Mock).mockReturnValue({\n      data: [],\n      isLoading: false,\n      isError: false,\n      error: null,\n    });\n  });\n\n  it(\"should initialize with empty suggestions and no selected suggestion\", () => {\n    const { result } = renderHook(() => useTamboSuggestions());\n\n    expect(result.current.suggestions).toEqual([]);\n    expect(result.current.selectedSuggestionId).toBeNull();\n  });\n\n  it(\"should generate suggestions when latest message is from Tambo\", async () => {\n    const mockGenerate = jest.fn().mockResolvedValue(mockSuggestions);\n    (useTamboClient as jest.Mock).mockReturnValue({\n      beta: { threads: { suggestions: { generate: mockGenerate } } },\n    });\n\n    // Mock the query result to return the mock suggestions\n    (useTamboQuery as jest.Mock).mockReturnValue({\n      data: mockSuggestions,\n      isLoading: false,\n      isError: false,\n      error: null,\n    });\n\n    const { result } = renderHook(() => useTamboSuggestions());\n\n    // Wait for the effect to run\n    await act(async () => {\n      await new Promise((resolve) => setTimeout(resolve, 0));\n    });\n\n    // Since we're mocking useTamboQuery to return the suggestions directly,\n    // the generate function won't be called, so we don't need to check that\n    expect(result.current.suggestions).toEqual(mockSuggestions);\n  });\n\n  it(\"should not generate suggestions when latest message is not from Tambo\", async () => {\n    const mockGenerate = jest.fn();\n    (useTamboClient as jest.Mock).mockReturnValue({\n      beta: { threads: { suggestions: { generate: mockGenerate } } },\n    });\n\n    // Mock the thread to have a non-Tambo message\n    (useTamboThread as jest.Mock).mockReturnValue({\n      thread: {\n        id: \"test-thread-id\",\n        messages: [\n          { id: \"test-message-id\", role: \"user\", content: \"Test message\" },\n        ],\n      },\n    });\n\n    const { result } = renderHook(() => useTamboSuggestions());\n\n    // Wait for the effect to run\n    await act(async () => {\n      await new Promise((resolve) => setTimeout(resolve, 0));\n    });\n\n    expect(mockGenerate).not.toHaveBeenCalled();\n    expect(result.current.suggestions).toEqual([]);\n  });\n\n  it(\"should accept a suggestion and update input value\", async () => {\n    const mockSetValue = jest.fn();\n    (useTamboThreadInput as jest.Mock).mockReturnValue({\n      setValue: mockSetValue,\n    });\n\n    const { result } = renderHook(() => useTamboSuggestions());\n\n    await act(async () => {\n      await result.current.accept({\n        suggestion: mockSuggestions[0],\n        shouldSubmit: false,\n      });\n    });\n\n    expect(mockSetValue).toHaveBeenCalledWith(\"Test suggestion 1\");\n    expect(result.current.selectedSuggestionId).toBe(\"suggestion-1\");\n  });\n\n  it(\"should accept a suggestion and submit it\", async () => {\n    const mockSendThreadMessage = jest.fn();\n    (useTambo as jest.Mock).mockReturnValue({\n      sendThreadMessage: mockSendThreadMessage,\n    });\n\n    const { result } = renderHook(() => useTamboSuggestions());\n\n    await act(async () => {\n      await result.current.accept({\n        suggestion: mockSuggestions[0],\n        shouldSubmit: true,\n      });\n    });\n\n    expect(mockSendThreadMessage).toHaveBeenCalledWith(\"Test suggestion 1\", {\n      threadId: \"test-thread-id\",\n    });\n    expect(result.current.selectedSuggestionId).toBe(\"suggestion-1\");\n  });\n\n  it(\"should throw error when accepting invalid suggestion\", async () => {\n    const invalidSuggestion = {\n      id: \"invalid-suggestion\",\n      messageId: \"test-message-id\",\n      title: \"Invalid Suggestion\",\n      detailedSuggestion: \"\", // Empty suggestion should fail validation\n    };\n\n    const { result } = renderHook(() => useTamboSuggestions());\n\n    await act(async () => {\n      await expect(\n        result.current.accept({\n          suggestion: invalidSuggestion,\n          shouldSubmit: false,\n        }),\n      ).rejects.toThrow(\"Message cannot be empty\");\n    });\n\n    expect(result.current.selectedSuggestionId).toBeNull();\n  });\n});\n"]}

package/dist/hooks/react-query-hooks.d.ts

@@ -0,0 +1,21 @@
+import { QueryKey, UseMutationOptions, UseQueryOptions, UseMutationResult } from "@tanstack/react-query";
+/**
+ * Wrapper around useQuery that uses the internal tambo query client.
+ *
+ * Use this instead of useQuery from @tanstack/react-query
+ */
+export declare function useTamboQuery<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>): import("@tanstack/react-query").UseQueryResult<TData, TError>;
+/**
+ * Wrapper around useMutation that uses the internal tambo query client.
+ *
+ * Use this instead of useMutation from @tanstack/react-query
+ */
+export declare function useTamboMutation<TData = unknown, TError = Error, TVariables = void, TContext = unknown>(options: UseMutationOptions<TData, TError, TVariables, TContext>): UseMutationResult<TData, TError, TVariables, TContext>;
+/**
+ * Type alias for the result of a mutation.
+ */
+export type UseTamboMutationResult<TData = unknown, TError = Error, TVariables = void, TContext = unknown> = UseMutationResult<TData, TError, TVariables, TContext>;
+/**
+ * Hook for creating a mutation with the tambo query client.
+ */
+export declare function useTamboMutationResult<TData = unknown, TError = Error, TVariables = void, TContext = unknown>(options: UseMutationOptions<TData, TError, TVariables, TContext>): UseMutationResult<TData, TError, TVariables, TContext>;

package/dist/hooks/react-query-hooks.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTamboQuery = useTamboQuery;
+exports.useTamboMutation = useTamboMutation;
+exports.useTamboMutationResult = useTamboMutationResult;
+// tamboHooks.ts
+const react_query_1 = require("@tanstack/react-query");
+const tambo_client_provider_1 = require("../providers/tambo-client-provider");
+/**
+ * Wrapper around useQuery that uses the internal tambo query client.
+ *
+ * Use this instead of useQuery from @tanstack/react-query
+ */
+function useTamboQuery(options) {
+    const queryClient = (0, tambo_client_provider_1.useTamboQueryClient)();
+    return (0, react_query_1.useQuery)(options, queryClient);
+}
+/**
+ * Wrapper around useMutation that uses the internal tambo query client.
+ *
+ * Use this instead of useMutation from @tanstack/react-query
+ */
+function useTamboMutation(options) {
+    const queryClient = (0, tambo_client_provider_1.useTamboQueryClient)();
+    return (0, react_query_1.useMutation)(options, queryClient);
+}
+/**
+ * Hook for creating a mutation with the tambo query client.
+ */
+function useTamboMutationResult(options) {
+    return useTamboMutation(options);
+}
+//# sourceMappingURL=react-query-hooks.js.map

package/dist/hooks/react-query-hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-query-hooks.js","sourceRoot":"","sources":["../../src/hooks/react-query-hooks.ts"],"names":[],"mappings":";;AAgBA,sCAQC;AAOD,4CAQC;AAeD,wDAOC;AA7DD,gBAAgB;AAChB,uDAO+B;AAC/B,8EAAyE;AAEzE;;;;GAIG;AACH,SAAgB,aAAa,CAK3B,OAAgE;IAChE,MAAM,WAAW,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAC1C,OAAO,IAAA,sBAAQ,EAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AACxC,CAAC;AAED;;;;GAIG;AACH,SAAgB,gBAAgB,CAK9B,OAAgE;IAChE,MAAM,WAAW,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAC1C,OAAO,IAAA,yBAAW,EAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AAC3C,CAAC;AAYD;;GAEG;AACH,SAAgB,sBAAsB,CAKpC,OAAgE;IAChE,OAAO,gBAAgB,CAAsC,OAAO,CAAC,CAAC;AACxE,CAAC","sourcesContent":["// tamboHooks.ts\nimport {\n  QueryKey,\n  useMutation,\n  UseMutationOptions,\n  useQuery,\n  UseQueryOptions,\n  UseMutationResult,\n} from \"@tanstack/react-query\";\nimport { useTamboQueryClient } from \"../providers/tambo-client-provider\";\n\n/**\n * Wrapper around useQuery that uses the internal tambo query client.\n *\n * Use this instead of useQuery from @tanstack/react-query\n */\nexport function useTamboQuery<\n  TQueryFnData = unknown,\n  TError = Error,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>) {\n  const queryClient = useTamboQueryClient();\n  return useQuery(options, queryClient);\n}\n\n/**\n * Wrapper around useMutation that uses the internal tambo query client.\n *\n * Use this instead of useMutation from @tanstack/react-query\n */\nexport function useTamboMutation<\n  TData = unknown,\n  TError = Error,\n  TVariables = void,\n  TContext = unknown,\n>(options: UseMutationOptions<TData, TError, TVariables, TContext>) {\n  const queryClient = useTamboQueryClient();\n  return useMutation(options, queryClient);\n}\n\n/**\n * Type alias for the result of a mutation.\n */\nexport type UseTamboMutationResult<\n  TData = unknown,\n  TError = Error,\n  TVariables = void,\n  TContext = unknown,\n> = UseMutationResult<TData, TError, TVariables, TContext>;\n\n/**\n * Hook for creating a mutation with the tambo query client.\n */\nexport function useTamboMutationResult<\n  TData = unknown,\n  TError = Error,\n  TVariables = void,\n  TContext = unknown,\n>(options: UseMutationOptions<TData, TError, TVariables, TContext>) {\n  return useTamboMutation<TData, TError, TVariables, TContext>(options);\n}\n"]}

package/dist/hooks/use-component-state.d.ts

@@ -0,0 +1,8 @@
+type StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];
+/**
+ * Behaves similarly to useState, but the value is stored in the thread
+ * message, and the state is keyed by the keyName
+ */
+export declare function useTamboComponentState<S = undefined>(keyName: string): StateUpdateResult<S | undefined>;
+export declare function useTamboComponentState<S>(keyName: string, initialValue?: S): StateUpdateResult<S>;
+export {};

package/dist/hooks/use-component-state.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTamboComponentState = useTamboComponentState;
+const react_1 = require("react");
+const providers_1 = require("../providers");
+const use_current_message_1 = require("./use-current-message");
+function useTamboComponentState(keyName, initialValue) {
+    const { threadId, messageId } = (0, use_current_message_1.useTamboMessageContext)();
+    const { updateThreadMessage } = (0, providers_1.useTamboThread)();
+    const client = (0, providers_1.useTamboClient)();
+    const message = (0, use_current_message_1.useTamboCurrentMessage)();
+    if (!message) {
+        // throw new Error(`Message not found ${messageId}`);
+        console.warn(`Message not found ${messageId}`);
+    }
+    const value = message?.componentState && keyName in message.componentState
+        ? message.componentState[keyName]
+        : initialValue;
+    const setValue = (0, react_1.useCallback)(async (newValue) => {
+        if (!message) {
+            console.warn(`Cannot update missing message ${messageId}`);
+            return;
+        }
+        await updateThreadMessage(messageId, {
+            ...message,
+            componentState: {
+                ...message.componentState,
+                [keyName]: newValue,
+            },
+        }, false);
+        await client.beta.threads.messages.updateComponentState(threadId, messageId, { state: { [keyName]: newValue } });
+    }, [
+        client.beta.threads.messages,
+        keyName,
+        message,
+        messageId,
+        threadId,
+        updateThreadMessage,
+    ]);
+    return [value, setValue];
+}
+//# sourceMappingURL=use-component-state.js.map

package/dist/hooks/use-component-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-component-state.js","sourceRoot":"","sources":["../../src/hooks/use-component-state.tsx"],"names":[],"mappings":";;AAoBA,wDAkDC;AAtED,iCAAoC;AACpC,4CAA8D;AAC9D,+DAG+B;AAe/B,SAAgB,sBAAsB,CACpC,OAAe,EACf,YAAgB;IAEhB,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,4CAAsB,GAAE,CAAC;IACzD,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAA,0BAAc,GAAE,CAAC;IACjD,MAAM,MAAM,GAAG,IAAA,0BAAc,GAAE,CAAC;IAEhC,MAAM,OAAO,GAAG,IAAA,4CAAsB,GAAE,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,qDAAqD;QACrD,OAAO,CAAC,IAAI,CAAC,qBAAqB,SAAS,EAAE,CAAC,CAAC;IACjD,CAAC;IACD,MAAM,KAAK,GACT,OAAO,EAAE,cAAc,IAAI,OAAO,IAAI,OAAO,CAAC,cAAc;QAC1D,CAAC,CAAE,OAAO,CAAC,cAAc,CAAC,OAAO,CAAO;QACxC,CAAC,CAAC,YAAY,CAAC;IACnB,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,KAAK,EAAE,QAAW,EAAE,EAAE;QACpB,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CAAC,iCAAiC,SAAS,EAAE,CAAC,CAAC;YAC3D,OAAO;QACT,CAAC;QACD,MAAM,mBAAmB,CACvB,SAAS,EACT;YACE,GAAG,OAAO;YACV,cAAc,EAAE;gBACd,GAAG,OAAO,CAAC,cAAc;gBACzB,CAAC,OAAO,CAAC,EAAE,QAAQ;aACpB;SACF,EACD,KAAK,CACN,CAAC;QACF,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CACrD,QAAQ,EACR,SAAS,EACT,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,CACnC,CAAC;IACJ,CAAC,EACD;QACE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ;QAC5B,OAAO;QACP,OAAO;QACP,SAAS;QACT,QAAQ;QACR,mBAAmB;KACpB,CACF,CAAC;IACF,OAAO,CAAC,KAAU,EAAE,QAAQ,CAAC,CAAC;AAChC,CAAC","sourcesContent":["import { useCallback } from \"react\";\nimport { useTamboClient, useTamboThread } from \"../providers\";\nimport {\n  useTamboCurrentMessage,\n  useTamboMessageContext,\n} from \"./use-current-message\";\n\ntype StateUpdateResult<T> = [currentState: T, setState: (newState: T) => void];\n\n/**\n * Behaves similarly to useState, but the value is stored in the thread\n * message, and the state is keyed by the keyName\n */\nexport function useTamboComponentState<S = undefined>(\n  keyName: string,\n): StateUpdateResult<S | undefined>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue?: S,\n): StateUpdateResult<S>;\nexport function useTamboComponentState<S>(\n  keyName: string,\n  initialValue?: S,\n): StateUpdateResult<S> {\n  const { threadId, messageId } = useTamboMessageContext();\n  const { updateThreadMessage } = useTamboThread();\n  const client = useTamboClient();\n\n  const message = useTamboCurrentMessage();\n  if (!message) {\n    // throw new Error(`Message not found ${messageId}`);\n    console.warn(`Message not found ${messageId}`);\n  }\n  const value =\n    message?.componentState && keyName in message.componentState\n      ? (message.componentState[keyName] as S)\n      : initialValue;\n  const setValue = useCallback(\n    async (newValue: S) => {\n      if (!message) {\n        console.warn(`Cannot update missing message ${messageId}`);\n        return;\n      }\n      await updateThreadMessage(\n        messageId,\n        {\n          ...message,\n          componentState: {\n            ...message.componentState,\n            [keyName]: newValue,\n          },\n        },\n        false,\n      );\n      await client.beta.threads.messages.updateComponentState(\n        threadId,\n        messageId,\n        { state: { [keyName]: newValue } },\n      );\n    },\n    [\n      client.beta.threads.messages,\n      keyName,\n      message,\n      messageId,\n      threadId,\n      updateThreadMessage,\n    ],\n  );\n  return [value as S, setValue];\n}\n"]}

package/dist/hooks/use-current-message.d.ts

@@ -0,0 +1,18 @@
+import React, { PropsWithChildren } from "react";
+/** Wraps all components, so that they can find what thread and message they are in */
+export declare const TamboMessageProvider: React.FC<PropsWithChildren<{
+    threadId: string;
+    messageId: string;
+}>>;
+/** Wraps a component with a ComponentMessageProvider - this allows the provider
+ * to be used outside of a TSX file */
+export declare function wrapWithTamboMessageProvider(children: React.ReactNode, threadId: string, messageId: string): React.JSX.Element;
+/** Hook used inside a component wrapped with ComponentMessageProvider, to get
+ * the threadId and messageId */
+export declare const useTamboMessageContext: () => {
+    threadId: string;
+    messageId: string;
+};
+/** Hook used inside a component wrapped with ComponentMessageProvider, to get
+ * the current message */
+export declare const useTamboCurrentMessage: () => import("..").TamboThreadMessage | undefined;

package/dist/hooks/use-current-message.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTamboCurrentMessage = exports.useTamboMessageContext = exports.TamboMessageProvider = void 0;
+exports.wrapWithTamboMessageProvider = wrapWithTamboMessageProvider;
+const react_1 = __importStar(require("react"));
+const providers_1 = require("../providers");
+const TamboMessageContext = (0, react_1.createContext)({});
+/** Wraps all components, so that they can find what thread and message they are in */
+const TamboMessageProvider = ({ children, threadId, messageId }) => {
+    return (react_1.default.createElement(TamboMessageContext.Provider, { value: { threadId, messageId } }, children));
+};
+exports.TamboMessageProvider = TamboMessageProvider;
+/** Wraps a component with a ComponentMessageProvider - this allows the provider
+ * to be used outside of a TSX file */
+function wrapWithTamboMessageProvider(children, threadId, messageId) {
+    return (react_1.default.createElement(exports.TamboMessageProvider, { threadId: threadId, messageId: messageId }, children));
+}
+/** Hook used inside a component wrapped with ComponentMessageProvider, to get
+ * the threadId and messageId */
+const useTamboMessageContext = () => {
+    const context = (0, react_1.useContext)(TamboMessageContext);
+    if (!context) {
+        throw new Error("useTamboMessageContext must be used within a TamboMessageProvider");
+    }
+    return context;
+};
+exports.useTamboMessageContext = useTamboMessageContext;
+/** Hook used inside a component wrapped with ComponentMessageProvider, to get
+ * the current message */
+const useTamboCurrentMessage = () => {
+    const { messageId, threadId } = (0, exports.useTamboMessageContext)();
+    const { thread } = (0, providers_1.useTamboThread)();
+    if (thread.id && threadId && thread.id !== threadId) {
+        console.warn(`Thread ID mismatch ${thread.id} !== ${threadId}`);
+    }
+    const message = thread.messages.find((m) => m.id === messageId);
+    return message;
+};
+exports.useTamboCurrentMessage = useTamboCurrentMessage;
+//# sourceMappingURL=use-current-message.js.map

package/dist/hooks/use-current-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-current-message.js","sourceRoot":"","sources":["../../src/hooks/use-current-message.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,oEAUC;AA/BD,+CAA4E;AAC5E,4CAA8C;AAE9C,MAAM,mBAAmB,GAAG,IAAA,qBAAa,EAGtC,EAA6C,CAAC,CAAC;AAElD,sFAAsF;AAC/E,MAAM,oBAAoB,GAE7B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACxC,OAAO,CACL,8BAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,IACzD,QAAQ,CACoB,CAChC,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,oBAAoB,wBAQ/B;AAEF;sCACsC;AACtC,SAAgB,4BAA4B,CAC1C,QAAyB,EACzB,QAAgB,EAChB,SAAiB;IAEjB,OAAO,CACL,8BAAC,4BAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,IAC3D,QAAQ,CACY,CACxB,CAAC;AACJ,CAAC;AACD;gCACgC;AAEzB,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,mBAAmB,CAAC,CAAC;IAChD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,mEAAmE,CACpE,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,sBAAsB,0BAQjC;AAEF;yBACyB;AAClB,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAA,8BAAsB,GAAE,CAAC;IACzD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,0BAAc,GAAE,CAAC;IACpC,IAAI,MAAM,CAAC,EAAE,IAAI,QAAQ,IAAI,MAAM,CAAC,EAAE,KAAK,QAAQ,EAAE,CAAC;QACpD,OAAO,CAAC,IAAI,CAAC,sBAAsB,MAAM,CAAC,EAAE,QAAQ,QAAQ,EAAE,CAAC,CAAC;IAClE,CAAC;IAED,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;IAChE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AATW,QAAA,sBAAsB,0BASjC","sourcesContent":["import React, { createContext, PropsWithChildren, useContext } from \"react\";\nimport { useTamboThread } from \"../providers\";\n\nconst TamboMessageContext = createContext<{\n  threadId: string;\n  messageId: string;\n}>({} as { threadId: string; messageId: string });\n\n/** Wraps all components, so that they can find what thread and message they are in */\nexport const TamboMessageProvider: React.FC<\n  PropsWithChildren<{ threadId: string; messageId: string }>\n> = ({ children, threadId, messageId }) => {\n  return (\n    <TamboMessageContext.Provider value={{ threadId, messageId }}>\n      {children}\n    </TamboMessageContext.Provider>\n  );\n};\n\n/** Wraps a component with a ComponentMessageProvider - this allows the provider\n * to be used outside of a TSX file */\nexport function wrapWithTamboMessageProvider(\n  children: React.ReactNode,\n  threadId: string,\n  messageId: string,\n) {\n  return (\n    <TamboMessageProvider threadId={threadId} messageId={messageId}>\n      {children}\n    </TamboMessageProvider>\n  );\n}\n/** Hook used inside a component wrapped with ComponentMessageProvider, to get\n * the threadId and messageId */\n\nexport const useTamboMessageContext = () => {\n  const context = useContext(TamboMessageContext);\n  if (!context) {\n    throw new Error(\n      \"useTamboMessageContext must be used within a TamboMessageProvider\",\n    );\n  }\n  return context;\n};\n\n/** Hook used inside a component wrapped with ComponentMessageProvider, to get\n * the current message */\nexport const useTamboCurrentMessage = () => {\n  const { messageId, threadId } = useTamboMessageContext();\n  const { thread } = useTamboThread();\n  if (thread.id && threadId && thread.id !== threadId) {\n    console.warn(`Thread ID mismatch ${thread.id} !== ${threadId}`);\n  }\n\n  const message = thread.messages.find((m) => m.id === messageId);\n  return message;\n};\n"]}

package/dist/hooks/use-query-client.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=use-query-client.js.map

package/dist/hooks/use-query-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-query-client.js","sourceRoot":"","sources":["../../src/hooks/use-query-client.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/hooks/use-suggestions.d.ts

@@ -0,0 +1,44 @@
+import TamboAI from "@tambo-ai/typescript-sdk";
+import { CombinedMutationResult } from "../util/query-utils";
+import { UseTamboMutationResult } from "./react-query-hooks";
+/**
+ * Configuration options for the useTamboSuggestions hook
+ */
+export interface useTamboSuggestionsOptions {
+    /** Maximum number of suggestions to generate (1-10, default 3) */
+    maxSuggestions?: number;
+}
+/**
+ * Return value interface for useTamboSuggestions hook
+ */
+export interface useTamboSuggestionsResultInternal {
+    /** List of available suggestions (also available in generateResult.data) */
+    suggestions: TamboAI.Beta.Threads.Suggestion[];
+    /** ID of the currently selected suggestion */
+    selectedSuggestionId: string | null;
+    /**
+     * Accept and apply a suggestion (also available in acceptResult.mutateAsync)
+     * @param suggestion - The suggestion to accept
+     * @param shouldSubmit - Whether to automatically submit after accepting (default: false)
+     */
+    accept: (acceptOptions: {
+        suggestion: TamboAI.Beta.Threads.Suggestion;
+        shouldSubmit?: boolean;
+    }) => Promise<void>;
+    /** Result and network state for accepting a suggestion */
+    acceptResult: UseTamboMutationResult<void, Error, {
+        suggestion: TamboAI.Beta.Threads.Suggestion;
+        shouldSubmit?: boolean;
+    }>;
+    /** Result and network state for generating suggestions */
+    generateResult: UseTamboMutationResult<TamboAI.Beta.Threads.Suggestions.SuggestionGenerateResponse | undefined, Error, AbortController>;
+}
+type useTamboSuggestionsResult = CombinedMutationResult<any, Error> & useTamboSuggestionsResultInternal;
+/**
+ * Hook for managing Tambo AI suggestions in a thread
+ *
+ * @param options - Configuration options for suggestion generation
+ * @returns Object containing suggestions state and control functions
+ */
+export declare function useTamboSuggestions(options?: useTamboSuggestionsOptions): useTamboSuggestionsResult;
+export {};

package/dist/hooks/use-suggestions.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTamboSuggestions = useTamboSuggestions;
+const react_1 = require("react");
+const validate_input_1 = require("../model/validate-input");
+const tambo_client_provider_1 = require("../providers/tambo-client-provider");
+const tambo_provider_1 = require("../providers/tambo-provider");
+const tambo_registry_provider_1 = require("../providers/tambo-registry-provider");
+const tambo_thread_provider_1 = require("../providers/tambo-thread-provider");
+const query_utils_1 = require("../util/query-utils");
+const registry_1 = require("../util/registry");
+const react_query_hooks_1 = require("./react-query-hooks");
+const use_thread_input_1 = require("./use-thread-input");
+/**
+ * Hook for managing Tambo AI suggestions in a thread
+ *
+ * @param options - Configuration options for suggestion generation
+ * @returns Object containing suggestions state and control functions
+ */
+function useTamboSuggestions(options = {}) {
+    const { maxSuggestions = 3 } = options;
+    const { thread } = (0, tambo_thread_provider_1.useTamboThread)();
+    const { sendThreadMessage } = (0, tambo_provider_1.useTambo)();
+    const tamboClient = (0, tambo_client_provider_1.useTamboClient)();
+    const { componentList, toolRegistry, componentToolAssociations } = (0, tambo_registry_provider_1.useTamboRegistry)();
+    const [selectedSuggestionId, setSelectedSuggestionId] = (0, react_1.useState)(null);
+    const { setValue: setInputValue } = (0, use_thread_input_1.useTamboThreadInput)();
+    const latestMessage = thread.messages[thread.messages.length - 1];
+    const isLatestFromTambo = latestMessage?.role === "hydra"; // TODO: change to tambo
+    const latestMessageId = latestMessage?.id;
+    // Reset selected suggestion when the message changes
+    (0, react_1.useEffect)(() => {
+        setSelectedSuggestionId(null);
+    }, [latestMessageId]);
+    // Use React Query to fetch suggestions when a new hydra message is received
+    const suggestionsQuery = (0, react_query_hooks_1.useTamboQuery)({
+        // Only include latestMessageId in the queryKey if the message is from hydra
+        queryKey: ["suggestions", isLatestFromTambo ? latestMessageId : null],
+        queryFn: async () => {
+            if (!latestMessageId || !isLatestFromTambo) {
+                return [];
+            }
+            // Get registered components from the registry
+            const components = (0, registry_1.getAvailableComponents)(componentList, toolRegistry, componentToolAssociations);
+            return tamboClient.beta.threads.suggestions.generate(thread.id, latestMessageId, {
+                maxSuggestions,
+                // The API expects an array of arrays for availableComponents
+                availableComponents: [components],
+            });
+        },
+        // Only run the query if we have a valid message from hydra
+        enabled: Boolean(latestMessageId && isLatestFromTambo),
+        // Don't refetch on window focus or reconnect
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+        // Don't retry on failure
+        retry: false,
+    });
+    // Accept suggestion mutation
+    const acceptMutationState = (0, react_query_hooks_1.useTamboMutationResult)({
+        mutationFn: async ({ suggestion, shouldSubmit = false }) => {
+            const validation = (0, validate_input_1.validateInput)(suggestion.detailedSuggestion);
+            if (!validation.isValid) {
+                if (validation.error) {
+                    throw validation.error;
+                }
+                throw new Error(use_thread_input_1.INPUT_ERROR_MESSAGES.VALIDATION);
+            }
+            if (shouldSubmit) {
+                await sendThreadMessage(validation.sanitizedInput, {
+                    threadId: thread.id,
+                });
+            }
+            else {
+                setInputValue(validation.sanitizedInput);
+            }
+            setSelectedSuggestionId(suggestion.id);
+        },
+    });
+    // Generate suggestions mutation
+    const generateMutationState = (0, react_query_hooks_1.useTamboMutationResult)({
+        mutationFn: async (abortController) => {
+            if (!latestMessageId || !isLatestFromTambo) {
+                return undefined;
+            }
+            // Get registered components from the registry
+            const components = (0, registry_1.getAvailableComponents)(componentList, toolRegistry, componentToolAssociations);
+            return tamboClient.beta.threads.suggestions.generate(thread.id, latestMessageId, {
+                maxSuggestions,
+                // The API expects an array of arrays for availableComponents
+                availableComponents: [components],
+            }, { signal: abortController.signal });
+        },
+        // Don't retry on failure
+        retry: false,
+    });
+    // Use the query data if available, otherwise use the mutation data
+    // Only return suggestions if the latest message is from hydra
+    const suggestions = isLatestFromTambo
+        ? (suggestionsQuery.data ?? generateMutationState.data ?? [])
+        : [];
+    return {
+        suggestions,
+        accept: acceptMutationState.mutateAsync,
+        selectedSuggestionId,
+        acceptResult: acceptMutationState,
+        generateResult: generateMutationState,
+        ...(0, query_utils_1.combineMutationResults)(acceptMutationState, generateMutationState),
+    };
+}
+//# sourceMappingURL=use-suggestions.js.map

package/dist/hooks/use-suggestions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-suggestions.js","sourceRoot":"","sources":["../../src/hooks/use-suggestions.ts"],"names":[],"mappings":"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","sourcesContent":["import TamboAI from \"@tambo-ai/typescript-sdk\";\nimport { useEffect, useState } from \"react\";\nimport { validateInput } from \"../model/validate-input\";\nimport { useTamboClient } from \"../providers/tambo-client-provider\";\nimport { useTambo } from \"../providers/tambo-provider\";\nimport { useTamboRegistry } from \"../providers/tambo-registry-provider\";\nimport { useTamboThread } from \"../providers/tambo-thread-provider\";\nimport {\n  CombinedMutationResult,\n  combineMutationResults,\n} from \"../util/query-utils\";\nimport { getAvailableComponents } from \"../util/registry\";\nimport {\n  UseTamboMutationResult,\n  useTamboMutationResult,\n  useTamboQuery,\n} from \"./react-query-hooks\";\nimport { INPUT_ERROR_MESSAGES, useTamboThreadInput } from \"./use-thread-input\";\n\n/**\n * Configuration options for the useTamboSuggestions hook\n */\nexport interface useTamboSuggestionsOptions {\n  /** Maximum number of suggestions to generate (1-10, default 3) */\n  maxSuggestions?: number;\n}\n\n/**\n * Return value interface for useTamboSuggestions hook\n */\nexport interface useTamboSuggestionsResultInternal {\n  /** List of available suggestions (also available in generateResult.data) */\n  suggestions: TamboAI.Beta.Threads.Suggestion[];\n  /** ID of the currently selected suggestion */\n  selectedSuggestionId: string | null;\n  /**\n   * Accept and apply a suggestion (also available in acceptResult.mutateAsync)\n   * @param suggestion - The suggestion to accept\n   * @param shouldSubmit - Whether to automatically submit after accepting (default: false)\n   */\n  accept: (acceptOptions: {\n    suggestion: TamboAI.Beta.Threads.Suggestion;\n    shouldSubmit?: boolean;\n  }) => Promise<void>;\n\n  /** Result and network state for accepting a suggestion */\n  acceptResult: UseTamboMutationResult<\n    void,\n    Error,\n    { suggestion: TamboAI.Beta.Threads.Suggestion; shouldSubmit?: boolean }\n  >;\n\n  /** Result and network state for generating suggestions */\n  generateResult: UseTamboMutationResult<\n    TamboAI.Beta.Threads.Suggestions.SuggestionGenerateResponse | undefined,\n    Error,\n    AbortController\n  >;\n}\n\ntype useTamboSuggestionsResult = CombinedMutationResult<any, Error> &\n  useTamboSuggestionsResultInternal;\n\n/**\n * Hook for managing Tambo AI suggestions in a thread\n *\n * @param options - Configuration options for suggestion generation\n * @returns Object containing suggestions state and control functions\n */\nexport function useTamboSuggestions(\n  options: useTamboSuggestionsOptions = {},\n): useTamboSuggestionsResult {\n  const { maxSuggestions = 3 } = options;\n  const { thread } = useTamboThread();\n  const { sendThreadMessage } = useTambo();\n  const tamboClient = useTamboClient();\n  const { componentList, toolRegistry, componentToolAssociations } =\n    useTamboRegistry();\n\n  const [selectedSuggestionId, setSelectedSuggestionId] = useState<\n    string | null\n  >(null);\n  const { setValue: setInputValue } = useTamboThreadInput();\n\n  const latestMessage = thread.messages[thread.messages.length - 1];\n  const isLatestFromTambo = latestMessage?.role === \"hydra\"; // TODO: change to tambo\n  const latestMessageId = latestMessage?.id;\n\n  // Reset selected suggestion when the message changes\n  useEffect(() => {\n    setSelectedSuggestionId(null);\n  }, [latestMessageId]);\n\n  // Use React Query to fetch suggestions when a new hydra message is received\n  const suggestionsQuery = useTamboQuery({\n    // Only include latestMessageId in the queryKey if the message is from hydra\n    queryKey: [\"suggestions\", isLatestFromTambo ? latestMessageId : null],\n    queryFn: async () => {\n      if (!latestMessageId || !isLatestFromTambo) {\n        return [];\n      }\n\n      // Get registered components from the registry\n      const components = getAvailableComponents(\n        componentList,\n        toolRegistry,\n        componentToolAssociations,\n      );\n\n      return tamboClient.beta.threads.suggestions.generate(\n        thread.id,\n        latestMessageId,\n        {\n          maxSuggestions,\n          // The API expects an array of arrays for availableComponents\n          availableComponents: [components],\n        },\n      );\n    },\n    // Only run the query if we have a valid message from hydra\n    enabled: Boolean(latestMessageId && isLatestFromTambo),\n    // Don't refetch on window focus or reconnect\n    refetchOnWindowFocus: false,\n    refetchOnReconnect: false,\n    // Don't retry on failure\n    retry: false,\n  });\n\n  // Accept suggestion mutation\n  const acceptMutationState = useTamboMutationResult<\n    void,\n    Error,\n    { suggestion: TamboAI.Beta.Threads.Suggestion; shouldSubmit?: boolean }\n  >({\n    mutationFn: async ({ suggestion, shouldSubmit = false }) => {\n      const validation = validateInput(suggestion.detailedSuggestion);\n      if (!validation.isValid) {\n        if (validation.error) {\n          throw validation.error;\n        }\n        throw new Error(INPUT_ERROR_MESSAGES.VALIDATION);\n      }\n\n      if (shouldSubmit) {\n        await sendThreadMessage(validation.sanitizedInput, {\n          threadId: thread.id,\n        });\n      } else {\n        setInputValue(validation.sanitizedInput);\n      }\n      setSelectedSuggestionId(suggestion.id);\n    },\n  });\n\n  // Generate suggestions mutation\n  const generateMutationState = useTamboMutationResult<\n    TamboAI.Beta.Threads.Suggestions.SuggestionGenerateResponse | undefined,\n    Error,\n    AbortController\n  >({\n    mutationFn: async (abortController: AbortController) => {\n      if (!latestMessageId || !isLatestFromTambo) {\n        return undefined;\n      }\n\n      // Get registered components from the registry\n      const components = getAvailableComponents(\n        componentList,\n        toolRegistry,\n        componentToolAssociations,\n      );\n\n      return tamboClient.beta.threads.suggestions.generate(\n        thread.id,\n        latestMessageId,\n        {\n          maxSuggestions,\n          // The API expects an array of arrays for availableComponents\n          availableComponents: [components],\n        },\n        { signal: abortController.signal },\n      );\n    },\n    // Don't retry on failure\n    retry: false,\n  });\n\n  // Use the query data if available, otherwise use the mutation data\n  // Only return suggestions if the latest message is from hydra\n  const suggestions = isLatestFromTambo\n    ? (suggestionsQuery.data ?? generateMutationState.data ?? [])\n    : [];\n\n  return {\n    suggestions,\n    accept: acceptMutationState.mutateAsync,\n    selectedSuggestionId,\n    acceptResult: acceptMutationState,\n    generateResult: generateMutationState,\n    ...combineMutationResults(acceptMutationState, generateMutationState),\n  };\n}\n"]}