@arc-lo/ui 0.3.0 → 0.3.2

package/dist/index.cjs

@@ -634,10 +634,16 @@ var Footer = react.forwardRef(
   }
 );
 Footer.displayName = "PromptBox.Footer";
+var ArrowUpIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
 var SubmitButton = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, {}) : variant === "icon-text" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      isSubmitting ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, {}),
+      isSubmitting ? loadingLabel ?? "Sending..." : "Send"
+    ] }) : isSubmitting ? loadingLabel ?? "Sending..." : "Send");
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -646,11 +652,12 @@ var SubmitButton = react.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
       }
     );
   }
@@ -1314,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,
@@ -1493,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 = {};