@arc-lo/ui 0.3.0 → 0.3.2

package/dist/index.d.cts

@@ -151,6 +151,10 @@ interface PromptBoxFooterProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Footer: react.ForwardRefExoticComponent<PromptBoxFooterProps & react.RefAttributes<HTMLDivElement>>;
 interface PromptBoxSubmitProps extends HTMLAttributes<HTMLButtonElement> {
+    /** Visual variant. "default" = text, "icon" = arrow icon only, "icon-text" = icon + text. Default: "default" */
+    variant?: "default" | "icon" | "icon-text";
+    /** Custom loading label. Default: "Sending..." */
+    loadingLabel?: string;
 }
 declare const SubmitButton: react.ForwardRefExoticComponent<PromptBoxSubmitProps & react.RefAttributes<HTMLButtonElement>>;
 interface PromptBoxSuggestionsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
@@ -314,9 +318,26 @@ declare const SystemMessage: react.ForwardRefExoticComponent<ChatThreadSystemMes
 interface ChatThreadScrollAnchorProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const ScrollAnchor: react.ForwardRefExoticComponent<ChatThreadScrollAnchorProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatThreadAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Image URL for the avatar */
+    src?: string;
+    /** Initials to display when no src is provided */
+    initials?: string;
+    /** Custom icon element */
+    icon?: ReactNode;
+    /** Background color. Default: accent for assistant, surface-secondary for user */
+    color?: string;
+    /** Text/icon color. Default: auto based on background */
+    textColor?: string;
+    /** Size in px. Default: 28 */
+    size?: number;
+}
+declare const Avatar: react.ForwardRefExoticComponent<ChatThreadAvatarProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const index$2_AssistantMessage: typeof AssistantMessage;
+declare const index$2_Avatar: typeof Avatar;
 type index$2_ChatThreadAssistantMessageProps = ChatThreadAssistantMessageProps;
+type index$2_ChatThreadAvatarProps = ChatThreadAvatarProps;
 type index$2_ChatThreadMessageProps = ChatThreadMessageProps;
 type index$2_ChatThreadMessagesProps = ChatThreadMessagesProps;
 type index$2_ChatThreadRootProps = ChatThreadRootProps;
