Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update message design #4044

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update message design #4044

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97dbe86
Update message design
machinsoft Sep 13, 2024
b223262
Merge branch 'main' into ui-message
machinsoft Sep 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion client/src/components/Chat/Messages/HoverButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,13 @@ export default function HoverButtons({
messageId={message.messageId}
content={message.content ?? message.text}
isLast={isLast}
className="hover-button rounded-md p-1 pl-0 text-gray-500 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible"
className={cn(
'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 focus:opacity-100 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
Copy link
Owner

@danny-avila danny-avila Sep 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

isCreatedByUser ? '' : 'active',
hideEditButton ? 'opacity-0' : '',
isEditing ? 'active text-gray-700 dark:text-gray-200' : '',
!isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
)}
/>
)}
{isEditableEndpoint && (
Expand Down
45 changes: 36 additions & 9 deletions client/src/components/Chat/Messages/ui/MessageRender.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,23 +104,50 @@ const MessageRender = memo(
{isLatestCard === true && (
<div className="absolute right-0 top-0 m-2 h-3 w-3 rounded-full bg-text-primary"></div>
)}
<div className="relative flex flex-shrink-0 flex-col items-end">
<div>
<div className="pt-0.5">
<div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
<Icon message={msg} conversation={conversation} assistant={assistant} />
{msg.isCreatedByUser && currentEditId === msg.messageId ? (
<div className="relative flex flex-shrink-0 flex-col items-end">
<div>
<div className="pt-0.5">
<div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
<Icon message={msg} conversation={conversation} assistant={assistant} />
</div>
</div>
</div>
</div>
</div>
) :
!msg.isCreatedByUser && (
<div className="relative flex flex-shrink-0 flex-col items-end">
<div>
<div className="pt-0.5">
<div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
<Icon message={msg} conversation={conversation} assistant={assistant} />
</div>
</div>
</div>
</div>
)}
<div
className={cn(
'relative flex w-11/12 flex-col',
msg.isCreatedByUser === true ? '' : 'agent-turn',
'relative flex flex-col',
msg.isCreatedByUser === true
? currentEditId === msg.messageId
? 'ml-auto w-full'
: 'ml-auto max-w-[80%] sm:max-w-[70%] w-auto'
: 'w-11/12 agent-turn',
)}
>
{!msg.isCreatedByUser && (
<h2 className={cn('select-none font-semibold', fontSize)}>{messageLabel}</h2>
<div className="flex-col gap-1 md:gap-3">
)}
<div className={cn(
'flex-col gap-1 md:gap-3',
msg.isCreatedByUser === true
? currentEditId === msg.messageId
? ''
: 'rounded-3xl px-5 py-2.5 bg-gray-200 dark:bg-gray-700'
: '',
)}
>
<div className="flex max-w-full flex-grow flex-col gap-0">
{msg.plugin && <Plugin plugin={msg.plugin} />}
<MessageContent
Expand Down