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

feat: Implement chat interface color customization

Browse Source 
This commit introduces new UI settings to control the colors of various chat interface elements.

Key changes:

- Added new state variables and actions to `ui/src/stores/useUi.js` for:
    - Agent message color (`chatAgentMessageColor`)
    - Own message color (`chatOwnMessageColor`)
    - Input box color (`chatInputBoxColor`)
    - Accent color (`chatAccentColor`)
    - Background color (`chatBackgroundColor`)
- These settings are persisted in local storage.
- Added a new "Chat Interface Colors" section in `ui/src/views/SettingsView.vue` with color pickers for each new setting.
- Modified `ui/src/components/chat/CanvasChat.vue` to use these new color settings via CSS custom properties. The chat elements (agent messages, own messages, input box, send button, background) now reflect your configured colors.

The changes have been tested to ensure that colors are applied correctly, persist across sessions, and do not conflict with existing theme settings.
This commit is contained in:
google-labs-jules[bot]
2025-05-31 09:35:56 +00:00
parent d16a160e5e
commit a88ee998b5
3 changed files with 93 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -95,6 +95,38 @@
</div>
</section>
<!-- Chat Interface Colors Section -->
<section class="mb-10">
<h2 class="text-2xl font-semibold mb-6 text-[var(--primary-color)]">Chat Interface Colors</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="setting-item">
<label for="chatAgentMessageColor" class="block text-sm font-medium mb-1">Agent Message Color</label>
<input type="color" id="chatAgentMessageColor" v-model="ui.chatAgentMessageColor" @input="ui.setChatAgentMessageColor($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>
<div class="setting-item">
<label for="chatOwnMessageColor" class="block text-sm font-medium mb-1">Own Message Color</label>
<input type="color" id="chatOwnMessageColor" v-model="ui.chatOwnMessageColor" @input="ui.setChatOwnMessageColor($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>
<div class="setting-item">
<label for="chatInputBoxColor" class="block text-sm font-medium mb-1">Input Box Color</label>
<input type="color" id="chatInputBoxColor" v-model="ui.chatInputBoxColor" @input="ui.setChatInputBoxColor($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>
<div class="setting-item">
<label for="chatAccentColor" class="block text-sm font-medium mb-1">Accent Color</label>
<input type="color" id="chatAccentColor" v-model="ui.chatAccentColor" @input="ui.setChatAccentColor($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>
<div class="setting-item">
<label for="chatBackgroundColor" class="block text-sm font-medium mb-1">Background Color</label>
<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>
</div>
</section>
<!-- Per-Module Color Settings -->
<section class="mb-10 module-settings-group">
<h3 class="text-xl font-semibold mb-4 text-[var(--primary-color)] border-b border-[var(--secondary-color)] pb-2">Empleados Module</h3>