feat: composer - edit message (#15772)

* feat: new composer - edit message

ios/Podfile.lock

@@ -682,11 +682,11 @@ SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082
-  DoubleConversion: cde416483dac037923206447da6e1454df403714
+  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   FBLazyVector: d2db9d00883282819d03bbd401b2ad4360d47580
   FBReactNativeSpec: 94da4d84ba3b1acf459103320882daa481a2b62d
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
+  glog: 3ac2326f7fee4840a3066c90eb135ecd20496ded
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@@ -763,4 +763,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: c29de3b14e3275299c51aa95520622f09d084bcb
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.12.0

src/status_im/chat/models/input.cljs

@@ -6,6 +6,7 @@
             [status-im.chat.models.mentions :as mentions]
             [status-im.chat.models.message :as chat.message]
             [status-im.chat.models.message-content :as message-content]
+            [status-im2.config :as config]
             [status-im2.constants :as constants]
             [utils.re-frame :as rf]
             [utils.i18n :as i18n]
@@ -50,6 +51,12 @@
   (let [current-chat-id (or chat-id (:current-chat-id db))]
     {:db (assoc-in db [:chat/inputs current-chat-id :input-maximized?] maximized?)}))
 
+(rf/defn set-input-focused
+  {:events [:chat.ui/set-input-focused]}
+  [{db :db} focused? chat-id]
+  (let [current-chat-id (or chat-id (:current-chat-id db))]
+    {:db (assoc-in db [:chat/inputs current-chat-id :focused?] focused?)}))
+
 (rf/defn select-mention
   {:events [:chat.ui/select-mention]}
   [{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match public-key] :as user}]
@@ -98,7 +105,8 @@
                    (update-in [:chat/inputs current-chat-id :metadata]
                               dissoc
                               :sending-image))
-     :dispatch [:mention/to-input-field text current-chat-id]}))
+     :dispatch (when-not config/new-composer-enabled?
+                 [:mention/to-input-field text current-chat-id])}))
 
 (rf/defn show-contact-request-input
   "Sets reference to previous chat message and focuses on input"
@@ -173,7 +181,8 @@
   [{:keys [db] :as cofx}]
   (let [current-chat-id (:current-chat-id db)]
     (rf/merge cofx
-              {:set-text-input-value [current-chat-id ""]}
+              (when-not config/new-composer-enabled?
+                {:set-text-input-value [current-chat-id ""]})
               (clean-input current-chat-id)
               (mentions/clear-mentions))))
 
@@ -217,7 +226,6 @@
 
 (rf/defn send-edited-message
   [{:keys [db] :as cofx} text {:keys [message-id quoted-message chat-id]}]
-  (let [pinned-message (get-in db [:pin-messages chat-id message-id])]
   (rf/merge
    cofx
    {:json-rpc/call [{:method      "wakuext_editMessage"
@@ -232,7 +240,7 @@
                      :on-success  (fn [result]
                                     (re-frame/dispatch [:sanitize-messages-and-process-response
                                                         result]))}]}
-     (cancel-message-edit))))
+   (cancel-message-edit)))
 
 (rf/defn send-current-message
   "Sends message from current chat input"

src/status_im2/contexts/chat/bottom_sheet_composer/actions/view.cljs

@@ -14,8 +14,7 @@
     [status-im2.contexts.chat.bottom-sheet-composer.actions.style :as style]))
 
 (defn send-message
-  [{:keys [input-ref]}
+  [{:keys [text-value focused? maximized?]}
-   {:keys [text-value focused? maximized?]}
    {:keys [height saved-height last-height opacity background-y container-opacity]}
    window-height]
   (reanimated/animate height constants/input-height)
@@ -33,13 +32,10 @@
   (rf/dispatch [:chat.ui/set-chat-input-text nil])
   (reset! maximized? false)
   (reset! text-value "")
-  (when @input-ref
-    (.clear ^js @input-ref))
   (messages.list/scroll-to-bottom))
 
 (defn send-button
-  [props
+  [{:keys [text-value] :as state}
-   {:keys [text-value] :as state}
    animations
    window-height
    images?]
@@ -64,7 +60,7 @@
             {:icon                true
              :size                32
              :accessibility-label :send-message-button
-             :on-press            #(send-message props state animations window-height)}
+             :on-press            #(send-message state animations window-height)}
             :i/arrow-up]])]))])
 
 (defn audio-button
@@ -140,5 +136,5 @@
     [image-button props animations insets]
     [reaction-button]
     [format-button]]
-   [send-button props state animations window-height images?]
+   [send-button state animations window-height images?]
    [audio-button]])

