New MessageComposer component

package.json

@@ -88,6 +88,8 @@
     "@bsky.app/expo-image-crop-tool": "^0.5.0",
     "@bsky.app/expo-translate-text": "^0.2.9",
     "@bsky.app/react-native-mmkv": "2.12.5",
+    "@bsky.app/sift": "^0.2.4",
+    "@bsky.app/tapper": "^0.4.0",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",

src/alf/util/flatten.ts

@@ -1,3 +1,24 @@
 import {StyleSheet} from 'react-native'
 
 export const flatten = StyleSheet.flatten
+
+type PaddingStyle = {
+  padding?: number
+  paddingHorizontal?: number
+  paddingVertical?: number
+  paddingTop?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+}
+
+export function extractPadding(style: PaddingStyle | PaddingStyle[]) {
+  const s = flatten(style)
+  const base = s.padding ?? 0
+  return {
+    paddingTop: s.paddingTop ?? s.paddingVertical ?? base,
+    paddingBottom: s.paddingBottom ?? s.paddingVertical ?? base,
+    paddingLeft: s.paddingLeft ?? s.paddingHorizontal ?? base,
+    paddingRight: s.paddingRight ?? s.paddingHorizontal ?? base,
+  }
+}

src/lib/merge-refs.ts

@@ -13,7 +13,7 @@
  * returns a ref callback function that can be used to merge multiple refs into a single ref.
  */
 export function mergeRefs<T = any>(
-  refs: Array<React.MutableRefObject<T> | React.Ref<T>>,
+  refs: Array<React.MutableRefObject<T> | React.Ref<T> | undefined>,
 ): React.RefCallback<T> {
   return value => {
     refs.forEach(ref => {

src/screens/Messages/components/MessageComposer.tsx

@@ -0,0 +1,749 @@
+/**
+ * All
+ * - look at Text as children option to preserve lineHeight
+ *
+ * Native
+ *
+ * Web
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  Pressable,
+  TextInput,
+  type TextInputProps,
+  type TextInputSubmitEditingEvent,
+  View,
+} from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
+import {Sift, SiftItem, useSift} from '@bsky.app/sift'
+import {
+  type TapperActiveFacet,
+  type TapperFacet,
+  useTapper,
+} from '@bsky.app/tapper'
+import {useLingui} from '@lingui/react/macro'
+import {countGraphemes} from 'unicode-segmenter/grapheme'
+
+import {HITSLOP_10, MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
+import {useHaptics} from '#/lib/haptics'
+import {mergeRefs} from '#/lib/merge-refs'
+import {isBskyPostUrl} from '#/lib/strings/url-helpers'
+import {useEmail} from '#/state/email-verification'
+import {
+  useMessageDraft,
+  useSaveMessageDraft,
+} from '#/state/messages/message-drafts'
+import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
+import {
+  type Emoji,
+  EmojiPicker,
+  type EmojiPickerState,
+} from '#/view/com/composer/text-input/web/EmojiPicker'
+import {
+  atoms as a,
+  extractPadding,
+  type TextStyleProp,
+  useAlf,
+  useTheme,
+  type ViewStyleProp,
+  web,
+} from '#/alf'
+import {normalizeTextStyles} from '#/alf/typography'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {useOnKeyboard} from '#/components/hooks/useOnKeyboard'
+import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
+import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
+import {Portal} from '#/components/Portal'
+import * as Toast from '#/components/Toast'
+import {Span, Text} from '#/components/Typography'
+import {IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env'
+
+export type SubmitRequest =
+  | {
+      platform: 'web'
+      shiftKey: boolean
+      metaKey: boolean
+      nativeEvent: KeyboardEvent
+    }
+  | {
+      platform: 'native'
+      nativeEvent: TextInputSubmitEditingEvent
+    }
+
+/**
+ * Bail-out API for special cases where a parent component needs to
+ * imperatively control the Composer (e.g. clearing the input on submit).
+ * Prefer props/callbacks for normal data flow.
+ */
+export type ComposerInternalApi = {
+  input?: ReturnType<typeof useTapper>['input']
+  clear: () => void
+  insert(text: string): void
+}
+
+export function useComposerInternalApiRef() {
+  return useRef<ComposerInternalApi>(null)
+}
+
+export type ComposerProps = Omit<
+  TextInputProps,
+  'value' | 'onSelectionChange' | 'selection' | 'style' | 'onSubmitEditing'
+> & {
+  /**
+   * Required a11y label, used for accessibilityHint as well unless that prop is specified.
+   */
+  label: string
+  /**
+   * Optional forwarded ref.
+   */
+  ref?: React.Ref<TextInput>
+  /**
+   * Styles applied to the input container. To style the text, use the
+   * `textStyle` prop.
+   */
+  style?: ViewStyleProp['style']
+  /**
+   * Padding applied to the `TextInput` and the facet preview container.
+   */
+  padding?: Parameters<typeof extractPadding>[0]
+  /**
+   * Shared text style applied to both the preview overlay and the input.
+   * Must match exactly for pixel-perfect alignment.
+   */
+  textStyle?: TextStyleProp['style']
+  /**
+   * Sets a default height on the input, but still allows for expansion
+   */
+  initialNumberOfLines?: number
+  /**
+   * Sets the max height on the input
+   */
+  maxNumberOfLines?: number
+  /**
+   * When a facet is active (e.g. the user is typing after a trigger), this callbacks is called with the active facet info. When the facet is committed (e.g. the user selects an autocomplete suggestion or finishes typing), the `onFacetCommitted` callback is called with the committed facet info.
+   */
+  onActiveFacet?: (activeFacet: TapperActiveFacet | null) => void
+  /**
+   * Called when a facet is committed, either by selecting an autocomplete suggestion or by finishing typing. The committed facet info is passed as an argument.
+   */
+  onFacetCommitted?: (facet: TapperFacet) => void
+  /**
+   * Called when the user presses Enter on web. Includes modifier key state
+   * and the native event for calling `preventDefault()`. On native, fired
+   * from a submit button press.
+   */
+  onRequestSubmit?: (request: SubmitRequest) => void
+  /**
+   * Ref to the internal imperative API. See {@link ComposerInternalApi}.
+   */
+  internalApiRef?: React.Ref<ComposerInternalApi>
+}
+
+function Composer({
+  children,
+  label,
+  placeholder,
+  defaultValue,
+  style,
+  padding,
+  textStyle: rawTextStyle,
+  initialNumberOfLines = 1,
+  maxNumberOfLines,
+  onChangeText: onChangeTextOuter,
+  onActiveFacet: onActiveFacetOuter,
+  onFacetCommitted: onFacetCommittedOuter,
+  internalApiRef,
+  onRequestSubmit,
+  ...rest
+}: ComposerProps) {
+  const {theme: t, fonts} = useAlf()
+  const textInputRef = useRef<TextInput>(null)
+  const tapper = useTapper({
+    initialText: defaultValue,
+  })
+  const callbackRefs = useRef({
+    onActiveFacetOuter,
+    onFacetCommittedOuter,
+  })
+  callbackRefs.current = {
+    onActiveFacetOuter,
+    onFacetCommittedOuter,
+  }
+  const scrollY = useSharedValue(0)
+
+  useImperativeHandle(
+    internalApiRef,
+    () => ({
+      input: tapper.input,
+      clear: () => {
+        tapper.inputProps.onChangeText('')
+        scrollY.value = 0
+      },
+      insert: tapper.insert,
+    }),
+    [tapper.inputProps, tapper.input, tapper.insert, scrollY],
+  )
+
+  const [activeFacet, setActiveFacet] = useState<TapperActiveFacet | null>(null)
+  const sift = useSift({
+    offset: a.p_sm.padding,
+    placement: 'top-start',
+    dynamicWidth: IS_WEB,
+  })
+
+  /*
+   * Skip the initial mount to avoid an unnecessary re-render — the parent
+   * already knows the initial value since it passed `defaultValue`.
+   */
+  const isFirstRender = useRef(true)
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      return
+    }
+    onChangeTextOuter?.(tapper.state.text)
+  }, [tapper.state.text, onChangeTextOuter])
+
+  useEffect(() => {
+    const offActiveFacet = tapper.on('activeFacet', activeFacet => {
+      setActiveFacet(activeFacet)
+      callbackRefs.current.onActiveFacetOuter?.(activeFacet)
+    })
+    const offFacetCommitted = tapper.on('facetCommitted', facet => {
+      callbackRefs.current.onFacetCommittedOuter?.(facet)
+    })
+    return () => {
+      offActiveFacet()
+      offFacetCommitted()
+    }
+  }, [])
+
+  const {textStyle, textAreaStyle, minHeight, maxHeight} = useMemo(() => {
+    const textStyle = normalizeTextStyles(
+      [a.leading_snug, rawTextStyle, t.atoms.text],
+      {
+        fontScale: fonts.scaleMultiplier,
+        fontFamily: fonts.family,
+        flags: {},
+      },
+    )
+    const p = padding
+      ? extractPadding(padding)
+      : {
+          paddingTop: 0,
+          paddingBottom: 0,
+        }
+    const lineHeight = textStyle.lineHeight || 20
+    const verticalSpace = p.paddingTop + p.paddingBottom
+    const minHeight = lineHeight * initialNumberOfLines + verticalSpace
+    const maxHeight = maxNumberOfLines
+      ? lineHeight * maxNumberOfLines + verticalSpace
+      : 999
+    const textAreaStyle = IS_WEB
+      ? {
+          height: (textStyle.lineHeight || 20) + p.paddingTop + p.paddingBottom,
+        }
+      : {minHeight, maxHeight}
+    /*
+     * On iOS especially, TextInput and Text line height does not render the
+     * same way, but setting this to undefined and using the default font
+     * metrics works fine.
+     */
+    if (!IS_WEB) {
+      delete textStyle.lineHeight
+    }
+    return {
+      textStyle,
+      textAreaStyle,
+      minHeight,
+      maxHeight,
+    }
+  }, [t, fonts, padding, rawTextStyle, initialNumberOfLines, maxNumberOfLines])
+
+  const updateAutocompletePosition = useCallback(() => {
+    sift.updatePosition()
+  }, [sift])
+
+  useOnKeyboard('keyboardDidShow', updateAutocompletePosition)
+  useOnKeyboard('keyboardDidHide', updateAutocompletePosition)
+
+  const prevHeight = useRef(0)
+  useEffect(() => {
+    if (IS_WEB) {
+      const el = textInputRef.current as unknown as HTMLTextAreaElement
+      if (!el) return
+      el.style.height = '0px'
+      const scrollHeight = el.scrollHeight
+      const nextHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight)
+      el.style.height = `${nextHeight}px`
+      el.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden'
+      if (nextHeight !== prevHeight.current) {
+        prevHeight.current = nextHeight
+        updateAutocompletePosition()
+      }
+      return
+    }
+
+    textInputRef.current?.measure((_x, _y, _w, h) => {
+      if (h !== prevHeight.current) {
+        prevHeight.current = h
+        updateAutocompletePosition()
+      }
+    })
+  }, [tapper.state.text, minHeight, maxHeight, updateAutocompletePosition])
+
+  const previewScrollStyle = useAnimatedStyle(() => ({
+    transform: [{translateY: -scrollY.value}],
+  }))
+
+  const isComposing = useRef(false)
+  const onKeyPressWeb = useCallback(
+    (e: React.KeyboardEvent | any) => {
+      /*
+       * On mobile web phones, we want to keep the same behavior as the native
+       * app. Do not submit the message in these cases.
+       */
+      if (IS_WEB_TOUCH_DEVICE) return
+
+      // Don't submit the form when the Japanese or any other IME is composing
+      if (isComposing.current) return
+
+      /**
+       * On Safari, the final keydown event to dismiss the IME - which is the
+       * enter key - is also "Enter" below. Obviously, this causes problems
+       * because the final dismissal should _not_ submit the text, but should
+       * just stop the IME editing. This is the behavior of Chrome and Firefox,
+       * but not Safari. Keycode is deprecated, however the alternative seems
+       * to only be to compare the timestamp from the onCompositionEnd event to
+       * the timestamp of the keydown event, which is not reliable. For
+       * example, this hack uses that method:
+       * https://github.com/ProseMirror/prosemirror-view/pull/44. However, from
+       * my 500ms resulted in far too long of a delay, and a subsequent enter
+       * press would often just end up doing nothing. A shorter time frame was
+       * also not great, since it was too short to be reliable (i.e. an older
+       * system might have a larger time gap between the two events firing.
+       *
+       * @see https://github.com/bluesky-social/social-app/issues/4178
+       * @see https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+       * @see https://lists.w3.org/Archives/Public/www-dom/2010JulSep/att-0182/keyCode-spec.html
+       */
+      if (IS_WEB && e.key === 'Enter' && e.keyCode === 229) {
+        return
+      }
+
+      if (e.key === 'Enter') {
+        onRequestSubmit?.({
+          platform: 'web',
+          shiftKey: e.shiftKey,
+          metaKey: e.metaKey,
+          nativeEvent: e.nativeEvent,
+        })
+      }
+    },
+    [onRequestSubmit],
+  )
+
+  return (
+    <>
+      <View style={[a.relative, style]}>
+        {/* PREVIEW */}
+        <View
+          pointerEvents="none"
+          style={[a.absolute, a.inset_0, a.z_10, {overflow: 'hidden'}]}>
+          <Animated.View
+            style={[
+              padding,
+              {position: 'absolute', left: 0, right: 0},
+              previewScrollStyle,
+            ]}>
+            <Text style={[textStyle, web({whiteSpace: 'pre-wrap'})]}>
+              {tapper.state.nodes.map((node, i) => {
+                switch (node.type) {
+                  case 'text': {
+                    return <Span key={i}>{node.value}</Span>
+                  }
+                  case 'trigger':
+                  case 'facet': {
+                    return (
+                      <Span
+                        key={i}
+                        ref={IS_WEB ? sift.refs.setAnchor : undefined}
+                        style={
+                          node.type === 'facet' && {
+                            color: t.palette.primary_500,
+                          }
+                        }>
+                        {node.raw}
+                      </Span>
+                    )
+                  }
+                }
+              })}
+            </Text>
+          </Animated.View>
+        </View>
+        <TextInput
+          dirName="ltr"
+          autoCapitalize="none"
+          autoCorrect={false}
+          multiline={true}
+          hitSlop={HITSLOP_10}
+          placeholder={placeholder}
+          placeholderTextColor={t.palette.contrast_500}
+          accessibilityLabel={label}
+          accessibilityHint={label}
+          keyboardAppearance={t.scheme}
+          // TODO explain this behavior
+          submitBehavior="newline"
+          onSubmitEditing={e => {
+            onRequestSubmit?.({platform: 'native', nativeEvent: e})
+          }}
+          style={[
+            textStyle,
+            padding,
+            a.relative,
+            a.z_20,
+            a.border_0,
+            {
+              color: 'transparent',
+              background: 'transparent',
+              textAlignVertical: 'top',
+              includeFontPadding: false,
+            },
+            textAreaStyle,
+            web({
+              resize: 'none',
+              outline: 'none',
+              caretColor: textStyle.color ?? 'black',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              overscrollBehavior: 'none',
+              ...textAreaStyle,
+            }),
+          ]}
+          {...rest}
+          {...tapper.inputProps}
+          {...sift.targetProps}
+          ref={mergeRefs([
+            textInputRef,
+            rest.ref,
+            tapper.inputProps.ref,
+            sift.targetProps.ref,
+          ])}
+          onBlur={e => {
+            rest.onBlur?.(e)
+            setActiveFacet(null)
+          }}
+          onKeyPress={IS_WEB ? onKeyPressWeb : undefined}
+          onScroll={e => {
+            if (IS_WEB) {
+              // TODO why does compiler not like this?
+              scrollY.value = (e.target as any).scrollTop
+            } else {
+              scrollY.value = e.nativeEvent.contentOffset.y
+            }
+          }}
+          // @ts-ignore web only
+          onCompositionStart={() => {
+            isComposing.current = true
+          }}
+          // @ts-ignore web only
+          onCompositionEnd={() => {
+            isComposing.current = false
+          }}
+        />
+
+        {children}
+      </View>
+
+      {activeFacet && (
+        <Portal>
+          <Sift
+            inverted={!IS_WEB}
+            sift={sift}
+            data={[
+              {
+                key: 'alice',
+                label: '@alice.test',
+                value: '@alice.test',
+              },
+              {
+                key: 'bob',
+                label: '@bob.test',
+                value: '@bob.test',
+              },
+              {
+                key: 'carol',
+                label: '@carol.test',
+                value: '@carol.test',
+              },
+            ]}
+            onSelect={item => {
+              activeFacet?.replace(item.value)
+            }}
+            onDismiss={() => setActiveFacet(null)}
+            style={[
+              a.overflow_hidden,
+              a.rounded_md,
+              a.border,
+              t.atoms.border_contrast_low,
+              t.atoms.bg,
+              !IS_WEB && a.w_full,
+            ]}
+            render={({active, props, item}) => (
+              <SiftItem
+                {...props}
+                style={s => [
+                  a.px_md,
+                  a.py_sm,
+                  (active || s.hovered) && t.atoms.bg_contrast_50,
+                ]}>
+                <Text style={[a.text_md]}>{item.label}</Text>
+              </SiftItem>
+            )}
+          />
+        </Portal>
+      )}
+    </>
+  )
+}
+
+export function MessageComposer({
+  onSendMessage,
+  hasEmbed,
+  setEmbed,
+  children,
+}: {
+  onSendMessage: (message: string) => void
+  hasEmbed: boolean
+  setEmbed: (embedUrl: string | undefined) => void
+  children?: React.ReactNode
+}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const playHaptic = useHaptics()
+  const {needsEmailVerification} = useEmail()
+  const editable = !needsEmailVerification
+  const {getDraft, clearDraft} = useMessageDraft()
+  const [emojiPickerState, setEmojiPickerState] = useState<EmojiPickerState>({
+    isOpen: false,
+    pos: {top: 0, left: 0, right: 0, bottom: 0, nextFocusRef: null},
+  })
+  const composerInternalApiRef = useComposerInternalApiRef()
+
+  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
+
+  const [text, setText] = useState(getDraft)
+  useSaveMessageDraft(text)
+
+  const openEmojiPicker = useCallback((pos: any) => {
+    setEmojiPickerState({isOpen: true, pos})
+  }, [])
+
+  const onSubmit = useCallback(() => {
+    if (!editable) return
+    if (!hasEmbed && text.trim() === '') return
+    if (countGraphemes(text) > MAX_DM_GRAPHEME_LENGTH) {
+      Toast.show(l`Message is too long`, {
+        type: 'error',
+      })
+      return
+    }
+
+    clearDraft()
+    onSendMessage(text)
+    playHaptic()
+    setEmbed(undefined)
+    composerInternalApiRef.current?.clear()
+
+    if (IS_WEB) {
+      composerInternalApiRef.current?.input?.focus()
+    }
+  }, [
+    l,
+    editable,
+    hasEmbed,
+    text,
+    clearDraft,
+    onSendMessage,
+    playHaptic,
+    setEmbed,
+    composerInternalApiRef,
+  ])
+
+  useEffect(() => {
+    function onEmojiInserted(emoji: Emoji) {
+      composerInternalApiRef.current?.insert(emoji.native)
+    }
+    textInputWebEmitter.addListener('emoji-inserted', onEmojiInserted)
+    return () => {
+      textInputWebEmitter.removeListener('emoji-inserted', onEmojiInserted)
+    }
+  }, [])
+
+  return (
+    <>
+      <View style={[a.px_md, a.pb_sm, a.pt_xs]}>
+        {children}
+        <View
+          // @ts-expect-error web only
+          onMouseEnter={onHoverIn}
+          onMouseLeave={onHoverOut}>
+          <Composer
+            internalApiRef={composerInternalApiRef}
+            editable={editable}
+            autoFocus={IS_WEB}
+            label={l`Message input field`}
+            placeholder={l`Write a message`}
+            defaultValue={text}
+            maxNumberOfLines={12}
+            style={[
+              t.atoms.bg_contrast_25,
+              {
+                borderWidth: 1,
+                borderColor: 'transparent',
+                borderRadius: 25,
+              },
+              editable &&
+                hovered && {
+                  borderColor: t.atoms.border_contrast_medium.borderColor,
+                },
+              editable &&
+                focused && {
+                  borderColor: t.palette.primary_500,
+                },
+            ]}
+            padding={[
+              a.p_md,
+              {
+                paddingRight: 35 + a.p_sm.padding,
+              },
+              IS_WEB
+                ? {
+                    paddingLeft: 30 + a.p_sm.padding,
+                  }
+                : {},
+            ]}
+            textStyle={[a.text_md, a.leading_snug]}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onChangeText={setText}
+            onFacetCommitted={facet => {
+              if (facet.type === 'url' && isBskyPostUrl(facet.value)) {
+                setEmbed(facet.value)
+              }
+            }}
+            onRequestSubmit={req => {
+              if (req.platform === 'web' && req.shiftKey) return
+              req.nativeEvent.preventDefault()
+              onSubmit()
+            }}>
+            {IS_WEB && (
+              <Pressable
+                onPress={e => {
+                  e.currentTarget.measure(
+                    (_fx, _fy, _width, _height, px, py) => {
+                      openEmojiPicker?.({
+                        top: py,
+                        left: px,
+                        right: px,
+                        bottom: py,
+                        nextFocusRef: {
+                          current:
+                            composerInternalApiRef.current?.input?.element,
+                        },
+                      })
+                    },
+                  )
+                }}
+                style={[
+                  a.overflow_hidden,
+                  a.absolute,
+                  a.rounded_full,
+                  a.align_center,
+                  a.justify_center,
+                  a.z_30,
+                  {
+                    height: 30,
+                    width: 30,
+                    top: 7,
+                    left: 7,
+                  },
+                ]}
+                accessibilityLabel={l`Open emoji picker`}
+                accessibilityHint="">
+                {state => (
+                  <View
+                    style={[
+                      a.absolute,
+                      a.inset_0,
+                      a.align_center,
+                      a.justify_center,
+                      {
+                        backgroundColor:
+                          state.hovered || state.focused || state.pressed
+                            ? t.atoms.bg.backgroundColor
+                            : undefined,
+                      },
+                    ]}>
+                    <EmojiSmile size="lg" />
+                  </View>
+                )}
+              </Pressable>
+            )}
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={l`Send message`}
+              accessibilityHint=""
+              hitSlop={HITSLOP_10}
+              style={[
+                a.absolute,
+                a.rounded_full,
+                a.align_center,
+                a.justify_center,
+                a.z_30,
+                {
+                  height: 35,
+                  width: 35,
+                  backgroundColor: t.palette.primary_500,
+                  top: 4,
+                  right: 4,
+                },
+              ]}
+              onPress={onSubmit}
+              disabled={!editable}>
+              <PaperPlane
+                fill={t.palette.white}
+                style={[a.relative, {left: 1}]}
+              />
+            </Pressable>
+          </Composer>
+        </View>
+      </View>
+
+      {IS_WEB && (
+        <EmojiPicker
+          pinToTop
+          state={emojiPickerState}
+          close={() => setEmojiPickerState(prev => ({...prev, isOpen: false}))}
+        />
+      )}
+    </>
+  )
+}

