feat(app): enhance theme support and improve PWA integration

- Updated the app to support light and dark themes with appropriate CSS classes.
- Enhanced PWA configuration with manifest details and caching strategies.
- Improved the chat UI with dynamic theme adjustments for various components.
- Added new meta tags for better mobile web app experience.
- Refactored environment variables to include new Anthropic token.
- Updated package dependencies for better compatibility and performance.

Made-with: Cursor

packages/app/src/components/widget/AIUIWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="currentTheme">
     <WidgetFab
       :is-open="isOpen"
       :position="fabPosition"
@@ -16,9 +16,12 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useTheme } from '@/composables/useTheme'
 import WidgetFab from './WidgetFab.vue'
 import WidgetModal from './WidgetModal.vue'
 
+const { currentTheme } = useTheme()
+
 const isOpen = ref(false)
 const side = ref<'left' | 'right'>('right')
 

packages/app/src/components/widget/WidgetModal.vue

@@ -4,11 +4,13 @@
       <div
         v-if="isOpen"
         class="fixed z-40 animate-scale-in"
-        :class="positionClasses"
+        :class="[positionClasses, currentTheme]"
       >
         <div
           class="w-[380px] h-[600px] md:w-[420px] md:h-[640px] glass-card overflow-hidden"
-          :style="{ boxShadow: '0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(247, 147, 26, 0.06)' }"
+          :style="isDark
+            ? 'box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(247, 147, 26, 0.06)'
+            : 'box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 40px rgba(247, 147, 26, 0.04)'"
         >
           <ChatWindow
             variant="modal"
@@ -25,6 +27,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useTheme } from '@/composables/useTheme'
 import ChatWindow from '@/components/chat/ChatWindow.vue'
 
 const props = withDefaults(
@@ -40,6 +43,8 @@ defineEmits<{
   switchSide: []
 }>()
 
+const { isDark, currentTheme } = useTheme()
+
 const positionClasses = computed(() =>
   props.side === 'left'
     ? 'bottom-24 left-6'