@comergehq/studio 0.1.2 → 0.1.4

package/src/components/chat/MultilineTextInput.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { TextInput, type TextInputProps, type TextStyle } from 'react-native';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+
+import { useTheme } from '../../theme';
+
+export type MultilineTextInputProps = Omit<TextInputProps, 'style'> & {
+  useBottomSheetTextInput?: boolean;
+  style?: TextStyle;
+};
+
+export const MultilineTextInput = React.forwardRef<TextInput, MultilineTextInputProps>(function MultilineTextInput(
+  { useBottomSheetTextInput = false, placeholder, placeholderTextColor, style, ...props }: MultilineTextInputProps,
+  ref
+) {
+  const theme = useTheme();
+
+  const baseStyle: TextStyle = {
+    minHeight: 44,
+    maxHeight: 160,
+    paddingVertical: theme.spacing.md,
+    paddingHorizontal: theme.spacing.lg,
+    color: theme.colors.text,
+    fontSize: theme.typography.fontSize.md,
+    lineHeight: theme.typography.lineHeight.md,
+  };
+
+  const resolvedPlaceholderColor = placeholderTextColor ?? theme.colors.textSubtle;
+
+  const commonProps: TextInputProps = {
+    ...props,
+    multiline: true,
+    placeholder,
+    placeholderTextColor: resolvedPlaceholderColor,
+    style: [baseStyle, style],
+    textAlignVertical: 'top',
+  };
+
+  return useBottomSheetTextInput ? (
+    <BottomSheetTextInput ref={ref} {...commonProps} />
+  ) : (
+    <TextInput ref={ref} {...commonProps} />
+  );
+});
+
+

package/src/components/chat/ScrollToBottomButton.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Pressable, View, type ViewStyle } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { useTheme } from '../../theme';
+import { withAlpha } from '../utils/color';
+
+export type ScrollToBottomButtonProps = {
+  visible: boolean;
+  onPress: () => void;
+  children: React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function ScrollToBottomButton({ visible, onPress, children, style }: ScrollToBottomButtonProps) {
+  const theme = useTheme();
+  const progress = useSharedValue(visible ? 1 : 0);
+  const [pressed, setPressed] = React.useState(false);
+
+  React.useEffect(() => {
+    progress.value = withTiming(visible ? 1 : 0, { duration: 200, easing: Easing.out(Easing.ease) });
+  }, [progress, visible]);
+
+  const animStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{ translateY: (1 - progress.value) * 20 }],
+  }));
+
+  const bg = theme.scheme === 'dark' ? 'rgba(39,39,42,0.9)' : 'rgba(244,244,245,0.95)';
+  const border = theme.scheme === 'dark' ? withAlpha('#FFFFFF', 0.12) : withAlpha('#000000', 0.08);
+
+  return (
+    <Animated.View
+      pointerEvents={visible ? 'auto' : 'none'}
+      style={[
+        {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          alignItems: 'center',
+        },
+        style,
+        animStyle,
+      ]}
+    >
+      <View
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: 22,
+          backgroundColor: bg,
+          borderWidth: 1,
+          borderColor: border,
+          alignItems: 'center',
+          justifyContent: 'center',
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.25,
+          shadowRadius: 4,
+          elevation: 5,
+          opacity: pressed ? 0.85 : 1,
+        }}
+      >
+        <Pressable
+          onPress={onPress}
+          onPressIn={() => setPressed(true)}
+          onPressOut={() => setPressed(false)}
+          hitSlop={10}
+          style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}
+        >
+          {children}
+        </Pressable>
+      </View>
+    </Animated.View>
+  );
+}
+
+

