@alia.onl/sdk 7.2.8 → 7.2.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @alia.onl/sdk
 
+## 7.2.9
+
+### The full-screen chat clears the gesture bar and the keyboard
+
+`AliaChatScreen` padded only the top safe-area inset, so on edge-to-edge
+Android its composer sat under the gesture bar (OxyHQ/Mention#1140). It now pads
+the bottom inset too, and wraps the chat in a keyboard-avoiding view that
+measures its own position in the window (keyboard-controller's
+`automaticOffset`): the composer rises onto the keyboard, and because that view
+already ends above the inset, the inset is not added on top of the keyboard. The
+avoiding view `PromptInput` carries measured its parent-relative layout and so
+never lifted inside the screen. The web `KeyboardAvoidingView` accepts and
+ignores `automaticOffset`.
+
+`AliaChatScreen` is a full-screen route: render it where no tab bar or other
+bottom chrome is drawn. Its keyboard lift needs the app wrapped in
+keyboard-controller's `KeyboardProvider` (re-exported by this package).
+
 ## 7.2.8
 
 ### One Oxy runtime and a native-only notifications boundary

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "7.2.8",
+  "version": "7.2.9",
   "description": "Alia AI chat SDK — reusable chat UI, voice, and streaming components for Oxy apps",
   "main": "src/index.ts",
   "react-native": "src/index.ts",

package/src/components/AliaChatScreen.tsx

@@ -20,6 +20,7 @@
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { KeyboardAvoidingView } from '../lib/keyboard';
 import { AliaChatContent } from './AliaChatContent';
 import { IdentityMark } from './IdentityMark';
 import type { WelcomeSuggestion } from './AliaWelcomeMessage';
@@ -65,36 +66,51 @@ export function AliaChatScreen({
 }: AliaChatScreenProps) {
   const insets = useSafeAreaInsets();
 
+  // The screen owns the whole window, so it keeps its composer out of both
+  // system bars: the top inset clears the status bar, the bottom one the
+  // gesture bar or home indicator an edge-to-edge app draws over.
+  //
+  // The keyboard is handled INSIDE the bottom inset. The avoiding view measures
+  // its own frame in the window (`automaticOffset`), and that frame already
+  // ends `insets.bottom` above the window's edge, so the padding it adds is the
+  // keyboard's height minus the inset: the composer sits on the keyboard, not
+  // one inset above it. (Its parent-relative layout would read as zero overlap
+  // this deep in a host's tree, which is why the offset is measured.)
   return (
-    <View className="flex-1 bg-background" style={{ paddingTop: insets.top }}>
-      <AliaChatContent
-        clientContext={clientContext}
-        model={model}
-        apiUrl={apiUrl}
-        welcomeGreeting={welcomeGreeting}
-        welcomeSubtitle={welcomeSubtitle}
-        welcomeSuggestions={welcomeSuggestions}
-        primaryColor={primaryColor}
-        isDarkMode={isDarkMode}
-        voiceSession={voiceSession}
-        header={({ markState, hasMessages, clear }) => (
-          <View className="flex-row items-center justify-between px-4 py-3">
-            <View className="flex-row items-center gap-2.5">
-              {headerLeft}
-              <IdentityMark size={28} state={markState} spinOnPress />
-              <Text className="text-lg font-semibold text-foreground">Alia</Text>
+    <View
+      className="flex-1 bg-background"
+      style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
+    >
+      <KeyboardAvoidingView behavior="padding" automaticOffset style={{ flex: 1 }}>
+        <AliaChatContent
+          clientContext={clientContext}
+          model={model}
+          apiUrl={apiUrl}
+          welcomeGreeting={welcomeGreeting}
+          welcomeSubtitle={welcomeSubtitle}
+          welcomeSuggestions={welcomeSuggestions}
+          primaryColor={primaryColor}
+          isDarkMode={isDarkMode}
+          voiceSession={voiceSession}
+          header={({ markState, hasMessages, clear }) => (
+            <View className="flex-row items-center justify-between px-4 py-3">
+              <View className="flex-row items-center gap-2.5">
+                {headerLeft}
+                <IdentityMark size={28} state={markState} spinOnPress />
+                <Text className="text-lg font-semibold text-foreground">Alia</Text>
+              </View>
+              <View className="flex-row items-center gap-2">
+                {hasMessages && (
+                  <TouchableOpacity onPress={clear} className="px-2.5 py-1.5">
+                    <Text className="text-sm text-muted-foreground">Clear</Text>
+                  </TouchableOpacity>
+                )}
+                {headerRight}
+              </View>
             </View>
-            <View className="flex-row items-center gap-2">
-              {hasMessages && (
-                <TouchableOpacity onPress={clear} className="px-2.5 py-1.5">
-                  <Text className="text-sm text-muted-foreground">Clear</Text>
-                </TouchableOpacity>
-              )}
-              {headerRight}
-            </View>
-          </View>
-        )}
-      />
+          )}
+        />
+      </KeyboardAvoidingView>
     </View>
   );
 }

package/src/lib/keyboard.tsx

@@ -1,6 +1,11 @@
 // Web: re-export React Native built-in components as keyboard-controller substitutes
 import React from 'react';
-import { ScrollView, type ScrollViewProps, KeyboardAvoidingView } from 'react-native';
+import {
+  ScrollView,
+  type ScrollViewProps,
+  KeyboardAvoidingView as RNKeyboardAvoidingView,
+  type KeyboardAvoidingViewProps as RNKeyboardAvoidingViewProps,
+} from 'react-native';
 
 // Accept native-only props so shared components don't cause TS errors
 type KeyboardAwareScrollViewProps = ScrollViewProps & {
@@ -17,6 +22,19 @@ const KeyboardAwareScrollView = React.forwardRef<ScrollView, KeyboardAwareScroll
 );
 KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
 
+// `automaticOffset` is keyboard-controller's: measure the view's position in
+// the window instead of trusting its parent-relative layout. The browser moves
+// its own viewport for the keyboard, so on web it has nothing to do.
+type KeyboardAvoidingViewProps = RNKeyboardAvoidingViewProps & {
+  automaticOffset?: boolean;
+};
+
+const KeyboardAvoidingView = React.forwardRef<
+  React.ComponentRef<typeof RNKeyboardAvoidingView>,
+  KeyboardAvoidingViewProps
+>(({ automaticOffset, ...props }, ref) => <RNKeyboardAvoidingView ref={ref} {...props} />);
+KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
+
 export { KeyboardAwareScrollView, KeyboardAvoidingView };
 
 // No-op provider on web — keyboard-controller is native-only