@timbal-ai/timbal-react 0.5.0 → 0.5.1

package/dist/index.cjs

@@ -3510,7 +3510,7 @@ var ComposerInput = ({
     import_react22.ComposerPrimitive.Input,
     {
       placeholder,
-      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-transparent px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
+      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-composer-bg px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
       rows: 1,
       autoFocus,
       "aria-label": "Message input",
@@ -3520,7 +3520,7 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-composer-action-wrapper flex items-center justify-between gap-1 px-2.5 pb-2.5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-composer-action-wrapper relative z-[1] flex items-center justify-between gap-1 bg-composer-bg px-2.5 pb-2.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1", children: [
       showAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerAddAttachment, {}),
       toolbar
@@ -3736,7 +3736,7 @@ var Thread = ({
             import_react26.ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
-              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
+              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-pb-4 px-4 pt-4",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   WelcomeSlot,
@@ -3756,7 +3756,7 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible bg-transparent pb-4 md:pb-6", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react26.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) isolate flex-col gap-4 bg-transparent pt-2 pb-4 md:pb-6", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScrollToBottomSlot, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
@@ -3865,7 +3865,7 @@ var AssistantMessage = () => {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MessageError, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aui-assistant-message-footer mt-0 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AssistantActionBar, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AssistantActionBar, {}) })
       ]
     }
   );
@@ -3882,7 +3882,7 @@ var AssistantActionBar = () => {
     import_react26.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       className: "aui-assistant-action-bar-root flex items-center gap-0 bg-transparent px-0 py-0.5 text-muted-foreground/60",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
@@ -3969,7 +3969,7 @@ var UserActionBar = () => {
     import_react26.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       className: "aui-user-action-bar-root flex flex-col items-end",
       children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react26.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         TooltipIconButton,

package/dist/index.esm.js

@@ -3432,7 +3432,7 @@ var ComposerInput = ({
     ComposerPrimitive2.Input,
     {
       placeholder,
-      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-transparent px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
+      className: "aui-composer-input max-h-60 min-h-14 w-full resize-none bg-composer-bg px-3 pt-3 pb-1 text-sm outline-none placeholder:text-muted-foreground/70 focus-visible:ring-0",
       rows: 1,
       autoFocus,
       "aria-label": "Message input",
@@ -3442,7 +3442,7 @@ var ComposerInput = ({
   );
 };
 var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
-  return /* @__PURE__ */ jsxs13("div", { className: "aui-composer-action-wrapper flex items-center justify-between gap-1 px-2.5 pb-2.5", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "aui-composer-action-wrapper relative z-[1] flex items-center justify-between gap-1 bg-composer-bg px-2.5 pb-2.5", children: [
     /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
       showAttachments && /* @__PURE__ */ jsx25(ComposerAddAttachment, {}),
       toolbar
@@ -3662,7 +3662,7 @@ var Thread = ({
             ThreadPrimitive.Viewport,
             {
               turnAnchor: "bottom",
-              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
+              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-pb-4 px-4 pt-4",
               children: [
                 /* @__PURE__ */ jsx27(
                   WelcomeSlot,
@@ -3682,7 +3682,7 @@ var Thread = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs15(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible bg-transparent pb-4 md:pb-6", children: [
+                /* @__PURE__ */ jsxs15(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) isolate flex-col gap-4 bg-transparent pt-2 pb-4 md:pb-6", children: [
                   /* @__PURE__ */ jsx27(ScrollToBottomSlot, {}),
                   /* @__PURE__ */ jsx27(ComposerSlot, { placeholder: composerPlaceholder })
                 ] })
@@ -3791,7 +3791,7 @@ var AssistantMessage = () => {
           ),
           /* @__PURE__ */ jsx27(MessageError, {})
         ] }),
-        /* @__PURE__ */ jsx27("div", { className: "aui-assistant-message-footer mt-0 ml-1 flex", children: /* @__PURE__ */ jsx27(AssistantActionBar, {}) })
+        /* @__PURE__ */ jsx27("div", { className: "aui-assistant-message-footer mt-1 mb-3 ml-1 flex", children: /* @__PURE__ */ jsx27(AssistantActionBar, {}) })
       ]
     }
   );
@@ -3808,7 +3808,7 @@ var AssistantActionBar = () => {
     ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       className: "aui-assistant-action-bar-root flex items-center gap-0 bg-transparent px-0 py-0.5 text-muted-foreground/60",
       children: [
         /* @__PURE__ */ jsx27(ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ jsxs15(
@@ -3895,7 +3895,7 @@ var UserActionBar = () => {
     ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
-      autohide: "not-last",
+      autohide: "never",
       className: "aui-user-action-bar-root flex flex-col items-end",
       children: /* @__PURE__ */ jsx27(ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ jsx27(
         TooltipIconButton,

package/dist/styles.css

@@ -467,4 +467,12 @@
 .aui-thread-viewport-footer {
   background: transparent !important;
   border-radius: 0 !important;
+  isolation: isolate;
+  z-index: 10;
+}
+
+/* Scrolled assistant action bars must not show through the composer shell. */
+.aui-composer-input,
+.aui-composer-action-wrapper {
+  background-color: var(--composer-bg);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timbal-ai/timbal-react",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React components and runtime for building Timbal chat UIs",
   "type": "module",
   "main": "dist/index.cjs",