Skip to content

Commit

Permalink
feat: customizable chatbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@longy2k
longy2k committed Feb 25, 2024
1 parent 56c6ccc commit 3872f72
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 27 deletions.
30 changes: 15 additions & 15 deletions src/components/chat/UserMessage.ts
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import { BMOSettings, DEFAULT_SETTINGS } from "src/main";
import { colorToHex } from "src/utils/ColorConverter";
import { displayUserEditButton, displayTrashButton, displayUserCopyButton, regenerateUserButton } from "./Buttons";
import { ANTHROPIC_MODELS } from "src/view";
import { marked } from "marked";
import { BMOSettings, DEFAULT_SETTINGS } from 'src/main';
import { colorToHex } from 'src/utils/ColorConverter';
import { displayUserEditButton, displayTrashButton, displayUserCopyButton, regenerateUserButton } from './Buttons';
import { ANTHROPIC_MODELS } from 'src/view';
import { marked } from 'marked';

export function displayUserMessage(settings: BMOSettings, message: string) {
const userMessageDiv = document.createElement("div");
userMessageDiv.className = "userMessage";
const userMessageDiv = document.createElement('div');
userMessageDiv.className = 'userMessage';
userMessageDiv.style.backgroundColor = colorToHex(settings.appearance.userMessageBackgroundColor ||
getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.appearance.userMessageBackgroundColor).trim());

const userMessageToolBarDiv = document.createElement("div");
userMessageToolBarDiv.className = "userMessageToolBar";
const userMessageToolBarDiv = document.createElement('div');
userMessageToolBarDiv.className = 'userMessageToolBar';

const buttonContainerDiv = document.createElement("div");
buttonContainerDiv.className = "button-container";
const buttonContainerDiv = document.createElement('div');
buttonContainerDiv.className = 'button-container';

const userNameSpan = document.createElement("span");
userNameSpan.className = "userName";
const userNameSpan = document.createElement('span');
userNameSpan.className = 'userName';
userNameSpan.textContent = settings.appearance.userName || DEFAULT_SETTINGS.appearance.userName;
const userP = document.createElement("p");
const userP = document.createElement('p');

const regenerateButton = regenerateUserButton(settings);
const editButton = displayUserEditButton(settings, userP);
Expand All @@ -29,7 +29,7 @@ export function displayUserMessage(settings: BMOSettings, message: string) {
userMessageToolBarDiv.appendChild(userNameSpan);
userMessageToolBarDiv.appendChild(buttonContainerDiv);

if (!message.startsWith("/")) {
if (!message.startsWith('/')) {
buttonContainerDiv.appendChild(regenerateButton);
buttonContainerDiv.appendChild(editButton);
}
Expand Down
94 changes: 91 additions & 3 deletions src/components/settings/AppearanceSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export function addAppearanceSettings(containerEl: HTMLElement, plugin: BMOGPT,
const defaultUserMessageBackgroundColor = getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.appearance.userMessageBackgroundColor).trim();

new Setting(settingsContainer)
.setName('Background Color for User Messages')
.setName('User Message Background Color')
.setDesc('Modify the background color of the userMessage element.')
.addButton(button => button
.setButtonText('Restore Default')
Expand Down Expand Up @@ -123,7 +123,7 @@ export function addAppearanceSettings(containerEl: HTMLElement, plugin: BMOGPT,
const defaultBotMessageBackgroundColor = getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.appearance.botMessageBackgroundColor).trim();

new Setting(settingsContainer)
.setName('Background Color for Bot Messages')
.setName('Bot Message Background Color')
.setDesc('Modify the background color of the botMessage element.')
.addButton(button => button
.setButtonText('Restore Default')
Expand Down Expand Up @@ -169,6 +169,94 @@ export function addAppearanceSettings(containerEl: HTMLElement, plugin: BMOGPT,
});
});

let colorPicker3: ColorComponent;
const defaultChatBoxBackgroundColor = getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.appearance.chatBoxBackgroundColor).trim();

new Setting(settingsContainer)
.setName('Chatbox Background Color')
.setDesc('Modify the background color of the chatbox.')
.addButton(button => button
.setButtonText('Restore Default')
.setIcon('rotate-cw')
.setClass('clickable-icon')
.onClick(async () => {
const defaultValue = colorToHex(defaultChatBoxBackgroundColor);
colorPicker3.setValue(defaultValue);

const textarea = document.querySelector('.chatbox textarea');
if (textarea) {
const element = textarea as HTMLElement;
element.style.backgroundColor = defaultValue;
}
})
)
.addColorPicker((color) => {
colorPicker3 = color;

let defaultValue = plugin.settings.appearance.chatBoxBackgroundColor;

if (defaultValue == '--interactive-accent') {
defaultValue = colorToHex(defaultChatBoxBackgroundColor);
}

color.setValue(defaultValue)
.onChange(async (value) => {
const hexValue = colorToHex(value);
plugin.settings.appearance.chatBoxBackgroundColor = hexValue;
const textarea = document.querySelector('.chatbox textarea');
if (textarea) {
const element = textarea as HTMLElement;
element.style.backgroundColor = hexValue;
element.style.borderColor = hexValue;
}
await plugin.saveSettings();
});
});

let colorPicker4: ColorComponent;
const defaultChatBoxBorderColor = getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.appearance.chatBoxBorderColor).trim();

