@superinterface/react 2.21.0 → 2.22.1

package/dist/index.cjs

@@ -2780,7 +2780,7 @@ var mutationFn = function(param) {
     var superinterfaceContext = param.superinterfaceContext, queryClient = param.queryClient, threadContext = param.threadContext;
     return function() {
         var _ref = _async_to_generator(function(variables) {
-            var abortController, response, parser, reader, messagesQueryKey, _ref, done, value;
+            var abortController, response, errorResponse, error, parser, reader, messagesQueryKey, _ref, done, value;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -2799,6 +2799,29 @@ var mutationFn = function(param) {
                         ];
                     case 1:
                         response = _state.sent();
+                        if (!(response.status !== 200)) return [
+                            3,
+                            5
+                        ];
+                        _state.label = 2;
+                    case 2:
+                        _state.trys.push([
+                            2,
+                            4,
+                            ,
+                            5
+                        ]);
+                        return [
+                            4,
+                            response.json()
+                        ];
+                    case 3:
+                        errorResponse = _state.sent();
+                        throw new Error(errorResponse.error);
+                    case 4:
+                        error = _state.sent();
+                        throw new Error("There was a problem sending your message. Please try again.");
+                    case 5:
                         if (response.body == null) {
                             throw new Error("The response body is empty.");
                         }
@@ -2814,21 +2837,21 @@ var mutationFn = function(param) {
                             "messages",
                             threadContext.variables
                         ];
-                        _state.label = 2;
-                    case 2:
+                        _state.label = 6;
+                    case 6:
                         if (!true) return [
                             3,
-                            4
+                            8
                         ];
                         return [
                             4,
                             reader.read()
                         ];
-                    case 3:
+                    case 7:
                         _ref = _state.sent(), done = _ref.done, value = _ref.value;
                         if (done) return [
                             3,
-                            4
+                            8
                         ];
                         handleResponse({
                             value: value,
@@ -2838,9 +2861,9 @@ var mutationFn = function(param) {
                         });
                         return [
                             3,
-                            2
+                            6
                         ];
-                    case 4:
+                    case 8:
                         return [
                             2
                         ];
@@ -2902,6 +2925,32 @@ var formOptions = {
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 var import_radash14 = require("radash");
+// src/lib/errors/createMessageDefaultOnError.ts
+var createMessageDefaultOnError = function(param) {
+    var queryClient = param.queryClient, addToast = param.addToast, threadContext = param.threadContext;
+    return function(error) {
+        if (error.name === "AbortError") {
+            queryClient.invalidateQueries({
+                queryKey: [
+                    "messages",
+                    threadContext.variables
+                ]
+            });
+            queryClient.invalidateQueries({
+                queryKey: [
+                    "runs",
+                    threadContext.variables
+                ]
+            });
+            return;
+        }
+        addToast({
+            type: "error",
+            message: error.message
+        });
+    };
+};
+// src/components/threads/Thread/MessageForm/Root/index.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var Root4 = function(param) {
     var children = param.children, onSubmitArg = param.onSubmit, isDisabledArg = param.isDisabled;
@@ -2912,27 +2961,11 @@ var Root4 = function(param) {
     var queryClient = (0, import_react_query5.useQueryClient)();
     var threadContext = useSuperinterfaceContext();
     var createMessage = useCreateMessage({
-        onError: function(error) {
-            if (error.name === "AbortError") {
-                queryClient.invalidateQueries({
-                    queryKey: [
-                        "messages",
-                        threadContext.variables
-                    ]
-                });
-                queryClient.invalidateQueries({
-                    queryKey: [
-                        "runs",
-                        threadContext.variables
-                    ]
-                });
-                return;
-            }
-            addToast({
-                type: "error",
-                message: error.message
-            });
-        }
+        onError: createMessageDefaultOnError({
+            queryClient: queryClient,
+            addToast: addToast,
+            threadContext: threadContext
+        })
     }).createMessage;
     var isMutatingMessage = useIsMutatingMessage();
     var isFileLoading = (0, import_react34.useMemo)(function() {
@@ -3584,43 +3617,128 @@ MessageForm.Root = Root4;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
-var import_themes42 = require("@radix-ui/themes");
+var import_themes43 = require("@radix-ui/themes");
 // src/components/threads/Thread/Provider/index.tsx
 var Provider2 = SuperinterfaceProvider;
-// src/components/threads/Thread/Root/index.tsx
+// src/components/toasts/ToastsProvider/index.tsx
+var import_react39 = require("react");
+var Toast2 = __toESM(require("@radix-ui/react-toast"), 1);
+// src/components/toasts/ToastsProvider/CustomToast.tsx
+var Toast = __toESM(require("@radix-ui/react-toast"), 1);
+var import_themes42 = require("@radix-ui/themes");
+var import_react_icons10 = require("@radix-ui/react-icons");
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var Root7 = function(_param) {
+var CustomToast = function(param) {
+    var toast = param.toast;
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Toast.Root, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes42.Card, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Toast.Title, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_themes42.Flex, {
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes42.Flex, {
+                            pr: "2",
+                            height: "14px",
+                            align: "center",
+                            children: toast.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons10.CheckCircledIcon, {
+                                color: "var(--accent-9)"
+                            }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons10.CrossCircledIcon, {
+                                color: "var(--red-9)"
+                            })
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes42.Text, {
+                            weight: "medium",
+                            size: "1",
+                            children: toast.message
+                        })
+                    ]
+                })
+            })
+        })
+    });
+};
+// src/components/toasts/ToastsProvider/index.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var ToastsProvider = function(param) {
+    var children = param.children, _param_bottom = param.bottom, bottom = _param_bottom === void 0 ? 0 : _param_bottom;
+    var _ref = _sliced_to_array((0, import_react39.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
+    var addToast = (0, import_react39.useCallback)(function(toast) {
+        return setToasts(function(prevToasts) {
+            return _to_consumable_array(prevToasts).concat([
+                toast
+            ]);
+        });
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ToastsContext.Provider, {
+        value: {
+            toasts: toasts,
+            addToast: addToast
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Toast2.Provider, {
+            children: [
+                children,
+                Array.from(toasts).map(function(toast, index) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CustomToast, {
+                        toast: toast
+                    }, index);
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Toast2.Viewport, {
+                    style: {
+                        position: "absolute",
+                        bottom: bottom,
+                        right: 0,
+                        display: "flex",
+                        flexDirection: "column",
+                        padding: "var(--space-5)",
+                        gap: "var(--space-3)",
+                        width: "390px",
+                        maxWidth: "100vw",
+                        margin: 0,
+                        listStyle: "none",
+                        zIndex: 99999999999999,
+                        outline: "none"
+                    }
+                })
+            ]
+        })
+    });
+};
+// src/components/threads/Thread/Root/index.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Root8 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Provider2, _object_spread_props(_object_spread({}, rest), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes42.Flex, {
-            direction: "column",
-            flexGrow: "1",
-            children: children
-        })
-    }));
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ToastsProvider, {
+        bottom: "var(--space-9)",
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Provider2, _object_spread_props(_object_spread({}, rest), {
+            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_themes43.Flex, {
+                direction: "column",
+                flexGrow: "1",
+                children: children
+            })
+        }))
+    });
 };
 // src/components/threads/Thread/index.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Thread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Root7, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Root8, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Messages, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(MessageForm, {})
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Messages, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MessageForm, {})
         ]
     }));
 };
