Quoted message

src/components/Inbox/Message.tsx

@@ -40,6 +40,9 @@ const Message = (props: Props) => {
           <div innerHTML={md.render(props.content.body)} />
         </div>
       </div>
+      <Show when={props.content.replyTo}>
+        <small>Repl to {props.content.replyTo}</small>
+      </Show>
       <div class={styles.time}>{formattedTime(props.content.createdAt)}</div>
     </div>
   )

src/components/Inbox/QuotedMessage.module.scss

@@ -0,0 +1,33 @@
+.QuotedMessage {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-top: 2px solid #ccc;
+  padding: 12px 0;
+  gap: 12px;
+  font-size: 14px;
+
+  .icon {
+    width: 40px;
+    height: 40px;
+
+    &.cancel {
+      cursor: pointer;
+    }
+  }
+
+  .body {
+    flex-grow: 1;
+    overflow: hidden;
+
+    .author {
+      font-weight: 600;
+    }
+
+    .quote {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}

src/components/Inbox/QuotedMessage.tsx

@@ -0,0 +1,33 @@
+import { Show } from 'solid-js'
+import styles from './QuotedMessage.module.scss'
+import { Icon } from '../_shared/Icon'
+import { clsx } from 'clsx'
+
+type QuotedMessage = {
+  body: string
+  cancel?: () => void
+  author?: string
+}
+
+const QuotedMessage = (props: QuotedMessage) => {
+  return (
+    <div class={styles.QuotedMessage}>
+      <div class={styles.icon}>
+        <Icon name="chat-reply" />
+      </div>
+      <div class={styles.body}>
+        <Show when={props.author}>
+          <div class={styles.author}>{props.author}</div>
+        </Show>
+        <div class={styles.quote}>{props.body}</div>
+      </div>
+      <Show when={props.cancel}>
+        <div class={clsx(styles.cancel, styles.icon)} onClick={props.cancel}>
+          <Icon name="close-gray" />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default QuotedMessage

src/components/Views/Inbox.tsx

@@ -17,6 +17,7 @@ import MessagesFallback from '../Inbox/MessagesFallback'
 import { useRouter } from '../../stores/router'
 import { clsx } from 'clsx'
 import styles from '../../styles/Inbox.module.scss'
+import QuotedMessage from '../Inbox/QuotedMessage'
 
 const userSearch = (array: Author[], keyword: string) => {
   const searchTerm = keyword.toLowerCase()
@@ -79,10 +80,12 @@ export const InboxView = () => {
     try {
       const post = await apiClient.createMessage({
         body: postMessageText().toString(),
-        chat: currentDialog().id.toString()
+        chat: currentDialog().id.toString(),
+        replyTo: messageToReply()?.id
       })
       setMessages((prev) => [...prev, post.message])
       setPostMessageText('')
+      setMessageToReply(null)
       chatWindow.scrollTop = chatWindow.scrollHeight
     } catch (error) {
       console.error('[post message error]:', error)
@@ -98,10 +101,10 @@ export const InboxView = () => {
   const urlParams = new URLSearchParams(window.location.search)
   const params = Object.fromEntries(urlParams)
   createEffect(async () => {
-    console.log('!!! postMessageText:', postMessageText())
     if (textareaParent) {
       textareaParent.dataset.replicatedValue = postMessageText()
     }
+    console.log('!!! messages:', messages())
     if (params['initChat']) {
       try {
         const newChat = await actions.createChat([Number(params['initChat'])], '')
@@ -231,24 +234,14 @@ export const InboxView = () => {
 
             <div class={styles.messageForm}>
               <Show when={messageToReply()}>
-                <div class={styles.reply}>
+                <QuotedMessage
-                  <div class={styles.icon}>
+                  author={
-                    <Icon name="chat-reply" />
+                    currentDialog().members.find((member) => member.id === Number(messageToReply().author))
-                  </div>
+                      .name
-                  <div class={styles.body}>
+                  }
-                    <div class={styles.author}>
+                  body={messageToReply().body}
-                      {
+                  cancel={() => setMessageToReply(undefined)}
-                        currentDialog().members.find(
+                />
-                          (member) => member.id === Number(messageToReply().author)
-                        ).name
-                      }
-                    </div>
-                    <div class={styles.quote}>{messageToReply().body}</div>
-                  </div>
-                  <div class={clsx(styles.cancel, styles.icon)} onClick={() => setMessageToReply(null)}>
-                    <Icon name="close-gray" />
-                  </div>
-                </div>
               </Show>
               <div class={styles.wrapper}>
                 <div class={styles.growWrap} ref={textareaParent}>

src/graphql/mutation/create-chat-message.ts

@@ -1,8 +1,8 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  mutation createMessage($chat: String!, $body: String!) {
+  mutation createMessage($chat: String!, $body: String!, $replyTo: Int) {
-    createMessage(chat: $chat, body: $body) {
+    createMessage(chat: $chat, body: $body, replyTo: $replyTo) {
       error
       message {
         id

src/styles/Inbox.module.scss

@@ -131,40 +131,6 @@ main {
   background: #fff;
   padding: 2px 0 12px;
 
-  .reply {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border-top: 2px solid #ccc;
-    padding: 12px 0;
-    gap: 12px;
-    font-size: 14px;
-
-    .icon {
-      width: 40px;
-      height: 40px;
-
-      &.cancel {
-        cursor: pointer;
-      }
-    }
-
-    .body {
-      flex-grow: 1;
-      overflow: hidden;
-
-      .author {
-        font-weight: 600;
-      }
-
-      .quote {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
   .wrapper {
     border: 2px solid #ccc;
     border-radius: 16px;