package/src/components/chat/TypingIndicator.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Animated, View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+
+export type TypingIndicatorProps = {
+  style?: ViewStyle;
+};
+
+export function TypingIndicator({ style }: TypingIndicatorProps) {
+  const theme = useTheme();
+  const dotColor = theme.colors.textSubtle;
+  const anims = React.useMemo(
+    () => [new Animated.Value(0.3), new Animated.Value(0.3), new Animated.Value(0.3)],
+    []
+  );
+
+  React.useEffect(() => {
+    const loops: Animated.CompositeAnimation[] = [];
+    anims.forEach((a, idx) => {
+      const seq = Animated.sequence([
+        Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
+        Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true }),
+      ]);
+      const loop = Animated.loop(seq);
+      loops.push(loop);
+      loop.start();
+    });
+    return () => {
+      loops.forEach((l) => l.stop());
+    };
+  }, [anims]);
+
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'center' }, style]}>
+      {anims.map((a, i) => (
+        <Animated.View
+          key={i}
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            marginHorizontal: 3,
+            backgroundColor: dotColor,
+            opacity: a,
+            transform: [{ translateY: Animated.multiply(Animated.subtract(a, 0.3), 2) }],
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+

package/src/components/chat/index.ts

@@ -0,0 +1,28 @@
+export { TypingIndicator } from './TypingIndicator';
+export type { TypingIndicatorProps } from './TypingIndicator';
+
+export { ChatMessageBubble } from './ChatMessageBubble';
+export type { ChatMessageBubbleProps } from './ChatMessageBubble';
+
+export { ChatMessageList } from './ChatMessageList';
+export type { ChatMessageListProps, ChatMessageListRef } from './ChatMessageList';
+
+export { ScrollToBottomButton } from './ScrollToBottomButton';
+export type { ScrollToBottomButtonProps } from './ScrollToBottomButton';
+
+export { ForkNoticeBanner } from './ForkNoticeBanner';
+export type { ForkNoticeBannerProps } from './ForkNoticeBanner';
+
+export { MultilineTextInput } from './MultilineTextInput';
+export type { MultilineTextInputProps } from './MultilineTextInput';
+
+export { ChatComposer } from './ChatComposer';
+export type { ChatComposerProps } from './ChatComposer';
+
+export { ChatHeader } from './ChatHeader';
+export type { ChatHeaderProps } from './ChatHeader';
+
+export { ChatPage } from './ChatPage';
+export type { ChatPageProps } from './ChatPage';
+
+

package/src/components/comments/AppCommentsSheet.tsx

@@ -0,0 +1,213 @@
+import * as React from 'react';
+import { ActivityIndicator, Keyboard, Platform, Pressable, View } from 'react-native';
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetScrollView,
+} from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { Play } from 'lucide-react-native';
+
+import { useTheme } from '../../theme';
+import { withAlpha } from '../utils/color';
+import { Text } from '../primitives/Text';
+import { ChatComposer } from '../chat/ChatComposer';
+import { CommentRow } from './CommentRow';
+import { useAppComments } from './useAppComments';
+import { useAppDetails } from './useAppDetails';
+import { useIosKeyboardSnapFix } from './useIosKeyboardSnapFix';
+
+export type AppCommentsSheetProps = {
+  appId: string | null;
+  onClose: () => void;
+  onCountChange?: (count: number) => void;
+  onPlayApp?: (appId: string) => void | Promise<void>;
+};
+
+export function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }: AppCommentsSheetProps) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const sheetRef = React.useRef<BottomSheetModal | null>(null);
+  const snapPoints = React.useMemo(() => ['50%', '90%'], []);
+
+  const { comments, loading, sending, error, create, refresh } = useAppComments(appId);
+  const { app, loading: loadingApp } = useAppDetails(appId);
+  const { keyboardVisible } = useIosKeyboardSnapFix(sheetRef);
+
+  React.useEffect(() => {
+    if (appId) {
+      sheetRef.current?.present();
+      void refresh();
+    } else {
+      sheetRef.current?.dismiss();
+    }
+  }, [appId, refresh]);
+
+  React.useEffect(() => {
+    if (!appId) return;
+    onCountChange?.(comments.length);
+  }, [appId, comments.length, onCountChange]);
+
+  const renderBackdrop = React.useCallback(
+    (props: any) => <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} opacity={0.5} />,
+    []
+  );
+
+  const handleChange = React.useCallback(
+    (index: number) => {
+      if (index === -1) onClose();
+    },
+    [onClose]
+  );
+
+  const handlePlay = React.useCallback(async () => {
+    if (!appId) return;
+    sheetRef.current?.dismiss();
+    await onPlayApp?.(appId);
+    onClose();
+  }, [appId, onClose, onPlayApp]);
+
+  return (
+    <BottomSheetModal
+      ref={sheetRef}
+      index={1}
+      snapPoints={snapPoints}
+      enableDynamicSizing={false}
+      backdropComponent={renderBackdrop}
+      onChange={handleChange}
+      backgroundStyle={{
+        backgroundColor: theme.scheme === 'dark' ? '#0B080F' : '#FFFFFF',
+        borderTopLeftRadius: Platform.OS === 'ios' ? 39 : 16,
+        borderTopRightRadius: Platform.OS === 'ios' ? 39 : 16,
+      }}
+      handleIndicatorStyle={{ backgroundColor: theme.colors.handleIndicator }}
+      keyboardBehavior="interactive"
+      keyboardBlurBehavior="restore"
+      android_keyboardInputMode="adjustResize"
+      topInset={insets.top}
+    >
+      <View style={{ flex: 1 }}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: theme.spacing.lg,
+            paddingBottom: theme.spacing.sm,
+            borderBottomWidth: 1,
+            borderBottomColor: withAlpha(theme.colors.border, 0.1),
+          }}
+        >
+          <Text
+            numberOfLines={1}
+            style={{
+              flex: 1,
+              marginRight: theme.spacing.sm,
+              fontSize: 18,
+              lineHeight: 22,
+              fontWeight: theme.typography.fontWeight.bold,
+            }}
+          >
+            {loadingApp ? 'Loading...' : app?.name || 'Comments'}
+          </Text>
+
+          <LiquidGlassView
+            style={[
+              { borderRadius: 24 },
+              !isLiquidGlassSupported && { backgroundColor: theme.scheme === 'dark' ? '#18181B' : '#F6F6F6' },
+            ]}
+            interactive
+            effect="clear"
+          >
+            <View
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 999,
+                backgroundColor: theme.colors.primary,
+                alignItems: 'center',
+                justifyContent: 'center',
+                opacity: appId ? 1 : 0.5,
+              }}
+            >
+              <Pressable
+                disabled={!appId}
+                onPress={() => void handlePlay()}
+                hitSlop={8}
+                style={({ pressed }) => [
+                  {
+                    width: '100%',
+                    height: '100%',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  },
+                  pressed ? { opacity: 0.85 } : null,
+                ]}
+              >
+                <Play size={16} color={theme.colors.onPrimary} />
+              </Pressable>
+            </View>
+          </LiquidGlassView>
+        </View>
+
+        <BottomSheetScrollView
+          style={{ flex: 1 }}
+          contentContainerStyle={{
+            padding: theme.spacing.lg,
+            paddingBottom: 100,
+            flexGrow: 1,
+          }}
+          keyboardShouldPersistTaps="handled"
+        >
+          {loading && comments.length === 0 ? (
+            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+              <ActivityIndicator />
+            </View>
+          ) : comments.length === 0 ? (
+            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+              <Text variant="bodyMuted" style={{ textAlign: 'center' }}>
+                No comments yet
+              </Text>
+            </View>
+          ) : (
+            comments.map((c, idx) => <CommentRow key={c.id} comment={c} showDivider={idx < comments.length - 1} />)
+          )}
+          {error ? (
+            <Text variant="captionMuted" style={{ marginTop: theme.spacing.lg }}>
+              Failed to load comments.
+            </Text>
+          ) : null}
+        </BottomSheetScrollView>
+
+        <View
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            paddingHorizontal: theme.spacing.lg,
+            paddingTop: theme.spacing.sm,
+            paddingBottom: Platform.OS === 'ios' ? (keyboardVisible ? theme.spacing.lg : insets.bottom) : insets.bottom + 10,
+            borderTopWidth: 1,
+            borderTopColor: withAlpha(theme.colors.border, 0.1),
+            backgroundColor: withAlpha(theme.colors.background, 0.8),
+          }}
+        >
+          <ChatComposer
+            placeholder="Write a comment..."
+            disabled={sending}
+            sending={sending}
+            useBottomSheetTextInput
+            onSend={async (text) => {
+              await create(text);
+              Keyboard.dismiss();
+            }}
+          />
+        </View>
+      </View>
+    </BottomSheetModal>
+  );
+}
+
+