src/status_im2/contexts/chat/bottom_sheet_composer/constants.cljs

@@ -19,6 +19,8 @@
 
 (def ^:const reply-container-height 32)
 
+(def ^:const edit-container-height 32)
+
 (def ^:const extra-content-offset (if platform/ios? 6 0))
 
 (def ^:const content-change-threshold 10)

src/status_im2/contexts/chat/bottom_sheet_composer/edit/style.cljs

@@ -0,0 +1,23 @@
+(ns status-im2.contexts.chat.bottom-sheet-composer.edit.style)
+
+(def container
+  {:flex-direction :row
+   :height         24})
+
+(def content-container
+  {:flex           1
+   :flex-direction :row})
+
+(def icon-container
+  {:position :absolute
+   :left     0
+   :bottom   -4
+   :width    16
+   :height   16})
+
+(def text-container
+  {:position       :absolute
+   :left           24
+   :top            3
+   :flex-direction :row
+   :align-items    :center})

src/status_im2/contexts/chat/bottom_sheet_composer/edit/view.cljs

@@ -0,0 +1,49 @@
+(ns status-im2.contexts.chat.bottom-sheet-composer.edit.view
+  (:require
+    [react-native.reanimated :as reanimated]
+    [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants]
+    [utils.i18n :as i18n]
+    [quo2.core :as quo]
+    [quo2.foundations.colors :as colors]
+    [re-frame.core :as rf]
+    [react-native.core :as rn]
+    [status-im2.contexts.chat.bottom-sheet-composer.edit.style :as style]))
+
+(defn edit-message
+  [cancel]
+  [rn/view
+   {:style               style/container
+    :accessibility-label :edit-message}
+   [rn/view {:style style/content-container}
+    [quo/icon
+     :i/connector-dotted
+     {:size            16
+      :color           (colors/theme-colors colors/neutral-40 colors/neutral-60)
+      :container-style style/icon-container}]
+    [rn/view {:style style/text-container}
+     [quo/text
+      {:weight :medium
+       :size   :paragraph-2}
+      (i18n/label :t/editing-message)]]]
+   [quo/button
+    {:width               24
+     :size                24
+     :accessibility-label :edit-cancel-button
+     :on-press            (fn []
+                            (cancel)
+                            (rf/dispatch [:chat.ui/cancel-message-edit]))
+     :type                :outline}
+    [quo/icon :i/close
+     {:size  16
+      :color (colors/theme-colors colors/neutral-100 colors/neutral-40)}]]])
+
+(defn- f-view
+  [edit cancel]
+  (let [height (reanimated/use-shared-value (if edit constants/edit-container-height 0))]
+    (rn/use-effect #(reanimated/animate height (if edit constants/edit-container-height 0)) [edit])
+    [reanimated/view {:style (reanimated/apply-animations-to-style {:height height} {})}
+     (when edit [edit-message cancel])]))
+
+(defn view
+  [edit cancel]
+  [:f> f-view edit cancel])

src/status_im2/contexts/chat/bottom_sheet_composer/effects.cljs

@@ -65,6 +65,19 @@
   (when-not reply?
     (reset! replying? false)))
 