-Thread.Root = Root7;
+Thread.Root = Root8;
 Thread.Messages = Messages;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 var useMessageContext = function() {
-    return (0, import_react39.useContext)(MessageContext);
+    return (0, import_react40.useContext)(MessageContext);
 };
 // src/hooks/assistants/useAssistant/index.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_react_query8 = require("@tanstack/react-query");
 // src/hooks/assistants/useAssistant/lib/queryOptions/index.ts
 var import_react_query7 = require("@tanstack/react-query");
@@ -3709,7 +3827,7 @@ var useAssistant = function(param) {
         assistantId: assistantId,
         superinterfaceContext: superinterfaceContext
     }));
-    return (0, import_react40.useMemo)(function() {
+    return (0, import_react41.useMemo)(function() {
         return _object_spread_props(_object_spread({}, props), {
             assistant: props.data ? props.data.assistant : null
         });
@@ -3718,25 +3836,25 @@ var useAssistant = function(param) {
     ]);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 // src/contexts/threads/ThreadDialogContext/index.ts
-var import_react41 = require("react");
-var ThreadDialogContext = (0, import_react41.createContext)({
+var import_react42 = require("react");
+var ThreadDialogContext = (0, import_react42.createContext)({
     isOpen: false,
     setIsOpen: function() {}
 });
 // src/hooks/threads/useThreadDialogContext/index.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 var useThreadDialogContext = function() {
-    return (0, import_react42.useContext)(ThreadDialogContext);
+    return (0, import_react43.useContext)(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var Provider3 = function(param) {
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var Provider4 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _ref = _sliced_to_array((0, import_react43.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ThreadDialogContext.Provider, {
+    var _ref = _sliced_to_array((0, import_react44.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
             setIsOpen: setIsOpen
@@ -3744,96 +3862,12 @@ var Provider3 = function(param) {
         children: children
     });
 };
-// src/components/toasts/ToastsProvider/index.tsx
-var import_react44 = require("react");
-var Toast2 = __toESM(require("@radix-ui/react-toast"), 1);
-// src/components/toasts/ToastsProvider/CustomToast.tsx
-var Toast = __toESM(require("@radix-ui/react-toast"), 1);
-var import_themes43 = require("@radix-ui/themes");
-var import_react_icons10 = require("@radix-ui/react-icons");
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var CustomToast = function(param) {
-    var toast = param.toast;
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Toast.Root, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes43.Card, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Toast.Title, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_themes43.Flex, {
-                    children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes43.Flex, {
-                            pr: "2",
-                            height: "14px",
-                            align: "center",
-                            children: toast.type === "success" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_icons10.CheckCircledIcon, {
-                                color: "var(--accent-9)"
-                            }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_icons10.CrossCircledIcon, {
-                                color: "var(--red-9)"
-                            })
-                        }),
-                        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes43.Text, {
-                            weight: "medium",
-                            size: "1",
-                            children: toast.message
-                        })
-                    ]
-                })
-            })
-        })
-    });
-};
-// src/components/toasts/ToastsProvider/index.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var ToastsProvider = function(param) {
-    var children = param.children;
-    var _ref = _sliced_to_array((0, import_react44.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
-    var addToast = (0, import_react44.useCallback)(function(toast) {
-        return setToasts(function(prevToasts) {
-            return _to_consumable_array(prevToasts).concat([
-                toast
-            ]);
-        });
-    }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ToastsContext.Provider, {
-        value: {
-            toasts: toasts,
-            addToast: addToast
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Toast2.Provider, {
-            children: [
-                children,
-                Array.from(toasts).map(function(toast, index) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CustomToast, {
-                        toast: toast
-                    }, index);
-                }),
-                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Toast2.Viewport, {
-                    style: {
-                        position: "absolute",
-                        bottom: 0,
-                        right: 0,
-                        display: "flex",
-                        flexDirection: "column",
-                        padding: "var(--space-5)",
-                        gap: "var(--space-3)",
-                        width: "390px",
-                        maxWidth: "100vw",
-                        margin: 0,
-                        listStyle: "none",
-                        zIndex: 99999999999999,
-                        outline: "none"
-                    }
-                })
-            ]
-        })
-    });
-};
 // src/components/threads/ThreadDialog/Root/index.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var Root9 = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToastsProvider, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Provider3, {