package/src/components/comments/CommentRow.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { AppComment } from '../../data/comments/types';
+import { usersRepository } from '../../data/users/repository';
+import { useTheme } from '../../theme';
+import { Avatar } from '../primitives/Avatar';
+import { Text } from '../primitives/Text';
+import { withAlpha } from '../utils/color';
+import { formatTimeAgo } from './formatTimeAgo';
+
+export function CommentRow({ comment, showDivider }: { comment: AppComment; showDivider: boolean }) {
+  const theme = useTheme();
+  const [authorName, setAuthorName] = React.useState<string | null>(null);
+  const [authorAvatar, setAuthorAvatar] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const stats = await usersRepository.getStats(comment.authorId);
+        if (cancelled) return;
+        setAuthorName(stats.name);
+        setAuthorAvatar(stats.avatar);
+      } catch {
+        // ignore
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [comment.authorId]);
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        gap: theme.spacing.md,
+        paddingVertical: theme.spacing.md,
+        borderBottomWidth: showDivider ? 1 : 0,
+        borderBottomColor: withAlpha(theme.colors.border, 0.5),
+      }}
+    >
+      <Avatar size={32} uri={authorAvatar} name={authorName ?? comment.authorId} style={{ marginTop: 6 }} />
+
+      <View style={{ flex: 1, minWidth: 0, gap: 4 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.spacing.sm }}>
+          <Text style={{ fontSize: 14, lineHeight: 18, fontWeight: theme.typography.fontWeight.bold, color: theme.colors.text }}>
+            {authorName ?? 'Unknown User'}
+          </Text>
+          <Text style={{ fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }}>
+            {formatTimeAgo(comment.createdAt)}
+          </Text>
+        </View>
+        <Text style={{ fontSize: 14, lineHeight: 20, color: theme.colors.text }}>
+          {comment.body ?? comment.description ?? ''}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+

