@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/esm/components/ChatBubble/ChatBubble.css

@@ -1,9 +1,27 @@
 .memori-chat--bubble-container {
     display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding-right: var(--memori-spacing-md);
+    padding-left: var(--memori-spacing-md);
+    /* margin-bottom: 8px; */
+    gap: 8px;
+}
+
+.memori-chat--bubble-container.memori-chat--bubble-from-user {
     align-items: flex-end;
-    padding-right: 10px;
-    padding-left: 10px;
-    margin-bottom: 1rem;
+}
+
+.memori-chat--bubble-message-row {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.memori-chat--bubble-container.memori-chat--bubble-from-user .memori-chat--bubble-message-row {
+    justify-content: flex-end;
 }
 
 .memori-chat--bubble-initial {
@@ -19,8 +37,8 @@
     width: 100%;
     align-items: center;
     justify-content: center;
-    padding: 0 1rem;
-    margin: 1.5rem auto;
+    padding: 0 calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
+    margin: var(--memori-spacing-lg) auto;
 }
 
 .memori-chat--bubble-status-message-content {
@@ -28,15 +46,14 @@
     max-width: 90%;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem 1rem;
-    border: 1px solid rgba(76, 111, 255, 0.2);
-    border-radius: 20px;
+    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: linear-gradient(135deg, rgba(76, 111, 255, 0.1) 0%, rgba(76, 111, 255, 0.05) 100%);
-    box-shadow: 0 2px 8px rgba(76, 111, 255, 0.1);
-    color: var(--memori-primary, #4c6fff);
-    font-size: 0.75rem;
-    font-weight: 500;
+    background: var(--memori-secondary-background);
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-small);
+    font-weight: var(--memori-text-weight-medium);
     letter-spacing: 0.02em;
     line-height: 1.4;
     text-align: center;
@@ -55,35 +72,59 @@
     max-width: 90%;
     flex-direction: column;
     align-items: flex-start;
-    padding: 10px 16px;
-    border-radius: 12px 12px 12px 0;
-    margin: 10px auto 5px 10px;
-    margin-bottom: 5px;
-    background: var(--memori-chat-bubble-bg, #ffffff60);
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
-    color: #141515;
-    font-size: 0.85em;
-    line-height: 1.33;
+    padding: 12px 14px;
+    /* border: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb)); */
+    border-radius: 4px 14px 14px 14px;
+    /* margin-top: 1.5rem; */
+    background: var(--memori-main-background);
+    color: var(--color-text-primary, var(--memori-text-color));
+    font-size: 14px;
+    line-height: 1.4;
+    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;
+    align-items: center;
+    gap: 8px;
+}
 
-.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
-    min-width: 9rem;
+.memori-chat--bubble-timestamp-separator {
+    color: color-mix(in oklch, var(--memori-text-color) 64%, transparent);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1;
 }
 
+.memori-chat--bubble-shell {
+    position: relative;
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+}
 
-.memori-chat--bubble-avatar svg {
-    width: 40px;
-    height: 40px;
-    padding: 0.33rem;
-    fill: #666;
-    font-size: 1.5rem;
+.memori-chat--bubble-shell--from-user {
+    max-width: min(70%, 42rem);
+    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);
+}
 
 .memori-chat--bubble-action-icon--from-user > span > svg {
-    color: #fff !important;
+    color: var(--memori-text-color) !important;
 }
 
 .memori-chat--bubble-action-icon--from-user:focus {
@@ -103,11 +144,15 @@
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    margin-right: 3px;
+    margin-right: calc(var(--memori-spacing-xs) / 2);
     animation: wave 1.5s linear infinite;
     background: var(--memori-primary);
 }
 
+[data-theme='dark'] .memori-chat--bubble #wave .dot {
+    background: #fff;
+}
+
 .memori-chat--bubble #wave .dot:nth-child(2) {
     animation-delay: -1.3s;
 }
@@ -116,9 +161,14 @@
     animation-delay: -1.1s;
 }
 
