AMAZING Chat Interface Enhancements

[ModernBlueprints]

Ah, I’ve literally used the entire day to contemplate, research, and write this suggested enhancement, so I really hope you read it 😅

App users (including me) love options for personalizing the look and feel of their favorite apps. Therefore, I think all Witsy users would really love if they could customize the colors of Witsy’s actual chat interface (which is where they spend their time). I think it’s a fantastic enhancement that will result in even more people adopting, using, and staying with Witsy.

Currently, there are no color options for the Chat themes

In Settings -> Chat -> Chat theme -> pick either 'Conversation' or 'OpenAI' from the drop-down menu:

1. 'Conversation' Chat theme: colors of the chat bubbles are hardcoded - white text on blue background for chat prompts, and black text on gray background for chat responses.

2. 'OpenAI’ Chat theme: colors here are also hardcoded - colors for chat prompts and chat responses bubbles follows the user’s chosen UI color theme (white, gray, black, blue tint). The text color here also follows the UI color tint, and is black for the white and gray theme, and white for the black and blue theme.

3. Syntax-highlighting theme: currently, it's only one theme, and it's hardcoded

---

I suggest the following customization enhancements in Settings -> Chat

• For a quick visual mock-up of what I suggest, look at the picture at the end of the message.

1. Allowing users to choose the Chat prompt color, Chat response color, and Chat font color

• Users choose the colors with a color picker and they are applied both when the user chooses 'Conversation' Chat theme and 'OpenAI' Chat theme.
• The most widely used color picker for Electron apps is vue-color, a well-maintained color picker library supporting both Vue 2.7 and Vue 3.
• I suggest choosing the color picker variant named < ChromePicker / >
• Interactive web demo of the vue-color picker: https://linx4200.github.io/vue-color/ + GitHub repo:https://github.com/linx4200/vue-color

2. Allowing users to choose a Syntax-highlighting theme

• Users click a drop-down menu for simple CSS-based theme switching, and choose from a curated list of ca. 10 widely popular Highlight.js themes.
• Witsy already uses Highlight.js for syntax highlighting, so I suggest merely adding support for 10 themes that are widely used. Highlight.js themes are simple CSS files, switching between them just requires loading the appropriate stylesheet for the code block component.
• I suggest adding these 5 themes that are directly available in the official highlight.js GitHub repo, here: https://github.com/highlightjs/highlight.js

1. atom-one-light
2. atom-one-dark
3. github
4. github-dark
5. github-dark-dimmed

• I also strongly suggest adding the 4 Catppuccin themes that are now very popular, and is what I personally use. These can easily be found in Catppuccin’s highlight.js GitHub repo, here: https://github.com/catppuccin/highlightjs

6. Catppuccin Latte
7. Catppuccin Frappé
8. Catppuccin Macchiato
9. Catppuccin Mocha

This is the mock-up UI I have made to showcase the proposal in Settings -> Chat

I really hope you will consider implementing this. I think it would greatly enhance engagement with Witsy 😀