2 files changed, 20 insertions, 4 deletions
diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/Conversation/MessageInput.tsx
index 926d66e7d..d05d6109e 100644
--- a/src/screens/Messages/Conversation/MessageInput.tsx
+++ b/src/screens/Messages/Conversation/MessageInput.tsx
@@ -15,6 +15,10 @@ import Graphemer from 'graphemer'
 
 import {HITSLOP_10, MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
+import {
+  useMessageDraft,
+  useSaveMessageDraft,
+} from '#/state/messages/message-drafts'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
@@ -29,7 +33,8 @@ export function MessageInput({
   const {_} = useLingui()
   const t = useTheme()
   const playHaptic = useHaptics()
-  const [message, setMessage] = React.useState('')
+  const {getDraft, clearDraft} = useMessageDraft()
+  const [message, setMessage] = React.useState(getDraft)
   const [maxHeight, setMaxHeight] = React.useState<number | undefined>()
   const [isInputScrollable, setIsInputScrollable] = React.useState(false)
 
@@ -45,13 +50,14 @@ export function MessageInput({
       Toast.show(_(msg`Message is too long`))
       return
     }
+    clearDraft()
     onSendMessage(message.trimEnd())
     playHaptic()
     setMessage('')
     setTimeout(() => {
       inputRef.current?.focus()
     }, 100)
-  }, [message, onSendMessage, playHaptic, _])
+  }, [message, onSendMessage, playHaptic, _, clearDraft])
 
   const onInputLayout = React.useCallback(
     (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
@@ -69,6 +75,8 @@ export function MessageInput({
     [scrollToEnd, topInset],
   )
 
+  useSaveMessageDraft(message)
+
   return (
     <View style={a.p_sm}>
       <View
diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx
index 2ee03bb31..b9506b5bb 100644
--- a/src/screens/Messages/Conversation/MessageInput.web.tsx
+++ b/src/screens/Messages/Conversation/MessageInput.web.tsx
@@ -6,6 +6,10 @@ import Graphemer from 'graphemer'
 import TextareaAutosize from 'react-textarea-autosize'
 
 import {MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
+import {
+  useMessageDraft,
+  useSaveMessageDraft,
+} from '#/state/messages/message-drafts'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
@@ -18,7 +22,8 @@ export function MessageInput({
 }) {
   const {_} = useLingui()
   const t = useTheme()
-  const [message, setMessage] = React.useState('')
+  const {getDraft, clearDraft} = useMessageDraft()
+  const [message, setMessage] = React.useState(getDraft)
 
   const onSubmit = React.useCallback(() => {
     if (message.trim() === '') {
@@ -28,9 +33,10 @@ export function MessageInput({
       Toast.show(_(msg`Message is too long`))
       return
     }
+    clearDraft()
     onSendMessage(message.trimEnd())
     setMessage('')
-  }, [message, onSendMessage, _])
+  }, [message, onSendMessage, _, clearDraft])
 
   const onKeyDown = React.useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -50,6 +56,8 @@ export function MessageInput({
     [],
   )
 
+  useSaveMessageDraft(message)
+
   return (
     <View style={a.p_sm}>
       <View