Update message design

[machinsoft]

I made the design somewhat similar to OpenAI for messages.

Before

After

[danny-avila]

make this an option from YAML and/or settings dialog instead of the default, then I will merge it

[danny-avila]

use our new theming classes, e.g. bg-surface-primary, bg-surface-secondary, etc., instead of bg-gray-100, etc.

Do a CTRL+F for gray-700 and it should be the first hit in styles.css:

/* Custom Variables */
:root {
  --white: #fff;
  --black: #000;
  --gray-20: #ececf1;
  --gray-50: #f7f7f8;
  --gray-100: #ececec;
  --gray-200: #e3e3e3;
  --gray-300: #cdcdcd;
  --gray-400: #999696;
  --gray-500: #595959;
  --gray-600: #424242;
  --gray-700: #2f2f2f;
  --gray-800: #212121;
  --gray-850: #171717;
  --gray-900: #0d0d0d;
  --gizmo-gray-500: #999;
  --gizmo-gray-600: #666;
  --gizmo-gray-950: #0f0f0f;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
}
html {
  --text-primary: var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-secondary-alt: var(--gray-500);
  --text-tertiary: var(--gray-500);
  --ring-primary: var(--gray-500);
  --header-primary: var(--white);
  --header-hover: var(--gray-50);
  --header-button-hover: var(--gray-50);
  --surface-active: var(--gray-100);
  --surface-hover: var(--gray-200);
  --surface-primary: var(--white);
  --surface-primary-alt: var(--gray-50);
  --surface-primary-contrast: var(--gray-100);
  --surface-secondary: var(--gray-50);
  --surface-tertiary: var(--gray-100);
  --surface-tertiary-alt: var(--white);
  --border-light: var(--gray-200);
  --border-medium-alt: var(--gray-300);
  --border-medium: var(--gray-300);
  --border-heavy: var(--gray-400);
  --border-xheavy: var(--gray-500);
}
.dark {
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-300);
  --text-secondary-alt: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --header-primary: var(--gray-700);
  --header-hover: var(--gray-600);
  --header-button-hover: var(--gray-700);
  --surface-active: var(--gray-500);
  --surface-hover: var(--gray-600);
  --surface-primary: var(--gray-900);
  --surface-primary-alt: var(--gray-850);
  --surface-primary-contrast: var(--gray-850);
  --surface-secondary: var(--gray-800);
  --surface-tertiary: var(--gray-700);
  --surface-tertiary-alt: var(--gray-700);
  --border-light: var(--gray-700);
  --border-medium-alt: var(--gray-600);
  --border-medium: var(--gray-600);
  --border-heavy: var(--gray-500);
  --border-xheavy: var(--gray-400);
}

[machinsoft]

I'm having a hard time understanding exactly what needs to be done. However, if you could show me an example of what needs to be changed, I think I'll be able to grasp it better.

[machinsoft]

make this an option from YAML and/or settings dialog instead of the default, then I will merge it

I understand what you're asking for, but it's a bit difficult for me to implement because I haven't done something like this before. I'm not familiar with making features configurable through YAML or a settings dialog.

Personally, I think it's better not to get stuck with the old interface but to stick with the OpenAI design, as that's what we initially aimed for. If we create a bulky settings interface, people won't use it anyway—most users stick to the defaults and don't dig into settings. So, it's better not to complicate things and remove unnecessary options. For example, the "Display username in messages" setting doesn't make much sense and can simply be deleted.

[danny-avila]

Personally, I think it's better not to get stuck with the old interface but to stick with the OpenAI design, as that's what we initially aimed for. If we create a bulky settings interface, people won't use it anyway—most users stick to the defaults and don't dig into settings.

I disagree, as I prefer the current design. There is no obligation to adhere to OpenAI here. I understand that some may prefer the message bubble style, so that's why I'm pushing for an option, rather than reject this outright.

I understand what you're asking for, but it's a bit difficult for me to implement because I haven't done something like this before. I'm not familiar with making features configurable through YAML or a settings dialog. ... For example, the "Display username in messages" setting doesn't make much sense and can simply be deleted.

You should learn from the example you gave

[machinsoft]

You should learn from the example you gave

I can do this; it’s not difficult for me. The only question is how :) I need an example of a minimal implementation.

[berry-13]

@machinsoft don't close this. I can work on it

[techwithanirudh]

I worked on this a while back, it might help with adding a toggle to the messages ui.