Unify attachment display and enable file uploads on all platforms (#1501)
Attachment pills were drawn by four separate style sets, so files, images, GitHub items, and reviews rendered at different heights in the same tray. Move the frame, the two-line label, and the image thumbnail into shared components so every attachment lines up at one height, across both the composer and sent messages. Sent-message images now open the lightbox, and file uploads work on iOS and Android via expo-document-picker instead of being gated to desktop.
This commit is contained in:
Mohamed Boudra
Generated
+10
@@ -20410,6 +20410,15 @@
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-document-picker": {
|
||||
"version": "14.0.8",
|
||||
"resolved": "https://registry.npmjs.org/expo-document-picker/-/expo-document-picker-14.0.8.tgz",
|
||||
"integrity": "sha512-3tyQKpPqWWFlI8p9RiMX1+T1Zge5mEKeBuXWp1h8PEItFMUDSiOJbQ112sfdC6Hxt8wSxreV9bCRl/NgBdt+fA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-eas-client": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/expo-eas-client/-/expo-eas-client-1.0.8.tgz",
|
||||
@@ -37111,6 +37120,7 @@
|
||||
"expo-constants": "~18.0.9",
|
||||
"expo-crypto": "^15.0.8",
|
||||
"expo-dev-client": "^6.0.15",
|
||||
"expo-document-picker": "~14.0.8",
|
||||
"expo-file-system": "~19.0.17",
|
||||
"expo-haptics": "~15.0.7",
|
||||
"expo-image": "~3.0.10",
|
||||
|
||||
@@ -66,6 +66,7 @@
|
||||
"expo-constants": "~18.0.9",
|
||||
"expo-crypto": "^15.0.8",
|
||||
"expo-dev-client": "^6.0.15",
|
||||
"expo-document-picker": "~14.0.8",
|
||||
"expo-file-system": "~19.0.17",
|
||||
"expo-haptics": "~15.0.7",
|
||||
"expo-image": "~3.0.10",
|
||||
|
||||
@@ -69,6 +69,11 @@ export function getFileExtension(path: string): string {
|
||||
return normalizedPath.slice(extensionIndex).toLowerCase();
|
||||
}
|
||||
|
||||
export function getFileTypeLabel(path: string): string | null {
|
||||
const extension = getFileExtension(path).slice(1);
|
||||
return extension ? extension.toUpperCase() : null;
|
||||
}
|
||||
|
||||
export function getMimeTypeFromPath(path: string): string {
|
||||
return MIME_TYPE_BY_EXTENSION[getFileExtension(path)] ?? "application/octet-stream";
|
||||
}
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
import { type ReactNode, useCallback, useMemo, useState } from "react";
|
||||
import { Pressable, View } from "react-native";
|
||||
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
||||
import { Image, Pressable, Text, View } from "react-native";
|
||||
import { StyleSheet, withUnistyles } from "react-native-unistyles";
|
||||
import { X } from "lucide-react-native";
|
||||
import { isNative } from "@/constants/platform";
|
||||
import { useIsCompactFormFactor } from "@/constants/layout";
|
||||
import type { AttachmentMetadata } from "@/attachments/types";
|
||||
import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
|
||||
import type { Theme } from "@/styles/theme";
|
||||
|
||||
// Every attachment pill body — image thumbnail or labelled — renders at this
|
||||
// height so mixed attachment trays line up.
|
||||
const ATTACHMENT_CONTENT_HEIGHT = 48;
|
||||
|
||||
interface AttachmentPillProps {
|
||||
onOpen: () => void;
|
||||
@@ -24,7 +31,6 @@ export function AttachmentPill({
|
||||
testID,
|
||||
children,
|
||||
}: AttachmentPillProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const isCompact = useIsCompactFormFactor();
|
||||
const [isBodyHovered, setIsBodyHovered] = useState(false);
|
||||
const [isCloseHovered, setIsCloseHovered] = useState(false);
|
||||
@@ -48,7 +54,7 @@ export function AttachmentPill({
|
||||
onHoverOut={handleBodyHoverOut}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={openAccessibilityLabel}
|
||||
style={styles.body}
|
||||
style={styles.frame}
|
||||
>
|
||||
{children}
|
||||
</Pressable>
|
||||
@@ -62,22 +68,127 @@ export function AttachmentPill({
|
||||
accessibilityLabel={removeAccessibilityLabel}
|
||||
style={closeButtonStyle}
|
||||
>
|
||||
<X size={12} color={theme.colors.foregroundMuted} />
|
||||
<ThemedX size={12} uniProps={iconForegroundMutedMapping} />
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
interface AttachmentFrameProps {
|
||||
onPress?: () => void;
|
||||
accessibilityLabel?: string;
|
||||
testID?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
/** Bare attachment frame for read-only surfaces (sent messages) — no remove button. */
|
||||
export function AttachmentFrame({
|
||||
onPress,
|
||||
accessibilityLabel,
|
||||
testID,
|
||||
children,
|
||||
}: AttachmentFrameProps) {
|
||||
if (!onPress) {
|
||||
return (
|
||||
<View testID={testID} style={styles.frame}>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Pressable
|
||||
testID={testID}
|
||||
onPress={onPress}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={accessibilityLabel}
|
||||
style={styles.frame}
|
||||
>
|
||||
{children}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
interface AttachmentLabelProps {
|
||||
icon?: ReactNode;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
/** Two-line labelled pill body: attachment name over its type. */
|
||||
export function AttachmentLabel({ icon, title, subtitle }: AttachmentLabelProps) {
|
||||
return (
|
||||
<View style={styles.labelBody}>
|
||||
{icon ? <View style={styles.labelIcon}>{icon}</View> : null}
|
||||
<View style={styles.labelTextColumn}>
|
||||
<Text style={styles.labelTitle} numberOfLines={1}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text style={styles.labelSubtitle} numberOfLines={1}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/** Square image preview pill body. */
|
||||
export function AttachmentThumbnail({ metadata }: { metadata: AttachmentMetadata }) {
|
||||
const uri = useAttachmentPreviewUrl(metadata);
|
||||
const source = useMemo(() => ({ uri: uri ?? "" }), [uri]);
|
||||
if (!uri) {
|
||||
return <View style={styles.thumbnailPlaceholder} />;
|
||||
}
|
||||
return <Image source={source} style={styles.thumbnail} />;
|
||||
}
|
||||
|
||||
const ThemedX = withUnistyles(X);
|
||||
const iconForegroundMutedMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
|
||||
|
||||
const styles = StyleSheet.create((theme) => ({
|
||||
wrapper: {
|
||||
position: "relative",
|
||||
},
|
||||
body: {
|
||||
frame: {
|
||||
borderRadius: theme.borderRadius.md,
|
||||
borderWidth: theme.borderWidth[1],
|
||||
borderColor: theme.colors.borderAccent,
|
||||
overflow: "hidden",
|
||||
},
|
||||
labelBody: {
|
||||
height: ATTACHMENT_CONTENT_HEIGHT,
|
||||
maxWidth: 260,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[2],
|
||||
paddingHorizontal: theme.spacing[3],
|
||||
backgroundColor: theme.colors.surface1,
|
||||
},
|
||||
labelIcon: {
|
||||
width: 18,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
labelTextColumn: {
|
||||
minWidth: 0,
|
||||
flexShrink: 1,
|
||||
},
|
||||
labelTitle: {
|
||||
color: theme.colors.foreground,
|
||||
fontSize: theme.fontSize.sm,
|
||||
},
|
||||
labelSubtitle: {
|
||||
color: theme.colors.foregroundMuted,
|
||||
fontSize: theme.fontSize.xs,
|
||||
},
|
||||
thumbnail: {
|
||||
width: ATTACHMENT_CONTENT_HEIGHT,
|
||||
height: ATTACHMENT_CONTENT_HEIGHT,
|
||||
},
|
||||
thumbnailPlaceholder: {
|
||||
width: ATTACHMENT_CONTENT_HEIGHT,
|
||||
height: ATTACHMENT_CONTENT_HEIGHT,
|
||||
backgroundColor: theme.colors.surface1,
|
||||
},
|
||||
closeButton: {
|
||||
position: "absolute",
|
||||
top: -8,
|
||||
|
||||
@@ -32,6 +32,7 @@ import { useQuery } from "@tanstack/react-query";
|
||||
import MaskedView from "@react-native-masked-view/masked-view";
|
||||
import {
|
||||
Circle,
|
||||
CircleDot,
|
||||
Info,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
@@ -41,13 +42,15 @@ import {
|
||||
Check,
|
||||
CheckSquare,
|
||||
Copy,
|
||||
GitPullRequest,
|
||||
MessageSquareCode,
|
||||
TriangleAlertIcon,
|
||||
Scissors,
|
||||
MicVocal,
|
||||
FileSymlink,
|
||||
} from "lucide-react-native";
|
||||
import { StyleSheet, withUnistyles } from "react-native-unistyles";
|
||||
import type { Theme } from "@/styles/theme";
|
||||
import { ICON_SIZE, type Theme } from "@/styles/theme";
|
||||
import { useIsCompactFormFactor } from "@/constants/layout";
|
||||
import Animated, {
|
||||
Easing,
|
||||
@@ -101,6 +104,13 @@ import {
|
||||
import { getCompactionMarkerLabel } from "./message-compaction-label";
|
||||
import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
|
||||
import { persistAttachmentFromBytes, persistAttachmentFromDataUrl } from "@/attachments/service";
|
||||
import { getFileTypeLabel } from "@/attachments/file-types";
|
||||
import {
|
||||
AttachmentFrame,
|
||||
AttachmentLabel,
|
||||
AttachmentThumbnail,
|
||||
} from "@/components/attachment-pill";
|
||||
import { AttachmentLightbox } from "@/components/attachment-lightbox";
|
||||
import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
|
||||
import { isWeb, isNative } from "@/constants/platform";
|
||||
import type { AgentCapabilityFlags } from "@getpaseo/protocol/agent-types";
|
||||
@@ -160,6 +170,10 @@ const ThemedTodoCheckIcon = withUnistyles(Check);
|
||||
const ThemedFileSymlinkIcon = withUnistyles(FileSymlink);
|
||||
const ThemedTriangleAlertIcon = withUnistyles(TriangleAlertIcon);
|
||||
const ThemedChevronRightIcon = withUnistyles(ChevronRight);
|
||||
const ThemedAttachmentFileText = withUnistyles(FileText);
|
||||
const ThemedGitPullRequest = withUnistyles(GitPullRequest);
|
||||
const ThemedCircleDot = withUnistyles(CircleDot);
|
||||
const ThemedMessageSquareCode = withUnistyles(MessageSquareCode);
|
||||
|
||||
const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
|
||||
const foregroundMutedColorMapping = (theme: Theme) => ({
|
||||
@@ -363,34 +377,6 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
|
||||
imagePreviewSpacing: {
|
||||
marginBottom: theme.spacing[2],
|
||||
},
|
||||
imagePill: {
|
||||
borderRadius: theme.borderRadius.md,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.borderAccent,
|
||||
overflow: "hidden",
|
||||
},
|
||||
imageThumbnail: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
},
|
||||
imageThumbnailPlaceholder: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
backgroundColor: theme.colors.surface1,
|
||||
},
|
||||
structuredAttachmentPill: {
|
||||
maxWidth: 220,
|
||||
borderRadius: theme.borderRadius.md,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.borderAccent,
|
||||
backgroundColor: theme.colors.surface1,
|
||||
paddingHorizontal: theme.spacing[3],
|
||||
paddingVertical: theme.spacing[2],
|
||||
},
|
||||
structuredAttachmentText: {
|
||||
color: theme.colors.foreground,
|
||||
fontSize: theme.fontSize.sm,
|
||||
},
|
||||
copyButton: {
|
||||
alignSelf: "center",
|
||||
padding: theme.spacing[1],
|
||||
@@ -417,36 +403,82 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
function UserMessageAttachmentThumbnail({ image }: { image: UserMessageImageAttachment }) {
|
||||
const uri = useAttachmentPreviewUrl(image);
|
||||
const imageSource = useMemo(() => ({ uri: uri ?? "" }), [uri]);
|
||||
if (!uri) {
|
||||
return <View style={userMessageStylesheet.imageThumbnailPlaceholder} />;
|
||||
}
|
||||
return <Image source={imageSource} style={userMessageStylesheet.imageThumbnail} />;
|
||||
const attachmentReviewIcon = (
|
||||
<ThemedMessageSquareCode size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
|
||||
);
|
||||
const attachmentGithubPrIcon = (
|
||||
<ThemedGitPullRequest size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
|
||||
);
|
||||
const attachmentGithubIssueIcon = (
|
||||
<ThemedCircleDot size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
|
||||
);
|
||||
const attachmentFileIcon = (
|
||||
<ThemedAttachmentFileText size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
|
||||
);
|
||||
|
||||
interface UserMessageImagePillProps {
|
||||
image: UserMessageImageAttachment;
|
||||
onOpen: (image: UserMessageImageAttachment) => void;
|
||||
accessibilityLabel: string;
|
||||
}
|
||||
|
||||
function getUserMessageAttachmentLabel(
|
||||
function UserMessageImagePill({ image, onOpen, accessibilityLabel }: UserMessageImagePillProps) {
|
||||
const handlePress = useCallback(() => {
|
||||
onOpen(image);
|
||||
}, [onOpen, image]);
|
||||
return (
|
||||
<AttachmentFrame onPress={handlePress} accessibilityLabel={accessibilityLabel}>
|
||||
<AttachmentThumbnail metadata={image} />
|
||||
</AttachmentFrame>
|
||||
);
|
||||
}
|
||||
|
||||
interface UserMessageAttachmentContent {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
function getUserMessageAttachmentContent(
|
||||
attachment: AgentAttachment,
|
||||
t: ReturnType<typeof useTranslation>["t"],
|
||||
): string {
|
||||
): UserMessageAttachmentContent {
|
||||
switch (attachment.type) {
|
||||
case "review": {
|
||||
const count = attachment.comments.length;
|
||||
return count === 1
|
||||
? t("message.attachments.reviewOne")
|
||||
: t("message.attachments.reviewMany", { count });
|
||||
return {
|
||||
icon: attachmentReviewIcon,
|
||||
title: t("message.attachments.review"),
|
||||
subtitle:
|
||||
count === 1
|
||||
? t("message.attachments.commentsOne")
|
||||
: t("message.attachments.commentsMany", { count }),
|
||||
};
|
||||
}
|
||||
case "github_pr":
|
||||
return `PR #${attachment.number}`;
|
||||
return {
|
||||
icon: attachmentGithubPrIcon,
|
||||
title: attachment.title,
|
||||
subtitle: `PR #${attachment.number}`,
|
||||
};
|
||||
case "github_issue":
|
||||
return `Issue #${attachment.number}`;
|
||||
return {
|
||||
icon: attachmentGithubIssueIcon,
|
||||
title: attachment.title,
|
||||
subtitle: `Issue #${attachment.number}`,
|
||||
};
|
||||
case "text":
|
||||
return attachment.title ?? t("message.attachments.textAttachment");
|
||||
return {
|
||||
icon: attachmentFileIcon,
|
||||
title: attachment.title ?? t("message.attachments.textAttachment"),
|
||||
subtitle: t("message.attachments.text"),
|
||||
};
|
||||
case "uploaded_file":
|
||||
return attachment.fileName;
|
||||
default:
|
||||
return "";
|
||||
return {
|
||||
icon: attachmentFileIcon,
|
||||
title: attachment.fileName,
|
||||
subtitle: getFileTypeLabel(attachment.fileName) ?? t("message.attachments.file"),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -467,6 +499,8 @@ export const UserMessage = memo(function UserMessage({
|
||||
const isCompact = useIsCompactFormFactor();
|
||||
const { t } = useTranslation();
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [lightboxMetadata, setLightboxMetadata] = useState<UserMessageImageAttachment | null>(null);
|
||||
const handleLightboxClose = useCallback(() => setLightboxMetadata(null), []);
|
||||
const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);
|
||||
const hasText = message.trim().length > 0;
|
||||
const hasImages = images.length > 0;
|
||||
@@ -534,24 +568,31 @@ export const UserMessage = memo(function UserMessage({
|
||||
{hasImages ? (
|
||||
<View style={imagePreviewContainerStyle}>
|
||||
{images.map((image) => (
|
||||
<View key={image.id} style={userMessageStylesheet.imagePill}>
|
||||
<UserMessageAttachmentThumbnail image={image} />
|
||||
</View>
|
||||
<UserMessageImagePill
|
||||
key={image.id}
|
||||
image={image}
|
||||
onOpen={setLightboxMetadata}
|
||||
accessibilityLabel={t("composer.attachments.openImage")}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
) : null}
|
||||
{hasAttachments ? (
|
||||
<View style={attachmentPreviewContainerStyle}>
|
||||
{attachments.map((attachment, index) => (
|
||||
<View
|
||||
key={`${attachment.type}:${"number" in attachment ? attachment.number : index}`}
|
||||
style={userMessageStylesheet.structuredAttachmentPill}
|
||||
>
|
||||
<Text style={userMessageStylesheet.structuredAttachmentText} numberOfLines={1}>
|
||||
{getUserMessageAttachmentLabel(attachment, t)}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
{attachments.map((attachment, index) => {
|
||||
const content = getUserMessageAttachmentContent(attachment, t);
|
||||
return (
|
||||
<AttachmentFrame
|
||||
key={`${attachment.type}:${"number" in attachment ? attachment.number : index}`}
|
||||
>
|
||||
<AttachmentLabel
|
||||
icon={content.icon}
|
||||
title={content.title}
|
||||
subtitle={content.subtitle}
|
||||
/>
|
||||
</AttachmentFrame>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
) : null}
|
||||
{hasText ? (
|
||||
@@ -579,6 +620,7 @@ export const UserMessage = memo(function UserMessage({
|
||||
</View>
|
||||
) : null}
|
||||
</View>
|
||||
<AttachmentLightbox metadata={lightboxMetadata} onClose={handleLightboxClose} />
|
||||
</View>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import { useCallback, useEffect, useMemo, useState, type ReactElement } from "react";
|
||||
import { Text, View } from "react-native";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { StyleSheet, withUnistyles } from "react-native-unistyles";
|
||||
import { withUnistyles } from "react-native-unistyles";
|
||||
import { FileText, MessageSquareCode, MousePointer2 } from "lucide-react-native";
|
||||
import type {
|
||||
ComposerAttachment,
|
||||
UserComposerAttachment,
|
||||
WorkspaceComposerAttachment,
|
||||
} from "@/attachments/types";
|
||||
import { AttachmentPill } from "@/components/attachment-pill";
|
||||
import { AttachmentLabel, AttachmentPill } from "@/components/attachment-pill";
|
||||
import { useWorkspaceAttachmentsStore } from "@/attachments/workspace-attachments-store";
|
||||
import {
|
||||
isWorkspaceAttachment,
|
||||
@@ -112,16 +111,31 @@ function getContextSourceLabel(attachment: WorkspaceComposerAttachment): string
|
||||
return "Review";
|
||||
}
|
||||
|
||||
function getPillLabel(attachment: WorkspaceComposerAttachment, t: TranslationFn): string {
|
||||
interface PillContent {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
function getPillContent(attachment: WorkspaceComposerAttachment, t: TranslationFn): PillContent {
|
||||
if (attachment.kind === "browser_element") {
|
||||
return t("composer.attachments.browserElement", { tag: attachment.attachment.tag });
|
||||
return {
|
||||
title: attachment.attachment.tag,
|
||||
subtitle: t("composer.attachments.element"),
|
||||
};
|
||||
}
|
||||
if (isPullRequestContextAttachment(attachment)) {
|
||||
return `${getContextSourceLabel(attachment)} · ${attachment.title}`;
|
||||
return {
|
||||
title: attachment.title,
|
||||
subtitle: getContextSourceLabel(attachment),
|
||||
};
|
||||
}
|
||||
return attachment.commentCount === 1
|
||||
? t("message.attachments.reviewOne")
|
||||
: t("message.attachments.reviewMany", { count: attachment.commentCount });
|
||||
return {
|
||||
title: t("message.attachments.review"),
|
||||
subtitle:
|
||||
attachment.commentCount === 1
|
||||
? t("message.attachments.commentsOne")
|
||||
: t("message.attachments.commentsMany", { count: attachment.commentCount }),
|
||||
};
|
||||
}
|
||||
|
||||
function getOpenAccessibilityLabel(
|
||||
@@ -309,7 +323,7 @@ function WorkspaceAttachmentPill({
|
||||
onRemove,
|
||||
}: WorkspaceAttachmentPillProps) {
|
||||
const { t } = useTranslation();
|
||||
const label = getPillLabel(attachment, t);
|
||||
const content = getPillContent(attachment, t);
|
||||
const handleOpen = useCallback(() => {
|
||||
onOpen(attachment);
|
||||
}, [onOpen, attachment]);
|
||||
@@ -325,12 +339,11 @@ function WorkspaceAttachmentPill({
|
||||
removeAccessibilityLabel={getRemoveAccessibilityLabel(attachment, t)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<View style={styles.pillBody}>
|
||||
<View style={styles.pillIcon}>{renderPillIcon(attachment)}</View>
|
||||
<Text style={styles.pillText} numberOfLines={1}>
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
<AttachmentLabel
|
||||
icon={renderPillIcon(attachment)}
|
||||
title={content.title}
|
||||
subtitle={content.subtitle}
|
||||
/>
|
||||
</AttachmentPill>
|
||||
);
|
||||
}
|
||||
@@ -343,30 +356,6 @@ export const composerWorkspaceAttachment = {
|
||||
useBinding: useWorkspaceAttachmentBinding,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create((theme: Theme) => ({
|
||||
pillBody: {
|
||||
minHeight: 48,
|
||||
maxWidth: 260,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[2],
|
||||
paddingHorizontal: theme.spacing[3],
|
||||
paddingVertical: theme.spacing[2],
|
||||
backgroundColor: theme.colors.surface1,
|
||||
},
|
||||
pillIcon: {
|
||||
width: 18,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
pillText: {
|
||||
minWidth: 0,
|
||||
flexShrink: 1,
|
||||
color: theme.colors.foreground,
|
||||
fontSize: theme.fontSize.sm,
|
||||
},
|
||||
})) as unknown as Record<string, object>;
|
||||
|
||||
const ThemedMousePointer2 = withUnistyles(MousePointer2);
|
||||
const ThemedMessageSquareCode = withUnistyles(MessageSquareCode);
|
||||
const ThemedFileText = withUnistyles(FileText);
|
||||
|
||||
@@ -3,7 +3,6 @@ import {
|
||||
Pressable,
|
||||
Text,
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
type PressableStateCallbackType,
|
||||
} from "react-native";
|
||||
import type { TFunction } from "i18next";
|
||||
@@ -100,9 +99,9 @@ import type {
|
||||
WorkspaceComposerAttachment,
|
||||
} from "@/attachments/types";
|
||||
import { composerWorkspaceAttachment } from "@/composer/attachments/workspace";
|
||||
import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
|
||||
import { getFileTypeLabel } from "@/attachments/file-types";
|
||||
import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
|
||||
import { AttachmentPill } from "@/components/attachment-pill";
|
||||
import { AttachmentLabel, AttachmentPill, AttachmentThumbnail } from "@/components/attachment-pill";
|
||||
import { AttachmentLightbox } from "@/components/attachment-lightbox";
|
||||
import { openExternalUrl } from "@/utils/open-external-url";
|
||||
import { useIsDictationReady } from "@/hooks/use-is-dictation-ready";
|
||||
@@ -560,15 +559,6 @@ function QueuedMessageRow({
|
||||
);
|
||||
}
|
||||
|
||||
function ImageAttachmentThumbnail({ image }: { image: ImageAttachment }) {
|
||||
const uri = useAttachmentPreviewUrl(image);
|
||||
const source = useMemo(() => ({ uri: uri ?? "" }), [uri]);
|
||||
if (!uri) {
|
||||
return <View style={styles.imageThumbnailPlaceholder} />;
|
||||
}
|
||||
return <Image source={source} style={styles.imageThumbnail} />;
|
||||
}
|
||||
|
||||
interface ImageAttachmentPillProps {
|
||||
attachment: Extract<ComposerAttachment, { kind: "image" }>;
|
||||
index: number;
|
||||
@@ -603,7 +593,7 @@ function ImageAttachmentPill({
|
||||
removeAccessibilityLabel={removeLabel}
|
||||
disabled={disabled}
|
||||
>
|
||||
<ImageAttachmentThumbnail image={attachment.metadata} />
|
||||
<AttachmentThumbnail metadata={attachment.metadata} />
|
||||
</AttachmentPill>
|
||||
);
|
||||
}
|
||||
@@ -644,18 +634,11 @@ function GithubAttachmentPill({
|
||||
removeAccessibilityLabel={removeLabel(kindLabel, item.number)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<View style={styles.githubPillBody}>
|
||||
<View style={styles.githubPillIcon}>
|
||||
{item.kind === "pr" ? (
|
||||
<ThemedGitPullRequest size={ICON_SIZE.sm} uniProps={iconForegroundMutedMapping} />
|
||||
) : (
|
||||
<ThemedCircleDot size={ICON_SIZE.sm} uniProps={iconForegroundMutedMapping} />
|
||||
)}
|
||||
</View>
|
||||
<Text style={styles.githubPillText} numberOfLines={1}>
|
||||
#{item.number} {item.title}
|
||||
</Text>
|
||||
</View>
|
||||
<AttachmentLabel
|
||||
icon={item.kind === "pr" ? githubPrPillIcon : githubIssuePillIcon}
|
||||
title={item.title}
|
||||
subtitle={`${item.kind === "pr" ? "PR" : "Issue"} #${item.number}`}
|
||||
/>
|
||||
</AttachmentPill>
|
||||
);
|
||||
}
|
||||
@@ -675,26 +658,25 @@ function FileAttachmentPill({
|
||||
onRemove,
|
||||
removeLabel,
|
||||
}: FileAttachmentPillProps) {
|
||||
const { t } = useTranslation();
|
||||
const handleRemove = useCallback(() => {
|
||||
onRemove(index);
|
||||
}, [onRemove, index]);
|
||||
const fileName = attachment.attachment.fileName;
|
||||
return (
|
||||
<AttachmentPill
|
||||
testID="composer-file-attachment-pill"
|
||||
onOpen={noopCallback}
|
||||
onRemove={handleRemove}
|
||||
openAccessibilityLabel={attachment.attachment.fileName}
|
||||
openAccessibilityLabel={fileName}
|
||||
removeAccessibilityLabel={removeLabel}
|
||||
disabled={disabled}
|
||||
>
|
||||
<View style={styles.filePillBody}>
|
||||
<View style={styles.filePillIcon}>
|
||||
<ThemedFileText size={ICON_SIZE.sm} uniProps={iconForegroundMutedMapping} />
|
||||
</View>
|
||||
<Text style={styles.filePillText} numberOfLines={1}>
|
||||
{attachment.attachment.fileName}
|
||||
</Text>
|
||||
</View>
|
||||
<AttachmentLabel
|
||||
icon={filePillIcon}
|
||||
title={fileName}
|
||||
subtitle={getFileTypeLabel(fileName) ?? t("message.attachments.file")}
|
||||
/>
|
||||
</AttachmentPill>
|
||||
);
|
||||
}
|
||||
@@ -1705,18 +1687,14 @@ export function Composer({
|
||||
setIsGithubPickerOpen(true);
|
||||
},
|
||||
},
|
||||
...(!isNative
|
||||
? [
|
||||
{
|
||||
id: "file",
|
||||
label: t("composer.attachments.addFile"),
|
||||
icon: <ThemedPaperclip size={ICON_SIZE.md} uniProps={iconForegroundMutedMapping} />,
|
||||
onSelect: () => {
|
||||
void handlePickFile();
|
||||
},
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
id: "file",
|
||||
label: t("composer.attachments.addFile"),
|
||||
icon: <ThemedPaperclip size={ICON_SIZE.md} uniProps={iconForegroundMutedMapping} />,
|
||||
onSelect: () => {
|
||||
void handlePickFile();
|
||||
},
|
||||
},
|
||||
],
|
||||
[handlePickImage, handlePickFile, t],
|
||||
);
|
||||
@@ -2059,50 +2037,6 @@ const styles = StyleSheet.create((theme: Theme) => ({
|
||||
gap: theme.spacing[2],
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
imageThumbnail: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
imageThumbnailPlaceholder: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
backgroundColor: theme.colors.surface2,
|
||||
},
|
||||
githubPillBody: {
|
||||
minHeight: 32,
|
||||
maxWidth: 260,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[2],
|
||||
paddingHorizontal: theme.spacing[3],
|
||||
paddingVertical: theme.spacing[2],
|
||||
backgroundColor: theme.colors.surface1,
|
||||
},
|
||||
githubPillIcon: {
|
||||
width: 18,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
filePillBody: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[2],
|
||||
},
|
||||
filePillIcon: {
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
filePillText: {
|
||||
color: theme.colors.foreground,
|
||||
fontSize: theme.fontSize.sm,
|
||||
flexShrink: 1,
|
||||
},
|
||||
githubPillText: {
|
||||
minWidth: 0,
|
||||
flexShrink: 1,
|
||||
color: theme.colors.foreground,
|
||||
fontSize: theme.fontSize.sm,
|
||||
},
|
||||
tooltipRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
@@ -2173,3 +2107,11 @@ const ThemedGithub = withUnistyles(Github);
|
||||
const iconForegroundMapping = (theme: Theme) => ({ color: theme.colors.foreground });
|
||||
const iconForegroundMutedMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
|
||||
const iconAccentForegroundMapping = (theme: Theme) => ({ color: theme.colors.accentForeground });
|
||||
|
||||
const githubPrPillIcon = (
|
||||
<ThemedGitPullRequest size={ICON_SIZE.sm} uniProps={iconForegroundMutedMapping} />
|
||||
);
|
||||
const githubIssuePillIcon = (
|
||||
<ThemedCircleDot size={ICON_SIZE.sm} uniProps={iconForegroundMutedMapping} />
|
||||
);
|
||||
const filePillIcon = <ThemedFileText size={ICON_SIZE.sm} uniProps={iconForegroundMutedMapping} />;
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { useCallback, useRef } from "react";
|
||||
import * as DocumentPicker from "expo-document-picker";
|
||||
import { File } from "expo-file-system";
|
||||
import { getDesktopHost, isElectronRuntime } from "@/desktop/host";
|
||||
import { copyDesktopAttachmentFile } from "@/desktop/attachments/desktop-file-commands";
|
||||
import { readDesktopFileBase64 } from "@/desktop/attachments/desktop-preview-url";
|
||||
@@ -113,6 +115,25 @@ function pickFilesWithWebInput(): Promise<PickedFile[] | null> {
|
||||
});
|
||||
}
|
||||
|
||||
async function pickFilesWithDocumentPicker(): Promise<PickedFile[] | null> {
|
||||
const result = await DocumentPicker.getDocumentAsync({
|
||||
multiple: true,
|
||||
copyToCacheDirectory: true,
|
||||
});
|
||||
|
||||
if (result.canceled || result.assets.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return await Promise.all(
|
||||
result.assets.map(async (asset) => ({
|
||||
fileName: asset.name,
|
||||
mimeType: asset.mimeType ?? getMimeTypeFromPath(asset.name),
|
||||
bytes: await new File(asset.uri).bytes(),
|
||||
})),
|
||||
);
|
||||
}
|
||||
|
||||
export function useFilePicker() {
|
||||
const isPickingRef = useRef(false);
|
||||
|
||||
@@ -131,8 +152,7 @@ export function useFilePicker() {
|
||||
return await pickFilesWithWebInput();
|
||||
}
|
||||
|
||||
// Native not supported yet
|
||||
return null;
|
||||
return await pickFilesWithDocumentPicker();
|
||||
} catch (error) {
|
||||
console.error("[FilePicker] Failed to pick files:", error);
|
||||
throw error;
|
||||
|
||||
@@ -575,10 +575,11 @@ describe("translation resources", () => {
|
||||
});
|
||||
|
||||
it("includes remaining utility chrome keys for the Batch 4T migration", () => {
|
||||
expect(en.message.attachments.reviewOne).toBe("Review · 1 comment");
|
||||
expect(en.message.attachments.reviewMany).toBe("Review · {{count}} comments");
|
||||
expect(en.message.attachments.review).toBe("Review");
|
||||
expect(en.message.attachments.commentsOne).toBe("1 comment");
|
||||
expect(en.message.attachments.commentsMany).toBe("{{count}} comments");
|
||||
expect(en.message.attachments.textAttachment).toBe("Text attachment");
|
||||
expect(en.composer.attachments.browserElement).toBe("Element · {{tag}}");
|
||||
expect(en.composer.attachments.element).toBe("Element");
|
||||
expect(en.workspace.hoverCard.scriptsAccessibility).toBe("Workspace scripts");
|
||||
expect(en.branchSwitcher.restoreStashTitle).toBe("Restore stashed changes?");
|
||||
expect(en.branchSwitcher.stashRestored).toBe("Stashed changes restored");
|
||||
|
||||
@@ -110,7 +110,7 @@ export const ar: TranslationResources = {
|
||||
removeFile: "Remove file attachment",
|
||||
openGithub: "افتح{{kind}}#{{number}}",
|
||||
removeGithub: "إزالة{{kind}}#{{number}}",
|
||||
browserElement: "العنصر ·{{tag}}",
|
||||
element: "عنصر",
|
||||
openBrowserElement: "افتح مرفق عنصر المتصفح",
|
||||
removeBrowserElement: "إزالة مرفق عنصر المتصفح",
|
||||
openReview: "فتح مرفق المراجعة",
|
||||
@@ -255,9 +255,12 @@ export const ar: TranslationResources = {
|
||||
imageUnavailable: "الصورة غير متاحة",
|
||||
imagePreviewUnavailable: "معاينة الصورة غير متاحة.",
|
||||
imagePreviewLoadFailed: "غير قادر على تحميل معاينة الصورة.",
|
||||
reviewOne: "مراجعة · تعليق واحد",
|
||||
reviewMany: "مراجعة · تعليقات{{count}}",
|
||||
review: "مراجعة",
|
||||
commentsOne: "تعليق واحد",
|
||||
commentsMany: "{{count}} تعليقات",
|
||||
textAttachment: "مرفق النص",
|
||||
text: "نص",
|
||||
file: "ملف",
|
||||
},
|
||||
speak: {
|
||||
header: "تكلم",
|
||||
|
||||
@@ -108,7 +108,7 @@ export const en = {
|
||||
removeFile: "Remove file attachment",
|
||||
openGithub: "Open {{kind}} #{{number}}",
|
||||
removeGithub: "Remove {{kind}} #{{number}}",
|
||||
browserElement: "Element · {{tag}}",
|
||||
element: "Element",
|
||||
openBrowserElement: "Open browser element attachment",
|
||||
removeBrowserElement: "Remove browser element attachment",
|
||||
openReview: "Open review attachment",
|
||||
@@ -254,9 +254,12 @@ export const en = {
|
||||
imageUnavailable: "Image unavailable",
|
||||
imagePreviewUnavailable: "Image preview unavailable.",
|
||||
imagePreviewLoadFailed: "Unable to load image preview.",
|
||||
reviewOne: "Review · 1 comment",
|
||||
reviewMany: "Review · {{count}} comments",
|
||||
review: "Review",
|
||||
commentsOne: "1 comment",
|
||||
commentsMany: "{{count}} comments",
|
||||
textAttachment: "Text attachment",
|
||||
text: "Text",
|
||||
file: "File",
|
||||
},
|
||||
speak: {
|
||||
header: "Spoke",
|
||||
|
||||
@@ -110,7 +110,7 @@ export const es: TranslationResources = {
|
||||
removeFile: "Remove file attachment",
|
||||
openGithub: "Abrir{{kind}}#{{number}}",
|
||||
removeGithub: "Quitar{{kind}}#{{number}}",
|
||||
browserElement: "Elemento ·{{tag}}",
|
||||
element: "Elemento",
|
||||
openBrowserElement: "Abrir archivo adjunto de elemento del navegador",
|
||||
removeBrowserElement: "Eliminar el archivo adjunto del elemento del navegador",
|
||||
openReview: "Abrir archivo adjunto de reseña",
|
||||
@@ -258,9 +258,12 @@ export const es: TranslationResources = {
|
||||
imageUnavailable: "Imagen no disponible",
|
||||
imagePreviewUnavailable: "Vista previa de la imagen no disponible.",
|
||||
imagePreviewLoadFailed: "No se puede cargar la vista previa de la imagen.",
|
||||
reviewOne: "Reseña · 1 comentario",
|
||||
reviewMany: "Revisión · Comentarios{{count}}",
|
||||
review: "Revisión",
|
||||
commentsOne: "1 comentario",
|
||||
commentsMany: "{{count}} comentarios",
|
||||
textAttachment: "Adjunto de texto",
|
||||
text: "Texto",
|
||||
file: "Archivo",
|
||||
},
|
||||
speak: {
|
||||
header: "Habló",
|
||||
|
||||
@@ -111,7 +111,7 @@ export const fr: TranslationResources = {
|
||||
removeFile: "Remove file attachment",
|
||||
openGithub: "Ouvrir{{kind}}#{{number}}",
|
||||
removeGithub: "Supprimer{{kind}}#{{number}}",
|
||||
browserElement: "Élément ·{{tag}}",
|
||||
element: "Élément",
|
||||
openBrowserElement: "Ouvrir la pièce jointe de l'élément de navigateur",
|
||||
removeBrowserElement: "Supprimer la pièce jointe d'un élément de navigateur",
|
||||
openReview: "Ouvrir la pièce jointe de l'avis",
|
||||
@@ -258,9 +258,12 @@ export const fr: TranslationResources = {
|
||||
imageUnavailable: "Image indisponible",
|
||||
imagePreviewUnavailable: "Aperçu de l'image indisponible.",
|
||||
imagePreviewLoadFailed: "Impossible de charger l'aperçu de l'image.",
|
||||
reviewOne: "Avis · 1 commentaire",
|
||||
reviewMany: "Révision · Commentaires{{count}}",
|
||||
review: "Revue",
|
||||
commentsOne: "1 commentaire",
|
||||
commentsMany: "{{count}} commentaires",
|
||||
textAttachment: "Texte en pièce jointe",
|
||||
text: "Texte",
|
||||
file: "Fichier",
|
||||
},
|
||||
speak: {
|
||||
header: "Rayon",
|
||||
|
||||
@@ -110,7 +110,7 @@ export const ru: TranslationResources = {
|
||||
removeFile: "Remove file attachment",
|
||||
openGithub: "Открыть{{kind}}#{{number}}",
|
||||
removeGithub: "Удалить{{kind}}#{{number}}",
|
||||
browserElement: "Элемент ·{{tag}}",
|
||||
element: "Элемент",
|
||||
openBrowserElement: "Открыть вложение элемента браузера",
|
||||
removeBrowserElement: "Удалить вложение элемента браузера",
|
||||
openReview: "Открыть прикрепленный файл с отзывом",
|
||||
@@ -257,9 +257,12 @@ export const ru: TranslationResources = {
|
||||
imageUnavailable: "Изображение недоступно",
|
||||
imagePreviewUnavailable: "Предварительный просмотр изображения недоступен.",
|
||||
imagePreviewLoadFailed: "Невозможно загрузить предварительный просмотр изображения.",
|
||||
reviewOne: "Отзыв · 1 комментарий",
|
||||
reviewMany: "Обзор · Комментарии{{count}}",
|
||||
review: "Ревью",
|
||||
commentsOne: "1 комментарий",
|
||||
commentsMany: "Комментарии: {{count}}",
|
||||
textAttachment: "Текстовое вложение",
|
||||
text: "Текст",
|
||||
file: "Файл",
|
||||
},
|
||||
speak: {
|
||||
header: "Говорил",
|
||||
|
||||
@@ -110,7 +110,7 @@ export const zhCN: TranslationResources = {
|
||||
removeFile: "Remove file attachment",
|
||||
openGithub: "打开 {{kind}} #{{number}}",
|
||||
removeGithub: "移除 {{kind}} #{{number}}",
|
||||
browserElement: "元素 · {{tag}}",
|
||||
element: "元素",
|
||||
openBrowserElement: "打开浏览器元素附件",
|
||||
removeBrowserElement: "移除浏览器元素附件",
|
||||
openReview: "打开 review 附件",
|
||||
@@ -255,9 +255,12 @@ export const zhCN: TranslationResources = {
|
||||
imageUnavailable: "图片不可用",
|
||||
imagePreviewUnavailable: "图片预览不可用。",
|
||||
imagePreviewLoadFailed: "无法加载图片预览。",
|
||||
reviewOne: "Review · 1 条评论",
|
||||
reviewMany: "Review · {{count}} 条评论",
|
||||
review: "审查",
|
||||
commentsOne: "1 条评论",
|
||||
commentsMany: "{{count}} 条评论",
|
||||
textAttachment: "文本附件",
|
||||
text: "文本",
|
||||
file: "文件",
|
||||
},
|
||||
speak: {
|
||||
header: "已朗读",
|
||||
|
||||
Reference in New Issue
Block a user