+(defn edit-effect
+  [{:keys [text-value saved-cursor-position]}
+   {:keys [editing? input-ref]}
+   edit]
+  (let [edit-text (get-in edit [:content :text])]
+    (when (and (not @editing?) edit @input-ref)
+      (.focus ^js @input-ref)
+      (reset! editing? true)
+      (reset! text-value edit-text)
+      (reset! saved-cursor-position (count edit-text)))
+    (when-not edit-text
+      (reset! editing? false))))
+
 (defn empty-effect
   [{:keys [text-value maximized? focused?]}
    {:keys [container-opacity]}
@@ -80,7 +93,8 @@
   (.remove ^js @keyboard-frame-listener))
 
 (defn initialize
-  [props state animations {:keys [max-height] :as dimensions} chat-input keyboard-height images? reply?]
+  [props state animations {:keys [max-height] :as dimensions} chat-input keyboard-height images? reply?
+   edit]
   (rn/use-effect
    (fn []
      (maximized-effect state animations dimensions chat-input)
@@ -89,6 +103,7 @@
      (kb-default-height-effect state)
      (background-effect state animations dimensions chat-input)
      (images-or-reply-effect animations props images? reply?)
+     (edit-effect state props edit)
      (empty-effect state animations images? reply?)
      (kb/add-kb-listeners props state animations dimensions keyboard-height)
      #(component-will-unmount props))

src/status_im2/contexts/chat/bottom_sheet_composer/handlers.cljs

@@ -14,6 +14,7 @@
     :as   animations}
    {:keys [max-height] :as dimensions}]
   (reset! focused? true)
+  (rf/dispatch [:chat.ui/set-input-focused true])
   (reanimated/animate height (reanimated/get-shared-value last-height))
   (reanimated/set-shared-value saved-height (reanimated/get-shared-value last-height))
   (reanimated/animate container-opacity 1)
@@ -39,6 +40,7 @@
   (let [min-height    (utils/get-min-height lines)
         reopen-height (utils/calc-reopen-height text-value min-height content-height saved-height)]
     (reset! focused? false)
+    (rf/dispatch [:chat.ui/set-input-focused false])
     (reanimated/set-shared-value last-height reopen-height)
     (reanimated/animate height min-height)
     (reanimated/set-shared-value saved-height min-height)

src/status_im2/contexts/chat/bottom_sheet_composer/reply/view.cljs

@@ -126,11 +126,14 @@
             (get-quoted-text-with-mentions (or parsed-text (:parsed-text content))))]])]
      (when (and in-chat-input? (not recording-audio?))
        [quo/button
-        {:icon     true
+        {:width               24
-         :type     :outline
          :size                24
-         :on-press #(rf/dispatch [:chat.ui/cancel-message-reply])}
+         :accessibility-label :reply-cancel-button
-        :i/close])
+         :on-press            #(rf/dispatch [:chat.ui/cancel-message-reply])
+         :type                :outline}
+        [quo/icon :i/close
+         {:size  16
+          :color (colors/theme-colors colors/neutral-100 colors/neutral-40)}]])
      (when (and in-chat-input? recording-audio?)
        [linear-gradient/linear-gradient
         {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-90-opa-0)

src/status_im2/contexts/chat/bottom_sheet_composer/style.cljs

@@ -6,18 +6,18 @@
             [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants]))
 
 (defn shadow
-  [elevation?]
+  [focused?]
   (if platform/ios?
     {:shadow-radius  20
      :shadow-opacity (colors/theme-colors 0.1 0.7)
      :shadow-color   colors/neutral-100
      :shadow-offset  {:width 0 :height (colors/theme-colors -4 -8)}}
-    {:elevation (if elevation? 10 0)}))
+    {:elevation (if @focused? 10 0)}))
 
 (defn sheet-container
-  [insets opacity elevation?]
+  [insets {:keys [focused?]} {:keys [container-opacity]}]
   (reanimated/apply-animations-to-style
-   {:opacity opacity}
+   {:opacity container-opacity}
    (merge
     {:border-top-left-radius  20
      :border-top-right-radius 20
@@ -29,7 +29,7 @@
      :background-color        (colors/theme-colors colors/white colors/neutral-95)
      :z-index                 3
      :padding-bottom          (:bottom insets)}
-    (shadow elevation?))))
+    (shadow focused?))))
 
 (def bar-container
   {:height          constants/bar-container-height
@@ -55,7 +55,7 @@
     :overflow   :hidden}))
 
 (defn input
-  [maximized? saved-keyboard-height]
+  [focused? saved-keyboard-height]
   (merge typography/paragraph-1
          {:min-height          constants/input-height
           :color               (colors/theme-colors :black :white)
@@ -65,7 +65,7 @@
           :position            (if saved-keyboard-height :relative :absolute)
           :top                 0
           :left                0
-          :right               (when (or maximized? platform/ios?) 0)}))
+          :right               (when (or focused? platform/ios?) 0)}))
 
 (defn background
   [opacity background-y window-height]

src/status_im2/contexts/chat/bottom_sheet_composer/utils.cljs

@@ -3,7 +3,8 @@
     [oops.core :as oops]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants]))
