diff --git a/components/ChatZone.vue b/components/ChatZone.vue
new file mode 100644
index 0000000..f928ed7
--- /dev/null
+++ b/components/ChatZone.vue
@@ -0,0 +1,259 @@
+<template>
+  <div v-if="dialog.length">
+        <!-- <hr class="my-6 border-neutral-300"> -->
+        <div class="px-4 pt-6 pb-4 bg-white shadow-md rounded space-y-3">
+          <div class="flex flex-col space-y-6 pb-4">
+            <div
+              v-for="(item, i) in dialog"
+              :key="i"
+              class="chat-balloon space-y-2"
+              :class="{ 'bg-pink-800': item.error }"
+              @mouseover="
+                showResponseMenu = true;
+                hovered = i;
+              "
+              @mouseleave="showResponseMenu = false"
+            >
+              <div class="flex space-x-3 justify-between">
+                <p class="text-xs">{{ item.who }}</p>
+                <div class="chat-balloon-status" :class="{ busy: isBusy && i === dialog.length - 1 }"></div>
+              </div>
+              <div class="break-words rich-text" v-html="formatResponse(item.message, responseFormat)"></div>
+              <!--MENU CONTESTUALE-->
+              <div
+                v-if="canSeeDocs && i === dialog.length - 1 && showResponseMenu && hovered === i"
+                class="px-2 py-0.5 absolute -bottom-5 right-4 z-50 bg-neutral-700 rounded-full flex flex-row"
+              >
+                <div
+                  class="px-1.5 pb-1 hover:bg-neutral-600 hover:rounded-full hover:cursor-pointer"
+                  :title="$t('SHOW_DOCUMENTS_FOUND')"
+                  @click="$openModal('ChatDocuments', { session_id: sessionId, documents: docs })"
+                >
+                  <Icon name="fluent:document-question-mark-16-regular"></Icon>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="space-y-4">
+        <div class="flex space-x-4">
+          <input
+            ref="input"
+            v-model.trim="prompt"
+            type="text"
+            class="grow text-lg p-2 rounded border border-sky-500 disabled:bg-neutral-100 disabled:border-neutral-300 shadow-md disabled:shadow-none"
+            :disabled="isBusy || messagesLeft == '0'"
+            @keydown.enter="submit"
+          />
+          <button class="px-6 button shadow-md disabled:shadow-none" :disabled="isBusy || messagesLeft == '0'" @click="submit">
+            <span class="sm:hidden">›</span>
+            <span class="hidden sm:inline">{{ $t('SEND') }}</span>
+          </button>
+        </div>
+        <slot name="messageCounter"></slot>
+      </div>
+</template>
+
+<script setup lang="ts">
+const { $openModal } = useNuxtApp();
+const config = useRuntimeConfig();
+const { formatResponse, llmResponseFormat } = useResponseFormat();
+const props = defineProps([
+  'isDemoChatbot',
+  'messagesLeft',
+  'collection'
+]);
+const emit = defineEmits(['updateLeft']);
+
+interface DialogItem {
+  who: string;
+  message: string;
+  error: boolean;
+}
+
+const { t } = useI18n();
+
+
+const isBusy = ref(false);
+const prompt = ref('');
+const input = ref<HTMLElement | null>(null);
+const dialog = ref<DialogItem[]>([]);
+const docs = ref<any>([]);
+const historyId = ref('');
+const canSeeDocs = ref(false);
+let docsJsonString = '';
+let responseEnded = false;
+let currIdx = 0;
+
+const hovered = ref(-1);
+const showResponseMenu = ref(true);
+
+let sessionId = '';
+let collectionName = '';
+const responseFormat = ref('text');
+
+onBeforeMount(async () => {
+  collectionName = props.collection.name;
+  responseFormat.value = llmResponseFormat(props.collection.cmetadata?.qa_completion_llm);
+  sessionId = crypto.randomUUID();
+  isBusy.value = false;
+  updateLeftMessages();
+});
+
+watch(isBusy, (val) => {
+  if (!val) {
+    setTimeout(() => {
+      input.value?.focus();
+    }, 100);
+  }
+});
+
+// methods
+const formatDialogItem = (who: string, message: string, error = false): DialogItem => {
+  return {
+    who,
+    message,
+    error,
+  };
+};
+
+const submit = async () => {
+  if (!prompt.value) return;
+
+  isBusy.value = true;
+
+  dialog.value.push(formatDialogItem('YOU', prompt.value));
+  dialog.value.push(formatDialogItem('BREVIA', ''));
+
+  currIdx = dialog.value.length - 1;
+
+  try {
+    await streamingFetchRequest();
+    isBusy.value = false;
+  } catch (error) {
+    isBusy.value = false;
+    showErrorInDialog(currIdx);
+    console.log(error);
+  }
+};
+
+const streamingFetchRequest = async () => {
+  const question = prompt.value;
+  prompt.value = '';
+  docs.value = [];
+  historyId.value = '';
+  docsJsonString = '';
+  responseEnded = false;
+  canSeeDocs.value = false;
+
+  const response = await fetch('/api/brevia/chat', {
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+      'X-Chat-Session': sessionId,
+    },
+    body: JSON.stringify({
+      question,
+      collection: collectionName,
+      source_docs: true,
+      streaming: true,
+    }),
+  });
+
+  const reader = response?.body?.getReader();
+  if (reader) {
+    for await (const chunk of readChunks(reader)) {
+      const text = new TextDecoder().decode(chunk);
+      handleStreamText(text);
+    }
+    parseDocsJson();
+    if(props.isDemoChatbot) await updateLeftMessages();
+  }
+  if(props.isDemoChatbot) await updateLeftMessages();
+};
+
+const readChunks = (reader: ReadableStreamDefaultReader) => {
+  return {
+    async *[Symbol.asyncIterator]() {
+      let readResult = await reader.read();
+      while (!readResult.done) {
+        yield readResult.value;
+        readResult = await reader.read();
+      }
+    },
+  };
+};
+
+const handleStreamText = (text: string) => {
+  if (text.includes('[{"chat_history_id":') || text.includes('[{"page_content":')) {
+    const idx1 = text.indexOf('[{"chat_history_id":');
+    const idx2 = text.indexOf('[{"page_content":');
+    const idx = Math.max(idx1, idx2);
+    dialog.value[currIdx].message += text.slice(0, idx);
+    responseEnded = true;
+    docsJsonString += text.slice(idx);
+  } else if (responseEnded) {
+    docsJsonString += text;
+  } else if (text.startsWith('{"error":')) {
+    try {
+      const err = JSON.parse(text);
+      console.error(`Error response from API "${err?.error}"`);
+      showErrorInDialog(currIdx);
+    } catch (e) {
+      return console.error(e);
+    }
+  } else {
+    dialog.value[currIdx].message += text;
+  }
+};
+
+const parseDocsJson = () => {
+  try {
+    if (!docsJsonString) {
+      console.error('No docs found in response');
+      dialog.value[currIdx].error = true;
+      return;
+    }
+    const parsed = JSON.parse(docsJsonString);
+    if (parsed?.[0]?.chat_history_id) {
+      const item = parsed?.shift() || {};
+      historyId.value = item?.chat_history_id || '';
+    }
+    docs.value = parsed;
+    canSeeDocs.value = true;
+  } catch (e) {
+    return console.error(e);
+  }
+};
+
+const showErrorInDialog = (index: number) => {
+  const dialogItem = formatDialogItem('BREVIA', t('SOMETHING_WENT_WRONG'), true);
+
+  if (index) {
+    dialog.value[index] = dialogItem;
+    return;
+  }
+
+  dialog.value.push(dialogItem);
+};
+
+const updateLeftMessages = async () => {
+  if (!props.isDemoChatbot) {
+    return;
+  }
+
+  const today = new Date().toISOString().substring(0, 10);
+  const query = `min_date=${today}&collection=${props.collection.name}`;
+  try {
+    const response = await fetch(`/api/brevia/chat_history?${query}`);
+    const data = await response.json();
+    const numItems = data?.meta?.pagination?.count || 0;
+    const left = Math.max(0, parseInt(config.public.demo.maxChatMessages) - parseInt(numItems));
+    emit('updateLeft', left);
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+</script>
diff --git a/pages/chatbot-iframe/[uuid].vue b/pages/chatbot-iframe/[uuid].vue
index 6688037..6f96146 100644
--- a/pages/chatbot-iframe/[uuid].vue
+++ b/pages/chatbot-iframe/[uuid].vue
@@ -8,83 +8,19 @@
         </div>
       </div>
 
-      <div v-if="dialog.length">
-        <!-- <hr class="my-6 border-neutral-300"> -->
-        <div class="px-4 pt-6 pb-4 bg-white shadow-md rounded space-y-3">
-          <div class="flex flex-col space-y-6 pb-4">
-            <div
-              v-for="(item, i) in dialog"
-              :key="i"
-              class="chat-balloon space-y-2"
-              :class="{ 'bg-pink-800': item.error }"
-              @mouseover="
-                showResponseMenu = true;
-                hovered = i;
-              "
-              @mouseleave="showResponseMenu = false"
-            >
-              <div class="flex space-x-3 justify-between">
-                <p class="text-xs">{{ item.who }}</p>
-                <div class="chat-balloon-status" :class="{ busy: isBusy && i === dialog.length - 1 }"></div>
-              </div>
-              <div class="break-words rich-text" v-html="formatResponse(item.message, responseFormat)"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="space-y-4">
-        <div class="flex space-x-4">
-          <input
-            ref="input"
-            v-model.trim="prompt"
-            type="text"
-            class="grow text-lg p-2 rounded border border-sky-500 disabled:bg-neutral-100 disabled:border-neutral-300 shadow-md disabled:shadow-none"
-            :disabled="isBusy || messagesLeft == '0'"
-            @keydown.enter="submit"
-          />
-          <button class="px-6 button shadow-md disabled:shadow-none" :disabled="isBusy || messagesLeft == '0'" @click="submit">
-            <span class="sm:hidden">›</span>
-            <span class="hidden sm:inline">{{ $t('SEND') }}</span>
-          </button>
-        </div>
-      </div>
+      <ChatZone :collection :is-demo-chatbot="false" />
     </div>
   </main>
 </template>
 
 <script lang="ts" setup>
-// const config = useRuntimeConfig();
-// const store = useStatesStore();
-const { formatResponse, llmResponseFormat } = useResponseFormat();
-
-interface DialogItem {
-  who: string;
-  message: string;
-  error: boolean;
-}
-
 const { t } = useI18n();
 
 const collection = ref<{ name?: string; uuid?: string; cmetadata?: any }>({});
 const isBusy = ref(false);
-const prompt = ref('');
 const input = ref<HTMLElement | null>(null);
-const dialog = ref<DialogItem[]>([]);
-const docs = ref<any>([]);
-const historyId = ref('');
-const canSeeDocs = ref(false);
-let docsJsonString = '';
-let responseEnded = false;
-let currIdx = 0;
-
-// const isDemo = ref(store.userHasRole('demo'));
-const messagesLeft = ref('');
-const hovered = ref(-1);
-const showResponseMenu = ref(true);
 
 let sessionId = '';
-const responseFormat = ref('text');
 
 onBeforeMount(async () => {
   const route = useRoute();
@@ -101,10 +37,8 @@ onBeforeMount(async () => {
     });
   }
 
-  responseFormat.value = llmResponseFormat(collection.value.cmetadata?.qa_completion_llm);
   sessionId = crypto.randomUUID();
   isBusy.value = false;
-  // updateLeftMessages();
 });
 
 watch(isBusy, (val) => {
@@ -115,150 +49,4 @@ watch(isBusy, (val) => {
   }
 });
 
-// methods
-const formatDialogItem = (who: string, message: string, error = false): DialogItem => {
-  return {
-    who,
-    message,
-    error,
-  };
-};
-
-const submit = async () => {
-  if (!prompt.value) return;
-
-  isBusy.value = true;
-
-  dialog.value.push(formatDialogItem('YOU', prompt.value));
-  dialog.value.push(formatDialogItem('BREVIA', ''));
-
-  currIdx = dialog.value.length - 1;
-
-  try {
-    await streamingFetchRequest();
-    isBusy.value = false;
-  } catch (error) {
-    isBusy.value = false;
-    showErrorInDialog(currIdx);
-    console.log(error);
-  }
-};
-
-const streamingFetchRequest = async () => {
-  const question = prompt.value;
-  prompt.value = '';
-  docs.value = [];
-  historyId.value = '';
-  docsJsonString = '';
-  responseEnded = false;
-  canSeeDocs.value = false;
-
-  const response = await fetch('/api/brevia/chat', {
-    method: 'POST',
-    headers: {
-      'Content-type': 'application/json',
-      'X-Chat-Session': sessionId,
-    },
-    body: JSON.stringify({
-      question,
-      collection: collection.value.name,
-      source_docs: true,
-      streaming: true,
-    }),
-  });
-
-  const reader = response?.body?.getReader();
-  if (reader) {
-    for await (const chunk of readChunks(reader)) {
-      const text = new TextDecoder().decode(chunk);
-      handleStreamText(text);
-    }
-    parseDocsJson();
-    // await updateLeftMessages();
-  }
-  // await updateLeftMessages();
-};
-
-const readChunks = (reader: ReadableStreamDefaultReader) => {
-  return {
-    async *[Symbol.asyncIterator]() {
-      let readResult = await reader.read();
-      while (!readResult.done) {
-        yield readResult.value;
-        readResult = await reader.read();
-      }
-    },
-  };
-};
-
-const handleStreamText = (text: string) => {
-  if (text.includes('[{"chat_history_id":') || text.includes('[{"page_content":')) {
-    const idx1 = text.indexOf('[{"chat_history_id":');
-    const idx2 = text.indexOf('[{"page_content":');
-    const idx = Math.max(idx1, idx2);
-    dialog.value[currIdx].message += text.slice(0, idx);
-    responseEnded = true;
-    docsJsonString += text.slice(idx);
-  } else if (responseEnded) {
-    docsJsonString += text;
-  } else if (text.startsWith('{"error":')) {
-    try {
-      const err = JSON.parse(text);
-      console.error(`Error response from API "${err?.error}"`);
-      showErrorInDialog(currIdx);
-    } catch (e) {
-      return console.error(e);
-    }
-  } else {
-    dialog.value[currIdx].message += text;
-  }
-};
-
-const parseDocsJson = () => {
-  try {
-    if (!docsJsonString) {
-      console.error('No docs found in response');
-      dialog.value[currIdx].error = true;
-      return;
-    }
-    const parsed = JSON.parse(docsJsonString);
-    if (parsed?.[0]?.chat_history_id) {
-      const item = parsed?.shift() || {};
-      historyId.value = item?.chat_history_id || '';
-    }
-    docs.value = parsed;
-    canSeeDocs.value = true;
-  } catch (e) {
-    return console.error(e);
-  }
-};
-
-const showErrorInDialog = (index: number) => {
-  const dialogItem = formatDialogItem('BREVIA', t('SOMETHING_WENT_WRONG'), true);
-
-  if (index) {
-    dialog.value[index] = dialogItem;
-    return;
-  }
-
-  dialog.value.push(dialogItem);
-};
-
-// const updateLeftMessages = async () => {
-//   if (!isDemo.value) {
-//     return;
-//   }
-
-//   const today = new Date().toISOString().substring(0, 10);
-//   const query = `min_date=${today}&collection=${collection.value?.name}`;
-//   try {
-//     const response = await fetch(`/api/brevia/chat_history?${query}`);
-//     const data = await response.json();
-//     const numItems = data?.meta?.pagination?.count || 0;
-//     const left = Math.max(0, parseInt(config.public.demo.maxChatMessages) - parseInt(numItems));
-//     messagesLeft.value = String(left);
-//   } catch (error) {
-//     console.log(error);
-//   }
-// };
 </script>
diff --git a/pages/chatbot/[id].vue b/pages/chatbot/[id].vue
index bc15701..8cf4058 100644
--- a/pages/chatbot/[id].vue
+++ b/pages/chatbot/[id].vue
@@ -23,62 +23,9 @@
         </div>
       </div>
 
-      <div v-if="dialog.length">
-        <!-- <hr class="my-6 border-neutral-300"> -->
-        <div class="px-4 pt-6 pb-4 bg-white shadow-md rounded space-y-3">
-          <div class="flex flex-col space-y-6 pb-4">
-            <div
-              v-for="(item, i) in dialog"
-              :key="i"
-              class="chat-balloon space-y-2"
-              :class="{ 'bg-pink-800': item.error }"
-              @mouseover="
-                showResponseMenu = true;
-                hovered = i;
-              "
-              @mouseleave="showResponseMenu = false"
-            >
-              <div class="flex space-x-3 justify-between">
-                <p class="text-xs">{{ item.who }}</p>
-                <div class="chat-balloon-status" :class="{ busy: isBusy && i === dialog.length - 1 }"></div>
-              </div>
-              <div class="break-words rich-text" v-html="formatResponse(item.message, responseFormat)"></div>
-              <!--MENU CONTESTUALE-->
-              <div
-                v-if="canSeeDocs && i === dialog.length - 1 && showResponseMenu && hovered === i"
-                class="px-2 py-0.5 absolute -bottom-5 right-4 z-50 bg-neutral-700 rounded-full flex flex-row"
-              >
-                <div
-                  class="px-1.5 pb-1 hover:bg-neutral-600 hover:rounded-full hover:cursor-pointer"
-                  :title="$t('SHOW_DOCUMENTS_FOUND')"
-                  @click="$openModal('ChatDocuments', { session_id: sessionId, documents: docs })"
-                >
-                  <Icon name="fluent:document-question-mark-16-regular"></Icon>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="space-y-4">
-        <div class="flex space-x-4">
-          <input
-            ref="input"
-            v-model.trim="prompt"
-            type="text"
-            class="grow text-lg p-2 rounded border border-sky-500 disabled:bg-neutral-100 disabled:border-neutral-300 shadow-md disabled:shadow-none"
-            :disabled="isBusy || messagesLeft == '0'"
-            @keydown.enter="submit"
-          />
-
-          <button class="px-6 button shadow-md disabled:shadow-none" :disabled="isBusy || messagesLeft == '0'" @click="submit">
-            <span class="sm:hidden">›</span>
-            <span class="hidden sm:inline">{{ $t('SEND') }}</span>
-          </button>
-        </div>
-
-        <div v-if="isDemo" class="flex space-x-4">
+      <ChatZone :collection :isDemoChatbot="isDemo" :messagesLeft @updateLeft="updateLeftMessages">
+        <template v-slot:messageCounter>
+          <div v-if="isDemo" class="flex space-x-4">
           <span class="grow text-lg">{{ $t('MESSAGES_LEFT') }}: {{ messagesLeft }}</span>
         </div>
 
@@ -87,46 +34,29 @@
             {{ $t('NO_MORE_CHAT_MESSAGES') }}
           </div>
         </div>
-      </div>
+        </template>
+      </ChatZone>
+
     </div>
   </main>
 </template>
 
 <script lang="ts" setup>
+import { ItemEditLevel } from '#imports';
+
 const config = useRuntimeConfig();
 const store = useStatesStore();
-const { formatResponse, llmResponseFormat } = useResponseFormat();
 useHead({ title: `Chatbot | ${config.public.appName}` });
-
-interface DialogItem {
-  who: string;
-  message: string;
-  error: boolean;
-}
-
 const { t } = useI18n();
 
 const collection = ref<{ name?: string; uuid?: string; cmetadata?: any }>({});
 const isBusy = ref(false);
-const prompt = ref('');
 const input = ref<HTMLElement | null>(null);
-const dialog = ref<DialogItem[]>([]);
-const docs = ref<any>([]);
-const historyId = ref('');
-const canSeeDocs = ref(false);
-let docsJsonString = '';
-let responseEnded = false;
-let currIdx = 0;
-
 const isDemo = ref(store.userHasRole('demo'));
 const messagesLeft = ref('');
-const hovered = ref(-1);
-const showResponseMenu = ref(true);
 
-let sessionId = '';
 let collectionName = '';
 let editLevel = ItemEditLevel.None;
-const responseFormat = ref('text');
 
 onBeforeMount(async () => {
   const route = useRoute();
@@ -150,10 +80,7 @@ onBeforeMount(async () => {
     });
   }
 
-  responseFormat.value = llmResponseFormat(collection.value.cmetadata?.qa_completion_llm);
-  sessionId = crypto.randomUUID();
   isBusy.value = false;
-  updateLeftMessages();
 });
 
 watch(isBusy, (val) => {
@@ -164,150 +91,5 @@ watch(isBusy, (val) => {
   }
 });
 
-// methods
-const formatDialogItem = (who: string, message: string, error = false): DialogItem => {
-  return {
-    who,
-    message,
-    error,
-  };
-};
-
-const submit = async () => {
-  if (!prompt.value) return;
-
-  isBusy.value = true;
-
-  dialog.value.push(formatDialogItem('YOU', prompt.value));
-  dialog.value.push(formatDialogItem('BREVIA', ''));
-
-  currIdx = dialog.value.length - 1;
-
-  try {
-    await streamingFetchRequest();
-    isBusy.value = false;
-  } catch (error) {
-    isBusy.value = false;
-    showErrorInDialog(currIdx);
-    console.log(error);
-  }
-};
-
-const streamingFetchRequest = async () => {
-  const question = prompt.value;
-  prompt.value = '';
-  docs.value = [];
-  historyId.value = '';
-  docsJsonString = '';
-  responseEnded = false;
-  canSeeDocs.value = false;
-
-  const response = await fetch('/api/brevia/chat', {
-    method: 'POST',
-    headers: {
-      'Content-type': 'application/json',
-      'X-Chat-Session': sessionId,
-    },
-    body: JSON.stringify({
-      question,
-      collection: collectionName,
-      source_docs: true,
-      streaming: true,
-    }),
-  });
-
-  const reader = response?.body?.getReader();
-  if (reader) {
-    for await (const chunk of readChunks(reader)) {
-      const text = new TextDecoder().decode(chunk);
-      handleStreamText(text);
-    }
-    parseDocsJson();
-    await updateLeftMessages();
-  }
-  await updateLeftMessages();
-};
-
-const readChunks = (reader: ReadableStreamDefaultReader) => {
-  return {
-    async *[Symbol.asyncIterator]() {
-      let readResult = await reader.read();
-      while (!readResult.done) {
-        yield readResult.value;
-        readResult = await reader.read();
-      }
-    },
-  };
-};
-
-const handleStreamText = (text: string) => {
-  if (text.includes('[{"chat_history_id":') || text.includes('[{"page_content":')) {
-    const idx1 = text.indexOf('[{"chat_history_id":');
-    const idx2 = text.indexOf('[{"page_content":');
-    const idx = Math.max(idx1, idx2);
-    dialog.value[currIdx].message += text.slice(0, idx);
-    responseEnded = true;
-    docsJsonString += text.slice(idx);
-  } else if (responseEnded) {
-    docsJsonString += text;
-  } else if (text.startsWith('{"error":')) {
-    try {
-      const err = JSON.parse(text);
-      console.error(`Error response from API "${err?.error}"`);
-      showErrorInDialog(currIdx);
-    } catch (e) {
-      return console.error(e);
-    }
-  } else {
-    dialog.value[currIdx].message += text;
-  }
-};
-
-const parseDocsJson = () => {
-  try {
-    if (!docsJsonString) {
-      console.error('No docs found in response');
-      dialog.value[currIdx].error = true;
-      return;
-    }
-    const parsed = JSON.parse(docsJsonString);
-    if (parsed?.[0]?.chat_history_id) {
-      const item = parsed?.shift() || {};
-      historyId.value = item?.chat_history_id || '';
-    }
-    docs.value = parsed;
-    canSeeDocs.value = true;
-  } catch (e) {
-    return console.error(e);
-  }
-};
-
-const showErrorInDialog = (index: number) => {
-  const dialogItem = formatDialogItem('BREVIA', t('SOMETHING_WENT_WRONG'), true);
-
-  if (index) {
-    dialog.value[index] = dialogItem;
-    return;
-  }
-
-  dialog.value.push(dialogItem);
-};
-
-const updateLeftMessages = async () => {
-  if (!isDemo.value) {
-    return;
-  }
-
-  const today = new Date().toISOString().substring(0, 10);
-  const query = `min_date=${today}&collection=${collection.value?.name}`;
-  try {
-    const response = await fetch(`/api/brevia/chat_history?${query}`);
-    const data = await response.json();
-    const numItems = data?.meta?.pagination?.count || 0;
-    const left = Math.max(0, parseInt(config.public.demo.maxChatMessages) - parseInt(numItems));
-    messagesLeft.value = String(left);
-  } catch (error) {
-    console.log(error);
-  }
-};
+const updateLeftMessages = (left: number)  => messagesLeft.value = String(left);
 </script>