@melony/react 0.1.46 → 0.1.47

package/dist/index.js

@@ -1,5 +1,5 @@
-import * as React12 from 'react';
-import React12__default, { createContext, useContext, useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import * as React3 from 'react';
+import React3__default, { createContext, useContext, useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import { convertEventsToMessages } from 'melony';
 import { NuqsAdapter } from 'nuqs/adapters/react';
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
@@ -15,10 +15,10 @@ import { useRender } from '@base-ui/react/use-render';
 import { cva } from 'class-variance-authority';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Select as Select$1 } from '@base-ui/react/select';
+import { createPortal } from 'react-dom';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { Menu } from '@base-ui/react/menu';
 import { useQueryState, parseAsString } from 'nuqs';
-import { createPortal } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 // src/providers/melony-provider.tsx
@@ -534,7 +534,6 @@ var Image = ({
   src,
   alt,
   size = "sm",
-  groupId,
   className,
   style
 }) => {
@@ -1426,6 +1425,321 @@ var Checkbox = ({
 var Hidden = ({ name, value }) => {
   return /* @__PURE__ */ jsx("input", { type: "hidden", name, value });
 };
+var PopoverContext = React3.createContext(
+  void 0
+);
+function usePopoverContext() {
+  const context = React3.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within a Popover");
+  }
+  return context;
+}
+function Popover({
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [internalOpen, setInternalOpen] = React3.useState(defaultOpen);
+  const triggerRef = React3.useRef(null);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = React3.useCallback(
+    (newOpen) => {
+      if (controlledOpen === void 0) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  const value = React3.useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef
+    }),
+    [open, setOpen]
+  );
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
+}
+var PopoverTrigger = React3.forwardRef(
+  ({ asChild, className, children, ...props }, ref) => {
+    const { setOpen, triggerRef } = usePopoverContext();
+    const handleClick = (e) => {
+      setOpen(true);
+      props.onClick?.(e);
+    };
+    if (asChild && React3.isValidElement(children)) {
+      return React3.cloneElement(children, {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof children.ref === "function") {
+            children.ref(node);
+          } else if (children.ref) {
+            children.ref.current = node;
+          }
+        },
+        onClick: handleClick
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        className,
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverContent = React3.forwardRef(
+  ({
+    className,
+    side = "bottom",
+    align = "start",
+    sideOffset = 4,
+    alignOffset = 0,
+    children,
+    ...props
+  }, ref) => {
+    const { open, setOpen, triggerRef } = usePopoverContext();
+    const [position, setPosition] = React3.useState({ top: 0, left: 0 });
+    const contentRef = React3.useRef(null);
+    React3.useEffect(() => {
+      if (!open || !triggerRef.current) return;
+      const updatePosition = () => {
+        if (!triggerRef.current || !contentRef.current) return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        let top = 0;
+        let left = 0;
+        switch (side) {
+          case "bottom":
+            top = triggerRect.bottom + sideOffset + scrollY;
+            break;
+          case "top":
+            top = triggerRect.top - contentRect.height - sideOffset + scrollY;
+            break;
+          case "right":
+            top = triggerRect.top + scrollY;
+            left = triggerRect.right + sideOffset + scrollX;
+            break;
+          case "left":
+            top = triggerRect.top + scrollY;
+            left = triggerRect.left - contentRect.width - sideOffset + scrollX;
+            break;
+        }
+        switch (align) {
+          case "start":
+            if (side === "top" || side === "bottom") {
+              left = triggerRect.left + scrollX + alignOffset;
+            } else {
+              top += alignOffset;
+            }
+            break;
+          case "center":
+            if (side === "top" || side === "bottom") {
+              left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2 + scrollX + alignOffset;
+            } else {
+              top += triggerRect.height / 2 - contentRect.height / 2 + alignOffset;
+            }
+            break;
+          case "end":
+            if (side === "top" || side === "bottom") {
+              left = triggerRect.left + triggerRect.width - contentRect.width + scrollX + alignOffset;
+            } else {
+              top += triggerRect.height - contentRect.height + alignOffset;
+            }
+            break;
+        }
+        setPosition({ top, left });
+      };
+      requestAnimationFrame(() => {
+        updatePosition();
+      });
+      window.addEventListener("resize", updatePosition);
+      window.addEventListener("scroll", updatePosition, true);
+      return () => {
+        window.removeEventListener("resize", updatePosition);
+        window.removeEventListener("scroll", updatePosition, true);
+      };
+    }, [open, side, align, sideOffset, alignOffset, triggerRef]);
+    React3.useEffect(() => {
+      if (!open) return;
+      const handleClickOutside = (event) => {
+        if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+          setOpen(false);
+        }
+      };
+      const handleEscape = (event) => {
+        if (event.key === "Escape") {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }, [open, setOpen, triggerRef]);
+    if (!open) return null;
+    const content = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          contentRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        className: cn(
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 rounded-2xl shadow-2xl ring-1 z-50 min-w-48 max-h-96 overflow-hidden",
+          className
+        ),
+        style: {
+          position: "absolute",
+          top: `${position.top}px`,
+          left: `${position.left}px`
+        },
+        ...props,
+        children
+      }
+    );
+    return createPortal(content, document.body);
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+var PRESET_COLORS = [
+  "#000000",
+  "#ffffff",
+  "#f44336",
+  "#e91e63",
+  "#9c27b0",
+  "#673ab7",
+  "#3f51b5",
+  "#2196f3",
+  "#03a9f4",
+  "#00bcd4",
+  "#009688",
+  "#4caf50",
+  "#8bc34a",
+  "#cddc39",
+  "#ffeb3b",
+  "#ffc107",
+  "#ff9800",
+  "#ff5722",
+  "#795548",
+  "#9e9e9e",
+  "#607d8b"
+];
+var ColorPicker = ({
+  name,
+  label,
+  defaultValue = "#000000",
+  value: controlledValue,
+  onChangeAction,
+  disabled,
+  className,
+  style
+}) => {
+  const { sendEvent } = useMelony();
+  const [color, setColor] = useState(controlledValue || defaultValue);
+  useEffect(() => {
+    if (controlledValue !== void 0) {
+      setColor(controlledValue);
+    }
+  }, [controlledValue]);
+  const handleColorChange = (newColor) => {
+    setColor(newColor);
+    if (onChangeAction) {
+      sendEvent({
+        ...onChangeAction,
+        data: {
+          name: name || "",
+          value: newColor
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Field, { className: cn("w-full", className), style, children: [
+    label && /* @__PURE__ */ jsx(FieldTitle, { children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: cn(
+              "w-10 h-10 rounded-lg border border-border shadow-sm transition-transform hover:scale-105 active:scale-95 disabled:opacity-50 disabled:hover:scale-100",
+              "flex items-center justify-center p-1"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-full h-full rounded-md",
+                style: { backgroundColor: color }
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "p-3 w-64", side: "bottom", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: PRESET_COLORS.map((preset) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "w-6 h-6 rounded-md border border-border transition-transform hover:scale-110 active:scale-90",
+                color === preset && "ring-2 ring-primary ring-offset-1"
+              ),
+              style: { backgroundColor: preset },
+              onClick: () => handleColorChange(preset)
+            },
+            preset
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: color,
+                onChange: (e) => handleColorChange(e.target.value),
+                className: "w-8 h-8 rounded border-none p-0 cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: color,
+                onChange: (e) => handleColorChange(e.target.value),
+                className: "flex-1 h-8 px-2 text-xs font-mono border border-border rounded uppercase focus:outline-none focus:ring-1 focus:ring-primary"
+              }
+            )
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-mono uppercase text-muted-foreground", children: color })
+    ] }),
+    /* @__PURE__ */ jsx("input", { type: "hidden", name, value: color })
+  ] });
+};
 var RadioGroup = ({
   name,
   options,
@@ -1591,12 +1905,19 @@ var Upload = ({
   accept,
   onUploadAction,
   className,
-  style
+  style,
+  initialFiles,
+  mode = "append"
 }) => {
   const { sendEvent, events } = useMelony();
   const fileInputRef = useRef(null);
   const [isUploading, setIsUploading] = useState(false);
   const [status, setStatus] = useState("idle");
+  const uploadedFilesEvents = events.filter(
+    (event) => event.type === "uploaded-files"
+  );
+  const displayEvents = mode === "replace" && uploadedFilesEvents.length > 0 ? [uploadedFilesEvents[uploadedFilesEvents.length - 1]] : uploadedFilesEvents;
+  const showInitialFiles = mode === "replace" ? displayEvents.length === 0 : true;
   const handleFileChange = async (e) => {
     const files = Array.from(e.target.files || []);
     if (files.length === 0) return;
@@ -1669,23 +1990,26 @@ var Upload = ({
         disabled: isUploading
       }
     ),
-    events.filter((event) => event.type === "files-uploaded" && !!event.ui).map(
-      (event, index) => event.ui ? /* @__PURE__ */ jsx(UIRenderer, { node: event.ui }, index) : null
-    ),
-    /* @__PURE__ */ jsxs(
-      Button,
-      {
-        type: "button",
-        disabled: isUploading,
-        onClick: () => fileInputRef.current?.click(),
-        className: "gap-2",
-        variant: status === "error" ? "destructive" : status === "success" ? "outline" : "default",
-        children: [
-          isUploading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 animate-spin" }) : status === "success" ? /* @__PURE__ */ jsx(IconCheck, { className: "h-4 w-4 text-green-500" }) : status === "error" ? /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconUpload, { className: "h-4 w-4" }),
-          status === "success" ? "Uploaded" : status === "error" ? "Failed" : label
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 mb-2 items-center", children: [
+      showInitialFiles && initialFiles?.map((file, index) => /* @__PURE__ */ jsx(Image, { src: file.url, alt: file.name, size: "md" }, index)),
+      displayEvents.map(
+        (event, index) => event.ui ? /* @__PURE__ */ jsx(UIRenderer, { node: event.ui }, index) : null
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          disabled: isUploading,
+          onClick: () => fileInputRef.current?.click(),
+          className: "gap-2",
+          variant: status === "error" ? "destructive" : status === "success" ? "outline" : "default",
+          children: [
+            isUploading ? /* @__PURE__ */ jsx(IconLoader2, { className: "h-4 w-4 animate-spin" }) : status === "success" ? /* @__PURE__ */ jsx(IconCheck, { className: "h-4 w-4 text-green-500" }) : status === "error" ? /* @__PURE__ */ jsx(IconX, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconUpload, { className: "h-4 w-4" }),
+            status === "success" ? "Uploaded" : status === "error" ? "Failed" : label
+          ]
+        }
+      )
+    ] })
   ] });
 };
 var Form = ({
@@ -1754,6 +2078,7 @@ function UIRenderer({ node }) {
     select: Select2,
     checkbox: Checkbox,
     radioGroup: RadioGroup,
+    colorPicker: ColorPicker,
     spacer: Spacer,
     divider: Divider,
     box: Box,
@@ -2071,10 +2396,10 @@ var AccountButton = ({
   size
 }) => {
   const { isLoading, isAuthenticated, user, login, logout } = useAuth();
-  const [open, setOpen] = React12.useState(false);
-  const [accountInfoOpen, setAccountInfoOpen] = React12.useState(false);
-  const [error, setError] = React12.useState(null);
-  const initials = React12.useMemo(() => {
+  const [open, setOpen] = React3.useState(false);
+  const [accountInfoOpen, setAccountInfoOpen] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const initials = React3.useMemo(() => {
     const name = user?.displayName || user?.name;
     if (!name) return "";
     return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
@@ -2650,13 +2975,13 @@ function Composer({
   const accept = fileAttachments?.accept;
   const maxFiles = fileAttachments?.maxFiles ?? 10;
   const maxFileSize = fileAttachments?.maxFileSize ?? 10 * 1024 * 1024;
-  const [selectedOptions, setSelectedOptions] = React12__default.useState(
+  const [selectedOptions, setSelectedOptions] = React3__default.useState(
     () => new Set(defaultSelectedIds)
   );
-  const [attachedFiles, setAttachedFiles] = React12__default.useState([]);
-  const [previews, setPreviews] = React12__default.useState([]);
-  const fileInputRef = React12__default.useRef(null);
-  React12__default.useEffect(() => {
+  const [attachedFiles, setAttachedFiles] = React3__default.useState([]);
+  const [previews, setPreviews] = React3__default.useState([]);
+  const fileInputRef = React3__default.useRef(null);
+  React3__default.useEffect(() => {
     const newPreviews = attachedFiles.map((file) => ({
       name: file.name,
       type: file.type,
@@ -3227,7 +3552,7 @@ var Dropdown = ({
 };
 var ThreadList = ({ className }) => {
   const { threads, activeThreadId, deleteThread } = useThreads();
-  const sortedThreads = React12.useMemo(() => {
+  const sortedThreads = React3.useMemo(() => {
     return [...threads].sort((a, b) => {
       const dateA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
       const dateB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
@@ -3455,206 +3780,6 @@ function SidebarToggle({ side, className }) {
   }
   return null;
 }
-var PopoverContext = React12.createContext(
-  void 0
-);
-function usePopoverContext() {
-  const context = React12.useContext(PopoverContext);
-  if (!context) {
-    throw new Error("Popover components must be used within a Popover");
-  }
-  return context;
-}
-function Popover({
-  children,
-  defaultOpen = false,
-  open: controlledOpen,
-  onOpenChange
-}) {
-  const [internalOpen, setInternalOpen] = React12.useState(defaultOpen);
-  const triggerRef = React12.useRef(null);
-  const open = controlledOpen ?? internalOpen;
-  const setOpen = React12.useCallback(
-    (newOpen) => {
-      if (controlledOpen === void 0) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    },
-    [controlledOpen, onOpenChange]
-  );
-  const value = React12.useMemo(
-    () => ({
-      open,
-      setOpen,
-      triggerRef
-    }),
-    [open, setOpen]
-  );
-  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
-}
-var PopoverTrigger = React12.forwardRef(
-  ({ asChild, className, children, ...props }, ref) => {
-    const { setOpen, triggerRef } = usePopoverContext();
-    const handleClick = (e) => {
-      setOpen(true);
-      props.onClick?.(e);
-    };
-    if (asChild && React12.isValidElement(children)) {
-      return React12.cloneElement(children, {
-        ref: (node) => {
-          triggerRef.current = node;
-          if (typeof children.ref === "function") {
-            children.ref(node);
-          } else if (children.ref) {
-            children.ref.current = node;
-          }
-        },
-        onClick: handleClick
-      });
-    }
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref: (node) => {
-          triggerRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-        },
-        className,
-        onClick: handleClick,
-        ...props,
-        children
-      }
-    );
-  }
-);
-PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React12.forwardRef(
-  ({
-    className,
-    side = "bottom",
-    align = "start",
-    sideOffset = 4,
-    alignOffset = 0,
-    children,
-    ...props
-  }, ref) => {
-    const { open, setOpen, triggerRef } = usePopoverContext();
-    const [position, setPosition] = React12.useState({ top: 0, left: 0 });
-    const contentRef = React12.useRef(null);
-    React12.useEffect(() => {
-      if (!open || !triggerRef.current) return;
-      const updatePosition = () => {
-        if (!triggerRef.current || !contentRef.current) return;
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const contentRect = contentRef.current.getBoundingClientRect();
-        const scrollX = window.scrollX;
-        const scrollY = window.scrollY;
-        let top = 0;
-        let left = 0;
-        switch (side) {
-          case "bottom":
-            top = triggerRect.bottom + sideOffset + scrollY;
-            break;
-          case "top":
-            top = triggerRect.top - contentRect.height - sideOffset + scrollY;
-            break;
-          case "right":
-            top = triggerRect.top + scrollY;
-            left = triggerRect.right + sideOffset + scrollX;
-            break;
-          case "left":
-            top = triggerRect.top + scrollY;
-            left = triggerRect.left - contentRect.width - sideOffset + scrollX;
-            break;
-        }
-        switch (align) {
-          case "start":
-            if (side === "top" || side === "bottom") {
-              left = triggerRect.left + scrollX + alignOffset;
-            } else {
-              top += alignOffset;
-            }
-            break;
-          case "center":
-            if (side === "top" || side === "bottom") {
-              left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2 + scrollX + alignOffset;
-            } else {
-              top += triggerRect.height / 2 - contentRect.height / 2 + alignOffset;
-            }
-            break;
-          case "end":
-            if (side === "top" || side === "bottom") {
-              left = triggerRect.left + triggerRect.width - contentRect.width + scrollX + alignOffset;
-            } else {
-              top += triggerRect.height - contentRect.height + alignOffset;
-            }
-            break;
-        }
-        setPosition({ top, left });
-      };
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-      window.addEventListener("resize", updatePosition);
-      window.addEventListener("scroll", updatePosition, true);
-      return () => {
-        window.removeEventListener("resize", updatePosition);
-        window.removeEventListener("scroll", updatePosition, true);
-      };
-    }, [open, side, align, sideOffset, alignOffset, triggerRef]);
-    React12.useEffect(() => {
-      if (!open) return;
-      const handleClickOutside = (event) => {
-        if (contentRef.current && !contentRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
-          setOpen(false);
-        }
-      };
-      const handleEscape = (event) => {
-        if (event.key === "Escape") {
-          setOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-        document.removeEventListener("keydown", handleEscape);
-      };
-    }, [open, setOpen, triggerRef]);
-    if (!open) return null;
-    const content = /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: (node) => {
-          contentRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref) {
-            ref.current = node;
-          }
-        },
-        className: cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 rounded-2xl shadow-2xl ring-1 z-50 min-w-48 max-h-96 overflow-hidden",
-          className
-        ),
-        style: {
-          position: "absolute",
-          top: `${position.top}px`,
-          left: `${position.left}px`
-        },
-        ...props,
-        children
-      }
-    );
-    return createPortal(content, document.body);
-  }
-);
-PopoverContent.displayName = "PopoverContent";
 var ThreadPopover = ({
   className,
   buttonClassName,
@@ -3662,7 +3787,7 @@ var ThreadPopover = ({
   buttonSize = "icon",
   emptyState
 }) => {
-  const [isOpen, setIsOpen] = React12.useState(false);
+  const [isOpen, setIsOpen] = React3.useState(false);
   useHotkeys(
     "h",
     (e) => {
@@ -3705,7 +3830,7 @@ var CreateThreadButton = ({
   onThreadCreated
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React12.useState(false);
+  const [isCreating, setIsCreating] = React3.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {
@@ -3787,7 +3912,7 @@ var CreateThreadListItem = ({
   className
 }) => {
   const { createThread } = useThreads();
-  const [isCreating, setIsCreating] = React12.useState(false);
+  const [isCreating, setIsCreating] = React3.useState(false);
   const handleCreateThread = async () => {
     if (isCreating) return;
     try {