new Setting(settingsContainer)
.setName('Chatbox Border Color')
.setDesc('Modify the border color of the chatbox.')
.addButton(button => button
.setButtonText('Restore Default')
.setIcon('rotate-cw')
.setClass('clickable-icon')
.onClick(async () => {
const defaultValue = colorToHex(defaultChatBoxBorderColor);
colorPicker4.setValue(defaultValue);

const textarea = document.querySelector('.chatbox');
if (textarea) {
const element = textarea as HTMLElement;
element.style.backgroundColor = defaultValue;
}
})
)
.addColorPicker((color) => {
colorPicker4 = color;

let defaultValue = plugin.settings.appearance.chatBoxBorderColor;

if (plugin.settings.appearance.chatBoxBorderColor == '--interactive-accent') {
defaultValue = colorToHex(defaultChatBoxBorderColor);
}

color.setValue(defaultValue)
.onChange(async (value) => {
const hexValue = colorToHex(value);
plugin.settings.appearance.chatBoxBorderColor = hexValue;
const textarea = document.querySelector('.chatbox');
if (textarea) {
const element = textarea as HTMLElement;
element.style.backgroundColor = hexValue;
element.style.borderColor = hexValue;
}
await plugin.saveSettings();
});
});

new Setting(settingsContainer)
.setName('Allow Header')
.setDesc('Display chatbot name and model name in header.')
Expand Down Expand Up @@ -196,4 +284,4 @@ export function addAppearanceSettings(containerEl: HTMLElement, plugin: BMOGPT,
plugin.saveSettings();
})
);
}
}
1 change: 0 additions & 1 deletion src/components/settings/GeneralSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ export async function addGeneralSettings(containerEl: HTMLElement, plugin: BMOGP
}
}
if (plugin.settings.APIConnections.mistral.APIKey !== '') {
console.log('Mistral API Key:');
const mistralModels = await fetchMistralModels(plugin);
try {
mistralModels.forEach((model: string) => {
Expand Down
8 changes: 5 additions & 3 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@ export interface BMOSettings {
appearance: {
userName: string,
chatbotName: string,
chatbotContainerBackgroundColor: string,
userMessageBackgroundColor: string,
botMessageBackgroundColor: string,
chatBoxBackgroundColor: string,
chatBoxBorderColor: string,
allowHeader: boolean,
},
editor: {
Expand Down Expand Up @@ -105,9 +106,10 @@ export const DEFAULT_SETTINGS: BMOSettings = {
appearance: {
userName: 'USER',
chatbotName: 'BMO',
chatbotContainerBackgroundColor: '--background-secondary',
userMessageBackgroundColor: '--background-primary',
botMessageBackgroundColor: '--background-secondary',
chatBoxBackgroundColor: '--interactive-accent',
chatBoxBorderColor: '--interactive-accent',
allowHeader: true,
},
editor: {
Expand Down Expand Up @@ -288,7 +290,7 @@ export default class BMOGPT extends Plugin {
this.app.workspace.detachLeavesOfType(VIEW_TYPE_CHATBOT);

const rightLeaf = this.app.workspace.getRightLeaf(false);
await rightLeaf.setViewState({
await rightLeaf?.setViewState({
type: VIEW_TYPE_CHATBOT,
active: true,
});
Expand Down
7 changes: 6 additions & 1 deletion src/view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,11 @@ export class BMOView extends ItemView {
const textarea = document.createElement('textarea');
textarea.setAttribute('contenteditable', true.toString());
textarea.setAttribute('placeholder', 'Start typing...');

textarea.style.backgroundColor = this.settings.appearance.chatBoxBackgroundColor || DEFAULT_SETTINGS.appearance.chatBoxBackgroundColor;
textarea.style.borderColor = this.settings.appearance.chatBoxBackgroundColor || DEFAULT_SETTINGS.appearance.chatBoxBackgroundColor;
chatbox.style.backgroundColor = this.settings.appearance.chatBoxBorderColor || DEFAULT_SETTINGS.appearance.chatBoxBorderColor;

chatbox.appendChild(textarea);

this.textareaElement = textarea as HTMLTextAreaElement;
Expand All @@ -168,7 +173,7 @@ export class BMOView extends ItemView {
}

async handleKeyup(event: KeyboardEvent) {
const input = this.textareaElement.value.trim();
const input = this.textareaElement.value;
const index = messageHistory.length - 1;

// Only allow /stop command to be executed during fetch
Expand Down
15 changes: 11 additions & 4 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,13 +304,14 @@ button.regenerate-button {

.chatbox textarea {
background-color: var(--interactive-accent);
border-color: var(--interactive-accent);
color: var(--text-normal);
width: 100%;
height: 29px;
max-height: 150px;
resize: none;
font-size: 16px;
overflow-y: auto;
border-color: var(--interactive-accent);
}

.chatbox textarea:focus {
Expand Down Expand Up @@ -483,7 +484,8 @@ ul#dropdownOptions li:hover {

/* Light Theme */

.theme-light .commandBotMessage {
.theme-light .commandBotMessage,
.theme-light .errorBotMessage {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
Expand Down Expand Up @@ -516,6 +518,11 @@ ul#dropdownOptions li:hover {
color: #222222;
}

.theme-light .chatbox textarea {
color: white;
.theme-light .chatbox textarea::selection {
background: var(--interactive-accent) !important;
}

.theme-light .chatbox textarea::placeholder {
color: black;
font-weight: 500;
}

0 comments on commit 3872f72

Please sign in to comment.