@adatechnology/conversations-ui 0.1.0-rc.14 → 0.1.0-rc.15

package/dist/index.js

@@ -319,15 +319,16 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
   return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col", className), children: [
     attachmentsPreview,
     quickReplies?.length ? (
-      /* Uma linha rolável no celular, quebrando em várias no desktop: empilhar os chips no
-         celular come a altura da conversa, que é o que o operador precisa ver. */
-      /* @__PURE__ */ jsx2("div", { className: "mb-2 flex flex-nowrap gap-1 overflow-x-auto sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx2(
+      /* Uma linha só, rolando na horizontal. Deixar quebrar em várias linhas faz a barra crescer
+         conforme o número de respostas rápidas e empurrar a conversa para cima — o composer
+         precisa ter altura previsível, independente de quantos atalhos o host configurou. */
+      /* @__PURE__ */ jsx2("div", { className: "mb-2 flex flex-nowrap gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
           title: quickReply.tooltip,
           onClick: () => replaceContent(quickReply.text),
-          className: "whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400",
+          className: "flex-shrink-0 whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400",
           children: quickReply.label
         },
         quickReply.id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.14",
+  "version": "0.1.0-rc.15",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/RichMessageComposer.tsx

@@ -246,16 +246,17 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
       {attachmentsPreview}
 
       {quickReplies?.length ? (
-        /* Uma linha rolável no celular, quebrando em várias no desktop: empilhar os chips no
-           celular come a altura da conversa, que é o que o operador precisa ver. */
-        <div className="mb-2 flex flex-nowrap gap-1 overflow-x-auto sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        /* Uma linha só, rolando na horizontal. Deixar quebrar em várias linhas faz a barra crescer
+           conforme o número de respostas rápidas e empurrar a conversa para cima — o composer
+           precisa ter altura previsível, independente de quantos atalhos o host configurou. */
+        <div className="mb-2 flex flex-nowrap gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           {quickReplies.map((quickReply) => (
             <button
               key={quickReply.id}
               type="button"
               title={quickReply.tooltip}
               onClick={() => replaceContent(quickReply.text)}
-              className="whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400"
+              className="flex-shrink-0 whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400"
             >
               {quickReply.label}
             </button>