@@ -330,7 +351,7 @@ declare const index$2_ScrollAnchor: typeof ScrollAnchor;
 declare const index$2_SystemMessage: typeof SystemMessage;
 declare const index$2_UserMessage: typeof UserMessage;
 declare namespace index$2 {
-  export { index$2_AssistantMessage as AssistantMessage, type index$2_ChatThreadAssistantMessageProps as ChatThreadAssistantMessageProps, type index$2_ChatThreadMessageProps as ChatThreadMessageProps, type index$2_ChatThreadMessagesProps as ChatThreadMessagesProps, type index$2_ChatThreadRootProps as ChatThreadRootProps, type index$2_ChatThreadScrollAnchorProps as ChatThreadScrollAnchorProps, type index$2_ChatThreadSystemMessageProps as ChatThreadSystemMessageProps, type index$2_ChatThreadUserMessageProps as ChatThreadUserMessageProps, index$2_Message as Message, type index$2_MessageRole as MessageRole, index$2_Messages as Messages, Root$2 as Root, index$2_ScrollAnchor as ScrollAnchor, index$2_SystemMessage as SystemMessage, index$2_UserMessage as UserMessage };
+  export { index$2_AssistantMessage as AssistantMessage, index$2_Avatar as Avatar, type index$2_ChatThreadAssistantMessageProps as ChatThreadAssistantMessageProps, type index$2_ChatThreadAvatarProps as ChatThreadAvatarProps, type index$2_ChatThreadMessageProps as ChatThreadMessageProps, type index$2_ChatThreadMessagesProps as ChatThreadMessagesProps, type index$2_ChatThreadRootProps as ChatThreadRootProps, type index$2_ChatThreadScrollAnchorProps as ChatThreadScrollAnchorProps, type index$2_ChatThreadSystemMessageProps as ChatThreadSystemMessageProps, type index$2_ChatThreadUserMessageProps as ChatThreadUserMessageProps, index$2_Message as Message, type index$2_MessageRole as MessageRole, index$2_Messages as Messages, Root$2 as Root, index$2_ScrollAnchor as ScrollAnchor, index$2_SystemMessage as SystemMessage, index$2_UserMessage as UserMessage };
 }
 
 interface ImageGenRootProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {

package/dist/index.d.ts

@@ -151,6 +151,10 @@ interface PromptBoxFooterProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Footer: react.ForwardRefExoticComponent<PromptBoxFooterProps & react.RefAttributes<HTMLDivElement>>;
 interface PromptBoxSubmitProps extends HTMLAttributes<HTMLButtonElement> {
+    /** Visual variant. "default" = text, "icon" = arrow icon only, "icon-text" = icon + text. Default: "default" */
+    variant?: "default" | "icon" | "icon-text";
+    /** Custom loading label. Default: "Sending..." */
+    loadingLabel?: string;
 }
 declare const SubmitButton: react.ForwardRefExoticComponent<PromptBoxSubmitProps & react.RefAttributes<HTMLButtonElement>>;
 interface PromptBoxSuggestionsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
@@ -314,9 +318,26 @@ declare const SystemMessage: react.ForwardRefExoticComponent<ChatThreadSystemMes
 interface ChatThreadScrollAnchorProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const ScrollAnchor: react.ForwardRefExoticComponent<ChatThreadScrollAnchorProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatThreadAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Image URL for the avatar */
+    src?: string;
+    /** Initials to display when no src is provided */
+    initials?: string;
+    /** Custom icon element */
+    icon?: ReactNode;
+    /** Background color. Default: accent for assistant, surface-secondary for user */
+    color?: string;
+    /** Text/icon color. Default: auto based on background */
+    textColor?: string;
+    /** Size in px. Default: 28 */
+    size?: number;
+}
+declare const Avatar: react.ForwardRefExoticComponent<ChatThreadAvatarProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const index$2_AssistantMessage: typeof AssistantMessage;
+declare const index$2_Avatar: typeof Avatar;
 type index$2_ChatThreadAssistantMessageProps = ChatThreadAssistantMessageProps;
+type index$2_ChatThreadAvatarProps = ChatThreadAvatarProps;
 type index$2_ChatThreadMessageProps = ChatThreadMessageProps;
 type index$2_ChatThreadMessagesProps = ChatThreadMessagesProps;
 type index$2_ChatThreadRootProps = ChatThreadRootProps;
@@ -330,7 +351,7 @@ declare const index$2_ScrollAnchor: typeof ScrollAnchor;
 declare const index$2_SystemMessage: typeof SystemMessage;
 declare const index$2_UserMessage: typeof UserMessage;
 declare namespace index$2 {
-  export { index$2_AssistantMessage as AssistantMessage, type index$2_ChatThreadAssistantMessageProps as ChatThreadAssistantMessageProps, type index$2_ChatThreadMessageProps as ChatThreadMessageProps, type index$2_ChatThreadMessagesProps as ChatThreadMessagesProps, type index$2_ChatThreadRootProps as ChatThreadRootProps, type index$2_ChatThreadScrollAnchorProps as ChatThreadScrollAnchorProps, type index$2_ChatThreadSystemMessageProps as ChatThreadSystemMessageProps, type index$2_ChatThreadUserMessageProps as ChatThreadUserMessageProps, index$2_Message as Message, type index$2_MessageRole as MessageRole, index$2_Messages as Messages, Root$2 as Root, index$2_ScrollAnchor as ScrollAnchor, index$2_SystemMessage as SystemMessage, index$2_UserMessage as UserMessage };
+  export { index$2_AssistantMessage as AssistantMessage, index$2_Avatar as Avatar, type index$2_ChatThreadAssistantMessageProps as ChatThreadAssistantMessageProps, type index$2_ChatThreadAvatarProps as ChatThreadAvatarProps, type index$2_ChatThreadMessageProps as ChatThreadMessageProps, type index$2_ChatThreadMessagesProps as ChatThreadMessagesProps, type index$2_ChatThreadRootProps as ChatThreadRootProps, type index$2_ChatThreadScrollAnchorProps as ChatThreadScrollAnchorProps, type index$2_ChatThreadSystemMessageProps as ChatThreadSystemMessageProps, type index$2_ChatThreadUserMessageProps as ChatThreadUserMessageProps, index$2_Message as Message, type index$2_MessageRole as MessageRole, index$2_Messages as Messages, Root$2 as Root, index$2_ScrollAnchor as ScrollAnchor, index$2_SystemMessage as SystemMessage, index$2_UserMessage as UserMessage };
 }
 
 interface ImageGenRootProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {

package/dist/index.js

@@ -632,10 +632,16 @@ var Footer = forwardRef(
   }
 );
 Footer.displayName = "PromptBox.Footer";
