@memori.ai/memori-react 8.12.0 → 8.13.1

package/dist/components/ChatInputs/ChatInputs.css

@@ -1,40 +1,320 @@
+.memori-chat-inputs-wrapper {
+    position: sticky;
+    z-index: 10;
+    bottom: 0;
+    width: 100%;
+    padding: 0;
+    padding-bottom: 1.5rem;
+    margin: 0;
+    /* background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, transparent 100%); */
+}
+
 .memori-chat-inputs {
     position: relative;
     display: flex;
     width: 100%;
+    min-width: 97%;
+    max-width: 97%;
     box-sizing: border-box;
+    flex-flow: column;
     flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
     padding: 0;
+    padding: 8px 12px !important;
     border: none;
+    border-radius: 12px;
     margin: 0;
-    transition: all 0.2s ease-in-out;
+    margin: auto;
+    background: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.memori-chat-inputs:disabled {
+    opacity: 0.5;
+    pointer-events: none;
 }
 
-.memori-chat-inputs--expanded {
-    /* Additional padding when expanded to prevent overlap with file preview */
-    padding-top: 0.5rem;
+.memori-chat-inputs--container {
+    position: relative;
+    display: grid;
+    width: 100%;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+    min-height: 56px;
+    box-sizing: border-box;
+    align-items: center;
+    padding: 0 1rem;
+    padding: 12px;
+    border-radius: var(--memori-border-radius);
+    /* max-width: 48rem; */
+    margin: 0 auto;
+    background: #fff;
+    gap: 0;
+    grid-template-areas: 'leading primary trailing';
+    grid-template-columns: auto 1fr auto;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-    .memori-chat-inputs {
+    .memori-chat-inputs--container {
+        padding: 0 0.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-chat-inputs--container {
         padding: 0 0.25rem;
     }
+}
+
+.memori-chat-inputs--leading {
+    display: flex;
+    align-items: center;
+    padding-right: 6px;
+    grid-area: leading;
+}
+
+.memori-chat-inputs--primary {
+    display: flex;
+    overflow: hidden;
+    min-height: 36px;
+    align-items: center;
+    grid-area: primary;
+}
+
+.memori-chat-inputs--trailing {
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    grid-area: trailing;
+}
+
+.memori-chat-inputs--trailing-inner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* Plus button styling */
+.memori-chat-inputs--upload-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.memori-chat-inputs--upload-wrapper .memori--unified-upload-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button {
+    display: flex;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: #000 !important;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button:hover {
+    background: transparent !important;
+    opacity: 0.7;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+}
+
+/* Icon class styling */
+.memori-chat-inputs--container .icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    fill: currentColor;
+}
+
+/* Microphone button styling */
+.memori-chat-inputs--mic-btn {
+    display: flex;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #000;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+}
 
-    .memori-chat-inputs--expanded {
-        padding-top: 0.25rem;
+.memori-chat-inputs--mic-btn:hover {
+    opacity: 0.7;
+}
+
+.memori-chat-inputs--mic-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+}
+
+.memori-chat-inputs--mic-btn svg,
+.memori-chat-inputs--mic-btn .icon {
+    width: 20px;
+    height: 20px;
+    fill: #000;
+}
+
+/* Ensure icons are black on white background */
+.memori-chat-inputs--leading .icon {
+    fill: #000;
+}
+
+.memori-chat-inputs--send-btn svg {
+    width: 20px;
+    height: 20px;
+    fill: #fff;
+}
+
+.memori-chat-inputs--send-btn .icon {
+    width: 20px;
+    height: 20px;
+    fill: #fff;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button svg,
+.memori-chat-inputs--upload-wrapper .memori-button .icon {
+    width: 20px;
+    height: 20px;
+    /* fill: #000; */
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic-btn .icon {
+    fill: #000;
+}
+
+.memori-chat-inputs--mic-btn--listening {
+    color: #10a37f;
+}
+
+.memori-chat-inputs--mic {
+    font-size: 125%;
+}
+
+/* Style MicrophoneButton component when used in trailing area */
+.memori-chat-inputs--trailing .memori-chat-inputs--mic {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #000;
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic .memori-button {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #000;
+}
+
+/* Send button styling - ChatGPT style */
+.memori-chat-inputs--send-btn {
+    display: flex;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    padding: 1.2rem !important;
+    border: none;
+    border-radius: var(--memori-border-radius);
+    background: #000;
+    background: var(--memori-chat-user-bubble-bg);
+    color: #fff;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.memori-chat-inputs--send-btn:disabled {
+    /* background: #f4f4f4; */
+    color: #f4f4f4;
+    cursor: not-allowed;
+    opacity: 0.3;
+}
+
+.memori-chat-inputs--send-btn:hover:not(:disabled) {
+    opacity: 0.7;
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic svg {
+    width: 20px;
+    height: 20px;
+}
+
+.memori-chat-inputs--send-btn--active {
+    /* background: #000; */
+    color: #fff;
+}
+
+.memori-chat-inputs--send-btn--loading {
+    width: 16px;
+    height: 16px;
+    border: 2px solid currentColor;
+    border-radius: var(--memori-border-radius);
+    border-top-color: transparent;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
     }
 }
 
-@media (max-width: 480px) {
-    .memori-chat-inputs {
-        flex-wrap: wrap;
+/* Disclaimer styling */
+.memori-chat-inputs--disclaimer {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 60px;
+    margin-top: -4px;
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 12px;
+    line-height: 1.5;
+    text-align: center;
+}
+
+.memori-chat-inputs--disclaimer a {
+    color: rgba(0, 0, 0, 0.8);
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.memori-chat-inputs--disclaimer a:hover {
+    opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+    .memori-chat-inputs--disclaimer {
+        padding: 8px 16px;
     }
 }
 
-.memori-chat-inputs .memori-upload-menu+.memori-send-on-enter-menu {
+/* Legacy support for old button classes */
+.memori-chat-inputs .memori-upload-menu + .memori-send-on-enter-menu {
     margin-left: 0.33rem;
 }
 
@@ -42,7 +322,3 @@
     background: #fff;
     color: #000;
 }
-
-.memori-chat-inputs--mic {
-    font-size: 125%;
-}

package/dist/components/ChatInputs/ChatInputs.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ChatTextArea_1 = tslib_1.__importDefault(require("../ChatTextArea/ChatTextArea"));
-const Button_1 = tslib_1.__importDefault(require("../ui/Button"));
 const react_i18next_1 = require("react-i18next");
 const Send_1 = tslib_1.__importDefault(require("../icons/Send"));
 const MicrophoneButton_1 = tslib_1.__importDefault(require("../MicrophoneButton/MicrophoneButton"));
@@ -23,7 +22,10 @@ const ChatInputs = ({ dialogState, userMessage = '', sendOnEnter, onChangeUserMe
         if (isTyping)
             return;
         const mediaWithIds = files.map((file, index) => {
-            const generatedMediumID = file.mediumID || `file_${Date.now()}_${index}_${Math.random().toString(36).substr(2, 9)}`;
+            const generatedMediumID = file.mediumID ||
+                `file_${Date.now()}_${index}_${Math.random()
+                    .toString(36)
+                    .substr(2, 9)}`;
             return {
                 mediumID: generatedMediumID,
                 mimeType: file.mimeType,
@@ -46,7 +48,10 @@ const ChatInputs = ({ dialogState, userMessage = '', sendOnEnter, onChangeUserMe
         if (sendOnEnter === 'keypress' && (userMessage === null || userMessage === void 0 ? void 0 : userMessage.length) > 0) {
             stopListening();
             const mediaWithIds = documentPreviewFiles.map((file, index) => {
-                const generatedMediumID = file.mediumID || `file_${Date.now()}_${index}_${Math.random().toString(36).substr(2, 9)}`;
+                const generatedMediumID = file.mediumID ||
+                    `file_${Date.now()}_${index}_${Math.random()
+                        .toString(36)
+                        .substr(2, 9)}`;
                 return {
                     mediumID: generatedMediumID,
                     mimeType: file.mimeType,
@@ -74,28 +79,39 @@ const ChatInputs = ({ dialogState, userMessage = '', sendOnEnter, onChangeUserMe
             onTextareaExpanded(expanded);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("fieldset", { id: "chat-fieldset", className: (0, classnames_1.default)('memori-chat-inputs', {
-            'memori-chat-inputs--expanded': isExpanded,
-        }), disabled: (dialogState === null || dialogState === void 0 ? void 0 : dialogState.state) === 'X2a' || (dialogState === null || dialogState === void 0 ? void 0 : dialogState.state) === 'X3', children: [(0, jsx_runtime_1.jsx)(ChatTextArea_1.default, { value: userMessage, onChange: onChangeUserMessage, onPressEnter: onTextareaPressEnter, onFocus: onTextareaFocus, onBlur: onTextareaBlur, onExpandedChange: handleTextareaExpanded, disabled: ['R2', 'R3', 'R4', 'R5', 'G3', 'X3'].includes((dialogState === null || dialogState === void 0 ? void 0 : dialogState.state) || '') }), showUpload && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FilePreview_1.default, { previewFiles: documentPreviewFiles, removeFile: removeFile }), (0, jsx_runtime_1.jsx)(UploadButton_1.default, { authToken: authToken, client: client, sessionID: sessionID, isMediaAccepted: (dialogState === null || dialogState === void 0 ? void 0 : dialogState.acceptsMedia) || false, setDocumentPreviewFiles: setDocumentPreviewFiles, documentPreviewFiles: documentPreviewFiles, memoriID: memoriID })] })), (0, jsx_runtime_1.jsx)(Button_1.default, { shape: "circle", primary: !!(userMessage === null || userMessage === void 0 ? void 0 : userMessage.length), loading: isTyping, disabled: !userMessage || userMessage.length === 0, className: "memori-chat-inputs--send", onClick: () => {
-                    onSendMessage(documentPreviewFiles);
-                }, title: t('send') || 'Send', icon: (0, jsx_runtime_1.jsx)(Send_1.default, {}) }), showMicrophone && microphoneMode === 'HOLD_TO_TALK' && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, { listening: listening, startListening: startListening, stopListening: () => {
-                    stopListening();
-                    if (listening && !!(userMessage === null || userMessage === void 0 ? void 0 : userMessage.length)) {
-                        sendMessage(userMessage);
-                    }
-                }, stopAudio: stopAudio })), showMicrophone && microphoneMode === 'CONTINUOUS' && ((0, jsx_runtime_1.jsx)(Button_1.default, { primary: true, className: (0, classnames_1.default)('memori-chat-inputs--mic', {
-                    'memori-chat-inputs--mic--listening': listening,
-                }), title: listening
-                    ? t('write_and_speak.micButtonPopoverListening') || 'Listening'
-                    : t('write_and_speak.micButtonPopover') || 'Start listening', onClick: () => {
-                    if (listening) {
-                        stopListening();
-                    }
-                    else {
-                        stopAudio();
-                        startListening();
-                    }
-                }, shape: "circle", icon: (0, jsx_runtime_1.jsx)(Microphone_1.default, {}) }))] }));
+    const isDisabled = (dialogState === null || dialogState === void 0 ? void 0 : dialogState.state) === 'X2a' || (dialogState === null || dialogState === void 0 ? void 0 : dialogState.state) === 'X3';
+    const textareaDisabled = ['R2', 'R3', 'R4', 'R5', 'G3', 'X3'].includes((dialogState === null || dialogState === void 0 ? void 0 : dialogState.state) || '');
+    return ((0, jsx_runtime_1.jsx)("div", { className: "memori-chat-inputs-wrapper", children: (0, jsx_runtime_1.jsxs)("fieldset", { id: "chat-fieldset", className: (0, classnames_1.default)('memori-chat-inputs', {
+                'memori-chat-inputs--expanded': isExpanded,
+            }), disabled: isDisabled, children: [showUpload && ((0, jsx_runtime_1.jsx)(FilePreview_1.default, { previewFiles: documentPreviewFiles, removeFile: removeFile })), (0, jsx_runtime_1.jsxs)("div", { className: "memori-chat-inputs--container", children: [(0, jsx_runtime_1.jsx)("div", { className: "memori-chat-inputs--leading", children: showUpload && ((0, jsx_runtime_1.jsx)("div", { className: "memori-chat-inputs--upload-wrapper", children: (0, jsx_runtime_1.jsx)(UploadButton_1.default, { authToken: authToken, client: client, sessionID: sessionID, isMediaAccepted: (dialogState === null || dialogState === void 0 ? void 0 : dialogState.acceptsMedia) || false, setDocumentPreviewFiles: setDocumentPreviewFiles, documentPreviewFiles: documentPreviewFiles, memoriID: memoriID }) })) }), (0, jsx_runtime_1.jsx)("div", { className: "memori-chat-inputs--primary", children: (0, jsx_runtime_1.jsx)(ChatTextArea_1.default, { value: userMessage, onChange: onChangeUserMessage, onPressEnter: onTextareaPressEnter, onFocus: onTextareaFocus, onBlur: onTextareaBlur, onExpandedChange: handleTextareaExpanded, disabled: textareaDisabled }) }), (0, jsx_runtime_1.jsx)("div", { className: "memori-chat-inputs--trailing", children: (0, jsx_runtime_1.jsxs)("div", { className: "memori-chat-inputs--trailing-inner", children: [showMicrophone && microphoneMode === 'CONTINUOUS' && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classnames_1.default)('memori-chat-inputs--mic-btn', {
+                                            'memori-chat-inputs--mic-btn--listening': listening,
+                                        }), title: listening
+                                            ? t('write_and_speak.micButtonPopoverListening') ||
+                                                'Listening'
+                                            : t('write_and_speak.micButtonPopover') ||
+                                                'Start listening', onClick: () => {
+                                            if (listening) {
+                                                stopListening();
+                                            }
+                                            else {
+                                                stopAudio();
+                                                startListening();
+                                            }
+                                        }, disabled: isDisabled, "aria-label": listening
+                                            ? t('write_and_speak.micButtonPopoverListening') ||
+                                                'Listening'
+                                            : t('write_and_speak.micButtonPopover') ||
+                                                'Start listening', children: (0, jsx_runtime_1.jsx)(Microphone_1.default, { className: "icon" }) })), showMicrophone && microphoneMode === 'HOLD_TO_TALK' && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, { listening: listening, startListening: startListening, stopListening: () => {
+                                            stopListening();
+                                            if (listening && !!(userMessage === null || userMessage === void 0 ? void 0 : userMessage.length)) {
+                                                sendMessage(userMessage);
+                                            }
+                                        }, stopAudio: stopAudio })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classnames_1.default)('memori-chat-inputs--send-btn', {
+                                            'memori-chat-inputs--send-btn--active': !!(userMessage === null || userMessage === void 0 ? void 0 : userMessage.length),
+                                            'memori-chat-inputs--send-btn--disabled': !userMessage || userMessage.length === 0,
+                                        }), onClick: () => {
+                                            onSendMessage(documentPreviewFiles);
+                                        }, disabled: !userMessage || userMessage.length === 0 || isTyping, title: t('send') || 'Send', "aria-label": t('send') || 'Send', children: isTyping ? ((0, jsx_runtime_1.jsx)("div", { className: "memori-chat-inputs--send-btn--loading" })) : ((0, jsx_runtime_1.jsx)(Send_1.default, { className: "icon" })) })] }) })] })] }) }));
 };
 exports.default = ChatInputs;
 //# sourceMappingURL=ChatInputs.js.map

package/dist/components/ChatInputs/ChatInputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputs.js","sourceRoot":"","sources":["../../../src/components/ChatInputs/ChatInputs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChatInputs.js","sourceRoot":"","sources":["../../../src/components/ChatInputs/ChatInputs.tsx"],"names":[],"mappings":";;;;AAAA,iCAAwC;AAExC,wFAAwD;AAExD,iDAA+C;AAC/C,iEAAiC;AACjC,oGAAoE;AACpE,oEAA4B;AAC5B,6EAA6C;AAC7C,wFAAwD;AACxD,qFAAqD;AA+BrD,MAAM,UAAU,GAAoB,CAAC,EACnC,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,WAAW,EACX,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,cAAc,EACd,cAAc,GAAG,KAAK,EACtB,cAAc,GAAG,cAAc,EAC/B,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EACb,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,MAAM,EACN,kBAAkB,GACnB,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAG/B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAGpD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,IAAA,gBAAQ,EAU9D,EAAE,CAAC,CAAC;IAGN,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI;QAC3B,MAAM,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE;KAC5C,CAAC;IAKF,MAAM,aAAa,GAAG,CACpB,KAQG,EACH,EAAE;QACF,IAAI,QAAQ;YAAE,OAAO;QAErB,MAAM,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC7C,MAAM,iBAAiB,GACrB,IAAI,CAAC,QAAQ;gBACb,QAAQ,IAAI,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE;qBACzC,QAAQ,CAAC,EAAE,CAAC;qBACZ,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YACpB,OAAO;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,IAAI;gBAChB,UAAU,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE;gBACpC,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,GAAG,EAAE,IAAI,CAAC,GAAG;aACd,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QAGvC,uBAAuB,CAAC,EAAE,CAAC,CAAC;QAC5B,SAAS,EAAE,CAAC;QACZ,eAAe,CAAC,KAAK,CAAC,IAAI,wBAAwB,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC;IAKF,MAAM,oBAAoB,GAAG,CAC3B,CAA2C,EAC3C,EAAE;QAEF,CAAC,CAAC,cAAc,EAAE,CAAC;QAGnB,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,WAAW,KAAK,UAAU,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,IAAG,CAAC,EAAE;YACzD,aAAa,EAAE,CAAC;YAChB,MAAM,YAAY,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC5D,MAAM,iBAAiB,GACrB,IAAI,CAAC,QAAQ;oBACb,QAAQ,IAAI,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE;yBACzC,QAAQ,CAAC,EAAE,CAAC;yBACZ,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;gBACpB,OAAO;oBACL,QAAQ,EAAE,iBAAiB;oBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;oBACrB,KAAK,EAAE,IAAI,CAAC,IAAI;oBAChB,UAAU,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE;oBACpC,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,GAAG,EAAE,IAAI,CAAC,GAAG;iBACd,CAAC;YACJ,CAAC,CAAC,CAAC;YAEH,WAAW,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;YAEvC,uBAAuB,CAAC,EAAE,CAAC,CAAC;YAC5B,mBAAmB,CAAC,EAAE,CAAC,CAAC;SACzB;IACH,CAAC,CAAC;IAKF,MAAM,UAAU,GAAG,KAAK,EAAE,MAAc,EAAE,QAA4B,EAAE,EAAE;QAExE,IAAI,MAAM,CAAC,yBAAyB,IAAI,SAAS,IAAI,QAAQ,EAAE;YAC7D,MAAM,MAAM,CAAC,yBAAyB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;SAC7D;QACD,uBAAuB,CACrB,CACE,IAQG,EACH,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,CAC/D,CAAC;IACJ,CAAC,CAAC;IAKF,MAAM,sBAAsB,GAAG,CAAC,QAAiB,EAAE,EAAE;QACnD,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,IAAI,kBAAkB,EAAE;YACtB,kBAAkB,CAAC,QAAQ,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GACd,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,MAAK,KAAK,IAAI,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,MAAK,IAAI,CAAC;IAC9D,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CACpE,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,KAAI,EAAE,CACzB,CAAC;IAEF,OAAO,CACL,gCAAK,SAAS,EAAC,4BAA4B,YACzC,sCACE,EAAE,EAAC,eAAe,EAClB,SAAS,EAAE,IAAA,oBAAE,EAAC,oBAAoB,EAAE;gBAClC,8BAA8B,EAAE,UAAU;aAC3C,CAAC,EACF,QAAQ,EAAE,UAAU,aAGnB,UAAU,IAAI,CACb,uBAAC,qBAAW,IACV,YAAY,EAAE,oBAAoB,EAClC,UAAU,EAAE,UAAU,GACtB,CACH,EACD,iCAAK,SAAS,EAAC,+BAA+B,aAE5C,gCAAK,SAAS,EAAC,6BAA6B,YACzC,UAAU,IAAI,CACb,gCAAK,SAAS,EAAC,oCAAoC,YACjD,uBAAC,sBAAY,IACX,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,YAAY,KAAI,KAAK,EACnD,uBAAuB,EAAE,uBAAuB,EAChD,oBAAoB,EAAE,oBAAoB,EAC1C,QAAQ,EAAE,QAAQ,GAClB,GACE,CACP,GACG,EAGN,gCAAK,SAAS,EAAC,6BAA6B,YAC1C,uBAAC,sBAAY,IACX,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,mBAAmB,EAC7B,YAAY,EAAE,oBAAoB,EAClC,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAAE,sBAAsB,EACxC,QAAQ,EAAE,gBAAgB,GAC1B,GACE,EAGN,gCAAK,SAAS,EAAC,8BAA8B,YAC3C,iCAAK,SAAS,EAAC,oCAAoC,aAChD,cAAc,IAAI,cAAc,KAAK,YAAY,IAAI,CACpD,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAA6B,EAAE;4CAC3C,wCAAwC,EAAE,SAAS;yCACpD,CAAC,EACF,KAAK,EACH,SAAS;4CACP,CAAC,CAAC,CAAC,CAAC,2CAA2C,CAAC;gDAC9C,WAAW;4CACb,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC;gDACrC,iBAAiB,EAEvB,OAAO,EAAE,GAAG,EAAE;4CACZ,IAAI,SAAS,EAAE;gDACb,aAAa,EAAE,CAAC;6CACjB;iDAAM;gDACL,SAAS,EAAE,CAAC;gDACZ,cAAc,EAAE,CAAC;6CAClB;wCACH,CAAC,EACD,QAAQ,EAAE,UAAU,gBAElB,SAAS;4CACP,CAAC,CAAC,CAAC,CAAC,2CAA2C,CAAC;gDAC9C,WAAW;4CACb,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC;gDACrC,iBAAiB,YAGvB,uBAAC,oBAAU,IAAC,SAAS,EAAC,MAAM,GAAG,GACxB,CACV,EACA,cAAc,IAAI,cAAc,KAAK,cAAc,IAAI,CACtD,uBAAC,0BAAgB,IACf,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,GAAG,EAAE;4CAClB,aAAa,EAAE,CAAC;4CAChB,IAAI,SAAS,IAAI,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAA,EAAE;gDACtC,WAAW,CAAC,WAAW,CAAC,CAAC;6CAC1B;wCACH,CAAC,EACD,SAAS,EAAE,SAAS,GACpB,CACH,EACD,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAE,EAAC,8BAA8B,EAAE;4CAC5C,sCAAsC,EAAE,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAA;4CAC7D,wCAAwC,EACtC,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;yCAC3C,CAAC,EACF,OAAO,EAAE,GAAG,EAAE;4CACZ,aAAa,CAAC,oBAAoB,CAAC,CAAC;wCACtC,CAAC,EACD,QAAQ,EAAE,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,EAC9D,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,MAAM,gBACd,CAAC,CAAC,MAAM,CAAC,IAAI,MAAM,YAE9B,QAAQ,CAAC,CAAC,CAAC,CACV,gCAAK,SAAS,EAAC,uCAAuC,GAAG,CAC1D,CAAC,CAAC,CAAC,CACF,uBAAC,cAAI,IAAC,SAAS,EAAC,MAAM,GAAG,CAC1B,GACM,IACL,GACF,IACF,IACG,GAUP,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/dist/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;
-}