Skip to content

Update UI stylesof AI chat #1902

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

Open
rSnapkoOpenOps wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update UI stylesof AI chat #1902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 5 additions & 3 deletions packages/ui-components/src/components/assistant-ui/assistant-top-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const AssistantTopBar = ({
return (
<div
className={cn(
'flex flex-col px-4 py-2 gap-1 flex-shrink-0 text-md dark:text-primary font-bold border-b border-gray-200 justify-center',
'flex flex-col px-4 py-2 gap-1 flex-shrink-0 text-sm dark:text-primary font-bold border-b border-gray-200 justify-center',
)}
style={{ minHeight: `${TOP_BAR_HEIGHT}px` }}
>
Expand Down Expand Up @@ -121,7 +121,9 @@ const AssistantTopBar = ({
<MessageSquarePlus size={13} />
</Button>
</TooltipWrapper>
<span className="min-w-0 max-w-[240px] truncate">{displayTitle}</span>
<span className="min-w-0 max-w-[240px] text-sm truncate">
{displayTitle}
</span>
</div>
<div className="flex items-center gap-2">
{children}
Expand All @@ -135,7 +137,7 @@ const AssistantTopBar = ({
}}
className="text-outline size-[36px]"
>
<SquareArrowOutDownLeft size={20} />
<SquareArrowOutDownLeft size={16} />
</Button>
</TooltipWrapper>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-components/src/components/assistant-ui/assistant-ui-chat-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const AssistantUiChatContainer = ({
}, [handleInject]);

return (
<div className="h-full w-full flex flex-col bg-background overflow-hidden relative">
<div className="h-full w-full flex flex-col bg-greyBlue-100 overflow-hidden relative">
<AssistantTopBar
onClose={onClose}
onNewChat={onNewChat}
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-components/src/components/assistant-ui/thread/thread.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const Thread = ({
[theme],
);
return (
<ThreadPrimitive.Root className="bg-background box-border flex h-full flex-col overflow-hidden">
<ThreadPrimitive.Root className="bg-greyBlue-100 box-border flex h-full flex-col overflow-hidden">
<ThreadPrimitive.Viewport className="flex h-full flex-col items-center overflow-y-auto scroll-smooth bg-inherit px-4 pt-8">
<ThreadWelcome />

Expand Down Expand Up @@ -207,7 +207,7 @@ const ComposerAction: FC<{ isDisabled: boolean }> = ({ isDisabled }) => {
const UserMessage: FC = () => {
return (
<MessagePrimitive.Root className="grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 [&:where(>*)]:col-start-2 w-full py-4">
<div className="bg-muted text-foreground break-words rounded-3xl px-5 py-2.5 col-start-2 row-start-2">
<div className="bg-muted text-foreground break-words rounded-sm pl-[15px] pr-[10px] py-3 col-start-2 row-start-2">
<MessagePrimitive.Content />
</div>
</MessagePrimitive.Root>
Expand Down
2 changes: 2 additions & 0 deletions packages/ui-components/src/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
--blue-accent-500: 209 85% 57%; /* Primary Blue accent from Figma */

--grey-blue-50: 240 100% 98%;
--grey-blue-100: 240 50% 99%;
--grey-blue: 213 28% 67%;

--destructive-100: 0 84.2% 90%;
Expand Down Expand Up @@ -124,6 +125,7 @@
--blue-accent-300: 209, 85%, 57%;

--grey-blue-50: 240 100% 10%;
--grey-blue-100: 240 50% 10%;
--grey-blue: 213 28% 67%;

--destructive-100: 0 73.7% 41.8%;
Expand Down
1 change: 1 addition & 0 deletions packages/ui-components/tailwind.base.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ module.exports = {
greyBlue: {
DEFAULT: 'hsl(var(--grey-blue))',
50: 'hsl(var(--grey-blue-50))',
100: 'hsl(var(--grey-blue-100))',
},
success: {
DEFAULT: 'hsl(var(--success))',
Expand Down
Loading