michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update styles of attachments uploaded in PromptInput (#3892)

Browse Source 
* update ui for attachment item component

* fix attachment styles and spacing of prompt input

* lint

* fix loading state for dark/light modes

* truncate error message

* image attachment fix

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield 2025-05-27 17:24:48 -07:00 committed by GitHub
parent 2f48cd1e0b
commit b3a95f7f1c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 75 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
View File

@ -10,7 +10,6 @@ import {
WarningOctagon,
X,
} from "@phosphor-icons/react";
import { humanFileSize } from "@/utils/numbers";
import { REMOVE_ATTACHMENT_EVENT } from "../../DnDWrapper";
import { Tooltip } from "react-tooltip";
@ -21,7 +20,7 @@ import { Tooltip } from "react-tooltip";
export default function AttachmentManager({ attachments }) {
if (attachments.length === 0) return null;
return (
<div className="flex flex-wrap mt-4 mb-2 gap-y-2 gap-x-[0.5px]">
<div className="flex flex-wrap gap-2 mt-2 mb-4">
{attachments.map((attachment) => (
<AttachmentItem key={attachment.uid} attachment={attachment} />
))}
@ -45,21 +44,22 @@ function AttachmentItem({ attachment }) {
if (status === "in_progress") {
return (
<div
className={`h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px]`}
>
<div className="relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px] group">
<div
className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
className={`bg-theme-attachment-icon-spinner-bg rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
>
<CircleNotch
size={30}
className="text-white light:text-white animate-spin"
size={18}
weight="bold"
className="text-theme-attachment-icon-spinner animate-spin"
/>
</div>
<div className="flex flex-col w-[130px]">
<p className="text-white text-xs font-medium truncate">{file.name}</p>
<p className="text-white/60 text-xs font-medium">
{humanFileSize(file.size)}
<div className="flex flex-col w-[125px]">
<p className="text-theme-attachment-text text-xs font-semibold truncate">
{file.name}
</p>
<p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
Uploading...
</p>
</div>
</div>
@ -72,29 +72,28 @@ function AttachmentItem({ attachment }) {
<div
data-tooltip-id={`attachment-uid-${uid}-error`}
data-tooltip-content={error}
className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 border border-transparent w-[200px] group`}
className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-error-bg border-transparent w-[180px] group`}
>
<div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
<button
onClick={removeFileFromQueue}
type="button"
className="light:bg-white bg-zinc-700 hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
>
<X size={10} className="flex-shrink-0" />
</button>
</div>
<div
className={`bg-error rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
className={`bg-error rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
>
<WarningOctagon size={30} className="text-white light:text-white" />
<WarningOctagon size={24} className="text-theme-attachment-icon" />
</div>
<div className="flex flex-col w-[130px]">
<p className="text-white light:text-red-600 text-xs font-medium truncate">
<div className="flex flex-col w-[125px]">
<p className="text-theme-attachment-text text-xs font-semibold truncate">
{file.name}
</p>
<p className="text-red-100 light:text-red-600 text-xs truncate">
{error ?? "this file failed to upload"}. It will not be available
in the workspace.
<p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium truncate">
{error ?? "File not embedded!"}
</p>
</div>
</div>
@ -114,34 +113,35 @@ function AttachmentItem({ attachment }) {
<div
data-tooltip-id={`attachment-uid-${uid}-success`}
data-tooltip-content={`${file.name} will be attached to this prompt. It will not be embedded into the workspace permanently.`}
className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-success-bg border border-white/20 w-[180px] group`}
>
<div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
<button
onClick={removeFileFromQueue}
type="button"
className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
>
<X size={10} className="flex-shrink-0" />
</button>
</div>
{contentString ? (
<img
alt={`Preview of ${file.name}`}
src={contentString}
className={`${iconBgColor} w-[30px] h-[30px] rounded-lg flex items-center justify-center`}
className={`${iconBgColor} w-[30px] h-[30px] rounded-lg flex items-center justify-center m-1`}
/>
) : (
<div
className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
>
<Icon size={30} className="text-white light:text-white" />
<Icon size={24} className="text-theme-attachment-icon" />
</div>
)}
<div className="flex flex-col w-[130px]">
<p className="text-white text-xs font-medium truncate">
<div className="flex flex-col w-[125px]">
<p className="text-theme-attachment-text text-xs font-semibold truncate">
{file.name}
</p>
<p className="text-white/80 light:text-black/80 text-xs font-medium">
<p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
Image attached!
</p>
</div>
@ -161,25 +161,31 @@ function AttachmentItem({ attachment }) {
<div
data-tooltip-id={`attachment-uid-${uid}-success`}
data-tooltip-content={`${file.name} was uploaded and embedded into this workspace. It will be available for RAG chat now.`}
className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px] group`}
>
<div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
<button
onClick={removeFileFromQueue}
type="button"
className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
>
<X size={10} className="flex-shrink-0" />
</button>
</div>
<div
className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
>
<Icon size={30} className="text-white light:text-white" />
<Icon
size={24}
weight="light"
className="text-theme-attachment-icon"
/>
</div>
<div className="flex flex-col w-[130px]">
<p className="text-white text-xs font-medium truncate">{file.name}</p>
<p className="text-white/80 light:text-black/80 text-xs font-medium">
<div className="flex flex-col w-[125px]">
<p className="text-white text-xs font-semibold truncate">
{file.name}
</p>
<p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
File embedded!
</p>
</div>

6
frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
View File

@ -256,9 +256,9 @@ export default function PromptInput({
className="flex flex-col gap-y-1 rounded-t-lg md:w-3/4 w-full mx-auto max-w-xl items-center"
>
<div className="flex items-center rounded-lg md:mb-4 md:w-full">
<div className="w-[95vw] md:w-[635px] bg-theme-bg-chat-input light:bg-white light:border-solid light:border-[1px] light:border-theme-chat-input-border shadow-sm rounded-2xl flex flex-col px-4 overflow-hidden">
<div className="w-[95vw] md:w-[635px] bg-theme-bg-chat-input light:bg-white light:border-solid light:border-[1px] light:border-theme-chat-input-border shadow-sm rounded-2xl flex flex-col px-2 overflow-hidden">
<AttachmentManager attachments={attachments} />
<div className="flex items-center w-full border-b-2 border-theme-chat-input-border">
<div className="flex items-center border-b border-theme-chat-input-border mx-3">
<textarea
ref={textareaRef}
onChange={handleChange}
@ -311,7 +311,7 @@ export default function PromptInput({
</>
)}
</div>
<div className="flex justify-between py-3.5">
<div className="flex justify-between py-3.5 mx-3 mb-1">
<div className="flex gap-x-2">
<AttachItem />
<SlashCommandsButton

20
frontend/src/index.css
View File

@ -85,6 +85,15 @@
--theme-home-button-secondary-border: #acc1e6;
--theme-home-button-secondary-border-hover: #293056;
--theme-attachment-bg: #18191a;
--theme-attachment-error-bg: rgba(180, 35, 24, 0.4);
--theme-attachment-success-bg: #18191a;
--theme-attachment-text: #ffffff;
--theme-attachment-text-secondary: rgba(255, 255, 255, 0.8);
--theme-attachment-icon: #ffffff;
--theme-attachment-icon-spinner: #ffffff;
--theme-attachment-icon-spinner-bg: #27282a;
}
[data-theme="light"] {
@ -167,6 +176,17 @@
--theme-checklist-button-text: #0ba5ec;
--theme-checklist-button-hover-bg: rgba(11, 165, 236, 0.1);
--theme-checklist-button-hover-border: rgba(11, 165, 236, 0.8);
--theme-home-button-secondary-border-hover: #293056;
--theme-attachment-bg: #edf2fa;
--theme-attachment-error-bg: rgba(180, 35, 24, 0.3);
--theme-attachment-success-bg: #eaeaea;
--theme-attachment-text: #0e0f0f;
--theme-attachment-text-secondary: rgba(0, 0, 0, 0.8);
--theme-attachment-icon: #ffffff;
--theme-attachment-icon-spinner: #7cd4fd;
--theme-attachment-icon-spinner-bg: #ffffff;
}
[data-theme="light"] .text-white {

10
frontend/tailwind.config.js
View File

@ -100,6 +100,16 @@ export default {
"file-picker": {
hover: 'var(--theme-file-picker-hover)',
},
attachment: {
bg: 'var(--theme-attachment-bg)',
'error-bg': 'var(--theme-attachment-error-bg)',
'success-bg': 'var(--theme-attachment-success-bg)',
text: 'var(--theme-attachment-text)',
'text-secondary': 'var(--theme-attachment-text-secondary)',
'icon': 'var(--theme-attachment-icon)',
'icon-spinner': 'var(--theme-attachment-icon-spinner)',
'icon-spinner-bg': 'var(--theme-attachment-icon-spinner-bg)',
},
home: {
text: 'var(--theme-home-text)',
"text-secondary": 'var(--theme-home-text-secondary)',