src/screens/Messages/components/MessagesList.tsx

@@ -37,21 +37,16 @@ import {
 import {useGetPost} from '#/state/queries/post'
 import {useAgent} from '#/state/session'
 import {useShellLayout} from '#/state/shell/shell-layout'
-import {
-  EmojiPicker,
-  type EmojiPickerState,
-} from '#/view/com/composer/text-input/web/EmojiPicker'
 import {List, type ListMethods} from '#/view/com/util/List'
 import {ChatDisabled} from '#/screens/Messages/components/ChatDisabled'
-import {MessageInput} from '#/screens/Messages/components/MessageInput'
+import {MessageComposer} from '#/screens/Messages/components/MessageComposer'
 import {MessageListError} from '#/screens/Messages/components/MessageListError'
 import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
-import {IS_NATIVE} from '#/env'
+import {IS_NATIVE, IS_WEB} from '#/env'
-import {IS_WEB} from '#/env'
 import {ChatStatusInfo} from './ChatStatusInfo'
 import {MessageInputEmbed, useMessageEmbed} from './MessageInputEmbed'
 
@@ -116,11 +111,6 @@ export function MessagesList({
     startContentOffset: 0,
   })
 
-  const [emojiPickerState, setEmojiPickerState] = useState<EmojiPickerState>({
-    isOpen: false,
-    pos: {top: 0, left: 0, right: 0, bottom: 0, nextFocusRef: null},
-  })
-
   // We need to keep track of when the scroll offset is at the bottom of the list to know when to scroll as new items
   // are added to the list. For example, if the user is scrolled up to 1iew older messages, we don't want to scroll to
   // the bottom.
@@ -412,10 +402,6 @@ export function MessagesList({
     })
   }, [flatListRef])
 
