@comergehq/studio 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",

package/src/components/chat/ChatMessageList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, type NativeScrollEvent, type NativeSyntheticEvent, type ViewStyle } from 'react-native';
+import { Platform, View, type NativeScrollEvent, type NativeSyntheticEvent, type ViewStyle } from 'react-native';
 import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
 
 import type { ChatMessage } from '../models/types';
@@ -119,6 +119,8 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
         ref={listRef}
         data={messages}
         keyExtractor={(m: ChatMessage) => m.id}
+        keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'on-drag'}
+        keyboardShouldPersistTaps="handled"
         onScroll={handleScroll}
         scrollEventThrottle={16}
         showsVerticalScrollIndicator={false}

package/src/components/chat/ChatPage.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Keyboard, Platform, View, type ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Animated, { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';
 
 import type { ChatMessage } from '../models/types';
 import { useTheme } from '../../theme';
@@ -42,11 +41,9 @@ export function ChatPage({
   const insets = useSafeAreaInsets();
   const [composerHeight, setComposerHeight] = React.useState(0);
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
-  const animatedKeyboard = useAnimatedKeyboard();
 
   React.useEffect(() => {
     if (Platform.OS !== 'ios') return;
-
     const show = Keyboard.addListener('keyboardWillShow', () => setKeyboardVisible(true));
     const hide = Keyboard.addListener('keyboardWillHide', () => setKeyboardVisible(false));
     return () => {
@@ -56,10 +53,6 @@ export function ChatPage({
   }, []);
 
   const footerBottomPadding = Platform.OS === 'ios' ? (keyboardVisible ? 0 : insets.bottom) : insets.bottom + 10;
-  const footerAnimatedStyle = useAnimatedStyle(() => {
-    if (Platform.OS !== 'ios') return { paddingBottom: insets.bottom + 10 };
-    return { paddingBottom: animatedKeyboard.height.value > 0 ? 0 : insets.bottom };
-  });
   const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = composerHeight + footerBottomPadding + theme.spacing.xl;
 
@@ -80,35 +73,36 @@ export function ChatPage({
         </View>
       ) : null}
       <View style={{ flex: 1 }}>
-        <ChatMessageList
-          ref={listRef}
-          messages={messages}
-          showTypingIndicator={showTypingIndicator}
-          renderMessageContent={renderMessageContent}
-          onNearBottomChange={onNearBottomChange}
-          bottomInset={bottomInset}
-        />
-        {resolvedOverlay}
-
-        <Animated.View
-          style={[
-            {
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              bottom: 0,
-              paddingHorizontal: theme.spacing.lg,
-              paddingTop: theme.spacing.sm,
-            },
-            footerAnimatedStyle,
-          ]}
+        <View
+          style={{ flex: 1 }}
+        >
+          <ChatMessageList
+            ref={listRef}
+            messages={messages}
+            showTypingIndicator={showTypingIndicator}
+            renderMessageContent={renderMessageContent}
+            onNearBottomChange={onNearBottomChange}
+            bottomInset={bottomInset}
+          />
+          {resolvedOverlay}
+        </View>
+        <View
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            paddingHorizontal: theme.spacing.lg,
+            paddingTop: theme.spacing.sm,
+            paddingBottom: footerBottomPadding,
+          }}
         >
           <ChatComposer
             {...composer}
             attachments={composer.attachments ?? []}
             onLayout={({ height }) => setComposerHeight(height)}
           />
-        </Animated.View>
+        </View>
       </View>
     </View>
   );

package/src/components/studio-sheet/StudioBottomSheet.tsx

@@ -35,8 +35,7 @@ export type StudioBottomSheetProps = {
   children: React.ReactNode;
 
   /**
-   * Additional BottomSheet props, for advanced tuning.
-   * We intentionally do not expose everything as first-class props to keep SRP.
+   * Additional BottomSheet props
    */
   bottomSheetProps?: Omit<
     BottomSheetProps,
@@ -93,20 +92,6 @@ export function StudioBottomSheet({
     return () => sub.remove();
   }, [open, resolvedSheetRef]);
 
-  React.useEffect(() => {
-    if (Platform.OS !== 'ios') return;
-    const sub = Keyboard.addListener('keyboardDidHide', () => {
-      const sheet = resolvedSheetRef.current;
-      if (!sheet || !open) return;
-      const targetIndex = snapPoints.length - 1;
-      // Only "re-snap" if we're already at the highest snap point.
-      if (currentIndexRef.current === targetIndex) {
-        setTimeout(() => sheet.snapToIndex(targetIndex), 10);
-      }
-    });
-    return () => sub.remove();
-  }, [open, resolvedSheetRef, snapPoints.length]);
-
   React.useEffect(() => {
     const sheet = resolvedSheetRef.current;
     if (!sheet) return;

package/src/studio/ui/StudioOverlay.tsx

@@ -104,11 +104,15 @@ export function StudioOverlay({
     [confirmMrId, incomingMergeRequests]
   );
 
-  const closeSheet = React.useCallback(() => {
-    setSheetOpen(false);
-    Keyboard.dismiss();
+  const handleSheetOpenChange = React.useCallback((open: boolean) => {
+    setSheetOpen(open);
+    if (!open) Keyboard.dismiss();
   }, []);
 
+  const closeSheet = React.useCallback(() => {
+    handleSheetOpenChange(false);
+  }, [handleSheetOpenChange]);
+
   const openSheet = React.useCallback(() => setSheetOpen(true), []);
 
   const goToChat = React.useCallback(() => {
@@ -178,7 +182,7 @@ export function StudioOverlay({
       {/* Testing glow around runtime */}
       <EdgeGlowFrame visible={isTesting} role="accent" thickness={40} intensity={1} />
 
-      <StudioBottomSheet open={sheetOpen} onOpenChange={setSheetOpen}>
+      <StudioBottomSheet open={sheetOpen} onOpenChange={handleSheetOpenChange}>
         <StudioSheetPager
           activePage={activePage}
           width={width}