@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.20

package/src/components/ChatBubble/ChatBubble.css

@@ -73,24 +73,25 @@
     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: 13px;
     /* margin-top: 1.5rem; */
     background: var(--memori-main-background);
-    color: var(--color-text-primary, var(--memori-text-color));
+    border-top-left-radius: 4px;
+    box-shadow: none;
+    color: var(--memori-text-color);
     font-size: 14px;
     line-height: 1.4;
+    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;
-}
-
 .memori-chat--bubble-timestamp-container {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     gap: 8px;
+    white-space: nowrap;
 }
 
 .memori-chat--bubble-timestamp-separator {
@@ -114,10 +115,6 @@
     align-items: flex-end;
 }
 
-.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
-    min-width: fit-content;
-}
-
 .memori-chat--bubble-avatar svg {
     fill: #000;
     font-size: var(--memori-text-size-heading-large);
@@ -187,6 +184,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,11 +221,6 @@
 }
 
 @media (max-width: 600px) {
-    .memori-chat--bubble p {
-        font-size: 12px;
-        line-height: 1.25;
-    }
-
     .memori-chat--bubble-shell {
         gap: 4px;
     }
@@ -230,17 +232,21 @@
 
 .memori-chat--bubble.memori-chat--user-bubble {
     max-width: 100%;
-    border-radius: 14px 4px 14px 14px;
-    background: var(--memori-primary) !important;
-    color: #fff;
+    border: none;
+    border-radius: var(--memori-radius-box);
+    /* 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: 4px;
+    box-shadow: none;
+    color: var(--memori-primary-content);
     font-size: 14px;
     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 {
@@ -262,6 +268,7 @@
     font-size: 0.8em;
     font-weight: var(--memori-text-weight-medium);
     line-height: 1;
+    white-space: nowrap;
 }
 
 .memori-chat--bubble-avatar-img {
@@ -270,21 +277,73 @@
     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: 2147483647;
+    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: calc(var(--memori-spacing-xs) * 0.5) var(--memori-spacing-xs);
+    border-radius: 999px;
+    -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-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--from-user {
+    align-items: flex-end;
 }
 
-.memori-chat--bubble-shell--from-user .memori-chat--bubble-addon {
-    align-self: 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));
+}
+
+.memori-chat--bubble-anchor--from-user .memori-chat--bubble-addon {
+    right: 0;
+    left: auto;
 }
 
 .memori-chat--artifact-block {
@@ -296,19 +355,77 @@
     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-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: translate3d(0, -8px, 0) scale(1);
+}
+
+.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
+    min-width: fit-content;
+}
+
+.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);
+}
+
+/* fit-content outranks the bubble max-width, so a wide markdown code block or table
+   would stretch the bubble past the messages viewport and make the whole chat scroll
+   sideways. Those blocks are kept scrollable on their own instead. */
+.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble:has(pre, table) {
+    min-width: 0;
+}
+
 .memori-chat--bubble-container.memori-chat--with-addon:focus-within .memori-chat--bubble-addon {
     opacity: 1;
     pointer-events: auto;
-    transform: translateY(-10px);
+    transform: translate3d(0, -8px, 0) scale(1);
+}
+
+@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);
+}
+
+.memori-chat--bubble-container.memori-chat--with-addon:focus-within .memori-chat--bubble {
+    box-shadow: var(--memori-chat-addon-elevation);
+}
+
+.memori-chat--bubble-container.memori-chat--with-addon:focus-within .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. */
+.memori-chat--bubble-addon-tooltip-positioner {
+    z-index: 2147483647;
 }
 
 .memori-chat--bubble-addon button {
+    flex-shrink: 0;
     transition: all 0.3s ease-in-out;
 }
 
@@ -365,6 +482,7 @@
 
 .memori-chat--bubble-addon .memori-chat--feedback {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     padding: 0;
     margin: 0;

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -483,4 +483,68 @@ it('renders ChatBubble with reasoning and output and markdown unchanged', () =>
     />
   );
   expect(container).toMatchSnapshot();
-});
+});
+
+it('uses the adjacent attachment link for document media', () => {
+  const attachmentUrl = 'https://assets.example.com/report.docx';
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      message={{
+        fromUser: false,
+        initial: false,
+        text: [
+          '<document_attachment filename="report.docx" type="application/vnd.openxmlformats-officedocument.wordprocessingml.document">',
+          '</document_attachment>',
+          `<attachment_link>${attachmentUrl}</attachment_link>`,
+        ].join('\n'),
+      }}
+    />
+  );
+
+  expect(
+    container.querySelector(`a[href="${attachmentUrl}"]`)
+  ).toBeInTheDocument();
+});
+
+it('hides date and time in the bubble addon by default', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      message={{
+        fromUser: false,
+        text: 'Hello from the agent.',
+        timestamp: '2021-03-01T12:00:00.000Z',
+      }}
+    />
+  );
+
+  expect(
+    container.querySelector('.memori-chat--bubble-timestamp')
+  ).not.toBeInTheDocument();
+});
+
+it('shows formatted date and time in the bubble addon when showDates is true', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      showDates
+      message={{
+        fromUser: false,
+        text: 'Hello from the agent.',
+        timestamp: '2021-03-01T12:00:00.000Z',
+      }}
+    />
+  );
+
+  const timestamp = container.querySelector('.memori-chat--bubble-timestamp');
+  expect(timestamp).toBeInTheDocument();
+  expect(timestamp?.textContent).toMatch(/\d{2}\/\d{2}\/\d{4}/);
+  expect(timestamp?.textContent).toMatch(/\d{2}:\d{2}/);
+});