@sesionario/blocks 1.10.0 → 1.12.0

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import * as React6 from 'react';
+import * as React7 from 'react';
 import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useId, useMemo } from 'react';
 import { ChevronsUpDown, CheckIcon, Smile, SearchIcon, Search, Clock, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Loader2, AlertTriangle, Inbox, X, ChevronLeft, ChevronRight, Monitor, Sun, Moon, Building2, Check, Plus, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, User, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, Settings, PictureInPicture2, Minimize, Maximize, BadgeCheck, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, XIcon } from 'lucide-react';
 import { clsx } from 'clsx';
@@ -1574,7 +1574,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React6.useMemo(
+  const _values = React7.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -2703,22 +2703,22 @@ function EmojiPicker({
   recentLimit = 24,
   storageKey = "blocks-emoji"
 }) {
-  const strings = React6.useMemo(
+  const strings = React7.useMemo(
     () => ({ ...DEFAULT_LABELS[locale], ...labels }),
     [locale, labels]
   );
-  const titles = React6.useMemo(
+  const titles = React7.useMemo(
     () => ({ ...DEFAULT_TITLES[locale], ...labels?.categoryTitles }),
     [locale, labels]
   );
-  const [query, setQuery] = React6.useState("");
-  const [skinTone, setSkinTone] = React6.useState(() => {
+  const [query, setQuery] = React7.useState("");
+  const [skinTone, setSkinTone] = React7.useState(() => {
     const raw = readStored(storageKey, "tone");
     const parsed = raw != null ? Number.parseInt(raw, 10) : 0;
     return parsed >= 0 && parsed <= 5 ? parsed : 0;
   });
-  const [toneOpen, setToneOpen] = React6.useState(false);
-  const [recents, setRecents] = React6.useState(() => {
+  const [toneOpen, setToneOpen] = React7.useState(false);
+  const [recents, setRecents] = React7.useState(() => {
     const raw = readStored(storageKey, "recent");
     if (!raw) return [];
     try {
@@ -2728,13 +2728,13 @@ function EmojiPicker({
       return [];
     }
   });
-  const [focusIndex, setFocusIndex] = React6.useState(-1);
-  const scrollRef = React6.useRef(null);
-  const sectionRefs = React6.useRef(
+  const [focusIndex, setFocusIndex] = React7.useState(-1);
+  const scrollRef = React7.useRef(null);
+  const sectionRefs = React7.useRef(
     /* @__PURE__ */ new Map()
   );
   const normalizedQuery = normalizeEmojiQuery(query);
-  const sections = React6.useMemo(() => {
+  const sections = React7.useMemo(() => {
     if (normalizedQuery) return [];
     const result = [];
     if (recents.length > 0) {
@@ -2753,7 +2753,7 @@ function EmojiPicker({
     }
     return result;
   }, [normalizedQuery, recents, titles]);
-  const searchResults = React6.useMemo(() => {
+  const searchResults = React7.useMemo(() => {
     if (!normalizedQuery) return [];
     const out = [];
     for (const category of EMOJI_CATEGORIES) {
@@ -2763,21 +2763,21 @@ function EmojiPicker({
     }
     return out;
   }, [normalizedQuery]);
-  const flatList = React6.useMemo(() => {
+  const flatList = React7.useMemo(() => {
     if (normalizedQuery) return searchResults;
     return sections.flatMap((s) => s.emojis);
   }, [normalizedQuery, searchResults, sections]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     setFocusIndex(-1);
   }, [normalizedQuery]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (focusIndex < 0) return;
     const el = scrollRef.current?.querySelector(
       `[data-emoji-index="${focusIndex}"]`
     );
     el?.focus();
   }, [focusIndex]);
-  const commitRecent = React6.useCallback(
+  const commitRecent = React7.useCallback(
     (glyph) => {
       setRecents((prev) => {
         const next = [glyph, ...prev.filter((e) => e !== glyph)].slice(
@@ -2790,14 +2790,14 @@ function EmojiPicker({
     },
     [recentLimit, storageKey]
   );
-  const handleSelect = React6.useCallback(
+  const handleSelect = React7.useCallback(
     (glyph) => {
       commitRecent(glyph);
       onSelect(glyph);
     },
     [commitRecent, onSelect]
   );
-  const chooseTone = React6.useCallback(
+  const chooseTone = React7.useCallback(
     (tone) => {
       setSkinTone(tone);
       setToneOpen(false);
@@ -2957,8 +2957,8 @@ function EmojiPicker({
           {
             ref: scrollRef,
             onKeyDown: handleGridKeyDown,
-            className: "h-64 overflow-x-hidden overflow-y-auto p-2",
-            children: normalizedQuery ? searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-8 text-center text-sm", children: strings.noResults }) : /* @__PURE__ */ jsx(
+            className: "h-64 overflow-x-hidden overflow-y-auto px-2 pb-2",
+            children: normalizedQuery ? searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-8 text-center text-sm", children: strings.noResults }) : /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
               EmojiGrid,
               {
                 emojis: searchResults,
@@ -2967,7 +2967,7 @@ function EmojiPicker({
                 skinTone,
                 onSelect: handleSelect
               }
-            ) : sections.map((section) => {
+            ) }) : sections.map((section) => {
               const startIndex = flatOffset;
               flatOffset += section.emojis.length;
               return /* @__PURE__ */ jsxs(
@@ -2978,7 +2978,7 @@ function EmojiPicker({
                   },
                   className: "mb-2",
                   children: [
-                    /* @__PURE__ */ jsx("h3", { className: "text-muted-foreground bg-popover sticky top-0 z-[1] px-1 py-1 text-xs font-medium", children: section.title }),
+                    /* @__PURE__ */ jsx("h3", { className: "text-muted-foreground bg-popover sticky top-0 z-[1] -mx-2 px-3 pt-2 pb-1 text-xs font-medium", children: section.title }),
                     /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -3099,21 +3099,21 @@ function EmojiPickerPopover({
   align = "end",
   open,
   onOpenChange,
-  keepOpenOnSelect = false,
+  keepOpenOnSelect = true,
   locale = "en",
   ...pickerProps
 }) {
-  const [internalOpen, setInternalOpen] = React6.useState(false);
+  const [internalOpen, setInternalOpen] = React7.useState(false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
-  const setOpen = React6.useCallback(
+  const setOpen = React7.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
     },
     [isControlled, onOpenChange]
   );
-  const handleSelect = React6.useCallback(
+  const handleSelect = React7.useCallback(
     (emoji) => {
       onSelect(emoji);
       if (!keepOpenOnSelect) setOpen(false);
@@ -3133,7 +3133,16 @@ function EmojiPickerPopover({
         children: /* @__PURE__ */ jsx(Smile, { className: "size-5" })
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { side, align, className: "w-auto p-0", children: /* @__PURE__ */ jsx(EmojiPicker, { onSelect: handleSelect, locale, ...pickerProps }) })
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side,
+        align,
+        className: "w-auto p-0",
+        onFocusOutside: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsx(EmojiPicker, { onSelect: handleSelect, locale, ...pickerProps })
+      }
+    )
   ] });
 }
 
@@ -3146,8 +3155,10 @@ function insertAtCaret(element, value, text) {
     caret: start + text.length
   };
 }
-var wrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
-var fieldResetClassName = "border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent";
+
+// src/components/emoji/emoji-field-shared.ts
+var emojiFieldWrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
+var emojiFieldResetClassName = "border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent";
 function mergeRefs(...refs) {
   return (node) => {
     for (const ref of refs) {
@@ -3171,7 +3182,7 @@ function emitChange(element, nextValue, onChange) {
   });
 }
 function useEmojiInsert(fieldRef, value, onChange) {
-  return React6.useCallback(
+  return React7.useCallback(
     (emoji) => {
       const el = fieldRef.current;
       const current = value !== void 0 && value !== null ? String(value) : el?.value ?? "";
@@ -3192,7 +3203,7 @@ function useEmojiInsert(fieldRef, value, onChange) {
     [fieldRef, value, onChange]
   );
 }
-var EmojiTextarea = React6.forwardRef(
+var EmojiTextarea = React7.forwardRef(
   function EmojiTextarea2({
     className,
     locale = "en",
@@ -3212,10 +3223,10 @@ var EmojiTextarea = React6.forwardRef(
     emojiTriggerClassName,
     ...props
   }, ref) {
-    const fieldRef = React6.useRef(null);
+    const fieldRef = React7.useRef(null);
     const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
     const pickerDisabled = Boolean(disabled || readOnly);
-    return /* @__PURE__ */ jsxs("div", { className: cn(wrapperClassName, className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn(emojiFieldWrapperClassName, className), children: [
       /* @__PURE__ */ jsx(
         "textarea",
         {
@@ -3227,7 +3238,7 @@ var EmojiTextarea = React6.forwardRef(
           onChange,
           className: cn(
             "placeholder:text-muted-foreground flex min-h-20 w-full rounded-md px-3 py-2 pb-9 pr-10 text-base outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            fieldResetClassName,
+            emojiFieldResetClassName,
             className
           ),
           ...props
@@ -3258,7 +3269,7 @@ var EmojiTextarea = React6.forwardRef(
   }
 );
 EmojiTextarea.displayName = "EmojiTextarea";
-var EmojiInput = React6.forwardRef(
+var EmojiInput = React7.forwardRef(
   function EmojiInput2({
     className,
     locale = "en",
@@ -3279,10 +3290,10 @@ var EmojiInput = React6.forwardRef(
     emojiTriggerClassName,
     ...props
   }, ref) {
-    const fieldRef = React6.useRef(null);
+    const fieldRef = React7.useRef(null);
     const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
     const pickerDisabled = Boolean(disabled || readOnly);
-    return /* @__PURE__ */ jsxs("div", { className: cn(wrapperClassName, className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn(emojiFieldWrapperClassName, className), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -3295,7 +3306,7 @@ var EmojiInput = React6.forwardRef(
           onChange,
           className: cn(
             "placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md px-3 py-1 pr-10 text-base outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            fieldResetClassName,
+            emojiFieldResetClassName,
             className
           ),
           ...props
@@ -3487,27 +3498,27 @@ function useHlsPlayback({
   onError,
   onPlayingChange
 }) {
-  const videoRef = React6.useRef(null);
-  const hlsRef = React6.useRef(null);
-  const [state, setState] = React6.useState("idle");
-  const [qualities, setQualities] = React6.useState([]);
-  const [activeLevel, setActiveLevel] = React6.useState(-1);
-  const [autoplayState, setAutoplayState] = React6.useState("none");
-  const [error, setError] = React6.useState(null);
-  const [reloadKey, setReloadKey] = React6.useState(0);
-  const onErrorRef = React6.useRef(onError);
-  const onPlayingChangeRef = React6.useRef(onPlayingChange);
-  React6.useEffect(() => {
+  const videoRef = React7.useRef(null);
+  const hlsRef = React7.useRef(null);
+  const [state, setState] = React7.useState("idle");
+  const [qualities, setQualities] = React7.useState([]);
+  const [activeLevel, setActiveLevel] = React7.useState(-1);
+  const [autoplayState, setAutoplayState] = React7.useState("none");
+  const [error, setError] = React7.useState(null);
+  const [reloadKey, setReloadKey] = React7.useState(0);
+  const onErrorRef = React7.useRef(onError);
+  const onPlayingChangeRef = React7.useRef(onPlayingChange);
+  React7.useEffect(() => {
     onErrorRef.current = onError;
     onPlayingChangeRef.current = onPlayingChange;
   }, [onError, onPlayingChange]);
-  const retry = React6.useCallback(() => {
+  const retry = React7.useCallback(() => {
     setError(null);
     setState("loading");
     setAutoplayState("none");
     setReloadKey((k) => k + 1);
   }, []);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const media = videoRef.current;
     if (!media || !src || !active) {
       setState("idle");
@@ -3719,7 +3730,7 @@ function useHlsPlayback({
       destroyHls();
     };
   }, [src, mode, active, autoPlay, muted, reloadKey]);
-  const setLevel = React6.useCallback((index) => {
+  const setLevel = React7.useCallback((index) => {
     const hls = hlsRef.current;
     if (!hls) return;
     hls.nextLevel = index;
@@ -3802,12 +3813,12 @@ function VideoPlayer({
   className
 }) {
   const t = { ...DEFAULT_LABELS2, ...labels };
-  const containerRef = React6.useRef(null);
-  const firstPlayFiredRef = React6.useRef(false);
-  const [userStarted, setUserStarted] = React6.useState(false);
+  const containerRef = React7.useRef(null);
+  const firstPlayFiredRef = React7.useRef(false);
+  const [userStarted, setUserStarted] = React7.useState(false);
   const active = autoPlay || !poster || userStarted;
   const autoplayActive = autoPlay || userStarted;
-  const handlePlayingChange = React6.useCallback(
+  const handlePlayingChange = React7.useCallback(
     (playing) => {
       setIsPlaying(playing);
       if (playing && !firstPlayFiredRef.current) {
@@ -3836,25 +3847,25 @@ function VideoPlayer({
     onError,
     onPlayingChange: handlePlayingChange
   });
-  const [isPlaying, setIsPlaying] = React6.useState(false);
-  const [isMuted, setIsMuted] = React6.useState(muted);
-  const [volume, setVolume] = React6.useState(1);
-  const [currentTime, setCurrentTime] = React6.useState(0);
-  const [duration, setDuration] = React6.useState(0);
-  const [buffered, setBuffered] = React6.useState(0);
-  const [isFullscreen, setIsFullscreen] = React6.useState(false);
-  const [pipActive, setPipActive] = React6.useState(false);
-  const [controlsVisible, setControlsVisible] = React6.useState(true);
-  const [playbackRate, setPlaybackRate] = React6.useState(1);
-  const [openMenu, setOpenMenu] = React6.useState(
+  const [isPlaying, setIsPlaying] = React7.useState(false);
+  const [isMuted, setIsMuted] = React7.useState(muted);
+  const [volume, setVolume] = React7.useState(1);
+  const [currentTime, setCurrentTime] = React7.useState(0);
+  const [duration, setDuration] = React7.useState(0);
+  const [buffered, setBuffered] = React7.useState(0);
+  const [isFullscreen, setIsFullscreen] = React7.useState(false);
+  const [pipActive, setPipActive] = React7.useState(false);
+  const [controlsVisible, setControlsVisible] = React7.useState(true);
+  const [playbackRate, setPlaybackRate] = React7.useState(1);
+  const [openMenu, setOpenMenu] = React7.useState(
     null
   );
-  const [behindLive, setBehindLive] = React6.useState(false);
-  const [webkitFullscreenSupported, setWebkitFullscreenSupported] = React6.useState(false);
-  const hideTimerRef = React6.useRef(null);
+  const [behindLive, setBehindLive] = React7.useState(false);
+  const [webkitFullscreenSupported, setWebkitFullscreenSupported] = React7.useState(false);
+  const hideTimerRef = React7.useRef(null);
   const pipSupported = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
   const fullscreenSupported = hasStandardFullscreen() || webkitFullscreenSupported;
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const video = videoRef.current;
     if (!video || !active) return;
     const onTimeUpdate = () => {
@@ -3887,15 +3898,15 @@ function VideoPlayer({
       video.removeEventListener("ratechange", onRate);
     };
   }, [videoRef, active, mode]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     setWebkitFullscreenSupported(hasWebkitVideoFullscreen(videoRef.current));
   }, [videoRef, active]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const onFsChange = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
     document.addEventListener("fullscreenchange", onFsChange);
     return () => document.removeEventListener("fullscreenchange", onFsChange);
   }, []);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const video = asWebkitVideo(videoRef.current);
     if (!video) return;
     const onBegin = () => setIsFullscreen(true);
@@ -3907,7 +3918,7 @@ function VideoPlayer({
       video.removeEventListener("webkitendfullscreen", onEnd);
     };
   }, [videoRef, active]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
     const onEnter = () => setPipActive(true);
@@ -3919,18 +3930,18 @@ function VideoPlayer({
       video.removeEventListener("leavepictureinpicture", onLeave);
     };
   }, [videoRef]);
-  const scheduleHide = React6.useCallback(() => {
+  const scheduleHide = React7.useCallback(() => {
     if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     hideTimerRef.current = setTimeout(() => {
       setControlsVisible(false);
       setOpenMenu(null);
     }, CONTROLS_HIDE_MS);
   }, []);
-  const revealControls = React6.useCallback(() => {
+  const revealControls = React7.useCallback(() => {
     setControlsVisible(true);
     scheduleHide();
   }, [scheduleHide]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     return () => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
     };
@@ -4393,8 +4404,8 @@ function MenuItem({
   );
 }
 function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {}) {
-  const [stats, setStats] = React6.useState({});
-  React6.useEffect(() => {
+  const [stats, setStats] = React7.useState({});
+  React7.useEffect(() => {
     if (!statsUrl || !enabled) return;
     let cancelled = false;
     const controller = new AbortController();
@@ -5419,7 +5430,7 @@ function ScrollBar({
   );
 }
 var phoneInputGroupClass = "flex h-9 w-full gap-0 overflow-hidden rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] [--PhoneInputCountrySelect-marginRight:0] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 dark:bg-input/30 [&_.PhoneInputCountry]:mr-0";
-var PhoneInput = React6.forwardRef(
+var PhoneInput = React7.forwardRef(
   ({ className, onChange, value, defaultCountry = "MX", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       RPNInput.default,
@@ -5439,7 +5450,7 @@ var PhoneInput = React6.forwardRef(
   }
 );
 PhoneInput.displayName = "PhoneInput";
-var InputComponent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var InputComponent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Input,
   {
     className: cn(
@@ -5457,9 +5468,9 @@ var CountrySelect = ({
   options: countryList,
   onChange
 }) => {
-  const scrollAreaRef = React6.useRef(null);
-  const [searchValue, setSearchValue] = React6.useState("");
-  const [isOpen, setIsOpen] = React6.useState(false);
+  const scrollAreaRef = React7.useRef(null);
+  const [searchValue, setSearchValue] = React7.useState("");
+  const [isOpen, setIsOpen] = React7.useState(false);
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -5640,8 +5651,8 @@ var MEXICO_STATE_PATHS = {
 };
 function MexicoMap({ selected, onToggle, className }) {
   const isInteractive = typeof onToggle === "function";
-  const selectedSet = React6.useMemo(() => new Set(selected), [selected]);
-  const handleKeyDown = React6.useCallback(
+  const selectedSet = React7.useMemo(() => new Set(selected), [selected]);
+  const handleKeyDown = React7.useCallback(
     (event, id) => {
       if (!onToggle) return;
       if (event.key === "Enter" || event.key === " ") {
@@ -6123,6 +6134,130 @@ function ChatMessageList({
     /* @__PURE__ */ jsx(MessageScrollerButton, {})
   ] }) });
 }
+var MessageComposer = React7.forwardRef(function MessageComposer2({
+  className,
+  locale = "en",
+  disabled,
+  readOnly,
+  value,
+  onChange,
+  onSubmit,
+  onKeyDown,
+  sendLabel,
+  sendDisabled = false,
+  allowEmptySubmit = false,
+  sendButtonClassName,
+  sendButtonSize = "sm",
+  submitOnEnter = true,
+  tools,
+  attachments,
+  triggerLabel,
+  keepOpenOnSelect,
+  open,
+  onOpenChange,
+  side = "top",
+  align = "end",
+  labels,
+  recentLimit,
+  storageKey,
+  emojiTriggerClassName,
+  rows = 2,
+  ...props
+}, ref) {
+  const formRef = React7.useRef(null);
+  const fieldRef = React7.useRef(null);
+  const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
+  const pickerDisabled = Boolean(disabled || readOnly);
+  const draft = value !== void 0 && value !== null ? String(value) : "";
+  const canSubmit = (allowEmptySubmit || Boolean(draft.trim())) && !sendDisabled && !disabled && !readOnly;
+  const handleSubmit = React7.useCallback(
+    (event) => {
+      event.preventDefault();
+      if (!canSubmit) return;
+      onSubmit(event);
+    },
+    [canSubmit, onSubmit]
+  );
+  const handleKeyDown = React7.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (!submitOnEnter) return;
+      if (event.key !== "Enter" || event.shiftKey) return;
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+      event.preventDefault();
+      if (!canSubmit) return;
+      formRef.current?.requestSubmit();
+    },
+    [canSubmit, onKeyDown, submitOnEnter]
+  );
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ref: formRef,
+      className: cn(emojiFieldWrapperClassName, "flex flex-col", className),
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            "data-slot": "textarea",
+            ref: mergeRefs(fieldRef, ref),
+            disabled,
+            readOnly,
+            value,
+            onChange,
+            onKeyDown: handleKeyDown,
+            rows,
+            className: cn(
+              "placeholder:text-muted-foreground flex min-h-10 w-full resize-none rounded-md px-3 pt-2 pb-1 text-base outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+              emojiFieldResetClassName
+            ),
+            ...props
+          }
+        ),
+        attachments ? /* @__PURE__ */ jsx("div", { className: "border-t px-2 py-2", children: attachments }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1.5 pb-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx(
+              EmojiPickerPopover,
+              {
+                locale,
+                onSelect: handleEmojiSelect,
+                disabled: pickerDisabled,
+                triggerLabel,
+                keepOpenOnSelect,
+                open,
+                onOpenChange,
+                side,
+                align,
+                labels,
+                recentLimit,
+                storageKey,
+                triggerClassName: cn(
+                  "size-7 text-muted-foreground",
+                  emojiTriggerClassName
+                )
+              }
+            ),
+            tools
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              size: sendButtonSize,
+              disabled: !canSubmit,
+              className: sendButtonClassName,
+              children: sendLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+MessageComposer.displayName = "MessageComposer";
 var RECONNECT_DELAY_MS = 2e3;
 function useSupportConversation({
   client,
@@ -6343,23 +6478,22 @@ function ThreadPanel({
             emptyDescription: labels.emptyThread
           }
         ) }),
-        /* @__PURE__ */ jsxs("form", { className: "flex gap-2 border-t p-3", onSubmit, children: [
-          /* @__PURE__ */ jsx(
-            EmojiTextarea,
-            {
-              locale: emojiLocale,
-              value: draft,
-              onChange: (e) => setDraft(e.target.value.slice(0, 2e3)),
-              placeholder: labels.placeholder,
-              "aria-label": labels.placeholder,
-              disabled: loading || sending,
-              maxLength: 2e3,
-              rows: 2,
-              className: "min-h-10 flex-1"
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !draft.trim() || sending || loading, children: labels.send })
-        ] })
+        /* @__PURE__ */ jsx("div", { className: "border-t p-3", children: /* @__PURE__ */ jsx(
+          MessageComposer,
+          {
+            locale: emojiLocale,
+            value: draft,
+            onChange: (e) => setDraft(e.target.value.slice(0, 2e3)),
+            onSubmit,
+            sendLabel: labels.send,
+            placeholder: labels.placeholder,
+            "aria-label": labels.placeholder,
+            disabled: loading || sending,
+            sendDisabled: loading || sending,
+            maxLength: 2e3,
+            rows: 2
+          }
+        ) })
       ]
     }
   );
@@ -6741,6 +6875,6 @@ function createSupportChatClient(basePath = "/api/chat-svc") {
   };
 }
 
-export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PhoneInput, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map