@comergehq/studio 0.1.35 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
@@ -59,6 +59,7 @@
     "expo": "*",
     "expo-asset": "*",
     "expo-file-system": "*",
+    "expo-image": "*",
     "expo-haptics": "*",
     "expo-linear-gradient": "*",
     "lottie-react-native": "*",

package/src/components/chat/ChatMessageAttachments.tsx

@@ -0,0 +1,243 @@
+import * as React from 'react';
+import {
+  Animated,
+  Dimensions,
+  FlatList,
+  Modal,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { Image as ExpoImage } from 'expo-image';
+
+import type { ChatAttachment } from '../models/types';
+import { useTheme } from '../../theme';
+import { Text } from '../primitives/Text';
+import { IconClose } from '../icons/StudioIcons';
+
+export type ChatMessageAttachmentsProps = {
+  messageId: string;
+  attachments: ChatAttachment[];
+  align?: 'left' | 'right';
+  onAttachmentLoadError?: (messageId: string, attachmentId: string) => void;
+};
+
+export function ChatMessageAttachments({
+  messageId,
+  attachments,
+  align = 'left',
+  onAttachmentLoadError,
+}: ChatMessageAttachmentsProps) {
+  const theme = useTheme();
+  const [viewerVisible, setViewerVisible] = React.useState(false);
+  const [viewerIndex, setViewerIndex] = React.useState(0);
+  const failedKeysRef = React.useRef<Set<string>>(new Set());
+  const [loadingById, setLoadingById] = React.useState<Record<string, boolean>>({});
+  const [modalLoadingById, setModalLoadingById] = React.useState<Record<string, boolean>>({});
+  const pulse = React.useRef(new Animated.Value(0.45)).current;
+
+  const imageAttachments = React.useMemo(
+    () =>
+      attachments.filter(
+        (att) =>
+          att.mimeType.startsWith('image/') &&
+          typeof att.uri === 'string' &&
+          att.uri.length > 0
+      ),
+    [attachments]
+  );
+
+  const itemHeight = imageAttachments.length === 1 ? 180 : 124;
+  const maxItemWidth = imageAttachments.length === 1 ? 280 : 180;
+
+  const getAspectRatio = (att: ChatAttachment) => {
+    const width = typeof att.width === 'number' ? att.width : 0;
+    const height = typeof att.height === 'number' ? att.height : 0;
+    if (width > 0 && height > 0) {
+      return Math.max(0.35, Math.min(2.4, width / height));
+    }
+    return 0.8;
+  };
+
+  React.useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 0.85, duration: 650, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 0.45, duration: 650, useNativeDriver: true }),
+      ])
+    ).start();
+  }, [pulse]);
+
+  React.useEffect(() => {
+    if (imageAttachments.length === 0) {
+      setLoadingById({});
+      setModalLoadingById({});
+      return;
+    }
+    setLoadingById((prev) => {
+      const next: Record<string, boolean> = {};
+      for (const att of imageAttachments) {
+        next[att.id] = prev[att.id] ?? true;
+      }
+      return next;
+    });
+  }, [imageAttachments]);
+
+  React.useEffect(() => {
+    if (!viewerVisible) return;
+    if (imageAttachments.length === 0) {
+      setModalLoadingById({});
+      return;
+    }
+    setModalLoadingById(() => {
+      const next: Record<string, boolean> = {};
+      for (const att of imageAttachments) {
+        next[att.id] = true;
+      }
+      return next;
+    });
+  }, [viewerVisible, imageAttachments]);
+
+  if (imageAttachments.length === 0) return null;
+
+  const handleError = (attachmentId: string) => {
+    const key = `${messageId}:${attachmentId}`;
+    if (failedKeysRef.current.has(key)) return;
+    failedKeysRef.current.add(key);
+    onAttachmentLoadError?.(messageId, attachmentId);
+  };
+
+  return (
+    <>
+      <View
+        style={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
+          alignSelf: align === 'right' ? 'flex-end' : 'flex-start',
+          gap: theme.spacing.sm,
+          marginBottom: theme.spacing.sm,
+        }}
+      >
+        {imageAttachments.map((att, index) => (
+          <Pressable
+            key={att.id}
+            onPress={() => {
+              setViewerIndex(index);
+              setViewerVisible(true);
+            }}
+            accessibilityRole="button"
+            accessibilityLabel={`Attachment ${index + 1} of ${imageAttachments.length}`}
+            style={{
+              height: itemHeight,
+              aspectRatio: getAspectRatio(att),
+              maxWidth: maxItemWidth,
+              borderRadius: theme.radii.lg,
+              overflow: 'hidden',
+            }}
+          >
+            {loadingById[att.id] ? (
+              <Animated.View
+                style={{
+                  ...StyleSheet.absoluteFillObject,
+                  opacity: pulse,
+                  backgroundColor: theme.colors.border,
+                }}
+              />
+            ) : null}
+            <ExpoImage
+              source={{ uri: att.uri }}
+              style={{ width: '100%', height: '100%' }}
+              contentFit="contain"
+              transition={140}
+              cachePolicy="memory-disk"
+              onLoadStart={() => {
+                setLoadingById((prev) => ({ ...prev, [att.id]: true }));
+              }}
+              onLoadEnd={() => {
+                setLoadingById((prev) => ({ ...prev, [att.id]: false }));
+              }}
+              onError={() => handleError(att.id)}
+            />
+          </Pressable>
+        ))}
+      </View>
+
+      <Modal visible={viewerVisible} transparent animationType="fade" onRequestClose={() => setViewerVisible(false)}>
+        <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.95)' }}>
+          <View
+            style={{
+              position: 'absolute',
+              top: 56,
+              right: 16,
+              zIndex: 2,
+            }}
+          >
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Close attachment viewer"
+              onPress={() => setViewerVisible(false)}
+              style={{
+                width: 44,
+                height: 44,
+                borderRadius: 22,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(255,255,255,0.15)',
+              }}
+            >
+              <IconClose size={18} colorToken="onPrimary" />
+            </Pressable>
+          </View>
+          <FlatList
+            data={imageAttachments}
+            horizontal
+            pagingEnabled
+            initialScrollIndex={viewerIndex}
+            keyExtractor={(item) => item.id}
+            showsHorizontalScrollIndicator={false}
+            getItemLayout={(_, index) => {
+              const width = Dimensions.get('window').width;
+              return { length: width, offset: width * index, index };
+            }}
+            renderItem={({ item, index }) => (
+              <View style={{ width: Dimensions.get('window').width, height: '100%', justifyContent: 'center' }}>
+                {modalLoadingById[item.id] ? (
+                  <Animated.View
+                    style={{
+                      ...StyleSheet.absoluteFillObject,
+                      opacity: pulse,
+                      backgroundColor: theme.colors.border,
+                    }}
+                  />
+                ) : null}
+                <ExpoImage
+                  source={{ uri: item.uri }}
+                  style={{ width: '100%', height: '78%' }}
+                  contentFit="contain"
+                  transition={140}
+                  cachePolicy="memory-disk"
+                  onLoadStart={() => {
+                    setModalLoadingById((prev) => ({ ...prev, [item.id]: true }));
+                  }}
+                  onLoadEnd={() => {
+                    setModalLoadingById((prev) => ({ ...prev, [item.id]: false }));
+                  }}
+                  onError={() => handleError(item.id)}
+                />
+                <Text
+                  variant="caption"
+                  color="#FFFFFF"
+                  style={{ textAlign: 'center', marginTop: theme.spacing.sm }}
+                >
+                  {index + 1} / {imageAttachments.length}
+                </Text>
+              </View>
+            )}
+          />
+        </View>
+      </Modal>
+    </>
+  );
+}
+

