@memori.ai/memori-react 9.0.0-alpha.7 → 9.0.0-alpha.9

package/src/components/ChatInputs/ChatInputs.css

@@ -1,15 +1,16 @@
 .memori-chat-inputs-wrapper {
-    position: sticky;
+    position: relative;
     z-index: 10;
-    bottom: 0;
     width: 100%;
     min-width: 0;
     max-width: 100%;
-    padding: 0;
-    /* padding-bottom: 1.5rem; */
+    box-sizing: border-box;
+    flex-shrink: 0;
+    padding: 14px 18px 16px;
+    border-top: none;
     margin: 0;
+    background: var(--memori-secondary-background);
     overflow-x: hidden;
-    /* background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, transparent 100%); */
 }
 
 .memori-chat-inputs {
@@ -17,24 +18,22 @@
     display: flex;
     width: 100%;
     min-width: 0;
-    max-width: 100%;
+    max-width: 760px;
     box-sizing: border-box;
     flex-flow: column;
     flex-shrink: 0;
-    padding: 0;
-    padding: var(--memori-spacing-sm) calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) !important;
+    padding: 0 !important;
     border: none;
-    border-radius: var(--memori-radius-box);
-    margin: 0;
-    margin: auto;
-    background-color: var(--memori-secondary-background);
-    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
+    border-radius: 0;
+    margin: 0 auto;
+    background-color: transparent;
+    box-shadow: none;
     overflow-x: hidden;
 }
 
 [data-theme='dark'] .memori-chat-inputs,
 .memori-chat-inputs[data-theme='dark'] {
-    background-color: var(--memori-main-background);
+    background-color: transparent;
 }
 
 .memori-chat-inputs:disabled {
@@ -47,69 +46,70 @@
     overflow: hidden;
     width: 100%;
     min-width: 0;
+    margin-bottom: 8px;
 }
 
 .memori-chat-inputs--container {
     position: relative;
-    display: grid;
+    display: flex;
     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: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
+    padding: 10px 12px 10px 16px;
+    border: 1.5px solid var(--memori-border-color, #ddd);
     border-radius: var(--memori-radius-box);
-    /* max-width: 48rem; */
-    margin: 0 auto;
-    background-color: transparent;
-    gap: 0;
-    grid-template-areas: 'leading primary trailing';
-    grid-template-columns: auto 1fr auto;
+    margin: 0;
+    gap: 10px;
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.memori-chat-inputs--container:focus-within {
+    border-color: var(--memori-primary);
+    box-shadow: var(--memori-focus-ring, 0 0 0 3px color-mix(in oklch, var(--memori-primary) 18%, transparent));
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-    .memori-chat-inputs--container {
-        padding: 0 0.5rem;
+    .memori-chat-inputs-wrapper {
+        padding: 12px 16px 14px;
     }
 }
 
 @media (max-width: 480px) {
-    .memori-chat-inputs--container {
-        padding: 0 0.25rem;
+    .memori-chat-inputs-wrapper {
+        padding: 10px 12px 12px;
     }
 }
 
 .memori-chat-inputs--leading {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
-    padding-right: var(--memori-spacing-sm);
-    grid-area: leading;
 }
 
 .memori-chat-inputs--primary {
     display: flex;
     overflow: hidden;
+    min-width: 0;
     min-height: 36px;
+    flex: 1;
     align-items: center;
-    grid-area: primary;
 }
 
 .memori-chat-inputs--trailing {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
-    padding-left: var(--memori-spacing-sm);
-    grid-area: trailing;
 }
 
 .memori-chat-inputs--trailing-inner {
     display: flex;
     align-items: center;
-    gap: calc(var(--memori-spacing-xs) + 2px);
+    gap: 6px;
 }
 
-/* Plus button styling */
+/* Plus / upload button styling */
 .memori-chat-inputs--upload-wrapper {
     display: flex;
     align-items: center;
@@ -122,20 +122,25 @@
 
 .memori-chat-inputs--upload-wrapper .memori-button {
     display: flex;
+    width: 34px;
+    min-width: 34px;
+    height: 34px;
     align-items: center;
     justify-content: center;
-    padding: var(--memori-spacing-sm);
+    padding: 0 !important;
     border: none !important;
+    border-radius: 10px !important;
     background: transparent !important;
     box-shadow: none !important;
-    color: var(--memori-text-color) !important;
+    color: #888 !important;
     cursor: pointer;
-    transition: opacity 0.2s ease;
+    transition: background 0.15s ease, color 0.15s ease;
 }
 
 .memori-chat-inputs--upload-wrapper .memori-button:hover {
-    background: var(--memori-secondary-background) !important;
-    opacity: 0.7;
+    background: #f2eef5 !important;
+    color: #555 !important;
+    opacity: 1;
 }
 
 .memori-chat-inputs--upload-wrapper .memori-button:disabled {
@@ -145,8 +150,8 @@
 
 /* Icon class styling */
 .memori-chat-inputs--container .icon {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
     flex-shrink: 0;
     fill: currentColor;
 }
@@ -155,31 +160,33 @@
     padding: 4px 12px;
     border-radius: 10px;
     margin-top: 2px;
-    background-color: var(--memori-inner-bg, transparent);
+    background-color: transparent;
     color: rgba(0, 0, 0, 0.6);
     font-size: 12px;
     line-height: 1.5;
     text-align: center;
 }
 
-/* Microphone button styling */
+/* Microphone button styling (CONTINUOUS mode) */
 .memori-chat-inputs--mic-btn {
     display: flex;
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
+    width: 34px;
+    min-width: 34px;
+    height: 34px;
     align-items: center;
     justify-content: center;
     padding: 0;
     border: none;
+    border-radius: 10px;
     background: transparent;
-    color: var(--memori-text-color);
+    color: #888;
     cursor: pointer;
-    transition: opacity 0.2s ease;
+    transition: background 0.15s ease, color 0.15s ease;
 }
 
 .memori-chat-inputs--mic-btn:hover {
-    opacity: 0.7;
+    background: #f2eef5;
+    color: #555;
 }
 
 .memori-chat-inputs--mic-btn:disabled {
@@ -189,109 +196,135 @@
 
 .memori-chat-inputs--mic-btn svg,
 .memori-chat-inputs--mic-btn .icon {
-    width: 20px;
-    height: 20px;
-    fill: #000;
+    width: 18px;
+    height: 18px;
+    color: inherit;
+    fill: currentColor;
 }
 
-/* Ensure icons are black on white background */
 .memori-chat-inputs--leading .icon {
-    fill: #000;
+    fill: currentColor;
 }
 
 .memori-chat-inputs--send-btn svg {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
+    color: #fff;
     fill: #fff;
+    stroke: #fff;
 }
 
 .memori-chat-inputs--send-btn .icon {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
     color: #fff;
     fill: #fff;
+    stroke: #fff;
 }
 
 .memori-chat-inputs--upload-wrapper .memori-button svg,
 .memori-chat-inputs--upload-wrapper .memori-button .icon {
-    width: 20px;
-    height: 20px;
-    /* fill: #000; */
+    width: 18px;
+    height: 18px;
+    color: inherit;
+    fill: currentColor;
+    stroke: currentColor;
 }
 
 .memori-chat-inputs--trailing .memori-chat-inputs--mic-btn .icon {
-    fill: #000;
+    fill: currentColor;
 }
 
 .memori-chat-inputs--mic-btn--listening {
-    color: var(--memori-text-color);
+    color: #c0392b;
 }
 
 .memori-chat-inputs--mic {
     font-size: 100%;
 }
-/* Style MicrophoneButton component when used in trailing area */
+
+/* Style MicrophoneButton (HOLD_TO_TALK) when used in trailing area */
 .memori-chat-inputs--trailing .memori-chat-inputs--mic {
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
+    width: 34px;
+    min-width: 34px;
+    height: 34px;
     padding: 0;
     border: none;
+    border-radius: 10px;
+    margin-left: 0;
     background: transparent;
-    color: var(--memori-text-color);
+    color: #888;
 }
 
 .memori-chat-inputs--trailing .memori-chat-inputs--mic .memori-button {
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
+    width: 34px;
+    min-width: 34px;
+    height: 34px;
     padding: 0;
     border: none;
+    border-radius: 10px;
     background: transparent;
-    color: var(--memori-text-color);
+    color: #888;
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic:hover,
+.memori-chat-inputs--trailing .memori-chat-inputs--mic .memori-button:hover {
+    background: #f2eef5 !important;
+    color: #555 !important;
 }
 
-/* Send button styling - ChatGPT style */
-.memori-chat-inputs--send-btn {
+.memori-chat-inputs--trailing .memori-chat-inputs--mic svg {
+    width: 18px;
+    height: 18px;
+    margin-right: 0;
+    color: inherit;
+}
+
+/* Send button — solid purple, white icon (all layouts) */
+.memori-chat-inputs--send-btn,
+.memori-chat-inputs--send-btn.memori-button {
     display: flex;
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border: none;
-    border-radius: var(--memori-radius-box);
-    background: var(--memori-primary);
-    color: var(--memori-text-color);
+    padding: 0 !important;
+    border: none !important;
+    border-radius: 10px !important;
+    background: var(--memori-primary) !important;
+    box-shadow: none !important;
+    color: #fff !important;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: background 0.15s ease;
 }
 
-.memori-chat-inputs--send-btn:disabled {
-    /* background: #f4f4f4; */
-    color: #fff;
+.memori-chat-inputs--send-btn:disabled,
+.memori-chat-inputs--send-btn.memori-button:disabled,
+.memori-chat-inputs--send-btn--disabled {
+    background: var(--memori-primary) !important;
+    color: #fff !important;
     cursor: not-allowed;
-    opacity: 0.3;
+    opacity: 0.35;
 }
 
-.memori-chat-inputs--send-btn:hover:not(:disabled) {
-    opacity: 0.7;
-}
-
-.memori-chat-inputs--trailing .memori-chat-inputs--mic svg {
-    width: 20px;
-    height: 20px;
-    margin-right: 0;
+.memori-chat-inputs--send-btn:hover:not(:disabled),
+.memori-chat-inputs--send-btn.memori-button:hover:not(:disabled) {
+    background: var(--memori-primary-hover) !important;
+    color: #fff !important;
+    opacity: 1;
 }
 
 .memori-chat-inputs--send-btn--active {
-    /* background: #000; */
-    color: var(--memori-text-color);
+    color: #fff !important;
 }
 
 .memori-chat-inputs--send-btn--loading {
     width: 16px;
     height: 16px;
-    border: 2px solid currentColor;
-    border-radius: var(--memori-radius-box);
+    border: 2px solid #fff;
+    border-radius: 50%;
     border-top-color: transparent;
     animation: spin 0.8s linear infinite;
 }
@@ -311,6 +344,7 @@
     padding: var(--memori-spacing-sm)
         calc(var(--memori-spacing-3xl) + var(--memori-spacing-sm) + var(--memori-spacing-xs));
     margin-top: calc(-1 * var(--memori-spacing-xs));
+    background: var(--memori-secondary-background);
     color: var(--memori-text-color);
     font-size: 0.75rem;
     line-height: var(--memori-text-line-normal);
@@ -328,8 +362,10 @@
 }
 
 .memori-chat-inputs--ai-note {
-    margin: var(--memori-spacing-xs) var(--memori-spacing-sm) 0;
-    color: color-mix(in oklch, var(--memori-text-color) 68%, transparent);
+    max-width: 760px;
+    margin: 8px auto 0;
+    background: transparent;
+    color: #999;
     font-size: 0.75rem;
     line-height: 1.3;
     text-align: center;
@@ -341,8 +377,8 @@
     }
 
     .memori-chat-inputs--ai-note {
-        margin-right: var(--memori-spacing-xs);
-        margin-left: var(--memori-spacing-xs);
+        margin-right: 0;
+        margin-left: 0;
     }
 }
 
@@ -355,3 +391,100 @@
     background: #fff;
     color: var(--memori-text-color);
 }
+
+/* =============================================================================
+   FULLPAGE + ZOOMED_FULL_BODY — input pill on --memori-secondary-background, full width of chat column
+   ============================================================================= */
+
+.memori-widget.memori-layout-fullpage .memori-chat-inputs-wrapper,
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs-wrapper {
+    position: relative;
+    width: 100%;
+    padding: 14px 18px;
+    border-top: none;
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-inputs,
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs {
+    max-width: 100%;
+    margin: 0;
+    background: transparent;
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-inputs--container,
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs--container {
+    min-height: 0;
+    padding: 12px;
+    border: 1.5px solid var(--memori-border-color, #ddd);
+    border-radius: var(--memori-radius-box);
+    background: var(--memori-secondary-background);
+    gap: 10px;
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--container,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs--container,
+.memori-widget.memori-layout-chat .memori-chat-inputs--container {
+    min-height: 0;
+    padding: 12px;
+    border: 1.5px solid var(--memori-border-color, #ddd);
+    border-radius: var(--memori-radius-box);
+    background: var(--memori-secondary-background);
+    gap: 8px;
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-inputs--container:focus-within,
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs--container:focus-within,
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--container:focus-within,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs--container:focus-within,
+.memori-widget.memori-layout-chat .memori-chat-inputs--container:focus-within {
+    border-color: var(--memori-primary);
+    box-shadow: var(--memori-focus-ring, 0 0 0 3px color-mix(in oklch, var(--memori-primary) 18%, transparent));
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-inputs--ai-note,
+.memori-widget.memori-layout-zoomed_full_body .memori-chat-inputs--ai-note {
+    max-width: 100%;
+    color: #999;
+}
+
+/* =============================================================================
+   HIDDEN_CHAT + WEBSITE_ASSISTANT + CHAT — bottom-anchored white pill
+   ============================================================================= */
+
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs-wrapper,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs-wrapper,
+.memori-widget.memori-layout-chat .memori-chat-inputs-wrapper {
+    position: relative;
+    width: 100%;
+    flex-shrink: 0;
+    padding: 14px 18px 12px;
+    border-top: none;
+    margin-bottom: 0;
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs {
+    max-width: 100%;
+    margin: 0;
+    background: transparent;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-sidebar .memori-chat-inputs {
+    padding: 0 !important;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--primary,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs--primary {
+    min-width: 0;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--ai-note,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs--ai-note,
+.memori-widget.memori-layout-chat .memori-chat-inputs--ai-note {
+    max-width: 100%;
+    color: #999;
+}

package/src/components/ChatTextArea/ChatTextArea.css

@@ -89,16 +89,18 @@
 
 textarea.memori-chat-textarea--input {
     width: 100%;
+    min-width: 0;
     min-height: 36px;
     max-height: 208px;
     box-sizing: border-box;
-    /* padding: var(--memori-spacing-sm) 0; */
+    flex: 1;
     border: none;
     background: transparent;
-    color: var(--memori-text-color, #000);
+    color: var(--memori-text-color, #1f1425);
     font-family: var(--memori-font-family);
-    font-size: var(--memori-text-size-base);
+    font-size: 14.5px;
     line-height: var(--memori-text-line-normal);
+    outline: none;
     overflow-y: auto;
     resize: none;
     scrollbar-width: thin;
@@ -107,7 +109,7 @@ textarea.memori-chat-textarea--input {
 
 /* Placeholder styling */
 textarea.memori-chat-textarea--input::placeholder {
-    color: var(--memori-text-color);
+    color: #999;
 }
 
 /* Scrollbar styling */
@@ -132,14 +134,14 @@ textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
 @media (max-width: 768px) {
     textarea.memori-chat-textarea--input {
         max-height: 200px;
-        font-size: var(--memori-text-size-base); /* Prevent zoom on iOS */
+        font-size: 14.5px; /* Prevent zoom on iOS */
     }
 }
 
 @media (max-width: 480px) {
     textarea.memori-chat-textarea--input {
         max-height: 150px;
-        font-size: var(--memori-text-size-base); /* Prevent zoom on iOS */
+        font-size: 14.5px; /* Prevent zoom on iOS */
     }
 }
 
@@ -198,6 +200,26 @@ button.memori-chat-textarea--expand-button:focus {
     color: var(--memori-text-color-muted, rgba(255, 255, 255, 0.5));
 }
 
+/* Layout-scoped dark pills: keep exact text/placeholder colors */
+.memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input,
+.memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input,
+.memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input,
+[data-theme='dark'] .memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input,
+[data-theme='dark'] .memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input {
+    background: transparent;
+    /* color: #f2f0f4; */
+}
+
+.memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input::placeholder,
+.memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input::placeholder,
+.memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input::placeholder,
+[data-theme='dark'] .memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input::placeholder,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input::placeholder,
+[data-theme='dark'] .memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input::placeholder {
+    color: #7d7a86;
+}
+
 [data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.25);
 }

package/src/components/KnownFacts/KnownFacts.tsx

@@ -212,6 +212,7 @@ const KnownFacts = ({
             <>
               <Button
                 variant="ghost"
+                danger
                 onClick={() => {
                   setBulkDeleteModalVisible(false);
                   setBulkDeleteIds([]);
@@ -335,6 +336,7 @@ const KnownFacts = ({
             <>
               <Button
                 variant="ghost"
+                danger
                 onClick={() => {
                   setDeleteModalVisibleFor(undefined);
                 }}

package/src/components/MemoriWidget/MemoriWidget.css

@@ -156,9 +156,7 @@
 }
 
 .memori.memori-widget.chat-focused .memori--powered-by,
-.memori.memori-widget.chat-focused
-    .memori-website_assistant--close-button-wrapper
-    button.memori-website_assistant--close-button {
+.memori.memori-widget.chat-focused .memori-website_assistant--close-button {
     display: none;
 }