Adds in AI chatting system.

src/layouts/MainLayoutBusted.vue

@@ -0,0 +1,181 @@
+<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>