feat(ai-summary): implement selectable text sheet for AI summary copying

Innei · Innei · commit b89c0270d29a · 2025-06-11T20:06:43.000+08:00
- Added a new SelectableTextSheet component to allow users to copy AI summary text.
- Integrated the new component into the AISummary component, enabling long-press functionality for text selection.
- Updated EntryAISummary to pass the raw summary for copying.
- Enhanced styles and layout for better user experience.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/.cursor/rules/rn.mdc b/.cursor/rules/rn.mdc
@@ -0,0 +1,12 @@
+---
+description: 
+globs: apps/mobile/**/*
+alwaysApply: false
+---
+1. This is an app written in React native.
+
+2. You need to use @/apps/mobile/icons for icons, do not use other icon libraries.
+
+3. You need to use NativewindCSS to write styles, not external StyleSheet.create.
+
+4. You need to use https://github.com/Innei/apple-uikit-colors/tree/main/packages/react-native-uikit-colors for color design.
diff --git a/apps/mobile/src/modules/ai/summary.tsx b/apps/mobile/src/modules/ai/summary.tsx
@@ -1,10 +1,20 @@
 import { cn } from "@follow/utils"
 import MaskedView from "@react-native-masked-view/masked-view"
+import * as Haptics from "expo-haptics"
 import { LinearGradient } from "expo-linear-gradient"
 import type { FC, ReactNode } from "react"
 import * as React from "react"
 import type { LayoutChangeEvent } from "react-native"
-import { Pressable, StyleSheet, Text, TextInput, View } from "react-native"
+import {
+  Clipboard,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from "react-native"
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -13,20 +23,25 @@ import Animated, {
   withSpring,
   withTiming,
 } from "react-native-reanimated"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useColor } from "react-native-uikit-colors"
 
 import { AiCuteReIcon } from "@/src/icons/ai_cute_re"
