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

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "9.0.0-alpha.7";
+export declare const version = "9.0.0-alpha.9";

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '9.0.0-alpha.7';
+export const version = '9.0.0-alpha.9';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.0-alpha.7",
+  "version": "9.0.0-alpha.9",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/Chat/Chat.css

@@ -18,32 +18,45 @@
     width: 100%;
     height: calc(100% - 50px);
     flex: 1;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-box) var(--memori-radius-box) 0 0;
     margin-bottom: 1rem;
     background-color: var(--memori-secondary-background);
 }
 
+.memori-chat--history:has(.memori-chat--content--has-global-background) {
+    background-color: transparent;
+}
+
 /* Adjust chat history when textarea is expanded */
 .memori-chat-wrapper--expanded .memori-chat--history {
     margin-bottom: var(--memori-spacing-sm);
 }
 
-/* Solo widget layout CHAT: area messaggi a card */
+/* Solo widget layout CHAT: area messaggi a card — top radius only;
+   bottom radius lives on the input bar so the panel reads as one unit */
 .memori-widget.memori-layout-chat .memori-chat-layout--controls .memori-chat--history {
+    height: 100%;
     min-height: 0;
     padding: 0;
-    border-radius: 12px;
-    margin: 0.5rem 0 1rem;
-    background-color: transparent;
+    border-radius: 0;
+    margin: 0;
+    background-color: var(--memori-secondary-background);
     box-shadow: none;
 }
 
+.memori-widget.memori-layout-chat
+    .memori-chat-layout--controls
+    .memori-chat--history:has(.memori-chat--content--has-global-background) {
+    background-color: transparent;
+}
+
 .memori-widget.memori-layout-chat .memori-widget {
     padding: 0;
 }
 
-.memori-widget.memori-layout-chat .memori-chat--bubble {
-    background-color: var(--memori-secondary-background);
+.memori-widget.memori-layout-chat .memori-chat--bubble:not(.memori-chat--user-bubble) {
+    border: none;
+    /* background-color: var(--memori-secondary-background); */
 }
 
 .memori-widget.memori-layout-chat .memori-media-item--document {
@@ -68,6 +81,34 @@
     scroll-behavior: smooth;
 }
 
+/* Global background image lives on the chat content area (not the whole layout).
+   Pseudo-element keeps blur from affecting messages. */
+.memori-chat--content--has-global-background {
+    background-color: transparent;
+    isolation: isolate;
+}
+
+.memori-chat--content--has-global-background::before {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #eee;
+    background-image: var(--memori-chat-global-background);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    content: '';
+    pointer-events: none;
+}
+
+.memori-chat--content--has-global-background > * {
+    position: relative;
+    z-index: 1;
+}
+
 .memori-chat--content.memori-chat--content-touch {
     padding: 0;
 }

package/src/components/Chat/Chat.tsx

@@ -120,6 +120,8 @@ export interface Props {
   /** Max characters in chat textarea; shows counter and enforces paste + existing text does not exceed this limit. */
   maxTextareaCharacters?: number;
   /** Max attachments (docs + images) per message. */
+  /** Integration global background image URL applied to `.memori-chat--content`. */
+  globalBackground?: string;
 }
 
 type MessageWithLlmUsage = Message & { llmUsage?: LlmUsageOnLine };
@@ -180,6 +182,7 @@ const Chat: React.FC<Props> = ({
   showFunctionCache = false,
   maxTotalMessagePayload,
   maxTextareaCharacters,
+  globalBackground,
 }) => {
   const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
@@ -421,7 +424,15 @@ const Chat: React.FC<Props> = ({
         <div
           className={cx('memori-chat--content', {
             'memori-chat--content-touch': hasTouchscreen(),
+            'memori-chat--content--has-global-background': !!globalBackground,
           })}
+          style={
+            globalBackground
+              ? ({
+                  ['--memori-chat-global-background' as string]: `url(${globalBackground})`,
+                } as React.CSSProperties)
+              : undefined
+          }
         >
           <div
             className={cx('memori-chat--cover')}

package/src/components/ChatBubble/ChatBubble.css

@@ -73,20 +73,18 @@
     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;
     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;
@@ -230,17 +228,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 {