(wip) add message input embed component

src/screens/Messages/Conversation/MessageInput.tsx

@@ -16,6 +16,7 @@ import {HITSLOP_10} from '#/lib/constants'
 import {useHaptics} from 'lib/haptics'
 import {atoms as a, useTheme} from '#/alf'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
+import {MessageInputEmbed} from './MessageInputEmbed'
 
 export function MessageInput({
   onSendMessage,
@@ -68,13 +69,14 @@ export function MessageInput({
       <View
         style={[
           a.w_full,
-          a.flex_row,
           a.py_sm,
           a.px_sm,
           a.pl_md,
           t.atoms.bg_contrast_25,
           {borderRadius: 23},
         ]}>
+        <MessageInputEmbed message={message} setMessage={setMessage} />
+        <View style={a.flex_row}>
           <TextInput
             accessibilityLabel={_(msg`Message input field`)}
             accessibilityHint={_(msg`Type your message here`)}
@@ -103,9 +105,13 @@ export function MessageInput({
               {height: 30, width: 30, backgroundColor: t.palette.primary_500},
             ]}
             onPress={onSubmit}>
-          <PaperPlane fill={t.palette.white} style={[a.relative, {left: 1}]} />
+            <PaperPlane
+              fill={t.palette.white}
+              style={[a.relative, {left: 1}]}
+            />
           </Pressable>
         </View>
       </View>
+    </View>
   )
 }

src/screens/Messages/Conversation/MessageInput.web.tsx

@@ -6,6 +6,7 @@ import TextareaAutosize from 'react-textarea-autosize'
 
 import {atoms as a, useTheme} from '#/alf'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
+import {MessageInputEmbed} from './MessageInputEmbed'
 
 export function MessageInput({
   onSendMessage,
@@ -47,13 +48,14 @@ export function MessageInput({
     <View style={a.p_sm}>
       <View
         style={[
-          a.flex_row,
           a.py_sm,
           a.px_sm,
           a.pl_md,
           t.atoms.bg_contrast_25,
           {borderRadius: 23},
         ]}>
+        <MessageInputEmbed message={message} setMessage={setMessage} />
+        <View style={a.flex_row}>
           <TextareaAutosize
             style={StyleSheet.flatten([
               a.flex_1,
@@ -86,9 +88,13 @@ export function MessageInput({
               {height: 30, width: 30, backgroundColor: t.palette.primary_500},
             ]}
             onPress={onSubmit}>
-          <PaperPlane fill={t.palette.white} style={[a.relative, {left: 1}]} />
+            <PaperPlane
+              fill={t.palette.white}
+              style={[a.relative, {left: 1}]}
+            />
           </Pressable>
         </View>
       </View>
+    </View>
   )
 }

src/screens/Messages/Conversation/MessageInputEmbed.tsx

@@ -0,0 +1,81 @@
+import React, {useEffect, useState} from 'react'
+import {ActivityIndicator, View} from 'react-native'
+import {AppBskyEmbedRecord, AppBskyFeedDefs} from '@atproto/api'
+import {useQuery} from '@tanstack/react-query'
+
+import {useAgent} from '#/state/session'
+import {MaybeQuoteEmbed} from '#/view/com/util/post-embeds/QuoteEmbed'
+import {atoms as a, useTheme} from '#/alf'
+import {PostMeta} from '#/view/com/util/PostMeta'
+import {RichText} from '#/components/RichText'
+
+export function MessageInputEmbed({
+  message,
+}: {
+  message: string
+  setMessage: (message: string) => void
+}) {
+  const {getAgent} = useAgent()
+  const t = useTheme()
+  const [url, setUrl] = useState<string | null>(
+    'https://bsky.app/profile/retr0.id/post/3krylejlvke2j',
+  )
+
+  useEffect(() => {}, [message])
+
+  const query = useQuery({
+    queryKey: ['post-message-embed', url],
+    queryFn: async () => {
+      if (!url) return null
+      const urlp = new URL(url)
+      const [, , didOrHandle, _, rkey] = urlp.pathname.split('/')
+      let did = didOrHandle
+      if (!didOrHandle.startsWith('did:')) {
+        did = (await getAgent().resolveHandle({handle: didOrHandle})).data.did
+      }
+      const uri = `at://${did}/app.bsky.feed.post/${rkey}`
+      const {data} = await getAgent().api.app.bsky.feed.getPostThread({
+        uri,
+        depth: 1,
+        parentHeight: 0,
+      })
+      return data
+    },
+    enabled: !!url,
+  })
+
+  if (!url || query.isError) {
+    return null
+  }
+
+  if (query.isPending) {
+    //temp
+    return <ActivityIndicator />
+  }
+
+  if (query.data) {
+    if (!AppBskyFeedDefs.isThreadViewPost(query.data.thread)) return null
+    return (
+      <View
+        pointerEvents="none"
+        style={(a.border, a.rounded_2xs, t.atoms.border_contrast_high)}>
+        <PostMeta
+          author={query.data.thread.post.author}
+          showAvatar
+          authorHasWarning={false}
+          timestamp={query.data.thread.post.indexedAt}
+        />
+        {richText ? (
+          <RichText
+            value={richText}
+            style={[a.text_md]}
+            numberOfLines={20}
+            disableLinks
+          />
+        ) : null}
+      </View>
+    )
+  }
+
+  return null
+}