@memori.ai/memori-react 8.11.0 → 8.13.0

package/esm/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/esm/components/ChatTextArea/ChatTextArea.js

@@ -1,30 +1,59 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
 import cx from 'classnames';
-import Button from '../ui/Button';
-import Expand from '../icons/Expand';
-import FullscreenExit from '../icons/FullscreenExit';
 import { useTranslation } from 'react-i18next';
 const ChatTextArea = ({ disabled = false, value, onChange, onPressEnter, onFocus, onBlur, onExpandedChange, }) => {
     const { t } = useTranslation();
-    const [expanded, setExpanded] = useState(false);
-    const handleExpandToggle = () => {
-        const newExpanded = !expanded;
-        setExpanded(newExpanded);
-        if (onExpandedChange) {
-            onExpandedChange(newExpanded);
+    const textareaRef = useRef(null);
+    const innerRef = useRef(null);
+    const MIN_HEIGHT = 36;
+    const MAX_HEIGHT = 208;
+    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);
+                }
+                const chat = document.getElementsByClassName('memori-chat--content');
+                if (chat) {
+                    const lastChild = chat[chat.length - 1];
+                    if (lastChild) {
+                        lastChild.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`;
+                const chat = document.getElementsByClassName('memori-chat--content');
+                if (chat) {
+                    const lastChild = chat[chat.length - 1];
+                    if (lastChild) {
+                        chat[0].scrollTo({
+                            top: chat[0].scrollHeight,
+                            behavior: 'smooth'
+                        });
+                    }
+                }
+            }
         }
-    };
+    }, [value]);
     return (_jsx("div", { "data-testid": "chat-textarea", className: cx('memori-chat-textarea', {
-            'memori-chat-textarea--expanded': expanded,
             'memori-chat-textarea--disabled': disabled,
-        }), children: _jsxs("div", { className: "memori-chat-textarea--inner", children: [_jsx("textarea", { className: "memori-chat-textarea--input", disabled: disabled, value: value, onChange: e => {
-                        onChange(e.target.value);
-                    }, onKeyDownCapture: e => {
-                        if (e.key === 'Enter' && !e.shiftKey && onPressEnter) {
-                            onPressEnter(e);
-                        }
-                    }, onFocus: onFocus, onBlur: onBlur, maxLength: 100000 }), _jsx("div", { className: "memori-chat-textarea--expand", children: _jsx(Button, { className: cx('memori-chat-textarea--expand-button'), onClick: handleExpandToggle, padded: false, ghost: true, title: expanded ? t('collapse') || 'Collapse' : t('expand') || 'Expand', icon: expanded ? _jsx(FullscreenExit, {}) : _jsx(Expand, {}) }) })] }) }));
+        }), children: _jsx("div", { ref: innerRef, className: "memori-chat-textarea--inner", children: _jsx("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);
+                }, onKeyDownCapture: e => {
+                    if (e.key === 'Enter' && !e.shiftKey && onPressEnter) {
+                        onPressEnter(e);
+                    }
+                }, onFocus: onFocus, onBlur: onBlur, maxLength: 100000 }) }) }));
 };
 export default ChatTextArea;
 //# sourceMappingURL=ChatTextArea.js.map

package/esm/components/ChatTextArea/ChatTextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTextArea.js","sourceRoot":"","sources":["../../../src/components/ChatTextArea/ChatTextArea.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAY/C,MAAM,YAAY,GAAoB,CAAC,EACrC,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,MAAM,EACN,gBAAgB,GACjB,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,WAAW,GAAG,CAAC,QAAQ,CAAC;QAC9B,WAAW,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,gBAAgB,EAAE;YACpB,gBAAgB,CAAC,WAAW,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BACc,eAAe,EAC3B,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE;YACpC,gCAAgC,EAAE,QAAQ;YAC1C,gCAAgC,EAAE,QAAQ;SAC3C,CAAC,YAEF,eAAK,SAAS,EAAC,6BAA6B,aAC1C,mBACE,SAAS,EAAC,6BAA6B,EACvC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE;wBACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC3B,CAAC,EACD,gBAAgB,EAAE,CAAC,CAAC,EAAE;wBACpB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,YAAY,EAAE;4BACpD,YAAY,CAAC,CAAC,CAAC,CAAC;yBACjB;oBACH,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,GACjB,EACF,cAAK,SAAS,EAAC,8BAA8B,YAC3C,KAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qCAAqC,CAAC,EACpD,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,KAAK,EACb,KAAK,QACL,KAAK,EACH,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,QAAQ,EAElE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,KAAC,MAAM,KAAG,GAChD,GACE,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ChatTextArea.js","sourceRoot":"","sources":["../../../src/components/ChatTextArea/ChatTextArea.tsx"],"names":[],"mappings":"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"}

package/esm/components/DateSelector/DateSelector.css

@@ -1,137 +1,158 @@
+/* Screen reader only - visually hidden but accessible */
+.sr-only {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border-width: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
+/* Base Container */
 .memori--date-selector {
-    display: flex;
-    flex-wrap: nowrap;
+    width: 100%;
+    /* margin-top: 1.5rem; */
 }
 
-.memori--date-selector__select {
-    width: 30%;
+/* Mobile Styles */
+.memori--date-selector--mobile {
+    display: flex;
+    width: 100%;
     max-width: 100%;
-    margin: 1.5rem 1.5% 0;
+    box-sizing: border-box;
+    flex-direction: column;
+    padding: 0;
+    margin: 1rem 0;
 }
 
-.memori--date-selector__select-button {
-    position: relative;
+.memori--date-selector__mobile-label {
+    display: block;
     width: 100%;
-    padding-top: 0.5rem;
-    padding-right: 2.5rem;
-    padding-bottom: 0.5rem;
-    padding-left: 0.75rem;
-    border: 1px solid #e5e7eb;
-    border-radius: 0.5rem;
-    background: #fff;
-    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
-        rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
-    cursor: pointer;
+    margin-bottom: 0.5rem;
+    color: #374151;
+    font-size: 0.95rem;
+    font-weight: 500;
     text-align: left;
 }
 
-.memori--date-selector__select-button:focus {
-    border-color: #cbd5e0;
-    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-}
-
-.memori--date-selector__select-button:focus-visible {
-    border-color: #63b3ed;
-    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+.memori--date-selector__mobile-input {
+    width: 100%;
+    max-width: 100%;
+    min-height: 48px;
+    box-sizing: border-box;
+    padding: 0.875rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    -webkit-appearance: none;
+    appearance: none;
+    background: #ffffff;
+    /* Touch-friendly */
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    color: #1f2937;
+    font-size: 1rem;
+    transition: all 0.2s ease;
 }
 
-.memori--date-selector__select-button:hover {
-    border-color: #e2e8f0;
+.memori--date-selector__mobile-input:focus {
+    border-color: var(--memori-primary, #9333ea);
+    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
+    outline: none;
 }
 
-.memori--date-selector__select-button:active {
-    border-color: #e2e8f0;
+.memori--date-selector__mobile-input:active {
+    border-color: var(--memori-primary, #9333ea);
 }
 
-.memori--date-selector__select-button:disabled {
-    border-color: #e2e8f0;
-    background-color: #f7fafc;
-    color: #a0aec0;
+.memori--date-selector__mobile-input:disabled {
+    background-color: #f9fafb;
+    color: #9ca3af;
     cursor: not-allowed;
+    opacity: 0.6;
 }
 
-@media (min-width: 640px) {
-    .memori--date-selector__select-button {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-    }
-}
-
-.memori--date-selector__select-label {
-    display: inline-block;
-    margin-bottom: 0.25rem;
+/* Desktop Styles */
+.memori--date-selector--desktop {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
 }
 
-.memori--date-selector__select--value {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.memori--date-selector__input-group {
+    display: flex;
+    min-width: 80px;
+    /* flex: 1; */
+    flex-direction: column;
 }
 
-.memori--date-selector__select--icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    padding-right: 0.5rem;
-    pointer-events: none;
+.memori--date-selector__input-group--year {
+    min-width: 100px;
 }
 
-.memori--date-selector__select--icon svg {
-    width: 1.25rem;
-    height: 1.25rem;
-    color: rgb(156 163 175/1);
+.memori--date-selector__label {
+    display: inline-block;
+    margin-bottom: 0.5rem;
+    color: #4b5563;
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: 0.01em;
 }
 
-ul.memori--date-selector__select-options {
-    position: absolute;
-    z-index: 1;
-    overflow: auto;
+.memori--date-selector__input {
     width: 100%;
-    max-width: min(18rem, 30%);
-    max-height: 15rem;
-    padding-top: 0.25rem;
-    padding-right: 0;
-    padding-bottom: 0.25rem;
-    padding-left: 0;
-    border-radius: 0.375rem;
-    margin-top: 0.25rem;
-    margin-right: 0;
-    margin-bottom: 0;
-    margin-left: 0;
-    background: #fff;
-    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
-        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
-    list-style: none;
-}
-
-@media (min-width: 640px) {
-    .memori--date-selector__select-options {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-    }
+    padding: 0.75rem 1rem;
+    border: 2px solid #e5e7eb;
+    border-radius: 0.75rem;
+    -moz-appearance: textfield;
+    appearance: textfield;
+    /* Remove spinner buttons */
+    background: #ffffff;
+    color: #1f2937;
+    font-size: 0.95rem;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori--date-selector__input::-webkit-outer-spin-button,
+.memori--date-selector__input::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+}
+
+.memori--date-selector__input:focus {
+    border-color: var(--memori-primary);
+  box-shadow: 0 0 0 4px rgba(var(--memori-primary-rgb), 0.1);
+    outline: none;
+    transform: translateY(-1px);
+}
+
+.memori--date-selector__input:disabled {
+    border-color: #e5e7eb;
+    background: #f9fafb;
+    color: #9ca3af;
+    cursor: not-allowed;
+    opacity: 0.6;
 }
 
-li.memori--date-selector__select-option {
-    position: relative;
-    padding-top: 0.5rem;
-    padding-right: 1rem;
-    padding-bottom: 0.5rem;
-    padding-left: 1rem;
-    color: rgb(17 24 39/1);
-    cursor: pointer;
-    user-select: none;
+.memori--date-selector__input::placeholder {
+    color: #9ca3af;
 }
 
-li.memori--date-selector__select-option:hover,
-li.memori--date-selector__select-option:focus {
-    background-color: #f7fafc;
-}
+/* Responsive adjustments */
+@media (max-width: 767px) {
+    .memori--date-selector--desktop {
+        display: none;
+        /* Hide desktop version on mobile if both are rendered for some reason */
+    }
 
-li.memori--date-selector__select-option:focus {
-    outline: 2px solid #63b3ed;
-    outline-offset: 2px;
-}
+    .memori--date-selector--mobile {
+        margin: 0.75rem 0;
+    }
+
+    .memori--date-selector__mobile-input {
+        min-height: 44px;
+        font-size: 16px; /* Prevents zoom on iOS */
+    }
+}

package/esm/components/DateSelector/DateSelector.d.ts

@@ -3,7 +3,7 @@ import { DateTime } from 'luxon';
 export interface Props {
     defaultDate?: string | Date;
     disabled?: boolean;
-    onChange: (date: DateTime) => void;
+    onChange: (date: DateTime | undefined) => void;
 }
 declare const DateSelector: import("react").MemoExoticComponent<({ defaultDate, onChange, disabled }: Props) => JSX.Element>;
 export default DateSelector;