θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

Update styles of attachments uploaded in PromptInput #3892

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

Merged
merged 8 commits into from
May 28, 2025
Merged

Update styles of attachments uploaded in PromptInput #3892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3cb99f6
update ui for attachment item component
shatfield4 May 24, 2025
f4b9dbc
fix attachment styles and spacing of prompt input
shatfield4 May 27, 2025
62f3a66
Merge branch 'master' into 3874-feat-update-styles-of-attachment-uplo…
shatfield4 May 27, 2025
227092a
lint
shatfield4 May 27, 2025
7b7c9ca
Merge branch 'master' into 3874-feat-update-styles-of-attachment-uplo…
timothycarambat May 27, 2025
884721c
fix loading state for dark/light modes
shatfield4 May 28, 2025
8bd6d37
truncate error message
shatfield4 May 28, 2025
b10de8d
image attachment fix
timothycarambat May 28, 2025
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
78 changes: 42 additions & 36 deletions frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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} />
))}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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
Expand Down
20 changes: 20 additions & 0 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"] {
Expand Down Expand Up @@ -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 {
Expand Down
10 changes: 10 additions & 0 deletions frontend/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
Expand Down