react-native-ajora/lib/MessageImage.js

The most complete AI agent UI for React Native

import React from "react";
import { Image, StyleSheet, View, } from "react-native";
// TODO: support web
import Lightbox from "react-native-lightbox-v2";
import stylesCommon from "./styles";
import Color from "./Color";
const styles = StyleSheet.create({
    container: {
        backgroundColor: Color.card,
        borderRadius: 12,
        borderWidth: 0,
        borderColor: Color.border,
        shadowColor: Color.shadow,
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.08,
        shadowRadius: 4,
        elevation: 2,
        maxWidth: 280,
        minWidth: 200,
        overflow: "hidden",
    },
    imageContainer: {
        position: "relative",
    },
    image: {
        width: "100%",
        height: 200,
        resizeMode: "cover",
    },
    imageActive: {
        resizeMode: "contain",
    },
    fullscreenImage: {
        width: "100%",
        height: "100%",
        resizeMode: "contain",
        backgroundColor: "black",
    },
    imageOverlay: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: "rgba(0, 0, 0, 0.1)",
        justifyContent: "center",
        alignItems: "center",
    },
    expandIcon: {
        fontSize: 24,
        color: "white",
        textShadowColor: "rgba(0, 0, 0, 0.5)",
        textShadowOffset: { width: 0, height: 1 },
        textShadowRadius: 2,
    },
    imageInfo: {
        padding: 0,
        backgroundColor: Color.muted,
        borderTopWidth: 1,
        borderTopColor: Color.border,
    },
    imageTitle: {
        fontSize: 14,
        fontWeight: "500",
        color: Color.foreground,
        marginBottom: 2,
    },
    imageSubtitle: {
        fontSize: 12,
        color: Color.mutedForeground,
    },
});
export function MessageImage({ containerStyle, lightboxProps, imageProps, imageSourceProps, imageStyle, currentMessage, }) {
    if (currentMessage == null)
        return null;
    // Supported image mime types
    //   PNG - image/png
    // JPEG - image/jpeg
    // WEBP - image/webp
    // HEIC - image/heic
    // HEIF - image/heif
    const imagePart = currentMessage.parts?.find((part) => part.fileData?.mimeType === "image/jpeg" ||
        part.fileData?.mimeType === "image/png" ||
        part.fileData?.mimeType === "image/jpg" ||
        part.fileData?.mimeType === "image/webp" ||
        part.fileData?.mimeType === "image/heic" ||
        part.fileData?.mimeType === "image/heif");
    const imageUri = imagePart?.fileData?.fileUri;
    if (!imageUri)
        return null;
    return (<View style={[styles.container, containerStyle]}>
      {/* @ts-expect-error: Lightbox types are not fully compatible */}
      <Lightbox renderContent={() => (<Image {...imageProps} style={styles.fullscreenImage} source={{ ...imageSourceProps, uri: imageUri }}/>)} activeProps={{
            style: [stylesCommon.fill, styles.imageActive],
        }} {...lightboxProps}>
        <Image {...imageProps} style={[styles.image, imageStyle]} source={{ ...imageSourceProps, uri: imageUri }}/>
      </Lightbox>
    </View>);
}
//# sourceMappingURL=MessageImage.js.map