+.memori-chat--bubble-container.memori-chat--bubble-container--typing {
+    margin-bottom: var(--memori-spacing-sm, 8px);
+}
+
 .memori-chat--bubble-typing {
     display: flex;
     align-items: center;
+    color: var(--memori-text-color);
 }
 
 .memori-chat--bubble p {
@@ -151,7 +201,7 @@
 }
 
 .memori-chat--bubble.memori-chat--user-bubble a {
-    color: var(--memori-primary-text);
+    color: var(--memori-text-color);
 }
 
 .memori-chat--bubble h1,
@@ -168,18 +218,29 @@
         font-size: 12px;
         line-height: 1.25;
     }
+
+    .memori-chat--bubble-shell {
+        gap: 4px;
+    }
 }
 
 .memori-chat--bubble p + p {
-    margin-top: 0.5em;
+    margin-top: var(--memori-spacing-sm);
 }
 
 .memori-chat--bubble.memori-chat--user-bubble {
-    border-radius: 12px 12px 0 12px;
-    margin: 10px 10px 5px auto;
-    background: var(--memori-chat-user-bubble-bg);
-    box-shadow: 0 1px 6px 0 #d1d3de, 0 1px 3px 0 #c5c6d1;
-    color: var(--memori-primary-text);
+    max-width: 100%;
+    border-radius: 14px 4px 14px 14px;
+    background: var(--memori-primary) !important;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 400;
+}
+
+[data-theme='dark'] {
+    .memori-chat--bubble.memori-chat--user-bubble {
+        background: var(--memori-primary-hover);
+    }
 }
 
 .memori-chat--bubble-avatar {
@@ -195,6 +256,14 @@
     box-shadow: inset 0 0 0.25rem rgba(100, 100, 100, 0.2);
 }
 
