@landtrustinc/design-system 1.2.45 → 1.2.47-beta.0

package/dist/index.d.ts

@@ -1371,6 +1371,14 @@ type MessageBubbleProps = {
      * Optional timestamp to display
      */
     timestamp?: string;
+    /**
+     * Optional avatar image URL
+     */
+    avatarSrc?: string;
+    /**
+     * Optional author name to display
+     */
+    author?: string;
     /**
      * Additional CSS class names
      */
@@ -1380,7 +1388,7 @@ type MessageBubbleProps = {
      */
     children?: React__default.ReactNode;
 };
-declare const MessageBubble: ({ variant, timestamp, className, children, }: MessageBubbleProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const MessageBubble: ({ variant, timestamp, avatarSrc, author, className, children, }: MessageBubbleProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ChatWidgetMessage = React__default.ReactElement<React__default.ComponentProps<typeof AIResponse>, typeof AIResponse> | React__default.ReactElement<React__default.ComponentProps<typeof MessageBubble>, typeof MessageBubble>;
 type SuggestedPrompt = {

package/dist/index.js

@@ -6076,14 +6076,44 @@ var getRootStyles = (variant) => import_react29.css`
   gap: var(--spacing-1);
   align-items: ${variant === "sent" ? "flex-end" : "flex-start"};
 `;
+var getOuterWrapperStyles = (variant) => import_react29.css`
+  display: flex;
+  flex-direction: ${variant === "sent" ? "row-reverse" : "row"};
+  gap: var(--spacing-3);
+  align-items: flex-start;
+  width: 100%;
+`;
+var avatarWrapperStyles = import_react29.css`
+  flex-shrink: 0;
+  width: 43px;
+  height: 43px;
+
+  img,
+  div {
+    width: 43px !important;
+    height: 43px !important;
+  }
+`;
+var contentWrapperStyles = import_react29.css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  flex: 1;
+  min-width: 0;
+`;
+var getHeaderStyles = (variant) => import_react29.css`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-direction: ${variant === "sent" ? "row-reverse" : "row"};
+`;
 var getBubbleStyles = (variant) => import_react29.css`
   max-width: 100%;
   width: 100%;
   box-sizing: border-box;
   display: flex;
-  gap: var(--spacing-3);
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  gap: var(--spacing-2);
   padding: var(--spacing-4);
   background-color: ${variant === "sent" ? "var(--color-neutral-900)" : "var(--surface-neutral)"};
   color: ${variant === "sent" ? "var(--color-base-white)" : "var(--text-primary)"};
@@ -6093,6 +6123,9 @@ var getBubbleStyles = (variant) => import_react29.css`
   border-bottom-left-radius: ${variant === "sent" ? "var(--radius-lg)" : "0"};
   border-bottom-right-radius: ${variant === "sent" ? "0" : "var(--radius-lg)"};
 `;
+var getTimestampStyles = (variant) => import_react29.css`
+  text-align: ${variant === "sent" ? "right" : "left"};
+`;
 var contentStyles = import_react29.css`
   flex: 1 1 auto;
   min-width: 1px;
@@ -6104,21 +6137,38 @@ var import_jsx_runtime226 = require("@emotion/react/jsx-runtime");
 var MessageBubble = ({
   variant = "sent",
   timestamp,
+  avatarSrc,
+  author,
   className,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { className, css: getRootStyles(variant), children: [
-    timestamp && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-      Text_default,
+  const hasAvatar = !!avatarSrc;
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { className, css: getRootStyles(variant), children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { css: getOuterWrapperStyles(variant), children: [
+    hasAvatar && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: avatarWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+      Avatar_default,
       {
-        size: "xs",
-        color: "var(--text-secondary)",
-        textAlign: variant === "sent" ? "right" : "left",
-        children: timestamp
+        type: "image",
+        src: avatarSrc,
+        alt: author || "Avatar",
+        size: "sm"
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: getBubbleStyles(variant), children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: contentStyles, children }) })
-  ] });
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { css: contentWrapperStyles, children: [
+      author && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: getHeaderStyles(variant), children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Text_default, { size: "sm", fontWeight: "semibold", color: "var(--text-primary)", children: author }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { css: getBubbleStyles(variant), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: contentStyles, children }),
+        timestamp && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+          Text_default,
+          {
+            size: "xs",
+            color: "var(--text-secondary)",
+            css: getTimestampStyles(variant),
+            children: timestamp
+          }
+        )
+      ] })
+    ] })
+  ] }) });
 };
 var MessageBubble_default = MessageBubble;