-            children: children
-        })
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Provider4, {
+        children: children
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
@@ -4538,10 +4572,23 @@ var useMessageAudio = function(param) {
     });
 };
 // src/components/threads/AudioThread/Root/index.tsx
+var import_react_query9 = require("@tanstack/react-query");
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var Root12 = function(param) {
+var Content6 = function(param) {
     var children = param.children;
-    var createMessageProps = useCreateMessage();
+    var addToast = useToasts().addToast;
+    var queryClient = (0, import_react_query9.useQueryClient)();
+    var threadContext = useSuperinterfaceContext();
+    var createMessageProps = useCreateMessage({
+        onError: function(error) {
+            createMessageDefaultOnError({
+                queryClient: queryClient,
+                addToast: addToast,
+                threadContext: threadContext
+            })(error);
+            recorderProps.start();
+        }
+    });
     var recorderProps = useRecorder({
         isStopOnSilence: true,
         onStart: /*#__PURE__*/ _async_to_generator(function() {
@@ -4610,6 +4657,14 @@ var Root12 = function(param) {
         })
     });
 };
+var Root12 = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ToastsProvider, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Content6, {
+            children: children
+        })
+    });
+};
 // src/components/threads/AudioThread/Visualization/index.tsx
 var import_react53 = require("react");
 var import_lodash9 = __toESM(require("lodash"), 1);
@@ -4998,11 +5053,21 @@ var import_themes55 = require("@radix-ui/themes");
 // src/components/suggestions/Suggestions/Item.tsx
 var import_react_icons14 = require("@radix-ui/react-icons");
 var import_themes54 = require("@radix-ui/themes");
+var import_react_query10 = require("@tanstack/react-query");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
-    var _useCreateMessage = useCreateMessage(), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Content6, {
+    var addToast = useToasts().addToast;
+    var queryClient = (0, import_react_query10.useQueryClient)();
+    var threadContext = useSuperinterfaceContext();
+    var _useCreateMessage = useCreateMessage({
+        onError: createMessageDefaultOnError({
+            queryClient: queryClient,
+            addToast: addToast,
+            threadContext: threadContext
+        })
+    }), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Content7, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -5014,7 +5079,7 @@ var Item = function(param) {
         children: suggestion
     });
 };
-var Content6 = function(param) {
+var Content7 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
     return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_themes54.Button, {
         variant: "soft",
@@ -5042,10 +5107,10 @@ var Content6 = function(param) {
         ]
     });
 };
-Item.Content = Content6;
+Item.Content = Content7;
 // src/components/suggestions/Suggestions/Content.tsx
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var Content7 = function(param) {
+var Content8 = function(param) {
     var children = param.children;
     var isMutatingMessage = useIsMutatingMessage();
     var suggestions = (0, import_react54.useMemo)(function() {
@@ -5084,7 +5149,7 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Content7, {
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Content8, {
         children: children
     });
 };