package/src/components/chat/ChatMessageBubble.tsx

@@ -8,6 +8,7 @@ import { Button } from '../primitives/Button';
 import { MarkdownText } from '../primitives/MarkdownText';
 import { Surface } from '../primitives/Surface';
 import { Text } from '../primitives/Text';
+import { ChatMessageAttachments } from './ChatMessageAttachments';
 
 export type ChatMessageBubbleProps = {
   message: ChatMessage;
@@ -18,6 +19,7 @@ export type ChatMessageBubbleProps = {
   isLast?: boolean;
   retrying?: boolean;
   onRetryMessage?: (messageId: string) => void;
+  onAttachmentLoadError?: (messageId: string, attachmentId: string) => void;
   style?: ViewStyle;
 };
 
@@ -36,12 +38,34 @@ function areMessageMetaEqual(a: ChatMessage['meta'], b: ChatMessage['meta']): bo
   );
 }
 
+function areMessageAttachmentsEqual(a: ChatMessage['attachments'], b: ChatMessage['attachments']): boolean {
+  if (a === b) return true;
+  const left = a ?? [];
+  const right = b ?? [];
+  if (left.length !== right.length) return false;
+  for (let i = 0; i < left.length; i += 1) {
+    if (
+      left[i].id !== right[i].id ||
+      left[i].name !== right[i].name ||
+      left[i].mimeType !== right[i].mimeType ||
+      left[i].size !== right[i].size ||
+      left[i].uri !== right[i].uri ||
+      left[i].width !== right[i].width ||
+      left[i].height !== right[i].height
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
 function ChatMessageBubbleInner({
   message,
   renderContent,
   isLast,
   retrying,
   onRetryMessage,
+  onAttachmentLoadError,
   style,
 }: ChatMessageBubbleProps) {
   const theme = useTheme();
@@ -65,38 +89,62 @@ function ChatMessageBubbleInner({
     metaStatus === 'success' ? theme.colors.success : metaStatus === 'error' ? theme.colors.danger : undefined;
   const showRetry = Boolean(onRetryMessage) && isLast && metaStatus === 'error' && message.author === 'human';
   const retryLabel = retrying ? 'Retrying...' : 'Retry';
+  const hasText = message.content.trim().length > 0;
+  const attachments = message.attachments ?? [];
+  const hasAttachments = attachments.length > 0;
+  const hasStatusIcon = isMergeCompleted || isSyncCompleted || isMergeApproved || isSyncStarted;
+  const shouldRenderBubble = hasText || hasStatusIcon;
   const handleRetryPress = React.useCallback(() => {
     onRetryMessage?.(message.id);
   }, [message.id, onRetryMessage]);
 
   return (
     <View style={[align, style]}>
-      <Surface
-        variant={bubbleVariant}
-        style={[
-          {
+      {hasAttachments ? (
+        <View
+          style={{
             maxWidth: '85%',
-            borderRadius: theme.radii.lg,
-            paddingHorizontal: theme.spacing.lg,
-            paddingVertical: theme.spacing.md,
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-          },
-          cornerStyle,
-        ]}
-      >
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          {isMergeCompleted || isSyncCompleted ? (
-            <CheckCheck size={16} color={theme.colors.success} style={{ marginRight: theme.spacing.sm }} />
-          ) : null}
-          {isMergeApproved || isSyncStarted ? (
-            <GitMerge size={16} color={theme.colors.text} style={{ marginRight: theme.spacing.sm }} />
-          ) : null}
-          <View style={{ flexShrink: 1, minWidth: 0 }}>
-            {renderContent ? renderContent(message) : <MarkdownText markdown={message.content} variant="chat" bodyColor={bodyColor} />}
-          </View>
+            marginBottom: shouldRenderBubble ? theme.spacing.xs : 0,
+            alignSelf: isHuman ? 'flex-end' : 'flex-start',
+            alignItems: isHuman ? 'flex-end' : 'flex-start',
+          }}
+        >
+          <ChatMessageAttachments
+            messageId={message.id}
+            attachments={attachments}
+            align={isHuman ? 'right' : 'left'}
+            onAttachmentLoadError={onAttachmentLoadError}
+          />
         </View>
-      </Surface>
+      ) : null}
+      {shouldRenderBubble ? (
+        <Surface
+          variant={bubbleVariant}
+          style={[
+            {
+              maxWidth: '85%',
+              borderRadius: theme.radii.lg,
+              paddingHorizontal: theme.spacing.lg,
+              paddingVertical: theme.spacing.md,
+              borderWidth: 1,
+              borderColor: theme.colors.border,
+            },
+            cornerStyle,
+          ]}
+        >
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {isMergeCompleted || isSyncCompleted ? (
+              <CheckCheck size={16} color={theme.colors.success} style={{ marginRight: theme.spacing.sm }} />
+            ) : null}
+            {isMergeApproved || isSyncStarted ? (
+              <GitMerge size={16} color={theme.colors.text} style={{ marginRight: theme.spacing.sm }} />
+            ) : null}
+            <View style={{ flexShrink: 1, minWidth: 0 }}>
+              {renderContent ? renderContent(message) : <MarkdownText markdown={message.content} variant="chat" bodyColor={bodyColor} />}
+            </View>
+          </View>
+        </Surface>
+      ) : null}
       {showRetry ? (
         <View style={{ marginTop: theme.spacing.xs, alignSelf: align.alignSelf }}>
           <Button
@@ -130,6 +178,7 @@ function areEqual(prev: ChatMessageBubbleProps, next: ChatMessageBubbleProps): b
     prev.message.id === next.message.id &&
     prev.message.author === next.message.author &&
     prev.message.content === next.message.content &&
+    areMessageAttachmentsEqual(prev.message.attachments, next.message.attachments) &&
     prev.message.kind === next.message.kind &&
     String(prev.message.createdAt) === String(next.message.createdAt) &&
     areMessageMetaEqual(prev.message.meta, next.message.meta) &&
@@ -137,6 +186,7 @@ function areEqual(prev: ChatMessageBubbleProps, next: ChatMessageBubbleProps): b
     prev.isLast === next.isLast &&
     prev.retrying === next.retrying &&
     prev.onRetryMessage === next.onRetryMessage &&
+    prev.onAttachmentLoadError === next.onAttachmentLoadError &&
     prev.style === next.style
   );
 }

package/src/components/chat/ChatMessageList.tsx

@@ -17,6 +17,7 @@ export type ChatMessageListProps = {
   renderMessageContent?: ChatMessageBubbleProps['renderContent'];
   onRetryMessage?: (messageId: string) => void;
   isRetryingMessage?: (messageId: string) => boolean;
+  onAttachmentLoadError?: (messageId: string, attachmentId: string) => void;
   contentStyle?: ViewStyle;
   bottomInset?: number;
   /**
@@ -37,6 +38,7 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       renderMessageContent,
       onRetryMessage,
       isRetryingMessage,
+      onAttachmentLoadError,
       contentStyle,
       bottomInset = 0,
       onNearBottomChange,
@@ -144,9 +146,10 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
           isLast={Boolean(lastMessageId && item.id === lastMessageId)}
           retrying={isRetryingMessage?.(item.id) ?? false}
           onRetryMessage={onRetryMessage}
+          onAttachmentLoadError={onAttachmentLoadError}
         />
       ),
-      [isRetryingMessage, lastMessageId, onRetryMessage, renderMessageContent]
+      [isRetryingMessage, lastMessageId, onAttachmentLoadError, onRetryMessage, renderMessageContent]
     );
 
     return (

package/src/components/chat/ChatPage.tsx

@@ -14,6 +14,7 @@ export type ChatPageProps = {
   renderMessageContent?: ChatMessageListProps['renderMessageContent'];
   onRetryMessage?: ChatMessageListProps['onRetryMessage'];
   isRetryingMessage?: ChatMessageListProps['isRetryingMessage'];
+  onAttachmentLoadError?: ChatMessageListProps['onAttachmentLoadError'];
   topBanner?: React.ReactNode;
   composerTop?: React.ReactNode;
   composer: Omit<ChatComposerProps, 'attachments'> & {
@@ -36,6 +37,7 @@ export function ChatPage({
   renderMessageContent,
   onRetryMessage,
   isRetryingMessage,
+  onAttachmentLoadError,
   topBanner,
   composerTop,
   composer,
@@ -86,6 +88,7 @@ export function ChatPage({
             renderMessageContent={renderMessageContent}
             onRetryMessage={onRetryMessage}
             isRetryingMessage={isRetryingMessage}
+            onAttachmentLoadError={onAttachmentLoadError}
             onNearBottomChange={onNearBottomChange}
             bottomInset={bottomInset}
           />

package/src/components/draw/DrawModeOverlay.tsx

@@ -107,7 +107,13 @@ export function DrawModeOverlay({
 
   return (
     <View style={[StyleSheet.absoluteFill, styles.root, style]} pointerEvents="box-none">
-      <EdgeGlowFrame visible={!hideUi} role="danger" thickness={50} intensity={1} />
+      <EdgeGlowFrame
+        visible={!hideUi}
+        role="danger"
+        thickness={50}
+        intensity={1}
+        animationDurationMs={hideUi ? 0 : 300}
+      />
 
       <DrawSurface
         color={selectedColor}

package/src/components/models/types.ts

@@ -31,6 +31,16 @@ export type ChatMessageMeta = {
   threadId?: string;
 };
 
+export type ChatAttachment = {
+  id: string;
+  name: string;
+  mimeType: string;
+  size: number;
+  uri?: string;
+  width?: number;
+  height?: number;
+};
+
 export type ChatMessage = {
   id: string;
   author: ChatAuthor;
@@ -38,6 +48,7 @@ export type ChatMessage = {
   createdAt?: string | number | Date | null;
   kind?: string | null;
   meta?: ChatMessageMeta | null;
+  attachments?: ChatAttachment[];
 };
 
 

package/src/components/overlays/EdgeGlowFrame.tsx

@@ -19,6 +19,10 @@ export type EdgeGlowFrameProps = {
    * Optional intensity multiplier for alpha (0..1).
    */
   intensity?: number;
+  /**
+   * Opacity animation duration in ms.
+   */
+  animationDurationMs?: number;
   style?: ViewStyle;
 };
 
@@ -41,6 +45,7 @@ export function EdgeGlowFrame({
   role = 'accent',
   thickness = 40,
   intensity = 1,
+  animationDurationMs = 300,
   style,
 }: EdgeGlowFrameProps) {
   const theme = useTheme();
@@ -51,10 +56,10 @@ export function EdgeGlowFrame({
   React.useEffect(() => {
     Animated.timing(anim, {
       toValue: visible ? 1 : 0,
-      duration: 300,
+      duration: animationDurationMs,
       useNativeDriver: true,
     }).start();
-  }, [anim, visible]);
+  }, [anim, visible, animationDurationMs]);
 
   const c = baseColor(role, theme);
   const strong = withAlpha(c, 0.6 * alpha);

package/src/data/attachment/types.ts

@@ -18,6 +18,8 @@ export type PresignFile = {
   size: number;
   mimeType: string;
   checksum?: string;
+  width?: number;
+  height?: number;
 };
 
 export type PresignAttachmentsRequest = {

package/src/studio/ComergeStudio.tsx

@@ -550,6 +550,9 @@ function ComergeStudioInner({
           chatSending={actions.sending}
           chatShowTypingIndicator={chatShowTypingIndicator}
           onSendChat={(text, attachments) => actions.sendEdit({ prompt: text, attachments })}
+          onChatAttachmentLoadError={() => {
+            thread.recoverAttachmentUrls();
+          }}
           chatQueueItems={chatQueueItems}
           onRemoveQueueItem={(id) => editQueueActions.cancel(id)}
           chatProgress={showChatProgress ? agentProgress.view : null}

package/src/studio/hooks/useAttachmentUpload.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { Image, Platform } from 'react-native';
 import * as FileSystem from 'expo-file-system/legacy';
 
 import { attachmentRepository } from '../../data/attachment/repository';
@@ -59,6 +59,23 @@ function getMimeTypeFromDataUrl(dataUrl: string): string {
   return mimeMatch?.[1] ?? 'image/png';
 }
 
+async function getImageDimensionsFromDataUrl(dataUrl: string): Promise<{ width?: number; height?: number }> {
+  try {
+    const normalized = dataUrl.startsWith('data:') ? dataUrl : `data:image/png;base64,${dataUrl}`;
+    const dims = await new Promise<{ width: number; height: number }>((resolve, reject) => {
+      Image.getSize(
+        normalized,
+        (width, height) => resolve({ width, height }),
+        (err) => reject(err)
+      );
+    });
+    if (dims.width > 0 && dims.height > 0) {
+      return { width: Math.round(dims.width), height: Math.round(dims.height) };
+    }
+  } catch {}
+  return {};
+}
+
 export function useAttachmentUpload(): UseAttachmentUploadResult {
   const [uploading, setUploading] = React.useState(false);
   const [error, setError] = React.useState<Error | null>(null);
@@ -78,19 +95,28 @@ export function useAttachmentUpload(): UseAttachmentUploadResult {
               ? await dataUrlToBlobAndroid(normalized)
               : await (await fetch(normalized)).blob();
           const mimeType = getMimeTypeFromDataUrl(normalized);
-          return { blob, idx, mimeType };
+          const dimensions = mimeType.startsWith('image/')
+            ? await getImageDimensionsFromDataUrl(normalized)
+            : {};
+          return { blob, idx, mimeType, ...dimensions };
         })
       );
 
-      const files = blobs.map(({ blob, mimeType }, idx) => ({
+      const files = blobs.map(({ blob, mimeType, width, height }, idx) => ({
         name: `attachment-${Date.now()}-${idx}.png`,
         size: blob.size,
         mimeType,
+        width,
+        height,
       }));
 
       const presign = await attachmentRepository.presign({ threadId, appId, files });
       await Promise.all(presign.uploads.map((u, index) => attachmentRepository.upload(u, blobs[index].blob)));
-      return presign.uploads.map((u) => u.attachment);
+      return presign.uploads.map((u, index) => ({
+        ...u.attachment,
+        width: blobs[index].width,
+        height: blobs[index].height,
+      }));
     } catch (e) {
       const err = e instanceof Error ? e : new Error(String(e));
       setError(err);
@@ -114,14 +140,19 @@ export function useAttachmentUpload(): UseAttachmentUploadResult {
               ? await dataUrlToBlobAndroid(normalized)
               : await (await fetch(normalized)).blob();
           const mimeType = getMimeTypeFromDataUrl(normalized);
-          return { blob, mimeType };
+          const dimensions = mimeType.startsWith('image/')
+            ? await getImageDimensionsFromDataUrl(normalized)
+            : {};
+          return { blob, mimeType, ...dimensions };
         })
       );
 
-      const files = blobs.map(({ blob, mimeType }, idx) => ({
+      const files = blobs.map(({ blob, mimeType, width, height }, idx) => ({
         name: `attachment-${Date.now()}-${idx}.png`,
         size: blob.size,
         mimeType,
+        width,
+        height,
       }));
 
       const presign = await attachmentRepository.stagePresign({ files });