chore: add template for spacer

Author: yaroslav8765

custom/ChatSurface.vue

@@ -254,6 +254,7 @@ onMounted(async () => {
     agentStore.setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault);
   }
   await agentStore.fetchSessionsList();
+  agentStore.setFullScreen(true);
 });
 
 function autoResize() {

custom/CustomAutoScrollContainer.vue

@@ -11,12 +11,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
 import CustomScrollbar from 'custom-vue-scrollbar';
 import 'custom-vue-scrollbar/dist/style.css';
 import { useAgentStore } from './composables/useAgentStore';
 
-const agentStore = useAgentStore();
+const scrollParams = ref({
+  scrollTop: 0,
+  scrollHeight: 0,
+  clientHeight: 0
+});
 
 const props = withDefaults(defineProps<{
   enabled?: boolean
@@ -42,6 +46,9 @@ function isNearBottom(): boolean {
   if (!container) return true
   
   const { scrollTop, scrollHeight, clientHeight } = container
+  scrollParams.value.scrollTop = scrollTop
+  scrollParams.value.scrollHeight = scrollHeight
+  scrollParams.value.clientHeight = clientHeight
   return scrollHeight - scrollTop - clientHeight <= props.threshold
 }
 
@@ -107,6 +114,9 @@ onMounted(() => {
       }
       
       lastScrollHeight = containerRef.value.scrollEl.scrollHeight
+      scrollParams.value.scrollTop = containerRef.value.scrollEl.scrollTop
+      scrollParams.value.scrollHeight = containerRef.value.scrollEl.scrollHeight
+      scrollParams.value.clientHeight = containerRef.value.scrollEl.clientHeight
       if (props.enabled && !isUserScrolledUp.value) {
         scrollToBottom()
       }
@@ -128,7 +138,8 @@ defineExpose({
   scrollToBottom: () => scrollToBottom(true),
   isUserScrolledUp: () => isUserScrolledUp.value,
   container: containerRef,
-  handleScroll
+  handleScroll,
+  scrollParams
 })
 </script>
 

custom/conversation_area/ConversationArea.vue

@@ -51,6 +51,7 @@
         <p>{{ $t('Start the conversation') }}</p>
         <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
       </div>
+      <div></div>
     </CustomAutoScrollContainer>
     <button @click="scrollContainer.scrollToBottom();">
       <IconArrowDownOutline 
@@ -84,6 +85,10 @@ const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const showScrollContainer = ref(true);
 
+const scrollHeight = computed(() => {
+  return scrollContainer.value ? scrollContainer.value.scrollParams.scrollHeight : 0;
+});
+
 function recalculateScroll() {
   if (scrollContainer.value) {
     scrollContainer.value.handleScroll(false);