stock-management-demo/src/layouts/MainLayoutBusted.vue

<template>
  <q-layout view="hHh Lpr lFf">
    <q-drawer
      :mini="!leftDrawerOpen"
      bordered
      persistent
      :model-value="true"
    >
      <q-list>
        <q-item clickable v-ripple @click="toggleLeftDrawer">
          <q-item-section avatar>
            <q-icon name="menu"/>
          </q-item-section>
          <q-item-section>
            <q-item-label class="text-h6">StylePoint</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-ripple :to="{ name: 'formList' }" exact>
          <q-tooltip anchor="center right" self="center left" >
            <span>Forms</span>
          </q-tooltip>
          <q-item-section avatar>
            <q-icon name="list_alt" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Forms</q-item-label>
            <q-item-label caption>View existing forms</q-item-label>
          </q-item-section>
        </q-item>

        <q-item
          clickable
          v-ripple
          :to="{ name: 'mantisSummaries' }"
          exact
        >
          <q-tooltip anchor="center right" self="center left" >
            <span>Mantis Summaries</span>
          </q-tooltip>
          <q-item-section avatar>
            <q-icon name="summarize" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Mantis Summaries</q-item-label>
            <q-item-label caption>View daily summaries</q-item-label>
          </q-item-section>
        </q-item>

        <q-item
          clickable
          v-ripple
          :to="{ name: 'emailSummaries' }"
          exact
        >
          <q-tooltip anchor="center right" self="center left" >
            <span>Email Summaries</span>
          </q-tooltip>
          <q-item-section avatar>
            <q-icon name="email" />
          </q-item-section>
          <q-item-section>
            <q-item-label>Email Summaries</q-item-label>
            <q-item-label caption>View email summaries</q-item-label>
          </q-item-section>
        </q-item>

        <q-item
          clickable
          to="/settings" exact
        >
          <q-tooltip anchor="center right" self="center left" >
            <span>Settings</span>
          </q-tooltip>
          <q-item-section
            avatar
          >
            <q-icon name="settings" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Settings</q-item-label>
            <q-item-label caption>Manage application settings</q-item-label>
          </q-item-section>
        </q-item>

      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

    <!-- Chat FAB -->
    <q-page-sticky v-if="isAuthenticated" position="bottom-right" :offset="[18, 18]">
      <q-fab
        v-model="fabOpen"
        icon="chat"
        color="accent"
        direction="up"
        padding="sm"
        @click="toggleChat"
      />
    </q-page-sticky>

    <!-- Chat Window Dialog -->
    <q-dialog v-model="isChatVisible" :maximized="$q.screen.lt.sm" persistent>
      <q-card style="width: 400px; height: 600px; max-height: 80vh;">
        <q-bar class="bg-primary text-white">
          <div>Chat</div>
          <q-space />
          <q-btn dense flat icon="close" @click="toggleChat" />
        </q-bar>

        <q-card-section class="q-pa-none" style="height: calc(100% - 50px);"> <!-- Adjust height based on q-bar -->
          <ChatInterface
            :messages="chatMessages"
            @send-message="handleSendMessage"
          />
        </q-card-section>
         <q-inner-loading :showing="isLoading">
            <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading>
        <q-banner v-if="chatError" inline-actions class="text-white bg-red">
            {{ chatError }}
            <template v-slot:action>
                <q-btn flat color="white" label="Dismiss" @click="clearError" />
            </template>
        </q-banner>
      </q-card>
    </q-dialog>

  </q-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useQuasar } from 'quasar'
import { useChatStore } from 'stores/chat' // Adjust path as needed
import { useAuthStore } from 'stores/auth' // Import the auth store
import ChatInterface from 'components/ChatInterface.vue' // Adjust path as needed

const $q = useQuasar()
const chatStore = useChatStore()
const authStore = useAuthStore() // Use the auth store

const fabOpen = ref(false) // Local state for FAB animation, not chat visibility

// Computed properties to get state from the store
const isChatVisible = computed(() => chatStore.isChatVisible)
const chatMessages = computed(() => chatStore.chatMessages)
const isLoading = computed(() => chatStore.isLoading)
const chatError = computed(() => chatStore.error)
const isAuthenticated = computed(() => authStore.isAuthenticated) // Get auth state

// Method to toggle chat visibility via the store action
const toggleChat = () => {
  // Optional: Add an extra check here if needed, though hiding the button is primary
  if (isAuthenticated.value) {
    chatStore.toggleChat()
  }
}

// Method to send a message via the store action
const handleSendMessage = (messageContent) => {
  chatStore.sendMessage(messageContent)
}

// Method to clear errors in the store (optional)
const clearError = () => {
    chatStore.error = null; // Directly setting ref or add an action in store
}

</script>

<style scoped>
/* Add any specific styles for the layout or chat window here */
.q-dialog .q-card {
  overflow: hidden; /* Prevent scrollbars on the card itself */
}
</style>