+import { CloseCuteReIcon } from "@/src/icons/close_cute_re"
+import { CopyCuteReIcon } from "@/src/icons/copy_cute_re"
 import { isAndroid } from "@/src/lib/platform"
 
 export const AISummary: FC<{
   className?: string
   summary?: string | ReactNode
   pending?: boolean
+  rawSummaryForCopy?: string
   error?: string
   onRetry?: () => void
-}> = ({ className, summary, pending = false, error, onRetry }) => {
+}> = ({ className, summary, pending = false, rawSummaryForCopy, error, onRetry }) => {
   const opacity = useSharedValue(0.3)
   const height = useSharedValue(0)
+  const [isSheetOpen, setSheetOpen] = React.useState(false)
 
   React.useEffect(() => {
     if (pending) {
@@ -62,9 +77,11 @@ export const AISummary: FC<{
   // Check if summary is a React element or string
   const isReactElement = React.isValidElement(summary)
   const summaryText = typeof summary === "string" ? summary : ""
+  const summaryTextForSheet = rawSummaryForCopy || summaryText
 
   if (pending || (!summary && !error)) return null
-  return (
+
+  const mainContent = (
     <Animated.View
       className={cn(
         "border-opaque-separator/50 mx-4 my-2 rounded-xl",
@@ -75,19 +92,30 @@ export const AISummary: FC<{
       )}
       style={styles.card}
     >
-      <View className="mb-2 flex-row items-center gap-2">
-        <AiCuteReIcon height={16} width={16} color={purpleColor} />
-        <MaskedView
-          maskElement={
-            <View className="bg-transparent">
-              <Text className="text-[15px] font-semibold">AI Summary</Text>
-            </View>
-          }
-        >
-          <LinearGradient colors={["#9333ea", "#2563eb"]} start={[0, 0]} end={[1, 0]}>
-            <Text className="text-[15px] font-semibold text-transparent">AI Summary</Text>
-          </LinearGradient>
-        </MaskedView>
+      <View className="mb-2 flex-row items-center justify-between">
+        <View className="flex-row items-center gap-2">
+          <AiCuteReIcon height={16} width={16} color={purpleColor} />
+          <MaskedView
+            maskElement={
+              <View className="bg-transparent">
+                <Text className="text-[15px] font-semibold">AI Summary</Text>
+              </View>
+            }
+          >
+            <LinearGradient colors={["#9333ea", "#2563eb"]} start={[0, 0]} end={[1, 0]}>
+              <Text className="text-[15px] font-semibold text-transparent">AI Summary</Text>
+            </LinearGradient>
+          </MaskedView>
+        </View>
+        {summaryTextForSheet && (
+          <Pressable
+            onPress={() => setSheetOpen(true)}
+            className="bg-quaternary-system-fill rounded-full p-1.5 active:opacity-70"
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          >
+            <CopyCuteReIcon width={14} height={14} color={purpleColor} />
+          </Pressable>
+        )}
       </View>
       <Animated.View style={animatedContentStyle}>
         <View style={{ height: contentHeight }}>
@@ -142,11 +170,138 @@ export const AISummary: FC<{
       </View>
     </Animated.View>
   )
+
+  return (
+    <>
+      <Pressable onLongPress={summaryTextForSheet ? () => setSheetOpen(true) : undefined}>
+        {mainContent}
+      </Pressable>
+      <SelectableTextSheet
+        visible={isSheetOpen}
+        onClose={() => setSheetOpen(false)}
+        text={rawSummaryForCopy || summaryText}
+      />
+    </>
+  )
+}
+
+const SelectableTextSheet: FC<{
+  visible: boolean
+  onClose: () => void
+  text: string
+}> = ({ visible, onClose, text }) => {
+  const insets = useSafeAreaInsets()
+  const translateY = useSharedValue(500)
+  const [isRendered, setIsRendered] = React.useState(visible)
+
+  const textColor = useColor("label")
+
+  const sheetAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }))
+
+  React.useEffect(() => {
+    if (visible) {
+      setIsRendered(true)
+      translateY.value = withSpring(0, {
+        damping: 20,
+        stiffness: 150,
+        overshootClamping: true,
+      })
+    } else {
+      if (isRendered) {
+        translateY.value = withTiming(800, { duration: 250 })
+        setTimeout(() => {
+          setIsRendered(false)
+        }, 250)
+      }
+    }
+  }, [visible, isRendered, translateY])
+
+  if (!isRendered) {
+    return null
+  }
+
+  const handleClose = () => {
+    onClose()
+  }
+
+  const handleCopyAll = () => {
+    Clipboard.setString(text)
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
+    handleClose()
+  }
+
+  return (
+    <Modal transparent visible={isRendered} onRequestClose={handleClose} animationType="fade">
+      <Pressable onPress={handleClose} style={StyleSheet.absoluteFill}>
+        <View className="bg-black/40" style={StyleSheet.absoluteFill} />
+      </Pressable>
+      <Animated.View
+        className="bg-system-background absolute inset-x-0 bottom-0 max-h-[70%] overflow-hidden rounded-t-2xl border-t border-t-zinc-200 p-4 dark:border-zinc-800"
+        style={[{ paddingBottom: insets.bottom + 10 }, sheetAnimatedStyle]}
+      >
+        <View className="mb-4 flex-row items-center justify-between">
+          <Pressable
+            onPress={handleCopyAll}
+            className="rounded-full bg-zinc-100 p-2 active:opacity-80 dark:bg-zinc-800"
+          >
+            <CopyCuteReIcon width={18} height={18} color={textColor} />
+          </Pressable>
+          <Text className="text-label text-lg font-semibold">AI Summary</Text>
+          <Pressable
+            onPress={handleClose}
+            className="rounded-full bg-zinc-100 p-2 active:opacity-80 dark:bg-zinc-800"
+          >
+            <CloseCuteReIcon width={18} height={18} color={textColor} />
+          </Pressable>
+        </View>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          <TextInput
+            value={text}
+            readOnly
+            multiline
+            // @ts-ignore
+            selectable
+            className="text-label text-base leading-6"
+          />
+        </ScrollView>
+      </Animated.View>
+    </Modal>
+  )
 }
 
 const styles = StyleSheet.create({
   card: {
     borderWidth: 0.5,
     elevation: 2,
   },
+  sheetContainer: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    maxHeight: "70%",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    overflow: "hidden",
+  },
+  sheetHeader: {
+    alignItems: "center",
+    paddingBottom: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  sheetTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  textScrollView: {
+    marginVertical: 15,
+  },
+  selectableText: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
 })
diff --git a/apps/mobile/src/modules/entry-content/EntryAISummary.tsx b/apps/mobile/src/modules/entry-content/EntryAISummary.tsx
@@ -47,14 +47,14 @@ export const EntryAISummary: FC<{
     actionLanguage,
     enabled: showAISummary && !entry?.isShortContent,
   })
+  const maybeMarkdown = showReadability
+    ? summary?.readabilitySummary || summary?.summary
+    : summary?.summary
   const summaryToShow = useMemo(() => {
-    const maybeMarkdown = showReadability
-      ? summary?.readabilitySummary || summary?.summary
-      : summary?.summary
     if (!maybeMarkdown) return null
 
     return renderMarkdown(maybeMarkdown)
-  }, [showReadability, summary?.readabilitySummary, summary?.summary])
+  }, [maybeMarkdown])
 
   const status = useSummaryStore((state) => state.generatingStatus[entryId])
   if (!showAISummary) return null
@@ -69,6 +69,7 @@ export const EntryAISummary: FC<{
     >
       <AISummary
         className="my-3"
+        rawSummaryForCopy={maybeMarkdown}
         summary={summaryToShow}
         pending={status === SummaryGeneratingStatus.Pending}
         error={status === SummaryGeneratingStatus.Error ? "Failed to generate summary" : undefined}
diff --git a/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx b/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx
@@ -328,7 +328,7 @@ const AspectRatioImage = ({
 
   return (
     <View
-      className="bg-red ml-auto flex h-full justify-center overflow-hidden rounded-lg"
+      className="bg-tertiary-system-background ml-auto flex h-full justify-center overflow-hidden rounded-lg"
       style={{
         width: scaledWidth,
         height: scaledHeight,
diff --git a/apps/mobile/src/screens/(headless)/DebugScreen.tsx b/apps/mobile/src/screens/(headless)/DebugScreen.tsx
@@ -1,4 +1,5 @@
 import type { envProfileMap } from "@follow/shared/env.rn"
+import { whoami } from "@follow/store/user/getters"
 import { sleep } from "@follow/utils"
 import { requireNativeModule } from "expo"
 import * as Clipboard from "expo-clipboard"
@@ -31,6 +32,7 @@ import type { NavigationControllerView } from "@/src/lib/navigation/types"
 import { setEnvProfile, useEnvProfile } from "@/src/lib/proxy-env"
 import { toast } from "@/src/lib/toast"
 
+import { ProfileScreen } from "../(modal)/ProfileScreen"
 import { MarkdownScreen } from "./(debug)/markdown"
 
 interface MenuSection {
@@ -159,6 +161,12 @@ export const DebugScreen: NavigationControllerView = () => {
             navigation.pushControllerView(MarkdownScreen)
           },
         },
+        {
+          title: "Present Profile Modal",
+          onPress: () => {
+            navigation.presentControllerView(ProfileScreen, { userId: whoami()!.id })
+          },
+        },
       ],
     },
   ]
