@tambo-ai/react 0.72.0 → 0.73.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mcp/mcp-hooks.d.ts +4 -0
- package/dist/mcp/mcp-hooks.d.ts.map +1 -1
- package/dist/mcp/mcp-hooks.js +4 -0
- package/dist/mcp/mcp-hooks.js.map +1 -1
- package/dist/providers/tambo-provider.d.ts +3 -0
- package/dist/providers/tambo-provider.d.ts.map +1 -1
- package/dist/providers/tambo-provider.js +3 -0
- package/dist/providers/tambo-provider.js.map +1 -1
- package/dist/util/resource-content-resolver.d.ts.map +1 -1
- package/dist/util/resource-content-resolver.js +2 -0
- package/dist/util/resource-content-resolver.js.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-messages.test.js +22 -9
- package/dist/v1/hooks/use-tambo-v1-messages.test.js.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-send-message.d.ts +1 -0
- package/dist/v1/hooks/use-tambo-v1-send-message.d.ts.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-send-message.js +9 -2
- package/dist/v1/hooks/use-tambo-v1-send-message.js.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-send-message.test.js +22 -9
- package/dist/v1/hooks/use-tambo-v1-send-message.test.js.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-suggestions.d.ts +91 -0
- package/dist/v1/hooks/use-tambo-v1-suggestions.d.ts.map +1 -0
- package/dist/v1/hooks/use-tambo-v1-suggestions.js +152 -0
- package/dist/v1/hooks/use-tambo-v1-suggestions.js.map +1 -0
- package/dist/v1/hooks/use-tambo-v1-suggestions.test.d.ts +2 -0
- package/dist/v1/hooks/use-tambo-v1-suggestions.test.d.ts.map +1 -0
- package/dist/v1/hooks/use-tambo-v1-suggestions.test.js +511 -0
- package/dist/v1/hooks/use-tambo-v1-suggestions.test.js.map +1 -0
- package/dist/v1/hooks/use-tambo-v1-thread-input.d.ts +6 -57
- package/dist/v1/hooks/use-tambo-v1-thread-input.d.ts.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-thread-input.js +7 -67
- package/dist/v1/hooks/use-tambo-v1-thread-input.js.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-thread-input.test.js +201 -72
- package/dist/v1/hooks/use-tambo-v1-thread-input.test.js.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-thread-list.d.ts +6 -4
- package/dist/v1/hooks/use-tambo-v1-thread-list.d.ts.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-thread-list.js +2 -2
- package/dist/v1/hooks/use-tambo-v1-thread-list.js.map +1 -1
- package/dist/v1/hooks/use-tambo-v1-thread-list.test.js +2 -2
- package/dist/v1/hooks/use-tambo-v1-thread-list.test.js.map +1 -1
- package/dist/v1/hooks/use-tambo-v1.test.js +16 -7
- package/dist/v1/hooks/use-tambo-v1.test.js.map +1 -1
- package/dist/v1/index.d.ts +22 -13
- package/dist/v1/index.d.ts.map +1 -1
- package/dist/v1/index.js +31 -39
- package/dist/v1/index.js.map +1 -1
- package/dist/v1/providers/tambo-v1-provider.d.ts +27 -9
- package/dist/v1/providers/tambo-v1-provider.d.ts.map +1 -1
- package/dist/v1/providers/tambo-v1-provider.js +22 -11
- package/dist/v1/providers/tambo-v1-provider.js.map +1 -1
- package/dist/v1/providers/tambo-v1-provider.test.js +27 -10
- package/dist/v1/providers/tambo-v1-provider.test.js.map +1 -1
- package/dist/v1/providers/tambo-v1-stream-context.d.ts +19 -10
- package/dist/v1/providers/tambo-v1-stream-context.d.ts.map +1 -1
- package/dist/v1/providers/tambo-v1-stream-context.js +43 -53
- package/dist/v1/providers/tambo-v1-stream-context.js.map +1 -1
- package/dist/v1/providers/tambo-v1-stream-context.test.js +94 -19
- package/dist/v1/providers/tambo-v1-stream-context.test.js.map +1 -1
- package/dist/v1/providers/tambo-v1-stub-provider.d.ts +74 -0
- package/dist/v1/providers/tambo-v1-stub-provider.d.ts.map +1 -0
- package/dist/v1/providers/tambo-v1-stub-provider.js +212 -0
- package/dist/v1/providers/tambo-v1-stub-provider.js.map +1 -0
- package/dist/v1/providers/tambo-v1-stub-provider.test.d.ts +2 -0
- package/dist/v1/providers/tambo-v1-stub-provider.test.d.ts.map +1 -0
- package/dist/v1/providers/tambo-v1-stub-provider.test.js +162 -0
- package/dist/v1/providers/tambo-v1-stub-provider.test.js.map +1 -0
- package/dist/v1/providers/tambo-v1-thread-input-provider.d.ts +105 -0
- package/dist/v1/providers/tambo-v1-thread-input-provider.d.ts.map +1 -0
- package/dist/v1/providers/tambo-v1-thread-input-provider.js +191 -0
- package/dist/v1/providers/tambo-v1-thread-input-provider.js.map +1 -0
- package/dist/v1/utils/component-renderer.d.ts +15 -67
- package/dist/v1/utils/component-renderer.d.ts.map +1 -1
- package/dist/v1/utils/component-renderer.js +3 -149
- package/dist/v1/utils/component-renderer.js.map +1 -1
- package/dist/v1/utils/component-renderer.test.js +15 -350
- package/dist/v1/utils/component-renderer.test.js.map +1 -1
- package/esm/mcp/mcp-hooks.d.ts +4 -0
- package/esm/mcp/mcp-hooks.d.ts.map +1 -1
- package/esm/mcp/mcp-hooks.js +4 -0
- package/esm/mcp/mcp-hooks.js.map +1 -1
- package/esm/providers/tambo-provider.d.ts +3 -0
- package/esm/providers/tambo-provider.d.ts.map +1 -1
- package/esm/providers/tambo-provider.js +3 -0
- package/esm/providers/tambo-provider.js.map +1 -1
- package/esm/util/resource-content-resolver.d.ts.map +1 -1
- package/esm/util/resource-content-resolver.js +2 -0
- package/esm/util/resource-content-resolver.js.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-messages.test.js +22 -9
- package/esm/v1/hooks/use-tambo-v1-messages.test.js.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-send-message.d.ts +1 -0
- package/esm/v1/hooks/use-tambo-v1-send-message.d.ts.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-send-message.js +9 -2
- package/esm/v1/hooks/use-tambo-v1-send-message.js.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-send-message.test.js +22 -9
- package/esm/v1/hooks/use-tambo-v1-send-message.test.js.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-suggestions.d.ts +91 -0
- package/esm/v1/hooks/use-tambo-v1-suggestions.d.ts.map +1 -0
- package/esm/v1/hooks/use-tambo-v1-suggestions.js +149 -0
- package/esm/v1/hooks/use-tambo-v1-suggestions.js.map +1 -0
- package/esm/v1/hooks/use-tambo-v1-suggestions.test.d.ts +2 -0
- package/esm/v1/hooks/use-tambo-v1-suggestions.test.d.ts.map +1 -0
- package/esm/v1/hooks/use-tambo-v1-suggestions.test.js +506 -0
- package/esm/v1/hooks/use-tambo-v1-suggestions.test.js.map +1 -0
- package/esm/v1/hooks/use-tambo-v1-thread-input.d.ts +6 -57
- package/esm/v1/hooks/use-tambo-v1-thread-input.d.ts.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-thread-input.js +5 -66
- package/esm/v1/hooks/use-tambo-v1-thread-input.js.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-thread-input.test.js +199 -73
- package/esm/v1/hooks/use-tambo-v1-thread-input.test.js.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-thread-list.d.ts +6 -4
- package/esm/v1/hooks/use-tambo-v1-thread-list.d.ts.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-thread-list.js +2 -2
- package/esm/v1/hooks/use-tambo-v1-thread-list.js.map +1 -1
- package/esm/v1/hooks/use-tambo-v1-thread-list.test.js +2 -2
- package/esm/v1/hooks/use-tambo-v1-thread-list.test.js.map +1 -1
- package/esm/v1/hooks/use-tambo-v1.test.js +16 -7
- package/esm/v1/hooks/use-tambo-v1.test.js.map +1 -1
- package/esm/v1/index.d.ts +22 -13
- package/esm/v1/index.d.ts.map +1 -1
- package/esm/v1/index.js +23 -18
- package/esm/v1/index.js.map +1 -1
- package/esm/v1/providers/tambo-v1-provider.d.ts +27 -9
- package/esm/v1/providers/tambo-v1-provider.d.ts.map +1 -1
- package/esm/v1/providers/tambo-v1-provider.js +20 -10
- package/esm/v1/providers/tambo-v1-provider.js.map +1 -1
- package/esm/v1/providers/tambo-v1-provider.test.js +28 -11
- package/esm/v1/providers/tambo-v1-provider.test.js.map +1 -1
- package/esm/v1/providers/tambo-v1-stream-context.d.ts +19 -10
- package/esm/v1/providers/tambo-v1-stream-context.d.ts.map +1 -1
- package/esm/v1/providers/tambo-v1-stream-context.js +44 -54
- package/esm/v1/providers/tambo-v1-stream-context.js.map +1 -1
- package/esm/v1/providers/tambo-v1-stream-context.test.js +95 -20
- package/esm/v1/providers/tambo-v1-stream-context.test.js.map +1 -1
- package/esm/v1/providers/tambo-v1-stub-provider.d.ts +74 -0
- package/esm/v1/providers/tambo-v1-stub-provider.d.ts.map +1 -0
- package/esm/v1/providers/tambo-v1-stub-provider.js +176 -0
- package/esm/v1/providers/tambo-v1-stub-provider.js.map +1 -0
- package/esm/v1/providers/tambo-v1-stub-provider.test.d.ts +2 -0
- package/esm/v1/providers/tambo-v1-stub-provider.test.d.ts.map +1 -0
- package/esm/v1/providers/tambo-v1-stub-provider.test.js +157 -0
- package/esm/v1/providers/tambo-v1-stub-provider.test.js.map +1 -0
- package/esm/v1/providers/tambo-v1-thread-input-provider.d.ts +105 -0
- package/esm/v1/providers/tambo-v1-thread-input-provider.d.ts.map +1 -0
- package/esm/v1/providers/tambo-v1-thread-input-provider.js +153 -0
- package/esm/v1/providers/tambo-v1-thread-input-provider.js.map +1 -0
- package/esm/v1/utils/component-renderer.d.ts +15 -67
- package/esm/v1/utils/component-renderer.d.ts.map +1 -1
- package/esm/v1/utils/component-renderer.js +4 -146
- package/esm/v1/utils/component-renderer.js.map +1 -1
- package/esm/v1/utils/component-renderer.test.js +16 -351
- package/esm/v1/utils/component-renderer.test.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* TamboV1ThreadInputProvider - Shared Thread Input Context for v1 API
|
|
3
|
+
*
|
|
4
|
+
* Provides shared input state across all components, enabling features like
|
|
5
|
+
* suggestions to update the input field directly.
|
|
6
|
+
*
|
|
7
|
+
* This mirrors the beta SDK's TamboThreadInputProvider pattern.
|
|
8
|
+
*/
|
|
9
|
+
import React, { type PropsWithChildren } from "react";
|
|
10
|
+
import { type StagedImage } from "../../hooks/use-message-images";
|
|
11
|
+
import { type UseTamboMutationResult } from "../../hooks/react-query-hooks";
|
|
12
|
+
export declare const INPUT_ERROR_MESSAGES: {
|
|
13
|
+
readonly EMPTY: "Message cannot be empty";
|
|
14
|
+
readonly VALIDATION: "Invalid message format";
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Options for submitting a message
|
|
18
|
+
*/
|
|
19
|
+
export interface SubmitOptions {
|
|
20
|
+
/**
|
|
21
|
+
* Enable debug logging for the stream
|
|
22
|
+
*/
|
|
23
|
+
debug?: boolean;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Context props for thread input state
|
|
27
|
+
*/
|
|
28
|
+
export interface TamboV1ThreadInputContextProps extends Omit<UseTamboMutationResult<{
|
|
29
|
+
threadId: string | undefined;
|
|
30
|
+
}, Error, SubmitOptions | undefined>, "mutate" | "mutateAsync"> {
|
|
31
|
+
/** Current value of the input field */
|
|
32
|
+
value: string;
|
|
33
|
+
/**
|
|
34
|
+
* Function to update the input value
|
|
35
|
+
* @param value - New value for the input field
|
|
36
|
+
*/
|
|
37
|
+
setValue: React.Dispatch<React.SetStateAction<string>>;
|
|
38
|
+
/**
|
|
39
|
+
* Function to submit the current input value
|
|
40
|
+
* @param options - Submission options
|
|
41
|
+
* @returns Promise with the threadId
|
|
42
|
+
*/
|
|
43
|
+
submit: (options?: SubmitOptions) => Promise<{
|
|
44
|
+
threadId: string | undefined;
|
|
45
|
+
}>;
|
|
46
|
+
/** Currently staged images */
|
|
47
|
+
images: StagedImage[];
|
|
48
|
+
/** Add a single image */
|
|
49
|
+
addImage: (file: File) => Promise<void>;
|
|
50
|
+
/** Add multiple images */
|
|
51
|
+
addImages: (files: File[]) => Promise<void>;
|
|
52
|
+
/** Remove an image by id */
|
|
53
|
+
removeImage: (id: string) => void;
|
|
54
|
+
/** Clear all staged images */
|
|
55
|
+
clearImages: () => void;
|
|
56
|
+
/** Current thread ID being used for input */
|
|
57
|
+
threadId: string | undefined;
|
|
58
|
+
/**
|
|
59
|
+
* Set the thread ID for input submission.
|
|
60
|
+
* If not set, a new thread will be created on submit.
|
|
61
|
+
*/
|
|
62
|
+
setThreadId: React.Dispatch<React.SetStateAction<string | undefined>>;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Context for thread input state.
|
|
66
|
+
* @internal
|
|
67
|
+
*/
|
|
68
|
+
export declare const TamboV1ThreadInputContext: React.Context<TamboV1ThreadInputContextProps | undefined>;
|
|
69
|
+
/**
|
|
70
|
+
* Provider that manages shared thread input state across all components.
|
|
71
|
+
*
|
|
72
|
+
* This ensures that useTamboV1ThreadInput, useTamboV1Suggestions, and other components
|
|
73
|
+
* all share the same input state.
|
|
74
|
+
* @param props - Provider props
|
|
75
|
+
* @param props.children - Child components
|
|
76
|
+
* @returns Thread input context provider
|
|
77
|
+
*/
|
|
78
|
+
export declare function TamboV1ThreadInputProvider({ children }: PropsWithChildren): React.JSX.Element;
|
|
79
|
+
/**
|
|
80
|
+
* Hook to access the shared thread input state.
|
|
81
|
+
*
|
|
82
|
+
* All components using this hook share the same input state, enabling
|
|
83
|
+
* features like suggestions to update the input field directly.
|
|
84
|
+
* @returns The shared thread input context
|
|
85
|
+
* @throws {Error} If used outside TamboV1ThreadInputProvider
|
|
86
|
+
* @example
|
|
87
|
+
* ```tsx
|
|
88
|
+
* function ChatInput() {
|
|
89
|
+
* const { value, setValue, submit, isPending } = useTamboV1ThreadInput();
|
|
90
|
+
*
|
|
91
|
+
* return (
|
|
92
|
+
* <form onSubmit={(e) => { e.preventDefault(); submit(); }}>
|
|
93
|
+
* <input
|
|
94
|
+
* value={value}
|
|
95
|
+
* onChange={(e) => setValue(e.target.value)}
|
|
96
|
+
* disabled={isPending}
|
|
97
|
+
* />
|
|
98
|
+
* <button type="submit" disabled={isPending}>Send</button>
|
|
99
|
+
* </form>
|
|
100
|
+
* );
|
|
101
|
+
* }
|
|
102
|
+
* ```
|
|
103
|
+
*/
|
|
104
|
+
export declare function useTamboV1ThreadInput(): TamboV1ThreadInputContextProps;
|
|
105
|
+
//# sourceMappingURL=tambo-v1-thread-input-provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tambo-v1-thread-input-provider.d.ts","sourceRoot":"","sources":["../../../src/v1/providers/tambo-v1-thread-input-provider.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,WAAW,EACjB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,+BAA+B,CAAC;AASvC,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAkCX;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,IAAI,CAC1D,sBAAsB,CACpB;IAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,EAChC,KAAK,EACL,aAAa,GAAG,SAAS,CAC1B,EACD,QAAQ,GAAG,aAAa,CACzB;IACC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAEvD;;;;OAIG;IACH,MAAM,EAAE,CACN,OAAO,CAAC,EAAE,aAAa,KACpB,OAAO,CAAC;QAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC,CAAC;IAE/C,8BAA8B;IAC9B,MAAM,EAAE,WAAW,EAAE,CAAC;IAEtB,yBAAyB;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAExC,0BAA0B;IAC1B,SAAS,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE5C,4BAA4B;IAC5B,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,8BAA8B;IAC9B,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B;;;OAGG;IACH,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CACvE;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,2DAE1B,CAAC;AAEb;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBAoFzE;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,qBAAqB,IAAI,8BAA8B,CAQtE"}
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.TamboV1ThreadInputContext = exports.INPUT_ERROR_MESSAGES = void 0;
|
|
38
|
+
exports.TamboV1ThreadInputProvider = TamboV1ThreadInputProvider;
|
|
39
|
+
exports.useTamboV1ThreadInput = useTamboV1ThreadInput;
|
|
40
|
+
/**
|
|
41
|
+
* TamboV1ThreadInputProvider - Shared Thread Input Context for v1 API
|
|
42
|
+
*
|
|
43
|
+
* Provides shared input state across all components, enabling features like
|
|
44
|
+
* suggestions to update the input field directly.
|
|
45
|
+
*
|
|
46
|
+
* This mirrors the beta SDK's TamboThreadInputProvider pattern.
|
|
47
|
+
*/
|
|
48
|
+
const react_1 = __importStar(require("react"));
|
|
49
|
+
const use_message_images_1 = require("../../hooks/use-message-images");
|
|
50
|
+
const react_query_hooks_1 = require("../../hooks/react-query-hooks");
|
|
51
|
+
const use_tambo_v1_send_message_1 = require("../hooks/use-tambo-v1-send-message");
|
|
52
|
+
const tambo_v1_stream_context_1 = require("./tambo-v1-stream-context");
|
|
53
|
+
// Error messages for various input-related error scenarios.
|
|
54
|
+
// TODO: Reintroduce explicit `NETWORK` and `SERVER` keys once `submit()` maps
|
|
55
|
+
// failures into a small, stable set of user-facing error codes (at minimum:
|
|
56
|
+
// connectivity failures vs non-2xx responses).
|
|
57
|
+
exports.INPUT_ERROR_MESSAGES = {
|
|
58
|
+
EMPTY: "Message cannot be empty",
|
|
59
|
+
VALIDATION: "Invalid message format",
|
|
60
|
+
};
|
|
61
|
+
function stagedImageToResourceContent(image) {
|
|
62
|
+
if (!image.dataUrl.startsWith("data:")) {
|
|
63
|
+
throw new Error(exports.INPUT_ERROR_MESSAGES.VALIDATION);
|
|
64
|
+
}
|
|
65
|
+
const commaIndex = image.dataUrl.indexOf(",");
|
|
66
|
+
if (commaIndex === -1) {
|
|
67
|
+
throw new Error(exports.INPUT_ERROR_MESSAGES.VALIDATION);
|
|
68
|
+
}
|
|
69
|
+
const header = image.dataUrl.slice("data:".length, commaIndex);
|
|
70
|
+
const [mimeType, ...params] = header.split(";");
|
|
71
|
+
const isBase64 = params.includes("base64");
|
|
72
|
+
if (mimeType !== image.type || !isBase64) {
|
|
73
|
+
throw new Error(exports.INPUT_ERROR_MESSAGES.VALIDATION);
|
|
74
|
+
}
|
|
75
|
+
return {
|
|
76
|
+
type: "resource",
|
|
77
|
+
resource: {
|
|
78
|
+
name: image.name,
|
|
79
|
+
mimeType: image.type,
|
|
80
|
+
// Shared.Resource.blob expects base64-encoded data; this is the base64
|
|
81
|
+
// payload from the `data:` URL.
|
|
82
|
+
blob: image.dataUrl.slice(commaIndex + 1),
|
|
83
|
+
},
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Context for thread input state.
|
|
88
|
+
* @internal
|
|
89
|
+
*/
|
|
90
|
+
exports.TamboV1ThreadInputContext = (0, react_1.createContext)(undefined);
|
|
91
|
+
/**
|
|
92
|
+
* Provider that manages shared thread input state across all components.
|
|
93
|
+
*
|
|
94
|
+
* This ensures that useTamboV1ThreadInput, useTamboV1Suggestions, and other components
|
|
95
|
+
* all share the same input state.
|
|
96
|
+
* @param props - Provider props
|
|
97
|
+
* @param props.children - Child components
|
|
98
|
+
* @returns Thread input context provider
|
|
99
|
+
*/
|
|
100
|
+
function TamboV1ThreadInputProvider({ children }) {
|
|
101
|
+
const [inputValue, setInputValue] = (0, react_1.useState)("");
|
|
102
|
+
const [threadId, setThreadId] = (0, react_1.useState)(undefined);
|
|
103
|
+
const imageState = (0, use_message_images_1.useMessageImages)();
|
|
104
|
+
const streamState = (0, tambo_v1_stream_context_1.useStreamState)();
|
|
105
|
+
// Use the current thread from stream state if no explicit threadId is set
|
|
106
|
+
const inheritedThreadId = streamState.currentThreadId ?? undefined;
|
|
107
|
+
const effectiveThreadId = threadId ?? inheritedThreadId;
|
|
108
|
+
const shouldAdoptThreadId = threadId === undefined && inheritedThreadId === undefined;
|
|
109
|
+
const sendMessage = (0, use_tambo_v1_send_message_1.useTamboV1SendMessage)(effectiveThreadId);
|
|
110
|
+
const submitFn = (0, react_1.useCallback)(async (options) => {
|
|
111
|
+
const trimmedValue = inputValue.trim();
|
|
112
|
+
// Check if we have content to send
|
|
113
|
+
if (!trimmedValue && imageState.images.length === 0) {
|
|
114
|
+
throw new Error(exports.INPUT_ERROR_MESSAGES.EMPTY);
|
|
115
|
+
}
|
|
116
|
+
const content = [];
|
|
117
|
+
if (trimmedValue) {
|
|
118
|
+
content.push({ type: "text", text: trimmedValue });
|
|
119
|
+
}
|
|
120
|
+
for (const image of imageState.images) {
|
|
121
|
+
content.push(stagedImageToResourceContent(image));
|
|
122
|
+
}
|
|
123
|
+
const result = await sendMessage.mutateAsync({
|
|
124
|
+
message: {
|
|
125
|
+
role: "user",
|
|
126
|
+
content,
|
|
127
|
+
},
|
|
128
|
+
debug: options?.debug,
|
|
129
|
+
});
|
|
130
|
+
// Clear input and images after successful submission
|
|
131
|
+
setInputValue("");
|
|
132
|
+
imageState.clearImages();
|
|
133
|
+
// Update threadId if a new thread was created
|
|
134
|
+
if (result.threadId && shouldAdoptThreadId) {
|
|
135
|
+
setThreadId(result.threadId);
|
|
136
|
+
}
|
|
137
|
+
return result;
|
|
138
|
+
},
|
|
139
|
+
// `stagedImageToResourceContent` is a pure module-level helper (not a hook value).
|
|
140
|
+
[inputValue, imageState, sendMessage, shouldAdoptThreadId]);
|
|
141
|
+
const { mutateAsync: submitAsync, mutate: _unusedSubmit, ...mutationState } = (0, react_query_hooks_1.useTamboMutation)({
|
|
142
|
+
mutationFn: submitFn,
|
|
143
|
+
});
|
|
144
|
+
const contextValue = {
|
|
145
|
+
...mutationState,
|
|
146
|
+
value: inputValue,
|
|
147
|
+
setValue: setInputValue,
|
|
148
|
+
submit: submitAsync,
|
|
149
|
+
images: imageState.images,
|
|
150
|
+
addImage: imageState.addImage,
|
|
151
|
+
addImages: imageState.addImages,
|
|
152
|
+
removeImage: imageState.removeImage,
|
|
153
|
+
clearImages: imageState.clearImages,
|
|
154
|
+
threadId: effectiveThreadId,
|
|
155
|
+
setThreadId,
|
|
156
|
+
};
|
|
157
|
+
return (react_1.default.createElement(exports.TamboV1ThreadInputContext.Provider, { value: contextValue }, children));
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* Hook to access the shared thread input state.
|
|
161
|
+
*
|
|
162
|
+
* All components using this hook share the same input state, enabling
|
|
163
|
+
* features like suggestions to update the input field directly.
|
|
164
|
+
* @returns The shared thread input context
|
|
165
|
+
* @throws {Error} If used outside TamboV1ThreadInputProvider
|
|
166
|
+
* @example
|
|
167
|
+
* ```tsx
|
|
168
|
+
* function ChatInput() {
|
|
169
|
+
* const { value, setValue, submit, isPending } = useTamboV1ThreadInput();
|
|
170
|
+
*
|
|
171
|
+
* return (
|
|
172
|
+
* <form onSubmit={(e) => { e.preventDefault(); submit(); }}>
|
|
173
|
+
* <input
|
|
174
|
+
* value={value}
|
|
175
|
+
* onChange={(e) => setValue(e.target.value)}
|
|
176
|
+
* disabled={isPending}
|
|
177
|
+
* />
|
|
178
|
+
* <button type="submit" disabled={isPending}>Send</button>
|
|
179
|
+
* </form>
|
|
180
|
+
* );
|
|
181
|
+
* }
|
|
182
|
+
* ```
|
|
183
|
+
*/
|
|
184
|
+
function useTamboV1ThreadInput() {
|
|
185
|
+
const context = (0, react_1.useContext)(exports.TamboV1ThreadInputContext);
|
|
186
|
+
if (!context) {
|
|
187
|
+
throw new Error("useTamboV1ThreadInput must be used within TamboV1ThreadInputProvider");
|
|
188
|
+
}
|
|
189
|
+
return context;
|
|
190
|
+
}
|
|
191
|
+
//# sourceMappingURL=tambo-v1-thread-input-provider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tambo-v1-thread-input-provider.js","sourceRoot":"","sources":["../../../src/v1/providers/tambo-v1-thread-input-provider.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\n/**\n * TamboV1ThreadInputProvider - Shared Thread Input Context for v1 API\n *\n * Provides shared input state across all components, enabling features like\n * suggestions to update the input field directly.\n *\n * This mirrors the beta SDK's TamboThreadInputProvider pattern.\n */\n\nimport React, {\n createContext,\n useCallback,\n useContext,\n useState,\n type PropsWithChildren,\n} from \"react\";\nimport {\n useMessageImages,\n type StagedImage,\n} from \"../../hooks/use-message-images\";\nimport {\n useTamboMutation,\n type UseTamboMutationResult,\n} from \"../../hooks/react-query-hooks\";\nimport { useTamboV1SendMessage } from \"../hooks/use-tambo-v1-send-message\";\nimport type { InputMessage } from \"../types/message\";\nimport { useStreamState } from \"./tambo-v1-stream-context\";\n\n// Error messages for various input-related error scenarios.\n// TODO: Reintroduce explicit `NETWORK` and `SERVER` keys once `submit()` maps\n// failures into a small, stable set of user-facing error codes (at minimum:\n// connectivity failures vs non-2xx responses).\nexport const INPUT_ERROR_MESSAGES = {\n EMPTY: \"Message cannot be empty\",\n VALIDATION: \"Invalid message format\",\n} as const;\n\nfunction stagedImageToResourceContent(\n image: StagedImage,\n): InputMessage[\"content\"][number] {\n if (!image.dataUrl.startsWith(\"data:\")) {\n throw new Error(INPUT_ERROR_MESSAGES.VALIDATION);\n }\n\n const commaIndex = image.dataUrl.indexOf(\",\");\n if (commaIndex === -1) {\n throw new Error(INPUT_ERROR_MESSAGES.VALIDATION);\n }\n\n const header = image.dataUrl.slice(\"data:\".length, commaIndex);\n const [mimeType, ...params] = header.split(\";\");\n const isBase64 = params.includes(\"base64\");\n\n if (mimeType !== image.type || !isBase64) {\n throw new Error(INPUT_ERROR_MESSAGES.VALIDATION);\n }\n\n return {\n type: \"resource\",\n resource: {\n name: image.name,\n mimeType: image.type,\n // Shared.Resource.blob expects base64-encoded data; this is the base64\n // payload from the `data:` URL.\n blob: image.dataUrl.slice(commaIndex + 1),\n },\n };\n}\n\n/**\n * Options for submitting a message\n */\nexport interface SubmitOptions {\n /**\n * Enable debug logging for the stream\n */\n debug?: boolean;\n}\n\n/**\n * Context props for thread input state\n */\nexport interface TamboV1ThreadInputContextProps extends Omit<\n UseTamboMutationResult<\n { threadId: string | undefined },\n Error,\n SubmitOptions | undefined\n >,\n \"mutate\" | \"mutateAsync\"\n> {\n /** Current value of the input field */\n value: string;\n\n /**\n * Function to update the input value\n * @param value - New value for the input field\n */\n setValue: React.Dispatch<React.SetStateAction<string>>;\n\n /**\n * Function to submit the current input value\n * @param options - Submission options\n * @returns Promise with the threadId\n */\n submit: (\n options?: SubmitOptions,\n ) => Promise<{ threadId: string | undefined }>;\n\n /** Currently staged images */\n images: StagedImage[];\n\n /** Add a single image */\n addImage: (file: File) => Promise<void>;\n\n /** Add multiple images */\n addImages: (files: File[]) => Promise<void>;\n\n /** Remove an image by id */\n removeImage: (id: string) => void;\n\n /** Clear all staged images */\n clearImages: () => void;\n\n /** Current thread ID being used for input */\n threadId: string | undefined;\n\n /**\n * Set the thread ID for input submission.\n * If not set, a new thread will be created on submit.\n */\n setThreadId: React.Dispatch<React.SetStateAction<string | undefined>>;\n}\n\n/**\n * Context for thread input state.\n * @internal\n */\nexport const TamboV1ThreadInputContext = createContext<\n TamboV1ThreadInputContextProps | undefined\n>(undefined);\n\n/**\n * Provider that manages shared thread input state across all components.\n *\n * This ensures that useTamboV1ThreadInput, useTamboV1Suggestions, and other components\n * all share the same input state.\n * @param props - Provider props\n * @param props.children - Child components\n * @returns Thread input context provider\n */\nexport function TamboV1ThreadInputProvider({ children }: PropsWithChildren) {\n const [inputValue, setInputValue] = useState(\"\");\n const [threadId, setThreadId] = useState<string | undefined>(undefined);\n const imageState = useMessageImages();\n const streamState = useStreamState();\n\n // Use the current thread from stream state if no explicit threadId is set\n const inheritedThreadId = streamState.currentThreadId ?? undefined;\n const effectiveThreadId = threadId ?? inheritedThreadId;\n const shouldAdoptThreadId =\n threadId === undefined && inheritedThreadId === undefined;\n const sendMessage = useTamboV1SendMessage(effectiveThreadId);\n\n const submitFn = useCallback(\n async (\n options?: SubmitOptions,\n ): Promise<{ threadId: string | undefined }> => {\n const trimmedValue = inputValue.trim();\n\n // Check if we have content to send\n if (!trimmedValue && imageState.images.length === 0) {\n throw new Error(INPUT_ERROR_MESSAGES.EMPTY);\n }\n\n const content: InputMessage[\"content\"] = [];\n\n if (trimmedValue) {\n content.push({ type: \"text\", text: trimmedValue });\n }\n\n for (const image of imageState.images) {\n content.push(stagedImageToResourceContent(image));\n }\n\n const result = await sendMessage.mutateAsync({\n message: {\n role: \"user\",\n content,\n },\n debug: options?.debug,\n });\n\n // Clear input and images after successful submission\n setInputValue(\"\");\n imageState.clearImages();\n\n // Update threadId if a new thread was created\n if (result.threadId && shouldAdoptThreadId) {\n setThreadId(result.threadId);\n }\n\n return result;\n },\n // `stagedImageToResourceContent` is a pure module-level helper (not a hook value).\n [inputValue, imageState, sendMessage, shouldAdoptThreadId],\n );\n\n const {\n mutateAsync: submitAsync,\n mutate: _unusedSubmit,\n ...mutationState\n } = useTamboMutation({\n mutationFn: submitFn,\n });\n\n const contextValue: TamboV1ThreadInputContextProps = {\n ...mutationState,\n value: inputValue,\n setValue: setInputValue,\n submit: submitAsync,\n images: imageState.images,\n addImage: imageState.addImage,\n addImages: imageState.addImages,\n removeImage: imageState.removeImage,\n clearImages: imageState.clearImages,\n threadId: effectiveThreadId,\n setThreadId,\n };\n\n return (\n <TamboV1ThreadInputContext.Provider value={contextValue}>\n {children}\n </TamboV1ThreadInputContext.Provider>\n );\n}\n\n/**\n * Hook to access the shared thread input state.\n *\n * All components using this hook share the same input state, enabling\n * features like suggestions to update the input field directly.\n * @returns The shared thread input context\n * @throws {Error} If used outside TamboV1ThreadInputProvider\n * @example\n * ```tsx\n * function ChatInput() {\n * const { value, setValue, submit, isPending } = useTamboV1ThreadInput();\n *\n * return (\n * <form onSubmit={(e) => { e.preventDefault(); submit(); }}>\n * <input\n * value={value}\n * onChange={(e) => setValue(e.target.value)}\n * disabled={isPending}\n * />\n * <button type=\"submit\" disabled={isPending}>Send</button>\n * </form>\n * );\n * }\n * ```\n */\nexport function useTamboV1ThreadInput(): TamboV1ThreadInputContextProps {\n const context = useContext(TamboV1ThreadInputContext);\n if (!context) {\n throw new Error(\n \"useTamboV1ThreadInput must be used within TamboV1ThreadInputProvider\",\n );\n }\n return context;\n}\n"]}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Component Renderer Utility for v1 API
|
|
3
|
+
*
|
|
4
|
+
* Provides the component content context for rendered components.
|
|
5
|
+
* Components can use useV1ComponentContent() to access their context.
|
|
6
|
+
*/
|
|
7
|
+
import React from "react";
|
|
3
8
|
/**
|
|
4
9
|
* Context for component content blocks.
|
|
5
10
|
* Provides access to the component ID and thread ID for component state hooks.
|
|
@@ -14,6 +19,14 @@ export interface V1ComponentContentContext {
|
|
|
14
19
|
/** Component name */
|
|
15
20
|
componentName: string;
|
|
16
21
|
}
|
|
22
|
+
/**
|
|
23
|
+
* Provider for component content context.
|
|
24
|
+
* Wraps rendered components to provide access to component metadata.
|
|
25
|
+
* @returns Provider component with memoized context value
|
|
26
|
+
*/
|
|
27
|
+
export declare function V1ComponentContentProvider({ children, componentId, threadId, messageId, componentName, }: V1ComponentContentContext & {
|
|
28
|
+
children: React.ReactNode;
|
|
29
|
+
}): React.JSX.Element;
|
|
17
30
|
/**
|
|
18
31
|
* Hook to access the current component content context.
|
|
19
32
|
* Must be used within a rendered component.
|
|
@@ -21,69 +34,4 @@ export interface V1ComponentContentContext {
|
|
|
21
34
|
* @throws {Error} If used outside a rendered component
|
|
22
35
|
*/
|
|
23
36
|
export declare function useV1ComponentContent(): V1ComponentContentContext;
|
|
24
|
-
/**
|
|
25
|
-
* Hook to optionally access the current component content context.
|
|
26
|
-
* Returns null if not within a rendered component.
|
|
27
|
-
* @returns Component content context or null
|
|
28
|
-
*/
|
|
29
|
-
export declare function useV1ComponentContentOptional(): V1ComponentContentContext | null;
|
|
30
|
-
/**
|
|
31
|
-
* Options for rendering a component content block.
|
|
32
|
-
*/
|
|
33
|
-
export interface RenderComponentOptions {
|
|
34
|
-
/** Thread ID for the component context */
|
|
35
|
-
threadId: string;
|
|
36
|
-
/** Message ID the component belongs to */
|
|
37
|
-
messageId: string;
|
|
38
|
-
/** Component registry to look up components */
|
|
39
|
-
componentList: ComponentRegistry;
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* Check if a content block is a component.
|
|
43
|
-
* @param content - Content block to check
|
|
44
|
-
* @returns True if content is a V1ComponentContent
|
|
45
|
-
*/
|
|
46
|
-
export declare function isComponentContent(content: Content): content is V1ComponentContent;
|
|
47
|
-
/**
|
|
48
|
-
* Render a component content block into a React element.
|
|
49
|
-
*
|
|
50
|
-
* Looks up the component in the registry, creates a React element with props,
|
|
51
|
-
* and wraps it with the component content context provider.
|
|
52
|
-
* @param content - Component content block to render
|
|
53
|
-
* @param options - Rendering options including registry and context info
|
|
54
|
-
* @returns V1ComponentContent with the renderedComponent attached
|
|
55
|
-
* @example
|
|
56
|
-
* ```tsx
|
|
57
|
-
* const rendered = renderComponentContent(componentContent, {
|
|
58
|
-
* threadId: 'thread_123',
|
|
59
|
-
* messageId: 'msg_456',
|
|
60
|
-
* componentList: registry.componentList,
|
|
61
|
-
* });
|
|
62
|
-
*
|
|
63
|
-
* // Use in JSX:
|
|
64
|
-
* {rendered.renderedComponent}
|
|
65
|
-
* ```
|
|
66
|
-
*/
|
|
67
|
-
export declare function renderComponentContent(content: V1ComponentContent, options: RenderComponentOptions): V1ComponentContent;
|
|
68
|
-
/**
|
|
69
|
-
* Render all component content blocks in a message.
|
|
70
|
-
*
|
|
71
|
-
* Renders component content blocks and attaches renderedComponent.
|
|
72
|
-
* Non-component content blocks are passed through unchanged.
|
|
73
|
-
* @param content - Array of content blocks
|
|
74
|
-
* @param options - Rendering options including registry and context info
|
|
75
|
-
* @returns Array of content with rendered components
|
|
76
|
-
*/
|
|
77
|
-
export declare function renderMessageContent(content: Content[], options: RenderComponentOptions): Content[];
|
|
78
|
-
/**
|
|
79
|
-
* Render all components in a message.
|
|
80
|
-
*
|
|
81
|
-
* Creates a new message object with all component content blocks rendered.
|
|
82
|
-
* @param message - Message to render components for
|
|
83
|
-
* @param options - Rendering options (threadId is extracted from message if not provided)
|
|
84
|
-
* @returns Message with rendered component content
|
|
85
|
-
*/
|
|
86
|
-
export declare function renderMessageComponents(message: TamboV1Message, options: Omit<RenderComponentOptions, "messageId"> & {
|
|
87
|
-
threadId: string;
|
|
88
|
-
}): TamboV1Message;
|
|
89
37
|
//# sourceMappingURL=component-renderer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-renderer.d.ts","sourceRoot":"","sources":["../../../src/v1/utils/component-renderer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"component-renderer.d.ts","sourceRoot":"","sources":["../../../src/v1/utils/component-renderer.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AAMD;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,aAAa,GACd,EAAE,yBAAyB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAY3D;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,IAAI,yBAAyB,CAQjE"}
|
|
@@ -34,49 +34,15 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
34
34
|
};
|
|
35
35
|
})();
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.V1ComponentContentProvider = V1ComponentContentProvider;
|
|
37
38
|
exports.useV1ComponentContent = useV1ComponentContent;
|
|
38
|
-
exports.useV1ComponentContentOptional = useV1ComponentContentOptional;
|
|
39
|
-
exports.isComponentContent = isComponentContent;
|
|
40
|
-
exports.renderComponentContent = renderComponentContent;
|
|
41
|
-
exports.renderMessageContent = renderMessageContent;
|
|
42
|
-
exports.renderMessageComponents = renderMessageComponents;
|
|
43
39
|
/**
|
|
44
40
|
* Component Renderer Utility for v1 API
|
|
45
41
|
*
|
|
46
|
-
* Provides
|
|
47
|
-
* Components
|
|
42
|
+
* Provides the component content context for rendered components.
|
|
43
|
+
* Components can use useV1ComponentContent() to access their context.
|
|
48
44
|
*/
|
|
49
45
|
const react_1 = __importStar(require("react"));
|
|
50
|
-
/**
|
|
51
|
-
* Props that should be filtered out when rendering components.
|
|
52
|
-
* These could be used for event handler injection or other security concerns.
|
|
53
|
-
*/
|
|
54
|
-
const DANGEROUS_PROP_PATTERNS = [
|
|
55
|
-
/^on[A-Z]/, // Event handlers (onClick, onError, etc.)
|
|
56
|
-
/^dangerouslySetInnerHTML$/,
|
|
57
|
-
];
|
|
58
|
-
const DANGEROUS_PROP_NAMES = new Set(["ref", "key", "children"]);
|
|
59
|
-
/**
|
|
60
|
-
* Sanitize props by removing potentially dangerous properties.
|
|
61
|
-
* Filters out event handlers, refs, and other props that could be abused.
|
|
62
|
-
* @param props - Raw props from the component content
|
|
63
|
-
* @returns Sanitized props safe for spreading to components
|
|
64
|
-
*/
|
|
65
|
-
function sanitizeProps(props) {
|
|
66
|
-
const sanitized = {};
|
|
67
|
-
for (const [key, value] of Object.entries(props)) {
|
|
68
|
-
// Skip dangerous prop names
|
|
69
|
-
if (DANGEROUS_PROP_NAMES.has(key)) {
|
|
70
|
-
continue;
|
|
71
|
-
}
|
|
72
|
-
// Skip props matching dangerous patterns
|
|
73
|
-
if (DANGEROUS_PROP_PATTERNS.some((pattern) => pattern.test(key))) {
|
|
74
|
-
continue;
|
|
75
|
-
}
|
|
76
|
-
sanitized[key] = value;
|
|
77
|
-
}
|
|
78
|
-
return sanitized;
|
|
79
|
-
}
|
|
80
46
|
const ComponentContentContext = (0, react_1.createContext)(null);
|
|
81
47
|
/**
|
|
82
48
|
* Provider for component content context.
|
|
@@ -101,116 +67,4 @@ function useV1ComponentContent() {
|
|
|
101
67
|
}
|
|
102
68
|
return context;
|
|
103
69
|
}
|
|
104
|
-
/**
|
|
105
|
-
* Hook to optionally access the current component content context.
|
|
106
|
-
* Returns null if not within a rendered component.
|
|
107
|
-
* @returns Component content context or null
|
|
108
|
-
*/
|
|
109
|
-
function useV1ComponentContentOptional() {
|
|
110
|
-
return (0, react_1.useContext)(ComponentContentContext);
|
|
111
|
-
}
|
|
112
|
-
/**
|
|
113
|
-
* Check if a content block is a component.
|
|
114
|
-
* @param content - Content block to check
|
|
115
|
-
* @returns True if content is a V1ComponentContent
|
|
116
|
-
*/
|
|
117
|
-
function isComponentContent(content) {
|
|
118
|
-
return content.type === "component";
|
|
119
|
-
}
|
|
120
|
-
/**
|
|
121
|
-
* Render a component content block into a React element.
|
|
122
|
-
*
|
|
123
|
-
* Looks up the component in the registry, creates a React element with props,
|
|
124
|
-
* and wraps it with the component content context provider.
|
|
125
|
-
* @param content - Component content block to render
|
|
126
|
-
* @param options - Rendering options including registry and context info
|
|
127
|
-
* @returns V1ComponentContent with the renderedComponent attached
|
|
128
|
-
* @example
|
|
129
|
-
* ```tsx
|
|
130
|
-
* const rendered = renderComponentContent(componentContent, {
|
|
131
|
-
* threadId: 'thread_123',
|
|
132
|
-
* messageId: 'msg_456',
|
|
133
|
-
* componentList: registry.componentList,
|
|
134
|
-
* });
|
|
135
|
-
*
|
|
136
|
-
* // Use in JSX:
|
|
137
|
-
* {rendered.renderedComponent}
|
|
138
|
-
* ```
|
|
139
|
-
*/
|
|
140
|
-
function renderComponentContent(content, options) {
|
|
141
|
-
const { threadId, messageId, componentList } = options;
|
|
142
|
-
// Look up component in registry
|
|
143
|
-
const registeredComponent = componentList[content.name];
|
|
144
|
-
if (!registeredComponent) {
|
|
145
|
-
console.warn(`Component "${content.name}" not found in registry`);
|
|
146
|
-
return {
|
|
147
|
-
...content,
|
|
148
|
-
renderedComponent: null,
|
|
149
|
-
};
|
|
150
|
-
}
|
|
151
|
-
const Component = registeredComponent.component;
|
|
152
|
-
const LoadingComponent = registeredComponent.loadingComponent;
|
|
153
|
-
// Determine if we should show loading state
|
|
154
|
-
const isStreaming = content.streamingState !== "done";
|
|
155
|
-
// Sanitize props to prevent injection of event handlers or other dangerous props
|
|
156
|
-
const props = sanitizeProps(content.props);
|
|
157
|
-
// Create the component element
|
|
158
|
-
let element;
|
|
159
|
-
if (isStreaming && LoadingComponent) {
|
|
160
|
-
// Show loading component during streaming (with props for partial data display)
|
|
161
|
-
element = (0, react_1.createElement)(LoadingComponent, props);
|
|
162
|
-
}
|
|
163
|
-
else {
|
|
164
|
-
// Show main component - props stream in as they're filled out
|
|
165
|
-
element = (0, react_1.createElement)(Component, {
|
|
166
|
-
...props,
|
|
167
|
-
// Pass state as initialState prop only if not already provided
|
|
168
|
-
...(props.initialState === undefined
|
|
169
|
-
? { initialState: content.state }
|
|
170
|
-
: {}),
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
|
-
// Wrap with component content context
|
|
174
|
-
const wrappedElement = (react_1.default.createElement(V1ComponentContentProvider, { componentId: content.id, threadId: threadId, messageId: messageId, componentName: content.name }, element));
|
|
175
|
-
return {
|
|
176
|
-
...content,
|
|
177
|
-
renderedComponent: wrappedElement,
|
|
178
|
-
};
|
|
179
|
-
}
|
|
180
|
-
/**
|
|
181
|
-
* Render all component content blocks in a message.
|
|
182
|
-
*
|
|
183
|
-
* Renders component content blocks and attaches renderedComponent.
|
|
184
|
-
* Non-component content blocks are passed through unchanged.
|
|
185
|
-
* @param content - Array of content blocks
|
|
186
|
-
* @param options - Rendering options including registry and context info
|
|
187
|
-
* @returns Array of content with rendered components
|
|
188
|
-
*/
|
|
189
|
-
function renderMessageContent(content, options) {
|
|
190
|
-
return content.map((block) => {
|
|
191
|
-
if (isComponentContent(block)) {
|
|
192
|
-
return renderComponentContent(block, options);
|
|
193
|
-
}
|
|
194
|
-
// Pass through non-component content unchanged
|
|
195
|
-
return block;
|
|
196
|
-
});
|
|
197
|
-
}
|
|
198
|
-
/**
|
|
199
|
-
* Render all components in a message.
|
|
200
|
-
*
|
|
201
|
-
* Creates a new message object with all component content blocks rendered.
|
|
202
|
-
* @param message - Message to render components for
|
|
203
|
-
* @param options - Rendering options (threadId is extracted from message if not provided)
|
|
204
|
-
* @returns Message with rendered component content
|
|
205
|
-
*/
|
|
206
|
-
function renderMessageComponents(message, options) {
|
|
207
|
-
const renderedContent = renderMessageContent(message.content, {
|
|
208
|
-
...options,
|
|
209
|
-
messageId: message.id,
|
|
210
|
-
});
|
|
211
|
-
return {
|
|
212
|
-
...message,
|
|
213
|
-
content: renderedContent,
|
|
214
|
-
};
|
|
215
|
-
}
|
|
216
70
|
//# sourceMappingURL=component-renderer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-renderer.js","sourceRoot":"","sources":["../../../src/v1/utils/component-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\n/**\n * Component Renderer Utility for v1 API\n *\n * Provides utilities for rendering React components from component content blocks.\n * Components are looked up in the registry and wrapped with context providers.\n */\n\nimport React, {\n createContext,\n createElement,\n useContext,\n useMemo,\n type ReactElement,\n} from \"react\";\n\n/**\n * Props that should be filtered out when rendering components.\n * These could be used for event handler injection or other security concerns.\n */\nconst DANGEROUS_PROP_PATTERNS = [\n /^on[A-Z]/, // Event handlers (onClick, onError, etc.)\n /^dangerouslySetInnerHTML$/,\n];\n\nconst DANGEROUS_PROP_NAMES = new Set([\"ref\", \"key\", \"children\"]);\n\n/**\n * Sanitize props by removing potentially dangerous properties.\n * Filters out event handlers, refs, and other props that could be abused.\n * @param props - Raw props from the component content\n * @returns Sanitized props safe for spreading to components\n */\nfunction sanitizeProps(\n props: Record<string, unknown>,\n): Record<string, unknown> {\n const sanitized: Record<string, unknown> = {};\n\n for (const [key, value] of Object.entries(props)) {\n // Skip dangerous prop names\n if (DANGEROUS_PROP_NAMES.has(key)) {\n continue;\n }\n\n // Skip props matching dangerous patterns\n if (DANGEROUS_PROP_PATTERNS.some((pattern) => pattern.test(key))) {\n continue;\n }\n\n sanitized[key] = value;\n }\n\n return sanitized;\n}\nimport type { ComponentRegistry } from \"../../model/component-metadata\";\nimport type {\n Content,\n TamboV1Message,\n V1ComponentContent,\n} from \"../types/message\";\n\n/**\n * Context for component content blocks.\n * Provides access to the component ID and thread ID for component state hooks.\n */\nexport interface V1ComponentContentContext {\n /** Component instance ID */\n componentId: string;\n /** Thread ID the component belongs to */\n threadId: string;\n /** Message ID the component belongs to */\n messageId: string;\n /** Component name */\n componentName: string;\n}\n\nconst ComponentContentContext = createContext<V1ComponentContentContext | null>(\n null,\n);\n\n/**\n * Provider for component content context.\n * Wraps rendered components to provide access to component metadata.\n * @returns Provider component with memoized context value\n */\nfunction V1ComponentContentProvider({\n children,\n componentId,\n threadId,\n messageId,\n componentName,\n}: V1ComponentContentContext & { children: React.ReactNode }) {\n // Memoize context value to prevent unnecessary re-renders of consumers\n const value = useMemo(\n () => ({ componentId, threadId, messageId, componentName }),\n [componentId, threadId, messageId, componentName],\n );\n\n return (\n <ComponentContentContext.Provider value={value}>\n {children}\n </ComponentContentContext.Provider>\n );\n}\n\n/**\n * Hook to access the current component content context.\n * Must be used within a rendered component.\n * @returns Component content context\n * @throws {Error} If used outside a rendered component\n */\nexport function useV1ComponentContent(): V1ComponentContentContext {\n const context = useContext(ComponentContentContext);\n if (!context) {\n throw new Error(\n \"useV1ComponentContent must be used within a rendered component\",\n );\n }\n return context;\n}\n\n/**\n * Hook to optionally access the current component content context.\n * Returns null if not within a rendered component.\n * @returns Component content context or null\n */\nexport function useV1ComponentContentOptional(): V1ComponentContentContext | null {\n return useContext(ComponentContentContext);\n}\n\n/**\n * Options for rendering a component content block.\n */\nexport interface RenderComponentOptions {\n /** Thread ID for the component context */\n threadId: string;\n /** Message ID the component belongs to */\n messageId: string;\n /** Component registry to look up components */\n componentList: ComponentRegistry;\n}\n\n/**\n * Check if a content block is a component.\n * @param content - Content block to check\n * @returns True if content is a V1ComponentContent\n */\nexport function isComponentContent(\n content: Content,\n): content is V1ComponentContent {\n return content.type === \"component\";\n}\n\n/**\n * Render a component content block into a React element.\n *\n * Looks up the component in the registry, creates a React element with props,\n * and wraps it with the component content context provider.\n * @param content - Component content block to render\n * @param options - Rendering options including registry and context info\n * @returns V1ComponentContent with the renderedComponent attached\n * @example\n * ```tsx\n * const rendered = renderComponentContent(componentContent, {\n * threadId: 'thread_123',\n * messageId: 'msg_456',\n * componentList: registry.componentList,\n * });\n *\n * // Use in JSX:\n * {rendered.renderedComponent}\n * ```\n */\nexport function renderComponentContent(\n content: V1ComponentContent,\n options: RenderComponentOptions,\n): V1ComponentContent {\n const { threadId, messageId, componentList } = options;\n\n // Look up component in registry\n const registeredComponent = componentList[content.name];\n\n if (!registeredComponent) {\n console.warn(`Component \"${content.name}\" not found in registry`);\n return {\n ...content,\n renderedComponent: null,\n };\n }\n\n const Component = registeredComponent.component;\n const LoadingComponent = registeredComponent.loadingComponent;\n\n // Determine if we should show loading state\n const isStreaming = content.streamingState !== \"done\";\n\n // Sanitize props to prevent injection of event handlers or other dangerous props\n const props = sanitizeProps(content.props as Record<string, unknown>);\n\n // Create the component element\n let element: ReactElement;\n\n if (isStreaming && LoadingComponent) {\n // Show loading component during streaming (with props for partial data display)\n element = createElement(LoadingComponent, props);\n } else {\n // Show main component - props stream in as they're filled out\n element = createElement(Component, {\n ...props,\n // Pass state as initialState prop only if not already provided\n ...(props.initialState === undefined\n ? { initialState: content.state }\n : {}),\n });\n }\n\n // Wrap with component content context\n const wrappedElement = (\n <V1ComponentContentProvider\n componentId={content.id}\n threadId={threadId}\n messageId={messageId}\n componentName={content.name}\n >\n {element}\n </V1ComponentContentProvider>\n );\n\n return {\n ...content,\n renderedComponent: wrappedElement,\n };\n}\n\n/**\n * Render all component content blocks in a message.\n *\n * Renders component content blocks and attaches renderedComponent.\n * Non-component content blocks are passed through unchanged.\n * @param content - Array of content blocks\n * @param options - Rendering options including registry and context info\n * @returns Array of content with rendered components\n */\nexport function renderMessageContent(\n content: Content[],\n options: RenderComponentOptions,\n): Content[] {\n return content.map((block) => {\n if (isComponentContent(block)) {\n return renderComponentContent(block, options);\n }\n // Pass through non-component content unchanged\n return block;\n });\n}\n\n/**\n * Render all components in a message.\n *\n * Creates a new message object with all component content blocks rendered.\n * @param message - Message to render components for\n * @param options - Rendering options (threadId is extracted from message if not provided)\n * @returns Message with rendered component content\n */\nexport function renderMessageComponents(\n message: TamboV1Message,\n options: Omit<RenderComponentOptions, \"messageId\"> & { threadId: string },\n): TamboV1Message {\n const renderedContent = renderMessageContent(message.content, {\n ...options,\n messageId: message.id,\n });\n\n return {\n ...message,\n content: renderedContent,\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"component-renderer.js","sourceRoot":"","sources":["../../../src/v1/utils/component-renderer.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCb,gEAkBC;AAQD,sDAQC;AAnED;;;;;GAKG;AAEH,+CAAkE;AAiBlE,MAAM,uBAAuB,GAAG,IAAA,qBAAa,EAC3C,IAAI,CACL,CAAC;AAEF;;;;GAIG;AACH,SAAgB,0BAA0B,CAAC,EACzC,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,aAAa,GAC6C;IAC1D,uEAAuE;IACvE,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,EAC3D,CAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAC,CAClD,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAC3C,QAAQ,CACwB,CACpC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAgB,qBAAqB;IACnC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,uBAAuB,CAAC,CAAC;IACpD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["\"use client\";\n\n/**\n * Component Renderer Utility for v1 API\n *\n * Provides the component content context for rendered components.\n * Components can use useV1ComponentContent() to access their context.\n */\n\nimport React, { createContext, useContext, useMemo } from \"react\";\n\n/**\n * Context for component content blocks.\n * Provides access to the component ID and thread ID for component state hooks.\n */\nexport interface V1ComponentContentContext {\n /** Component instance ID */\n componentId: string;\n /** Thread ID the component belongs to */\n threadId: string;\n /** Message ID the component belongs to */\n messageId: string;\n /** Component name */\n componentName: string;\n}\n\nconst ComponentContentContext = createContext<V1ComponentContentContext | null>(\n null,\n);\n\n/**\n * Provider for component content context.\n * Wraps rendered components to provide access to component metadata.\n * @returns Provider component with memoized context value\n */\nexport function V1ComponentContentProvider({\n children,\n componentId,\n threadId,\n messageId,\n componentName,\n}: V1ComponentContentContext & { children: React.ReactNode }) {\n // Memoize context value to prevent unnecessary re-renders of consumers\n const value = useMemo(\n () => ({ componentId, threadId, messageId, componentName }),\n [componentId, threadId, messageId, componentName],\n );\n\n return (\n <ComponentContentContext.Provider value={value}>\n {children}\n </ComponentContentContext.Provider>\n );\n}\n\n/**\n * Hook to access the current component content context.\n * Must be used within a rendered component.\n * @returns Component content context\n * @throws {Error} If used outside a rendered component\n */\nexport function useV1ComponentContent(): V1ComponentContentContext {\n const context = useContext(ComponentContentContext);\n if (!context) {\n throw new Error(\n \"useV1ComponentContent must be used within a rendered component\",\n );\n }\n return context;\n}\n"]}
|