+var ArrowUpIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
 var SubmitButton = forwardRef(
-  ({ children, className, ...props }, ref) => {
+  ({ children, variant = "default", loadingLabel, className, ...props }, ref) => {
     const { value, isSubmitting, disabled } = usePromptBoxContext();
     const isEmpty = !value.trim();
+    const isIcon = variant === "icon";
+    const content = children ?? (isIcon ? isSubmitting ? /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "animate-spin", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) : /* @__PURE__ */ jsx(ArrowUpIcon, {}) : variant === "icon-text" ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      isSubmitting ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: "animate-spin", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) : /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+      isSubmitting ? loadingLabel ?? "Sending..." : "Send"
+    ] }) : isSubmitting ? loadingLabel ?? "Sending..." : "Send");
     return /* @__PURE__ */ jsx(
       "button",
       {
@@ -644,11 +650,12 @@ var SubmitButton = forwardRef(
         disabled: isEmpty || isSubmitting || disabled,
         style: { backgroundColor: themeVars.accent, color: themeVars.accentFg },
         className: cn(
-          "arclo-prompt-submit ml-auto rounded-xl px-4 py-2 text-sm font-medium transition-all hover:brightness-90 disabled:opacity-25 cursor-pointer disabled:cursor-default",
+          "arclo-prompt-submit ml-auto transition-all hover:brightness-90 disabled:opacity-25 cursor-pointer disabled:cursor-default",
+          isIcon ? "rounded-xl p-2" : "rounded-xl px-4 py-2 text-sm font-medium",
           className
         ),
         ...props,
-        children: children ?? (isSubmitting ? "Sending..." : "Send")
+        children: content
       }
     );
   }
@@ -1312,6 +1319,7 @@ Output.displayName = "ToolCall.Output";
 var chat_thread_exports = {};
 __export(chat_thread_exports, {
   AssistantMessage: () => AssistantMessage,
+  Avatar: () => Avatar,
   Message: () => Message,
   Messages: () => Messages,
   Root: () => Root6,
@@ -1491,6 +1499,65 @@ var ScrollAnchor = forwardRef(
   }
 );
 ScrollAnchor.displayName = "ChatThread.ScrollAnchor";
+var Avatar = forwardRef(
+  ({
+    src,
+    initials,
+    icon,
+    color,
+    textColor,
+    size = 28,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const bg = color ?? themeVars.accent;
+    const fg = textColor ?? themeVars.accentFg;
+    if (src) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "arclo-chat-avatar shrink-0 overflow-hidden rounded-full",
+            className
+          ),
+          style: { width: size, height: size, ...style },
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: initials ?? "Avatar",
+              className: "h-full w-full object-cover"
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "arclo-chat-avatar shrink-0 flex items-center justify-center rounded-full font-semibold",
+          className
+        ),
+        style: {
+          width: size,
+          height: size,
+          backgroundColor: bg,
+          color: fg,
+          fontSize: size * 0.4,
+          ...style
+        },
+        ...props,
+        children: icon ?? initials ?? "?"
+      }
+    );
+  }
+);
+Avatar.displayName = "ChatThread.Avatar";
 
 // src/image-gen/index.ts
 var image_gen_exports = {};