feat: Creates pop out reply box (#2832)

* enhancement: Creates draggable pop out replay box

* Review fixes

* Minor fixes

* codeclimate fixes

* Update z-index.scss

* Minor fixes

* Review fixes

* Minor fixes

* Update MessagesView.vue

* Review fixes

* Review fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -26,6 +26,24 @@
         </span>
       </div>
     </div>
+    <woot-button
+      v-if="popoutReplyBox"
+      variant="clear"
+      size="large"
+      icon="ion-android-close"
+      color-scheme="secondary"
+      class-names="popout-button"
+      @click="$emit('click')"
+    />
+    <woot-button
+      v-else
+      variant="clear"
+      size="large"
+      icon="ion-arrow-resize"
+      color-scheme="secondary"
+      class-names="popout-button"
+      @click="$emit('click')"
+    />
   </div>
 </template>
 
@@ -60,6 +78,10 @@ export default {
       type: Number,
       default: () => 0,
     },
+    popoutReplyBox: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     replyButtonClass() {
@@ -167,4 +189,11 @@ export default {
     color: var(--s-600);
   }
 }
+
+.popout-button {
+  display: flex;
+  justify-content: flex-end;
+  height: auto;
+  padding-right: var(--space-normal);
+}
 </style>