Show reply in message box

public/icons/close-gray.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 18.4444L25.4444 13L27 14.5556L21.5556 20L27 25.4444L25.4444 27L20 21.5556L14.5556 27L13 25.4444L18.4444 20L13 14.5556L14.5556 13L20 18.4444Z" fill="#9FA1A7"/>
+</svg>

src/components/Inbox/Message.tsx

@@ -11,6 +11,7 @@ type Props = {
   content: Message
   ownId: number
   members: ChatMember[]
+  replyClick?: () => void
 }
 
 const md = new MarkdownIt({
@@ -31,7 +32,9 @@ const Message = (props: Props) => {
       <div class={styles.body}>
         <div class={styles.text}>
           <div class={styles.actions}>
+            <div onClick={props.replyClick}>
               <Icon name="chat-reply" class={styles.reply} />
+            </div>
             <Icon name="menu" />
           </div>
           <div innerHTML={md.render(props.content.body)} />

src/components/Views/Inbox.tsx

@@ -17,6 +17,7 @@ import DialogHeader from '../Inbox/DialogHeader'
 import { apiClient } from '../../utils/apiClient'
 import MessagesFallback from '../Inbox/MessagesFallback'
 import { useRouter } from '../../stores/router'
+import styles from '../Inbox/Message.module.scss'
 
 const userSearch = (array: Author[], keyword: string) => {
   const searchTerm = keyword.toLowerCase()
@@ -36,6 +37,7 @@ export const InboxView = () => {
   const [sortByGroup, setSortByGroup] = createSignal<boolean>(false)
   const [sortByPerToPer, setSortByPerToPer] = createSignal<boolean>(false)
   const [currentDialog, setCurrentDialog] = createSignal<Chat>()
+  const [messageToReply, setMessageToReply] = createSignal<MessageType | null>(null)
   const { session } = useSession()
   const currentUserId = createMemo(() => session()?.user.id)
   // Поиск по диалогам
@@ -97,6 +99,7 @@ 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()
     }
@@ -212,7 +215,12 @@ export const InboxView = () => {
               <div class="conversation__messages-container" ref={chatWindow}>
                 <For each={messages()}>
                   {(message) => (
-                    <Message content={message} ownId={currentUserId()} members={currentDialog().members} />
+                    <Message
+                      content={message}
+                      ownId={currentUserId()}
+                      members={currentDialog().members}
+                      replyClick={() => setMessageToReply(message)}
+                    />
                   )}
                 </For>
 
@@ -223,6 +231,26 @@ export const InboxView = () => {
             </div>
 
             <div class="message-form">
+              <Show when={messageToReply()}>
+                <div class="reply">
+                  <div class="icon">
+                    <Icon name="chat-reply" class={styles.reply} />
+                  </div>
+                  <div class="body">
+                    <div class="author">
+                      {
+                        currentDialog().members.find(
+                          (member) => member.id === Number(messageToReply().author)
+                        ).name
+                      }
+                    </div>
+                    <div class="quote">{messageToReply().body}</div>
+                  </div>
+                  <div class="cancel icon" onClick={() => setMessageToReply(null)}>
+                    <Icon name="close-gray" />
+                  </div>
+                </div>
+              </Show>
               <div class="wrapper">
                 <div class="grow-wrap" ref={textareaParent}>
                   <textarea

src/styles/Inbox.scss

@@ -137,6 +137,40 @@ 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;
@@ -150,8 +184,9 @@ main {
       width: 100%;
 
       &::after {
-        content: attr(data-replicated-value) ' ';
+        content: attr(data-replicated-value);
         white-space: pre-wrap;
+        word-wrap: break-word;
         visibility: hidden;
         transition: height 1.3s ease-in-out;
       }