nucleo000/planilla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement chat interface font customization

Browse Source 
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.
This commit is contained in:
google-labs-jules[bot]
2025-05-31 09:43:18 +00:00
parent cb5b3f7835
commit 5fc581a180
3 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
ui/src/views/SettingsView.vue
View File

@@ -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>