+.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;
+}
+
 .memori-chat--bubble-avatar-img {
     width: 100%;
     height: 100%;
@@ -203,16 +272,66 @@
 
 .memori-chat--bubble-addon {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: flex-end;
-    margin-top: 0.5em;
-    margin-left: auto;
+    align-self: flex-start;
+    justify-content: flex-start;
+    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;
+}
+
+.memori-chat--bubble-shell--from-user .memori-chat--bubble-addon {
+    align-self: flex-end;
+}
+
+.memori-chat--artifact-block {
+    width: 100%;
+    max-width: 90%;
+}
+
+.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 {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(-10px);
+}
+
+.memori-chat--bubble-addon-tooltip-trigger {
+    display: inline-flex;
+}
+
+.memori-chat--bubble-addon button {
+    transition: all 0.3s ease-in-out;
+}
+
+/* ShareButton copy affordances on circular bubble actions (see ShareButton.css) */
+.memori-chat--bubble-addon button.memori-chat--bubble-action-button.memori-share-button--copy-item--success:hover {
+    background-color: color-mix(in srgb, var(--memori-primary, #3b82f6) 12%, transparent);
+}
+
+.memori-chat--bubble-addon button.memori-chat--bubble-action-button.memori-share-button--copy-item--error:hover {
+    background-color: color-mix(in srgb, #ef4444 10%, transparent);
+}
+
+.memori-chat--bubble-addon button.memori-share-button--copy-item--error .memori-share-button--copy-icon {
+    color: #b91c1c;
+}
+
+.memori-chat--bubble-action-button:hover {
+    background-color: var(--memori-secondary-background) !important;
+}
 .memori-chat--bubble .memori-chat--bubble-action-icon {
     display: flex;
     justify-content: flex-end;
-    padding: 2px;
+    padding: calc(var(--memori-spacing-xs) / 2);
     text-align: right;
 }
 
@@ -220,11 +339,11 @@
     overflow: visible;
     width: 1rem;
     height: 1rem;
-    color: #000;
+    color: var(--memori-text-color);
 }
 
 .memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--copied {
-    border-color: var(--memori-primary, #4c6fff) !important;
+    border-color: var(--memori-primary) !important;
     background-color: rgba(76, 111, 255, 0.08);
 }
 
@@ -233,13 +352,11 @@
 }
 
 .memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai {
-    padding: 3px;
+    padding: calc(var(--memori-spacing-xs) * 0.75);
 }
 
-
-
 .memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--debug {
-    color: var(--memori-error-color);
+    color: var(--memori-error);
 }
 
 .memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--debug svg {
@@ -259,7 +376,10 @@
     height: auto;
     min-height: 0;
     padding: 0;
-    color: #333;
+    padding: var(--memori-spacing-sm);
+    border: 0;
+    border-radius: 50%;
+    color: var(--memori-text-color);
 }
 
 .memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai svg {
@@ -268,20 +388,20 @@
 }
 
 .memori-chat--bubble-addon button.memori-chat--bubble-action-icon {
-    padding: 2.5px;
+    padding: calc(var(--memori-spacing-xs) / 2);
 }
 
 .memori-chat--bubble-action-feedback {
-    margin-left: 0.35rem;
-    color: var(--memori-primary, #4c6fff);
-    font-size: 0.65rem;
-    font-weight: 600;
+    margin-left: var(--memori-spacing-xs);
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-small);
+    font-weight: var(--memori-text-weight-semibold);
     letter-spacing: 0.03em;
     text-transform: uppercase;
 }
 
 .memori-chat--bubble-action-feedback--from-user {
-    color: var(--memori-primary-text, #fff);
+    color: var(--memori-primary-content);
 }
 
 .memori-chat--bubble-addon .memori-chat--feedback button .memori-button--icon svg {
@@ -304,10 +424,10 @@
 .memori-chat--bubble-addon .memori-tooltip .memori-tooltip--trigger {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
-    padding: 3px;
+    justify-content: center;
+    padding: 0;
     line-height: 0;
-    text-align: right;
+    text-align: center;
 }
 
 .transition {
@@ -372,6 +492,16 @@
 
 .memori-chat--bubble-content {
     width: 100%;
+    font-weight: 400;
+}
+
+.memori-chat--user-bubble .memori-chat--bubble-content,
+.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-weight: 400;
+    line-height: 1.45;
 }
 
 .memori-chat--bubble output {
@@ -383,7 +513,15 @@
 }
 
 .memori-chat--bubble.memori-chat--user-bubble .memori-expandable > button {
-    color: var(--memori-primary-text);
+    color: transparent;
+    font-size: 0;
+}
+
+.memori-chat--bubble.memori-chat--user-bubble .memori-expandable > button::after {
+    color: var(--memori-text-color);
+    content: 'Espandi';
+    font-size: 0.8rem;
+    font-weight: var(--memori-text-weight-medium);
 }
 
 .memori-chat--function-cache-modal .memori-modal--panel {
@@ -391,7 +529,7 @@
     height: 100%;
     /* padding: 20px; */
     max-height: 80vh;
-    border-radius: 10px;
+    border-radius: var(--memori-radius-box);
     background-color: #fff;
     overflow-y: auto;
 }
@@ -400,10 +538,10 @@ details.memori-think {
     display: block;
     width: calc(100% - 1.5rem);
     max-width: 500px;
-    padding: 0.75rem;
-    border-radius: var(--memori-border-radius);
-    margin-bottom: 0.75rem;
-    background-color: #f6f6f6;
+    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;
@@ -421,10 +559,10 @@ details.memori-think summary:hover {
 }
 
 details.memori-think[open] {
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--memori-text-color);
 }
 
 details.memori-think[open] summary {
-    margin-bottom: 0.5rem;
-    color: #000;
+    margin-bottom: var(--memori-spacing-sm);
+    color: var(--memori-text-color);
 }

package/esm/components/ChatBubble/ChatBubble.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ExpertReference, Memori, Message, Tenant, User } from '@memori.ai/memori-api-client/dist/types';
 import { Props as MemoriProps } from '../MemoriWidget/MemoriWidget';
 import memoriApiClient from '@memori.ai/memori-api-client';
+import { Props as MediaWidgetProps } from '../MediaWidget/MediaWidget';
 declare global {
     interface Window {
         MathJax?: {
@@ -31,6 +32,10 @@ export interface Props {
     showFunctionCache?: boolean;
     showReasoning?: boolean;
     usageHtml?: string;
+    isChatlogPanel?: boolean;
+    codeMimeTypes?: string[];
+    translateTo?: string;
+    customMediaRenderer?: MediaWidgetProps['customMediaRenderer'];
 }
 declare const ChatBubble: React.FC<Props>;
 export default ChatBubble;