@arc-lo/ui 0.3.1 → 0.3.3

package/dist/index.d.cts

@@ -318,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;
@@ -334,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

@@ -318,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;
@@ -334,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

@@ -1319,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,
@@ -1498,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 = {};