diff --git a/frontend/package.json b/frontend/package.json
index 482505e4..238d00c0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
"markdown-it": "^14.0.0",
"pinia": "^2.0.33",
"tailwindcss": "^3.2.7",
+ "socket.io-client": "^4.7.2",
"vue": "^3.2.25",
"vue-router": "^4.0.12"
},
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b0fab586..6a9d4d5b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -10,14 +10,10 @@ import { Toasts } from 'frappe-ui'
import { Dialogs } from '@/utils/dialogs'
import { computed, defineAsyncComponent } from 'vue'
import { useScreenSize } from './utils/composables'
+import DesktopLayout from './components/DesktopLayout.vue'
+import MobileLayout from './components/MobileLayout.vue'
const screenSize = useScreenSize()
-const MobileLayout = defineAsyncComponent(() =>
- import('@/components/MobileLayout.vue')
-)
-const DesktopLayout = defineAsyncComponent(() =>
- import('@/components/DesktopLayout.vue')
-)
const Layout = computed(() => {
if (screenSize.width < 640) {
diff --git a/frontend/src/components/DiscussionReplies.vue b/frontend/src/components/DiscussionReplies.vue
new file mode 100644
index 00000000..4a6268e3
--- /dev/null
+++ b/frontend/src/components/DiscussionReplies.vue
@@ -0,0 +1,110 @@
+
+