From 708c769a3be769b386ccc8bfc06ae33f75f4d17a Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Tue, 4 Jul 2023 21:42:14 +0200
Subject: [PATCH] added chat code as plugin for client rendering

---
 webapp/nuxt.config.js               |  1 +
 webapp/pages/chat.vue               | 54 +++++++++++++----------------
 webapp/plugins/vue-advanced-chat.js |  7 ++++
 3 files changed, 33 insertions(+), 29 deletions(-)
 create mode 100644 webapp/plugins/vue-advanced-chat.js

diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 5c47b9fa3..66a23c191 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -127,6 +127,7 @@ export default {
     { src: '~/plugins/vue-infinite-loading.js', ssr: false },
     { src: '~/plugins/vue-observe-visibility.js', ssr: false },
     { src: '~/plugins/v-mapbox.js', mode: 'client' },
+    { src: '~/plugins/vue-advanced-chat.js', mode: 'client' },
   ],
 
   router: {
diff --git a/webapp/pages/chat.vue b/webapp/pages/chat.vue
index 6c8a72ca8..dd1bedca3 100644
--- a/webapp/pages/chat.vue
+++ b/webapp/pages/chat.vue
@@ -1,34 +1,30 @@
- <script setup>
-import { register } from 'vue-advanced-chat'
-register()
-//  import { register } from 'vue-advanced-chat/dist/vue-advanced-chat.es.js'
-//  window['vue-advanced-chat'].register()
-</script>
 <template>
   <div>
-    <internal-page :pageParams="pageParams" />
-    <vue-advanced-chat
-      :current-user-id="currentUserId"
-      :template-actions="JSON.stringify(templatesText)"
-      :text-messages="JSON.stringify(textMessages)"
-      :menu-actions="JSON.stringify(menuActions)"
-      :rooms="JSON.stringify(rooms)"
-      :messages="JSON.stringify(messages)"
-      :room-actions="JSON.stringify(roomActions)"
-      :rooms-loaded="true"
-      show-files="false"
-      show-audio="false"
-      :show-footer="true"
-      :messages-loaded="messagesLoaded"
-      @send-message="sendMessage($event.detail[0])"
-      @fetch-messages="fetchMessages($event.detail[0])"
-      :theme="theme"
-      :is-device="isDevice"
-      @show-demo-options="showDemoOptions = $event"
-    />
-    <base-button @click="theme = theme === 'light' ? 'dark' : 'light'">
-      change style mode
-    </base-button>
+    <client-only>
+      <internal-page :pageParams="pageParams" />
+      <vue-advanced-chat
+        :current-user-id="currentUserId"
+        :template-actions="JSON.stringify(templatesText)"
+        :text-messages="JSON.stringify(textMessages)"
+        :menu-actions="JSON.stringify(menuActions)"
+        :rooms="JSON.stringify(rooms)"
+        :messages="JSON.stringify(messages)"
+        :room-actions="JSON.stringify(roomActions)"
+        :rooms-loaded="true"
+        show-files="false"
+        show-audio="false"
+        :show-footer="true"
+        :messages-loaded="messagesLoaded"
+        @send-message="sendMessage($event.detail[0])"
+        @fetch-messages="fetchMessages($event.detail[0])"
+        :theme="theme"
+        :is-device="isDevice"
+        @show-demo-options="showDemoOptions = $event"
+      />
+      <base-button @click="theme = theme === 'light' ? 'dark' : 'light'">
+        change style mode
+      </base-button>
+    </client-only>
   </div>
 </template>
 
diff --git a/webapp/plugins/vue-advanced-chat.js b/webapp/plugins/vue-advanced-chat.js
new file mode 100644
index 000000000..6d5187789
--- /dev/null
+++ b/webapp/plugins/vue-advanced-chat.js
@@ -0,0 +1,7 @@
+import { register } from 'vue-advanced-chat'
+export default ({ app }) => {
+    if(process.client){
+        register()
+    }
+}
+