package/src/components/comments/formatTimeAgo.ts

@@ -0,0 +1,3 @@
+export { formatTimeAgo } from '../utils/formatTimeAgo';
+
+

package/src/components/comments/index.ts

@@ -0,0 +1,3 @@
+export { AppCommentsSheet } from './AppCommentsSheet';
+
+

package/src/components/comments/useAppComments.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+import { appCommentsRepository } from '../../data/comments/repository';
+import type { AppComment } from '../../data/comments/types';
+
+export type UseAppCommentsResult = {
+  comments: AppComment[];
+  loading: boolean;
+  sending: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+  create: (text: string) => Promise<void>;
+};
+
+export function useAppComments(appId: string | null): UseAppCommentsResult {
+  const [comments, setComments] = React.useState<AppComment[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [sending, setSending] = React.useState(false);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  const sortByCreatedAtAsc = React.useCallback((items: AppComment[]) => {
+    return [...items].sort((a, b) => {
+      const at = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+      const bt = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+      return at - bt;
+    });
+  }, []);
+
+  const refresh = React.useCallback(async () => {
+    if (!appId) {
+      setComments([]);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await appCommentsRepository.list(appId, { page: 1, pageSize: 50, includeDeleted: false });
+      setComments(sortByCreatedAtAsc(res.items));
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+      setComments([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [appId, sortByCreatedAtAsc]);
+
+  React.useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const create = React.useCallback(
+    async (text: string) => {
+      if (!appId) return;
+      const trimmed = text.trim();
+      if (!trimmed) return;
+      setSending(true);
+      setError(null);
+      try {
+        const newComment = await appCommentsRepository.create(appId, { body: trimmed, commentType: 'general' });
+        setComments((prev) => sortByCreatedAtAsc([...prev, newComment]));
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error(String(e)));
+        throw e;
+      } finally {
+        setSending(false);
+      }
+    },
+    [appId, sortByCreatedAtAsc]
+  );
+
+  return { comments, loading, sending, error, refresh, create };
+}
+
+

package/src/components/comments/useAppDetails.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { appsRepository } from '../../data/apps/repository';
+import type { App } from '../../data/apps/types';
+
+export function useAppDetails(appId: string | null) {
+  const [app, setApp] = React.useState<App | null>(null);
+  const [loading, setLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!appId) {
+      setApp(null);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    (async () => {
+      try {
+        const res = await appsRepository.getById(appId);
+        if (!cancelled) setApp(res);
+      } catch {
+        if (!cancelled) setApp(null);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [appId]);
+
+  return { app, loading };
+}
+
+

package/src/components/comments/useIosKeyboardSnapFix.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Keyboard, Platform } from 'react-native';
+import type { BottomSheetModal } from '@gorhom/bottom-sheet';
+
+export function useIosKeyboardSnapFix(sheetRef: React.RefObject<BottomSheetModal | null>) {
+  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    if (Platform.OS !== 'ios') return;
+    const show = Keyboard.addListener('keyboardWillShow', () => setKeyboardVisible(true));
+    const hide = Keyboard.addListener('keyboardWillHide', () => {
+      setKeyboardVisible(false);
+      setTimeout(() => sheetRef.current?.snapToIndex?.(1), 10);
+    });
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, [sheetRef]);
+
+  return { keyboardVisible };
+}
+
+