@melony/react 0.1.15 → 0.1.18

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React11 = require('react');
+var React10 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var client = require('melony/client');
 var clsx = require('clsx');
@@ -37,7 +37,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
+var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
 var ICONS__namespace = /*#__PURE__*/_interopNamespace(ICONS);
 
 // src/providers/melony-provider.tsx
@@ -66,7 +66,7 @@ function groupEventsToMessages(events) {
   }
   return messages;
 }
-var MelonyContext = React11.createContext(
+var MelonyContext = React10.createContext(
   void 0
 );
 var MelonyClientProvider = ({
@@ -74,20 +74,20 @@ var MelonyClientProvider = ({
   client,
   initialEvents
 }) => {
-  const [state, setState] = React11.useState(client.getState());
-  React11.useEffect(() => {
+  const [state, setState] = React10.useState(client.getState());
+  React10.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       client.reset(initialEvents);
     }
   }, [client, initialEvents]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     setState(client.getState());
     const unsubscribe = client.subscribe(setState);
     return () => {
       unsubscribe();
     };
   }, [client]);
-  const sendEvent = React11.useCallback(
+  const sendEvent = React10.useCallback(
     async (event, options) => {
       const generator = client.sendEvent(event, options);
       for await (const _ of generator) {
@@ -95,11 +95,11 @@ var MelonyClientProvider = ({
     },
     [client]
   );
-  const reset = React11.useCallback(
+  const reset = React10.useCallback(
     (events) => client.reset(events),
     [client]
   );
-  const value = React11.useMemo(
+  const value = React10.useMemo(
     () => ({
       ...state,
       messages: groupEventsToMessages(state.events),
@@ -111,16 +111,16 @@ var MelonyClientProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(MelonyContext.Provider, { value, children });
 };
-var AuthContext = React11.createContext(
+var AuthContext = React10.createContext(
   void 0
 );
 var AuthProvider = ({
   children,
   service
 }) => {
-  const [user, setUser] = React11.useState(null);
-  const [isLoading, setIsLoading] = React11.useState(true);
-  const fetchMe = React11.useCallback(async () => {
+  const [user, setUser] = React10.useState(null);
+  const [isLoading, setIsLoading] = React10.useState(true);
+  const fetchMe = React10.useCallback(async () => {
     setIsLoading(true);
     try {
       const userData = await service.getMe();
@@ -132,13 +132,13 @@ var AuthProvider = ({
       setIsLoading(false);
     }
   }, [service]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     fetchMe();
   }, [fetchMe]);
-  const login = React11.useCallback(() => {
+  const login = React10.useCallback(() => {
     service.login();
   }, [service]);
-  const logout = React11.useCallback(async () => {
+  const logout = React10.useCallback(async () => {
     try {
       await service.logout();
       setUser(null);
@@ -174,7 +174,7 @@ var AuthProvider = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value, children });
 };
-var ThreadContext = React11.createContext(
+var ThreadContext = React10.createContext(
   void 0
 );
 var ThreadProvider = ({
@@ -182,17 +182,17 @@ var ThreadProvider = ({
   service,
   initialThreadId: providedInitialThreadId
 }) => {
-  const defaultInitialThreadId = React11.useMemo(() => client.generateId(), []);
+  const defaultInitialThreadId = React10.useMemo(() => client.generateId(), []);
   const initialThreadId = providedInitialThreadId || defaultInitialThreadId;
-  const [threads, setThreads] = React11.useState([]);
-  const [activeThreadId, setActiveThreadId] = React11.useState(
+  const [threads, setThreads] = React10.useState([]);
+  const [activeThreadId, setActiveThreadId] = React10.useState(
     initialThreadId
   );
-  const [isLoading, setIsLoading] = React11.useState(true);
-  const [error, setError] = React11.useState(null);
-  const [threadEvents, setThreadEvents] = React11.useState([]);
-  const [isLoadingEvents, setIsLoadingEvents] = React11.useState(false);
-  const fetchThreads = React11.useCallback(async () => {
+  const [isLoading, setIsLoading] = React10.useState(true);
+  const [error, setError] = React10.useState(null);
+  const [threadEvents, setThreadEvents] = React10.useState([]);
+  const [isLoadingEvents, setIsLoadingEvents] = React10.useState(false);
+  const fetchThreads = React10.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -206,13 +206,13 @@ var ThreadProvider = ({
       setIsLoading(false);
     }
   }, [service]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     fetchThreads();
   }, [fetchThreads]);
-  const selectThread = React11.useCallback((threadId) => {
+  const selectThread = React10.useCallback((threadId) => {
     setActiveThreadId(threadId);
   }, []);
-  const createThread = React11.useCallback(async () => {
+  const createThread = React10.useCallback(async () => {
     const newId = service.createThread ? await service.createThread() : client.generateId();
     const newThread = {
       id: newId,
@@ -222,7 +222,7 @@ var ThreadProvider = ({
     setActiveThreadId(newId);
     return newId;
   }, [service]);
-  const deleteThread = React11.useCallback(
+  const deleteThread = React10.useCallback(
     async (threadId) => {
       try {
         await service.deleteThread(threadId);
@@ -244,10 +244,10 @@ var ThreadProvider = ({
     },
     [service]
   );
-  const refreshThreads = React11.useCallback(async () => {
+  const refreshThreads = React10.useCallback(async () => {
     await fetchThreads();
   }, [fetchThreads]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!activeThreadId) {
       setThreadEvents([]);
       setIsLoadingEvents(false);
@@ -277,7 +277,7 @@ var ThreadProvider = ({
       cancelled = true;
     };
   }, [activeThreadId, service]);
-  const value = React11.useMemo(
+  const value = React10.useMemo(
     () => ({
       threads,
       activeThreadId,
@@ -305,11 +305,11 @@ var ThreadProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ThreadContext.Provider, { value, children });
 };
-var ThemeContext = React11.createContext(void 0);
+var ThemeContext = React10.createContext(void 0);
 function ThemeProvider({ children }) {
-  const [theme, setThemeState] = React11.useState("system");
-  const [resolvedTheme, setResolvedTheme] = React11.useState("light");
-  React11.useEffect(() => {
+  const [theme, setThemeState] = React10.useState("system");
+  const [resolvedTheme, setResolvedTheme] = React10.useState("light");
+  React10.useEffect(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("theme");
       if (stored) {
@@ -317,7 +317,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, []);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (typeof window !== "undefined") {
       if (theme === "system") {
         const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -332,7 +332,7 @@ function ThemeProvider({ children }) {
       }
     }
   }, [theme]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (typeof window !== "undefined") {
       const root = document.documentElement;
       if (resolvedTheme === "dark") {
@@ -351,20 +351,20 @@ function ThemeProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
 }
 function useTheme() {
-  const context = React11.useContext(ThemeContext);
+  const context = React10.useContext(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 }
 var useMelony = (options) => {
-  const context = React11.useContext(MelonyContext);
+  const context = React10.useContext(MelonyContext);
   if (context === void 0) {
     throw new Error("useMelony must be used within a MelonyClientProvider");
   }
   const { client, reset } = context;
   const { initialEvents } = options || {};
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
       reset(initialEvents);
     }
@@ -372,14 +372,14 @@ var useMelony = (options) => {
   return context;
 };
 var useAuth = () => {
-  const context = React11.useContext(AuthContext);
+  const context = React10.useContext(AuthContext);
   if (context === void 0) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 };
 var useThreads = () => {
-  const context = React11.useContext(ThreadContext);
+  const context = React10.useContext(ThreadContext);
   if (context === void 0) {
     throw new Error("useThreads must be used within a ThreadProvider");
   }
@@ -573,7 +573,7 @@ function Composer({
   autoFocus = false,
   defaultSelectedIds = []
 }) {
-  const [selectedOptions, setSelectedOptions] = React11__namespace.default.useState(
+  const [selectedOptions, setSelectedOptions] = React10__namespace.default.useState(
     () => new Set(defaultSelectedIds)
   );
   const toggleOption = (id, groupOptions, type = "multiple") => {
@@ -1187,9 +1187,9 @@ var Image = ({
   className,
   style
 }) => {
-  const [hasError, setHasError] = React11.useState(false);
-  const [isLoading, setIsLoading] = React11.useState(true);
-  const [open, setOpen] = React11.useState(false);
+  const [hasError, setHasError] = React10.useState(false);
+  const [isLoading, setIsLoading] = React10.useState(true);
+  const [open, setOpen] = React10.useState(false);
   const sizes = {
     sm: "h-11",
     md: "h-22",
@@ -1387,7 +1387,7 @@ var Chart = ({
   className,
   style
 }) => {
-  const [tooltip, setTooltip] = React11.useState(null);
+  const [tooltip, setTooltip] = React10.useState(null);
   if (!Array.isArray(data)) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-destructive border border-destructive/20 rounded-md bg-destructive/5", children: "Error: Chart data must be an array" });
   }
@@ -2143,7 +2143,7 @@ var Button2 = ({
 };
 var Form = ({ children, onSubmitAction, className, style }) => {
   const { sendEvent } = useMelony();
-  const [isSubmitted, setIsSubmitted] = React11.useState(false);
+  const [isSubmitted, setIsSubmitted] = React10.useState(false);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (isSubmitted) return;
@@ -2290,7 +2290,7 @@ function MessageBubble({ message }) {
   );
 }
 function LoadingIndicator({ status }) {
-  const [isExpanded, setIsExpanded] = React11.useState(false);
+  const [isExpanded, setIsExpanded] = React10.useState(false);
   const message = status?.message || "Processing...";
   const details = status?.details;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -2313,15 +2313,21 @@ function LoadingIndicator({ status }) {
 function ErrorDisplay({ error }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive p-2 border border-destructive rounded-md bg-destructive/10", children: error.message });
 }
-function MessageList({ messages, isLoading, error, loadingStatus }) {
+function MessageList({
+  messages,
+  isLoading,
+  error,
+  loadingStatus
+}) {
   if (messages.length === 0) {
     return null;
   }
-  const isTextStreaming = React11.useMemo(() => {
+  const isTextStreaming = React10.useMemo(() => {
     if (messages.length === 0 || !isLoading) return false;
     const lastMessage = messages[messages.length - 1];
     return lastMessage.content.some((event) => event.type === "text-delta");
   }, [messages, isLoading]);
+  console.log("MESSAGES", messages);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
     messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { message }, index)),
     isLoading && !isTextStreaming && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { status: loadingStatus }),
@@ -2338,9 +2344,9 @@ function Thread({
   defaultSelectedIds
 }) {
   const { messages, isLoading, error, sendEvent, loadingStatus } = useMelony();
-  const [input, setInput] = React11.useState("");
-  const messagesEndRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [input, setInput] = React10.useState("");
+  const messagesEndRef = React10.useRef(null);
+  React10.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSubmit = async (state, overrideInput) => {
@@ -2536,8 +2542,8 @@ function ChatPopup({
   headerProps,
   defaultSelectedIds
 }) {
-  const [isOpen, setIsOpen] = React11.useState(defaultOpen);
-  const [view, setView] = React11.useState("chat");
+  const [isOpen, setIsOpen] = React10.useState(defaultOpen);
+  const [view, setView] = React10.useState("chat");
   const { createThread } = useThreads();
   const handleNewChat = async () => {
     try {
@@ -2676,10 +2682,10 @@ function ChatFull({
   autoFocus = false,
   defaultSelectedIds
 }) {
-  const [internalLeftCollapsed, setInternalLeftCollapsed] = React11.useState(
+  const [internalLeftCollapsed, setInternalLeftCollapsed] = React10.useState(
     defaultLeftSidebarCollapsed
   );
-  const [internalRightCollapsed, setInternalRightCollapsed] = React11.useState(
+  const [internalRightCollapsed, setInternalRightCollapsed] = React10.useState(
     defaultRightSidebarCollapsed
   );
   const leftCollapsed = controlledLeftCollapsed !== void 0 ? controlledLeftCollapsed : internalLeftCollapsed;
@@ -2788,11 +2794,11 @@ function ChatFull({
     ] })
   ] });
 }
-var PopoverContext = React11__namespace.createContext(
+var PopoverContext = React10__namespace.createContext(
   void 0
 );
 function usePopoverContext() {
-  const context = React11__namespace.useContext(PopoverContext);
+  const context = React10__namespace.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover components must be used within a Popover");
   }
@@ -2804,10 +2810,10 @@ function Popover({
   open: controlledOpen,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = React11__namespace.useState(defaultOpen);
-  const triggerRef = React11__namespace.useRef(null);
+  const [internalOpen, setInternalOpen] = React10__namespace.useState(defaultOpen);
+  const triggerRef = React10__namespace.useRef(null);
   const open = controlledOpen ?? internalOpen;
-  const setOpen = React11__namespace.useCallback(
+  const setOpen = React10__namespace.useCallback(
     (newOpen) => {
       if (controlledOpen === void 0) {
         setInternalOpen(newOpen);
@@ -2816,7 +2822,7 @@ function Popover({
     },
     [controlledOpen, onOpenChange]
   );
-  const value = React11__namespace.useMemo(
+  const value = React10__namespace.useMemo(
     () => ({
       open,
       setOpen,
@@ -2826,15 +2832,15 @@ function Popover({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value, children });
 }
-var PopoverTrigger = React11__namespace.forwardRef(
+var PopoverTrigger = React10__namespace.forwardRef(
   ({ asChild, className, children, ...props }, ref) => {
     const { setOpen, triggerRef } = usePopoverContext();
     const handleClick = (e) => {
       setOpen(true);
       props.onClick?.(e);
     };
-    if (asChild && React11__namespace.isValidElement(children)) {
-      return React11__namespace.cloneElement(children, {
+    if (asChild && React10__namespace.isValidElement(children)) {
+      return React10__namespace.cloneElement(children, {
         ref: (node) => {
           triggerRef.current = node;
           if (typeof children.ref === "function") {
@@ -2866,7 +2872,7 @@ var PopoverTrigger = React11__namespace.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React11__namespace.forwardRef(
+var PopoverContent = React10__namespace.forwardRef(
   ({
     className,
     side = "bottom",
@@ -2877,9 +2883,9 @@ var PopoverContent = React11__namespace.forwardRef(
     ...props
   }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React11__namespace.useState({ top: 0, left: 0 });
-    const contentRef = React11__namespace.useRef(null);
-    React11__namespace.useEffect(() => {
+    const [position, setPosition] = React10__namespace.useState({ top: 0, left: 0 });
+    const contentRef = React10__namespace.useRef(null);
+    React10__namespace.useEffect(() => {
       if (!open || !triggerRef.current) return;
       const updatePosition = () => {
         if (!triggerRef.current || !contentRef.current) return;
@@ -2940,7 +2946,7 @@ var PopoverContent = React11__namespace.forwardRef(
         window.removeEventListener("scroll", updatePosition, true);
       };
     }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React11__namespace.useEffect(() => {
+    React10__namespace.useEffect(() => {
       if (!open) return;
       const handleClickOutside = (event) => {
         if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
@@ -2996,7 +3002,7 @@ var ThreadPopover = ({
   emptyState,
   onThreadSelect
 }) => {
-  const [isOpen, setIsOpen] = React11__namespace.useState(false);
+  const [isOpen, setIsOpen] = React10__namespace.useState(false);
   reactHotkeysHook.useHotkeys(
     "h",
     (e) => {
@@ -3051,7 +3057,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React11__namespace.useState(false);
+  const [isCreating, setIsCreating] = React10__namespace.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3177,10 +3183,10 @@ var AccountDialog = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React11__namespace.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React11__namespace.useState(false);
-  const [error, setError] = React11__namespace.useState(null);
-  const initials = React11__namespace.useMemo(() => {
+  const [open, setOpen] = React10__namespace.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React10__namespace.useState(false);
+  const [error, setError] = React10__namespace.useState(null);
+  const initials = React10__namespace.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);