@memori.ai/memori-react 9.0.0-alpha.12 → 9.0.0-alpha.14

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 
 
+## [9.0.0-alpha.14](https://github.com/memori-ai/memori-react/compare/v9.0.0-alpha.13...v9.0.0-alpha.14) (2026-08-25)
+
+## [9.0.0-alpha.13](https://github.com/memori-ai/memori-react/compare/v9.0.0-alpha.12...v9.0.0-alpha.13) (2026-08-25)
+
 ## [9.0.0-alpha.12](https://github.com/memori-ai/memori-react/compare/v9.0.0-alpha.11...v9.0.0-alpha.12) (2026-08-24)
 
 ## [9.0.0-alpha.11](https://github.com/memori-ai/memori-react/compare/v9.0.0-alpha.10...v9.0.0-alpha.11) (2026-08-24)

package/dist/components/Chat/Chat.css

@@ -67,6 +67,25 @@
     /* mask-image: linear-gradient(transparent, black 5%, black 95%, transparent 100%); */
     overflow-y: auto;
     scroll-behavior: smooth;
+    scrollbar-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 55%, transparent) transparent;
+    scrollbar-width: thin;
+}
+
+.memori-chat--content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.memori-chat--content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.memori-chat--content::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 45%, transparent);
+}
+
+.memori-chat--content::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 60%, transparent);
 }
 
 /* Conversation-column overrides sit between base and layout-scoped rules. */

package/dist/components/ChatInputs/ChatInputs.css

@@ -278,6 +278,15 @@
     color: inherit;
 }
 
+/* Light hover surface (#f2eef5) — keep the icon black in dark mode for contrast */
+.memori-widget[data-theme='dark'] .memori-chat-inputs--mic-btn:hover,
+.memori-widget[data-theme='dark'] .memori-chat-inputs--mic-btn:hover svg,
+.memori-widget[data-theme='dark'] .memori-chat-inputs--trailing .memori-chat-inputs--mic:hover,
+.memori-widget[data-theme='dark'] .memori-chat-inputs--trailing .memori-chat-inputs--mic:hover .memori-button,
+.memori-widget[data-theme='dark'] .memori-chat-inputs--trailing .memori-chat-inputs--mic:hover svg {
+    color: #000 !important;
+}
+
 /* Send button — solid brand fill, high-contrast icon (all layouts) */
 .memori-chat-inputs--send-btn,
 .memori-chat-inputs--send-btn.memori-button {
@@ -360,41 +369,52 @@
 }
 
 .memori-chat-inputs--ai-note {
-    max-width: var(--memori-conversation-max-width, 48rem);
+    max-width: 100%;
     margin: 0;
     background: transparent;
     color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
     font-size: 0.75rem;
     line-height: 1.3;
+    overflow-wrap: anywhere;
     text-align: left;
+    word-break: break-word;
 }
 
 .memori-conversation-footer {
+    position: relative;
     display: flex;
     width: 100%;
+    max-width: var(--memori-conversation-max-width, 48rem);
     box-sizing: border-box;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
     align-items: center;
     justify-content: space-between;
     padding: var(--memori-spacing-sm) 0 0;
     border-top: 1px solid var(--memori-border-color);
     margin-top: var(--memori-spacing-sm);
+    margin-right: auto;
+    margin-left: auto;
     color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
     gap: var(--memori-spacing-md);
 }
 
 .memori-conversation-footer .memori-chat-inputs--ai-note {
+    overflow: hidden;
     min-width: 0;
     flex: 1 1 auto;
     margin: 0;
     text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-conversation-footer .memori--powered-by {
-    position: static;
+    position: static !important;
     z-index: auto;
     bottom: auto;
     left: auto;
-    display: inline-flex;
+    display: inline-flex !important;
     flex-shrink: 0;
     padding: 0;
     border-radius: 0;
@@ -402,6 +422,7 @@
     background: transparent;
     color: inherit;
     transform: none;
+    white-space: nowrap;
 }
 
 .memori-conversation-footer .memori--powered-by-icon {
@@ -501,6 +522,59 @@
     color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
 }
 
+/* Keep disclaimer + brand on the same axis as the input pill */
+.memori-widget.memori-layout-fullpage .memori-conversation-footer,
+.memori-widget.memori-layout-zoomed_full_body .memori-conversation-footer {
+    max-width: 100%;
+}
+
+/* FULLPAGE + ZOOMED: border-top only after chat has started (under ChatInputs).
+   Start-panel footer is a direct child of the conversation column. */
+.memori-widget.memori-layout-fullpage
+    .memori-conversation-column
+    > .memori-conversation-footer,
+.memori-widget.memori-layout-zoomed_full_body
+    .memori-conversation-column
+    > .memori-conversation-footer {
+    border-top: none;
+}
+
+.memori-widget.memori-layout-fullpage
+    .memori-chat-inputs-wrapper
+    > .memori-conversation-footer,
+.memori-widget.memori-layout-zoomed_full_body
+    .memori-chat-inputs-wrapper
+    > .memori-conversation-footer {
+    border-top: 1px solid var(--memori-border-color);
+}
+
+@media (max-width: 768px) {
+    .memori-conversation-footer,
+    .memori-widget.memori-layout-fullpage
+        .memori-chat-inputs-wrapper
+        > .memori-conversation-footer,
+    .memori-widget.memori-layout-zoomed_full_body
+        .memori-chat-inputs-wrapper
+        > .memori-conversation-footer {
+        justify-content: center;
+        border-top: none;
+        gap: 0;
+    }
+
+    .memori-conversation-footer .memori--powered-by,
+    .memori-widget.memori-layout-chat .memori-conversation-footer > .memori--powered-by {
+        display: none !important;
+    }
+
+    .memori-conversation-footer .memori-chat-inputs--ai-note {
+        overflow: visible;
+        flex: 0 1 auto;
+        text-align: center;
+        text-overflow: unset;
+        white-space: normal;
+    }
+}
+
 /* =============================================================================
    HIDDEN_CHAT + WEBSITE_ASSISTANT + CHAT — bottom-anchored white pill
    ============================================================================= */

package/dist/components/ChatTextArea/ChatTextArea.css

@@ -102,9 +102,10 @@ textarea.memori-chat-textarea--input {
     font-size: 14.5px;
     line-height: var(--memori-text-line-normal);
     outline: none;
+    -ms-overflow-style: none; /* IE/Edge */
     overflow-y: auto;
     resize: none;
-    scrollbar-width: thin;
+    scrollbar-width: none; /* Firefox */
     transition: height 0.2s ease-in-out;
 }
 
@@ -114,22 +115,10 @@ textarea.memori-chat-textarea--input::placeholder {
     opacity: 1;
 }
 
-/* Scrollbar styling */
+/* Hide vertical scrollbar (scroll still works) */
 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: var(--memori-radius-box);
-    background: rgba(0, 0, 0, 0.2);
-}
-
-textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.3);
+    display: none;
+    width: 0;
 }
 
 /* Responsive adjustments for textarea input */
