@layers-app/shared 0.4.5 → 0.4.7

package/dist/components/AttachmentsPreview/AttachmentsPreview.js

@@ -1,19 +1,21 @@
-import { jsxs as n, Fragment as C, jsx as r } from "react/jsx-runtime";
+import { jsxs as o, Fragment as P, jsx as a } from "react/jsx-runtime";
+import { useState as M } from "react";
 import { Download01Icon as g } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as x } from "@hugeicons/react";
-import { Stack as v, Grid as z, Box as h, Image as F, LoadingOverlay as y, ActionIcon as c, CloseIcon as f, Flex as I, Text as N } from "@mantine/core";
-import { useDisclosure as M } from "@mantine/hooks";
-import { getFileIcons as P } from "../../helpers/getFileIcons.js";
-import { getFileType as A } from "../../helpers/getFileType.js";
-import { AttachmentsGalleryModal as B } from "../AttachmentsGalleryModal/AttachmentsGalleryModal.js";
-import a from "./AttachmentsPreview.module.css.js";
-const U = ({
-  files: o,
-  onRemove: i,
+import { HugeiconsIcon as u } from "@hugeicons/react";
+import { Stack as y, Box as m, Image as z, LoadingOverlay as v, ActionIcon as l, Grid as I, CloseIcon as N, Flex as b, Text as C } from "@mantine/core";
+import { useDisclosure as O } from "@mantine/hooks";
+import { formatBytes as S } from "../../helpers/formatBytes.js";
+import { getFileIcons as G } from "../../helpers/getFileIcons.js";
+import { getFileType as L } from "../../helpers/getFileType.js";
+import { AttachmentsGalleryModal as $ } from "../AttachmentsGalleryModal/AttachmentsGalleryModal.js";
+import r from "./AttachmentsPreview.module.css.js";
+const k = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m3 16 5-5 4 4'/%3E%3Cpath d='m14 14 2-2 5 5'/%3E%3Cline x1='3' y1='3' x2='21' y2='21'/%3E%3C/svg%3E", Y = ({
+  files: s,
+  onRemove: c,
   mode: t,
-  parentIsExisting: u
+  parentIsExisting: p
 }) => {
-  const [T, { open: w, close: b }] = M(!1), s = o.filter((e) => e.isImage), d = o.filter((e) => !e.isImage), D = s.map((e) => ({
+  const [E, { open: x, close: T }] = O(!1), [B, D] = M(0), n = s.filter((e) => e.isImage), h = s.filter((e) => !e.isImage), F = n.map((e) => ({
     id: e.id,
     Url: e.url,
     contentType: e.type || "image/png",
@@ -30,43 +32,98 @@ const U = ({
     version: 1,
     deleted: !1,
     deletedAt: /* @__PURE__ */ new Date()
-  })), m = s.every((e) => !e.isTemp), k = () => {
-    m && w();
+  })), d = n.every((e) => !e.isTemp), f = (e) => {
+    d && (D(e), x());
   };
-  return o.length === 0 ? null : /* @__PURE__ */ n(C, { children: [
-    /* @__PURE__ */ n(v, { gap: "10px", w: "100%", tabIndex: 0, children: [
-      s.length > 0 && /* @__PURE__ */ r(z, { gap: "xs", children: s.map((e) => {
-        const l = o.indexOf(e);
-        return /* @__PURE__ */ r(z.Col, { span: "content", children: /* @__PURE__ */ n(
-          h,
+  return s.length === 0 ? null : /* @__PURE__ */ o(P, { children: [
+    /* @__PURE__ */ o(y, { gap: "10px", w: "100%", tabIndex: 0, children: [
+      t === "view" && n.length >= 2 && /* @__PURE__ */ a(
+        "div",
+        {
+          className: r.mediaGrid,
+          "data-odd": n.length % 2 === 1,
+          children: n.map((e, i) => /* @__PURE__ */ o(
+            m,
+            {
+              pos: "relative",
+              className: `${r.imagePreviewWrapper} ${r.mediaTile}`,
+              children: [
+                /* @__PURE__ */ a(
+                  z,
+                  {
+                    src: e.src,
+                    fallbackSrc: k,
+                    fit: "cover",
+                    className: `${r.tileImg} ${r.mediaFadeIn}`,
+                    style: { cursor: d ? "zoom-in" : "default" },
+                    onClick: () => f(i)
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  v,
+                  {
+                    visible: e.isTemp && p,
+                    loaderProps: { size: 20 }
+                  }
+                ),
+                !e.isTemp && /* @__PURE__ */ a(
+                  l,
+                  {
+                    component: "a",
+                    size: "22px",
+                    href: e.url,
+                    download: e.name,
+                    rel: "noopener noreferrer",
+                    variant: "subtle",
+                    color: "white",
+                    bg: "var(--mantine-color-dark-filled, #2E2E2E)",
+                    className: r.downloadButton,
+                    children: /* @__PURE__ */ a(u, { size: 16, icon: g })
+                  }
+                )
+              ]
+            },
+            e.id
+          ))
+        }
+      ),
+      !(t === "view" && n.length >= 2) && n.length > 0 && /* @__PURE__ */ a(I, { gap: "xs", children: n.map((e, i) => {
+        const w = s.indexOf(e);
+        return /* @__PURE__ */ a(I.Col, { span: "content", children: /* @__PURE__ */ o(
+          m,
           {
             pos: "relative",
-            className: a.imagePreviewWrapper,
-            style: { width: "var(--attachment-image-w, 56px)", height: "var(--attachment-image-h, 56px)" },
+            className: r.imagePreviewWrapper,
+            style: {
+              width: "var(--attachment-image-w, 56px)",
+              height: "var(--attachment-image-h, 56px)"
+            },
             children: [
-              /* @__PURE__ */ r(
-                F,
+              /* @__PURE__ */ a(
+                z,
                 {
                   src: e.src,
+                  fallbackSrc: k,
+                  className: r.mediaFadeIn,
                   w: "100%",
                   h: "100%",
                   fit: "cover",
                   radius: "sm",
                   style: {
-                    cursor: m ? "zoom-in" : "default"
+                    cursor: d ? "zoom-in" : "default"
                   },
-                  onClick: () => k()
+                  onClick: () => f(i)
                 }
               ),
-              /* @__PURE__ */ r(
-                y,
+              /* @__PURE__ */ a(
+                v,
                 {
-                  visible: e.isTemp && t === "view" && u,
+                  visible: e.isTemp && t === "view" && p,
                   loaderProps: { size: 20 }
                 }
               ),
-              t === "view" && !e.isTemp && /* @__PURE__ */ r(
-                c,
+              t === "view" && !e.isTemp && /* @__PURE__ */ a(
+                l,
                 {
                   component: "a",
                   size: "20px",
@@ -78,54 +135,54 @@ const U = ({
                   top: 2,
                   right: 2,
                   bg: "var(--mantine-color-dark-filled, #2E2E2E)",
-                  className: a.downloadButton,
-                  children: /* @__PURE__ */ r(x, { size: 16, icon: g })
+                  className: r.downloadButton,
+                  children: /* @__PURE__ */ a(u, { size: 16, icon: g })
                 }
               ),
-              t === "draft" && i && /* @__PURE__ */ r(
-                c,
+              t === "draft" && c && /* @__PURE__ */ a(
+                l,
                 {
                   size: "20px",
                   radius: "xl",
                   variant: "filled",
-                  onMouseDown: (p) => p.preventDefault(),
+                  onMouseDown: (A) => A.preventDefault(),
                   pos: "absolute",
                   color: "dark",
-                  onClick: () => i(l),
-                  className: a.deleteButton,
-                  children: /* @__PURE__ */ r(f, { size: "12px" })
+                  onClick: () => c(w),
+                  className: r.deleteButton,
+                  children: /* @__PURE__ */ a(N, { size: "12px" })
                 }
               )
             ]
           }
         ) }, e.id);
       }) }),
-      d.length > 0 && /* @__PURE__ */ r(
-        h,
+      h.length > 0 && /* @__PURE__ */ a(
+        m,
         {
           w: "100%",
-          className: a.filePreviewList,
-          "data-many": d.length >= 4,
-          children: d.map((e) => {
-            const l = o.indexOf(e);
-            return /* @__PURE__ */ n(h, { className: a.filePreviewWrapper, children: [
-              /* @__PURE__ */ r(
-                y,
+          className: r.filePreviewList,
+          "data-many": t === "draft" && h.length >= 4,
+          children: h.map((e) => {
+            const i = s.indexOf(e);
+            return /* @__PURE__ */ o(m, { className: r.filePreviewWrapper, children: [
+              /* @__PURE__ */ a(
+                v,
                 {
-                  visible: e.isTemp && t === "view" && u,
+                  visible: e.isTemp && t === "view" && p,
                   loaderProps: { size: 20 }
                 }
               ),
-              /* @__PURE__ */ n(
-                I,
+              /* @__PURE__ */ o(
+                b,
                 {
                   align: "center",
                   justify: "space-between",
                   wrap: "nowrap",
                   gap: 2,
                   children: [
-                    /* @__PURE__ */ n(
-                      I,
+                    /* @__PURE__ */ o(
+                      b,
                       {
                         align: "center",
                         gap: "xs",
@@ -133,19 +190,19 @@ const U = ({
                         flex: 1,
                         miw: 0,
                         children: [
-                          P(
-                            A(e.type, !1, e.name),
+                          G(
+                            L(e.type, !1, e.name),
                             !1,
                             36
                           ),
-                          /* @__PURE__ */ n(v, { gap: 0, flex: 1, miw: 0, children: [
-                            /* @__PURE__ */ r(
-                              N,
+                          /* @__PURE__ */ o(y, { gap: 0, flex: 1, miw: 0, children: [
+                            /* @__PURE__ */ a(
+                              C,
                               {
                                 size: "sm",
                                 truncate: !0,
                                 title: e.name,
-                                className: a.fileDownloadName,
+                                className: r.fileDownloadName,
                                 component: "a",
                                 href: e.url,
                                 download: e.name,
@@ -154,16 +211,13 @@ const U = ({
                                 children: e.name
                               }
                             ),
-                            /* @__PURE__ */ n(N, { size: "xs", c: "dimmed", children: [
-                              Math.round(e.size / 1024),
-                              " KB"
-                            ] })
+                            /* @__PURE__ */ a(C, { size: "xs", className: r.fileSize, children: S(e.size, 1) })
                           ] })
                         ]
                       }
                     ),
-                    t === "view" && !e.isTemp && /* @__PURE__ */ r(
-                      c,
+                    t === "view" && !e.isTemp && /* @__PURE__ */ a(
+                      l,
                       {
                         component: "a",
                         href: e.url,
@@ -172,24 +226,24 @@ const U = ({
                         variant: "subtle",
                         color: "gray",
                         size: "sm",
-                        className: a.downloadButton,
-                        children: /* @__PURE__ */ r(x, { size: 16, icon: g })
+                        className: r.downloadButton,
+                        children: /* @__PURE__ */ a(u, { size: 16, icon: g })
                       }
                     )
                   ]
                 }
               ),
-              t === "draft" && i && /* @__PURE__ */ r(
-                c,
+              t === "draft" && c && /* @__PURE__ */ a(
+                l,
                 {
                   size: "xs",
                   radius: "xl",
-                  onMouseDown: (p) => p.preventDefault(),
+                  onMouseDown: (w) => w.preventDefault(),
                   variant: "filled",
                   color: "dark",
-                  onClick: () => i(l),
-                  className: a.deleteButton,
-                  children: /* @__PURE__ */ r(f, { size: "12px" })
+                  onClick: () => c(i),
+                  className: r.deleteButton,
+                  children: /* @__PURE__ */ a(N, { size: "12px" })
                 }
               )
             ] }, e.id);
@@ -197,16 +251,17 @@ const U = ({
         }
       )
     ] }),
-    m && /* @__PURE__ */ r(
-      B,
+    d && /* @__PURE__ */ a(
+      $,
       {
-        opened: T,
-        onOpenChange: (e) => e ? w() : b(),
-        attachments: D
+        opened: E,
+        onOpenChange: (e) => e ? x() : T(),
+        attachments: F,
+        initialIndex: B
       }
     )
   ] });
 };
 export {
-  U as AttachmentsPreview
+  Y as AttachmentsPreview
 };

package/dist/components/AttachmentsPreview/AttachmentsPreview.module.css.js

@@ -1,17 +1,27 @@
-const e = "_imagePreviewWrapper_1814g_1", t = "_deleteButton_1814g_11", o = "_downloadButton_1814g_25", i = "_filePreviewList_1814g_63", r = "_fileDownloadName_1814g_89", a = "_filePreviewWrapper_1814g_101", l = {
-  imagePreviewWrapper: e,
-  deleteButton: t,
-  downloadButton: o,
-  filePreviewList: i,
-  fileDownloadName: r,
-  filePreviewWrapper: a
+const e = "_mediaGrid_1n4ll_6", l = "_mediaTile_1n4ll_14", i = "_tileImg_1n4ll_29", n = "_mediaFadeIn_1n4ll_36", t = "_downloadButton_1n4ll_58", _ = "_imagePreviewWrapper_1n4ll_56", a = "_deleteButton_1n4ll_69", o = "_filePreviewList_1n4ll_95", d = "_fileDownloadName_1n4ll_108", r = "_filePreviewWrapper_1n4ll_114", m = "_fileSize_1n4ll_170", s = {
+  mediaGrid: e,
+  mediaTile: l,
+  tileImg: i,
+  mediaFadeIn: n,
+  downloadButton: t,
+  imagePreviewWrapper: _,
+  deleteButton: a,
+  filePreviewList: o,
+  fileDownloadName: d,
+  filePreviewWrapper: r,
+  fileSize: m
 };
 export {
-  l as default,
-  t as deleteButton,
-  o as downloadButton,
-  r as fileDownloadName,
-  i as filePreviewList,
-  a as filePreviewWrapper,
-  e as imagePreviewWrapper
+  s as default,
+  a as deleteButton,
+  t as downloadButton,
+  d as fileDownloadName,
+  o as filePreviewList,
+  r as filePreviewWrapper,
+  m as fileSize,
+  _ as imagePreviewWrapper,
+  n as mediaFadeIn,
+  e as mediaGrid,
+  l as mediaTile,
+  i as tileImg
 };

package/dist/components/BouncingLogo/BouncingLogo.d.ts

@@ -1,8 +1,6 @@
-import { appMode } from '../../helpers/isAppMode';
 type BouncingLogoProps = {
     c?: string;
-    appMode?: appMode | null;
 };
-export declare const BouncingLogo: ({ c, appMode }: BouncingLogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BouncingLogo: ({ c }: BouncingLogoProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=BouncingLogo.d.ts.map

package/dist/components/BouncingLogo/BouncingLogo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BouncingLogo.d.ts","sourceRoot":"","sources":["../../../src/components/BouncingLogo/BouncingLogo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAa,MAAM,yBAAyB,CAAC;AAM7D,KAAK,iBAAiB,GAAG;IACvB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,gBAAgB,iBAAiB,4CAmB7D,CAAC"}
+{"version":3,"file":"BouncingLogo.d.ts","sourceRoot":"","sources":["../../../src/components/BouncingLogo/BouncingLogo.tsx"],"names":[],"mappings":"AAOA,KAAK,iBAAiB,GAAG;IACvB,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAgBpD,CAAC"}

package/dist/components/BouncingLogo/BouncingLogo.js

@@ -1,29 +1,23 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { Box as t } from "@mantine/core";
-import { isAppMode as a } from "../../helpers/isAppMode.js";
-import { useIsDarkTheme as c } from "../../helpers/themeUtils.js";
-import { Logotype as d } from "../Logotype.js";
-import o from "./BouncingLogo.module.css.js";
-const u = ({ c: r, appMode: i }) => {
-  const m = c(), s = a(i || "SAAS", "DESKTOP");
-  return /* @__PURE__ */ p(t, { className: o.wrapper, children: [
-    /* @__PURE__ */ e("div", { className: `${o.logo} ${s ? o.desktop : ""}`, children: /* @__PURE__ */ e(
-      d,
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { Box as m } from "@mantine/core";
+import { useIsDarkTheme as a } from "../../helpers/themeUtils.js";
+import { Logotype as t } from "../Logotype.js";
+import s from "./BouncingLogo.module.css.js";
+const d = ({ c: r }) => {
+  const e = a();
+  return /* @__PURE__ */ i(m, { className: s.wrapper, children: [
+    /* @__PURE__ */ o("div", { className: s.logo, children: /* @__PURE__ */ o(
+      t,
       {
         isLink: !1,
-        c: r || (m ? "white" : "black"),
+        c: r || (e ? "white" : "black"),
         minified: !0,
-        isDesktop: s
+        isDesktop: !1
       }
     ) }),
-    /* @__PURE__ */ e(
-      "div",
-      {
-        className: `${o.shadow} ${s ? o.desktopShadow : ""}`
-      }
-    )
+    /* @__PURE__ */ o("div", { className: s.shadow })
   ] });
 };
 export {
-  u as BouncingLogo
+  d as BouncingLogo
 };

package/dist/components/BouncingLogo/BouncingLogo.module.css.js

@@ -1,15 +1,11 @@
-const o = "_wrapper_1n4or_1", s = "_logo_1n4or_15", _ = "_desktop_1n4or_45", t = "_shadow_1n4or_73", d = "_desktopShadow_1n4or_99", p = {
+const o = "_wrapper_16jue_1", s = "_logo_16jue_8", a = "_shadow_16jue_23", e = {
   wrapper: o,
   logo: s,
-  desktop: _,
-  shadow: t,
-  desktopShadow: d
+  shadow: a
 };
 export {
-  p as default,
-  _ as desktop,
-  d as desktopShadow,
+  e as default,
   s as logo,
-  t as shadow,
+  a as shadow,
   o as wrapper
 };

package/dist/components/Chat/CallMessage/CallMessage.module.css.js

@@ -1,15 +1,15 @@
-const t = "_root_1rrzr_1", o = "_icon_1rrzr_13", r = "_body_1rrzr_31", _ = "_title_1rrzr_41", c = "_meta_1rrzr_53", e = {
+const t = "_root_328w5_1", o = "_icon_328w5_7", _ = "_body_328w5_16", c = "_title_328w5_21", e = "_meta_328w5_27", n = {
   root: t,
   icon: o,
-  body: r,
-  title: _,
-  meta: c
+  body: _,
+  title: c,
+  meta: e
 };
 export {
-  r as body,
-  e as default,
+  _ as body,
+  n as default,
   o as icon,
-  c as meta,
+  e as meta,
   t as root,
-  _ as title
+  c as title
 };

package/dist/components/Chat/ChatBubble/ChatBubble.module.css.js

@@ -1,9 +1,9 @@
-const b = "_root_1escb_1", o = "_bubble_1escb_27", t = {
-  root: b,
-  bubble: o
+const o = "_root_1oixr_1", b = "_bubble_1oixr_14", t = {
+  root: o,
+  bubble: b
 };
 export {
-  o as bubble,
+  b as bubble,
   t as default,
-  b as root
+  o as root
 };

package/dist/components/Chat/ChatHeader/ChatHeader.module.css.js

@@ -1,4 +1,4 @@
-const t = "_root_13wo5_1", o = "_info_13wo5_23", e = "_title_13wo5_43", n = "_subtitle_13wo5_61", s = "_selectionBar_13wo5_87", _ = "_selectionCount_13wo5_97", i = {
+const t = "_root_yfjvk_1", o = "_info_yfjvk_12", e = "_title_yfjvk_22", n = "_subtitle_yfjvk_31", s = "_selectionBar_yfjvk_44", _ = "_selectionCount_yfjvk_49", i = {
   root: t,
   info: o,
   title: e,

package/dist/components/Chat/ChatInput/ChatInput.module.css.js

@@ -1,37 +1,49 @@
-const t = "_root_6rx8s_1", e = "_inputRow_6rx8s_17", n = "_inputBox_6rx8s_31", r = "_header_6rx8s_49", _ = "_headerIcon_6rx8s_63", a = "_headerBar_6rx8s_83", o = "_headerTitle_6rx8s_111", s = "_headerText_6rx8s_131", c = "_headerAttachment_6rx8s_149", x = "_hiddenFileInput_6rx8s_177", d = "_attachments_6rx8s_195", h = "_inputArea_6rx8s_203", u = "_iconButton_6rx8s_221", i = "_textarea_6rx8s_229", p = "_textareaInput_6rx8s_239", B = "_sendButton_6rx8s_267", I = {
+const t = "_root_1y8n6_1", n = "_inputRow_1y8n6_9", e = "_inputBox_1y8n6_19", o = "_inputArea_1y8n6_57", _ = "_notice_1y8n6_69", c = "_noticeIcon_1y8n6_102", i = "_noticeMain_1y8n6_112", a = "_noticeText_1y8n6_121", s = "_noticeAction_1y8n6_126", r = "_noticeDismiss_1y8n6_130", d = "_header_1y8n6_140", h = "_headerIcon_1y8n6_147", y = "_headerBar_1y8n6_157", u = "_headerTitle_1y8n6_171", p = "_headerText_1y8n6_181", x = "_headerAttachment_1y8n6_190", B = "_hiddenFileInput_1y8n6_204", I = "_attachments_1y8n6_213", m = "_iconButton_1y8n6_226", A = "_textarea_1y8n6_231", T = "_textareaInput_1y8n6_236", l = "_sendButton_1y8n6_250", w = {
   root: t,
-  inputRow: e,
-  inputBox: n,
-  header: r,
-  headerIcon: _,
-  headerBar: a,
-  headerTitle: o,
-  headerText: s,
-  headerAttachment: c,
-  hiddenFileInput: x,
-  attachments: d,
-  inputArea: h,
-  iconButton: u,
-  textarea: i,
-  textareaInput: p,
-  sendButton: B
+  inputRow: n,
+  inputBox: e,
+  inputArea: o,
+  notice: _,
+  noticeIcon: c,
+  noticeMain: i,
+  noticeText: a,
+  noticeAction: s,
+  noticeDismiss: r,
+  header: d,
+  headerIcon: h,
+  headerBar: y,
+  headerTitle: u,
+  headerText: p,
+  headerAttachment: x,
+  hiddenFileInput: B,
+  attachments: I,
+  iconButton: m,
+  textarea: A,
+  textareaInput: T,
+  sendButton: l
 };
 export {
-  d as attachments,
-  I as default,
-  r as header,
-  c as headerAttachment,
-  a as headerBar,
-  _ as headerIcon,
-  s as headerText,
-  o as headerTitle,
-  x as hiddenFileInput,
-  u as iconButton,
-  h as inputArea,
-  n as inputBox,
-  e as inputRow,
+  I as attachments,
+  w as default,
+  d as header,
+  x as headerAttachment,
+  y as headerBar,
+  h as headerIcon,
+  p as headerText,
+  u as headerTitle,
+  B as hiddenFileInput,
+  m as iconButton,
+  o as inputArea,
+  e as inputBox,
+  n as inputRow,
+  _ as notice,
+  s as noticeAction,
+  r as noticeDismiss,
+  c as noticeIcon,
+  i as noticeMain,
+  a as noticeText,
   t as root,
-  B as sendButton,
-  i as textarea,
-  p as textareaInput
+  l as sendButton,
+  A as textarea,
+  T as textareaInput
 };

package/dist/components/Chat/ChatInput/index.d.ts

@@ -17,15 +17,43 @@ export interface ChatInputEditing {
     text: string;
     onCancel: () => void;
 }
+/**
+ * A persistent context strip rendered inside the composer, attached to the top
+ * of the input box (Slack/Discord-style). Reusable for any in-composer notice —
+ * "external contact", connection state, etc. Unlike {@link ChatInputReplyTo} /
+ * {@link ChatInputEditing} it isn't dismissable and doesn't move focus.
+ */
+export interface ChatInputNoticeAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ChatInputNotice {
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    /** Colour scheme. Defaults to `warning` (the external-contact yellow). */
+    variant?: 'warning' | 'info' | 'neutral' | 'danger';
+    /** Optional primary action rendered as a pill button on the right. */
+    action?: ChatInputNoticeAction;
+    /** When set, a ✕ dismiss button is shown on the far right. */
+    onDismiss?: () => void;
+}
 export interface ChatInputProps {
     value?: string;
     onChange?: (value: string) => void;
     onSend?: (value: string) => void;
     onAttach?: (files: File[]) => void;
     onEmojiSelect?: (emoji: string) => void;
+    /**
+     * When provided, a GIF tab appears in the composer's emoji picker. Receives
+     * the picked GIF's URL — the host sends it as a message (GIFs aren't text,
+     * so they don't go through {@link onChange} / {@link onSend}).
+     */
+    onGifSelect?: (url: string) => void;
     placeholder?: string;
     replyTo?: ChatInputReplyTo;
     editing?: ChatInputEditing;
+    /** Persistent context strip attached to the top of the input box. */
+    notice?: ChatInputNotice;
     attachments?: CommentComposerTypes.AnyCommentFile[];
     onRemoveAttachment?: (index: number) => void;
     maxLength?: number;
@@ -39,7 +67,7 @@ export interface ChatInputProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export declare function ChatInput({ value: controlledValue, onChange, onSend, onAttach, onEmojiSelect, placeholder, replyTo, editing, attachments, onRemoveAttachment, maxLength, disabled, disableAttachments, className, style, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ value: controlledValue, onChange, onSend, onAttach, onEmojiSelect, onGifSelect, placeholder, replyTo, editing, notice, attachments, onRemoveAttachment, maxLength, disabled, disableAttachments, className, style, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChatInput {
     var displayName: string;
 }