+    [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants]
+    [utils.re-frame :as rf]))
 
 (defn bounded-val
   [val min-val max-val]
@@ -60,7 +61,7 @@
     (if platform/ios? lines (dec lines))))
 
 (defn calc-max-height
-  [window-height kb-height insets images? reply?]
+  [window-height kb-height insets images? reply? edit?]
   (let [margin-top (if platform/ios? (:top insets) (+ 10 (:top insets)))
         max-height (- window-height
                       margin-top
@@ -68,7 +69,8 @@
                       constants/bar-container-height
                       constants/actions-container-height)
         max-height (if images? (- max-height constants/images-container-height) max-height)
-        max-height (if reply? (- max-height constants/reply-container-height) max-height)]
+        max-height (if reply? (- max-height constants/reply-container-height) max-height)
+        max-height (if edit? (- max-height constants/edit-container-height) max-height)]
     max-height))
 
 (defn empty-input?
@@ -76,5 +78,15 @@
   (and (empty? text) (empty? images) (not reply?)))
 
 (defn android-elevation?
-  [lines images reply?]
+  [lines images reply? edit?]
-  (or (> lines 1) (seq images) reply?))
+  (or (> lines 1) (seq images) reply? edit?))
+
+(defn cancel-edit-message
+  [{:keys [text-value maximized?]}
+   {:keys [height saved-height last-height]}]
+  (when-not @maximized?
+    (reanimated/animate height constants/input-height)
+    (reanimated/set-shared-value saved-height constants/input-height)
+    (reanimated/set-shared-value last-height constants/input-height))
+  (reset! text-value "")
+  (rf/dispatch [:chat.ui/set-input-content-height constants/input-height]))

src/status_im2/contexts/chat/bottom_sheet_composer/view.cljs

@@ -11,6 +11,7 @@
     [status-im2.contexts.chat.bottom-sheet-composer.images.view :as images]
     [status-im2.contexts.chat.bottom-sheet-composer.reply.view :as reply]
     [utils.re-frame :as rf]
+    [status-im2.contexts.chat.bottom-sheet-composer.edit.view :as edit]
     [status-im2.contexts.chat.bottom-sheet-composer.utils :as utils]
     [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants]
     [status-im2.contexts.chat.bottom-sheet-composer.actions.view :as actions]
@@ -32,7 +33,8 @@
                   :emoji-kb-extra-height       (atom nil)
                   :saved-emoji-kb-extra-height (atom nil)
                   :replying?                   (atom nil)
-                  :sending-images?             (atom nil)}
+                  :sending-images?             (atom nil)
+                  :editing?                    (atom nil)}
            state {:text-value            (reagent/atom "")
                   :cursor-position       (reagent/atom 0)
                   :saved-cursor-position (reagent/atom 0)
@@ -47,6 +49,7 @@
         (fn []
           (let [images                                   (rf/sub [:chats/sending-image])
                 reply                                    (rf/sub [:chats/reply-message])
+                edit                                     (rf/sub [:chats/edit-message])
                 {:keys [input-text input-content-height]
                  :as   chat-input}                       (rf/sub [:chats/current-chat-input])
                 content-height                           (reagent/atom (or input-content-height
@@ -58,7 +61,8 @@
                                                                                 kb-height
                                                                                 insets
                                                                                 (seq images)
-                                                                                reply)
+                                                                                reply
+                                                                                edit)
                 lines                                    (utils/calc-lines @content-height)
                 max-lines                                (utils/calc-lines max-height)
                 initial-height                           (if (> lines 1)
@@ -89,8 +93,7 @@
                                                           :window-height  window-height
                                                           :lines          lines
                                                           :max-lines      max-lines}
-                show-bottom-gradient?                    (utils/show-bottom-gradient? state dimensions)
+                show-bottom-gradient?                    (utils/show-bottom-gradient? state dimensions)]
-                android-elevation?                       (utils/android-elevation? lines images reply)]
             (effects/initialize props
                                 state
                                 animations
@@ -98,16 +101,16 @@
                                 chat-input
                                 keyboard-height
                                 (seq images)
-                                reply)
+                                reply
+                                edit)
             [gesture/gesture-detector
              {:gesture (drag-gesture/drag-gesture props state animations dimensions keyboard-shown)}
              [reanimated/view
-              {:style     (style/sheet-container insets
+              {:style     (style/sheet-container insets state animations)
-                                                 (:container-opacity animations)
-                                                 android-elevation?)
                :on-layout #(handler/layout % state blur-height)}
               [sub-view/bar]
-              [reply/view]
+              [reply/view reply]
+              [edit/view edit #(utils/cancel-edit-message state animations)]
               [reanimated/touchable-opacity
                {:active-opacity      1
                 :on-press            (when @(:input-ref props) #(.focus ^js @(:input-ref props)))
@@ -122,7 +125,7 @@
                                                                          state
                                                                          animations
                                                                          dimensions
-                                                                         keyboard-shown)
+                                                                         (or keyboard-shown edit))
                  :on-scroll                #(handler/scroll % state animations dimensions)
                  :on-change-text           #(handler/change-text % props state)
                  :on-selection-change      #(handler/selection-change % state)
@@ -131,17 +134,15 @@
                  :multiline                true
                  :placeholder              (i18n/label :t/type-something)
                  :placeholder-text-color   (colors/theme-colors colors/neutral-40 colors/neutral-50)
-                 :style                    (style/input @(:maximized? state)
+                 :style                    (style/input @(:focused? state)
                                                         @(:saved-emoji-kb-extra-height props))
                  :accessibility-label      :chat-message-input}]
                [gradients/view props state animations show-bottom-gradient?]]
               [images/images-list]
               [actions/view props state animations window-height insets (seq images)]]]))]))])
 