@@ -195,7 +184,6 @@ button.memori-chat-textarea--expand-button:focus {
 
 [data-theme='dark'] textarea.memori-chat-textarea--input {
     color: var(--memori-text-color, rgba(255, 255, 255, 0.92));
-    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
 }
 
 [data-theme='dark'] textarea.memori-chat-textarea--input::placeholder {
@@ -222,14 +210,6 @@ button.memori-chat-textarea--expand-button:focus {
     color: #7d7a86;
 }
 
-[data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.25);
-}
-
-[data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.4);
-}
-
 [data-theme='dark'] button.memori-chat-textarea--expand-button {
     color: var(--memori-text-color, rgba(255, 255, 255, 0.85));
 }

package/dist/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.css

@@ -23,10 +23,13 @@
 .memori-artifact-action-icon-fullscreen {
     width: 16px;
     height: 16px;
+    color: inherit;
+    fill: none;
+    stroke: currentColor;
 }
 
 .memori-artifact-action-icon {
-    fill: #000;
+    color: var(--memori-text-color);
 }
 
 .memori-artifact-action-btn:disabled {
@@ -122,7 +125,9 @@
 /* Remove unused styles */
 
 .memori-artifact-action-icon-fullscreen {
-    fill: #fff;
+    color: #fff;
+    fill: none;
+    stroke: currentColor;
 }
 
 /* Animation for Copy Feedback */

package/dist/components/MemoriArtifactSystem/components/ArtifactActions/styles.css

@@ -27,11 +27,15 @@
     position: relative;
     display: inline-flex;
     overflow: hidden;
-    min-height: 48px;
+    width: auto;
+    min-width: 38px;
+    height: 38px;
+    min-height: 38px;
     align-items: center;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    border: 1px solid var(--memori-copy-border);
-    border-radius: 0.5rem;
+    padding: 8px 12px;
+    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    border-radius: var(--memori-radius-box, 8px);
+    background: transparent;
     border-bottom-right-radius: 0px;
     border-top-right-radius: 0px;
     color: var(--memori-text-color);
@@ -40,7 +44,7 @@
     font-weight: var(--memori-text-weight-medium);
     gap: var(--memori-spacing-sm);
     line-height: 1.4;
-    transition: all 0.2s ease;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
 .memori-copy-button:disabled {
@@ -54,11 +58,13 @@
 }
 
 .memori-copy-button:hover:not(:disabled) {
-    border-color: color-mix(in oklch, var(--memori-primary) 28%, var(--memori-border-color));
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
 }
 
 .memori-copy-button:active:not(:disabled) {
-    border-color: color-mix(in oklch, var(--memori-primary) 40%, var(--memori-border-color));
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 22%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
 }
 
 .memori-copy-button--success {
@@ -86,12 +92,16 @@
     position: relative;
     display: inline-flex;
     overflow: hidden;
-    min-height: 48px;
+    width: 38px;
+    min-width: 38px;
+    height: 38px;
+    min-height: 38px;
     align-items: center;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    padding-right: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    border: 1px solid var(--memori-copy-border);
-    border-radius: 0.5rem;
+    justify-content: center;
+    padding: 8px;
+    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    border-radius: var(--memori-radius-box, 8px);
+    background: transparent;
     border-bottom-left-radius: 0px !important;
     border-top-left-radius: 0px !important;
     color: var(--memori-text-color);
@@ -100,7 +110,12 @@
     font-weight: var(--memori-text-weight-medium);
     gap: var(--memori-spacing-sm);
     line-height: 1.4;
-    transition: all 0.2s ease;
+    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.memori-copy-button--dropdown:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
 }
 
 /* Button Icons */
@@ -439,7 +454,9 @@
 
     .memori-copy-button,
     .memori-copy-button--dropdown {
-        padding: calc(var(--memori-spacing-xs) + 2px) calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
+        height: 38px;
+        min-height: 38px;
+        padding: 8px;
         font-size: 13px;
     }