@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-rc.0

package/dist/components/ChatBubble/ChatBubble.css

@@ -1,3 +1,5 @@
+@import url('../ReasoningBlock/ReasoningBlock.css');
+
 .memori-chat--bubble-container {
     display: flex;
     flex-direction: column;
@@ -15,12 +17,14 @@
 .memori-chat--bubble-message-row {
     display: flex;
     width: 100%;
+    min-width: 0;
     max-width: 100%;
     align-items: flex-start;
     gap: 8px;
 }
 
 .memori-chat--bubble-container.memori-chat--bubble-from-user .memori-chat--bubble-message-row {
+    align-items: flex-start;
     justify-content: flex-end;
 }
 
@@ -29,7 +33,7 @@
     height: 1px;
     flex-shrink: 0;
     margin: 1rem auto;
-    background: #c5c6d1;
+    background: var(--memori-border-color);
 }
 
 .memori-chat--bubble-status-message {
@@ -37,8 +41,8 @@
     width: 100%;
     align-items: center;
     justify-content: center;
-    padding: 0 calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    margin: var(--memori-spacing-lg) auto;
+    padding: 0 var(--memori-spacing-md);
+    margin: var(--memori-spacing-md) auto;
 }
 
 .memori-chat--bubble-status-message-content {
@@ -47,14 +51,15 @@
     align-items: center;
     justify-content: center;
     padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    /* border: 1px solid var(--memori-primary); */
-    border-radius: var(--memori-radius-box);
-    backdrop-filter: blur(10px);
-    background: var(--memori-secondary-background);
+    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
+    border-radius: 999px;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    background: color-mix(in srgb, var(--memori-main-background, #fff) 92%, transparent);
+    box-shadow: 0 1px 3px color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
-    letter-spacing: 0.02em;
     line-height: 1.4;
     text-align: center;
     word-wrap: break-word;
@@ -69,28 +74,33 @@
 
 .memori-chat--bubble {
     display: inline-flex;
-    max-width: 90%;
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
     flex-direction: column;
     align-items: flex-start;
     padding: 12px 14px;
-    /* border: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb)); */
-    border-radius: 4px 14px 14px 14px;
+    border: none;
+    border-radius: var(--memori-radius-surface);
     /* margin-top: 1.5rem; */
     background: var(--memori-main-background);
-    color: var(--color-text-primary, var(--memori-text-color));
-    font-size: 14px;
+    border-top-left-radius: var(--memori-radius-tail);
+    box-shadow: none;
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-sm);
     line-height: 1.4;
+    overflow-wrap: anywhere;
+    transition: box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
     white-space: pre-wrap;
-}
-
-[data-theme='dark'] .memori-chat--bubble:not(.memori-chat--user-bubble) {
-    border-color: #fff;
+    word-break: break-word;
 }
 
 .memori-chat--bubble-timestamp-container {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     gap: 8px;
+    white-space: nowrap;
 }
 
 .memori-chat--bubble-timestamp-separator {
@@ -104,6 +114,8 @@
     position: relative;
     display: flex;
     min-width: 0;
+    max-width: 100%;
+    flex: 1 1 auto;
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
@@ -114,13 +126,131 @@
     align-items: flex-end;
 }
 
-.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
-    min-width: fit-content;
+.memori-chat--user-block {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    /* max-width: min(70%, 42rem); */
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 8px;
+}
+
+.memori-chat--user-block .memori-chat--bubble-shell--from-user {
+    width: auto;
+    max-width: 100%;
+}
+
+/*
+ * Compact media cluster for both sides: hug content, 8px gaps, 120px tiles.
+ * User (inside .memori-chat--user-block): right-aligned.
+ * Agent (inside .memori-chat--bubble-shell): left-aligned.
+ * No chrome by default — subtle fill only when chat has a custom background.
+ */
+.memori-chat--attachment-strip {
+    display: flex;
+    width: fit-content;
+    max-width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+}
+
+.memori-chat--user-block .memori-chat--attachment-strip {
+    align-items: flex-end;
+}
+
+.memori-chat--content--has-global-background .memori-chat--attachment-strip,
+.memori-chat--history--has-global-background .memori-chat--attachment-strip {
+    padding: 8px;
+    border-radius: var(--memori-radius-surface);
+    background: color-mix(in oklch, var(--memori-main-background) 22%, transparent);
+    border-top-left-radius: var(--memori-radius-tail);
+}
+
+.memori-chat--content--has-global-background .memori-chat--user-block .memori-chat--attachment-strip,
+.memori-chat--history--has-global-background .memori-chat--user-block .memori-chat--attachment-strip {
+    border-top-left-radius: var(--memori-radius-surface);
+    border-top-right-radius: var(--memori-radius-tail);
+}
+
+.memori-chat--attachment-strip .memori-media-items {
+    width: fit-content;
+    max-width: 100%;
+}
+
+.memori-chat--attachment-strip .memori-media-items--grid {
+    display: grid;
+    width: fit-content;
+    max-width: 100%;
+    justify-content: start;
+    padding: 0;
+    margin: 0;
+    gap: var(--memori-spacing-sm);
+}
+
+.memori-chat--attachment-strip .memori-media-items--grid.memori-media-items--agent {
+    justify-content: start;
+    margin-inline: 0;
+}
+
+.memori-chat--attachment-strip .memori-media-items--grid.memori-media-items--user {
+    width: fit-content;
+    max-width: 100%;
+    justify-content: end;
+    margin-inline: 0;
+}
+
+.memori-chat--attachment-strip .memori-media-items--grid.memori-media-items--single {
+    grid-template-columns: 120px;
+}
+
+.memori-chat--attachment-strip .memori-media-items--grid.memori-media-items--few {
+    grid-template-columns: repeat(2, 120px);
+}
+
+.memori-chat--attachment-strip .memori-media-items--grid.memori-media-items--many {
+    grid-template-columns: repeat(2, 120px);
+}
+
+@media (min-width: 1025px) {
+    .memori-chat--attachment-strip .memori-media-items--grid.memori-media-items--many {
+        grid-template-columns: repeat(3, 120px);
+    }
+}
+
+/* @media (max-width: 640px) {
+    .memori-chat--attachment-strip .memori-media-items--grid.memori-media-items--single,
+    .memori-chat--attachment-strip .memori-media-items--grid.memori-media-items--few,
+    .memori-chat--attachment-strip .memori-media-items--grid.memori-media-items--many {
+        padding: 0;
+        grid-template-columns: 120px;
+    }
+} */
+
+/* Fixed 120px tiles in the attachment cluster */
+.memori-chat--attachment-strip .memori-media-item {
+    width: 120px;
+    max-width: 120px;
+    height: 120px;
+    min-height: 120px;
+}
+
+.memori-chat--attachment-strip .memori-media-item--document-link,
+.memori-chat--attachment-strip .memori-media-item--document {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    height: 100%;
+    min-height: 120px;
 }
 
 .memori-chat--bubble-avatar svg {
     fill: #000;
-    font-size: var(--memori-text-size-heading-large);
+    font-size: var(--memori-text-size-2xl);
 }
 
 .memori-chat--bubble-action-icon--from-user > span > svg {
@@ -145,7 +275,6 @@
     height: 6px;
     border-radius: 50%;
     margin-right: calc(var(--memori-spacing-xs) / 2);
-    animation: wave 1.5s linear infinite;
     background: var(--memori-primary);
 }
 
@@ -153,20 +282,20 @@
     background: #fff;
 }
 
-.memori-chat--bubble #wave .dot:nth-child(2) {
-    animation-delay: -1.3s;
-}
-
-.memori-chat--bubble #wave .dot:nth-child(3) {
-    animation-delay: -1.1s;
-}
-
 .memori-chat--bubble-container.memori-chat--bubble-container--typing {
     margin-bottom: var(--memori-spacing-sm, 8px);
 }
 