-(defn bottom-sheet-composer
+(defn f-bottom-sheet-composer
   [insets]
-  [:f>
-   (fn []
   (let [window-height (rf/sub [:dimensions/window-height])
         opacity       (reanimated/use-shared-value 0)
         background-y  (reanimated/use-shared-value (- window-height))
@@ -150,4 +151,8 @@
     [rn/view
      [reanimated/view {:style (style/background opacity background-y window-height)}]
      [sub-view/blur-view blur-height]
-        [sheet insets window-height blur-height opacity background-y]]))])
+     [sheet insets window-height blur-height opacity background-y]]))
+
+(defn bottom-sheet-composer
+  [insets]
+  [:f> f-bottom-sheet-composer insets])

src/status_im2/contexts/chat/messages/list/new_temp_view.cljs

@@ -4,11 +4,13 @@
             [react-native.background-timer :as background-timer]
             [react-native.core :as rn]
             [react-native.platform :as platform]
+            [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
             [status-im.ui.screens.chat.group :as chat.group]
             [status-im.ui.screens.chat.message.gap :as message.gap]
             [status-im2.common.not-implemented :as not-implemented]
             [status-im2.constants :as constants]
+            [status-im2.contexts.chat.bottom-sheet-composer.utils :as utils]
             [status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
             [status-im2.contexts.chat.messages.content.view :as message]
             [status-im2.contexts.chat.messages.list.state :as state]
@@ -103,6 +105,47 @@
           [content.deleted/deleted-message message-data context]
           [message/message-with-reactions message-data context keyboard-shown])]))])
 
+(defn calc-shell-position
+  [y]
+  (let [{:keys [input-content-height focused?]} (rf/sub [:chats/current-chat-input])
+        reply                                   (rf/sub [:chats/reply-message])
+        edit                                    (rf/sub [:chats/edit-message])
+        lines                                   (utils/calc-lines input-content-height)
+        base                                    (if (or reply edit)
+                                                  (- composer.constants/edit-container-height)
+                                                  0)]
+    (if (not focused?)
+      (if (> lines 1) (+ -18 base) base)
+      (if (> lines 12)
+        (reanimated/get-shared-value y)
+        (if (> lines 1) (- (- input-content-height composer.constants/input-height base)) base)))))
+
+(defn shell-button
+  [insets]
+  (let [y              (reanimated/use-shared-value 0)
+        shell-position (calc-shell-position y)]
+    (rn/use-effect (fn []
+                     (reanimated/animate y shell-position))
+                   [shell-position])
+    [reanimated/view
+     {:style (reanimated/apply-animations-to-style
+              {:transform [{:translate-y y}]}
+              {:bottom   (+ composer.constants/composer-default-height (:bottom insets) 6)
+               :position :absolute
+               :left     0
+               :right    0})}
+     [quo/floating-shell-button
+      (merge {:jump-to
+              {:on-press #(do
+                            (rf/dispatch [:chat/close true])
+                            (rf/dispatch [:shell/navigate-to-jump-to]))
+               :label    (i18n/label :t/jump-to)
+               :style    {:align-self :center}}}
+             (when @show-floating-scroll-down-button
+               {:scroll-to-bottom {:on-press scroll-to-bottom}}))
+      {}]]))
+
+
 (defn messages-list-content
   [{:keys [chat-id] :as chat} insets keyboard-shown]
   (fn []
@@ -139,16 +182,8 @@
          :inverted                     (when platform/ios? true)
          :style                        (when platform/android? {:scaleY -1})
          :on-layout                    on-messages-view-layout}]
-       [quo/floating-shell-button
+       [:f> shell-button insets]])))
-        (merge {:jump-to
+
-                {:on-press #(do
-                              (rf/dispatch [:chat/close true])
-                              (rf/dispatch [:shell/navigate-to-jump-to]))
-                 :label    (i18n/label :t/jump-to)}}
-               (when @show-floating-scroll-down-button
-                 {:scroll-to-bottom {:on-press scroll-to-bottom}}))
-        {:position :absolute
-         :bottom   (+ (:bottom insets) composer.constants/composer-default-height 6)}]])))
 
 (defn use-keyboard-visibility
   []