From 5fc581a18011b73b6e43f61417ba8613e7378734 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 09:43:18 +0000
Subject: [PATCH] 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 | 21 ++++++++++++++++++---
 ui/src/stores/useUi.js                | 21 +++++++++++++++++++++
 ui/src/views/SettingsView.vue         | 23 +++++++++++++++++++++++
 3 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/chat/CanvasChat.vue b/ui/src/components/chat/CanvasChat.vue
index 086fea9..baa8ed0 100644
--- a/ui/src/components/chat/CanvasChat.vue
+++ b/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)' }">
         ➤
diff --git a/ui/src/stores/useUi.js b/ui/src/stores/useUi.js
index ae48302..e987a2a 100644
--- a/ui/src/stores/useUi.js
+++ b/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)
+    },
   },
 })
 
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index ea4f379..19b89be 100644
--- a/ui/src/views/SettingsView.vue
+++ b/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>