@ayseaistudio/ui-components 3.4.0 → 3.5.0

package/dist/ChatMessage/ChatMessage.d.ts

@@ -0,0 +1,25 @@
+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;
+    avatarPosition?: "left" | "right";
+    showAvatar?: boolean;
+}
+export declare const ChatMessage: {
+    ({ className, divClassName, text, frameClassName, avatarColor, timestamp, avatarLetter, highlighted, avatarPosition, showAvatar, }: Props): React.JSX.Element;
+    propTypes: {
+        hasDiv: PropTypes.Requireable<boolean>;
+        text: PropTypes.Requireable<string>;
+        avatarColor: PropTypes.Requireable<string>;
+        showAvatar: PropTypes.Requireable<boolean>;
+        avatarPosition: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/ChatMessage/ChatMessage.js

@@ -0,0 +1,16 @@
+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 ChatMessage = ({ className, divClassName, text, frameClassName, avatarColor = "lime", timestamp, avatarLetter, highlighted, avatarPosition = "right", showAvatar = true, }) => {
+    const frameElement = (_jsxs("div", { className: `frame-22 ${frameClassName}`, children: [showAvatar && (_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" })] }));
+    return (_jsxs("div", { className: `chat-message-right ${highlighted ? "highlighted" : ""} ${className}`, children: [avatarPosition === "left" && frameElement, _jsx("div", { className: "message-baloon", children: _jsx("p", { className: `p ${divClassName}`, children: text }) }), avatarPosition === "right" && frameElement] }));
+};
+ChatMessage.propTypes = {
+    hasDiv: PropTypes.bool,
+    text: PropTypes.string,
+    avatarColor: PropTypes.string,
+    showAvatar: PropTypes.bool,
+    avatarPosition: PropTypes.oneOf(["left", "right"]),
+};

package/dist/ChatMessage/index.d.ts

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

package/dist/ChatMessage/index.js

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

package/dist/ChatMessage/style.css

@@ -0,0 +1,87 @@
+.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;
+}

package/dist/ProfileSelector/style.css

@@ -6,7 +6,7 @@
 }
 
 .profile-selector *{
-  cursor: pointer;
+  cursor: pointer !important;
 }
 
 .profile-selector .div-wrapper {

package/dist/index.d.ts

@@ -22,7 +22,7 @@ export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";
 export { Profile } from "./Profile/Profile";
 export { ProfileSelector } from "./ProfileSelector/ProfileSelector";
 export { ChatMessageLeft } from "./ChatMessageLeft/ChatMessageLeft";
-export { ChatMessageRight } from "./ChatMessageRight/ChatMessageRight";
+export { ChatMessage } from "./ChatMessage/ChatMessage";
 export { LabelCheckbox } from "./LabelCheckbox/LabelCheckbox";
 export { Player } from "./Player/Player";
 export { Radio } from "./Radio/Radio";

package/dist/index.js

@@ -22,7 +22,7 @@ export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";
 export { Profile } from "./Profile/Profile";
 export { ProfileSelector } from "./ProfileSelector/ProfileSelector";
 export { ChatMessageLeft } from "./ChatMessageLeft/ChatMessageLeft";
-export { ChatMessageRight } from "./ChatMessageRight/ChatMessageRight";
+export { ChatMessage } from "./ChatMessage/ChatMessage";
 export { LabelCheckbox } from "./LabelCheckbox/LabelCheckbox";
 export { Player } from "./Player/Player";
 export { Radio } from "./Radio/Radio";

package/package.json

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