@epicbagel/saas-kit 1.28.0 → 1.29.0

package/dist/primitives/chat.cjs

@@ -924,7 +924,7 @@ function MobileReplySuggestions({
       _chunk2BHI5ZWJcjs.DrawerContent,
       {
         "aria-describedby": void 0,
-        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)]",
+        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)] md:mx-auto md:w-full md:max-w-xl",
         onOpenAutoFocus: (event) => {
           event.preventDefault();
           _optionalChain([closeRef, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13({ preventScroll: true })]);
@@ -999,6 +999,19 @@ function ExamplePromptsLoading({ label, className }) {
 function ChatError({ children, className }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { "data-slot": "chat-error", role: "alert", className: _chunkKWLSBTB2cjs.cn.call(void 0, "mt-2 text-xs text-destructive", className), children });
 }
+var SHORT_VIEWPORT_HEIGHT = 900;
+function useIsShortViewport() {
+  const [short, setShort] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(max-height: ${SHORT_VIEWPORT_HEIGHT - 1}px)`);
+    const onChange = () => setShort(window.innerHeight < SHORT_VIEWPORT_HEIGHT);
+    mql.addEventListener("change", onChange);
+    onChange();
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return short;
+}
 var Chat = _react.forwardRef.call(void 0, function Chat2({
   messages,
   onSend,
@@ -1127,7 +1140,8 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   );
   const application = layout === "application";
   const workspace = layout === "workspace";
-  const compactSuggestions = mobileCompactSuggestions && isMobile;
+  const shortViewport = useIsShortViewport();
+  const compactSuggestions = mobileCompactSuggestions && (isMobile || shortViewport);
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
   const liveVoiceActive = voiceSession && voiceSession.state !== "disconnected" && voiceSession.state !== "error";
   const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent) && !liveVoiceActive;

package/dist/primitives/chat.d.cts

@@ -402,7 +402,10 @@ interface ChatProps {
     replySuggestions?: ReadonlyArray<string>;
     /** The reply suggestions' accessible name. Defaults to "Suggested replies". */
     replySuggestionsLabel?: string;
-    /** Below 768px, show replies inside the composer as the first reply and a bottom-sheet picker. Desktop chips are unchanged. */
+    /**
+     * Below 768px wide, or 900px tall, show replies inside the composer as the
+     * first reply and a bottom-sheet picker. Taller desktop windows keep chips.
+     */
     mobileCompactSuggestions?: boolean;
     /** The mobile picker's opener, given the number of additional replies. Defaults to `+N more`. */
     replySuggestionsMoreLabel?: (count: number) => string;

package/dist/primitives/chat.d.ts

@@ -402,7 +402,10 @@ interface ChatProps {
     replySuggestions?: ReadonlyArray<string>;
     /** The reply suggestions' accessible name. Defaults to "Suggested replies". */
     replySuggestionsLabel?: string;
-    /** Below 768px, show replies inside the composer as the first reply and a bottom-sheet picker. Desktop chips are unchanged. */
+    /**
+     * Below 768px wide, or 900px tall, show replies inside the composer as the
+     * first reply and a bottom-sheet picker. Taller desktop windows keep chips.
+     */
     mobileCompactSuggestions?: boolean;
     /** The mobile picker's opener, given the number of additional replies. Defaults to `+N more`. */
     replySuggestionsMoreLabel?: (count: number) => string;

package/dist/primitives/chat.js

@@ -924,7 +924,7 @@ function MobileReplySuggestions({
       DrawerContent,
       {
         "aria-describedby": void 0,
-        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)]",
+        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)] md:mx-auto md:w-full md:max-w-xl",
         onOpenAutoFocus: (event) => {
           event.preventDefault();
           closeRef.current?.focus({ preventScroll: true });
@@ -999,6 +999,19 @@ function ExamplePromptsLoading({ label, className }) {
 function ChatError({ children, className }) {
   return /* @__PURE__ */ jsx("p", { "data-slot": "chat-error", role: "alert", className: cn("mt-2 text-xs text-destructive", className), children });
 }
+var SHORT_VIEWPORT_HEIGHT = 900;
+function useIsShortViewport() {
+  const [short, setShort] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(max-height: ${SHORT_VIEWPORT_HEIGHT - 1}px)`);
+    const onChange = () => setShort(window.innerHeight < SHORT_VIEWPORT_HEIGHT);
+    mql.addEventListener("change", onChange);
+    onChange();
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return short;
+}
 var Chat = forwardRef(function Chat2({
   messages,
   onSend,
@@ -1127,7 +1140,8 @@ var Chat = forwardRef(function Chat2({
   );
   const application = layout === "application";
   const workspace = layout === "workspace";
-  const compactSuggestions = mobileCompactSuggestions && isMobile;
+  const shortViewport = useIsShortViewport();
+  const compactSuggestions = mobileCompactSuggestions && (isMobile || shortViewport);
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
   const liveVoiceActive = voiceSession && voiceSession.state !== "disconnected" && voiceSession.state !== "error";
   const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent) && !liveVoiceActive;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [