@websolutespa/ask-ui 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion.d.mts +25 -0
- package/dist/components/accordion.mjs +55 -0
- package/dist/components/ai-elements/attachments.d.mts +94 -0
- package/dist/components/ai-elements/attachments.mjs +174 -0
- package/dist/components/ai-elements/conversation.d.mts +51 -0
- package/dist/components/ai-elements/conversation.mjs +85 -0
- package/dist/components/ai-elements/message.d.mts +89 -0
- package/dist/components/ai-elements/message.mjs +175 -0
- package/dist/components/ai-elements/prompt-input.d.mts +277 -0
- package/dist/components/ai-elements/prompt-input.mjs +703 -0
- package/dist/components/ai-elements/speech-input.d.mts +64 -0
- package/dist/components/ai-elements/speech-input.mjs +153 -0
- package/dist/components/alert-dialog.d.mts +60 -0
- package/dist/components/alert-dialog.mjs +101 -0
- package/dist/components/alert.d.mts +28 -0
- package/dist/components/alert.mjs +43 -0
- package/dist/components/aspect-ratio.d.mts +9 -0
- package/dist/components/aspect-ratio.mjs +12 -0
- package/dist/components/avatar.d.mts +34 -0
- package/dist/components/avatar.mjs +51 -0
- package/dist/components/badge.d.mts +19 -0
- package/dist/components/badge.mjs +27 -0
- package/dist/components/breadcrumb.d.mts +38 -0
- package/dist/components/breadcrumb.mjs +70 -0
- package/dist/components/button-group.d.mts +28 -0
- package/dist/components/button-group.mjs +38 -0
- package/dist/components/button.d.mts +21 -0
- package/dist/components/button.mjs +47 -0
- package/dist/components/calendar.d.mts +30 -0
- package/dist/components/calendar.mjs +109 -0
- package/dist/components/card.d.mts +37 -0
- package/dist/components/card.mjs +56 -0
- package/dist/components/carousel.d.mts +56 -0
- package/dist/components/carousel.mjs +132 -0
- package/dist/components/chart.d.mts +78 -0
- package/dist/components/chart.mjs +146 -0
- package/dist/components/checkbox.d.mts +11 -0
- package/dist/components/checkbox.mjs +21 -0
- package/dist/components/collapsible.d.mts +15 -0
- package/dist/components/collapsible.mjs +24 -0
- package/dist/components/combobox.d.mts +81 -0
- package/dist/components/combobox.mjs +163 -0
- package/dist/components/command.d.mts +54 -0
- package/dist/components/command.mjs +88 -0
- package/dist/components/context-menu.d.mts +85 -0
- package/dist/components/context-menu.mjs +125 -0
- package/dist/components/dialog.d.mts +51 -0
- package/dist/components/dialog.mjs +96 -0
- package/dist/components/direction.d.mts +15 -0
- package/dist/components/direction.mjs +14 -0
- package/dist/components/drawer.d.mts +47 -0
- package/dist/components/drawer.mjs +79 -0
- package/dist/components/dropdown-menu.d.mts +87 -0
- package/dist/components/dropdown-menu.mjs +131 -0
- package/dist/components/empty.d.mts +35 -0
- package/dist/components/empty.mjs +59 -0
- package/dist/components/field.d.mts +64 -0
- package/dist/components/field.mjs +110 -0
- package/dist/components/hover-card.d.mts +22 -0
- package/dist/components/hover-card.mjs +33 -0
- package/dist/components/input-group.d.mts +43 -0
- package/dist/components/input-group.mjs +79 -0
- package/dist/components/input-otp.d.mts +28 -0
- package/dist/components/input-otp.mjs +47 -0
- package/dist/components/input.d.mts +11 -0
- package/dist/components/input.mjs +14 -0
- package/dist/components/item.d.mts +62 -0
- package/dist/components/item.mjs +117 -0
- package/dist/components/kbd.d.mts +13 -0
- package/dist/components/kbd.mjs +19 -0
- package/dist/components/label.d.mts +11 -0
- package/dist/components/label.mjs +15 -0
- package/dist/components/menubar.d.mts +90 -0
- package/dist/components/menubar.mjs +135 -0
- package/dist/components/native-select.d.mts +21 -0
- package/dist/components/native-select.mjs +37 -0
- package/dist/components/navigation-menu.d.mts +46 -0
- package/dist/components/navigation-menu.mjs +80 -0
- package/dist/components/pagination.d.mts +45 -0
- package/dist/components/pagination.mjs +80 -0
- package/dist/components/popover.d.mts +34 -0
- package/dist/components/popover.mjs +56 -0
- package/dist/components/progress.d.mts +12 -0
- package/dist/components/progress.mjs +20 -0
- package/dist/components/radio-group.d.mts +15 -0
- package/dist/components/radio-group.mjs +27 -0
- package/dist/components/resizable.d.mts +20 -0
- package/dist/components/resizable.mjs +28 -0
- package/dist/components/scroll-area.d.mts +17 -0
- package/dist/components/scroll-area.mjs +37 -0
- package/dist/components/select.d.mts +53 -0
- package/dist/components/select.mjs +100 -0
- package/dist/components/separator.d.mts +13 -0
- package/dist/components/separator.mjs +17 -0
- package/dist/components/sheet.d.mts +42 -0
- package/dist/components/sheet.mjs +90 -0
- package/dist/components/sidebar.d.mts +167 -0
- package/dist/components/sidebar.mjs +374 -0
- package/dist/components/skeleton.d.mts +9 -0
- package/dist/components/skeleton.mjs +12 -0
- package/dist/components/slider.d.mts +15 -0
- package/dist/components/slider.mjs +36 -0
- package/dist/components/sonner.d.mts +9 -0
- package/dist/components/sonner.mjs +30 -0
- package/dist/components/spinner.d.mts +9 -0
- package/dist/components/spinner.mjs +14 -0
- package/dist/components/switch.d.mts +14 -0
- package/dist/components/switch.mjs +20 -0
- package/dist/components/table.d.mts +38 -0
- package/dist/components/table.mjs +67 -0
- package/dist/components/tabs.d.mts +30 -0
- package/dist/components/tabs.mjs +46 -0
- package/dist/components/textarea.d.mts +10 -0
- package/dist/components/textarea.mjs +13 -0
- package/dist/components/toggle-group.d.mts +28 -0
- package/dist/components/toggle-group.mjs +51 -0
- package/dist/components/toggle.d.mts +19 -0
- package/dist/components/toggle.mjs +37 -0
- package/dist/components/tooltip.d.mts +23 -0
- package/dist/components/tooltip.mjs +36 -0
- package/dist/exports/components.d.mts +61 -0
- package/dist/exports/components.mjs +61 -0
- package/dist/exports/hooks.d.mts +2 -0
- package/dist/exports/hooks.mjs +2 -0
- package/dist/exports/lib.d.mts +2 -0
- package/dist/exports/lib.mjs +2 -0
- package/dist/hooks/use-mobile.d.mts +4 -0
- package/dist/hooks/use-mobile.mjs +18 -0
- package/package.json +1 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Accordion } from "radix-ui";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
//#region src/components/accordion.d.ts
|
|
6
|
+
declare function Accordion$1({
|
|
7
|
+
className,
|
|
8
|
+
...props
|
|
9
|
+
}: React.ComponentProps<typeof Accordion.Root>): _$react_jsx_runtime0.JSX.Element;
|
|
10
|
+
declare function AccordionItem({
|
|
11
|
+
className,
|
|
12
|
+
...props
|
|
13
|
+
}: React.ComponentProps<typeof Accordion.Item>): _$react_jsx_runtime0.JSX.Element;
|
|
14
|
+
declare function AccordionTrigger({
|
|
15
|
+
className,
|
|
16
|
+
children,
|
|
17
|
+
...props
|
|
18
|
+
}: React.ComponentProps<typeof Accordion.Trigger>): _$react_jsx_runtime0.JSX.Element;
|
|
19
|
+
declare function AccordionContent({
|
|
20
|
+
className,
|
|
21
|
+
children,
|
|
22
|
+
...props
|
|
23
|
+
}: React.ComponentProps<typeof Accordion.Content>): _$react_jsx_runtime0.JSX.Element;
|
|
24
|
+
//#endregion
|
|
25
|
+
export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.mjs";
|
|
3
|
+
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
4
|
+
import { Accordion } from "radix-ui";
|
|
5
|
+
import "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
//#region src/components/accordion.tsx
|
|
8
|
+
function Accordion$1({ className, ...props }) {
|
|
9
|
+
return /* @__PURE__ */ jsx(Accordion.Root, {
|
|
10
|
+
"data-slot": "accordion",
|
|
11
|
+
className: cn("flex w-full flex-col", className),
|
|
12
|
+
...props
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function AccordionItem({ className, ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx(Accordion.Item, {
|
|
17
|
+
"data-slot": "accordion-item",
|
|
18
|
+
className: cn("not-last:border-b", className),
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function AccordionTrigger({ className, children, ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx(Accordion.Header, {
|
|
24
|
+
className: "flex",
|
|
25
|
+
children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
|
|
26
|
+
"data-slot": "accordion-trigger",
|
|
27
|
+
className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
|
|
28
|
+
...props,
|
|
29
|
+
children: [
|
|
30
|
+
children,
|
|
31
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
32
|
+
"data-slot": "accordion-trigger-icon",
|
|
33
|
+
className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ jsx(ChevronUpIcon, {
|
|
36
|
+
"data-slot": "accordion-trigger-icon",
|
|
37
|
+
className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
})
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
function AccordionContent({ className, children, ...props }) {
|
|
44
|
+
return /* @__PURE__ */ jsx(Accordion.Content, {
|
|
45
|
+
"data-slot": "accordion-content",
|
|
46
|
+
className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
|
|
47
|
+
...props,
|
|
48
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
49
|
+
className: cn("h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
|
|
50
|
+
children
|
|
51
|
+
})
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
//#endregion
|
|
55
|
+
export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { Button } from "../button.mjs";
|
|
2
|
+
import { HoverCard, HoverCardContent, HoverCardTrigger } from "../hover-card.mjs";
|
|
3
|
+
import { ComponentProps, HTMLAttributes, ReactNode } from "react";
|
|
4
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
|
+
import { FileUIPart, SourceDocumentUIPart } from "ai";
|
|
6
|
+
|
|
7
|
+
//#region src/components/ai-elements/attachments.d.ts
|
|
8
|
+
type AttachmentData = (FileUIPart & {
|
|
9
|
+
id: string;
|
|
10
|
+
}) | (SourceDocumentUIPart & {
|
|
11
|
+
id: string;
|
|
12
|
+
});
|
|
13
|
+
type AttachmentMediaCategory = 'image' | 'video' | 'audio' | 'document' | 'source' | 'unknown';
|
|
14
|
+
type AttachmentVariant = 'grid' | 'inline' | 'list';
|
|
15
|
+
declare const getMediaCategory: (data: AttachmentData) => AttachmentMediaCategory;
|
|
16
|
+
declare const getAttachmentLabel: (data: AttachmentData) => string;
|
|
17
|
+
interface AttachmentsContextValue {
|
|
18
|
+
variant: AttachmentVariant;
|
|
19
|
+
}
|
|
20
|
+
interface AttachmentContextValue {
|
|
21
|
+
data: AttachmentData;
|
|
22
|
+
mediaCategory: AttachmentMediaCategory;
|
|
23
|
+
onRemove?: () => void;
|
|
24
|
+
variant: AttachmentVariant;
|
|
25
|
+
}
|
|
26
|
+
declare const useAttachmentsContext: () => AttachmentsContextValue;
|
|
27
|
+
declare const useAttachmentContext: () => AttachmentContextValue;
|
|
28
|
+
type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {
|
|
29
|
+
variant?: AttachmentVariant;
|
|
30
|
+
};
|
|
31
|
+
declare const Attachments: ({
|
|
32
|
+
variant,
|
|
33
|
+
className,
|
|
34
|
+
children,
|
|
35
|
+
...props
|
|
36
|
+
}: AttachmentsProps) => _$react_jsx_runtime0.JSX.Element;
|
|
37
|
+
type AttachmentProps = HTMLAttributes<HTMLDivElement> & {
|
|
38
|
+
data: AttachmentData;
|
|
39
|
+
onRemove?: () => void;
|
|
40
|
+
};
|
|
41
|
+
declare const Attachment: ({
|
|
42
|
+
data,
|
|
43
|
+
onRemove,
|
|
44
|
+
className,
|
|
45
|
+
children,
|
|
46
|
+
...props
|
|
47
|
+
}: AttachmentProps) => _$react_jsx_runtime0.JSX.Element;
|
|
48
|
+
type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {
|
|
49
|
+
fallbackIcon?: ReactNode;
|
|
50
|
+
};
|
|
51
|
+
declare const AttachmentPreview: ({
|
|
52
|
+
fallbackIcon,
|
|
53
|
+
className,
|
|
54
|
+
...props
|
|
55
|
+
}: AttachmentPreviewProps) => _$react_jsx_runtime0.JSX.Element;
|
|
56
|
+
type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {
|
|
57
|
+
showMediaType?: boolean;
|
|
58
|
+
};
|
|
59
|
+
declare const AttachmentInfo: ({
|
|
60
|
+
showMediaType,
|
|
61
|
+
className,
|
|
62
|
+
...props
|
|
63
|
+
}: AttachmentInfoProps) => _$react_jsx_runtime0.JSX.Element | null;
|
|
64
|
+
type AttachmentRemoveProps = ComponentProps<typeof Button> & {
|
|
65
|
+
label?: string;
|
|
66
|
+
};
|
|
67
|
+
declare const AttachmentRemove: ({
|
|
68
|
+
label,
|
|
69
|
+
className,
|
|
70
|
+
children,
|
|
71
|
+
...props
|
|
72
|
+
}: AttachmentRemoveProps) => _$react_jsx_runtime0.JSX.Element | null;
|
|
73
|
+
type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;
|
|
74
|
+
declare const AttachmentHoverCard: ({
|
|
75
|
+
openDelay,
|
|
76
|
+
closeDelay,
|
|
77
|
+
...props
|
|
78
|
+
}: AttachmentHoverCardProps) => _$react_jsx_runtime0.JSX.Element;
|
|
79
|
+
type AttachmentHoverCardTriggerProps = ComponentProps<typeof HoverCardTrigger>;
|
|
80
|
+
declare const AttachmentHoverCardTrigger: (props: AttachmentHoverCardTriggerProps) => _$react_jsx_runtime0.JSX.Element;
|
|
81
|
+
type AttachmentHoverCardContentProps = ComponentProps<typeof HoverCardContent>;
|
|
82
|
+
declare const AttachmentHoverCardContent: ({
|
|
83
|
+
align,
|
|
84
|
+
className,
|
|
85
|
+
...props
|
|
86
|
+
}: AttachmentHoverCardContentProps) => _$react_jsx_runtime0.JSX.Element;
|
|
87
|
+
type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
|
|
88
|
+
declare const AttachmentEmpty: ({
|
|
89
|
+
className,
|
|
90
|
+
children,
|
|
91
|
+
...props
|
|
92
|
+
}: AttachmentEmptyProps) => _$react_jsx_runtime0.JSX.Element;
|
|
93
|
+
//#endregion
|
|
94
|
+
export { Attachment, AttachmentData, AttachmentEmpty, AttachmentEmptyProps, AttachmentHoverCard, AttachmentHoverCardContent, AttachmentHoverCardContentProps, AttachmentHoverCardProps, AttachmentHoverCardTrigger, AttachmentHoverCardTriggerProps, AttachmentInfo, AttachmentInfoProps, AttachmentMediaCategory, AttachmentPreview, AttachmentPreviewProps, AttachmentProps, AttachmentRemove, AttachmentRemoveProps, AttachmentVariant, Attachments, AttachmentsProps, getAttachmentLabel, getMediaCategory, useAttachmentContext, useAttachmentsContext };
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.mjs";
|
|
3
|
+
import { Button } from "../button.mjs";
|
|
4
|
+
import { HoverCard, HoverCardContent, HoverCardTrigger } from "../hover-card.mjs";
|
|
5
|
+
import { FileTextIcon, GlobeIcon, ImageIcon, Music2Icon, PaperclipIcon, VideoIcon, XIcon } from "lucide-react";
|
|
6
|
+
import { createContext, useCallback, useContext, useMemo } from "react";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
//#region src/components/ai-elements/attachments.tsx
|
|
9
|
+
const mediaCategoryIcons = {
|
|
10
|
+
audio: Music2Icon,
|
|
11
|
+
document: FileTextIcon,
|
|
12
|
+
image: ImageIcon,
|
|
13
|
+
source: GlobeIcon,
|
|
14
|
+
unknown: PaperclipIcon,
|
|
15
|
+
video: VideoIcon
|
|
16
|
+
};
|
|
17
|
+
const getMediaCategory = (data) => {
|
|
18
|
+
if (data.type === "source-document") return "source";
|
|
19
|
+
const mediaType = data.mediaType ?? "";
|
|
20
|
+
if (mediaType.startsWith("image/")) return "image";
|
|
21
|
+
if (mediaType.startsWith("video/")) return "video";
|
|
22
|
+
if (mediaType.startsWith("audio/")) return "audio";
|
|
23
|
+
if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) return "document";
|
|
24
|
+
return "unknown";
|
|
25
|
+
};
|
|
26
|
+
const getAttachmentLabel = (data) => {
|
|
27
|
+
if (data.type === "source-document") return data.title || data.filename || "Source";
|
|
28
|
+
const category = getMediaCategory(data);
|
|
29
|
+
return data.filename || (category === "image" ? "Image" : "Attachment");
|
|
30
|
+
};
|
|
31
|
+
const renderAttachmentImage = (url, filename, isGrid) => isGrid ? /* @__PURE__ */ jsx("img", {
|
|
32
|
+
alt: filename || "Image",
|
|
33
|
+
className: "size-full object-cover",
|
|
34
|
+
height: 96,
|
|
35
|
+
src: url,
|
|
36
|
+
width: 96
|
|
37
|
+
}) : /* @__PURE__ */ jsx("img", {
|
|
38
|
+
alt: filename || "Image",
|
|
39
|
+
className: "size-full rounded object-cover",
|
|
40
|
+
height: 20,
|
|
41
|
+
src: url,
|
|
42
|
+
width: 20
|
|
43
|
+
});
|
|
44
|
+
const AttachmentsContext = createContext(null);
|
|
45
|
+
const AttachmentContext = createContext(null);
|
|
46
|
+
const useAttachmentsContext = () => useContext(AttachmentsContext) ?? { variant: "grid" };
|
|
47
|
+
const useAttachmentContext = () => {
|
|
48
|
+
const ctx = useContext(AttachmentContext);
|
|
49
|
+
if (!ctx) throw new Error("Attachment components must be used within <Attachment>");
|
|
50
|
+
return ctx;
|
|
51
|
+
};
|
|
52
|
+
const Attachments = ({ variant = "grid", className, children, ...props }) => {
|
|
53
|
+
const contextValue = useMemo(() => ({ variant }), [variant]);
|
|
54
|
+
return /* @__PURE__ */ jsx(AttachmentsContext.Provider, {
|
|
55
|
+
value: contextValue,
|
|
56
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
57
|
+
className: cn("flex items-start", variant === "list" ? "flex-col gap-2" : "flex-wrap gap-2", variant === "grid" && "ml-auto w-fit", className),
|
|
58
|
+
...props,
|
|
59
|
+
children
|
|
60
|
+
})
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
const Attachment = ({ data, onRemove, className, children, ...props }) => {
|
|
64
|
+
const { variant } = useAttachmentsContext();
|
|
65
|
+
const mediaCategory = getMediaCategory(data);
|
|
66
|
+
const contextValue = useMemo(() => ({
|
|
67
|
+
data,
|
|
68
|
+
mediaCategory,
|
|
69
|
+
onRemove,
|
|
70
|
+
variant
|
|
71
|
+
}), [
|
|
72
|
+
data,
|
|
73
|
+
mediaCategory,
|
|
74
|
+
onRemove,
|
|
75
|
+
variant
|
|
76
|
+
]);
|
|
77
|
+
return /* @__PURE__ */ jsx(AttachmentContext.Provider, {
|
|
78
|
+
value: contextValue,
|
|
79
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
80
|
+
className: cn("group relative", variant === "grid" && "size-24 overflow-hidden rounded-lg", variant === "inline" && [
|
|
81
|
+
"flex h-8 cursor-pointer select-none items-center gap-1.5",
|
|
82
|
+
"rounded-md border border-border px-1.5",
|
|
83
|
+
"font-medium text-sm transition-all",
|
|
84
|
+
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
|
|
85
|
+
], variant === "list" && ["flex w-full items-center gap-3 rounded-lg border p-3", "hover:bg-accent/50"], className),
|
|
86
|
+
...props,
|
|
87
|
+
children
|
|
88
|
+
})
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
const AttachmentPreview = ({ fallbackIcon, className, ...props }) => {
|
|
92
|
+
const { data, mediaCategory, variant } = useAttachmentContext();
|
|
93
|
+
const iconSize = variant === "inline" ? "size-3" : "size-4";
|
|
94
|
+
const renderIcon = (Icon) => /* @__PURE__ */ jsx(Icon, { className: cn(iconSize, "text-muted-foreground") });
|
|
95
|
+
const renderContent = () => {
|
|
96
|
+
if (mediaCategory === "image" && data.type === "file" && data.url) return renderAttachmentImage(data.url, data.filename, variant === "grid");
|
|
97
|
+
if (mediaCategory === "video" && data.type === "file" && data.url) return /* @__PURE__ */ jsx("video", {
|
|
98
|
+
className: "size-full object-cover",
|
|
99
|
+
muted: true,
|
|
100
|
+
src: data.url
|
|
101
|
+
});
|
|
102
|
+
const Icon = mediaCategoryIcons[mediaCategory];
|
|
103
|
+
return fallbackIcon ?? renderIcon(Icon);
|
|
104
|
+
};
|
|
105
|
+
return /* @__PURE__ */ jsx("div", {
|
|
106
|
+
className: cn("flex shrink-0 items-center justify-center overflow-hidden", variant === "grid" && "size-full bg-muted", variant === "inline" && "size-5 rounded bg-background", variant === "list" && "size-12 rounded bg-muted", className),
|
|
107
|
+
...props,
|
|
108
|
+
children: renderContent()
|
|
109
|
+
});
|
|
110
|
+
};
|
|
111
|
+
const AttachmentInfo = ({ showMediaType = false, className, ...props }) => {
|
|
112
|
+
const { data, variant } = useAttachmentContext();
|
|
113
|
+
const label = getAttachmentLabel(data);
|
|
114
|
+
if (variant === "grid") return null;
|
|
115
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
116
|
+
className: cn("min-w-0 flex-1", className),
|
|
117
|
+
...props,
|
|
118
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
119
|
+
className: "block truncate",
|
|
120
|
+
children: label
|
|
121
|
+
}), showMediaType && data.mediaType && /* @__PURE__ */ jsx("span", {
|
|
122
|
+
className: "block truncate text-muted-foreground text-xs",
|
|
123
|
+
children: data.mediaType
|
|
124
|
+
})]
|
|
125
|
+
});
|
|
126
|
+
};
|
|
127
|
+
const AttachmentRemove = ({ label = "Remove", className, children, ...props }) => {
|
|
128
|
+
const { onRemove, variant } = useAttachmentContext();
|
|
129
|
+
const handleClick = useCallback((e) => {
|
|
130
|
+
e.stopPropagation();
|
|
131
|
+
onRemove?.();
|
|
132
|
+
}, [onRemove]);
|
|
133
|
+
if (!onRemove) return null;
|
|
134
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
135
|
+
"aria-label": label,
|
|
136
|
+
className: cn(variant === "grid" && [
|
|
137
|
+
"absolute top-2 right-2 size-6 rounded-full p-0",
|
|
138
|
+
"bg-background/80 backdrop-blur-sm",
|
|
139
|
+
"opacity-0 transition-opacity group-hover:opacity-100",
|
|
140
|
+
"hover:bg-background",
|
|
141
|
+
"[&>svg]:size-3"
|
|
142
|
+
], variant === "inline" && [
|
|
143
|
+
"size-5 rounded p-0",
|
|
144
|
+
"opacity-0 transition-opacity group-hover:opacity-100",
|
|
145
|
+
"[&>svg]:size-2.5"
|
|
146
|
+
], variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"], className),
|
|
147
|
+
onClick: handleClick,
|
|
148
|
+
type: "button",
|
|
149
|
+
variant: "ghost",
|
|
150
|
+
...props,
|
|
151
|
+
children: [children ?? /* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
152
|
+
className: "sr-only",
|
|
153
|
+
children: label
|
|
154
|
+
})]
|
|
155
|
+
});
|
|
156
|
+
};
|
|
157
|
+
const AttachmentHoverCard = ({ openDelay = 0, closeDelay = 0, ...props }) => /* @__PURE__ */ jsx(HoverCard, {
|
|
158
|
+
closeDelay,
|
|
159
|
+
openDelay,
|
|
160
|
+
...props
|
|
161
|
+
});
|
|
162
|
+
const AttachmentHoverCardTrigger = (props) => /* @__PURE__ */ jsx(HoverCardTrigger, { ...props });
|
|
163
|
+
const AttachmentHoverCardContent = ({ align = "start", className, ...props }) => /* @__PURE__ */ jsx(HoverCardContent, {
|
|
164
|
+
align,
|
|
165
|
+
className: cn("w-auto p-2", className),
|
|
166
|
+
...props
|
|
167
|
+
});
|
|
168
|
+
const AttachmentEmpty = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
169
|
+
className: cn("flex items-center justify-center p-4 text-muted-foreground text-sm", className),
|
|
170
|
+
...props,
|
|
171
|
+
children: children ?? "No attachments"
|
|
172
|
+
});
|
|
173
|
+
//#endregion
|
|
174
|
+
export { Attachment, AttachmentEmpty, AttachmentHoverCard, AttachmentHoverCardContent, AttachmentHoverCardTrigger, AttachmentInfo, AttachmentPreview, AttachmentRemove, Attachments, getAttachmentLabel, getMediaCategory, useAttachmentContext, useAttachmentsContext };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Button } from "../button.mjs";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
3
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
+
import { StickToBottom } from "use-stick-to-bottom";
|
|
5
|
+
import { UIMessage } from "ai";
|
|
6
|
+
|
|
7
|
+
//#region src/components/ai-elements/conversation.d.ts
|
|
8
|
+
type ConversationProps = ComponentProps<typeof StickToBottom>;
|
|
9
|
+
declare const Conversation: ({
|
|
10
|
+
className,
|
|
11
|
+
...props
|
|
12
|
+
}: ConversationProps) => _$react_jsx_runtime0.JSX.Element;
|
|
13
|
+
type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
|
|
14
|
+
declare const ConversationContent: ({
|
|
15
|
+
className,
|
|
16
|
+
...props
|
|
17
|
+
}: ConversationContentProps) => _$react_jsx_runtime0.JSX.Element;
|
|
18
|
+
type ConversationEmptyStateProps = ComponentProps<'div'> & {
|
|
19
|
+
title?: string;
|
|
20
|
+
description?: string;
|
|
21
|
+
icon?: React.ReactNode;
|
|
22
|
+
};
|
|
23
|
+
declare const ConversationEmptyState: ({
|
|
24
|
+
className,
|
|
25
|
+
title,
|
|
26
|
+
description,
|
|
27
|
+
icon,
|
|
28
|
+
children,
|
|
29
|
+
...props
|
|
30
|
+
}: ConversationEmptyStateProps) => _$react_jsx_runtime0.JSX.Element;
|
|
31
|
+
type ConversationScrollButtonProps = ComponentProps<typeof Button>;
|
|
32
|
+
declare const ConversationScrollButton: ({
|
|
33
|
+
className,
|
|
34
|
+
...props
|
|
35
|
+
}: ConversationScrollButtonProps) => false | _$react_jsx_runtime0.JSX.Element;
|
|
36
|
+
type ConversationDownloadProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
|
|
37
|
+
messages: UIMessage[];
|
|
38
|
+
filename?: string;
|
|
39
|
+
formatMessage?: (message: UIMessage, index: number) => string;
|
|
40
|
+
};
|
|
41
|
+
declare const messagesToMarkdown: (messages: UIMessage[], formatMessage?: (message: UIMessage, index: number) => string) => string;
|
|
42
|
+
declare const ConversationDownload: ({
|
|
43
|
+
messages,
|
|
44
|
+
filename,
|
|
45
|
+
formatMessage,
|
|
46
|
+
className,
|
|
47
|
+
children,
|
|
48
|
+
...props
|
|
49
|
+
}: ConversationDownloadProps) => _$react_jsx_runtime0.JSX.Element;
|
|
50
|
+
//#endregion
|
|
51
|
+
export { Conversation, ConversationContent, ConversationContentProps, ConversationDownload, ConversationDownloadProps, ConversationEmptyState, ConversationEmptyStateProps, ConversationProps, ConversationScrollButton, ConversationScrollButtonProps, messagesToMarkdown };
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../../lib/utils.mjs";
|
|
3
|
+
import { Button } from "../button.mjs";
|
|
4
|
+
import { ArrowDownIcon, DownloadIcon } from "lucide-react";
|
|
5
|
+
import { useCallback } from "react";
|
|
6
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
|
|
8
|
+
//#region src/components/ai-elements/conversation.tsx
|
|
9
|
+
const Conversation = ({ className, ...props }) => /* @__PURE__ */ jsx(StickToBottom, {
|
|
10
|
+
className: cn("relative flex-1 overflow-y-hidden", className),
|
|
11
|
+
initial: "smooth",
|
|
12
|
+
resize: "smooth",
|
|
13
|
+
role: "log",
|
|
14
|
+
...props
|
|
15
|
+
});
|
|
16
|
+
const ConversationContent = ({ className, ...props }) => /* @__PURE__ */ jsx(StickToBottom.Content, {
|
|
17
|
+
className: cn("flex flex-col gap-8 p-4", className),
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
const ConversationEmptyState = ({ className, title = "No messages yet", description = "Start a conversation to see messages here", icon, children, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
21
|
+
className: cn("flex size-full flex-col items-center justify-center gap-3 p-8 text-center", className),
|
|
22
|
+
...props,
|
|
23
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx("div", {
|
|
24
|
+
className: "text-muted-foreground",
|
|
25
|
+
children: icon
|
|
26
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
27
|
+
className: "space-y-1",
|
|
28
|
+
children: [/* @__PURE__ */ jsx("h3", {
|
|
29
|
+
className: "font-medium text-sm",
|
|
30
|
+
children: title
|
|
31
|
+
}), description && /* @__PURE__ */ jsx("p", {
|
|
32
|
+
className: "text-muted-foreground text-sm",
|
|
33
|
+
children: description
|
|
34
|
+
})]
|
|
35
|
+
})] })
|
|
36
|
+
});
|
|
37
|
+
const ConversationScrollButton = ({ className, ...props }) => {
|
|
38
|
+
const { isAtBottom, scrollToBottom } = useStickToBottomContext();
|
|
39
|
+
const handleScrollToBottom = useCallback(() => {
|
|
40
|
+
scrollToBottom();
|
|
41
|
+
}, [scrollToBottom]);
|
|
42
|
+
return !isAtBottom && /* @__PURE__ */ jsx(Button, {
|
|
43
|
+
className: cn("absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted", className),
|
|
44
|
+
onClick: handleScrollToBottom,
|
|
45
|
+
size: "icon",
|
|
46
|
+
type: "button",
|
|
47
|
+
variant: "outline",
|
|
48
|
+
...props,
|
|
49
|
+
children: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" })
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
const getMessageText = (message) => message.parts.filter((part) => part.type === "text").map((part) => part.text).join("");
|
|
53
|
+
const defaultFormatMessage = (message) => {
|
|
54
|
+
return `**${message.role.charAt(0).toUpperCase() + message.role.slice(1)}:** ${getMessageText(message)}`;
|
|
55
|
+
};
|
|
56
|
+
const messagesToMarkdown = (messages, formatMessage = defaultFormatMessage) => messages.map((msg, i) => formatMessage(msg, i)).join("\n\n");
|
|
57
|
+
const ConversationDownload = ({ messages, filename = "conversation.md", formatMessage = defaultFormatMessage, className, children, ...props }) => {
|
|
58
|
+
const handleDownload = useCallback(() => {
|
|
59
|
+
const markdown = messagesToMarkdown(messages, formatMessage);
|
|
60
|
+
const blob = new Blob([markdown], { type: "text/markdown" });
|
|
61
|
+
const url = URL.createObjectURL(blob);
|
|
62
|
+
const link = document.createElement("a");
|
|
63
|
+
link.href = url;
|
|
64
|
+
link.download = filename;
|
|
65
|
+
document.body.append(link);
|
|
66
|
+
link.click();
|
|
67
|
+
link.remove();
|
|
68
|
+
URL.revokeObjectURL(url);
|
|
69
|
+
}, [
|
|
70
|
+
messages,
|
|
71
|
+
filename,
|
|
72
|
+
formatMessage
|
|
73
|
+
]);
|
|
74
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
75
|
+
className: cn("absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted", className),
|
|
76
|
+
onClick: handleDownload,
|
|
77
|
+
size: "icon",
|
|
78
|
+
type: "button",
|
|
79
|
+
variant: "outline",
|
|
80
|
+
...props,
|
|
81
|
+
children: children ?? /* @__PURE__ */ jsx(DownloadIcon, { className: "size-4" })
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
//#endregion
|
|
85
|
+
export { Conversation, ConversationContent, ConversationDownload, ConversationEmptyState, ConversationScrollButton, messagesToMarkdown };
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { Button } from "../button.mjs";
|
|
2
|
+
import { ButtonGroup } from "../button-group.mjs";
|
|
3
|
+
import * as _$react from "react";
|
|
4
|
+
import { ComponentProps, HTMLAttributes } from "react";
|
|
5
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
6
|
+
import { Streamdown } from "streamdown";
|
|
7
|
+
import { UIMessage } from "ai";
|
|
8
|
+
|
|
9
|
+
//#region src/components/ai-elements/message.d.ts
|
|
10
|
+
type MessageProps = HTMLAttributes<HTMLDivElement> & {
|
|
11
|
+
from: UIMessage['role'];
|
|
12
|
+
};
|
|
13
|
+
declare const Message: ({
|
|
14
|
+
className,
|
|
15
|
+
from,
|
|
16
|
+
...props
|
|
17
|
+
}: MessageProps) => _$react_jsx_runtime0.JSX.Element;
|
|
18
|
+
type MessageContentProps = HTMLAttributes<HTMLDivElement>;
|
|
19
|
+
declare const MessageContent: ({
|
|
20
|
+
children,
|
|
21
|
+
className,
|
|
22
|
+
...props
|
|
23
|
+
}: MessageContentProps) => _$react_jsx_runtime0.JSX.Element;
|
|
24
|
+
type MessageActionsProps = ComponentProps<'div'>;
|
|
25
|
+
declare const MessageActions: ({
|
|
26
|
+
className,
|
|
27
|
+
children,
|
|
28
|
+
...props
|
|
29
|
+
}: MessageActionsProps) => _$react_jsx_runtime0.JSX.Element;
|
|
30
|
+
type MessageActionProps = ComponentProps<typeof Button> & {
|
|
31
|
+
tooltip?: string;
|
|
32
|
+
label?: string;
|
|
33
|
+
};
|
|
34
|
+
declare const MessageAction: ({
|
|
35
|
+
tooltip,
|
|
36
|
+
children,
|
|
37
|
+
label,
|
|
38
|
+
variant,
|
|
39
|
+
size,
|
|
40
|
+
...props
|
|
41
|
+
}: MessageActionProps) => _$react_jsx_runtime0.JSX.Element;
|
|
42
|
+
type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
|
|
43
|
+
defaultBranch?: number;
|
|
44
|
+
onBranchChange?: (branchIndex: number) => void;
|
|
45
|
+
};
|
|
46
|
+
declare const MessageBranch: ({
|
|
47
|
+
defaultBranch,
|
|
48
|
+
onBranchChange,
|
|
49
|
+
className,
|
|
50
|
+
...props
|
|
51
|
+
}: MessageBranchProps) => _$react_jsx_runtime0.JSX.Element;
|
|
52
|
+
type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
|
|
53
|
+
declare const MessageBranchContent: ({
|
|
54
|
+
children,
|
|
55
|
+
...props
|
|
56
|
+
}: MessageBranchContentProps) => _$react_jsx_runtime0.JSX.Element[];
|
|
57
|
+
type MessageBranchSelectorProps = ComponentProps<typeof ButtonGroup>;
|
|
58
|
+
declare const MessageBranchSelector: ({
|
|
59
|
+
className,
|
|
60
|
+
...props
|
|
61
|
+
}: MessageBranchSelectorProps) => _$react_jsx_runtime0.JSX.Element | null;
|
|
62
|
+
type MessageBranchPreviousProps = ComponentProps<typeof Button>;
|
|
63
|
+
declare const MessageBranchPrevious: ({
|
|
64
|
+
children,
|
|
65
|
+
...props
|
|
66
|
+
}: MessageBranchPreviousProps) => _$react_jsx_runtime0.JSX.Element;
|
|
67
|
+
type MessageBranchNextProps = ComponentProps<typeof Button>;
|
|
68
|
+
declare const MessageBranchNext: ({
|
|
69
|
+
children,
|
|
70
|
+
...props
|
|
71
|
+
}: MessageBranchNextProps) => _$react_jsx_runtime0.JSX.Element;
|
|
72
|
+
type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
|
|
73
|
+
declare const MessageBranchPage: ({
|
|
74
|
+
className,
|
|
75
|
+
...props
|
|
76
|
+
}: MessageBranchPageProps) => _$react_jsx_runtime0.JSX.Element;
|
|
77
|
+
type MessageResponseProps = ComponentProps<typeof Streamdown>;
|
|
78
|
+
declare const MessageResponse: _$react.MemoExoticComponent<({
|
|
79
|
+
className,
|
|
80
|
+
...props
|
|
81
|
+
}: MessageResponseProps) => _$react_jsx_runtime0.JSX.Element>;
|
|
82
|
+
type MessageToolbarProps = ComponentProps<'div'>;
|
|
83
|
+
declare const MessageToolbar: ({
|
|
84
|
+
className,
|
|
85
|
+
children,
|
|
86
|
+
...props
|
|
87
|
+
}: MessageToolbarProps) => _$react_jsx_runtime0.JSX.Element;
|
|
88
|
+
//#endregion
|
|
89
|
+
export { Message, MessageAction, MessageActionProps, MessageActions, MessageActionsProps, MessageBranch, MessageBranchContent, MessageBranchContentProps, MessageBranchNext, MessageBranchNextProps, MessageBranchPage, MessageBranchPageProps, MessageBranchPrevious, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelector, MessageBranchSelectorProps, MessageContent, MessageContentProps, MessageProps, MessageResponse, MessageResponseProps, MessageToolbar, MessageToolbarProps };
|