@ayseaistudio/ui-components 3.8.0 → 3.9.0

package/dist/ChatMessage/ChatMessage.js

@@ -5,8 +5,8 @@ import { Avatar } from "../Avatar/Avatar";
 import { Label } from "../Label/Label";
 export const ChatMessage = ({ className, divClassName, text, frameClassName, avatarColor = "lime", timestamp, avatarLetter, avatarImage, highlighted, avatarPosition = "right", showAvatar = true, }) => {
     const avatarElement = showAvatar && (_jsx("div", { className: `frame-22 ${frameClassName}`, children: _jsx(Avatar, { color: avatarColor, letter: avatarLetter, image: avatarImage, size: "medium", status: "default", version: "default" }) }));
-    const timestampElement = (_jsx("div", { className: `frame-22 ${frameClassName}`, children: _jsx(Label, { bold: "off", className: "label-9", color: "black", size: "small", spacing: "off", stroke: "off", text: timestamp, version: "secondary" }) }));
-    return (_jsxs("div", { className: `chat-message-right ${highlighted ? "highlighted" : ""} ${className}`, children: [avatarPosition === "left" && avatarElement, _jsx("div", { className: "message-baloon", children: _jsx("p", { className: `p ${divClassName}`, children: text }) }), avatarPosition === "right" && avatarElement, timestampElement] }));
+    const timestampElement = timestamp && (_jsx("div", { className: `frame-22 timestamp-wrapper ${frameClassName}`, children: _jsx(Label, { bold: "off", className: "label-9", color: "black", size: "small", spacing: "off", stroke: "off", text: timestamp, version: "secondary" }) }));
+    return (_jsxs("div", { className: `chat-message ${highlighted ? "highlighted" : ""} ${className} chat-message-${avatarPosition}`, children: [avatarPosition === "left" && avatarElement, _jsxs("div", { className: "message-baloon", children: [_jsx("p", { className: `p ${divClassName}`, children: text }), avatarPosition !== "right" && timestampElement] }), avatarPosition === "right" && (_jsxs("div", { className: "avatar-timestamp-container", children: [avatarElement, timestampElement] }))] }));
 };
 ChatMessage.propTypes = {
     hasDiv: PropTypes.bool,

package/dist/ChatMessage/style.css

@@ -1,4 +1,4 @@
-.chat-message-right {
+.chat-message {
   align-items: flex-start;
   background-color: #f7f7f7;
   border: 1px solid;
@@ -6,27 +6,32 @@
   border-radius: 16px;
   display: flex;
   gap: 8px;
-  max-width: 560px;
   padding: 12px;
   position: relative;
   width: 80%;
 }
 
-.chat-message-right.highlighted {
+.chat-message.chat-message-right {
+  align-items: flex-end;
+}
+
+.chat-message.highlighted {
   background-color: rgba(113, 163, 13, 0.05);
   border-color: rgba(152, 211, 23, 1);
 }
 
-.chat-message-right .message-baloon {
-  align-items: flex-start;
+.chat-message .message-baloon {
   display: flex;
   flex: 1;
   flex-grow: 1;
   gap: 12px;
   position: relative;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-end;
 }
 
-.chat-message-right .message {
+.chat-message .message {
   align-items: flex-end;
   align-self: stretch;
   display: flex;
@@ -37,7 +42,7 @@
   position: relative;
 }
 
-.chat-message-right .frame-21 {
+.chat-message .frame-21 {
   align-items: flex-start;
   display: flex;
   flex: 1;
@@ -47,7 +52,7 @@
   position: relative;
 }
 
-.chat-message-right .text-wrapper-3 {
+.chat-message .text-wrapper-3 {
   align-self: stretch;
   color: #3d3d3d;
   font-family: var(--b1-bold-font-family);
@@ -60,7 +65,7 @@
   position: relative;
 }
 
-.chat-message-right .p {
+.chat-message .p {
   align-self: stretch;
   color: #3d3d3d;
   font-family: var(--b1-medium-font-family);
@@ -70,9 +75,13 @@
   letter-spacing: var(--b1-medium-letter-spacing);
   line-height: var(--b1-medium-line-height);
   position: relative;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  margin: 0;
 }
 
-.chat-message-right .frame-22 {
+.chat-message .frame-22 {
   align-items: flex-end;
   display: inline-flex;
   flex: 0 0 auto;
@@ -82,6 +91,18 @@
   position: relative;
 }
 
-.chat-message-right .label-9 {
+.chat-message .avatar-timestamp-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.chat-message .timestamp-wrapper {
+  align-self: flex-end;
+}
+
+.chat-message .label-9 {
   padding: 0px;
 }

package/dist/index.d.ts

@@ -21,7 +21,6 @@ export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";
 export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";
 export { Profile } from "./Profile/Profile";
 export { ProfileSelector } from "./ProfileSelector/ProfileSelector";
-export { ChatMessageLeft } from "./ChatMessageLeft/ChatMessageLeft";
 export { ChatMessage } from "./ChatMessage/ChatMessage";
 export { LabelCheckbox } from "./LabelCheckbox/LabelCheckbox";
 export { Player } from "./Player/Player";

package/dist/index.js

@@ -21,7 +21,6 @@ export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";
 export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";
 export { Profile } from "./Profile/Profile";
 export { ProfileSelector } from "./ProfileSelector/ProfileSelector";
-export { ChatMessageLeft } from "./ChatMessageLeft/ChatMessageLeft";
 export { ChatMessage } from "./ChatMessage/ChatMessage";
 export { LabelCheckbox } from "./LabelCheckbox/LabelCheckbox";
 export { Player } from "./Player/Player";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/ChatMessageRight/ChatMessageRight.d.ts

@@ -1,21 +0,0 @@
-import PropTypes from "prop-types";
-import "./style.css";
-interface Props {
-    className?: any;
-    divClassName?: any;
-    text?: string;
-    frameClassName?: any;
-    avatarColor?: "grey" | "lime" | "mauve" | "zest" | "blue" | "green" | "galliano" | "orange" | "red";
-    timestamp?: string;
-    avatarLetter?: string;
-    highlighted?: boolean;
-}
-export declare const ChatMessageRight: {
-    ({ className, divClassName, text, frameClassName, avatarColor, timestamp, avatarLetter, highlighted, }: Props): React.JSX.Element;
-    propTypes: {
-        hasDiv: PropTypes.Requireable<boolean>;
-        text: PropTypes.Requireable<string>;
-        avatarColor: PropTypes.Requireable<string>;
-    };
-};
-export {};

package/dist/ChatMessageRight/ChatMessageRight.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import "./style.css";
-import { Avatar } from "../Avatar/Avatar";
-import { Label } from "../Label/Label";
-export const ChatMessageRight = ({ className, divClassName, text, frameClassName, avatarColor = "lime", timestamp, avatarLetter, highlighted, }) => {
-    return (_jsxs("div", { className: `chat-message-right ${highlighted ? "highlighted" : ""} ${className}`, children: [_jsx("div", { className: "message-baloon", children: _jsx("p", { className: `p ${divClassName}`, children: text }) }), _jsxs("div", { className: `frame-22 ${frameClassName}`, children: [_jsx(Avatar, { color: avatarColor, letter: avatarLetter, size: "medium", status: "default", version: "default" }), _jsx(Label, { bold: "off", className: "label-9", color: "black", size: "small", spacing: "off", stroke: "off", text: timestamp, version: "secondary" })] })] }));
-};
-ChatMessageRight.propTypes = {
-    hasDiv: PropTypes.bool,
-    text: PropTypes.string,
-    avatarColor: PropTypes.string,
-};

package/dist/ChatMessageRight/index.d.ts

@@ -1 +0,0 @@
-export { ChatMessageRight } from "./ChatMessageRight";

package/dist/ChatMessageRight/index.js

@@ -1 +0,0 @@
-export { ChatMessageRight } from "./ChatMessageRight";

package/dist/ChatMessageRight/style.css

@@ -1,87 +0,0 @@
-.chat-message-right {
-  align-items: flex-start;
-  background-color: #f7f7f7;
-  border: 1px solid;
-  border-color: #e7e7e7;
-  border-radius: 16px;
-  display: flex;
-  gap: 8px;
-  max-width: 560px;
-  padding: 12px;
-  position: relative;
-  width: 80%;
-}
-
-.chat-message-right.highlighted {
-  background-color: rgba(113, 163, 13, 0.05);
-  border-color: rgba(152, 211, 23, 1);
-}
-
-.chat-message-right .message-baloon {
-  align-items: flex-start;
-  display: flex;
-  flex: 1;
-  flex-grow: 1;
-  gap: 12px;
-  position: relative;
-}
-
-.chat-message-right .message {
-  align-items: flex-end;
-  align-self: stretch;
-  display: flex;
-  flex: 1;
-  flex-grow: 1;
-  gap: 4px;
-  justify-content: flex-end;
-  position: relative;
-}
-
-.chat-message-right .frame-21 {
-  align-items: flex-start;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  flex-grow: 1;
-  gap: 6px;
-  position: relative;
-}
-
-.chat-message-right .text-wrapper-3 {
-  align-self: stretch;
-  color: #3d3d3d;
-  font-family: var(--b1-bold-font-family);
-  font-size: var(--b1-bold-font-size);
-  font-style: var(--b1-bold-font-style);
-  font-weight: var(--b1-bold-font-weight);
-  letter-spacing: var(--b1-bold-letter-spacing);
-  line-height: var(--b1-bold-line-height);
-  margin-top: -1.00px;
-  position: relative;
-}
-
-.chat-message-right .p {
-  align-self: stretch;
-  color: #3d3d3d;
-  font-family: var(--b1-medium-font-family);
-  font-size: var(--b1-medium-font-size);
-  font-style: var(--b1-medium-font-style);
-  font-weight: var(--b1-medium-font-weight);
-  letter-spacing: var(--b1-medium-letter-spacing);
-  line-height: var(--b1-medium-line-height);
-  position: relative;
-}
-
-.chat-message-right .frame-22 {
-  align-items: flex-end;
-  display: inline-flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  gap: 6px;
-  justify-content: center;
-  position: relative;
-}
-
-.chat-message-right .label-9 {
-  padding: 0px;
-}