@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/ai/_internal/collapsible.mjs

@@ -1,12 +1,13 @@
 "use client";
-import { FOCUS_RING_NO_BORDER } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import collapsible_module_default from "./collapsible.module.mjs";
+import { clsx } from "clsx";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai/_internal/collapsible.tsx
-const Collapsible = ({ icon, label, isOpen, defaultOpen = false, onChange, children }) => {
+const Collapsible = ({ icon, label, isOpen, defaultOpen = false, onChange, footer, triggerId, children }) => {
 	const [open, setOpen] = useControllableState({
 		value: isOpen,
 		defaultValue: defaultOpen,
@@ -14,35 +15,43 @@ const Collapsible = ({ icon, label, isOpen, defaultOpen = false, onChange, child
 	});
 	const panelId = useId();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "border-border-mute bg-bg-subtle overflow-hidden rounded-xl border text-sm",
-		children: [/* @__PURE__ */ jsxs("button", {
-			"aria-controls": panelId,
-			"aria-expanded": open,
-			className: cn("flex w-full items-center gap-2 px-3 py-2 text-left text-fg-mute transition-colors duration-150 ease-out hover:bg-bg-mute", FOCUS_RING_NO_BORDER),
-			onClick: () => {
-				setOpen(!open);
-			},
-			type: "button",
-			children: [
-				icon !== void 0 && /* @__PURE__ */ jsx("span", {
-					className: "flex shrink-0 items-center",
-					children: icon
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 truncate",
-					children: label
-				}),
-				/* @__PURE__ */ jsx(ChevronIcon, {
-					direction: open ? "up" : "down",
-					size: "sm"
-				})
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "px-3 pt-2 pb-3",
-			hidden: !open,
-			id: panelId,
-			children
-		})]
+		className: collapsible_module_default.root,
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				"aria-controls": panelId,
+				"aria-expanded": open,
+				className: clsx(collapsible_module_default.trigger, focus_ring_module_default.ringNoBorder),
+				id: triggerId,
+				onClick: () => {
+					setOpen(!open);
+				},
+				type: "button",
+				children: [
+					icon !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: collapsible_module_default.icon,
+						children: icon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: collapsible_module_default.label,
+						children: label
+					}),
+					/* @__PURE__ */ jsx(ChevronIcon, {
+						direction: open ? "up" : "down",
+						size: "sm"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: collapsible_module_default.panel,
+				hidden: !open,
+				id: panelId,
+				children
+			}),
+			footer !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: collapsible_module_default.footer,
+				children: footer
+			})
+		]
 	});
 };
 //#endregion

package/dist/components/ai/_internal/collapsible.module.mjs

@@ -0,0 +1,12 @@
+import './collapsible.css';
+//#region src/components/ai/_internal/collapsible.module.css
+var collapsible_module_default = {
+	"footer": "_3nLiW_footer",
+	"icon": "_3nLiW_icon",
+	"label": "_3nLiW_label",
+	"panel": "_3nLiW_panel",
+	"root": "_3nLiW_root",
+	"trigger": "_3nLiW_trigger"
+};
+//#endregion
+export { collapsible_module_default as default };

package/dist/components/ai/_internal/icons.d.mts

@@ -0,0 +1,8 @@
+import { BaseIconProps } from "../../icons/base.mjs";
+import { FC } from "react";
+//#region src/components/ai/_internal/icons.d.ts
+type IconProps = Partial<BaseIconProps>;
+export declare const AttachIcon: FC<IconProps>;
+export declare const FileIcon: FC<IconProps>;
+//#endregion
+export {};

package/dist/components/ai/_internal/icons.mjs

@@ -0,0 +1,14 @@
+import { BaseIcon } from "../../icons/base.mjs";
+import { File, Paperclip } from "../../icons/lucide-imports.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai/_internal/icons.tsx
+const AttachIcon = ({ size = "md" }) => /* @__PURE__ */ jsx(BaseIcon, {
+	renderItem: (props) => /* @__PURE__ */ jsx(Paperclip, { ...props }),
+	size
+});
+const FileIcon = ({ size = "md" }) => /* @__PURE__ */ jsx(BaseIcon, {
+	renderItem: (props) => /* @__PURE__ */ jsx(File, { ...props }),
+	size
+});
+//#endregion
+export { AttachIcon, FileIcon };

package/dist/components/ai/_internal/streaming-cursor.css

@@ -0,0 +1,28 @@
+@layer properties, theme, base;
+
+@layer components {
+  .oVIF0W_root {
+    width: calc(var(--spacing) * .5);
+    height: 1.1em;
+    margin-left: calc(var(--spacing) * .5);
+    border-radius: var(--radius-xs);
+    background-color: var(--color-fg-base);
+    display: inline-block;
+    translate: 0 .15em;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation-name: oVIF0W_pulse;
+      animation-duration: var(--duration-pulse);
+      animation-timing-function: var(--easing-pulse);
+      animation-iteration-count: infinite;
+    }
+  }
+
+  @keyframes oVIF0W_pulse {
+    50% {
+      opacity: .5;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/ai/_internal/streaming-cursor.d.mts

@@ -1,5 +1,4 @@
 import { FC } from "react";
 //#region src/components/ai/_internal/streaming-cursor.d.ts
-declare const StreamingCursor: FC;
-//#endregion
-export { StreamingCursor };
+export declare const StreamingCursor: FC;
+//#endregion

package/dist/components/ai/_internal/streaming-cursor.mjs

@@ -1,8 +1,9 @@
+import streaming_cursor_module_default from "./streaming-cursor.module.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai/_internal/streaming-cursor.tsx
 const StreamingCursor = () => /* @__PURE__ */ jsx("span", {
 	"aria-hidden": true,
-	className: "bg-fg-base ml-0.5 inline-block h-[1.1em] w-0.5 translate-y-[0.15em] rounded-xs motion-safe:animate-pulse"
+	className: streaming_cursor_module_default.root
 });
 //#endregion
 export { StreamingCursor };

package/dist/components/ai/_internal/streaming-cursor.module.mjs

@@ -0,0 +1,8 @@
+import './streaming-cursor.css';
+//#region src/components/ai/_internal/streaming-cursor.module.css
+var streaming_cursor_module_default = {
+	"pulse": "oVIF0W_pulse",
+	"root": "oVIF0W_root"
+};
+//#endregion
+export { streaming_cursor_module_default as default };

package/dist/components/ai/attachment/attachment.css

@@ -0,0 +1,17 @@
+@layer properties, theme, base;
+
+@layer components {
+  .HRTevW_list {
+    gap: calc(var(--spacing) * 2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .HRTevW_image {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@layer utilities;

package/dist/components/ai/attachment/attachment.d.mts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from "react";
+//#region src/components/ai/attachment/attachment.d.ts
+type ListProps = {
+  label?: string;
+  children: ReactNode;
+};
+export declare const List: FC<ListProps>;
+type ItemProps = {
+  url: string;
+  mediaType: string;
+  filename?: string;
+};
+export declare const Item: FC<ItemProps>;
+//#endregion
+export {};

package/dist/components/ai/attachment/attachment.mjs

@@ -0,0 +1,25 @@
+import { getMessages } from "../../../i18n/current.mjs";
+import { AttachmentPreview, isImageMediaType } from "../_internal/attachment-preview.mjs";
+import attachment_module_default from "./attachment.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ai/attachment/attachment.tsx
+const List = ({ label, children }) => {
+	const messages = getMessages();
+	return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label ?? messages.attachments,
+		className: attachment_module_default.list,
+		children
+	});
+};
+const Item = ({ url, mediaType, filename }) => /* @__PURE__ */ jsx(AttachmentPreview, {
+	filename,
+	mediaType,
+	renderImage: isImageMediaType(mediaType) ? ({ id, alt }) => /* @__PURE__ */ jsx("img", {
+		alt,
+		className: attachment_module_default.image,
+		id,
+		src: url
+	}) : void 0
+});
+//#endregion
+export { Item, List };

package/dist/components/ai/attachment/attachment.module.mjs

@@ -0,0 +1,8 @@
+import './attachment.css';
+//#region src/components/ai/attachment/attachment.module.css
+var attachment_module_default = {
+	"image": "HRTevW_image",
+	"list": "HRTevW_list"
+};
+//#endregion
+export { attachment_module_default as default };

package/dist/components/ai/attachment/index.d.mts

@@ -0,0 +1,13 @@
+//#region src/components/ai/attachment/index.d.ts
+export declare const Attachment: {
+  readonly List: import("react").FC<{
+    label?: string;
+    children: import("react").ReactNode;
+  }>;
+  readonly Item: import("react").FC<{
+    url: string;
+    mediaType: string;
+    filename?: string;
+  }>;
+};
+//#endregion

package/dist/components/ai/attachment/index.mjs

@@ -0,0 +1,8 @@
+import { Item, List } from "./attachment.mjs";
+//#region src/components/ai/attachment/index.ts
+const Attachment = {
+	List,
+	Item
+};
+//#endregion
+export { Attachment };

package/dist/components/ai/conversation/conversation.css

@@ -0,0 +1,71 @@
+@layer properties, theme, base;
+
+@layer components {
+  .nvsFHG_root {
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .nvsFHG_messages {
+    overscroll-behavior: contain;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .nvsFHG_list {
+    gap: calc(var(--spacing) * 6);
+    padding: calc(var(--spacing) * 4);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .nvsFHG_sentinel {
+    flex-shrink: 0;
+    width: 100%;
+    height: 1px;
+  }
+
+  .nvsFHG_scrollButton {
+    bottom: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    border-radius: var(--radius-full);
+    background-color: var(--color-bg-base);
+    color: var(--color-fg-mute);
+    box-shadow: var(--shadow-md);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+    left: 50%;
+    translate: -50%;
+  }
+
+  @media (hover: hover) {
+    .nvsFHG_scrollButton:hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+
+  .nvsFHG_scrollButton:focus-visible {
+    box-shadow: var(--shadow-ring-info), var(--shadow-md);
+    border-color: #0000;
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/ai/conversation/conversation.d.mts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
 //#region src/components/ai/conversation/conversation.d.ts
-declare const Root: FC<{
+export declare const Root: FC<{
   children: ReactNode;
 }>;
 type MessagesProps = {
@@ -8,9 +8,9 @@ type MessagesProps = {
   isStreaming?: boolean;
   children: ReactNode;
 };
-declare const Messages: FC<MessagesProps>;
-declare const ScrollButton: FC<{
+export declare const Messages: FC<MessagesProps>;
+export declare const ScrollButton: FC<{
   label?: string;
 }>;
 //#endregion
-export { Messages, Root, ScrollButton };
+export {};

package/dist/components/ai/conversation/conversation.mjs

@@ -1,11 +1,12 @@
 "use client";
-import { FOCUS_RING, FOCUS_RING_NO_BORDER } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
-import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
-import { useIntersectionObserver } from "../../../hooks/intersection-observer/use-intersection-observer.mjs";
-import { useResize } from "../../../hooks/resize/index.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { InView } from "../../observers/in-view/in-view.mjs";
+import { Resize } from "../../observers/resize/resize.mjs";
+import conversation_module_default from "./conversation.module.mjs";
+import { clsx } from "clsx";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai/conversation/conversation.tsx
@@ -13,8 +14,6 @@ const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: r
 const [ConversationProvider, useConversationContext] = createSafeContext("Conversation.* must be used within <Conversation.Root>");
 const Root = ({ children }) => {
 	const [viewport, setViewport] = useState(null);
-	const sentinelRef = useRef(null);
-	const contentRef = useRef(null);
 	const [isAtBottom, setIsAtBottom] = useState(true);
 	const isAtBottomRef = useRef(true);
 	const updateAtBottom = useCallback((next) => {
@@ -28,20 +27,12 @@ const Root = ({ children }) => {
 			behavior: prefersReducedMotion() ? "instant" : behavior
 		});
 	}, [viewport]);
-	const handleIntersect = useCallback((entry) => {
-		updateAtBottom(entry.isIntersecting);
-	}, [updateAtBottom]);
-	useIntersectionObserver(sentinelRef, handleIntersect, {
-		root: viewport,
-		rootMargin: "0px 0px 24px 0px"
-	});
-	const handleResize = useCallback(() => {
+	const followContent = useCallback(() => {
 		if (isAtBottomRef.current && viewport) viewport.scrollTo({
 			top: viewport.scrollHeight,
 			behavior: "instant"
 		});
 	}, [viewport]);
-	useResize(contentRef, handleResize);
 	useEffect(() => {
 		if (viewport) viewport.scrollTo({
 			top: viewport.scrollHeight,
@@ -51,47 +42,60 @@ const Root = ({ children }) => {
 	const contextValue = useMemo(() => ({
 		isAtBottom,
 		scrollToBottom,
+		viewport,
 		setViewport,
-		sentinelRef,
-		contentRef
-	}), [isAtBottom, scrollToBottom]);
+		updateAtBottom,
+		followContent
+	}), [
+		isAtBottom,
+		scrollToBottom,
+		viewport,
+		updateAtBottom,
+		followContent
+	]);
 	return /* @__PURE__ */ jsx(ConversationProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "relative flex h-full min-h-0 flex-col",
+			className: conversation_module_default.root,
 			children
 		})
 	});
 };
 const Messages = ({ label, isStreaming = false, children }) => {
-	const messages = useMessages();
-	const { setViewport, sentinelRef, contentRef } = useConversationContext();
+	const messages = getMessages();
+	const { viewport, setViewport, updateAtBottom, followContent } = useConversationContext();
 	return /* @__PURE__ */ jsx("div", {
 		"aria-busy": isStreaming,
 		"aria-label": label ?? messages.chat,
 		"aria-live": "polite",
-		className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain", FOCUS_RING_NO_BORDER),
+		className: clsx(conversation_module_default.messages, focus_ring_module_default.ringNoBorder),
 		ref: setViewport,
 		role: "log",
 		tabIndex: 0,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-6 p-4",
-			ref: contentRef,
-			children: [children, /* @__PURE__ */ jsx("div", {
-				"aria-hidden": true,
-				className: "h-px w-full shrink-0",
-				ref: sentinelRef
-			})]
+		children: /* @__PURE__ */ jsx(Resize, {
+			onChange: followContent,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: conversation_module_default.list,
+				children: [children, /* @__PURE__ */ jsx(InView, {
+					onChange: updateAtBottom,
+					root: viewport,
+					rootMargin: "0px 0px 24px 0px",
+					children: /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: conversation_module_default.sentinel
+					})
+				})]
+			})
 		})
 	});
 };
 const ScrollButton = ({ label }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const { isAtBottom, scrollToBottom } = useConversationContext();
 	if (isAtBottom) return null;
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": label ?? messages.scrollToLatest,
-		className: cn("absolute bottom-4 left-1/2 flex size-9 -translate-x-1/2 items-center justify-center rounded-full border border-border-base bg-bg-base text-fg-mute shadow-md transition-colors duration-150 ease-out hover:bg-bg-subtle", FOCUS_RING),
+		className: conversation_module_default.scrollButton,
 		onClick: () => {
 			scrollToBottom("smooth");
 		},

package/dist/components/ai/conversation/conversation.module.mjs

@@ -0,0 +1,11 @@
+import './conversation.css';
+//#region src/components/ai/conversation/conversation.module.css
+var conversation_module_default = {
+	"list": "nvsFHG_list",
+	"messages": "nvsFHG_messages",
+	"root": "nvsFHG_root",
+	"scrollButton": "nvsFHG_scrollButton",
+	"sentinel": "nvsFHG_sentinel"
+};
+//#endregion
+export { conversation_module_default as default };

package/dist/components/ai/conversation/index.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/ai/conversation/index.d.ts
-declare const Conversation: {
+export declare const Conversation: {
   readonly Root: import("react").FC<{
     children: import("react").ReactNode;
   }>;
@@ -12,5 +12,4 @@ declare const Conversation: {
     label?: string;
   }>;
 };
-//#endregion
-export { Conversation };
+//#endregion

package/dist/components/ai/index.d.mts

@@ -1,10 +1,12 @@
+import { Attachment } from "./attachment/index.mjs";
 import { Conversation } from "./conversation/index.mjs";
 import { Message } from "./message/index.mjs";
 import { PromptInput } from "./prompt-input/index.mjs";
 import { Reasoning } from "./reasoning/reasoning.mjs";
 import "./reasoning/index.mjs";
+import { Source } from "./source/index.mjs";
 import { Suggestion } from "./suggestion/index.mjs";
-import { ChatStatus, ToolState } from "./types.mjs";
+import { ChatStatus, MessageFeedback, ToolApproval, ToolApprovalResponse, ToolState } from "./types.mjs";
 import { ToolInvocation } from "./tool-invocation/tool-invocation.mjs";
 import "./tool-invocation/index.mjs";
-export { type ChatStatus, Conversation, Message, PromptInput, Reasoning, Suggestion, ToolInvocation, type ToolState };
+export { Attachment, type ChatStatus, Conversation, Message, type MessageFeedback, PromptInput, Reasoning, Source, Suggestion, type ToolApproval, type ToolApprovalResponse, ToolInvocation, type ToolState };

package/dist/components/ai/index.mjs

@@ -1,7 +1,9 @@
+import { Attachment } from "./attachment/index.mjs";
 import { Conversation } from "./conversation/index.mjs";
 import { Message } from "./message/index.mjs";
 import { PromptInput } from "./prompt-input/index.mjs";
 import { Reasoning } from "./reasoning/reasoning.mjs";
+import { Source } from "./source/index.mjs";
 import { Suggestion } from "./suggestion/index.mjs";
 import { ToolInvocation } from "./tool-invocation/tool-invocation.mjs";
-export { Conversation, Message, PromptInput, Reasoning, Suggestion, ToolInvocation };
+export { Attachment, Conversation, Message, PromptInput, Reasoning, Source, Suggestion, ToolInvocation };

package/dist/components/ai/message/index.d.mts

@@ -1,13 +1,39 @@
+import { MessageFeedback } from "../types.mjs";
+import "../index.mjs";
 //#region src/components/ai/message/index.d.ts
-declare const Message: {
+export declare const Message: {
   readonly Root: import("react").FC<{
     from: "assistant" | "user";
+    avatar?: import("react").ReactNode;
     children: import("react").ReactNode;
   } & Omit<import("react").HTMLAttributes<HTMLDivElement>, "className" | "style">>;
   readonly Content: import("react").FC<{
     isStreaming?: boolean;
     children: import("react").ReactNode;
   } & Omit<import("react").HTMLAttributes<HTMLDivElement>, "className" | "style">>;
+  readonly Actions: import("react").FC<{
+    label?: string;
+    children: import("react").ReactNode;
+  }>;
+  readonly Action: import("react").FC<{
+    label: string;
+    onAction?: () => void | Promise<void>;
+    disabled?: boolean;
+    children: import("react").ReactNode;
+  }>;
+  readonly Copy: import("react").FC<{
+    value: string;
+    label?: string;
+  }>;
+  readonly Regenerate: import("react").FC<{
+    onAction: () => void | Promise<void>;
+    label?: string;
+    disabled?: boolean;
+  }>;
+  readonly Feedback: import("react").FC<{
+    value?: MessageFeedback | null;
+    defaultValue?: MessageFeedback | null;
+    onChange?: (value: MessageFeedback | null) => void;
+  }>;
 };
-//#endregion
-export { Message };
+//#endregion

package/dist/components/ai/message/index.mjs

@@ -1,8 +1,13 @@
-import { Content, Root } from "./message.mjs";
+import { Action, Actions, Content, Copy, Feedback, Regenerate, Root } from "./message.mjs";
 //#region src/components/ai/message/index.ts
 const Message = {
 	Root,
-	Content
+	Content,
+	Actions,
+	Action,
+	Copy,
+	Regenerate,
+	Feedback
 };
 //#endregion
 export { Message };