-  const onOpenEmojiPicker = useCallback((pos: any) => {
-    setEmojiPickerState({isOpen: true, pos})
-  }, [])
-
   return (
     <>
       {/* Custom scroll provider so that we can use the `onScroll` event in our custom List implementation */}
@@ -457,25 +443,16 @@ export function MessagesList({
           <ConversationFooter
             convoState={convoState}
             hasAcceptOverride={hasAcceptOverride}>
-            <MessageInput
+            <MessageComposer
               onSendMessage={onSendMessage}
               hasEmbed={!!embedUri}
-              setEmbed={setEmbed}
+              setEmbed={setEmbed}>
-              openEmojiPicker={onOpenEmojiPicker}>
               <MessageInputEmbed embedUri={embedUri} setEmbed={setEmbed} />
-            </MessageInput>
+            </MessageComposer>
           </ConversationFooter>
         )}
       </Animated.View>
 
-      {IS_WEB && (
-        <EmojiPicker
-          pinToTop
-          state={emojiPickerState}
-          close={() => setEmojiPickerState(prev => ({...prev, isOpen: false}))}
-        />
-      )}
-
       {newMessagesPill.show && <NewMessagesPill onPress={scrollToEndOnPress} />}
     </>
   )

yarn.lock

@@ -2413,6 +2413,16 @@
   resolved "https://registry.yarnpkg.com/@bsky.app/react-native-mmkv/-/react-native-mmkv-2.12.5.tgz#eb17d31a6158c74393f617a1763ac223ff3f83a6"
   integrity sha512-3vUz1nQY1DiKIPAWRkpp5ZGxH5f2G6Ui0UuQuEYjYv81xx1qFcSzS9KQ2sHcOKYdkOM9amWV2Q8TQCxt1lrAHg==
 
