@memori.ai/memori-react 8.18.2 → 8.19.0

package/src/components/ChatTextArea/ChatTextArea.tsx

@@ -15,6 +15,8 @@ export interface Props {
   onFocus?: (e: React.FocusEvent) => void;
   onBlur?: (e: React.FocusEvent) => void;
   onExpandedChange?: (expanded: boolean) => void;
+  /** When set, shows a character counter (e.g. "0 / 500") above the textarea and enforces the max length. */
+  maxTextareaCharacters?: number;
 }
 
 const ChatTextArea: React.FC<Props> = ({
@@ -26,6 +28,7 @@ const ChatTextArea: React.FC<Props> = ({
   onFocus,
   onBlur,
   onExpandedChange,
+  maxTextareaCharacters,
 }) => {
   const { t } = useTranslation();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -78,22 +81,48 @@ const ChatTextArea: React.FC<Props> = ({
     }
   }, [value]);
 
+  const displayValue =
+    maxTextareaCharacters != null
+      ? value.slice(0, maxTextareaCharacters)
+      : value;
+
+  // Keep parent state in sync when value exceeds limit (e.g. paste or prop change)
+  useEffect(() => {
+    if (
+      maxTextareaCharacters != null &&
+      value.length > maxTextareaCharacters
+    ) {
+      onChange(value.slice(0, maxTextareaCharacters));
+    }
+  }, [maxTextareaCharacters, value, onChange]);
+
   return (
     <div
       data-testid="chat-textarea"
       className={cx('memori-chat-textarea', {
         'memori-chat-textarea--disabled': disabled,
+        'memori-chat-textarea--with-counter': maxTextareaCharacters != null,
       })}
     >
+      {maxTextareaCharacters != null && (
+        <div className="memori-chat-textarea--counter" aria-live="polite">
+          {displayValue.length} / {maxTextareaCharacters}
+        </div>
+      )}
       <div ref={innerRef} className="memori-chat-textarea--inner">
         <textarea
           ref={textareaRef}
           className="memori-chat-textarea--input"
           disabled={disabled}
-          value={value}
+          value={displayValue}
           placeholder={t('placeholder', 'Ask a question') || 'Ask a question'}
           onChange={e => {
-            onChange(e.target.value);
+            const next = e.target.value;
+            if (maxTextareaCharacters != null) {
+              onChange(next.slice(0, maxTextareaCharacters));
+            } else {
+              onChange(next);
+            }
           }}
           onKeyDownCapture={e => {
             // On mobile/tablet only: Enter creates a new line instead of sending.
@@ -106,10 +135,12 @@ const ChatTextArea: React.FC<Props> = ({
               e.preventDefault();
 
               const el = textareaRef.current;
-              const start = el?.selectionStart ?? value.length;
-              const end = el?.selectionEnd ?? value.length;
-              const nextValue = `${value.slice(0, start)}\n${value.slice(end)}`;
-
+              const start = el?.selectionStart ?? displayValue.length;
+              const end = el?.selectionEnd ?? displayValue.length;
+              let nextValue = `${displayValue.slice(0, start)}\n${displayValue.slice(end)}`;
+              if (maxTextareaCharacters != null) {
+                nextValue = nextValue.slice(0, maxTextareaCharacters);
+              }
               onChange(nextValue);
 
               // Restore caret right after the inserted newline
@@ -130,7 +161,7 @@ const ChatTextArea: React.FC<Props> = ({
           onPaste={onPaste}
           onFocus={onFocus}
           onBlur={onBlur}
-          maxLength={100000}
+          maxLength={maxTextareaCharacters ?? 100000}
         />
       </div>
     </div>

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -435,6 +435,10 @@ export interface Props {
   __WEBCOMPONENT__?: boolean;
   /** Override total document payload and per-document content limit (character count). Default from constants. */
   maxTotalMessagePayload?: number;
+  /** When true, pasted text is not added as a document attachment (normal paste only). Default false. */
+  disablePastedText?: boolean;
+  /** Max characters in chat textarea; shows counter and disables paste-as-attachment when set. */
+  maxTextareaCharacters?: number;
 }
 
 const MemoriWidget = ({
@@ -491,6 +495,8 @@ const MemoriWidget = ({
   applyVarsToRoot = false,
   showFunctionCache = false,
   maxTotalMessagePayload,
+  disablePastedText = false,
+  maxTextareaCharacters,
 }: Props) => {
   const { t, i18n } = useTranslation();
 
@@ -3025,6 +3031,8 @@ const MemoriWidget = ({
     experts,
     useMathFormatting: applyMathFormatting,
     maxTotalMessagePayload,
+    disablePastedText,
+    maxTextareaCharacters,
   };
 
   const integrationBackground =

package/src/components/layouts/layouts.stories.tsx

@@ -167,6 +167,7 @@ WebsiteAssistant3.args = {
   showOnlyLastMessages: false,
   showTranslationOriginal: false,
   showCopyButton: false,
+  disablePastedText: true,
 };
 
 

package/src/index.stories.tsx

@@ -101,6 +101,21 @@ WithUploadWithMaxTotalMessagePayload.args = {
   maxTotalMessagePayload: 300000,
 };
 
+export const WithMaxTextareaCharacters = Template.bind({});
+WithMaxTextareaCharacters.args = {
+  ownerUserName: 'nzambello',
+  memoriName: 'Nicola',
+  tenantID: 'www.aisuru.com',
+  engineURL: 'https://engine.memori.ai',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://www.aisuru.com',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  enableAudio: true,
+  showUpload: true,
+  maxTextareaCharacters: 500,
+};
+
 export const WithPrivateAgent = Template.bind({});
 WithPrivateAgent.args = {
   memoriName: 'Test Private',

package/src/index.tsx

@@ -48,7 +48,7 @@ export interface Props {
   __WEBCOMPONENT__?: boolean;
   showClear?: boolean;
   showOnlyLastMessages?: boolean;
-  showTypingText?: boolean;
+  showTypingText?: boolean; 
   showLogin?: boolean;
   showUpload?: boolean;
   showReasoning?: boolean;
@@ -77,6 +77,10 @@ export interface Props {
   applyVarsToRoot?: boolean;
   /** Override total document payload and per-document content limit (character count). Default from constants (200000). */
   maxTotalMessagePayload?: number;
+  /** When true, pasted text is not added as a document attachment (normal paste only). Default false. */
+  disablePastedText?: boolean;
+  /** Max characters allowed in the chat textarea. When set, shows a counter (e.g. "0 / 500") and disables paste-as-attachment by default. */
+  maxTextareaCharacters?: number;
 }
 
 const getPreferredLanguages = () => {
@@ -156,6 +160,8 @@ const Memori: React.FC<Props> = ({
   applyVarsToRoot = false,
   __WEBCOMPONENT__ = false,
   maxTotalMessagePayload,
+  disablePastedText = false,
+  maxTextareaCharacters,
 }) => {
   const [memori, setMemori] = useState<IMemori>();
   const [tenant, setTenant] = useState<Tenant>();
@@ -469,6 +475,8 @@ const Memori: React.FC<Props> = ({
               userAvatar={userAvatar}
               applyVarsToRoot={applyVarsToRoot}
               maxTotalMessagePayload={maxTotalMessagePayload}
+              disablePastedText={disablePastedText ?? (maxTextareaCharacters != null)}
+              maxTextareaCharacters={maxTextareaCharacters}
               disableTextEnteredEvents={disableTextEnteredEvents}
               // From layout, from client if allowed
               {...clientAttributes}
@@ -570,5 +578,7 @@ Memori.propTypes = {
   autoStart: PropTypes.bool,
   applyVarsToRoot: PropTypes.bool,
   maxTotalMessagePayload: PropTypes.number,
+  disablePastedText: PropTypes.bool,
+  maxTextareaCharacters: PropTypes.number,
 };
 export default Memori;

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '8.18.2';
+export const version = '8.19.0';