@memori.ai/memori-react 8.12.0 → 8.13.0

package/src/components/ChatTextArea/ChatTextArea.css

@@ -1,78 +1,128 @@
 .memori-chat-textarea {
     position: relative;
-    height: 40px;
+    display: flex;
+    width: 100%;
+    min-height: 36px;
     box-sizing: border-box;
-    flex: 1 0 auto;
-    margin-right: 0.5rem;
+    flex: 1;
+    align-items: center;
     transition: height 0.2s ease-in-out;
-    /* margin-left: 0.5rem; */
 }
 
 .memori-chat-textarea--expanded {
-    height: 300px;
+    min-height: 36px;
 }
 
 /* Responsive adjustments for small screens */
 @media (max-width: 768px) {
     .memori-chat-textarea--expanded {
-        height: 200px;
+        min-height: 36px;
     }
 }
 
 @media (max-width: 480px) {
     .memori-chat-textarea--expanded {
-        height: 150px;
+        min-height: 36px;
     }
 }
 
 .memori-chat-textarea--inner {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    position: relative;
     display: flex;
     overflow: hidden;
-    height: 1000px;
-    max-height: 40px;
+    width: 100%;
+    min-height: 36px;
+    max-height: 208px;
     box-sizing: border-box;
-    border: 1px solid lightgray;
-    border-radius: 10px;
-    background: #fff;
-    transition: max-height 0.2s ease-in-out;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    transition: height 0.2s ease-in-out;
 }
 
 .memori-chat-textarea--expanded .memori-chat-textarea--inner {
-    max-height: 300px;
+    max-height: 208px;
 }
 
 /* Responsive adjustments for textarea inner */
 @media (max-width: 768px) {
+    .memori-chat-textarea--inner {
+        max-height: 200px;
+    }
+    
     .memori-chat-textarea--expanded .memori-chat-textarea--inner {
         max-height: 200px;
     }
 }
 
 @media (max-width: 480px) {
+    .memori-chat-textarea--inner {
+        max-height: 150px;
+    }
+    
     .memori-chat-textarea--expanded .memori-chat-textarea--inner {
         max-height: 150px;
     }
 }
 
 .memori-chat-textarea--disabled .memori-chat-textarea--inner {
-    background: #e3e3e3;
-    opacity: 0.8;
+    opacity: 0.5;
 }
 
 textarea.memori-chat-textarea--input {
     width: 100%;
-    height: 100%;
+    min-height: 36px;
+    max-height: 208px;
     box-sizing: border-box;
-    padding: 6.5px 11px;
+    /* padding: 8px 0; */
     border: none;
-    background: #fff;
+    background: transparent;
     color: #000;
-    font-family: var(--memori-font-family);
+    font-family: var(--memori-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif);
+    font-size: 16px;
+    line-height: 1.5;
+    overflow-y: auto;
     resize: none;
+    scrollbar-width: thin;
+    transition: height 0.2s ease-in-out;
+}
+
+/* Placeholder styling */
+textarea.memori-chat-textarea--input::placeholder {
+    color: rgba(0, 0, 0, 0.5);
+}
+
+/* Scrollbar styling */
+textarea.memori-chat-textarea--input::-webkit-scrollbar {
+    width: 6px;
+}
+
+textarea.memori-chat-textarea--input::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.3);
+}
+
+/* Responsive adjustments for textarea input */
+@media (max-width: 768px) {
+    textarea.memori-chat-textarea--input {
+        max-height: 200px;
+        font-size: 16px; /* Prevent zoom on iOS */
+    }
+}
+
+@media (max-width: 480px) {
+    textarea.memori-chat-textarea--input {
+        max-height: 150px;
+        font-size: 16px; /* Prevent zoom on iOS */
+    }
 }
 
 textarea.memori-chat-textarea--input:focus {
@@ -81,6 +131,7 @@ textarea.memori-chat-textarea--input:focus {
 
 .memori-chat-textarea--disabled textarea.memori-chat-textarea--input {
     cursor: not-allowed;
+    opacity: 0.5;
 }
 
 .memori-chat-textarea--expand {
@@ -97,15 +148,12 @@ button.memori-chat-textarea--expand-button {
 
 button.memori-chat-textarea--expand-button:hover,
 button.memori-chat-textarea--expand-button:focus {
-    color: #000;
     opacity: 1;
 }
 
 .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:hover,
 .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus,
 .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus-within {
-    border-color: var(--memori-primary);
-    box-shadow: none;
     outline: none;
 }
 
@@ -117,7 +165,3 @@ button.memori-chat-textarea--expand-button:focus {
     .memori-chat-textarea--expand-button {
     opacity: 1;
 }
-
-.memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea-inner:focus-within {
-    box-shadow: 0 0.2rem 0.33rem #b5b6c4;
-}

package/src/components/ChatTextArea/ChatTextArea.test.tsx

@@ -25,19 +25,4 @@ it('renders ChatTextArea with long text unchanged', () => {
     />
   );
   expect(container).toMatchSnapshot();
-});
-
-it('renders ChatTextArea expanded unchanged', () => {
-  render(
-    <ChatTextArea
-      value="Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur. Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur."
-      onChange={jest.fn()}
-    />
-  );
-
-  fireEvent.click(screen.getByRole('button'));
-
-  expect(screen.getByTestId('chat-textarea').classList).toContain(
-    'memori-chat-textarea--expanded'
-  );
-});
+});

package/src/components/ChatTextArea/ChatTextArea.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import Button from '../ui/Button';
 import Expand from '../icons/Expand';
@@ -25,29 +25,70 @@ const ChatTextArea: React.FC<Props> = ({
   onExpandedChange,
 }) => {
   const { t } = useTranslation();
-  const [expanded, setExpanded] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  const MIN_HEIGHT = 36;
+  const MAX_HEIGHT = 208;
 
-  const handleExpandToggle = () => {
-    const newExpanded = !expanded;
-    setExpanded(newExpanded);
-    if (onExpandedChange) {
-      onExpandedChange(newExpanded);
+  // Auto-expand textarea based on content (only when not manually expanded)
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    const inner = innerRef.current;
+
+    if (textarea && inner) {
+      if (value.length === 0) {
+        textarea.style.height = `${MIN_HEIGHT}px`;
+        inner.style.height = `${MIN_HEIGHT}px`;
+        if (onExpandedChange) {
+          onExpandedChange(false);
+        }
+        //reset the padding bottom of the chat
+        const chat = document.getElementsByClassName('memori-chat--content');
+        if (chat) {
+          const lastChild = chat[chat.length - 1];
+          if (lastChild) {
+            (lastChild as HTMLElement).style.paddingBottom = '0px';
+          }
+        }
+      } else {
+        textarea.style.height = 'auto';
+        const scrollHeight = textarea.scrollHeight;
+        const newHeight = Math.min(Math.max(scrollHeight, MIN_HEIGHT), MAX_HEIGHT);
+        textarea.style.height = `${newHeight}px`;
+        inner.style.height = `${newHeight}px`;
+
+        //set the padding bottom to the chat in order to keep the whole chat visible
+        // take last child of chat wrapper and set the padding bottom to the height of the textarea
+        const chat = document.getElementsByClassName('memori-chat--content');
+        if (chat) {
+        const lastChild = chat[chat.length - 1];
+          if (lastChild) {
+            // (lastChild as HTMLElement).style.paddingBottom = `${newHeight}px`;
+            //then scroll to the bottom of the chat
+            (chat[0] as HTMLElement).scrollTo({
+              top: (chat[0] as HTMLElement).scrollHeight,
+              behavior: 'smooth'
+            });
+          }
+        }
+      }
     }
-  };
+  }, [value]);
 
   return (
     <div
       data-testid="chat-textarea"
       className={cx('memori-chat-textarea', {
-        'memori-chat-textarea--expanded': expanded,
         'memori-chat-textarea--disabled': disabled,
       })}
     >
-      <div className="memori-chat-textarea--inner">
+      <div ref={innerRef} className="memori-chat-textarea--inner">
         <textarea
+          ref={textareaRef}
           className="memori-chat-textarea--input"
           disabled={disabled}
           value={value}
+          placeholder={t('placeholder', 'Ask a question') || 'Ask a question'}
           onChange={e => {
             onChange(e.target.value);
           }}
@@ -60,18 +101,6 @@ const ChatTextArea: React.FC<Props> = ({
           onBlur={onBlur}
           maxLength={100000}
         />
-        <div className="memori-chat-textarea--expand">
-          <Button
-            className={cx('memori-chat-textarea--expand-button')}
-            onClick={handleExpandToggle}
-            padded={false}
-            ghost
-            title={
-              expanded ? t('collapse') || 'Collapse' : t('expand') || 'Expand'
-            }
-            icon={expanded ? <FullscreenExit /> : <Expand />}
-          />
-        </div>
       </div>
     </div>
   );

package/src/components/ChatTextArea/__snapshots__/ChatTextArea.test.tsx.snap

@@ -8,35 +8,14 @@ exports[`renders ChatTextArea unchanged 1`] = `
   >
     <div
       class="memori-chat-textarea--inner"
+      style="height: 36px;"
     >
       <textarea
         class="memori-chat-textarea--input"
         maxlength="100000"
+        placeholder="placeholder"
+        style="height: 36px;"
       />
-      <div
-        class="memori-chat-textarea--expand"
-      >
-        <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-          title="expand"
-        >
-          <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
     </div>
   </div>
 </div>
@@ -50,37 +29,16 @@ exports[`renders ChatTextArea with long text unchanged 1`] = `
   >
     <div
       class="memori-chat-textarea--inner"
+      style="height: 36px;"
     >
       <textarea
         class="memori-chat-textarea--input"
         maxlength="100000"
+        placeholder="placeholder"
+        style="height: 36px;"
       >
         Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur. Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur.
       </textarea>
-      <div
-        class="memori-chat-textarea--expand"
-      >
-        <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-          title="expand"
-        >
-          <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
     </div>
   </div>
 </div>
@@ -94,37 +52,16 @@ exports[`renders ChatTextArea with value unchanged 1`] = `
   >
     <div
       class="memori-chat-textarea--inner"
+      style="height: 36px;"
     >
       <textarea
         class="memori-chat-textarea--input"
         maxlength="100000"
+        placeholder="placeholder"
+        style="height: 36px;"
       >
         Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
       </textarea>
-      <div
-        class="memori-chat-textarea--expand"
-      >
-        <button
-          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-chat-textarea--expand-button"
-          title="expand"
-        >
-          <span
-            class="memori-button--icon"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 0 0 0 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0 0 13.5-4.7L863.9 169a7.9 7.9 0 0 0-8.9-8.9zM416.6 562.3a8.03 8.03 0 0 0-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 0 0-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
     </div>
   </div>
 </div>