[WiP] Quote in msg body

src/components/Inbox/Message.tsx

@@ -7,12 +7,15 @@ import type { Message, ChatMember } from '../../graphql/types.gen'
 import formattedTime from '../../utils/formatDateTime'
 import { Icon } from '../_shared/Icon'
 import { MessageActionsPopup } from './MessageActionsPopup'
+import QuotedMessage from './QuotedMessage'
 
 type Props = {
   content: Message
   ownId: number
   members: ChatMember[]
   replyClick?: () => void
+  replyBody?: string
+  replyAuthor?: string
 }
 
 const md = new MarkdownIt({
@@ -38,6 +41,9 @@ const Message = (props: Props) => {
             </div>
             <MessageActionsPopup trigger={<Icon name="menu" />} />
           </div>
+          <Show when={props.replyBody}>
+            <QuotedMessage body={props.replyBody} variant="inline" />
+          </Show>
           <div innerHTML={md.render(props.content.body)} />
         </div>
       </div>

src/components/Inbox/QuotedMessage.tsx

@@ -7,6 +7,7 @@ type QuotedMessage = {
   body: string
   cancel?: () => void
   author?: string
+  variant: 'inline' | 'reply'
 }
 
 const QuotedMessage = (props: QuotedMessage) => {
@@ -21,7 +22,7 @@ const QuotedMessage = (props: QuotedMessage) => {
         </Show>
         <div class={styles.quote}>{props.body}</div>
       </div>
-      <Show when={props.cancel}>
+      <Show when={props.cancel && props.variant !== 'inline'}>
         <div class={clsx(styles.cancel, styles.icon)} onClick={props.cancel}>
           <Icon name="close-gray" />
         </div>

src/components/Views/Inbox.tsx

@@ -134,6 +134,10 @@ export const InboxView = () => {
     }
   }
 
+  const findToReply = (messageId) => {
+    return messages().find((message) => message.id === messageId)
+  }
+
   return (
     <div class={clsx('container', styles.Inbox)}>
       <Modal variant="narrow" name="inviteToChat">
@@ -221,11 +225,11 @@ export const InboxView = () => {
                       content={message}
                       ownId={currentUserId()}
                       members={currentDialog().members}
+                      replyBody={message.replyTo && findToReply(message.replyTo).body}
                       replyClick={() => setMessageToReply(message)}
                     />
                   )}
                 </For>
-
                 {/*<div class={styles.conversationDate}>*/}
                 {/*  <time>12 сентября</time>*/}
                 {/*</div>*/}
@@ -235,6 +239,7 @@ export const InboxView = () => {
             <div class={styles.messageForm}>
               <Show when={messageToReply()}>
                 <QuotedMessage
+                  variant="reply"
                   author={
                     currentDialog().members.find((member) => member.id === Number(messageToReply().author))
                       .name

src/graphql/query/chat-messages-load-by.ts

@@ -10,6 +10,7 @@ export default gql`
         createdAt
         id
         updatedAt
+        replyTo
       }
     }
   }