feat: Implement chat interface font customization

This commit introduces new UI settings to control the font color, family, and size of the text within the chat interface.

Key changes:

- Added new state variables and actions to `ui/src/stores/useUi.js` for:
    - Chat font color (`chatFontColor`)
    - Chat font family (`chatFontFamily`)
    - Chat font size (`chatFontSize`)
- These settings are persisted in local storage.
- Added controls for these font properties to the "Chat Interface Colors" section in `ui/src/views/SettingsView.vue`.
    - Includes a color picker for font color.
    - Includes a text input for font family.
    - Includes a number input for font size (px).
- Modified `ui/src/components/chat/CanvasChat.vue` to use these new font settings via CSS custom properties.
    - The `chatStyleVariables` computed property now includes variables for font settings.
    - Chat messages (agent and user) and the chat input textarea now apply these font styles.

I've confirmed that the font settings are applied correctly to messages and the input area, persist across sessions, and integrate well with existing theme and color customizations.

ui/src/components/chat/CanvasChat.vue

@@ -14,6 +14,9 @@ const chatStyleVariables = computed(() => ({
   '--chat-input-box-color': ui.chatInputBoxColor,
   '--chat-accent-color': ui.chatAccentColor,
   '--chat-background-color': ui.chatBackgroundColor,
+  '--chat-font-color': ui.chatFontColor,
+  '--chat-font-family': ui.chatFontFamily || 'inherit', // Fallback to inherit if empty
+  '--chat-font-size': ui.chatFontSize ? `${ui.chatFontSize}px` : 'inherit', // Fallback to inherit
 }))
 
 function scrollBottom () {
@@ -58,8 +61,13 @@ watch(() => chat.items.length, scrollBottom)
         <div :class="m.owner==='yo' ? 'flex justify-end' : 'flex justify-start'" v-if="m.type==='text'">
           <div
             class="max-w-lg rounded-lg px-4 py-2 shadow break-words"
-            :class="m.owner==='yo' ? 'text-white' : 'text-gray-900'"
-            :style="{ backgroundColor: m.owner === 'yo' ? 'var(--chat-own-message-color)' : 'var(--chat-agent-message-color)' }">
+            :class="m.owner === 'yo' ? '' : ''"
+            :style="{
+              backgroundColor: m.owner === 'yo' ? 'var(--chat-own-message-color)' : 'var(--chat-agent-message-color)',
+              color: 'var(--chat-font-color)',
+              fontFamily: 'var(--chat-font-family)',
+              fontSize: 'var(--chat-font-size)'
+            }">
             {{ m.text }}
           </div>
         </div>
@@ -77,7 +85,14 @@ watch(() => chat.items.length, scrollBottom)
         rows="1"
         placeholder="Escribí un mensaje… (Enter para enviar, Shift+Enter salto)"
         class="flex-1 resize-none rounded-lg border p-3 focus:outline-none focus:ring-2 custom-scroll"
-        :style="{ backgroundColor: 'var(--chat-input-box-color)', borderColor: 'var(--chat-accent-color)', '--tw-ring-color': 'var(--chat-accent-color)' }"
+        :style="{
+          backgroundColor: 'var(--chat-input-box-color)',
+          borderColor: 'var(--chat-accent-color)',
+          '--tw-ring-color': 'var(--chat-accent-color)',
+          color: 'var(--chat-font-color)',
+          fontFamily: 'var(--chat-font-family)',
+          fontSize: 'var(--chat-font-size)'
+        }"
       />
       <button type="submit" class="px-4 py-2 rounded-lg text-white transition" :style="{ backgroundColor: 'var(--chat-accent-color)' }">
         ➤

ui/src/stores/useUi.js

@@ -36,6 +36,9 @@ const appearanceSettingKeys = [
   'chatInputBoxColor',
   'chatAccentColor',
   'chatBackgroundColor',
+  'chatFontColor',
+  'chatFontFamily',
+  'chatFontSize',
 ]
 
 const loadSettingsFromLocalStorage = () => {
@@ -117,6 +120,10 @@ export const useUi = defineStore('ui', {
       chatInputBoxColor: '#FFFFFF',
       chatAccentColor: '#1976D2',
       chatBackgroundColor: '#F4F4F4',
+      // Chat UI fonts
+      chatFontColor: '#000000',
+      chatFontFamily: '',
+      chatFontSize: 14,
     }
 
     const loadedSettings = loadSettingsFromLocalStorage()
@@ -279,6 +286,20 @@ export const useUi = defineStore('ui', {
       this.chatBackgroundColor = color
       _saveAppearanceState(this)
     },
+
+    // Actions for chat UI fonts
+    setChatFontColor(color) {
+      this.chatFontColor = color
+      _saveAppearanceState(this)
+    },
+    setChatFontFamily(font) {
+      this.chatFontFamily = font
+      _saveAppearanceState(this)
+    },
+    setChatFontSize(size) {
+      this.chatFontSize = Number(size)
+      _saveAppearanceState(this)
+    },
   },
 })
 

ui/src/views/SettingsView.vue

@@ -124,6 +124,29 @@
           <input type="color" id="chatBackgroundColor" v-model="ui.chatBackgroundColor" @input="ui.setChatBackgroundColor($event.target.value)"
                  class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
         </div>
+
+        <!-- Chat Font Color -->
+        <div class="setting-item">
+          <label for="chatFontColor" class="block text-sm font-medium mb-1">Chat Font Color</label>
+          <input type="color" id="chatFontColor" v-model="ui.chatFontColor" @input="ui.setChatFontColor($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
+
+        <!-- Chat Font Family -->
+        <div class="setting-item">
+          <label for="chatFontFamily" class="block text-sm font-medium mb-1">Chat Font Family</label>
+          <input type="text" id="chatFontFamily" v-model="ui.chatFontFamily" @input="ui.setChatFontFamily($event.target.value)"
+                 class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
+                 placeholder="e.g., Arial, sans-serif">
+        </div>
+
+        <!-- Chat Font Size -->
+        <div class="setting-item">
+          <label for="chatFontSize" class="block text-sm font-medium mb-1">Chat Font Size (px)</label>
+          <input type="number" id="chatFontSize" v-model.number="ui.chatFontSize" @input="ui.setChatFontSize(Number($event.target.value))"
+                 class="w-full p-3 border rounded-lg shadow-sm focus:ring-[var(--primary-color)] focus:border-[var(--primary-color)] transition-all duration-150 ease-in-out bg-white/10 dark:bg-black/10 border-[var(--secondary-color)] hover:border-[var(--primary-color)]"
+                 min="8" max="32" step="1">
+        </div>
       </div>
     </section>