Fix some annoyances with chat.

src/components/ChatInterface.vue

@@ -5,6 +5,18 @@
       class="col"
       style="flex-grow: 1; overflow-x: visible; overflow-y: auto;"
     >
+      <div class="q-mb-sm q-mx-md">
+        <q-chat-message
+          name="ASSISTANT"
+          bg-color="grey-4"
+          text-color="black"
+        >
+          <div class="message-content">
+            <p>Hi there, I'm StyleAI!<br>How can I help today?</p>
+          </div>
+        </q-chat-message>
+      </div>
+
       <div
         v-for="(message, index) in messages"
         :key="index"

src/layouts/MainLayout.vue

@@ -193,7 +193,7 @@
       :offset="[18, 18]"
     >
       <q-fab
-        v-model="fabOpen"
+        v-model="isChatVisible"
         icon="chat"
         class="bg-theme"
         direction="up"
@@ -204,8 +204,6 @@
     <!-- Chat Window Dialog -->
     <q-dialog
       v-model="isChatVisible"
-      :maximized="$q.screen.lt.sm"
-      style="width: max(400px, 25%);"
     >
       <q-card style="width: max(400px, 25%); height: 600px; max-height: 80vh;">
         <q-bar class="bg-primary text-white">
@@ -274,8 +272,6 @@ const authStore = useAuthStore(); // Use the auth store
 const chatStore = useChatStore();
 const preferencesStore = usePreferencesStore(); // Import the preferences 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);