+.memori-chat--bubble-container--typing .memori-chat--bubble {
+    width: fit-content;
+    max-width: 90%;
+    white-space: normal;
+}
+
 .memori-chat--bubble-typing {
     display: flex;
+    width: fit-content;
+    max-width: 100%;
     align-items: center;
     color: var(--memori-text-color);
 }
@@ -187,6 +316,16 @@
     display: none;
 }
 
+.memori-chat--bubble pre,
+.memori-chat--bubble .memori--responsive-table-wrapper {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+.memori-chat--bubble table {
+    max-width: 100%;
+}
+
 .memori-chat--bubble a {
     color: var(--memori-primary, #000);
     overflow-wrap: break-word;
@@ -214,14 +353,14 @@
 }
 
 @media (max-width: 600px) {
-    .memori-chat--bubble p {
-        font-size: 12px;
-        line-height: 1.25;
-    }
-
     .memori-chat--bubble-shell {
         gap: 4px;
     }
+
+    /* Keep the 8px attachment-to-bubble gap used on the user side */
+    .memori-chat--bubble-shell > .memori-chat--attachment-strip {
+        margin-bottom: 4px;
+    }
 }
 
 .memori-chat--bubble p + p {
@@ -230,17 +369,21 @@
 
 .memori-chat--bubble.memori-chat--user-bubble {
     max-width: 100%;
-    border-radius: 14px 4px 14px 14px;
-    background: var(--memori-primary) !important;
-    color: #fff;
-    font-size: 14px;
+    border: none;
+    border-radius: var(--memori-radius-surface);
+    /* Prefer --memori-primary-color: dark theme remaps --memori-primary to
+       --memori-primary-hover, which circularly resolves and drops the fill. */
+    background: var(--memori-primary-color, var(--memori-primary)) !important;
+    border-top-right-radius: var(--memori-radius-tail);
+    box-shadow: none;
+    color: var(--memori-primary-content);
+    font-size: var(--memori-text-size-sm);
     font-weight: 400;
 }
 
-[data-theme='dark'] {
-    .memori-chat--bubble.memori-chat--user-bubble {
-        background: var(--memori-primary-hover);
-    }
+[data-theme='dark'] .memori-chat--bubble.memori-chat--user-bubble,
+.memori-widget[data-theme='dark'] .memori-chat--bubble.memori-chat--user-bubble {
+    background: var(--memori-primary-color, var(--memori-primary)) !important;
 }
 
 .memori-chat--bubble-avatar {
@@ -256,12 +399,17 @@
     box-shadow: inset 0 0 0.25rem rgba(100, 100, 100, 0.2);
 }
 
+.memori-chat--bubble-container.memori-chat--bubble-from-user .memori-chat--bubble-avatar {
+    align-self: flex-start;
+}
+
 .memori-chat--bubble-timestamp {
     margin: 0;
     color: var(--memori-text-color);
     font-size: 0.8em;
     font-weight: var(--memori-text-weight-medium);
     line-height: 1;
+    white-space: nowrap;
 }
 
 .memori-chat--bubble-avatar-img {
@@ -270,45 +418,181 @@
     object-fit: cover;
 }
 
+/* Shared elevation for the floating addon and the highlighted message bubble. */
+.memori-chat--bubble-container.memori-chat--with-addon {
+    --memori-chat-addon-elevation: 0 4px 16px color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent),
+        0 1px 3px color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
+}
+
+/* The addon row sits outside the bubble, directly over the chat background, which
+   can be a dark image or colour: it carries its own surface so the icons and the
+   timestamp keep contrast whatever is painted behind them. */
 .memori-chat--bubble-addon {
+    position: absolute;
+    z-index: 5;
+    top: 100%;
+    right: auto;
+    bottom: auto;
+    left: 0;
     display: flex;
-    flex-wrap: wrap;
+    width: max-content;
+    max-width: none;
+    flex-wrap: nowrap;
     align-items: center;
-    align-self: flex-start;
     justify-content: flex-start;
+    padding: var(--memori-spacing-xs);
+    border-radius: var(--memori-radius-full);
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+    background: color-mix(in srgb, var(--memori-main-background) 92%, transparent);
+    box-shadow: var(--memori-chat-addon-elevation);
+    color: var(--memori-text-color);
     gap: calc(var(--memori-spacing-xs) * 0.5);
     opacity: 0;
     pointer-events: none;
-    transform: translateY(-4px);
-    transition: opacity 0.2s ease, transform 0.2s ease;
+    transform: translate3d(0, -6px, 0) scale(0.98);
+    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+    white-space: nowrap;
+    will-change: opacity, transform;
 }
 
-.memori-chat--bubble-shell--from-user .memori-chat--bubble-addon {
-    align-self: flex-end;
+.memori-chat--bubble-addon:has(.memori-chat--bubble-timestamp-container) {
+    padding-left: var(--memori-spacing-sm);
+}
+
+/* Anchor bubble + addon so the action row sits directly under the message,
+   not under artifacts/media rendered below in the shell. */
+.memori-chat--bubble-anchor {
+    position: relative;
+    display: inline-flex;
+    max-width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.memori-chat--bubble-anchor:has(.memori-reasoning) {
+    gap: 6px;
+}
+
+.memori-chat--bubble-anchor--from-user {
+    align-items: flex-end;
+}
+
+.memori-chat--bubble-anchor--has-addon {
+    /* Keep the translated addon inside the hover hit area on desktop. */
+    padding-bottom: calc(var(--memori-spacing-md) + var(--memori-spacing-xs));
+}
+
+/* Artifact chips sit in the shell under the bubble: drop the addon slot so
+   copy/feedback does not float in a hole above the card. */
+.memori-chat--bubble-shell:has(.memori-chat--artifact-block) .memori-chat--bubble-anchor--has-addon {
+    padding-bottom: 0;
+}
+
+.memori-chat--bubble-anchor--from-user .memori-chat--bubble-addon {
+    right: 0;
+    left: auto;
 }
 
 .memori-chat--artifact-block {
-    width: 100%;
-    max-width: 90%;
+    width: fit-content;
+    max-width: 100%;
+    margin-bottom: 0;
 }
 
 .memori-chat--artifact-block--chatlog {
     max-width: 100%;
 }
 
-.memori-chat--bubble-shell--has-addon:focus-within .memori-chat--bubble-addon,
-.memori-chat--bubble-container.memori-chat--with-addon:hover .memori-chat--bubble-addon,
-.memori-chat--bubble-container.memori-chat--with-addon:focus-within .memori-chat--bubble-addon {
+.memori-chat--artifact-block--chatlog.memori-chat--artifact-block--expanded {
+    width: 100%;
+}
+
+.memori-chat--bubble-anchor--has-addon:focus-within .memori-chat--bubble-addon,
+.memori-chat--bubble-container.memori-chat--addon-open .memori-chat--bubble-addon {
     opacity: 1;
     pointer-events: auto;
-    transform: translateY(-10px);
+    transform: translate3d(0, -8px, 0) scale(1);
+}
+
+.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
+    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.memori-chat--bubble-anchor--has-addon:focus-within .memori-chat--bubble,
+.memori-chat--bubble-container.memori-chat--addon-open .memori-chat--bubble {
+    box-shadow: var(--memori-chat-addon-elevation);
+}
+
+/* Wide markdown code blocks and tables scroll inside the bubble instead of
+   stretching the conversation column. */
+.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble:has(pre, table) {
+    min-width: 0;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .memori-chat--bubble-anchor--has-addon:hover .memori-chat--bubble-addon {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translate3d(0, -8px, 0) scale(1);
+    }
+}
+
+.memori-chat--bubble-container.memori-chat--addon-open .memori-chat--bubble.memori-chat--user-bubble {
+    box-shadow: var(--memori-chat-addon-elevation);
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .memori-chat--bubble-anchor--has-addon:hover .memori-chat--bubble {
+        box-shadow: var(--memori-chat-addon-elevation);
+    }
+
+    .memori-chat--bubble-anchor--has-addon:hover .memori-chat--bubble.memori-chat--user-bubble {
+        box-shadow: var(--memori-chat-addon-elevation);
+    }
 }
 
 .memori-chat--bubble-addon-tooltip-trigger {
     display: inline-flex;
+    flex-shrink: 0;
+}
+
+/* Portal to widget surface so tooltip anchoring is not thrown off by the addon transform.
+   Hide during enter/exit so the popup never flashes at 0,0 (top of the page) when
+   Floating UI hasn't applied coordinates yet, or when the trigger loses focus. */
+.memori-chat--bubble-addon-tooltip-positioner {
+    z-index: 1300;
+}
+
+.memori-chat--bubble-addon-tooltip-positioner[data-starting-style],
+.memori-chat--bubble-addon-tooltip-positioner[data-ending-style] {
+    opacity: 0 !important;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.memori-chat--bubble-ai-icon {
+    display: inline-flex;
+    width: 1.75rem;
+    height: 1.75rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--memori-text-color);
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+/* stylelint-disable-next-line no-descending-specificity -- icon size scoped after action-icon rules */
+.memori-chat--bubble-ai-icon svg {
+    width: 1rem;
+    height: 1rem;
 }
 
 .memori-chat--bubble-addon button {
+    flex-shrink: 0;
     transition: all 0.3s ease-in-out;
 }
 
@@ -328,6 +612,39 @@
 .memori-chat--bubble-action-button:hover {
     background-color: var(--memori-secondary-background) !important;
 }
+
+.memori-chat--bubble-addon button.memori-chat--bubble-action-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-chat--bubble-addon button.memori-chat--bubble-action-button .memori-button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+}
+
+.memori-chat--bubble-addon button.memori-chat--bubble-action-button--sources {
+    width: auto;
+    min-width: 1.875rem;
+    height: 1.875rem;
+    align-items: center;
+    padding: 0 0.75rem;
+    border-radius: var(--memori-radius-xs);
+    background: color-mix(in oklch, var(--memori-primary) 12%, transparent);
+    color: var(--memori-primary);
+    font-size: var(--memori-text-size-xs);
+    font-weight: var(--memori-text-weight-medium);
+    gap: 6px;
+    line-height: 1;
+}
+
+.memori-chat--bubble-addon button.memori-chat--bubble-action-button--sources-empty {
+    background: transparent;
+    color: color-mix(in oklch, var(--memori-text-color) 55%, transparent);
+}
 .memori-chat--bubble .memori-chat--bubble-action-icon {
     display: flex;
     justify-content: flex-end;
@@ -365,6 +682,7 @@
 
 .memori-chat--bubble-addon .memori-chat--feedback {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     padding: 0;
     margin: 0;
@@ -378,7 +696,7 @@
     padding: 0;
     padding: var(--memori-spacing-sm);
     border: 0;
-    border-radius: 50%;
+    border-radius: var(--memori-radius-xs);
     color: var(--memori-text-color);
 }
 
@@ -389,12 +707,13 @@
 
 .memori-chat--bubble-addon button.memori-chat--bubble-action-icon {
     padding: calc(var(--memori-spacing-xs) / 2);
+    border-radius: var(--memori-radius-xs);
 }
 
 .memori-chat--bubble-action-feedback {
     margin-left: var(--memori-spacing-xs);
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-semibold);
     letter-spacing: 0.03em;
     text-transform: uppercase;
@@ -478,18 +797,6 @@
     transform: translateX(0);
 }
 
-@keyframes wave {
-    0%,
-    60%,
-    100% {
-        transform: initial;
-    }
-
-    30% {
-        transform: translateY(-10px);
-    }
-}
-
 .memori-chat--bubble-content {
     width: 100%;
     font-weight: 400;
@@ -499,7 +806,7 @@
 .memori-chat--user-bubble .memori-chat--bubble-content p,
 .memori-chat--user-bubble .memori-chat--bubble-content div,
 .memori-chat--user-bubble .memori-expandable {
-    font-size: 14px;
+    font-size: var(--memori-text-size-sm);
     font-weight: 400;
     line-height: 1.45;
 }
@@ -524,45 +831,48 @@
     font-weight: var(--memori-text-weight-medium);
 }
 
+.memori-chat--function-cache-modal.memori-modal__viewport .memori-modal__popup,
 .memori-chat--function-cache-modal .memori-modal--panel {
     width: 80%;
     height: 100%;
-    /* padding: 20px; */
     max-height: 80vh;
-    border-radius: var(--memori-radius-box);
-    background-color: #fff;
+    border-radius: var(--memori-radius-overlay);
+    background-color: var(--memori-main-background, #fff);
     overflow-y: auto;
 }
 
 details.memori-think {
     display: block;
-    width: calc(100% - 1.5rem);
-    max-width: 500px;
-    padding: var(--memori-spacing-lg);
-    border-radius: var(--memori-radius-box);
-    margin-bottom: var(--memori-spacing-lg);
-    background-color: var(--memori-secondary-background);
-    font-size: 0.85em;
-    font-style: italic;
-    line-height: 1.33;
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: var(--memori-spacing-sm);
+    background: transparent;
+    font-size: 13px;
+    font-style: normal;
+    line-height: 1.65;
 }
 
 details.memori-think summary {
+    display: list-item;
+    color: color-mix(in oklch, var(--memori-text-color) 52%, transparent);
     cursor: pointer;
-    font-weight: bold;
-    opacity: 0.6;
+    font-weight: 500;
+    list-style: none;
+}
+
+details.memori-think summary::-webkit-details-marker {
+    display: none;
 }
 
 details.memori-think summary:hover {
-    color: var(--memori-primary);
-    opacity: 1;
+    color: color-mix(in oklch, var(--memori-text-color) 82%, transparent);
 }
 
 details.memori-think[open] {
-    color: var(--memori-text-color);
+    color: color-mix(in oklch, var(--memori-text-color) 62%, transparent);
 }
 
 details.memori-think[open] summary {
-    margin-bottom: var(--memori-spacing-sm);
-    color: var(--memori-text-color);
+    margin-bottom: var(--memori-spacing-xs);
+    color: color-mix(in oklch, var(--memori-text-color) 52%, transparent);
 }