+"@bsky.app/sift@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@bsky.app/sift/-/sift-0.2.4.tgz#cfdc67d5236b3fb4d26b9b5d482420d3f804cfe1"
+  integrity sha512-2tUoKhTjULMPgqhIUiNaNPyyTh2vPhOMRT/2S1HWhalEsBNeMeoNqUs7KWgOtgcDtT4breGkHmR1XOo2tzYmgA==
+
+"@bsky.app/tapper@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@bsky.app/tapper/-/tapper-0.4.0.tgz#46c004eb9b6a2d842b4fd4b80d69bb4f2bdd4c5b"
+  integrity sha512-5w9kRIrIFiXVdQrbYyJPvim/H3Ujhy/EPUx1M7AwcPmfq9fOJY+gqI8uXSb50ZKdr//qWnf7eMuxBHsOGbCizw==
+
 "@crowdin/cli@^4.14.1":
   version "4.14.1"
   resolved "https://registry.yarnpkg.com/@crowdin/cli/-/cli-4.14.1.tgz#1239922681235b6b14bcacd4fd622bc2217dd6c5"
@@ -14569,10 +14579,10 @@ react-test-renderer@19.1.0:
     react-is "^19.1.0"
     scheduler "^0.26.0"
 
-react-textarea-autosize@^8.5.3:
+react-textarea-autosize@^8.5.9:
-  version "8.5.3"
+  version "8.5.9"
-  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz#d1e9fe760178413891484847d3378706052dd409"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.5.9.tgz#ab8627b09aa04d8a2f45d5b5cd94c84d1d4a8893"
-  integrity sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==
+  integrity sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==
   dependencies:
     "@babel/runtime" "^7.20.13"
     use-composed-ref "^1.3.0"