Skip to content

Commit 4f9fbba

Browse files
iamfaranraheeliftikhar5
iamfaran
authored and
raheeliftikhar5
committed
add file attachments components
1 parent 68b2802 commit 4f9fbba

File tree

6 files changed

+726
-1
lines changed

6 files changed

+726
-1
lines changed

‎client/packages/lowcoder/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
"@jsonforms/core": "^3.5.1",
3434
"@lottiefiles/dotlottie-react": "^0.13.0",
3535
"@manaflair/redux-batch": "^1.0.0",
36+
"@radix-ui/react-avatar": "^1.1.10",
37+
"@radix-ui/react-dialog": "^1.1.14",
3638
"@radix-ui/react-slot": "^1.2.3",
3739
"@radix-ui/react-tooltip": "^1.2.7",
3840
"@rjsf/antd": "^5.24.9",

‎client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
import { Spin, Flex } from "antd";
2626
import { LoadingOutlined } from "@ant-design/icons";
2727
import styled from "styled-components";
28+
import { ComposerAddAttachment, ComposerAttachments } from "../ui/attachment";
2829
const SimpleANTDLoader = () => {
2930
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
3031

@@ -150,6 +151,8 @@ import {
150151
const Composer: FC<{ placeholder?: string }> = ({ placeholder = trans("chat.composerPlaceholder") }) => {
151152
return (
152153
<ComposerPrimitive.Root className="aui-composer-root">
154+
<ComposerAttachments />
155+
<ComposerAddAttachment />
153156
<ComposerPrimitive.Input
154157
rows={1}
155158
autoFocus

‎client/packages/lowcoder/src/comps/comps/chatComp/components/ui/attachment.tsx

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
"use client";
2+
3+
import { PropsWithChildren, useEffect, useState, type FC } from "react";
4+
import { CircleXIcon, FileIcon, PaperclipIcon } from "lucide-react";
5+
import {
6+
AttachmentPrimitive,
7+
ComposerPrimitive,
8+
MessagePrimitive,
9+
useAttachment,
10+
} from "@assistant-ui/react";
11+
import styled from "styled-components";
12+
import {
13+
Tooltip,
14+
TooltipContent,
15+
TooltipTrigger,
16+
} from "./tooltip";
17+
import {
18+
Dialog,
19+
DialogTitle,
20+
DialogTrigger,
21+
DialogOverlay,
22+
DialogPortal,
23+
DialogContent,
24+
} from "./dialog";
25+
import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
26+
import { TooltipIconButton } from "../assistant-ui/tooltip-icon-button";
27+
28+
// ============================================================================
29+
// STYLED COMPONENTS
30+
// ============================================================================
31+
32+
const StyledDialogTrigger = styled(DialogTrigger)`
33+
cursor: pointer;
34+
transition: background-color 0.2s;
35+
padding: 2px;
36+
border-radius: 4px;
37+
38+
&:hover {
39+
background-color: rgba(0, 0, 0, 0.05);
40+
}
41+
`;
42+
43+
const StyledAvatar = styled(Avatar)`
44+
background-color: #f1f5f9;
45+
display: flex;
46+
width: 40px;
47+
height: 40px;
48+
align-items: center;
49+
justify-content: center;
50+
border-radius: 8px;
51+
border: 1px solid #e2e8f0;
52+
font-size: 14px;
53+
`;
54+
55+
const AttachmentContainer = styled.div`
56+
display: flex;
57+
height: 48px;
58+
width: 160px;
59+
align-items: center;
60+
justify-content: center;
61+
gap: 8px;
62+
border-radius: 8px;
63+
border: 1px solid #e2e8f0;
64+
padding: 4px;
65+
`;
66+
67+
const AttachmentTextContainer = styled.div`
68+
flex-grow: 1;
69+
flex-basis: 0;
70+
overflow: hidden;
71+
`;
72+
73+
const AttachmentName = styled.p`
74+
color: #64748b;
75+
font-size: 12px;
76+
font-weight: bold;
77+
overflow: hidden;
78+
text-overflow: ellipsis;
79+
white-space: nowrap;
80+
word-break: break-all;
81+
margin: 0;
82+
line-height: 16px;
83+
`;
84+
85+
const AttachmentType = styled.p`
86+
color: #64748b;
87+
font-size: 12px;
88+
margin: 0;
89+
line-height: 16px;
90+
`;
91+
92+
const AttachmentRoot = styled(AttachmentPrimitive.Root)`
93+
position: relative;
94+
margin-top: 12px;
95+
`;
96+
97+
const StyledTooltipIconButton = styled(TooltipIconButton)`
98+
color: #64748b;
99+
position: absolute;
100+
right: -12px;
101+
top: -12px;
102+
width: 24px;
103+
height: 24px;
104+
105+
& svg {
106+
background-color: white;
107+
width: 16px;
108+
height: 16px;
109+
border-radius: 50%;
110+
}
111+
`;
112+
113+
const UserAttachmentsContainer = styled.div`
114+
display: flex;
115+
width: 100%;
116+
flex-direction: row;
117+
gap: 12px;
118+
grid-column: 1 / -1;
119+
grid-row-start: 1;
120+
justify-content: flex-end;
121+
`;
122+
123+
const ComposerAttachmentsContainer = styled.div`
124+
display: flex;
125+
width: 100%;
126+
flex-direction: row;
127+
gap: 12px;
128+
overflow-x: auto;
129+
`;
130+
131+
const StyledComposerButton = styled(TooltipIconButton)`
132+
margin: 10px 0;
133+
width: 32px;
134+
height: 32px;
135+
padding: 8px;
136+
transition: opacity 0.2s ease-in;
137+
`;
138+
139+
const ScreenReaderOnly = styled.span`
140+
position: absolute;
141+
left: -10000px;
142+
width: 1px;
143+
height: 1px;
144+
overflow: hidden;
145+
`;
146+
147+
// ============================================================================
148+
// UTILITY HOOKS
149+
// ============================================================================
150+
151+
// Simple replacement for useShallow (removes zustand dependency)
152+
const useShallow = <T,>(selector: (state: any) => T): ((state: any) => T) => selector;
153+
154+
const useFileSrc = (file: File | undefined) => {
155+
const [src, setSrc] = useState<string | undefined>(undefined);
156+
157+
useEffect(() => {
158+
if (!file) {
159+
setSrc(undefined);
160+
return;
161+
}
162+
163+
const objectUrl = URL.createObjectURL(file);
164+
setSrc(objectUrl);
165+
166+
return () => {
167+
URL.revokeObjectURL(objectUrl);
168+
};
169+
}, [file]);
170+
171+
return src;
172+
};
173+
174+
const useAttachmentSrc = () => {
175+
const { file, src } = useAttachment(
176+
useShallow((a): { file?: File; src?: string } => {
177+
if (a.type !== "image") return {};
178+
if (a.file) return { file: a.file };
179+
const src = a.content?.filter((c: any) => c.type === "image")[0]?.image;
180+
if (!src) return {};
181+
return { src };
182+
})
183+
);
184+
185+
return useFileSrc(file) ?? src;
186+
};
187+
188+
// ============================================================================
189+
// ATTACHMENT COMPONENTS
190+
// ============================================================================
191+
192+
type AttachmentPreviewProps = {
193+
src: string;
194+
};
195+
196+
const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
197+
const [isLoaded, setIsLoaded] = useState(false);
198+
199+
return (
200+
<img
201+
src={src}
202+
style={{
203+
width: "auto",
204+
height: "auto",
205+
maxWidth: "75dvh",
206+
maxHeight: "75dvh",
207+
display: isLoaded ? "block" : "none",
208+
overflow: "clip",
209+
}}
210+
onLoad={() => setIsLoaded(true)}
211+
alt="Preview"
212+
/>
213+
);
214+
};
215+
216+
const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
217+
const src = useAttachmentSrc();
218+
219+
if (!src) return <>{children}</>;
220+
221+
return (
222+
<Dialog>
223+
<StyledDialogTrigger asChild>
224+
{children}
225+
</StyledDialogTrigger>
226+
<AttachmentDialogContent>
227+
<DialogTitle>
228+
<ScreenReaderOnly>Image Attachment Preview</ScreenReaderOnly>
229+
</DialogTitle>
230+
<AttachmentPreview src={src} />
231+
</AttachmentDialogContent>
232+
</Dialog>
233+
);
234+
};
235+
236+
const AttachmentThumb: FC = () => {
237+
const isImage = useAttachment((a) => a.type === "image");
238+
const src = useAttachmentSrc();
239+
return (
240+
<StyledAvatar>
241+
<AvatarFallback delayMs={isImage ? 200 : 0}>
242+
<FileIcon />
243+
</AvatarFallback>
244+
<AvatarImage src={src} />
245+
</StyledAvatar>
246+
);
247+
};
248+
249+
const AttachmentUI: FC = () => {
250+
const canRemove = useAttachment((a) => a.source !== "message");
251+
const typeLabel = useAttachment((a) => {
252+
const type = a.type;
253+
switch (type) {
254+
case "image":
255+
return "Image";
256+
case "document":
257+
return "Document";
258+
case "file":
259+
return "File";
260+
default:
261+
const _exhaustiveCheck: never = type;
262+
throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
263+
}
264+
});
265+
266+
return (
267+
<Tooltip>
268+
<AttachmentRoot>
269+
<AttachmentPreviewDialog>
270+
<TooltipTrigger asChild>
271+
<AttachmentContainer>
272+
<AttachmentThumb />
273+
<AttachmentTextContainer>
274+
<AttachmentName>
275+
<AttachmentPrimitive.Name />
276+
</AttachmentName>
277+
<AttachmentType>{typeLabel}</AttachmentType>
278+
</AttachmentTextContainer>
279+
</AttachmentContainer>
280+
</TooltipTrigger>
281+
</AttachmentPreviewDialog>
282+
{canRemove && <AttachmentRemove />}
283+
</AttachmentRoot>
284+
<TooltipContent side="top">
285+
<AttachmentPrimitive.Name />
286+
</TooltipContent>
287+
</Tooltip>
288+
);
289+
};
290+
291+
const AttachmentRemove: FC = () => {
292+
return (
293+
<AttachmentPrimitive.Remove asChild>
294+
<StyledTooltipIconButton
295+
tooltip="Remove file"
296+
side="top"
297+
>
298+
<CircleXIcon />
299+
</StyledTooltipIconButton>
300+
</AttachmentPrimitive.Remove>
301+
);
302+
};
303+
304+
// ============================================================================
305+
// EXPORTED COMPONENTS
306+
// ============================================================================
307+
308+
export const UserMessageAttachments: FC = () => {
309+
return (
310+
<UserAttachmentsContainer>
311+
<MessagePrimitive.Attachments components={{ Attachment: AttachmentUI }} />
312+
</UserAttachmentsContainer>
313+
);
314+
};
315+
316+
export const ComposerAttachments: FC = () => {
317+
return (
318+
<ComposerAttachmentsContainer>
319+
<ComposerPrimitive.Attachments
320+
components={{ Attachment: AttachmentUI }}
321+
/>
322+
</ComposerAttachmentsContainer>
323+
);
324+
};
325+
326+
export const ComposerAddAttachment: FC = () => {
327+
return (
328+
<ComposerPrimitive.AddAttachment asChild>
329+
<StyledComposerButton
330+
tooltip="Add Attachment"
331+
variant="ghost"
332+
>
333+
<PaperclipIcon />
334+
</StyledComposerButton>
335+
</ComposerPrimitive.AddAttachment>
336+
);
337+
};
338+
339+
const AttachmentDialogContent: FC<PropsWithChildren> = ({ children }) => (
340+
<DialogPortal>
341+
<DialogOverlay />
342+
<DialogContent className="aui-dialog-content">
343+
{children}
344+
</DialogContent>
345+
</DialogPortal>
346+
);

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy