@ciridae/ui-agent 0.3.0 → 0.3.2

package/dist/components/agentic/agent-queue.js

@@ -39,7 +39,7 @@ function AgentQueueItemActions({ className, ...props }) {
     return (_jsx("div", { "data-slot": "agent-queue-item-actions", className: cn("flex gap-1", className), ...props }));
 }
 function AgentQueueItemAction({ className, type = "button", ...props }) {
-    return (_jsx(Button, { className: cn("size-7 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100", className), size: "icon-sm", type: type, variant: "ghost", ...props }));
+    return (_jsx(Button, { className: cn("size-7 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100", className), size: "icon-sm", type: type, variant: "ghost", ...props }));
 }
 function AgentQueueItemAttachment({ className, ...props }) {
     return (_jsx("div", { "data-slot": "agent-queue-item-attachment", className: cn("ml-6 flex flex-wrap gap-2", className), ...props }));

package/dist/components/agentic/artifact.js

@@ -25,11 +25,11 @@ const artifactHeaderClassName = css({
     borderBottomStyle: "solid",
     borderBottomWidth: "default",
     display: "flex",
-    gap: "gap.3",
+    gap: "3",
     justifyContent: "space-between",
     minWidth: 0,
-    paddingBlock: "spacing.3",
-    paddingInline: "spacing.4",
+    paddingBlock: "3",
+    paddingInline: "4",
 });
 const artifactTitleClassName = css({
     fontSize: "sm",
@@ -52,7 +52,7 @@ const artifactContentClassName = css({
     flex: 1,
     minHeight: 0,
     overflow: "auto",
-    padding: "spacing.4",
+    padding: "4",
 });
 function Artifact({ className, ...props }) {
     return _jsx("div", { "data-slot": "artifact", className: cn(artifactClassName, className), ...props });

package/dist/components/agentic/attachments.js

@@ -202,7 +202,7 @@ function Attachment({ attachment, children, className, data, onRemove, ...props
     if (!contextValue)
         return null;
     return (_jsx(AttachmentItemContext.Provider, { value: contextValue, children: _jsx("div", { "data-kind": contextValue.data.kind, "data-slot": "attachment", "data-status": contextValue.data.status, "data-variant": variant, className: cn("group/attachment relative min-w-0 text-sm text-foreground", variant === "grid" && "size-24 overflow-hidden rounded-lg border bg-muted/40", variant === "inline" && [
-                "flex h-8 max-w-full cursor-pointer select-none items-center gap-1.5 rounded-md border bg-background px-1.5",
+                "flex h-8 max-w-full cursor-pointer items-center gap-1.5 rounded-md border bg-background px-1.5 select-none",
                 "font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
             ], variant === "list" && [
                 "flex w-full items-center gap-3 rounded-lg border bg-background p-3 transition-colors",
@@ -250,11 +250,11 @@ function AttachmentRemove({ attachmentId, children, className, label = "Remove",
                 controller?.remove(resolvedAttachmentId);
         }, size: size ?? getAttachmentRemoveSize(attachmentVariant), type: type, variant: buttonVariant, className: cn(attachmentVariant === "grid" && [
             "absolute top-2 right-2 size-6 rounded-full bg-background/90 p-0 opacity-0 shadow-sm transition-opacity",
-            "group-hover/attachment:opacity-100 group-focus-within/attachment:opacity-100",
+            "group-focus-within/attachment:opacity-100 group-hover/attachment:opacity-100",
             "hover:bg-background [&>svg]:size-3",
         ], attachmentVariant === "inline" && [
             "absolute top-1/2 right-0.5 size-4 -translate-y-1/2 rounded p-0 opacity-0 transition-opacity",
-            "group-hover/attachment:opacity-100 group-focus-within/attachment:opacity-100",
+            "group-focus-within/attachment:opacity-100 group-hover/attachment:opacity-100",
             "[&>svg]:size-2.5",
         ], attachmentVariant === "list" && "size-8 shrink-0 rounded p-0 [&>svg]:size-4", className), ...props, children: [children ?? _jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: label })] }));
 }

package/dist/components/agentic/code-block.js

@@ -24,11 +24,11 @@ const codeBlockHeaderClassName = css({
     borderBottomStyle: "solid",
     borderBottomWidth: "default",
     display: "flex",
-    gap: "gap.3",
+    gap: "3",
     justifyContent: "space-between",
     minWidth: 0,
-    paddingBlock: "spacing.2",
-    paddingInline: "spacing.3",
+    paddingBlock: "2",
+    paddingInline: "3",
 });
 const codeBlockTitleClassName = css({
     fontSize: "sm",
@@ -65,7 +65,7 @@ const codeBlockContentInnerClassName = css({
     fontFamily: "mono",
     lineHeight: "1.5rem",
     minWidth: "max-content",
-    padding: "spacing.4",
+    padding: "4",
 });
 const codeBlockLanguageTriggerClassName = css({
     height: "control.sm",

package/dist/components/agentic/message.js

@@ -27,7 +27,7 @@ const messageResponseAnimation = {
 const messageClassName = css({
     display: "flex",
     flexDirection: "column",
-    gap: "gap.2",
+    gap: "2",
     width: "full",
     "&[data-role='user']": {
         alignItems: "flex-end",
@@ -37,7 +37,7 @@ const messageClassName = css({
     },
     "&[data-role='system']": {
         alignItems: "flex-start",
-        paddingBlock: "spacing.1",
+        paddingBlock: "1",
     },
 });
 const messageContentVariants = cva({
@@ -55,8 +55,8 @@ const messageContentVariants = cva({
             boxShadow: "xs",
             color: "secondary.foreground",
             maxWidth: "min(34rem, 78%)",
-            paddingBlock: "spacing.3",
-            paddingInline: "spacing.4",
+            paddingBlock: "3",
+            paddingInline: "4",
         },
         ".group\\/message[data-role='assistant'] &": {
             color: "foreground",
@@ -70,8 +70,8 @@ const messageContentVariants = cva({
             color: "muted.foreground",
             fontSize: "xs",
             maxWidth: "full",
-            paddingBlock: "spacing.2",
-            paddingInline: "spacing.3",
+            paddingBlock: "2",
+            paddingInline: "3",
         },
     },
     variants: {
@@ -85,8 +85,8 @@ const messageContentVariants = cva({
                 borderWidth: "default",
                 boxShadow: "xs",
                 color: "card.foreground",
-                paddingBlock: "spacing.3",
-                paddingInline: "spacing.4",
+                paddingBlock: "3",
+                paddingInline: "4",
             },
         },
     },
@@ -100,7 +100,7 @@ const messageActionsClassName = css({
     gap: "gap.1",
 });
 const messageResponseCodeBlockClassName = css({
-    marginBlock: "spacing.4",
+    marginBlock: "4",
 });
 const messageResponseCodeTitleClassName = css({
     color: "muted.foreground",
@@ -110,9 +110,9 @@ const messageResponseCodeTitleClassName = css({
 const messageToolbarClassName = css({
     alignItems: "center",
     display: "flex",
-    gap: "gap.3",
+    gap: "3",
     justifyContent: "space-between",
-    marginTop: "spacing.1",
+    marginTop: "1",
     maxWidth: "full",
     width: "full",
     ".group\\/message[data-role='user'] &": {

package/dist/components/agentic/prompt-input.js

@@ -26,9 +26,9 @@ const promptInputClassName = css({
     borderWidth: "default",
     boxShadow: "xs",
     display: "grid",
-    gap: "gap.2",
+    gap: "2",
     outline: "none",
-    padding: "spacing.2",
+    padding: "2",
     transitionProperty: "color, box-shadow",
     width: "full",
     "&:focus-within": {
@@ -44,6 +44,7 @@ const promptInputBodyClassName = css({
     backgroundColor: "transparent",
     borderWidth: 0,
     boxShadow: "none",
+    flexDirection: "column",
     minHeight: "6rem",
     _dark: {
         backgroundColor: "transparent",
@@ -53,8 +54,8 @@ const promptInputTextareaClassName = css({
     fontSize: "sm",
     lineHeight: "relaxed",
     minHeight: "6rem",
-    paddingBlock: "spacing.2",
-    paddingInline: "spacing.2",
+    paddingBlock: "2",
+    paddingInline: "2",
     "&::placeholder": {
         color: "muted.foreground/70",
     },
@@ -130,7 +131,7 @@ function getPromptInputFormText(form, fallback = "") {
     return typeof message === "string" ? message : fallback;
 }
 function PromptInputBody({ className, ...props }) {
-    return (_jsx(InputGroup, { "data-slot": "prompt-input-body", className: cn(promptInputBodyClassName, className), ...props }));
+    return (_jsx(InputGroup, { "data-slot": "prompt-input-body", className: cn(promptInputBodyClassName, "items-stretch!", className), ...props }));
 }
 function PromptInputTextarea({ className, disabled, onKeyDown, onPaste, onValueChange, value, ...props }) {
     const context = React.useContext(PromptInputContext);
@@ -184,7 +185,7 @@ function PromptInputFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "prompt-input-footer", className: cn("flex min-w-0 items-center justify-between gap-2 px-1", className), ...props }));
 }
 function PromptInputTools({ align = "block-end", className, ...props }) {
-    return (_jsx(InputGroupAddon, { align: align, "data-slot": "prompt-input-tools", className: cn("min-w-0 justify-between gap-2 px-0 pb-0", className), ...props }));
+    return (_jsx(InputGroupAddon, { align: align, "data-slot": "prompt-input-tools", className: cn("min-w-0 justify-between! gap-2 px-0 pb-0", className), ...props }));
 }
 function PromptInputButton({ children, className, label, size = "icon-sm", tooltip, variant = "ghost", ...props }) {
     const button = (_jsx(InputGroupButton, { "aria-label": label ?? tooltip, "data-slot": "prompt-input-button", size: size, variant: variant, className: cn("shrink-0 text-muted-foreground", className), ...props, children: children }));

package/dist/components/agentic/sources.js

@@ -13,10 +13,10 @@ const sourcesTriggerClassName = css({
     color: "card.foreground",
     display: "flex",
     fontSize: "sm",
-    gap: "gap.3",
+    gap: "3",
     justifyContent: "space-between",
-    paddingBlock: "spacing.2",
-    paddingInline: "spacing.3",
+    paddingBlock: "2",
+    paddingInline: "3",
     transitionProperty: "color, background-color",
     width: "full",
     "&:hover": {
@@ -31,7 +31,7 @@ const sourcesTriggerClassName = css({
 const sourcesTriggerLabelClassName = css({
     alignItems: "center",
     display: "flex",
-    gap: "gap.2",
+    gap: "2",
     minWidth: 0,
 });
 const sourcesIconClassName = css({
@@ -57,8 +57,8 @@ const sourcesChevronClassName = css({
 });
 const sourcesContentClassName = css({
     display: "grid",
-    gap: "gap.2",
-    marginTop: "spacing.2",
+    gap: "2",
+    marginTop: "2",
     overflow: "hidden",
     "&[data-state='closed']": {
         animationName: "fade-out",
@@ -74,10 +74,10 @@ const sourceClassName = css({
     color: "foreground",
     display: "flex",
     fontSize: "sm",
-    gap: "gap.2",
+    gap: "2",
     minWidth: 0,
-    paddingBlock: "spacing.2",
-    paddingInline: "spacing.3",
+    paddingBlock: "2",
+    paddingInline: "3",
     transitionProperty: "color, background-color",
     "&:hover": {
         backgroundColor: "accent",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui-agent",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"type": "module",
 	"private": false,
 	"repository": {
@@ -162,7 +162,8 @@
 	],
 	"peerDependencies": {
 		"react": ">=18",
-		"react-dom": ">=18"
+		"react-dom": ">=18",
+		"use-stick-to-bottom": "^1.1.6"
 	},
 	"dependencies": {
 		"@streamdown/cjk": "^1.0.3",
@@ -173,7 +174,6 @@
 		"lucide-react": "^1.23.0",
 		"shiki": "^4.3.0",
 		"streamdown": "^2.5.0",
-		"use-stick-to-bottom": "^1.1.6",
-		"@ciridae/ui": "0.3.0"
+		"@ciridae/ui": "0.3.2"
 	}
 }