@arc-lo/ui 0.3.1 → 0.3.3

package/dist/index.cjs

@@ -1321,6 +1321,7 @@ Output.displayName = "ToolCall.Output";
 var chat_thread_exports = {};
 __export(chat_thread_exports, {
   AssistantMessage: () => AssistantMessage,
+  Avatar: () => Avatar,
   Message: () => Message,
   Messages: () => Messages,
   Root: () => Root6,
@@ -1500,6 +1501,65 @@ var ScrollAnchor = react.forwardRef(
   }
 );
 ScrollAnchor.displayName = "ChatThread.ScrollAnchor";
+var Avatar = react.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__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "arclo-chat-avatar shrink-0 overflow-hidden rounded-full",
+            className
+          ),
+          style: { width: size, height: size, ...style },
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt: initials ?? "Avatar",
+              className: "h-full w-full object-cover"
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.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 = {};