@eeacms/volto-eea-chatbot 4.1.1 → 4.1.2

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [4.1.2](https://github.com/eea/volto-eea-chatbot/compare/4.1.1...4.1.2) - 17 September 2026
+
+#### :rocket: New Features
+
+- feat: make floating pill the default stop button mode [Tiberiu Ichim - [`c7ce2f0`](https://github.com/eea/volto-eea-chatbot/commit/c7ce2f0eb7e0e9fd843eceadf12f5555b807cc1a)]
+- feat: support stop button modes (input, floating pill, message loader) with pulse animation [Tiberiu Ichim - [`fb29273`](https://github.com/eea/volto-eea-chatbot/commit/fb2927319872a1e39f1fdc0557f1b290d76c42dd)]
+- feat: add stop generation button with block toggle option [Tiberiu Ichim - [`b964ae3`](https://github.com/eea/volto-eea-chatbot/commit/b964ae3dce9abb7f4dd8c4acf2c1374bd5004358)]
+
+#### :bug: Bug Fixes
+
+- fix: avoid duplicate stop buttons when using message_loader option [Tiberiu Ichim - [`4f0c854`](https://github.com/eea/volto-eea-chatbot/commit/4f0c854bef40172b754db0ca46405426f1a2fd60)]
+
 ### [4.1.1](https://github.com/eea/volto-eea-chatbot/compare/4.1.0...4.1.1) - 14 September 2026
 
 ### [4.1.0](https://github.com/eea/volto-eea-chatbot/compare/4.0.0...4.1.0) - 31 August 2026

package/locales/de/LC_MESSAGES/volto.po

@@ -46,6 +46,18 @@ msgstr ""
 msgid "Invalid assistant page URL."
 msgstr ""
 
+#. Default: "Send"
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Send"
+msgstr ""
+
+#. Default: "Stop generating"
+#: ChatBlock/chat/AIMessage
+#: ChatBlock/chat/ChatWindow
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Stop generating"
+msgstr ""
+
 #. Default: "Submit question"
 #: AISearchInput/components/SearchInput
 #: AISearchInput/messages

package/locales/en/LC_MESSAGES/volto.po

@@ -46,6 +46,18 @@ msgstr ""
 msgid "Invalid assistant page URL."
 msgstr ""
 
+#. Default: "Send"
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Send"
+msgstr ""
+
+#. Default: "Stop generating"
+#: ChatBlock/chat/AIMessage
+#: ChatBlock/chat/ChatWindow
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Stop generating"
+msgstr ""
+
 #. Default: "Submit question"
 #: AISearchInput/components/SearchInput
 #: AISearchInput/messages

package/locales/it/LC_MESSAGES/volto.po

@@ -46,6 +46,18 @@ msgstr ""
 msgid "Invalid assistant page URL."
 msgstr ""
 
+#. Default: "Send"
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Send"
+msgstr ""
+
+#. Default: "Stop generating"
+#: ChatBlock/chat/AIMessage
+#: ChatBlock/chat/ChatWindow
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Stop generating"
+msgstr ""
+
 #. Default: "Submit question"
 #: AISearchInput/components/SearchInput
 #: AISearchInput/messages

package/locales/ro/LC_MESSAGES/volto.po

@@ -46,6 +46,18 @@ msgstr ""
 msgid "Invalid assistant page URL."
 msgstr ""
 
+#. Default: "Send"
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Send"
+msgstr ""
+
+#. Default: "Stop generating"
+#: ChatBlock/chat/AIMessage
+#: ChatBlock/chat/ChatWindow
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Stop generating"
+msgstr ""
+
 #. Default: "Submit question"
 #: AISearchInput/components/SearchInput
 #: AISearchInput/messages

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2026-07-07T08:22:35.802Z\n"
+"POT-Creation-Date: 2026-09-17T10:07:41.673Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -48,6 +48,18 @@ msgstr ""
 msgid "Invalid assistant page URL."
 msgstr ""
 
+#. Default: "Send"
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Send"
+msgstr ""
+
+#. Default: "Stop generating"
+#: ChatBlock/chat/AIMessage
+#: ChatBlock/chat/ChatWindow
+#: ChatBlock/components/AutoResizeTextarea
+msgid "Stop generating"
+msgstr ""
+
 #. Default: "Submit question"
 #: AISearchInput/components/SearchInput
 #: AISearchInput/messages

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-chatbot",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "description": "@eeacms/volto-eea-chatbot: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ChatBlock/chat/AIMessage.tsx

@@ -23,6 +23,9 @@ import { addCitations } from '@eeacms/volto-eea-chatbot/ChatBlock/utils/citation
 import SVGIcon from '@eeacms/volto-eea-chatbot/ChatBlock/components/Icon';
 import BotIcon from '@eeacms/volto-eea-chatbot/icons/bot.svg';
 import ClearIcon from '@eeacms/volto-eea-chatbot/icons/clear.svg';
+import StopIcon from '@eeacms/volto-eea-chatbot/icons/stop.svg';
+import { trackEvent } from '@eeacms/volto-matomo/utils';
+import { FormattedMessage } from 'react-intl';
 
 // Lazy load heavy components
 const SourceDetails: any = loadable(
@@ -214,6 +217,8 @@ export function AIMessage({
   extraRemarkPlugins,
   extraMarkdownComponents,
   extraRehypePlugins,
+  stopButton,
+  onCancel,
 }: ChatMessageProps) {
   const [allToolsDisplayed, setAllToolsDisplayed] = useState(false);
   const [messageDisplayed, setMessageDisplayed] = useState(false);
@@ -470,6 +475,42 @@ export function AIMessage({
               </RendererComponent>
             </div>
           ))}
+
+        {stopButton === 'message_loader' &&
+          Boolean(message.isFinalMessageComing) &&
+          isLoading &&
+          isLastMessage &&
+          onCancel && (
+            <div className="inline-message-stop">
+              <Button
+                className="inline-message-stop-btn"
+                type="button"
+                aria-label="Stop generating"
+                onClick={() => {
+                  if (enableMatomoTracking) {
+                    trackEvent({
+                      category: persona ? `Chatbot - ${persona}` : 'Chatbot',
+                      action: 'Chatbot: Stop generating',
+                      name: 'Message generation stopped',
+                    });
+                  }
+                  onCancel();
+                }}
+              >
+                <div className="stop-btn-inner">
+                  <div className="stop-icon-circle">
+                    <SVGIcon name={StopIcon} size={8} color="#fff" />
+                  </div>
+                  <span>
+                    <FormattedMessage
+                      id="Stop generating"
+                      defaultMessage="Stop generating"
+                    />
+                  </span>
+                </div>
+              </Button>
+            </div>
+          )}
       </div>
 
       {/* Total fail message */}

package/src/ChatBlock/chat/ChatWindow.tsx

@@ -10,6 +10,7 @@ import type { Persona } from '@eeacms/volto-eea-chatbot/ChatBlock/types/interfac
 import { Button, Form, Segment, Checkbox } from 'semantic-ui-react';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
 import { trackEvent } from '@eeacms/volto-matomo/utils';
+import { FormattedMessage } from 'react-intl';
 
 import { ChatMessage } from '.';
 import { PacketType } from '@eeacms/volto-eea-chatbot/ChatBlock/types/streamingModels';
@@ -19,6 +20,7 @@ import EmptyState from '@eeacms/volto-eea-chatbot/ChatBlock/components/EmptyStat
 import { useChatController } from '@eeacms/volto-eea-chatbot/ChatBlock/hooks';
 import SVGIcon from '@eeacms/volto-eea-chatbot/ChatBlock/components/Icon';
 import PenIcon from '@eeacms/volto-eea-chatbot/icons/square-pen.svg';
+import StopIcon from '@eeacms/volto-eea-chatbot/icons/stop.svg';
 
 import '@eeacms/volto-eea-chatbot/ChatBlock/style.less';
 
@@ -33,6 +35,8 @@ interface ChatWindowProps {
   qgenAsistantId?: number;
   enableQgen?: boolean;
   enableFeedback?: boolean;
+  stopButton?: 'disabled' | 'input' | 'floating' | 'message_loader';
+  enableStopButton?: boolean;
   scrollToInput?: boolean;
   feedbackReasons?: string[];
   qualityCheck?: string;
@@ -74,6 +78,8 @@ function ChatWindow({
     qgenAsistantId,
     enableQgen,
     enableFeedback = true,
+    stopButton,
+    enableStopButton = true,
     scrollToInput,
     feedbackReasons,
     qualityCheck = 'disabled',
@@ -97,6 +103,14 @@ function ChatWindow({
     extraMarkdownComponents,
     extraRehypePlugins,
   } = data;
+
+  const stopButtonSetting:
+    | 'disabled'
+    | 'input'
+    | 'floating'
+    | 'message_loader' =
+    stopButton || (enableStopButton === false ? 'disabled' : 'floating');
+
   const [qualityCheckEnabled, setQualityCheckEnabled] = useState(
     onDemandInputToggle ?? true,
   );
@@ -123,6 +137,7 @@ function ChatWindow({
     isStreaming,
     isFetchingRelatedQuestions,
     clearChat,
+    cancelStreaming,
     setIsDeepResearchEnabled,
     isDeepResearchEnabled,
   } = useChatController({
@@ -249,6 +264,8 @@ function ChatWindow({
                     extraRemarkPlugins={extraRemarkPlugins}
                     extraMarkdownComponents={extraMarkdownComponents}
                     extraRehypePlugins={extraRehypePlugins}
+                    stopButton={stopButtonSetting}
+                    onCancel={cancelStreaming}
                   />
                 </React.Fragment>
               ))}
@@ -261,6 +278,43 @@ function ChatWindow({
                     <div className="comment-content">
                       <div className="loader-container">
                         <div className="loader" />
+                        {stopButtonSetting === 'message_loader' && (
+                          <div className="message-loader-stop">
+                            <Button
+                              className="message-loader-stop-btn"
+                              type="button"
+                              aria-label="Stop generating"
+                              onClick={() => {
+                                if (enableMatomoTracking) {
+                                  trackEvent({
+                                    category: persona?.name
+                                      ? `Chatbot - ${persona.name}`
+                                      : 'Chatbot',
+                                    action: 'Chatbot: Stop generating',
+                                    name: 'Message generation stopped',
+                                  });
+                                }
+                                cancelStreaming();
+                              }}
+                            >
+                              <div className="stop-btn-inner">
+                                <div className="stop-icon-circle">
+                                  <SVGIcon
+                                    name={StopIcon}
+                                    size={8}
+                                    color="#fff"
+                                  />
+                                </div>
+                                <span>
+                                  <FormattedMessage
+                                    id="Stop generating"
+                                    defaultMessage="Stop generating"
+                                  />
+                                </span>
+                              </div>
+                            </Button>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -271,6 +325,39 @@ function ChatWindow({
       </div>
 
       <div className="chat-form">
+        {stopButtonSetting === 'floating' && isStreaming && (
+          <div className="chat-floating-stop">
+            <Button
+              className="floating-stop-btn"
+              type="button"
+              aria-label="Stop generating"
+              onClick={() => {
+                if (enableMatomoTracking) {
+                  trackEvent({
+                    category: persona?.name
+                      ? `Chatbot - ${persona.name}`
+                      : 'Chatbot',
+                    action: 'Chatbot: Stop generating',
+                    name: 'Message generation stopped',
+                  });
+                }
+                cancelStreaming();
+              }}
+            >
+              <div className="stop-btn-inner">
+                <div className="stop-icon-circle">
+                  <SVGIcon name={StopIcon} size={8} color="#fff" />
+                </div>
+                <span>
+                  <FormattedMessage
+                    id="Stop generating"
+                    defaultMessage="Stop generating"
+                  />
+                </span>
+              </div>
+            </Button>
+          </div>
+        )}
         {/* @ts-ignore */}
         <Form>
           <div className="textarea-wrapper">
@@ -283,6 +370,8 @@ function ChatWindow({
                 messages.length > 0 ? 'Ask follow-up...' : placeholderPrompt
               }
               isStreaming={isStreaming}
+              stopButton={stopButtonSetting}
+              onCancel={cancelStreaming}
               enableMatomoTracking={enableMatomoTracking}
               persona={persona}
               onSubmit={onSubmit}

package/src/ChatBlock/components/AutoResizeTextarea.jsx

@@ -1,14 +1,36 @@
 import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 import { Button } from 'semantic-ui-react';
 import { trackEvent } from '@eeacms/volto-matomo/utils';
 import TextareaAutosize from 'react-textarea-autosize';
 
 import SVGIcon from './Icon';
 import SendIcon from '@eeacms/volto-eea-chatbot/icons/send.svg';
+import StopIcon from '@eeacms/volto-eea-chatbot/icons/stop.svg';
+
+const messages = defineMessages({
+  send: {
+    id: 'Send',
+    defaultMessage: 'Send',
+  },
+  stopGenerating: {
+    id: 'Stop generating',
+    defaultMessage: 'Stop generating',
+  },
+});
 
 export default React.forwardRef(function AutoResizeTextarea(props, ref) {
-  const { onSubmit, isStreaming, enableMatomoTracking, persona, ...rest } =
-    props;
+  const {
+    onSubmit,
+    isStreaming,
+    stopButton,
+    enableStopButton = true,
+    onCancel,
+    enableMatomoTracking,
+    persona,
+    ...rest
+  } = props;
+  const intl = useIntl();
   const [input, setInput] = React.useState('');
 
   const handleSubmit = (e) => {
@@ -27,6 +49,24 @@ export default React.forwardRef(function AutoResizeTextarea(props, ref) {
     }
   };
 
+  const handleCancel = (e) => {
+    e.preventDefault();
+    if (enableMatomoTracking) {
+      trackEvent({
+        category: persona?.name ? `Chatbot - ${persona.name}` : 'Chatbot',
+        action: 'Chatbot: Stop generating',
+        name: 'Message generation stopped',
+      });
+    }
+    if (onCancel) {
+      onCancel();
+    }
+  };
+
+  const resolvedStopButton =
+    stopButton || (enableStopButton === false ? 'disabled' : 'floating');
+  const showStopButton = Boolean(resolvedStopButton === 'input' && isStreaming);
+
   return (
     <>
       <TextareaAutosize
@@ -46,22 +86,35 @@ export default React.forwardRef(function AutoResizeTextarea(props, ref) {
       />
 
       <div className="chat-right-actions">
-        <Button
-          className="submit-btn"
-          type="submit"
-          aria-label="Send"
-          onKeyDown={(e) => {
-            handleSubmit(e);
-          }}
-          disabled={isStreaming || input.trim() === ''}
-          onClick={(e) => {
-            handleSubmit(e);
-          }}
-        >
-          <div className="btn-icon">
-            <SVGIcon name={SendIcon} size="28" />
-          </div>
-        </Button>
+        {showStopButton ? (
+          <Button
+            className="stop-btn"
+            type="button"
+            aria-label={intl.formatMessage(messages.stopGenerating)}
+            onClick={handleCancel}
+          >
+            <div className="btn-icon">
+              <SVGIcon name={StopIcon} size={14} color="#fff" />
+            </div>
+          </Button>
+        ) : (
+          <Button
+            className="submit-btn"
+            type="submit"
+            aria-label={intl.formatMessage(messages.send)}
+            onKeyDown={(e) => {
+              handleSubmit(e);
+            }}
+            disabled={isStreaming || input.trim() === ''}
+            onClick={(e) => {
+              handleSubmit(e);
+            }}
+          >
+            <div className="btn-icon">
+              <SVGIcon name={SendIcon} size="28" />
+            </div>
+          </Button>
+        )}
       </div>
     </>
   );

package/src/ChatBlock/schema.jsx

@@ -100,6 +100,7 @@ export function ChatBlockSchema({ assistants, data }) {
             : []),
           'enableFeedback',
           ...(data.enableFeedback ? ['feedbackReasons'] : []),
+          'stopButton',
           'showTools',
           'enableMatomoTracking',
           'scrollToInput',
@@ -175,6 +176,18 @@ export function ChatBlockSchema({ assistants, data }) {
         type: 'boolean',
         default: true,
       },
+      stopButton: {
+        title: 'Stop generation button',
+        choices: [
+          ['disabled', 'Disabled'],
+          ['input', 'Inline text input'],
+          ['floating', 'Floating pill'],
+          ['message_loader', 'Inline message loader'],
+        ],
+        default: 'floating',
+        description:
+          'Choose where and how the stop generation button appears during response generation',
+      },
       qualityCheck: {
         title: 'Quality checks',
         choices: [

package/src/ChatBlock/style.less

@@ -123,6 +123,20 @@
   }
 }
 
+@keyframes stopButtonPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.45);
+  }
+
+  70% {
+    box-shadow: 0 0 0 7px rgba(0, 0, 0, 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+
 @keyframes popIn {
   0% {
     opacity: 0;
@@ -1353,6 +1367,122 @@ mark {
       color: @grey;
     }
   }
+
+  .ui.button.stop-btn {
+    display: flex;
+    width: 28px;
+    height: 28px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border-radius: 50%;
+    margin: 0 0.5em 0 0.8em;
+    animation: stopButtonPulse 1.8s cubic-bezier(0.66, 0, 0, 1) infinite;
+    background: #000;
+    cursor: pointer;
+    transition:
+      background-color 0.2s ease,
+      transform 0.15s ease;
+
+    &:hover {
+      background: #333;
+      transform: scale(1.1);
+    }
+
+    &:focus {
+      background: #000;
+    }
+
+    .btn-icon {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        width: 12px;
+        height: 12px;
+        color: #fff;
+        fill: #fff;
+      }
+    }
+  }
+}
+
+.chat-floating-stop {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0.75em;
+  animation: fadeInScale 0.2s ease;
+}
+
+.message-loader-stop {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 20px;
+}
+
+.inline-message-stop {
+  display: flex;
+  margin-top: 12px;
+  animation: fadeIn 0.2s ease;
+}
+
+.ui.button.floating-stop-btn,
+.ui.button.inline-message-stop-btn,
+.ui.button.message-loader-stop-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 14px;
+  border: 1px solid #d0d5dd;
+  border-radius: 20px;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  color: #344054;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #98a2b3;
+    background: #f9fafb;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    color: #1d2939;
+    transform: translateY(-1px);
+  }
+
+  &:focus {
+    background: #fff;
+    color: #344054;
+  }
+
+  .stop-btn-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .stop-icon-circle {
+    display: flex;
+    width: 18px;
+    height: 18px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    animation: stopButtonPulse 1.8s cubic-bezier(0.66, 0, 0, 1) infinite;
+    background: #000;
+
+    svg {
+      width: 8px;
+      height: 8px;
+      color: #fff;
+      fill: #fff;
+    }
+  }
 }
 
 #quality-check-toggle[disabled] ~ label {

package/src/ChatBlock/types/interfaces.ts

@@ -171,6 +171,8 @@ export interface ChatMessageProps {
   extraMarkdownComponents?: any;
   /** Extra rehype plugins merged after the built-in ones. */
   extraRehypePlugins?: any[];
+  stopButton?: 'disabled' | 'input' | 'floating' | 'message_loader';
+  onCancel?: () => void;
 }
 
 export interface Persona {